微波效應：展覽導覽型app分析與創作

全文

(1)Microwave Effect: Analysis And Creation of Exhibition Navigation Application.

(2) 摘要本研究為製作臺灣師大設計所設計創作專班 101 級畢業展「微波效應」的展覽導覽 app ，將以 iOS Human Interface Guidelines 角度切入，分析檢討現有展覽導覽型 app。包含架構層次、介面設計規範、易用性等三個部分，列舉該 app 優缺點與可改良之處。針對 24 名展覽者進行問卷調查， 1. 製作這個 app 的目的。2. 預期這個 app 帶來什麼樣的效果。3. 這個 app 需要包含哪些內容。最後依照使用者經驗元素將 app 區分成策略、範圍、結構、骨架、表層，採用使用者經驗藏寶圖之步驟並導入研究結果完成各個元素：敘述故事、找出中心思想、創建人物、代入情境、整理清單、資料分析、使用者調查、製作概念圖、製作系統圖、訂定頁面流程、繪製 Wireframe 線稿、設計故事板、概念設計、原型設計。最後將此原型交與程式撰寫人員進行開發，最後完成 iPhone app 並送至 App Store 審核上架。未來開發 iPhone app 可依照此流程與各階段注意事項，提供較優良的使用者經驗與操作介面。. 關鍵字：互動設計、介面設計、使用者經驗、易用性、iPhone、app. I.

(3) Abstract This study was research and design about exhibition navigation app "Effect of Microwave - The 9th Graduation Exhibition By NTNU Graduate of Design". The study began with iOS Human Interface Guidelines and analysis of exhibition navigation apps in App Store. It listed pros and cons about above apps in aspects of system hierarchy, human interface guidelines and usability. Then examined the purpose, influence and contents of the app by providing questionnaire to exhibiters. Followed five layer of strategy, scope, structure, skeleton and surface in The Elements of User Experience. And designed step by step according to stories, proverbs, personas, scenarios, content inventories, analytics, user surveys, concept maps, system maps, process flows, wireframes, storyboards, concept designs and prototypes in User Experience Treasure Map. Finally completed and submitted the app to App Store with developer. In future iPhone app development, this design flow and guidelines will provide better user experience and interface.. Keywords: interaction design, interface design, user experience, usability, iPhone, app. II.

(4) 謝誌首先誠摯的感謝指導教授伊彬，老師悉心的教導使我得以一窺論文寫作的深奧，不時的討論並指點我正確的方向，使我在這兩年中獲益匪淺。老師對學問的嚴謹態度更是我輩學習的典範。本論文的完成另外亦得感謝益科股份有限公司的 Colin 主管大力協助，可以說沒有 Colin 就沒有這篇論文的誕生。也感謝黃志成、鄭景升同學的幫忙，恭喜我們順利走過這兩年。所有 101 級的同班同學當然也不能忘記，你們的貼心及搞笑我銘感在心。老公周豈詰在背後的默默支持更是我前進的動力，沒有周豈詰的體諒、包容，相信我的新婚生活會過得更水深火熱。最後，謹以此文獻給我摯愛的雙親。. III.

(5) 目錄摘要 ...................................................................................................................................... I ABSTRACT ....................................................................................................................... II 謝誌 ................................................................................................................................... III 目錄 ................................................................................................................................... IV 表目錄 ............................................................................................................................. VII 圖目錄 ............................................................................................................................ VIII 第一章緒論 ....................................................................................................................... 1 1.1 研究背景與動機 ....................................................................................................... 1 1.2 創作目的 ................................................................................................................... 2 1.3 創作範圍與限制 ....................................................................................................... 2 1.4 創作流程 ................................................................................................................... 4 第二章文獻探討 ............................................................................................................... 5 2.1 互動設計與介面 ....................................................................................................... 5 2.1.1 互動設計 ........................................................................................................... 5 2.1.2 易用性 ..............................................................................................................11 2.1.3 過度設計 ......................................................................................................... 13 2.1.4 小結 ................................................................................................................. 16 2.2 IOS 介面設計........................................................................................................... 18 2.2.1 iOS 介面設計規範 .......................................................................................... 20 2.2.2 使用者介面設計準則 ..................................................................................... 23 2.2.3 小結 ................................................................................................................. 27 2.3 使用者經驗 ............................................................................................................. 29 2.3.1 小結 ................................................................................................................. 34 第三章研究方法 ............................................................................................................. 36 3.1 研究方法與步驟 ..................................................................................................... 36 3.1.1 現有展覽導覽型 app 分析 ............................................................................ 36 3.1.2 展覽者需求調查 ............................................................................................. 37 IV.

(6) 3.2 研究目的 ................................................................................................................. 37 第四章研究討論 ............................................................................................................. 38 4.1 資料整理與分析結果 ............................................................................................. 38 4.1.1 展覽導覽型 app 分析結果 .............................................................................. 38 4.1.2 展覽者需求調查結果 ..................................................................................... 49 4.2 小結 ......................................................................................................................... 52 第五章創作內容 ............................................................................................................. 60 5.1 策略階段 ................................................................................................................. 60 5.1.1 敘述故事 ......................................................................................................... 60 5.1.2 找出中心思想 ................................................................................................. 60 5.2 範圍階段 ................................................................................................................. 60 5.2.1 創建人物 ......................................................................................................... 60 5.2.2 代入情境 ......................................................................................................... 61 5.3 結構階段 ................................................................................................................. 64 5.3.1 整理清單 ......................................................................................................... 64 5.3.2 資料分析 ......................................................................................................... 64 5.3.3 使用者調查 ..................................................................................................... 64 5.3.4 製作概念圖 ..................................................................................................... 64 5.4 骨架階段 ................................................................................................................. 65 5.4.1 製作系統圖 ..................................................................................................... 65 5.4.2 訂定頁面流程 ................................................................................................. 67 5.5 表層階段 ................................................................................................................. 68 5.5.1 Wireframe 線稿 ............................................................................................... 68 5.5.2 設計故事板 ..................................................................................................... 77 5.5.3 概念設計 ......................................................................................................... 80 5.5.4 原型設計 ......................................................................................................... 87 第六章結論與建議 ......................................................................................................... 89 6.1 結論 ......................................................................................................................... 89 6.1.1 展覽導覽型 app 架構與形式 .......................................................................... 89 V.

(7) 6.1.2 使用者介面 ..................................................................................................... 89 6.1.3 易用性規則 ..................................................................................................... 91 6.2 本研究限制 ............................................................................................................. 92 6.3 未來研究建議 ......................................................................................................... 93 參考文獻 ........................................................................................................................... 94 附錄 1 展覽者問卷調查 .................................................................................................. 97 附錄 2 微波效應 APP 上架頁面 ................................................................................... 102. VI.

(8) 表目錄表 2-1 十大易用性原則和易用性五元素整理表 ........................................................ 18 表 4-1 製作這個 app 的目的統計 ................................................................................ 50 表 4-2 預期這個 app 帶來什麼樣的效果統計 .......................................................... 51 表 4-3 這個 app 需要包含哪些內容統計 .................................................................... 51 表 5-1 使用者在參觀展覽前、中、後會瀏覽與操作的內容 .................................... 64 表 5-2 參觀者與展覽者需求整理 ................................................................................ 64 表 6-1 使用者經驗與易用性歸納 ................................................................................ 92. VII.

