週末讀書——《互動設計》黃琦 著

趁著週末把這本由浙江大學的黃琦老師和淘寶資深設計師畢志衛合著的《互動設計》讀完了，在此想分享一些書中我認為重要且通俗易懂的內容。

我們常常說看待事物要透過表象看本質，學習互動設計也如此，先從一個大的巨集觀設計理念一步步深入到具體的應用中，才能不走偏，不忘初心。書本分別從 互動設計概論、基於UCD的使用者需求研究、需求獲取、原型設計、設計模式應用、細節設計、可用性評估、互動設計創新研究 這8大章為我們從概念到如何具體落實介紹了互動設計。

Part1:互動設計概論

互動設計（Interaction Design）是基於瞭解使用者特性和需求的前提下，構建適用的系統行為，從而達到更高效、更友好地幫助人們完成他們使用這個數字產品的目的。這裏的使用者需求就需要設計師透過表象看到本質地去思考人的「動機」了，例如在現實世界中，人們要喝水需要的不是杯子而是盛水的容器；同樣，當人們使用一款跑步計數app時，很可能不只是想知道自己跑了多少步數，更希望在社交圈展示自己的「成果」又或知道自己消耗了多少卡路里。這裏引出了一個概念——以目標為導向的設計，要求設計和研究人員始終站在一個較高的水平看問題，幫助你朝著最終目標的方向前進而不會太過偏離設計目標。

Part2:基於UCD的使用者需求研究

什麼是UCD？User Centered Design。這裏涉及到幾個經典的UCD名詞：

1.心理模型和實現模型，心理模型就是人們在日常生活中基於經驗和習慣形成的對事物的起因、機制和相互關係等看法；實現模型指計算機實現其目標的機制（對計算機而言可能就是一串串程式碼）。我們傾向於在其他因素相同的情況下，形成比現實更簡單的心理模型，因為只有產品最後的表現模型離使用者心理模型越近才越容易被使用和理解。

2.隱喻，強調「使系統符合現實」，是我們首先應該遵循的原則，它在介面設計中主要有兩個目的：傳達操作功能和情感引導（例如MacOS系統介面中廢紙簍的圖示設計）。

3.對映，物理環境在資訊世界中建立一種反饋和對應性。

4.心流，當人們全身心投入在某個活動中，達到無需努力便可集中精力並享受的狀態就是流。（心流的概念也被提及在Ant Design Mobile「螞蟻」的設計理念中），很多電商平臺的流佈局介面（不斷下拉載入新的頁面）就是這種很好的「流」體驗。

Part3:需求獲取

在產品設計實踐中，一個產品往往會有來自多方面的需求。商業需求往往是在滿足使用者需求中最可能引起衝突的另一大需求，這時你需要抓住相關利益者的需求，最後平衡出一份MRD（市場需求文件）。制定設計目標通常包含三個方面：商業目標、使用者目標和成功標準。

Part4:原型設計

根據細節的展示程度我們將原型分為低保真原型和高保真原型。低保真原型中，我們只需展示集中功能層面，對相近的資訊進行區分，確定每個頁面上大概要承載哪幾個功能；高保真原型則已經將功能和資訊細化，增加設計模式，完整的呈現了導航、板式、以及每個內容區塊具體的資訊形式等等。

Part5:設計模式應用

互動設計模式，是解決互動設計問題的一系列可行可複用的原型、方案或模版。

1.搜尋框。在實際設計案例中的表現有：框運算功能，其創新點及優點是「自動完成」的進一步深化，即更加準確和具體地猜測到使用者輸入資訊搜尋的意願；自動匹配功能，和框運算有異曲同工之妙，輸入框為使用者自動補充可能的資訊，大大降低使用者的輸入成本，使搜尋框從「可用」到「好用」，提高了使用效率；細節設計，增加名稱或類目名選項等，提現對使用者細緻關照的效果。

2.登錄檔單。表單（form）由表單標籤、表單域和表單按鈕構成。良好的使用者體驗表現在：充分的提示和幫助、文字框是否選中的不同狀態時的表現、註冊和登入的整合（通過一個單選框切換註冊和登入狀態）、避免較多的文字描述等。

3.旋轉木馬。一種充分利用有限螢幕空間的設計模式，在展示一系列圖片的情況下，通過前後如同木馬般旋轉的圖片會吸引使用者的注意力，如MacOS系統中圖片的瀏覽方式就是木馬旋轉最直接的運用，很多輪播的banner圖，也是較為常用的運用方式。

4.步驟條。是使用者執行一個任務的步驟指示和引導，作用在於讓使用者知道總體的步驟和所處的位置。主要由「步驟內容」、「步驟方向」和「步驟狀態」三部分組成。在實際運用中可以根據應用場景做一些有特色和創新變化的設計，例如用圖片而不是文字的形式呈現步驟內容等。

5.搜索結果頁。一般包含了搜索結果網頁的標題、連結，一段簡單的並且與搜尋關鍵詞相匹配的關於網站的文字摘要，搜索結果網頁快取的連結。除了這些基本資訊，有時還會根據情況提供一些其他資訊，比如，最後抓取頁面的日期和時間，搜索結果網頁的檔案大小，和搜索結果相關的同網站的其他連結，以及相關的評分、打分和聯絡資訊等。

6.新手幫助。幫助新使用者快速瞭解和使用產品的引導設計。從資訊架構開始，對所要呈現給使用者的資訊進行整理和組織，並結合步驟條、導航、搜尋框等模式將資訊有序呈現。不同的出發點和使用者使用「新手幫助」的設計也有差異，應儘可能在資訊等視覺化及使用者易用性上最優化，因為對於新手來說，如果難以使用或認知負擔較重，很可能就會放棄使用。

7.評分。評分的設計實質是表單的設計，評分充當一個快速收集使用者看法的簡單工具，被要求在很短時間內完成，因為使用者不喜歡思考，而且他們的精力和時間有限，這就要求設計上極其注重可用性和易用性，以及符合使用者認知習慣。

Part6:細節設計

細節設計是整個產品設計開發環節中重要的一環，使用者看不到產品背後的邏輯和技術實現的方式，使用者看到的是產品外在的視覺效果。文字和色彩是構成一個網際網路產品最基本的要素，兩者承載著產品對外傳達的資訊及情感。文字的可讀性和可辨識性是檢驗閱讀體驗兩個最重要的指標，通常在閱讀類app中，長短正文中使用襯線字型（如宋體）就比無襯線字型（如黑體）的可辨識性要強，有利於降低使用者的閱讀疲勞感。（在這推薦一款知識學習app「得到」，裏面的學習文章用的就是很舒適的襯線字型）另一個要素色彩，給人以高階的色彩配合往往是同一色相，不同的明度和飽和度。低端（sale，刺激消費）的色彩配色往往有兩個及以上的色相，明度中等，飽和度偏高。

第7章可用性評估和第8章互動設計創新研究 在此就不做簡述了，對本書有興趣的童鞋可以瞭解閱讀完整的內容～