國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4.2 響應式網頁設計
響應式網頁設計（Responsive Web Design, RWD），或稱自適應、回應 式、對應式網頁設計，是種網頁設計的技術，能讓手機、平板、筆電、桌電 等使用同一網站的圖文內容及資料庫。在不同尺寸或解析度的行動裝置或螢 幕上，網頁程式會根據使用者的裝置設備，做出符合版面大小的內容呈現。
如此既可減少使用者進行縮放、平移和捲動等額外操作，也能提昇畫面的可 瀏覽性及使用介面的親和度。我們在進行網站功能設計時，使用了響應式網 頁設計，讓使用者方便在當下情境和手邊設備進行意見領袖的探索。實作響 應式網頁設計需要設定可視區域（Viewport）、設計網路系統（Grid System）
和媒體查詢（Media Query）。
HTML5 提供<meta>標籤讓網頁設計師能控制可視區域（Viewport）。可視 區域是使用者在網頁上的可見區域，它會隨著顯示設備尺寸而做對應變化。
<meta>中的 viewport 元素為提供瀏覽器有關如何控制頁面尺寸和縮放的說 明，如圖 20 所示。其中 width=device-width 是指將頁面寬度設置為遵循設 備的螢幕寬度，initial-scale=1.0 是指畫面載入初始的縮放比例為 100%。
圖 20. 網頁中包含的<meta> 可視區域元素
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
在設計網格系統（Grid System）上，我們參考 Bootstrap 提供的一套響應 式、移動設備優先的流式網格系統。它會隨著可視區域的增加，自動分成最 多 12 列，以一系列包含內容的行和列來創建頁面佈局。下列為 Bootstrap 網 格系統的運作原理2：
1. 行必須放置在.container class 內，以獲得適當的對齊（alignment）和內邊 距（padding）
2. 使用行來創建列的水平組
3. 內容應放置在列內，且唯有列可以是行的直接子元素
4. 預定義的網格類，比如.row 和.col-xs-4，可用於快速創建網格佈局
5. 列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通 過.rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移
6. 網格系統是通過指定您想要橫跨的十二個可用的列來創建
圖 21. 設計網格系統
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
@media 規則用於媒體查詢（Media Query）。媒體查詢是種有條件的 CSS 規則，只適用於基於某些規定條件的 CSS。若滿足那些條件，則會應用於相 應樣式。Bootstrap 中的媒體查詢允許使用者基於可視區域大小移動、顯示並 隱藏內容。如圖 22 的媒體查詢示意圖在 LESS 文件中使用，用來創建 Bootrap 網格系統中關鍵的分界點閥值。媒體查詢可以用於檢查許多內容，例如：
1. 可視區域的寬度和高度
2. 設備的寬度和高度
3. 方向（Orientation），橫向或縱向模式下的平板電腦或手機
4. 解析度（Resolution）
圖 22. 網格系統中關鍵的分界點閥值
我們使用 Chrome 開發者工具3來測試本系統是否符合響應式網頁設計。
圖 23 即為我們響應式網頁設計的實作結果。我們將頁面拉大或縮小，可以 改變頁面的呈現方式。若使用者用解析度較高（如電腦螢幕）來操作系統，
會以並排式呈現，如同藍色區域；若使解析度較低（如手機），則改為單欄呈 現，如同黃色區域。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 23. 響應式網頁設計實作示意圖 4.3 視覺化呈現
本系統使用的視覺化圖表主要有二：針對推文的時序發佈圖、語系圓餅 圖，和針對候選人彼此連結的關係網路圖。
推文的時序發佈圖、語系圓餅圖我們使用 Morris.js4實作。它是 Javascript 的函式庫，適合用來表現統計相關的圖表。我們使用其中的 Area Chart 實作 出如圖 24 的時序發佈圖、Donut Chart 實作出如圖 25 的圓餅圖，期望研究 者能因此更直觀地了解資料集概況。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 24. 推文時序發佈示意圖
圖 25. 推文語系圓餅示意圖
而在意見領袖候選人的關係網路圖上，我們使用一個開源的輕量級 Javascript 的網路圖（network graph）套件 Sigma.js5，此函式庫能幫助使用者 在 Web 應用中繪製創建圖形，也能夠讓用戶在網頁上進行操控。它是基於 HTML5 畫布的實現，能夠生成靜態或者動態的互動網路圖形。也因其是個 獨立、不依賴第三方的圖形函式庫，能支持主流瀏覽器，因此我們選擇利用 此套件來實現候選人間的關係網路圖，如圖 26 所示。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
以圖 26 為例，我們可以看到，每個節點的定義都是一位候選人，節點 越大代表其追蹤帳號數越多，顏色則取決於候選人所用的語言。當兩位候選 人有共同追蹤者，就會建立連線，而連線的深度與寬度，則與共同追蹤者人 數呈正相關。布局（layout）上我們採用 Force Atlas 2 演算法[46]。它是種模 仿物理世界中的引力和斥力，計算網路節點間的力關係並重新佈局直到力平 衡。候選人彼此間的距離將因彼此的連結強弱推遠或拉近，而研究者也可以 隨時用滑鼠介入，調整出適合觀察的佈局樣貌。
圖 26. 候選人間彼此關係視覺化示意圖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4.4 範例說明
以下為探索事件並找出意見領袖的說明範例。如同一開始 1.2 節的研究 目標所提，此系統的設計是要幫助研究者找出事件中的重要連結者，但在此 範例中我們將以找到其中屬於傳播領域所討論的意見領袖為目標。首先我們 連上系統後，會看到簡介畫面，如圖 11 所示。在觀看完研究動機、研究目 標，和前導影片後，我們需要輸入帳號密碼。帳號我們輸入”andrew”，密碼 則任意皆可，如圖 27 所示。按下登入後，我們進到「資料集分析」。
圖 27. 系統帳號登入範例圖
在「資料集分析」中，我們選擇復興航空事件做觀察，並維持原本的日 期範圍，在按下「顯示各項指標數值」後，得到此事件資料集的數值分析結 果，如圖 28 所示。我們看到了在此事件中約有五十萬筆推文，其中約有二 十二萬個使用者參與討論，並使用了七千多個主題標籤。接著是此事件的討 論熱度，隨著 2015 年 2 月 4 號的飛機墜毀失事而達到高峰。而推文的語言
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
標籤的統計前三名（TransAsia、GE235、taiwan），和推文附帶網址的網域統 計包含了 CNN、BBC 等新聞媒體上，得知此事件的確主要是在討論復興航 空空難，並有國際媒體參與報導。了解上述能助我們熟悉資料集的資訊後，
我們按下「下一步」，進到「以個別指標找出領袖」。
圖 28. 復航空難事件資料集分析範例圖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
在「以個別指標找出領袖」中，我們用四種方法（Retweet、Mention、
Follower、Favorite）列出符合條件的意見領袖候選人，並挑選出想進一步 確認的幾位加以觀察。我們對四種方法皆各列出 40 名候選人，在觀察其名 稱、簡介、加入日期（符合在現實世界中判斷意見領袖的 Celebrities、Self-identification 法）和在此事件所發的前三篇熱門推文（以判斷與此次事件 的相關性）後，我們選出了三位候選人（yuhan wang、Steve Herman、Jim Roberts）和兩個官方媒體（CNN、BBC）移至候選人聚焦區做進階觀察，如圖 30 所示。
在候選人聚焦區中，我們進一步地看到被聚焦者在事件中被多少人轉推 和提及，並由大至小地降冪排列，這是系統中判斷誰是意見領袖的主要指標，
符合在現實世界中判斷意見領袖的 Staff Selected 精神，如圖 31 所示。於 此同時，我們藉由系統直接連結至此候選人的推特個人檔案（如圖 32），和 第三方網站 RetweetRank 對其的評價（如圖 33），加深我們對候選人的認識，
也加強我們的選擇把握。選好要聚焦的候選人後，我們按下「下一步」，進到
「以綜合指標選出領袖」。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 30. 復航空難事件以個別指標找出領袖範例圖
圖 31. 復航空難事件聚焦區領袖呈現範例圖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 32. 候選人 Steve Herman 個人檔案範例圖
圖 33. 候選人 Jim Roberts RetweetRank 評價範例圖
在「以綜合指標選出領袖」中，我們將對聚焦出的候選人做誰是意見領 袖的最後確認，如同圖 34。上個步驟中我們加上了兩個官方媒體（CNN、BBC）， 是因為其在「資料集分析」的推文連結網域統計排前五名，我們能在此藉由 其發文內容，了解事件發展，和他們在此事件報導中所扮演的腳色，如圖 35 所示。而在此次的候選人比較中，我們並未看到彼此的被轉推人數和被提及 人數互有消長，故不加以調整權重。最後我們將三位候選人移至待存區，並
‧
Steve Herman 和 Jim Roberts 的共同追蹤者最多，在彼此追蹤者數量都達五 位數的情況下，yunhan wang 影響到的則顯為另一族群，我們能因此看到意 見領袖們在網路世界中帶來的不同觸及程度。於此同時，我們也檢驗選出者
Expression of values 自我敘述、推文內容 Professional competence 頭銜、第三方評分(retweetrank) Nature of their social network. 粉絲人數；事件被轉推、提及人數
表 9. 復航空難事件選出領袖特徵檢驗表
領袖特徵 yunhan wang Steve Herman Jim Roberts 自我敘述 喜愛日本的台灣人 美國之音的記者 Mashable 的總編 推文內容 發佈空難消息 發佈空難消息 發佈空難消息
頭銜 無 記者 CCO
retweetrank 114,265(PR98.6) 109,514(PR98.6) 4,711(PR99.9) 粉絲人數 40,000 75,200 203,700 事件被轉推人數 6,780 1,638 689 事件被提及人數 6,854 2,251 826
我們把觀察到的記在備忘錄（如圖 37），並確認待存區為所要的候選人 後，按下「下一步」，進到結果。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 34. 復航空難事件以綜合指標選出領袖範例圖
圖 35. 復航空難事件 CNN 所發推文統計範例圖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 36. 復航空難事件意見領袖關係網路範例圖
圖 37. 復航空難事件備忘錄使用範例圖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
在結果報告區中，我們可以得到在此次探索中所調整的參數，選出的意 見領袖，和對整體事件留下的備忘錄，如同圖 38。我們可以就當下介面直接 連結到意見領袖的推特個人檔案，也可以將整體內容下載成 csv 檔以做他用，
如同圖 39。以上即為選用復興航空空難，找出三位意見領袖的範例說明。
圖 38. 復航空難事件結果報告區範例圖
圖 39. 復航空難事件結果報告離線檔案範例圖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
第 5 章 實驗設計與結果分析
我們根據第 3 章、第 4 章的描述所設計實作出的系統，設計了一套實驗 流程。在實際邀請受試者測試系統前，我們額外邀請兩位受測者參與系統的
我們根據第 3 章、第 4 章的描述所設計實作出的系統，設計了一套實驗 流程。在實際邀請受試者測試系統前，我們額外邀請兩位受測者參與系統的