(9) 圖目錄圖 2-1 介面設計和互動設計的關係圖（Interaction design，2008） ......................... 6 圖 2-2 DOS 模式下的畫面（wikipedia，2011） ......................................................... 6 圖 2-3 Mac OSX Lion，Launchpad 畫面（Apple Inc，2012）................................... 7 圖 2-4 Mac OSX Lion 中的 Mission Control 畫面（Apple Inc，2012） ................ 8 圖 2-5 Final Fantasy XIII 遊戲畫面（ Square Enix，2010 ）.................................... 8 圖 2-6 海軍航空站（NAS）彭薩科拉訓練跳傘學生情況（Navy.mil，2002） ....... 9 圖 2-7 互動設計及其它相關領域關系圖（Saffer，2006） .......................................11 圖 2-8 文化與介面設計（Komarov，2009） ............................................................. 15 圖 2-9 公用型應用程式範例（AccuWeather.com Quick™，2011） ........................ 22 圖 2-10 產出型應用程式範例（CNN Türk iPhone Uygulaması，2012） ................. 22 圖 2-11 沉浸型應用程式範例（Kiteretsu Inc， 2012） ........................................... 23 圖 2-12 iPhone 內建介面元素尺寸（Apple Inc.，2012） ......................................... 25 圖 2-13 使用者經驗分層元素（Garrett，2000）....................................................... 30 圖 2-14 使用者經驗藏寶圖（Morville，2009） ........................................................ 34 圖 4-1 2011 臺北世界設計大展 app 架構圖 ............................................................... 38 圖 4-2 2011 臺北世界設計大展首頁 ........................................................................... 39 圖 4-3 2011 臺北世界設計大展操作迴圈頁面 ........................................................... 40 圖 4-4 2011 臺北世界設計大展預設元件誤用 ........................................................... 41 圖 4-5 2011 臺北世界設計大展連線狀態 ................................................................... 41 圖 4-6 台北電信應用展架構圖 .................................................................................... 42 圖 4-7 台北電信應用展首頁與內頁 ............................................................................ 42 圖 4-8 台北電信應用展活動頁面 ................................................................................ 44 圖 4-9 跳出並開啟其他 app 的錯誤 ............................................................................ 45 圖 4-10 程式錯誤導致操作受挫 .................................................................................. 46 圖 4-11 木乃伊傳奇–埃及古文明特展架構圖 ............................................................ 46 圖 4-12 木乃伊傳奇–埃及古文明特展歡迎頁與首頁 ................................................ 47 圖 4-13 木乃伊傳奇–埃及古文明特展展品列表頁面 ................................................ 48 圖 4-14 木乃伊傳奇–埃及古文明特展隱藏功能 ........................................................ 48 VIII.

(10) 圖 4-15 木乃伊傳奇–埃及古文明特展操作層級 ........................................................ 49 圖 4-17 導覽型 app 架構圖 .......................................................................................... 53 圖 4-18 導覽型 app 歡迎頁與展覽資訊 ...................................................................... 54 圖 4-19 導覽型 app 最新消息列表與詳細頁 .............................................................. 54 圖 4-20 導覽型 app 作者列表與作者簡介 .................................................................. 55 圖 4-21 導覽型 app 展品列表與展品介紹 .................................................................. 56 圖 4-22 預設分享與 Action sheet 方式 ........................................................................ 56 圖 4-23 In App Browser 與 Facebook 登入頁 ............................................................ 57 圖 4-24 廣告列呈現方式 .............................................................................................. 58 圖 4-25 相機與版權頁 .................................................................................................. 59 圖 5-1 微波效應概念圖 ................................................................................................ 65 圖 5-2 微波效應 app 系統圖 ....................................................................................... 67 圖 5-3 微波效應 app 頁面流程 .................................................................................... 68 圖 5-4 首頁 .................................................................................................................... 70 圖 5-5 展覽資訊 ............................................................................................................ 70 圖 5-6 展覽主題 ............................................................................................................ 71 圖 5-7 路徑規劃提示 .................................................................................................... 72 圖 5-8 QRCode 掃瞄 ...................................................................................................... 73 圖 5-9 Facebook 登入 .................................................................................................... 73 圖 5-10 作品列表 .......................................................................................................... 74 圖 5-11 作品詳細介紹頁 .............................................................................................. 74 圖 5-12 語音導覽頁 ...................................................................................................... 75 圖 5-13 作者介紹 .......................................................................................................... 76 圖 5-14 搜集列表 .......................................................................................................... 76 圖 5-15 搜集品詳細頁 .................................................................................................. 77 圖 5-16 關於我們，開發人員頁 .................................................................................. 77 圖 5-17 使用者下載 app 使用路徑規劃功能 .............................................................. 78 圖 5-18 聽取語音導覽 .................................................................................................. 79 圖 5-19 作品簡介與作者 .............................................................................................. 79 圖 5-20 尋找搜集品 ...................................................................................................... 80 IX.

(11) 圖 5-21 微波效應 app 歡迎頁 ..................................................................................... 81 圖 5-22 首頁選單 .......................................................................................................... 81 圖 5-23 展覽資訊 .......................................................................................................... 82 圖 5-24 展覽主題 .......................................................................................................... 82 圖 5-25 開啟路徑規劃 .................................................................................................. 83 圖 5-26 QRCode 掃瞄 .................................................................................................... 83 圖 5-27 作品列表 .......................................................................................................... 84 圖 5-28 作品介紹 .......................................................................................................... 84 圖 5-29 語音導覽 .......................................................................................................... 85 圖 5-30 作者介紹 .......................................................................................................... 85 圖 5-31 我的搜集 .......................................................................................................... 86 圖 5-32 搜集品解密 ...................................................................................................... 86 圖 5-33 開發人員頁 ...................................................................................................... 87 圖 5-34 實機測試照片 .................................................................................................. 88. X.

(12) 第一章緒論 1.1 研究背景與動機隨著時代和科技的演進，許多事物也跟著被重新定義。就以手機來說，已不再只是縮小、可攜帶的電話筒，而是擁有越來越多項功能的攜帶型載具。從僅能呈現黑白雙色的小螢幕一路演進到現在的高彩高解析度的觸控螢幕；從僅能打電話、傳簡訊的基本功能，一直發展到可隨著使用者安裝不同軟體就能提供不同服務的多功能。除了傳統的通訊功能外，遊戲、記事、鬧鈴、地圖、音樂，甚至網頁瀏覽、電子郵件、即時通訊、社群網路等，也成為現今智慧型手機必備的功能之一。科技改變手機的使用型態，設計當然也不再侷限於外觀的美化，針對這些日益增加的功能提供精緻、美觀、方便、簡單的操作介面已經變成設計的焦點。因為數位科技的發展，讓互動設計這一塊受到重視，互動設計不僅是遙控器按鈕、或是剪刀、折疊椅之類的實體，逐漸往虛擬、摸不著的方向發展（葉謹睿，2010），比如說網頁及 app。網頁在不同瀏覽器有不同呎吋和不同解讀方式，比單一平台的 app 更為多變。而 app 的特性則是必須在單一平台上提供一致的使用經驗，在小畫面中呈現所需資訊及功能，在諸多限制中尋求更符合使用者習慣及直覺的操作介面。而 app 的呈現方式也會隨著功能的多樣化產生出更複雜的組合變化，對於使用者互動的考量也就需要更為深入。 Kapor（1990）發表「軟體設計宣言」（A Software Design Manifesto），其中他提到：什麼是設計？在什麼情況下，設計會成為一個需要重視的問題？這個情況就出現在你同時跨足「科技」和「人類需求」，而必須將兩者連結起來的時候。現今流行的智慧型手機，正是科技與人類需求的結合。目前三大智慧型手機平台分別是 apple 的 iOS 、 Google 的 Android 、 Microsoft 的 Windows Mobile。以 apple 來看，其產品 iPhone，以及多達 24 種分類、超過 330000 個 app（AppShopper，2011）的 app store 相輔相成，不僅提供開發者一個多樣化的平台，開發出來的各式各樣 app 更滿足人們在生活上的各種欲望。. 1.

