【弘毅道：設計】不得不懂的交互設計三要素

前一段時間，有一個學弟向我諮詢一些設計的問題。期間，他提到想轉行做交互，問我有沒有交互設計的教程？當時我就有點懵了，交互設計的教程，有嗎？好像我還真沒有！接下來，我就認真地思考了交互設計「教程」的這檔子事。

因此，在筆者所學的交互設計的知識點中，為初學者講解一下。

交互設計（Interaction Design）顧名思義，是定義、設計人造系統的行為的設計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某種目的；狹義的交互設計則是指人與機之間的互動，機器需要對人的感情、動作等的投入給予相應的反饋，能夠讓人與機器之間有不間斷的互動。

人機交互設計的三要素人、環境、機器，人作為交互設計的中心，也是當前所提倡的以人為中心的設計或者以用戶體驗為中心的設計的原因。目前交互設計的概念不斷擴大，機器的概念也擴大到了包括應用、服務以及越來越熱的VR與AR的和人有互動的事物中。相較於交互的三要素而言，另外反饋的時機也很重要，有人專門對PC端點擊反饋的時間進行了研究，過快或者過慢的響應都會降低用戶的體驗。

就當前而言，大家說提到的交互設計更多的是指人與應用之間的交互。今天就來聊一聊我對交互的理解和應用。筆者認為交互設計主要分為三部分：信息架構、使用流程以及交互細節。那麼，我們就聊一聊交互設計的三要素。

第一要素：信息架構設計

1、著力點：需求

說到交互設計，就不能不提需求，因為所有的交互設計的工作都是基於需求，這也是交互設計的第一個著力點。因此，只有在深刻地理解需求之後，才有可能做出好的交互設計。

舉一個飽含血淚的例子：曾在做一個項目的過程中，有一個需求是要將一個應用的數據展示做一下調整，使之能夠查其三個月之內的數據。當時，自以為已經很了解需求，只是將時間限制放開到三個月，同時，數據的展示限制在一個月內。也就是說，可以查看三個月內任意小於三十天的時間段。有兩個優點，一是滿足了需求；二是頁面顯示效果比較好。但是，自己是沒有真正的理解需求，用戶要查看三個月的數據，更多的是要查看三個月所有的數據，而不是三個月中的一段數據。發現用戶的真正需求後，我們又做了相應的調整，數據的可查時間範圍不變，但是顯示範圍可以是一個可以頁面顯示並能夠之間交互操作的時間軸。這樣，產品的交互效果和顯示效果都得到了很大的提高。相似的功能需求，交互解決方案如圖所示：數據展示頁面窗口大小保持不變，而用戶可以通過調節X軸的滑塊來查看某一時間段的數據。

但是，所花費的時間成本和人力成本都在那一點小小的偏差上成了無用功。因此，需求的理解詳細到任何程度都不為過。

2、著力點：競品分析

交互設計的第二個著力點是競品分析。人們常說，如果一個人要走的快，那就一個人走；如果要走的遠，那就一群人走。在中國當前的環境下，你很容易就能找到三五個相似的產品，充分的競品分析與調研能夠找到你的產品方向，能夠補充你的需求以及用戶場景，同時能夠很好地了解用戶習慣，尊重用戶的習慣是以用戶體驗為中心的交互設計的第一要務。在尊重用戶習慣的前提下，結合自身的優勢與自己產品與競品的定位差異，很容易就得到了你產品大致的信息架構。當然，這不是最終的信息架構。

3、著力點：卡片分析法

要得到自己的信息架構，並能夠有自己的特色與創新，還要一個著力點，那就是卡片分析法。如何對卡片分析法結果進行處理，這是關鍵。不過，在這裡要注意「層」和「度」的平衡。所謂的「層」就是你的產品的層級有多深。以移動端的應用為例，移動端的層級最好不要超過五層，因為移動端的應用沒有類似PC網站的麵包屑導航，如果層級太深，用戶很容易在其中迷失，不能找到自己想要的功能。所謂的「度」就是產品功能的分類。產品功能分類的好壞，可以深刻的影響到用戶的體驗以及用戶能不能順利的找到自己想要的功能。這也是為什麼使用卡片分類法的原因所在，卡片分類法能夠將目標用戶內心的心智模型表現出來，有利用用戶順利的尋找到目標。

4、著力點：對信息架構的應用

在信息架構設計中，最後一個著力點是對信息架構的應用。通過對產品的「層」和「度」的整理，對其進行重要度的分級。如果有若干一級標籤屬於第一優先順序，那麼，這種類型比較適合使用標籤式導航。因為用戶在相同優先順序標籤之間的切換比較頻繁，這樣的導航強調若干相同優先順序的標籤之間的切換，使用戶能夠方便的瀏覽到不同分類的信息，這一類的應用比較多，如QQ、淘寶、天貓、京東等。

