互動設計概論

互動設計這個詞這幾年很常見，包山包海感覺上只要是各種媒體上看到會動都 ... 中英文書寫方向是由左至右，但阿拉伯語的文字是由右至左，這對介面設計 ... 嫁給RD的UIDesignerAkaneLeeUIDesignerTaipei,Taiwan uiux.akane Tweetsby@akane_lee什麼是互動設計？互動設計這個詞這幾年很常見，包山包海感覺上只要是各種媒體上看到會動都可以叫互動設計。

有一種說法是「設計出互動產品，提供人類在日常生活或工作中使用」，更詳細的解釋則是「互動設計是人類互動及溝通上的空間」。

它是一種以使用者的需求與經驗為出發點，創造出人類與科技的完美連結。

IDEO創始人在1984年的一次設計會議上提出，他剛開始將互動設計命名為「軟面」（SoftFace），但這名字很容易讓人想起當時流行的玩具「椰菜娃娃」，後來將名字改為「InteractionDesign」。

從SoftFace這個最早期的命名方式可以看的互動設計的特性：沒有規則可讓人任意塑造扭曲、是在最表層如臉孔一般的存在。

互動設計可分成三大類：透過螢幕的體驗、互動產品、提供服務。

最常見的互動設計就是「透過螢幕的體驗」，想想看什麼東西有螢幕？手機、電視、相機、導航器、甚至有些擁有電子儀表板的微波爐、烤箱、冰箱，只要是透過螢幕和使用者溝通互動的都屬於這一類。

（iPad，取自http://www.apple.com/tw/ipad/overview/）互動產品擁有實體，有些產品會橫跨兩類，如相機、手機，這類型的產品擁有螢幕、也擁有具操作性的外觀。

舉例來說，單眼相機在未開機情況下可以看到有右上角有電源開關、快門、內閃燈、方向鍵、選單鍵等等。

這些按鍵各自擁有不同功能，但在開機後會依照LCD顯示的內容不同而改變每個按鍵原本的功能。

互動產品在硬體上偏向工業設計、依材料、結構、人因工程等各種因素，影響使用者的操作與體驗。

（PentaxK01，取自http://www.pentax.jp/japan/products/k-01/index.html）公司與客戶間的服務互動設計較抽象，它沒有固定的型態或是管道，主要在提升客戶對公司或產品的信賴度。

最直接且常見的如產品保固、退換貨服務、電話語音查詢等，都算是以服務為出發點的互動設計。

（美術館的導覽服務）由此可知互動設計不只掬限於平面，包含實體的產品、甚至空間，只要是能和人類勾通、有互動的都可稱得上是互動設計。

簡單來說互動設計以概念為出發點，研究和數據分析中獲得設計依據。

最初的起源可能只會是個想法、某個念頭，或是突然其來的發想，透過不斷測試與實驗取得數據證明它是對的。

根本的核心就是提高使用者體驗、使產品更好用、功能更符合人性化邏輯。

未經互動設計的產品單純地解決困難，卻製造出一堆問題，使用者感覺不到產品的「體貼」。

在美國，工業設計、網路設計、軟體設計、媒體設計、數位廣告等各領域的公司在近幾年來紛紛成立互動設計部門，因為科技與人類的互動結合已成為一個必然的趨勢。

互動設計是一個巨大的領域，能透過它尋找使用者和產品之間的連接。

使用者對於這個連接的感覺是什麼，他們遇到什麼問題，及想透過互動設計達成什麼樣的目標。

互動設計包含使用者經驗設計、資訊架構、溝通設計、使用者介面工程、可用性工程、人機互動、人因、工業設計，每個環節都息息相關相輔相成。

介面設計、資訊架構、溝通設計、使用者介面工程完全屬於使用者經驗設計領域，使用者經驗設計又含括部分人機互動、人因、工業設計。

（取自DesigningforInteraction:CreatingInnovativeApplicationsandDevices)好的互動設計在Designingforinteraction一書中提到，好的互動設計有七個特徵：1.值得信賴 讓人第一眼就覺得這項產品可以被信賴，試想在大賣場裡購物，有的商品價錢比旁邊的大廠牌便宜，即使內容物相同，大部份的人會優先選擇大廠牌製造的商品，因為他們相信大廠所製造的商品品質有保障，即使價格比較高。

假如你的iPhone裡裝了個App，從AppStore上看到它畫面優美功能齊全於是安裝它。

但這個App老是在不知道什麼情況下就會當機或是自動跳離程式。

即使它做得在好你也會對它產生不信任感。

（AppStore的精選項目，獲得Apple挑選推薦的App品質有一定程度的保證）2.貼切 你的作品也許不止在台灣上架，如果想發行到全世界就必須考慮各個國家的文化因素、社會狀態、甚至政治。