(13) 人類的生活方式隨著時代演進產生很大的不同，智慧型手機的興起更顛覆人們對於手機的印象。它不僅是聯絡工具，更深入日常生活、旅行、會議、工作、影音、娛樂等，如同二十四小時貼身秘書無法切割。在普及率及使用者依賴性越來越高的同時也產生另一種行銷模式：如何利用智慧型手機進行推廣，達到廣告宣傳的效果。研究者本身從事 iPhone app 開發工作，對於使用者介面開發與設計擁有高度興趣。加上與班上同學感情極好，這次畢業展與創作便想結合自己擅長的 app 開發，為同窗二年的研究所生涯與畢業展覽留下紀念。. 1.2 創作目的 2011 年 3 月 2 日 Apple 公司宣布的數據來看，目前已販售出一億支 iPhone，有兩百多萬的 iTunes Store 帳戶存在，app 的銷售金額已超過 20 億美元（Warren，2011）。台灣持有 iPhone 的人數越來越多，已成為一鼓風潮。本研究希望透過分析使用者介面與展覽者、參觀者、開發者的三方意見，開發出適合宣傳本班畢業展覽的 iPhone 應用程式。因此，以下為本創作研究所主要的創作目的與發展： 1. 從文獻探討中深入分析 iPhone app 介面設計。 2. 了解展覽者（客戶）、參觀者（使用者）、開發者的想法。 3. 將客戶提出的功能與需求轉化成可操作的實體介面。 4. 宣傳班上畢業展活動訊息，用 iPhone app 加強展覽與參觀者的互動。. 1.3 創作範圍與限制 1. 本研究探討之展覽型應用程式僅針對在國內廠商自行研發，並上架於台灣 App Store 之成品，於其他國家上架之 app 不在研究範圍之內。 2. 本研究僅以臺灣師大設計所設計創作專班 101 級 24 名展覽者與微波效應 app 做為主要研究對象。 3. 智慧型手機系統版本與開發環境皆不相同，本研究僅以 iPhone 為限。. 2.

(14) 4. 本創作需與程式撰寫人員合作，實際介面設計與功能將配合程式撰寫人員之開發技術與畢業展展期的時程。. 3.

(15) 1.4 創作流程. 4.

(16) 第二章文獻探討 2.1 互動設計與介面 2.1.1 互動設計互動設計所指的是：「設計出互動產品，提供人類在日常生活或工作中使用」。（Preece, Rogers, & Sharp，2002）。而另外一種解釋則是「互動設計是人類互動及溝通上的空間」（Winograd，1997）。它是一種以使用者的需求與經驗為出發點，創造出人類與科技的完美連結。 IDEO 創始人 Bill Moggridge 在 1984 年的一次設計會議上提出，他剛開始將互動設計命名為「軟面」（ Soft Face），但這名字很容易讓人想起當時流行的玩具「椰菜娃娃」，後來將名字改為「Interaction Design」（Moggridge，2007）。從 Soft Face 這個最早期的命名方式可以看的互動設計的特性：沒有規則可讓人任意塑造扭曲、是在最表層如臉孔一般的存在。以概念為出發點，研究和數據分析中獲得設計依據。戶動設計的起源會是個想法、某個念頭，或是突然其來的發想，透過不斷測試與實驗取得數據證明它是對的。最根本的核心就是提高使用者體驗、使產品更好用、功能更符合人性化邏輯。未經互動設計的產品單純地解決困難，卻製造出一堆問題，使用者感覺不到產品的「體貼」（周陟，2010）。互動設計和介面設計可說是相輔相成，如果互動設計是概念性、較抽象的思想，那介面設計就是將這種思想具體化，成為可以被操作的方式。如圖 2-1，第一階段的概念設計出發點有時候僅僅是個核心價值，逐漸形成抽象或故事性的概念。進入到第二階段，從概念中發展出目標，為了達成這個目標開始行為規劃。最後的第三階段著手設計介面，它是實現目標和概念方法與手段。互動設計就是經由這三個階段，從抽象逐漸化成具體可操作的介面設計。互動設計包含介面設計，介面設計可說是互動設計的一部份，但介面設計不能說是互動設計（Interaction design，2008）。. 5.

(17) 圖 2-1 介面設計和互動設計的關係圖（Interaction design，2008）. 介面設計經歷了幾種發展階段，從純文字的命令語言使用者介面發展到大量使用圖象的圖形使用者介面、加入現實生活觀的直接操作使用者介面，帶來更多刺激的多媒體使用者介面、在現實中製造另一個空間的虛擬實境技術。互動設計界面演進和電腦的發展相輔相成，螢幕的顯示由點構成，且受到色彩限制，加上當時的運算技術會反應出使用者操作什麼樣的介面，所以最早期的互動設計可說是命令語言使用者介面（維基百科，2010）。像是需要敲入純文字執行命令才能運作的 DOS 系統，就屬於人機互動較初階的時期。這種互動方式需要大量的記憶力與訓練，必須理解許多由純文字構成的指令，不止容易出錯而且入門門坎即高，對初學者來講很不友善，如圖 2-2。. 圖 2-2 DOS 模式下的畫面（wikipedia，2011）. 6.

(18) 隨著科技發展，電腦運算技術和螢幕顯示越來越進步，相對應的儲存設備容量也越來越大。逐漸從容量小純文字命令語言使用者介面轉換成需要較多容量和運算技術的圖形使用者介面，如圖 2-3。同時這也是目前最主要的使用者介面設計，廣泛運用在各種電腦和手持行動裝置上。圖形使用者介面利用各種圖像取代原本對控制原碼的記憶，使用者能藉由圖象進行聯想，減輕學習負擔。在操作上也不只使用鍵盤輸入，滑鼠、觸控螢幕、手寫板等週邊大量出現，電腦不再是高高在上難操作的高科技產品，真正普及至一般家庭。. 圖 2-3 Mac OSX Lion，Launchpad 畫面（Apple Inc，2012）. 在圖形使用者介面發展一陣子，單純的圖象已不能滿足使用者，即使圖象再精緻，總是和現實生活有所落差，使用者仍需去記憶每個圖象代表的含意。新興起的直接操作使用者介面（Shneiderman，1997），見圖 2-4。能讓使用者只要關心他想操作的對象就可以了。他只需要關心操作目的的語義，而不用為電腦語義和語法分心。像是 Windows 的桌面系統，模擬出物理環境中的桌面，資料夾的設計讓使用者了解只要操作資料夾就可以找到所需的文件，而不用關心資料夾和系統的訊息處理過程。. 7.

(19) 圖 2-4 Mac OSX Lion 中的 Mission Control 畫面（Apple Inc，2012）. 科技再演進，電腦能夠使用的媒體包括文字、圖片、照片、聲音（如音樂、語音旁白、特殊音效）、動畫和影片，並透過程式組合兩種或兩種以上的媒體，產生多媒體使用者介面。引入動畫、音樂、影片等互動媒體手段，能大幅度提升使用者接受訊息的效率。舉例來說，使用者不用將全部注意力都集中在靜態視覺的改變，可以利用動畫或影片傳達訊息，甚至使用聽覺告訴使用者目前情況。像是收到一個新的通知，不用打開螢幕就能分辨出是新的 Mail、Facebook 更新還是有未讀簡訊。這種作法在遊戲中十分常見，以流暢華麗的戰鬥畫面為賣點的 Final Fantasy XIII 透過多媒體使用者介面在畫面上顯示各種資訊。如圖 2-5。. 圖 2-5 Final Fantasy XIII 遊戲畫面（ Square Enix，2010 ）. 8.

(20) 但上述介面都需要透過一個平面的螢幕才能使用，和現實生活完全不同。虛擬實境技術就是將虛擬的介面從平面空間裡拉出來呈現在現實生活中，簡稱 VR 技術，也稱靈境技術或人工環境。是利用電腦模擬產生一個三度空間的虛擬世界，提供使用者關於視覺、聽覺、觸覺等感官的模擬，讓使用者如同身歷其境一般，可以及時、沒有限制地觀察三度空間內的事物。使用者進行位置移動時，電腦可以立即進行複雜的運算，將精確的 3D 世界影像傳回產生臨場感。該技術集成了計算機圖形（CG）技術、計算機模擬技術、人工智慧、感測技術、顯示技術、網路并行處理等技術的最新發展成果，是一種由計算機技術輔助生成的高技術模擬系統（維基百科，2010）。很多需要極度專業的訓練必須要讓受訓者實際上陣，親自體驗學習。但每一次實際演練的成本極高，虛擬實境技術可被運用在這方面，如圖 2-6，不只降低成本，更增添許多方便性。. 圖 2-6 海軍航空站（NAS）彭薩科拉訓練跳傘學生情況（Navy.mil，2002）. 9.