如果只有一個比較核心的功能且優先順序比較高，其他的信息較為次要，這種情況的信息架構比較適合採用抽屜式導航。因為用戶在當前主要頁面中就能完成任務，就沒有必要進行導航的切換，這一類的應用主要有滴滴、UBER、小米郵箱等。

完成了信息架構的設計，只是完成了產品功能的橫向設計，還有產品功能的縱向設計。產品的縱向設計就要涉及到產品的流程設計，流程設計是在功能展示完備的情況下，對功能之間跳轉的設計，是交互設計中的另外一個重點。

第二要素：交互流程設計

1、任務與場景的梳理

相對於信息架構的橫向信息布局與功能分類來說，流程設計更多的是縱向的完成任務的交互點的梳理，以達到讓用戶順利的完成相關任務的目的。對於用戶來講，交互設計流程是指用戶能夠順利的完成想要完成的任務；而從業務層面來講，以不干擾用戶使用流程的方式完成業務需求，才是流程設計的完整定義。

好的流程設計不僅能夠提升產品的用戶體驗，同時能夠更加順利的完成業務目標。作為兩大國民應用的支付寶和微信，在產品的交互流程上的經驗也充分說明了這一點。通過與春節聯歡晚會的合作，微信不僅實現了全民數百億次搖一搖的互動，同時實現了在兩天之內完成了兩億張銀行卡綁定的業務目標，這可是支付寶數年才完成的目標。這就是得益於微信紅包的好的流程設計，相反支付寶的效果就沒有那麼明顯了。這也就是要做好交互流程設計的原因。

交互流程是依附於產品解決任務的過程而存在的，脫離任務來講流程是不恰當的。因此，要做好交互流程設計，首先要明確的是圍繞什麼樣的具體任務來展開。任何一個應用都有一個或者若干功能點，來解決某些問題。針對這些功能點來解決任務的過程就是任務，同一個任務可能有不同的用戶場景。比如，同一個打電話任務就有若干不同場景：從未接電話開始、聯繫人開始、撥號開始等。所以，根據不同的任務，梳理出不同場景。因此，產品的交互流程可能不止一個，會擁有若干基於任務解決方案的流程設計。

2、交互點的整理

完成任務與場景的梳理以後，就要進第二步，就是要針對一個任務的一個主要場景梳理出用戶與產品存在的交互點（InteractionPoint），也就是用戶在完成任務過程中，與產品之間存在的物理與心理的互動關係。我們以通過微信找到好友並發送消息為例，來說明該任務中存在的用戶與產品之間存在的交互點。在這個過程中，通過對交互點的整理，可以清楚的看到完成某項任務的難易程度，以及對於用戶可能存在的交互障礙，需要在具體的界面設計時，對用進行引導，來避免用戶出現困惑或者錯誤。

3、添加業務流程

接下來就要將業務流程添加到交互點中，與相應的頁面融合。添加業務目標的方法一般有兩種，第一種是將其放置在核心任務流程結束的地方，比如，餓了么、美團外賣等，用戶在完成一次訂餐後，會提示用戶將連接分享給朋友可以獲得相應的優惠券。其業務目標就是讓用戶幫助應用推廣應用，這樣的好處是不影響用戶完成其任務，在完成其任務以後，即使用戶不分享也不會影響其體驗。

另外一種是將業務目標弱化顯示在流程頁面中，比如我們在註冊的時候，都會在底部顯示用戶協議的選項，而其是默認勾選的。因為這些信息使用戶不願意看的，所以弱化處理。

在完成以上任務後，就可以進行相應的流程設計，針對不同的任務與場景製作不同的流程，其中必然會有一部分的交互點重疊，這樣就可以將同一任務、不同場景下的交互流程整合到一起，完成核心功能的交互流程設計。相信大家對具體的流程設計的製作步驟都已經很熟悉了，在這裡就不贅述了。很多同學，覺得到這裡，似乎流程以及大功告成。但是，遠遠不夠；至少還有兩件事情要完成。

第一件事：相應信息架構的調整

我們一直在強調，信息架構是橫向的信息布局與功能分類，在設計交互流程的過程中，我們會發現有些信息架構的設計、功能分類可能並不是那麼合理，或者，信息架構本身沒有問題，但是在用戶的使用流程中，和用戶的習慣有衝突，這樣就需要調整信息架構，使信息架構更合理。

第二件事：完成所有的流程設計

