第三章 研究設計
第一節 系統開發階段
壹、 分析階段
根據圖 1 的研究架構與步驟流程所示，本研究之第一步驟為「分析階段」，
分析網路霸凌事件的內容，運用情境式體驗網站之策略，透過資訊科技的運用，
融入情境式設計理念，同時評估現有環境與資源條件，進而規劃出情境式體驗網 站所應具備的內容及功能。以下分別就「內容分析」、「資源與限制分析」及「系 統功能分析」敘述如下：
一、 內容分析
經現行教材的分析結果中，發現在網路霸凌的宣導中，多數是使用文字做宣 導，也有少部分影片作為宣傳，可見目前在網路霸凌這一塊的資訊仍然是付之闕 如，多數都只是在事後的補救。在統計數據方面，多數也是著重在遭霸凌的比例，
鮮少有針對內容特別著墨之研究。朱美瑰（2007）在「看不見的拳頭－高雄市國 中生網路霸凌經驗之研究」中，將網路霸凌的內容大致可分為三類：文字、圖片、
影像。而其中，又最常出現在底下五種形式：
〈一〉令人難堪的票選，
〈二〉尷尬影像的張貼，
〈三〉人身攻擊的字眼，
〈四〉恐嚇威脅的言論，
〈五〉性攻擊的訊息，
而本系統的主要目的，就是讓受試者能完全了解網路霸凌的情境，因此，本 系統會將文字、圖片、影像安插在五種形式中出現，總共將出現六個不同事件，
受試者在首頁輸入的姓名，進行變數的更替，以下為體驗歷程區內容範例：
例如：受試者名字為 黃小明
(一) 事件一：令人難堪的票選
點進事件一之後，將會跳出一個票選活動，主題為「大家認為班上誰的腦袋 最差，最像笨蛋？」
１、當然是黃小明第一囉！
２、除了黃小明以外，大家都很聰明。
３、那還用說，黃小明說自己第二笨，那就沒人第一笨了。
４、以上都對。
(二) 事件二：尷尬影像的張貼
此事件會先透過 webcam 現場幫受試者拍照，並透過浮水印效果，出現一張 標題為「怎麼會有長的這麼像黃小明的兄弟？」，如圖 3-2，並在圖片下設立留言 區，可看受試者的回饋為何？
圖 2 尷尬影像範例圖
(三) 事件三：人身攻擊的字眼
此事件會出現一篇留言，便在文章中責罵黃小明，說他做事慢的跟烏龜一 樣，笨的跟豬一樣，又喜歡耍小聰明….等等，並在文章下面設立回覆區，讓受 試者可以回覆自己的感受，以期了解受試者第一時間的回應為何。
(四) 事件四：恐嚇威脅的言論
此事件會出現一篇部落格形式文章，文章中就會夾帶恐嚇性言語，威脅黃小 明下課最好不要去上廁所，我已經看你不爽很久了，如果下課讓我在廁所遇到，
一定好好揍你，並在文章下面設立回覆區，讓受試者可以回覆自己的感受，以期 了解受試者第一時間的回應為何。
(五) 事件五：性攻擊的訊息
此事件會出現一個大標題，標題中包含黃小明與性器官或性暗示，語言內容 充滿攻擊意味，並在文章下面設立回覆區，讓受試者可以回覆自己的感受，以期 了解受試者第一時間的回應為何。
(六) 事件六：暴力事件的影片
此事件將會放進校園暴力事件的影片，並在影片標題加入受試者的名字，標 題以恐嚇主題命名，並在影片下面設立回覆區，讓受試者可以回覆自己的感受，
以期了解受試者第一時間的回應為何。
二、 資源與限制分析
資源與限制分析的主要目的，在於考量現實環境的條件加以分析，一方面可 作為設計情境式網路霸凌體驗模擬網站功能的參考依據，另一方面也能儘早發現 問題、排除問題，以助於預估發展的進度，以下分別就資源與限制進行分析：
(一) 資源分析
１、人力、設備資源
(1)資訊老師及受試學生之導師提供對網路霸凌的案例及建議。
(2)用來設計多媒體與 php 程式的筆記型電腦一部。
(3)支援 php 與 MySQL 的網路虛擬主機，作為存放提供測試網頁之用。
(4) 美 工 編 輯 軟 體 Photoshop 與 Flash 各 一 套 ， 開 發 網 頁 程 式 的 軟 體 Dreamweaver 一套，以及影像側錄軟體 Anicam 一套。
２、中英文參考文獻
(1)情境設計理論的相關文獻。
(2)網路霸凌的相關文獻。
(3)多媒體及網頁程式的工具書。
３、網路資源 (1)搜尋引擎
Google：http://www.google.com/
(2)參考的網站
刑事警察局 拒絕網路霸凌：http://bullying.cib.gov.tw/
(二) 限制分析
１、研究對象
本研究僅以台南縣○○國小高年級隨機抽樣一個班級，每班立意抽樣五名男 學生、五名女學生，共十個學生，及該班導師為研究對象，由於國內各區域的教 學環境、學生家庭背景以及各地區網路普及程度的差異，都會對影響研究對象在 網路使用頻率的不同，結果雖無法概推至各級以及各地區的學校，但仍可供相關 研究參考之用。
２、研究內容
由於目前國內對網路霸凌的研究相當零散且稀少，因此並無統一對網路霸凌 內容的統整，因此本研究將採用朱美瑰（2007）「看不見的拳頭－高雄市國中生 網路霸凌經驗之研究」中的網路霸凌形式與內容，進行整理並加入模擬情境的範 例，當作體驗模擬網站的內容規劃及設計依據，雖無法完全呈現網路霸凌的具體 行為，但仍可供相關研究參考之用。
３、其他
限於時間與人力，情境模擬網站的內容相當有限且不易變動，美工方面也無 法滿足每個人的視覺需求，可能無法達到最佳狀態，需有長遠的分析計畫，使網 路資源隨時更新，藉以豐富網站的內容，才能隨時符合實際的需求
三、 系統功能分析
由於本研究所發展之情境式網路霸凌體驗模擬網站，乃基於研究受試者遭遇 網路霸凌反應的需求，藉以深度了解受試者最直接的反應，因此在功能及內容的 設計上，係以考究文獻的網路霸凌形式與內容為基礎，規劃出以下兩項系統功能：
(一) 體驗歷程區
本區係將網路霸凌的事件分成文字、圖片、影片共三種內容，主要透過令人 難堪的票選、尷尬影像的張貼、人身攻擊的字眼、恐嚇威脅的言論、性攻擊的訊 息、暴力事件的影片共六種形式呈現，歷程中會安插六種事件在受試者的體驗歷 程當中，當受試者點進每個不同事件時，便會對受試者產生各種不同的網路霸凌 事件，藉此讓受試者親身體驗模擬實際的網路霸凌情形，並透過側錄軟體，在受 試者同意的情形下，錄下受試者的電腦使用反應與表情動作變化，藉以作為受試 者反應分析階段的資料，再加以分析。
(二) 心得討論區
在受試者經歷過網路霸凌情境模擬的體驗歷程後，有哪些心得想與大家分 享？此系統功能可以讓受試者採開放式發言，自由留下關於對經過模擬的網路霸 凌歷程後的心得。
貳、 設計階段
依據圖 1 研究架構與流程，本研究的設計階段，是根據分析結果，規劃體驗 網站的內容及架構。在正式進入製作之前，擬完成下列設計項目：
一、 網站架構設計
本網站依功能，主要區分為兩大部份，分別為體驗歷程區及心得討論區，其 架構如圖 3，採順序法進行，在前一階段尚未結束前，無法選擇下一階段的功能。
圖 3 系統架構圖
二、 螢幕設計
為了使介面易於操作與閱讀，螢幕的設計採一大區塊式，至於螢幕的背景顏 色及風格以黑色為主，黑色代表神秘與未知的領域，故以黑色為背景引領受試者 進入一個未知的旅程。
圖 4 首頁圖例
圖 5 體驗歷程區圖例 首 頁
姓名：_______________
進入旅程 首頁
體驗歷程區
心得討論區
文字霸凌 圖片霸凌 影片霸凌
E01 文字
E02 圖片
E03 文字
E04 文字
E05 影片
E06 影片
圖 6 事件顯示區圖例
圖 7 心得討論區圖例
介面的設計主要是以簡潔、易於操作、閱讀容易為主，另一方面因考量視覺 情境式規劃，介面以大量圖形為導向，搭配文字、聲音與媒體相互結合，提供受 試者簡易的功能操作介面，避免過多的文字敘述，同時以生動的圖片及動晝來提 高受試者的興趣。並在體驗歷程中安插各個事件，融入大量的視覺情境元素，讓 受試者容易融入情境中。
三、 互動設計
本情境式網路霸凌體驗模擬網站主要是用來模擬受測者實際遭遇網路霸凌 時的情境，因此，在遭遇事件時，皆可以像平常使用網路般進行回饋與反應，其 主要功能係為引導使用者能以最自然的反應進行回饋，以增加情境模擬的真實
心得討論區
內容呈現區 事件顯示區
內容呈現區
反應回饋區
性。並在模擬歷程結束後，可進行心得討論，藉此功能與其他人交換心得，而交 流討論又是設在歷程之後，因此不至於影響施測反應的真實性。
參、 發展階段
依據圖 1 研究架構與流程，本研究的發展階段乃根據分析階段及設計階段 的需求，進行資料的搜尋及綱站教材內容與功能的製作，並規劃相關的工作流程 與分配，針對教材內容及網站功能的特性選擇適當的發展工具。以下分別依「工 作規劃」、「發展流程」及「發展工具」三方面說明之：
一、 工作規劃
本研究之發展階段，主要的工作內容包含了計畫管理、事件與內容設計、美 術設計、程式設計及內容校正等五項，但因人力與經費的限制，皆由研究者一人 單獨完成，以下僅就該工作內容作介紹：
〈一〉計畫管理
計畫管理的工作主要是規劃專案，並負責各項工作進度的監控與協調。首 先，於設計階段進行教材內容及網站功能的評估與規劃；再者，於教材及功能製 作階段時，負責品質監控與調整；最後在網站完成後進行驗收成果。
〈二〉事件與內容設計
事件與內容設計主要是負責研究分析及規劃置入網站中的內容。針對事件與
事件與內容設計主要是負責研究分析及規劃置入網站中的內容。針對事件與