(21) 從命令語言使用者介面、圖形使用者介面、直接操作使用者介面、多媒體使用者介面到虛擬實境技術，可以看出一個規律性：先求有，再求好。命令語言使用者介面過於複雜門坎太高，無法普及至一般大眾，等到圖形使用者介面出現，造福所有人後又覺得理解圖象是一回事、好不好用又是另一回事，似乎缺少了些什麼。開始考慮人與介面的互動性，怎麼作才會好用，所以產生直接操作使用者介面。介面越來越好用了，但感覺不夠華麗不夠搶眼，過於雷同的介面充斥在生活之中已失去刺激強度，多媒體使用者介面因應而生。擁有各種表現手段的多媒體使用者介面卻也比不上親身體驗，進而產生虛擬實境技術，成為虛擬和現實的互動橋樑。 Ideo 公司的互動設計部負責人 Duane Bray 曾將互動設計整理成三大類：透過螢幕的體驗、互動產品、服務。凡是透過螢幕進行互動、操作的型式如電玩、網站等都算是透過螢幕的體驗。手機、相機這類互動設計與工業設計緊密結合的類型則屬於互動產品。因為產品有實體，因此在互動設計過程中不只要考慮視覺部分，更要考量材料、硬體結構、人因工程等元素。而服務互動設計指的是公司與客戶群之間的互動，沒有固定的管道、型態或產品。主要提供良好的互動體驗，用以提升客戶對於公司或其產品的信賴與忠誠度（Moggridge，2007）。在美國，工業設計、網路設計、軟體設計、媒體設計、數位廣告等各領域的公司在近幾年來紛紛成立互動設計部門，因為科技與人類的互動結合已成為一個必然的趨勢（葉謹睿，2010）。互動設計是一個巨大的領域，能透過它尋找使用者和產品之間的連接。使用者對於這個連接的感覺是什麼，他們遇到什麼問題，及想透過互動設計達成什麼樣的目標。從圖 2-7 來看，介面設計包含使用者經驗設計、資訊架構、溝通設計、使用者介面工程、可用性工程、人機互動、人因、工業設計，每個環節都息息相關相輔相成。介面設計、資訊架構、溝通設計、使用者介面工程完全屬於使用者經驗設計領域，使用者經驗設計又含括部分人機互動、人因、工業設計（Saffer，2006）。. 10.

(22) 圖 2-7 互動設計及其它相關領域關系圖（Saffer，2006）. 2.1.2 易用性易用性（Usability）指的是使用者能夠使用某樣工具來達到某個特定目標的容易程度，常見的中文翻譯有優使性、使用性、易用度、易用性、好用性、可用性等等，其中較常見的為優使性和可用性。優使性感覺上像是優越的使用、還是優化過的使用，在詞彙上模稜兩可有模糊地帶；可用性的說法則像是僅分成可以用和不能用兩種狀況。Usability 翻譯成易用性，清楚指出「容易使用」的特點較為貼切。Jakob Nielsen（2005）提出十大易用性原則，詳細說明易於學習、快速使用、相對無錯這三個部分。 1. 系統狀態的回應：軟體應該保持相同的模式，透過適當的反應，在合理的時間內通知使用者。 2. 和現實生活相符：系統應該要運用使用者的語言，使用他們熟悉的詞句、短語、概念，而不是專業術語。 3. 讓使用者有反悔的機會：對使用者學習的影響甚至比對時間的影響重要，易於犯錯且修正錯誤代價高昂的高風險情形將導致使用者不願意多研究這個軟體。良好的設計能讓使用者降低出錯率，在提供取消和重做的功能前先減少使用者出錯的機會。. 11.

(23) 4. 建立一致性和標準：軟體必須採取使用者的語言、並運用他們熟悉的單詞、短語和概念，而不是程式語言或專有名詞。依現實生活常見的習慣，讓訊息在自然且有邏輯順序的情況下產生。為了達到這個目標，有時需開發一個詞典。這個詞典最好由團隊的技術編寫者來管理和實施、監視文件檔案和軟體中出現的術語一致性。支援目標工作領域中的問題該如何解決，它應該最大限度地減少或消除使用者花費時間解決軟體技術層面中的問題需求。針對這一點 Mandel（2002）有更詳盡的看法，使用者介面中的控制元件、命令、設定的功能應該清晰明確。操作軟體不應該需要透過排除法進行演繹推理。也不要讓使用者所執行的操作和他們的目標沒有明顯的關連。 5. 預防錯誤：比起提供使用者明確易懂的錯誤訊息，更重要的是如何防止使用者發生錯誤。像是消除容易出錯的條件或是自動檢查確認選項。 6. 讓系統運作減輕使用者記憶量：如果軟體把資料當作訊息，把資料都丟給使用者，要使用者自己查看資料代表著什麼，那使用者的注意力會被分散，產生錯誤的機會就會增加。軟體應該將使用者的注意力集中到重要的資料上，並幫助使用者從中取得訊息，而不是未經過篩選要使用者花時間思考。 7. 靈活性和效率：功能與易用性之間通常存在一個平衡，對於軟體中的每個特性、功能、或能力，都必須提供一種途徑讓使用者調用或控制。如果使用者的目標是可預測而且常用的，使用者不應該為了實現這個目標而必須做很多工作。做少量的工作、得到很多結果，才是使用者想要的。簡單來說就是要思考「有多少使用者」和「使用頻率如何」的問題。越頻繁使用的功能，需要點擊的次數應該要越少。越多使用者使用某功能，它就應該越明顯。且要為核心情況設計，不要為「邊緣」情況付出太多。 8. 簡單設計去除多餘：為了防止使用者出錯，可以在軟體設計上就盡量減少使用者的記憶負擔。將功能、操作及選項設計得顯而易見。對於不相關或是很少需要的訊息或功能要隱藏起來，僅突出重點在軟體設計上非常重要。 9. 幫助使用者從錯誤中恢復：幫助使用者識別、診斷、並從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非難以理解的代碼。. 12.

(24) 10. 製作說明文件：但一個軟體在完美的情形下不需要任何說明文件使用者就能夠操作，但若需要提供說明時，此類訊息應該容易被搜索查詢。經過 Jeff Johnson（2008）精簡後，他認為易用性是由五個重要元素組成，分別是學習、效率、記憶、錯誤、滿意度。 1. 學習：在使用者第一次進行操作時，他是否能夠輕鬆地完成任務。介面如果在「學習」這一塊作得越完整，使用者就能越快速輕鬆地學會如何操作，相反的若是忽視學習的重要性，使用者在操作上就會充滿挫折。 2. 效率：一旦使用者學會如何操作後，他能夠以多快的速度完成任務。 3. 記憶：經過一段時間後，使用者再重新使用這個介面，他能夠熟練操作的容易程度取決於「記憶」。 4. 錯誤：在操作時，使用者往往會產生操作「錯誤」的情形，因此軟體需要有取消和重做的明確選項。操作的過程中產生錯誤在所難免，如果一個軟體很容易讓使用者犯錯，又不允許使用者修正錯誤，或者是修正錯誤要付出代價或大量時間，那它就是一個高風險的軟體。 5. 滿意度：使用者分成初級、中級、高級三種，以中級使用者人數最多，但因此也不能忽視初級與高級使用者的需求。軟體設計要能讓初級使用者明白當他需要幫助時該如何找到說明提示，也要允許初高級使用者自訂功能或操作。在制定使用者自定義功能的同時也要設定預設值以防使用者設定失敗。. 2.1.3 過度設計過度設計一般是說技術開發中，對於邏輯複雜、技術先進的過度追求，導致了技術框架雖看似華麗卻複雜難用。若說到產品功能及互動的過度設計，應該是盲目滿足用戶需求，極度追求用戶體驗，過度追求完美、需求滿足而導致的「實際體驗下降、長期產品定位偏離、功能沒人用」的悲慘結果。. 13.