完成所有的流程設計，包括登錄註冊流程、異常狀況流程等等，其中異常狀況流程包括各種各樣的問題，其中有一個偷懶的方法，就是把網路異常編號整理出來，合併其中的類似項目，這樣就可以整理出若干類相應的異常反饋，並設計出反饋語言，結合Toast和Alert提示，就可以滿足大部分的異常操作。

結合頁面的用戶場景故事，目的在於模擬一個典型的用戶場景，來檢查信息架構和交互流程的設計是否符合用戶的心智模型。這樣才能在後期的細節設計中減少由於架構與流程調整而增加的額外的工作量。

交互流程設計的意義更多在於，從功能角度模擬用戶的使用過程減少用在功能操作中的障礙，提高用戶體驗。但是，無論信息架構設計還是流程設計都只是邏輯上的模型，只有將這些邏輯表現在具體的界面上，這些邏輯才會有意義，才會為用戶了解、接受。這就牽扯到頁面的布局、Icon的大小、交互動效和控制項等等，也就是交互設計的第三個要素——交互細節設計。

第三要素：交互細節設計

交互細節設計是在前兩個要素指導下的設計實踐，也是交互設計可視化與形象化的關鍵。相對於前兩個要素的完整性和系統性，作為第三個要素的交互細節設計就顯得瑣碎和零散。根據交互設計由淺入深的漸進，交互細節可以分為布局、控制項、適配、音效與動效、流（目光與手指的循跡）等等。接下來，我們就從布局開始聊一聊交互細節設計。

1、布局

頁面布局的首要目的就是為了頁面功能的秩序感，使其在頁面功能的分類以及輕重緩急的表現上更加合理，符合用戶的心智模型，在用戶使用的過程中，做到「Don』t make me think !」

在交互細節設計中，頁面布局與前兩個要素之間的聯繫最為緊密。布局的依據就是通過卡片分類法獲取的並通過流程設計優化過的交互設計信息架構。根據得到的信息架構，我們就可以知道頁面導航應該採用什麼樣的導航方式，抽屜式導航還是標籤式導航，以及每個頁面應該有哪些相關元素需要體現和體現的程度。筆者在頁面布局中主要堅持格式塔心理學的設計原則。

格式塔心理學派斷言：人們在觀看時眼腦共同作用，並不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易於理解的統一體。當一個格式塔單元中包含了太多互不相關的單位，眼腦就會試圖將其簡化，把各個單位加以組合，使之成為知覺上易於理解的整體。格式塔理論明確地提出：眼腦作用是一個不斷組織、簡化、統一的過程，正是通過這一過程，才產生出易於理解、協調的整體。由此產生出了格式塔的一些基本原則(適用於布局和界面設計)：主要包括接近原則、連續原則、相似原則和閉合原則。

在交互設計的頁面布局中，要對不同的功能進行分類，並將其在視覺體驗上分開，這就會用到格式塔心理學中的接近原則。同理在頁面布局中，主要功能的凸顯、次要功能的弱化。總的要求就是重點突出，詳略得當。

2、控制項

說到控制項，更多的是指移動端應用、Android和ios應用。控制項的作用有兩個，一是採用同一類型的控制項可以使得應用的風格鮮明、有個性，賦予應用一種獨特的氣質；二是以不同平台為基礎的控制項，在開發的時候減少工作量，做到拿來就用。控制項包括按鈕、開關、輸入框和進度指示器。控制項還可以根據自己的需要來自己定義。有些應用在開發的過程中，製作設計規範的同時，會製作相應的控制項，便於在後期的開發過程中減少工作量。

3、不同終端之間的界面適配

不同終端之間的界面適配包括不同解析度手機之間的適配、移動端和PC端的適配。適配有一個更專業的名稱叫響應式設計（Responsive Design）。響應式的設計分為三個等級，第一等級是最弱的適配，就是沒有適配，手機端會等比例縮小，需要放大才能查看，但是不會出現圖片破損的狀況；第二個等級是輕度適配，可以實現移動端的正常預覽，文字大小不變，圖片等比例縮小；第三等級是圖片、文字、元素位置以及顯示方式等等，都會隨著顯示屏幕的大小而適應屏幕顯示，達到顯示效果的最優化，提高用戶體驗。

響應式設計，第一要考慮兼容設備的範圍以及相應的解析度。這樣就可以確定出幾套交互稿和效果圖；第二是根據不同的尺寸以及設計規範來設計交互原型；第三是對相應的元素和模塊進行調整。在響應式設計中，有兩點需要特別注意：一是菜單，PC端的頁面足夠大，能夠將菜單全部展開來顯示，但是移動端就要把菜單收起來或者以抽屜的形式放在左側；二是圖表，圖表是做所有的頁面中最難處理的。目前筆者還沒有找到通用的有效方法，多採用PC與移動端不同的設計，PC上採用列表，移動端採用內容單元的形式，即將列表中的一個項目單獨成為一個內容單元，以瀑布流的形式向下滾動。但是這種方法就喪失了列表的一項重要功能，就是項目之間的對比。

