概念設計

在這個階段必須考慮到視覺部份，微波效應由畢籌小組進行全面性的視覺設 計，包含文宣品、展場設計、各種刊物等，因此在 app 部份也需保持與畢業展 的視覺統一性，使用畢籌小組提供的原始檔案進行開發。原型經過確認無誤後就 可以依程式需要切成圖片交給程式撰寫人員。底圖、按鈕、icon、導覽列、工具 列等各控制元件所需的圖片尺寸、規格各不相同。如圖 5-21 歡迎頁，這個畫面為 滿版呈現沒有 Status Bar ，高度為 480px。

圖 5-21 微波效應 app 歡迎頁

歡迎頁之後出現的是微波效應的首頁選單，如圖 5-22，分成 5 個主要大按 鍵。展覽資訊用地圖的 icon 形象，如果想知道這個展覽的地點說明便要點這個按 鈕。右邊的 Facebook 粉絲團略修改 Facebook 的 logo。左下角展覽作品以 Windows 系統的圖片照片 icon 為代表意象，也有點畫框的風格。右方我的搜集 可說是微波效應的彩蛋，隱藏起來的小秘密列表。中間最大的按鍵為 QRCode 結 合相機，表達出使用相機鏡頭掃描的意義。全畫面右上角有個圓型的小 icon，可 進入開發人員頁面。除了歡迎頁與使用到鏡頭的畫面為 480px 滿版顯示外，其 它頁面皆扣除 Status Bar 的高度，畫面可設計範圍是 460px，在設計規範上的原 點（0 , 0）也是以扣除 Status Bar 後的最左上角為起點開始計算。

圖 5-22 首頁選單

在圖 5-23 有了 Navigation Bar 的設計，在標示畫面尺寸時會以 Navigation Bar 的左上角為起點，用 x 軸和 y 軸標示元件位置。表格中若有下一頁選項就 會出現「>」，稱之為 Indicator 的符號，在切圖上會有 2 種作法。一是直接和表 格選單底圖做在一起，另一個是和底圖分開切成 2 張圖片。在展覽資訊頁中 Indicator 不是每個欄位都會出現，因此分開切成 2 張圖，由程式控制 Indicator 出現的方式。

圖 5-23 展覽資訊

展覽主題頁面將直接放置畢業展海報，這會是參觀者最熟悉的視覺設計。在 海報下方會加入文字說明這次展覽的主題。見圖 5-24。

圖 5-24 展覽主題

點擊地址欄位，跳出 Alert 視窗，說明「您將跳出微波效應 app，開啟地圖 使用路徑規劃」。如圖 5-25，避免使用者在誤觸的情況下跳離原本操作中的 app。

圖 5-25 開啟路徑規劃

除歡迎頁之外，這是另一個滿版的畫面為使用鏡頭的頁面。和歡迎頁不同的 是，使用鏡頭的頁面滿版設計為 iOS 系統限制，歡迎頁是否出現 Status Bar 可 依程式撰寫人員自由控制，如圖 5-26。

圖 5-26 QRCode 掃瞄

經過考量，除了親朋好友之外，來參觀畢業展的參觀者注意力會專注在作品 本身，對於作者本人的興趣會是在參觀過作品之後，因此在圖 5-27 作品列表部 份以作品圖為主，作者名稱和作品名稱置於右下角。

圖 5-27 作品列表

作品介紹詳細頁裡，上方大圖可以左右滑動看更多圖片，在設計理念的文案 下方有語音導覽按鈕，可點擊開啟語音導覽功能，如圖 5-28。

圖 5-28 作品介紹

語音導覽和影片播放所需的操作類似，在畫面空間狹小的情況下為保持畫面 精簡，將多餘的控制元件全數取消，只留下播放、暫停、進度條，見圖 5-29。在 播放時，播放按鈕會自動切換成暫停按鈕。

圖 5-29 語音導覽

為保持全班同學大頭照片的統一與個人隱私、資訊安全需求，放棄放置真人 照片的作法，將全數使用 Q 版人物圖，如圖 5-30。

圖 5-30 作者介紹

資訊人員在撰寫程式或軟體時，會喜歡加點「彩蛋」，取自於復活節尋找彩 蛋的習俗。通常會埋在某個功能裡，需要一些特殊操作方式或指令才能發覺。在 微波效應 app 中也加入彩蛋的構想，不同的是，使用者不需要特殊操作方式或 指 令 ， 只 要 在 展 場 中 掃 瞄 隱 藏 在 各 地 的 QRCode 。 如 圖 5-31 ， 未 掃 瞄 過 的 QRCode 會加深顏色無法點擊，一旦掃瞄後就會解除鎖定。

圖 5-31 我的搜集

搜集品會是以一張圖片和文字的方式呈現，目前將放置同學的畢業感言與各 校外教學的回憶照片為主。這個功能對參觀者的意義不大，但對展覽者會是個無 可取代的寶貴回憶。希望展覽者完成這個展覽的同時，不只是把創作作品擺進展 場，在展場走來走去而已，能夠拿著 iPhone 好好搜齊同學們的畢業感言，完成 一本微型的畢業專刊。見圖 5-32。

圖 5-32 搜集品解密

圖 5-33 為首頁進入的開發者頁面，除了開發人員、協力人員外，另放置師 大校徽。

圖 5-33 開發人員頁