(25) 導致過度設計的原因，主要還是來自於一味追求使用者體驗的結果。大多數的公司在開發產品時，設計資源往往是產品部門無法控制的，一位 UI 設計師往往在各個專案中奔波，在這樣工作環境下，設計師必然希望每一個設計細節都能考慮周全、設計完美。但若設計師缺乏經驗的情況下極有可能會被這種追求完美的思想拖累。推進到開發或上線測試階段時，真正的問題就會慢慢浮現，使得產品企劃重新修改規格、工程師重新編寫代碼，上線時間延遲。這代表的是時間與人力成本的增加（劣松，2011）。在研究使用者需求的時候很容易陷入過深的情況，有時候使用者根本不會知道自己要的是什麼，但開發人員思考過度，就會產生一堆不是需求的需求，增加開發成本。在使用者進行測試時，開發人員對使用者的回應缺乏篩選。使用者不是開發人員，在操作軟體的時所提出的問題、表現出的困惑一定是主觀、偏自我的感性意見，甚至會加入許多個人喜好與觀感。如果在理解使用者需求的時候不能以一種冷靜理性的心態模擬使用情境，很容易被使用者的主觀意見影響，導致過度設計。功能及互動上的過度設計可能導致在開發途中內部開發人員在討論會議上過度辯駁引起的士氣低落，而且浪費太多時間，延誤甚至失去市場機會。過度設計的功能看似華麗卻乏人問津，失去原本設計的本意。最糟的情況是過度設計的細節產生錯誤引導，培養出錯誤的使用者習慣。過度設計最常見的就是「從天而降」，像是上級要求、客戶要求、突發奇想等，它不遵循可用性原則，也沒有推斷邏輯，沒有理由，卻是最常見也是大多數設計師最無力扭轉的部份。簡單來說，就是客戶、上級雖然有介面設計的認知，但覺得是次要工作，認為易用性對市場成功的影響不大。大部分的重點都會放在如何將開發時間縮短、成本降低，但對公司而言，縮短開始營利的時間比縮短開發時間更為重要。如果認為使用者能夠適應所有的情況，只要提供軟體所需的功能，使用者就能學習使用。當一些產品因為匆忙上市而忽視易用性時，會大幅增客戶培訓和提高支持度的成本。UI 設計師最重要的工作則是分析和理解使用者的操作需求、簡化複雜度、決定哪些控制元件和訊息是目標任務所必需的，以及識別使用者學習或使用軟體的過程中會遇到什麼樣的問題。有些 UI 設計師還知道如何準備執行和分析易用性測試（周陟，2010）。 14.

(26) 透過介面設計，能減少輸入指令的數量、快速進行重覆性操作、發生錯誤的次數降低，並能將使用者的學習時間減短。在這種情況下，介面上需要什麼就放上什麼，沒有進行分組、或是無意義的擺放，功能堆積與複雜度就成為過度設計。以 iPhone app 為例，app 的開發人員往往傾向於無視一般常見的普通設計及使用上的慣例，他們設計出光滑而有光澤的使用者界面，不管是功能性或是樣式都完全超出標準規範。開發人員想要他們的 app 是與眾不同的，這樣才能在人群中脫穎而出，不幸的是，不同的外觀不一定能兼顧到 app 的可用性與功能性。如圖 2-8，和 iOS 設計規範相去甚遠，使得介面設計並不直覺，在控制元件上的風格與外觀也不相同，因此使用者必須重新學習該如何操作這個 app，並理解這個 app 的功能。這是個浪費時間和金錢的行為，多花的資源能使 app 看起來不同，但不見得更好（Komarov，2009）。. 圖 2-8 文化與介面設計（Komarov，2009）. 15.

(27) 但目前的行業情況是，大多都強調冗長的軟體特性，而沒有充分考量到人們為了操作這些功能所付出的代價。多數人只是想要足夠完成他們的工作的功能，和軟體開發人員所相信的「選項越多、控制元件越多、功能越強大，就越好」完全相反（Johnson，2008）。訊息設計大師 Edward Tufte 覺得設計師容易犯下自負心膨脹的表現之罪。大部份的時候盡量用內建元素，這是使用者最熟悉最不會誤會的安全作法。可以考慮使用淡淡的燈光效果突顯細節。採用一致的頂光源，使用線性或放射漸變與緩和的材質，並減少貼圖的透明度，讓圖片擁有層次感，能大幅提升頁面的精緻度（Clark.，2010）。. 2.1.4 小結互動設計是因應時代進步而新興的一門學問，從它的發展歷史來看，命令語言使用者介面（維基百科，2010）需要敲入執行命令才能運作，如 DOS 系統，屬於人機互動較初階的時期。這種互動方式需要大量的記憶力與訓練，且容易出錯，對初學者來講很不友善。目前最主要的使用者介面設計「圖形使用者介面」，與現實生活有極大的關連性，讓使用者能依生活經驗套用到介面操作上，不需要重新學習和大量的訓練，廣泛運用在各種電腦和手持行動裝置。還有一種目前使用廣泛的介面模式：直接操作使用者介面：指使用者最終所關心的是他想操作的對象，他只需要關心操作目的的語義，而不用為電腦語義和語法分心（Shneiderman，1997）。像是 Windows 的桌面系統，它模擬物理環境中的桌面，資料夾的設計讓使用者了解只要操作資料夾就可以找到所需的文件，而不用關心資料夾和系統的訊息處理過程。另外還有多媒體使用者介面，常使用在電玩機台或是博物館導覽機、新型販賣機等，引入動畫、音樂、影片等互動媒體手段，能大幅度提升使用者接受訊息的效率。. 16.

(28) 未來互動介面將往虛擬實境技術發展，利用電腦模擬產生一個三度空間的虛擬世界，提供使用者關於視覺、聽覺、觸覺等感官的模擬，讓使用者如同身歷其境一般，可以及時、沒有限制地觀察三度空間內的事物。簡稱 VR 技術，也稱靈境技術或人工環境，是使用者進行位置移動時，電腦可以立即進行複雜的運算，將精確的 3D 世界影像傳回產生臨場感。該技術集成了計算機圖形（CG）技術、計算機模擬技術、人工智慧、感測技術、顯示技術、網路并行處理等技術的最新發展成果，是一種由計算機技術輔助生成的高技術模擬系統（維基百科， 2010）。即使互動設計和介面設計隨著時間不斷演進，Nielsen 的十大易用性原則或是 Jeff Johnson 統整出的易用性五元素依然適用於各時期介面開發，皆是以易於學習、快速使用、相對無錯這三個部分為出發點。若依這三個部份將他們所提出的論點分類，則整理如表 2-1。. 17.

(29) Nielsen 易用性出發點易於學習. 快速使用. 相對無錯. 表 2-1 十大易用性原則和易用性五元素整理表 Nielsen 十大易用性原則 Jeff Johnson 易用性五元素和現實生活相符學習建立一致性和標準記憶讓系統運作減輕使用者記憶量系統狀態的回應。效率靈活性和效率滿意度簡單設計去除多餘讓使用者有反悔的機會錯誤預防錯誤幫助使用者從錯誤中恢復製作說明文件. 「這個介面是直覺的」這句話給人的印象是，使用者能依自己的直覺，在不加以訓練或是經由理性思考就能自然的使用這個介面。「使用者介面是直覺的」是因為它類似或等同使用者已經學會的東西。總之，直覺在這方面幾乎確切的是「熟悉」的代名詞（Komarov，2009）。Mac 電腦設計之父 Jef Raskin 也曾說過，當我們在軟體的領域中提到「直覺」，但真正的意思其實是「熟悉」。容易使用的應用程式，在設計上必須讓人感到十分熟悉。就以熟悉程度來說，使用 Cocoa 提供的標準使用者介面元件並且遵循 apple 的標準使用者介面設計準則進行開發的成果肯定是使用者最慣用的操作模式（Raskin，2000）。這些準則定義圖形標準和預設介面元件的使用模式，這讓任何開發者都能輕易建構和設計應用程式。但這些依照規範開發出來的介面會讓使用者覺得無趣，識別度極低，很容易淹沒在 App Store 裡無法讓人察覺。在某些角度上的考量會需要使用非使用者介面元件的應用程式是客製化介面。幾乎所有遊戲都是都是客製化介面，而一些有趣或是實用工具也可用客製化圖形。使用客製化還是標準介面往往決定於可用的預算。光有設計介面的預算是不夠的，也需有程度開發者實作這些介面的預算。客製化介面整合對於開發者或是開發團隊來說有時非常困難，這種時候就必需納入考量。介面設計師的工作就在於讓使用者能夠運用產品的功能，同時也讓人和產品之間以一種優美的方式互動。互動的美學應該是設計師的目標。對使用者而言，使用產品功能的整體過程應該是一種值得享受的美麗經驗。它的首要條件就是使用者不該在操作過程中感到懊惱。但我們不應該把可用性當做設計的最終目標（Green & Jordan，2002）。. 2.2 iOS介面設計 18.