比如說中英文書寫方向是由左至右，但阿拉伯語的文字是由右至左，這對介面設計上會有很大的影響。

3.聰明 簡單來說就是防呆，避免使用者出錯、減少出錯機會。

像是iPhone傳輸線的設計，如果方向反了就沒辦法插上iPhone，這就是避免使用者出錯的防呆裝置。

最新款的iPhoneLightning傳輸線乾脆設計成兩面都能使用，完全不給使用者出錯的機會。

4.反應靈敏 換個方式來說就是避免延遲造成使用者的不耐煩、甚至加上更多提示效果提示使用者目前進度。

如果你開啟某個App，這個App設計在使用者第一次開啟時從網路下載最新資料，所以你面對同一張歡迎頁面等了很久沒有任何反應，是否會覺得這支程式有問題呢？延遲感不只會讓使用者不耐煩，更會降低使用者的信賴、對停頓緩慢、毫無反應的操作感到不安。

（Airbob的圖片預載設計，很有趣活潑的底紋。

）5.細緻 指的是一種更精緻、在細節上體貼使用者的思考方式。

像是註冊新會員，除了必填的帳號密碼電子信箱外還得填上性別綽號出生年月日電話地址…這些是在註冊時非寫不可的項目嗎？何不放到第二層或是讓使用者可以暫時略過、之後再來填寫呢？想想看使用者一進入註冊畫面，看到滿滿一整頁的欄位需要他花大把時間力氣填寫，會不會就此打退堂鼓？ （Etsy的註冊畫面，只留下必填項目。

）6.有趣 有趣、新鮮的事物總是較受人歡迎。

勾起使用者的好奇心能增加被使用的機會和黏著度、也會比其他功能完善但一板一眼沉悶的App更易推廣。

（Hipstamatic，能拍出復古LOMO風格的相機App，用模擬現實生活的方式更換鏡頭、機身、底片。

）7.愉悅 人都會偏向讓自己高興的事物，有誰會想使用一款讓自己不開心的App？讓人感覺到愉悅的關鍵包含功能和美感。

除此之外，要讓使用者覺得操作這款App沒有壓力，沒有發生操作困難或是不順暢。

讓使用者能流暢操作就能增加滿意度、讓心情保持愉悅。

（Reeder，單手就可流暢使用的RSS閱讀器，介面簡單乾淨，操作提示充足。

） （AppStore上隨時有許多精選推薦的好玩遊戲。

）介面設計和互動設計的不同？互動設計和介面設計很容易被混淆，它們倆息息相關。

介面設計是互動設計中的一環、是一種表現手法，透過互動設計中「透過螢幕體驗」的方式和使用者接觸。

從圖中可以看到互動設計如何從抽象演進成具象，而介面屬於金字塔頂端較具象的部分。

第一階段的概念設計出發點有時候僅僅是個核心價值，逐漸形成抽象或故事性的概念。

進入到第二階段，從概念中發展出目標，為了達成這個目標開始行為規劃。

最後的第三階段著手設計介面，它是實現目標和概念方法與手段。

互動設計就是經由這三個階段，從抽象逐漸化成具體可操作的介面設計。

互動設計包含介面設計，介面設計可說是互動設計的一部份，但介面設計不能說是互動設計。