4、音效和動效

智能手機滿足了人們視覺和觸覺，音效則實現了聽覺的交互。目前，音效設計的主要作用還是現在動效設計師已經單獨的獨立出來作為產品開發中的一環。在扁平化風行天下的情況下，優雅的動效設計是更多應用的追求。目前，有很多動效製作軟體各有優劣點，比如：

• After Effects
• Framer – Prototype Interaction and Animation
• Origami – Design Prototyping
• Form – Instant Native Prototypes
• Pixate – The Next Generation of Mobile Interaction Design

筆者比較傾向於AE，因為AE設計出來的效果細膩，細節豐富，你想要什麼效果 AE都能實現，但是程序上能不能實現就難說啦。AE缺點就是不可交互，以及精準度很難控制。正式因為效果細膩豐富，精準度的控制才是考驗動效設計師水平的試金石。動效學習中，可以參考Google Material Design設計規範中的動效設計的詳細說明（https://material.google.com/motion/material-motion.html）。

另外，網上關於動效的設計案例很多，多看、多練才能提高。在《移動設計》作者總結了動效設計的相關原則：

• 運動形變，萬變不離其宗（運動和形變之間的結合衍生）
• 節奏速度，掌控曲線時長
• 情感故事，擬物、隱喻、品牌
• 結合操作，關聯輕量自然
• 點到即止，切記過猶不及
• 尊重習慣，謹慎進行創新
• 快速原型，多方溝通權衡

5、視覺流

流，即目光和手指的循跡，是信息在設備與人之間的流轉，實現人與設備之間的觸發、影響和反饋交互。整個信息與反饋之間的流轉包括視線流和操作流。視線流的的形成是根據頁面布局以及頁面中的元素特點來流動的，對比越強烈越容易引起人的注意。

說到這裡我們不得不把百度和Google拉出來說一說。通過研究發現，用戶對於搜索的結果查看集中在前幾條，從上到下進行閱讀。Goolge的搜索結果就是這樣布局的符合用戶的視覺流，當用戶從上到下瀏覽完成以後，自然而然就要翻頁到下一頁，所以底部是翻頁操作。百度的設計也符合這一規律，但是百度將用戶的視覺熱力圖的重點以競價方式做了廣告，這也是百度競價排名遭人詬病的原因。所以，大家用百度搜索都形成了習慣，直接跳過前幾條，從後面開始。

從操作焦點到視覺焦點的引導更多的是通過動效設計來實現。在搜索的過程中，從搜索結果到翻頁就形成了視覺的引導流，當點擊翻頁以後，頁面會顯示在頂部，引導用戶從頭開始閱讀，這就是從操作焦點到視覺焦點的反饋流。在界面設計過程中，要充分考慮視覺焦點到操作觸點的引導流，從操作觸點到視覺焦點的反饋流。

視覺流要符合用戶的視覺習慣，或者引導用戶去瀏覽產品想讓用戶瀏覽的內容。操作流需要考慮在任務的背景下，系列操作的連貫與自然可以引導的手指毫不費力地進行點擊。另一方面要順應用戶的手指點擊習慣，保證足夠的容錯性，不要讓用戶用自然的操作卻達到了非預期的目標。在我們操作一款應用的時候，會因為網路、內存等原因，造成反應不及時，用戶會產生多次點擊的情況，如果多次點擊的位置出現其他功能操作的button，就會出現誤操作，嚴重降低用戶體驗。視覺流又提供了從另一個角度來審視頁面布局的新視野、新方法。在以用戶體驗為中心的設計風潮中，這種方法會越來越受到重視。

最後推薦大家看一下，傅小貞、胡甲超與鄭元攏編寫的《移動設計》，裡面有很多設計細節的闡述，很值得一讀。筆者從中獲得很大的收穫。

交互設計三要素終於寫完了，文章更多的是從宏觀的角度，來闡述交互設計的三要素。文章概述了筆者在設計過程中的一些設計方法與設計要點，並沒有對三要素給出具體的實施方法。後期，分要素單獨介紹筆者掌握的設計方法與技巧。希望和大家一起進步！

敬請關注UIUX設計工作坊，微信公眾號：UIUX-HUANG，每周會有互聯網產品設計的相關文章更新，是作者的實際工作經驗，願與大家共同進步。

aHR0cDovL3dlaXhpbi5xcS5jb20vci9JVHM2SXVURW83bmNyYUJCOTI0eg== (二維碼自動識別)