(30) 最早期 UI 設計師有一些簡單的控制元件，根據麥金塔人機介面設計規範謹慎地在螢幕小、顏色稀少、CPU 運算緩慢、網路頻寬狹窄的情況下進行設計。即使 UI 設計師希望使用者能瞭解精心設計的介面，但往往只會讓使用者因為難以操作而覺得鬱悶。到了現在如果要設計介面，UI 設計師能使用比以前多更多種類、現成的 UI 工具包，apple 的原生工具包也比以前更加豐富、更美觀，顯示器的技術也比以前好。僅管如此，設計出一個好的 UI 仍不容易。如果 UI 設計師沒有受過訓練或自我學習，只是使用現成的工具包，遵照各種設計規範與守則、或模仿市面既有的應用，可能只會設計出二流但還過得去的普通介面（Tidwell，2005）。使用現成套件或元素想設計出一個好的互動介面很有難度，通常現成工具多是為了最多數的大眾所開發，為了設計出高品質優秀的介面，必須考慮客製化貼身打造。但要建立一個客製化的使用者介面需要增加時間和金錢，考慮客製化介面能增強使用者經驗的程度是否超出需求就變得很重要。（Gordon，2010）。美國心理學家 Fitt（1954）提出著名的費茲定律（Fitts' Law），運用在介面設計上可用來計算一個裝置所需要的時間和注意力。費茲定律的基本概念為：使用者移動到目標上的時間，可以用目標距離與目標大小的函數來代表，也就是說移到任意目標上的時間，差不多和距離除以目標大小的對數成正比。簡單來說就是指目標越遠，所需要的移動時間就越長，且目標越小也會增加移動所需的時間。費茲定律在介面上可用來確認各種按鈕和選項的安排，利用距離和尺寸間的調整來縮短操作時間。它是一種直線運行的概念，另一方面需考慮螢幕邊緣和無限延伸的特性。在介面設計的過程中，預想使用流程，從中推測使用者游標可能的所在位置，每一個按鍵的比例都會與游標位置產生關連，避免沒有實際效益的尺寸增加。. 19.

(31) 但就算是沒有實際效益的地方都有其價值所在。人們在無意識之下看見物品而直接對物品做出解釋，進而作出自己認為對於這物品最恰當的使用方式。如果人們意識太多，就會產生許多不自然的行為，也可能因此覺得這產品用起來不順手不好用。這種情況下突顯出 Tesler's Law 的重要性：每個應用程式都必然有與生俱來、無法減少的複雜度，為一的問題就是誰來處理。大意和物質不滅定律相同，複雜度這件事也屬於不滅的範圍之內，如果沒有人處理就不會消失。這就是 Larry Tesler 當年在 apple 公司推動圖象化的使用者介面時所提出的一個理念。如果開發人員不花費心思處理複雜度的問題，使用者在操作的過程中就得花心思去處理。如果能讓使用者在操作過程中比原先未修正的版本節省 2 秒鐘，那成千上萬名使用者累計起來浪費掉的時間是非常可觀的數字。圖象化介面設計加重開發者的負擔，但也因此大幅提升使用者的便利性，成功促使數位科技普及化（Saffer，2006）。. 2.2.1 iOS 介面設計規範為了讓開發者能夠製作出讓每個 iPhone 使用者都能快速上手、擁有一致性與統一性的介紹， 2008 年 6 月 27 日， Apple 公司發行一份名為「 iPhone Human Interface Guidelines」，使用者介面開發準則。隨著 iPhone 系統版本演進，這本規範的內容也隨之改變，後因 iPad 推出，將 iPhone OS 更名為 iOS，這份文件也更名為 iOS Human Interface Guidelines。目前就以 2012 年 3 月 7 日所出的規範進行分析。 iOS 的軟體從開發面來區分共有 3 種，簡單來說就是： 1. 純 iOS 應用，指的是可以使用 iOS SDK 開發出由 iOS 原生支持的應用程式。 2. Web 應用，使用行為就像是內建使用操作模式一樣的網站。 3. 混合類型的運用，如通過 Web 可視區域顯示 Web 內容的功能，但整個軟體包含一些 iOS 使用介面元素。. 20.

(32) 純 iOS 應用就像是 iOS 內部的原生程式一樣，載入快速且易於使用，無論是處理一項工作或是提供使用者娛樂，它的使用者介面反應靈敏、簡潔乾淨。 Web 應用則是在 iOS 內建的瀏覽器 Safari 上開啟網頁，不需要另外安裝軟體，只要輸入 URL 網址。但要考慮到網頁優化的問題，如不支援 Flash、Java 等元件；針對螢幕尺寸網頁是否能自動進行內容重新編排調整等等。混合型應用擁有原生和網頁兩種特性，它採用原生 iOS 應用提供大多數的結構和功能，透過 Web 形態提供介面，通常會包含標準的 iOS 使用者介面組件。在應用程式上，可以依照視覺、行為特性、數據模型、使用者經驗等方面定義三種應用風格，這三種風格能提高開發者在應用程式中的功能設定和使用者經驗，並幫助開發者找到最適合的特性組合。公用應用程式可讓使用者快速地取得特定類型的資訊，或執行經嚴格定義的工作，如天氣、股票、交通報導、運動比分等，如圖 2-9。大多數公用應用程式使用 Human Interface Guidelines 中所列出的標準使用者介面，如：選擇頁、info 鈕、指示額外頁數的燈號。通常第一次啟用後就可直接使用，設定過程是不必要的，或者維持最基本的即可。並且擁有容易掃視的版面，其中只包含最重要的資訊，精簡化工作的流程。. 21.

(33) 圖 2-9 公用型應用程式範例（AccuWeather.com Quick™，2011）. 產出型應用程式的功能比公用應用程式更完整，使用時間會依照場合及工作有所不同。幾乎所有產出型應用程式都有包含列表和細節檢視的階層式結構。列表檢視包含一份可以捲動的項目（如文字、圖例、視訊）列表，索引標籤控制則可以導覽到應用程式的其他部分，見圖 2-10。在細節檢視部份提供更多關於列表資訊、及和這些項目有關的工具。產出型應用程式的訊息、搜尋或表格通常需要輸入文字，這些工作在行動環境中執行的難度較高，因為鍵盤按鍵小、複雜度增加。所以產出應用型程式應儘可能將文字輸入的控制方式減少。. 圖 2-10 產出型應用程式範例（CNN Türk iPhone Uygulaması，2012）. 22.

(34) 沉浸式應用程式用來玩遊戲、觀看媒體、和執行專業工作。時間可能持續幾分鐘到幾小時。沉浸式應用程式可能會佔用整個螢幕，包含顯示電池和網路資訊的狀態列，它的設定和其他控制項目依程式不同，出現的時機也不一樣。對於不是 Human Interface Guidelines 中列出的標準控制項目，沉浸式應用程式通常會提供完整的「自訂」使用者經驗，參考圖 2-11。但在自訂使用者經驗前請先確認是否因為設計目標無法用公用程式或產出型來達成才這麼做。理論上所有應用程式都可以用沉浸式的方式來創作，但這種類型最適合用在玩遊戲、觀看媒體、執行專業工作。. 圖 2-11 沉浸型應用程式範例（Kiteretsu Inc， 2012）. 公用應用程式能讓使用者快速取得特定資訊，或執行經嚴格定義的工作。產出型應用程式則比公用應用程式更完整，從社交網路到行動銀行等，所有的東西都可涵蓋在裡面。沉浸式應用程式主要用來玩遊戲、觀看各種媒體、或執行專業工作。三種應用程式類別的優缺點將依設計的目標而有所不同，各專案都要有所評估。有可能在一個應用程式裡包含一種以上的應用程式類別。所以在進行介面開發設計時根據功能和需求的不同，頁面呈現類型與方法也會不同。. 2.2.2 使用者介面設計準則 23.