(取自Interfacevs.interactiondesign，原網址太舊已連不上了）介面設計經歷了幾種發展階段，從純文字的命令語言使用者介面發展到大量使用圖象的圖形使用者介面、加入現實生活觀的直接操作使用者介面，帶來更多刺激的多媒體使用者介面、在現實中製造另一個空間的虛擬實境技術。

互動設計介面演進和電腦的發展相輔相成，螢幕的顯示由點構成，且受到色彩限制，加上當時的運算技術會反應出使用者操作什麼樣的介面，所以最早期的互動設計可說是命令語言使用者介面。

像是需要敲入純文字執行命令才能運作的DOS系統，就屬於人機互動較初階的時期。

這種互動方式需要大量的記憶力與訓練，必須理解許多由純文字構成的指令，不止容易出錯而且入門門坎即高，對初學者來講很不友善。

DOS模式下的畫面隨著科技發展，電腦運算技術和螢幕顯示越來越進步，相對應的儲存設備容量也越來越大。

逐漸從容量小純文字命令語言使用者介面轉換成需要較多容量和運算技術的圖形使用者介面。

同時這也是目前最主要的使用者介面設計，廣泛運用在各種電腦和手持行動裝置上。

圖形使用者介面利用各種圖像取代原本對控制原碼的記憶，使用者能藉由圖象進行聯想，減輕學習負擔。

在操作上也不只使用鍵盤輸入，滑鼠、觸控螢幕、手寫板等週邊大量出現，電腦不再是高高在上難操作的高科技產品，真正普及至一般家庭。

MACOSXLion，Launchpad畫面在圖形使用者介面發展一陣子，單純的圖象已不能滿足使用者，即使圖象再精緻，總是和現實生活有所落差，使用者仍需去記憶每個圖象代表的含意。

新興起的直接操作使用者介面。

能讓使用者只要關心他想操作的對象就可以了。

他只需要關心操作目的的語義，而不用為電腦語義和語法分心。

像是Windows的桌面系統，模擬出物理環境中的桌面，資料夾的設計讓使用者了解只要操作資料夾就可以找到所需的文件，而不用關心資料夾和系統的訊息處理過程。

MACOSXLion中的MissionControl畫面科技再演進，電腦能夠使用的媒體包括文字、圖片、照片、聲音（如音樂、語音旁白、特殊音效）、動畫和影片，並透過程式組合兩種或兩種以上的媒體，產生多媒體使用者介面。

引入動畫、音樂、影片等互動媒體手段，能大幅度提升使用者接受訊息的效率。

舉例來說，使用者不用將全部注意力都集中在靜態視覺的改變，可以利用動畫或影片傳達訊息，甚至使用聽覺告訴使用者目前情況。

像是收到一個新的通知，不用打開螢幕就能分辨出是新的Mail、Facebook更新還是有未讀簡訊。

這種作法在遊戲中非常常見，以流暢華麗的戰鬥畫面為一賣點的FINALFANTASYXIII就是透過多媒體使用者介面在畫面上顯示各種資訊。

FINALFANTASYXIII遊戲畫面但上述介面都需要透過一個平面的螢幕才能使用，和現實生活完全不同。

虛擬實境技術就是將虛擬的介面從平面空間裡拉出來呈現在現實生活中，簡稱VR技術，也稱靈境技術或人工環境。

是利用電腦模擬產生一個三度空間的虛擬世界，提供使用者關於視覺、聽覺、觸覺等感官的模擬，讓使用者如同身歷其境一般，可以及時、沒有限制地觀察三度空間內的事物。

使用者進行位置移動時，電腦可以立即進行複雜的運算，將精確的3D世界影像傳回產生臨場感。

該技術集成了計算機圖形（CG）技術、計算機模擬技術、人工智慧、感測技術、顯示技術、網路并行處理等技術的最新發展成果，是一種由計算機技術輔助生成的高技術模擬系統。

很多需要極度專業的訓練必須要讓受訓者實際上陣，親自體驗學習。

但每一次實際演練的成本極高，虛擬實境技術可被運用在這方面，如圖2-6，不只降低成本，更增添許多方便性。

海軍航空站（NAS）彭薩科拉訓練跳傘學生情況從命令語言使用者介面、圖形使用者介面、直接操作使用者介面、多媒體使用者介面到虛擬實境技術，可以看出一個規律性：先求有，再求好。

命令語言使用者介面過於複雜門坎太高，無法普及至一般大眾，等到圖形使用者介面出現，造福所有人後又覺得理解圖象是一回事、好不好用又是另一回事，似乎缺少了些什麼。

開始考慮人與介面的互動性，怎麼作才會好用，所以產生直接操作使用者介面。

介面越來越好用了，但感覺不夠華麗不夠搶眼，過於雷同的介面充斥在生活之中已失去刺激強度，多媒體使用者介面因應而生。

擁有各種表現手段的多媒體使用者介面卻也比不上親身體驗，進而產生虛擬實境技術，成為虛擬和現實的互動橋樑。

以上，很悶很硬我也沒辦法寫得很有趣的理論內容，只能多附點圖讓文章看起來活潑一點。

同樣，和原著的語詞多少會有出入，我有穿插個人意見。

如果有疑問請找原文Designingforinteraction這本書看。

Older»製作過程：AnnaSuiWallet«Newer使用者經驗藏寶圖：敘述故事、找出中心思想 commentspoweredbyDisqus最新課程資訊台北5月UX課CategoriesPodcast 4UI雜談 64UX相關 28Youtube 6個人經驗 51好書推薦 28爬舊文有風險 11設計思考 1課程講座 31軟體與操作 53遊記 15開發流程 38Tagcloud3D adobe Android App CLIPSTUDIOPAINT CX FlowChart FunctionalMap GrowthHack Guideline HTML HTML,CSS Illustrator iOS iPhone MacOS MagicaVoxel Mockup Photoshop Podcast Prototype Rails RWD StarWars TOOL Tutorial UI UIFlow UI和RD UI雜談 UX UX相關 Wireframe 作品集 個人經驗 公司營運 切圖 初學者 加拿大 動態效果 半途而廢 台灣 吃貨 好書推薦 工作職責 我的生活 手繪 拆解UI 接案 文具 日本 書單 服務設計 標示文件 歐洲 泰國 研究方法 簡歷 設計思考 課程 遊戲 開發流程 面試 香港