國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
3-2.
系統設計
本研究之系統的設計理念是希望在行動載具上面以 web 2.0 的概念加上故事的元素 去創造一個行動協作數位敘事的平台(如下圖 3-2)。
圖 3-2. 系統設計理念圖
此行動協作數位敘事平台實作於 Android 系統上，與先前案例中所提過之相關應用 程式不同的地方有幾點：
1.加入協作編輯。
2.支援離線編輯。
3.以多媒體形式讓使用者進行數位敘事。
4.以地理位置為限制，使用者必須親臨敘事地點才能夠閱讀。
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
本系統平台除了架構設計有結合手機特性之外，與使用者第一線接觸的操作介面，
本研究也以人機互動介面設計概念為出發點，站在使用者的角度來進行操作介面之設計，
希望能夠提供給使用者一個友善且符合手機特性的操作介面。此部分為本系統之操作介 面設計之說明：
首先使用者必須申請本系統之帳號(圖 3-3)，若已有帳號則需先進行登入動作，登入 後系統會自行記憶帳號密碼(圖 3-4)，當使用者下一次使用時不需再次輸入。
圖 3-3. 申請帳號畫面 圖 3-4. 系統登入畫面
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
系統登入主畫面採四個分頁的設計(如圖 3-5)，此四個分頁為系統主要功能，也是使 用者經常會使用到的功能，因此以分頁設計，方便使用者切換點選。此畫面顯示的是使 用者所在地附近目前可供查詢的敘事主題。圖 3-6 為點選地圖上的錨點後，系統會將附 近的敘事主題用文字方式顯現在下方選單，此設計是為了以後若敘事主題過多，很難在 地圖上點選到所想要的主題，就可以在地圖上點選所想要資訊的大致位置後，於下方選 單挑選想要瀏覽的敘事內容。
圖 3-5. 系統主畫面 圖 3-6. 點選地圖上錨點後的條列選單
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
圖 3-7、3-8 及 3-9 為個人檔案頁面，頁面中將顯示個人的積分值(星星數)、好友人 數、協作夥伴人數以及發表過的內容數量，其中積分值由使用者參與系統的熱絡程度而 給予積分，不論是發表文章或是收藏、瀏覽文章都能夠增加積分，鼓勵使用者多多在平 台上活動；而使用者發表過的內容的呈現方式有三種，分別為：條列式(圖 3-7)、以縮圖 排列(圖 3-8)以及在地圖上呈現(圖 3-9)等三種方式。
圖 3-7. 個人檔案頁面-條列 式
圖 3-8. 個人檔案頁面-縮圖 顯示
圖 3-9. 個人檔案頁面-地圖 上陳列
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
圖 3-10 為 My Stuff 頁面，內容包含了我的朋友(如圖 3-11)、我的收藏(如圖 3-13)以 及購物車物品(如圖 3-15)，使用者能夠從我的好友頁面連結到好友的個人檔案頁面(如圖 3-12)；也能夠從我的收藏連結到喜愛的收藏去瀏覽其內容，將此些內容統合到一個頁面 當中，是為了讓使用者不必東找西找喜愛的內容頁面；而「購物車物品」的設計是讓使 用者能夠存取他人的故事素材，讓平台的內容能夠有高度的交互作用，以期能夠產製的 內容更加多元豐富，另外，購物車頁面設計有預覽的功能(如圖 3-16、3-17、3-18 )，讓 使用者可以在此頁觀看自己加選了哪些的內容到購物車當中，以方便使用者對購物車內 容進行管理。
圖 3-10. My Stuff 頁面 圖 3-11. My Friends 頁面 圖 3-12. 好友的個人檔案 頁面
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
圖 3-13. My Favorites 頁面 圖 3-14. My Favorites 內容 瀏覽頁面
圖 3-15. Shopping Cart Stuff 頁面
圖 3-16. Shopping Cart Stuff 圖 3-17. Shopping Cart Stuff 圖 3-18. Shopping Cart Stuff
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
新增頁面如下圖 3-19，其新增方式又分為單一作者新增的內容以及多個作者共同編 寫新增的內容，而協作的機制在此二者新增方式皆有加入。單一作者協作功能的部分為 使用購物車去蒐集敘事素材後，在新增頁面時將素材加入使用(如圖 3-21)，素材在不同 的作者拼湊後成為一個新的敘事內容(如圖 3-23)；而多個作者共同編輯的內容，發起人 必須與其他作者互為好友才能夠邀請共同編寫(如圖 3-26)，而這部分的協作方式，除了 也能夠使用購物車素材之外，因為是多人共同編寫，每個人的購物車素材也不盡相同，
因此預期能有更豐富的內容產生，此外，多人共同編寫內容更隨使用者用途的不同，進 而有不同型式的內容產製，同時這也改變了原本的溝通模式。
圖 3-19. 新增內容頁面 圖 3-20. 單一作者新增內 容畫面
圖 3-21. 單一作者新增內 容-使用購物車物品之協作 型式
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
圖 3-22. 單一作者新增內 容-預覽購物車中的敘事素 材
圖 3-23. 單一作者新增內 容-選擇購物車中的敘事素 材
圖 3-24. 單一作者新增內 容-完成敘事內容編寫畫面
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University
圖 3-28. 若為共同協作者則可在 Menu 當 中找到編輯的 Button
圖 3-29. 若此內容為個人新增之內容則可 在 Menu 當中找到編輯的 Button
以上為系統的操作計面設計介紹。另外，編輯完後的內容，會暫存在手機的小型資 料庫上，待能連網時再與 Server 作同步更新，使得內容傳遞更即時有效。
‧ 國
立 政 治 大 學
‧
Na
tiona
l Ch engchi University