(35) 人機介面設計的原則是以人類所想和所作為基礎，而不是設備的功能。盡可能以現實世界中的對象和動作來作為應用中的模型，這可以幫助新手快速理解一個應用程式是如何運作的。像是文件夾，現實生活中人們將文件放入文件夾歸檔，因此他們在操作電腦時，立刻理解將檔案放入資料夾中的概念（Shneiderman，1997）。 iPhone 不同於桌上型電腦或筆記本電腦，iOS 應用程式也與一般的應用程式不同。iPhone 具有 Retina 高解析度的小型螢幕，適合使用者放入口袋且具有強大的顯示功能。它的螢幕尺寸是 320x480px，參考圖 2-12。這樣的尺寸限制讓開發者沒有空間放置非必要的設計元素，擁擠的使用者介面也會降低應用程式的吸引力、並提高操作的困難度。Retina 螢幕是個驚人的科技產物。將新舊螢幕並排看時，可以很明顯的感覺出應用程式畫面效果上的差異。iPhone4 的螢幕尺寸和上一代的機型並無不同，但 iPhone4 的螢幕解析度和像素密度是原本的一倍。它的解析度是 640x960px ，上一代的機型是 320x480px。這個新螢幕將四個像素塞進原本一個像素的大小中，這就是為什麼圖像看起來如此細緻。（Gordon， 2010）. 24.

(36) 圖 2-12 iPhone 內建介面元素尺寸（Apple Inc.，2012）. 從上圖可以得知，基本應用程式架構分成：高 20px 的狀態列、高 44px 的導覽列、最下方高 49px 的標籤列。以螢幕高度 480px 來計算，扣除狀態列、導覽列、標籤列，剩下 367px 才是資訊呈現的範圍。iOS 採用觸控式螢幕，所有操作皆可用手指完成，不像電腦須要透過滑鼠或鍵盤，所有操作都是非常直觀的，為了確保 iOS 應用程式中的直接操縱感，在開發上需要注意「使用者的操作結果是立即地顯而易見」這一點，並盡量提供選擇給使用者直接點選，減少使用文字輸入的機會，同時要讓使用者能將注意力放在「完成任務」，而不是去思考要怎麼操作（Apple Inc，2012）。. 25.

(37) 使用者除了要看到他們操作後的結果外，還需要得到操作控制元件時的即時回應，像是點選某一個按鈕時，按鈕的顏色變暗提示使用者已點擊。在長時間操作中，適時的狀態報告也很重要，能告知使用者他的任務進行、還需花費多久時間才能完成。「簡單易用」是所有軟體共通的開發準則，但在 iOS 應用中更是重要。iOS 的使用者在使用應用程式的同時可能還在做其他的事情，如果他們沒辦法快速學會如何使用某款程式，他們可能會放棄，轉而尋求同類型的來取代。所以在設計應用程式的介面和流程時，需遵從簡單易用的原則，讓操作的方法簡單易懂，並且在螢幕的最上方放置最常用、最優先的資訊，盡可能地減少使用者的輸入。使用簡潔的文字表達重要資訊，並替控制元件提供足夠讓指尖觸控的區域，建議尺寸為 44x44px（Apple Inc，2012）。 iOS 支援多點觸控，使用者可透過手指的觸摸、輕掃、點擊來操作。手指可以給使用者與設備相連的便利感，但有一個最大的缺點：手指比滑鼠游標大，在螢幕上操作的時候比不上游標的精準性。這表示介面設計要容納指尖點擊，也要對使用者手指移動做出他所期望的反應。使用者透過特定的動作（手勢）獲得不同的結果，點擊一個按鈕勾選、在螢幕上滑動來觀看一串列表內容等等，開發者要注意使用者熟悉的手勢，避免混淆使用者的操作習慣。為了能讓應用程式更容易使用，將操作所需的手勢限制在最常用的點擊和拖曳上，盡可能避免類似橫向滑動、兩支手指縮放之類較不常見的手勢為完成某動作的唯一方式，應該要有一個簡單、直接的方式來完成，即使要讓使用者多點擊幾次。大部份的程式中不希望開發者自行創造新的手勢，尤其功能上和標準手勢重復的時候。但像沉浸型應用程式，在這類程式中自訂義的手勢會比預設的更適合。比如說在工具型應用程式的列表中畫圈來選出欲刪除的欄位會造成使用者的迷惑和使用上的困難，但在遊戲中要求使用者畫圈來控制角色進行某項動作則十分合理（Apple Inc，2012）。 Shneiderman（1997）將經驗與觀察互動系統後的心得，精煉、延伸後整理出八個使用者介面設計的黃金準則。. 26.

(38) 1.. 在提示、選單與說明文件中，應該採用同樣的名詞。讓使用者的操作前後. 一致。 2.. 當始用者對於某個功能操作頻率增加時，會希望減少操作的步驟，提供快. 速鍵或讓每次操作完成更多任務，對於重度使用者非常有用。 3.. 系統應該提供回饋讓使用者知道操作的結果，越頻繁或不重要的動作，回. 饋的強度較低，越重要或是不可挽回的動作就該採用更明顯的提示。 4.. 讓使用者知道現在的操作進行到什麼程度，事先告知整個流程減輕使用者. 的壓力、降低等待的不耐感、提高滿意度。 5.. 若應用程式產生錯誤，應該提醒使用者，並提供使用者可以理解的除錯方. 式。 6.. 給使用者反悔的機會，讓使用者知道即使操作錯誤也能夠重來。. 7.. 不是使用者配合應用程式的設計，而是讓應用程式符合使用者的操作習. 慣，滿足使用者的控制需求。 8.. 人類的短期記憶有限，因此顯示上要保持簡單，減少頁面切換次數與操作. 複雜性。. 2.2.3 小結行動裝置是個截然不同的東西，不僅是嶄新且多樣的硬體，而且行動裝置設計也可能以非常不同的方式對我們的情感造成衝擊。行動裝置是私人和以人為中心的平台，我們用它們來打電話和社交。它們可以在我們的手中、口袋甚至是錢包中找到，這些因素都在影響我們對於這些設備的情緒和知覺。從硬體能力來說，這裡有很多會直接影響設計的互動方式需要考慮，包括手勢偵測（捏、彈、拖等）、單點或多點觸控偵測（針對可直接互動的內容）、螢幕鍵盤或無線及實體鍵盤、麥克風輸入（常用於導航之類的工作）、揚聲器聲音輸出、位置資訊和回饋（Gordon，2010）。. 27.

(39) 手持行動裝置的使用者有可能來自世界各地，擁有不同的人文、歷史、民族、宗教、社會環境、政治、經濟水平背景，這些因素都將影響使用者的操作。除此之外，在不同場所操作行動裝置，所需的功能也大不相同。不同的環境會造成人類產生心理、生理、氣氛、團隊影響、話語權、主觀判斷力、情緒等各方面的影響。這些影響將直接反應到對待手持行動裝置上。因此針對不同環境下手持行動裝置的被使用特性能有助於研究使用者與手持行動裝置的互動特性，如表 1.1。（周陟，2010）現今流行的 iPhone 屬於手持裝置的一種，iPhone 在硬體上並不是採取最先進的技術，甚至在韌體上也有諸多限制。但會廣受歡迎的最大原因是它能帶給使用者良好的操作體驗、對於開發者的友善、並有著數量驚人的應用程式群做為支援。iPhone 上的應用程式並不能單純地將其分類成公用、產出型、沉浸式這三種，依頁面的資訊與功能而有不同的呈現方式。以健身瑜伽的應用程式為例，每種瑜伽動作的練習教學頁獨就屬公用應用程式的畫面。使用索引標籤列來切換不同的練習工具可套用產出型應用程式的版面配置。當使用者觀看練習範例的視訊就是沉浸式應用程式的範圍了。目前 iPhone 的螢幕尺寸分成二種，320x480px 與 640x960px。雖說在程式撰寫上無論哪種尺寸皆以 320x480px 為準，但若要開發符合 Retina 螢幕的介面，就要以 640x960px 來計算，也就是把 320x480px 的螢幕尺寸乘上兩倍，不管是狀態列、導覽列、標籤列的寬與高都必須乘以二。為了能符合 2 種螢幕尺寸的需求，設計師必須提供 2 套不同尺寸的圖檔和給程式撰寫人員。有的設計師會說，完成一套 320px 的介面再放大兩倍給 Retina 螢幕使用是比較便捷的作法。但很明顯的先為了 320x480px 設計，再放大至 640x960px 是個較好的選擇。為了最小的螢幕設計可以減少大圖縮小時喪失細節所帶來的失望。但如果沒有使用形狀圖層或是向量智慧型物件來建立圖形，由小放大的圖片看起來會有顆粒感（Gordon，2010）。. 28.

(40) 評估互動設計最好的方式可以從 Effective 有效、Easy 簡易、Enjoyable 享受，這三個方向來判斷。互動設計的最低限度就要協助使用者完成任務、解決問題、達到目的。不能讓使用者隨心所欲的操作，就是失敗的產品。簡單來說就減少讓使用者思考的時間，讓操作更加直覺化。可以將相關選項放在接近的位置、減少視覺移動的位置，讓使用者以最少的按鈕數量達到他的目的。避免所有增加眼睛負擔的元素，如零亂的構圖、混淆的顏色、誇張的字型等。互動設計不只要讓使用者能有效完成任務，並能簡單地操作外，如能讓使用者享受互動的過程則能使設計更加完美。將知覺系統轉化為刺激使用者喜悅的來源形成生理愉悅。或讓使用者享受社交、或是產品帶來的自信等等。經由互動達到的成果，像是使用者搶到低價的喜悅。並滿足使用者在品味、價值觀、審美觀、自我期許等思想上的需求（葉謹睿，2010）。. 2.3 使用者經驗 Jesse James Garrett 在 2000 年發表的使用者經驗元素一書中提出，使用者的經驗可分成抽象到具體，也就是由策略、範圍、結構、骨架、表層所構成，如圖 2-13。 1. 策略指的是使用者需求和開發的目的。 2. 範圍則是在找出需求與目的後以需求為基礎，整理出所有使用者可能會需要的資訊及功能，以愉快且有效的運用各種功能為出發點建構合理的互動模式與流程。 3. 結構是指把所有資訊整合起來，依使用者能直覺理解的方式組織成完整的概念。 4. 骨架結合介面設計、資訊設計、導覽設計三者將資訊做視覺化的呈現，協助使用者理解資訊。 5. 表層則以視覺與感覺為基礎，設計介面元素如文字、頁面的視覺圖像、導覽元件等。. 29.

(41) 圖 2-13 使用者經驗分層元素（Garrett，2000）. 而使用者經驗又可以依使用者的知覺意識分成最容易被感知文字、視覺設計、聲音、動態，逐漸到不較不容易被察覺的資訊設計、介面設計、互動設計、軟體設計。使用者能夠輕易挑出錯別字，甚至覺得文案用語不佳影響到他們的使用體驗。最不易被察覺的軟體設計同樣有可能對於使用者經驗造成負面影響，但對大部份的使用者而言這個部分是無形的，即使他們覺得操作不順或不愉快也沒辦法得知是哪個部分的程式碼撰寫不當（Michael Cummings，2010）。在開發應用程式上，也是從最底層的策略、範圍、結構、骨架、表層開始規劃設計，如蓋大樓般一層層搭建。找出使用者或客戶想要什麼，這個 app 想達到什麼樣的目的。這個 app 的最終目標是要行銷、品牌形象強化、和客戶原本的產品做結合、還是單純展示耍炫？這個 app 有哪些功能？實現這些功能的方式有很多種，操作流程能不能簡化？重覆性操作能不能濃縮？在專案經理聽取客戶需求回來開會時，介面設計師心中就要能想像出這些功能需要哪幾個頁面，某些功能是否可以集中在同一頁上（但一個畫面裡塞太多操作會讓使用者迷惘）。要如何設計才能符合客戶需求、並讓使用者覺得畫面漂亮功能簡單、方便好操作。歷史告訴我們，人們不一定做正確的選擇。他們做安全、讓自己舒服的選擇。不能直接問使用者他們想要什麼，這樣只會得到理論性的回答，而無法知道在真實的情況下，他們所會做出的真實抉擇（Hoekman，2006）。. 30.

(42) 在不能直接問使用者他們想要什麼的情況下，Peter Morville 設計出「使用者經驗藏寶圖」，如圖 2-14，說明一個構想是怎麼合理且適切地無中生有，一直到完成設計提出各式文件給客戶的開發流程。 1. 敘述故事：初期的發想為敘事型的段落文字，用較感性的方式描述一則短篇故事，這個故事能幫開發者找出問題，有提示、聯想、反應內心等等的作用。 2. 找出中心思想：從短篇故事中會發現某種核心思想、某種抽象的理念，也許是一句短短的話，這句話非常重要，未來所有的發想將有可能都由此為中心點。 3. 創建人物：有了故事與核心概念後，可以採用人物角色法營造一種或數種人物個性，建立他們的操作目標和行為。人物角色法可作為設計和開發的指南，提醒開發者這個人是目標使用者，所有的想法都該繞著這個人打轉。 4. 代入情境：有了人物角色，請將他放入一個情境之中，觀查他會怎麼行動，考慮看看他真正的需求是什麼。也許不會只有單一個場景，這時候就要回到核心思想，仔細訂定人物的立場。 5. 整理清單：有了前述的內容，可以開始將這些敘述性的文字圖片整理成清單。可能會是一個表格，或是有組織的文件，擁有明確結構及分類。這個步驟能幫助開發者從資料中更快分析出重點。 6. 資料分析：從起因、目標、操作、慾望、需求、情緒等等各個角度，開發者會從中整理成合理的資訊。 7. 使用者調查：為了驗證分析後的結果，需要進行使用者調查，從中發現與分析後資訊的共同點與差距，試著展示這一切，觀察使用者的滿意度。 8. 製作概念圖：零碎的資料越來越多，需要篩檢統整成可用的部份，概念圖可以幫助開發者加快工作效率。可以看到目前進行到什麼位置、未來將會做什麼、建立標準、澄清關係，並確定方向。概念圖有點類似心智圖，但比心智圖更嚴謹，用將抽象的形容以具體的詞彙表達。有了概念圖後，這項產品包含哪些項目一目了然，建立系統圖會更容易。. 31.

(43) 9. 製作系統圖：系統圖可以讓開發者與客戶瞭解這些功能是如何從有變成怎麼做，也代表這項產品真正需要的是什麼，沒列在系統圖理的就是不重要、可以被捨棄的部分。 Russ Unger（2009）對於專案開發的討論會議上提出五點必須思考的問題，也適用於製作系統圖的討論會議上： a. 被討論的這項功能或條件是否和產品最終目的相吻合？ b. 若將這項功能或條件移除，是否有助於減少使用者可能承擔的風險？ c. 刪除這項功能或條件會影響其他操作嗎？ d. 刪除這項功能或條件有可能會造成哪些變化？ e. 這項功能或條件產生的價值是否值得投入開發的人力與物力成本？ 10. 訂定頁面流程：確定功能之後，才能訂定頁面流程，這個步驟非常重要，能不能精簡使用者的操作，避免迴圈、死路，讓使用者覺得體貼方便。 11. 繪製 Wireframe 線稿：待流程都確定後才開始畫 Wireframe 線稿。 Wireframe 又稱做介面框線，指的是去除視覺設計細節的原則下，以規劃頁面結構、資訊層次組織、功能以及內容的低保真原型。繪製介面框線的目的在於將每個功能化為實體可操作的介面元素，包含欲呈現的資訊內容、可操作的按鈕位置、版面的編排等等。重點放在規劃而不是視覺設計。這個階段必須確保繪製出來的線稿完全依照網站地圖的流程，且畫面上每一顆按扭或任何一個操作都有相對應的頁面或回饋（Clark ，2010）。 12. 設計故事板：如何要測試線稿圖是我們所要的呢？這時候需要故事板來輔助。隨著故事板中的時間、環境推移，不只可以表達產品和使用者之間的關係，從中能看出兩者之間的互動，發現線稿需要增加或減少的部份。 13. 概念設計：線稿可說是低保真度的原型，以快速修改、將腦中的構想迅速呈現為目的，並不那麼重視圖象的細節。到了概念設計階段才開始製作高保真度的圖象，加入視覺部份，對畫面細節以 1px 為單位斤斤計較。. 32.