交互設(shè)計(jì)嚴(yán)格上來(lái)說(shuō)是沒(méi)有什么套路而言，但是，對(duì)于初入行者還是需要有一些需要具體客觀的知識(shí)點(diǎn)去學(xué)習(xí)。就像筆者當(dāng)年剛?cè)胄袑W(xué)習(xí)工業(yè)設(shè)計(jì)的時(shí)候，對(duì)工業(yè)設(shè)計(jì)的內(nèi)涵與外延始終搞不太懂。老師們也沒(méi)有一直強(qiáng)調(diào)工業(yè)設(shè)計(jì)的定義，而是從瑣碎的知識(shí)點(diǎn)開(kāi)始，一點(diǎn)點(diǎn)講解，讓我們掌握。當(dāng)我們掌握了足夠多的知識(shí)點(diǎn)，工業(yè)設(shè)計(jì)也自然在我們的知識(shí)框架中形成。

前一段時(shí)間，有一個(gè)學(xué)弟向我咨詢(xún)一些設(shè)計(jì)的問(wèn)題。期間，他提到想轉(zhuǎn)行做交互，問(wèn)我有沒(méi)有交互設(shè)計(jì)的教程？當(dāng)時(shí)我就有點(diǎn)懵了，交互設(shè)計(jì)的教程，有嗎？好像我還真沒(méi)有！接下來(lái)，我就認(rèn)真地思考了交互設(shè)計(jì)“教程”的這檔子事。

因此，在筆者所學(xué)的交互設(shè)計(jì)的知識(shí)點(diǎn)中，為初學(xué)者講解一下。

交互設(shè)計(jì)（Interaction Design）顧名思義，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的；狹義的交互設(shè)計(jì)則是指人與機(jī)之間的互動(dòng)，機(jī)器需要對(duì)人的感情、動(dòng)作等的投入給予相應(yīng)的反饋，能夠讓人與機(jī)器之間有不間斷的互動(dòng)。

人機(jī)交互設(shè)計(jì)的三要素人、環(huán)境、機(jī)器，人作為交互設(shè)計(jì)的中心，也是當(dāng)前所提倡的以人為中心的設(shè)計(jì)或者以用戶(hù)體驗(yàn)為中心的設(shè)計(jì)的原因。目前交互設(shè)計(jì)的概念不斷擴(kuò)大，機(jī)器的概念也擴(kuò)大到了包括應(yīng)用、服務(wù)以及越來(lái)越熱的VR與AR的和人有互動(dòng)的事物中。相較于交互的三要素而言，另外反饋的時(shí)機(jī)也很重要，有人專(zhuān)門(mén)對(duì)PC端點(diǎn)擊反饋的時(shí)間進(jìn)行了研究，過(guò)快或者過(guò)慢的響應(yīng)都會(huì)降低用戶(hù)的體驗(yàn)。

就當(dāng)前而言，大家說(shuō)提到的交互設(shè)計(jì)更多的是指人與應(yīng)用之間的交互。今天就來(lái)聊一聊我對(duì)交互的理解和應(yīng)用。筆者認(rèn)為交互設(shè)計(jì)主要分為三部分：信息架構(gòu)、使用流程以及交互細(xì)節(jié)。那么，我們就聊一聊交互設(shè)計(jì)的三要素。

第一要素：信息架構(gòu)設(shè)計(jì)

1、著力點(diǎn)：需求

說(shuō)到交互設(shè)計(jì)，就不能不提需求，因?yàn)樗械慕换ピO(shè)計(jì)的工作都是基于需求，這也是交互設(shè)計(jì)的第一個(gè)著力點(diǎn)。因此，只有在深刻地理解需求之后，才有可能做出好的交互設(shè)計(jì)。

舉一個(gè)飽含血淚的例子：曾在做一個(gè)項(xiàng)目的過(guò)程中，有一個(gè)需求是要將一個(gè)應(yīng)用的數(shù)據(jù)展示做一下調(diào)整，使之能夠查其三個(gè)月之內(nèi)的數(shù)據(jù)。當(dāng)時(shí)，自以為已經(jīng)很了解需求，只是將時(shí)間限制放開(kāi)到三個(gè)月，同時(shí)，數(shù)據(jù)的展示限制在一個(gè)月內(nèi)。也就是說(shuō)，可以查看三個(gè)月內(nèi)任意小于三十天的時(shí)間段。有兩個(gè)優(yōu)點(diǎn)，一是滿(mǎn)足了需求；二是頁(yè)面顯示效果比較好。但是，自己是沒(méi)有真正的理解需求，用戶(hù)要查看三個(gè)月的數(shù)據(jù)，更多的是要查看三個(gè)月所有的數(shù)據(jù)，而不是三個(gè)月中的一段數(shù)據(jù)。發(fā)現(xiàn)用戶(hù)的真正需求后，我們又做了相應(yīng)的調(diào)整，數(shù)據(jù)的可查時(shí)間范圍不變，但是顯示范圍可以是一個(gè)可以頁(yè)面顯示并能夠之間交互操作的時(shí)間軸。這樣，產(chǎn)品的交互效果和顯示效果都得到了很大的提高。相似的功能需求，交互解決方案如圖所示：數(shù)據(jù)展示頁(yè)面窗口大小保持不變，而用戶(hù)可以通過(guò)調(diào)節(jié)X軸的滑塊來(lái)查看某一時(shí)間段的數(shù)據(jù)。

圖例

但是，所花費(fèi)的時(shí)間成本和人力成本都在那一點(diǎn)小小的偏差上成了無(wú)用功。因此，需求的理解詳細(xì)到任何程度都不為過(guò)。

2、著力點(diǎn)：競(jìng)品分析

交互設(shè)計(jì)的第二個(gè)著力點(diǎn)是競(jìng)品分析。人們常說(shuō)，如果一個(gè)人要走的快，那就一個(gè)人走；如果要走的遠(yuǎn)，那就一群人走。在中國(guó)當(dāng)前的環(huán)境下，你很容易就能找到三五個(gè)相似的產(chǎn)品，充分的競(jìng)品分析與調(diào)研能夠找到你的產(chǎn)品方向，能夠補(bǔ)充你的需求以及用戶(hù)場(chǎng)景，同時(shí)能夠很好地了解用戶(hù)習(xí)慣，尊重用戶(hù)的習(xí)慣是以用戶(hù)體驗(yàn)為中心的交互設(shè)計(jì)的第一要?jiǎng)?wù)。在尊重用戶(hù)習(xí)慣的前提下，結(jié)合自身的優(yōu)勢(shì)與自己產(chǎn)品與競(jìng)品的定位差異，很容易就得到了你產(chǎn)品大致的信息架構(gòu)。當(dāng)然，這不是最終的信息架構(gòu)。

3、著力點(diǎn)：卡片分析法

要得到自己的信息架構(gòu)，并能夠有自己的特色與創(chuàng)新，還要一個(gè)著力點(diǎn)，那就是卡片分析法。如何對(duì)卡片分析法結(jié)果進(jìn)行處理，這是關(guān)鍵。不過(guò)，在這里要注意“層”和“度”的平衡。所謂的“層”就是你的產(chǎn)品的層級(jí)有多深。以移動(dòng)端的應(yīng)用為例，移動(dòng)端的層級(jí)最好不要超過(guò)五層，因?yàn)橐苿?dòng)端的應(yīng)用沒(méi)有類(lèi)似PC網(wǎng)站的面包屑導(dǎo)航，如果層級(jí)太深，用戶(hù)很容易在其中迷失，不能找到自己想要的功能。所謂的“度”就是產(chǎn)品功能的分類(lèi)。產(chǎn)品功能分類(lèi)的好壞，可以深刻的影響到用戶(hù)的體驗(yàn)以及用戶(hù)能不能順利的找到自己想要的功能。這也是為什么使用卡片分類(lèi)法的原因所在，卡片分類(lèi)法能夠?qū)⒛繕?biāo)用戶(hù)內(nèi)心的心智模型表現(xiàn)出來(lái)，有利用用戶(hù)順利的尋找到目標(biāo)。

4、著力點(diǎn)：對(duì)信息架構(gòu)的應(yīng)用

在信息架構(gòu)設(shè)計(jì)中，最后一個(gè)著力點(diǎn)是對(duì)信息架構(gòu)的應(yīng)用。通過(guò)對(duì)產(chǎn)品的“層”和“度”的整理，對(duì)其進(jìn)行重要度的分級(jí)。如果有若干一級(jí)標(biāo)簽屬于第一優(yōu)先級(jí)，那么，這種類(lèi)型比較適合使用標(biāo)簽式導(dǎo)航。因?yàn)橛脩?hù)在相同優(yōu)先級(jí)標(biāo)簽之間的切換比較頻繁，這樣的導(dǎo)航強(qiáng)調(diào)若干相同優(yōu)先級(jí)的標(biāo)簽之間的切換，使用戶(hù)能夠方便的瀏覽到不同分類(lèi)的信息，這一類(lèi)的應(yīng)用比較多，如QQ、淘寶、天貓、京東等。

標(biāo)簽是導(dǎo)航案例

如果只有一個(gè)比較核心的功能且優(yōu)先級(jí)比較高，其他的信息較為次要，這種情況的信息架構(gòu)比較適合采用抽屜式導(dǎo)航。因?yàn)橛脩?hù)在當(dāng)前主要頁(yè)面中就能完成任務(wù)，就沒(méi)有必要進(jìn)行導(dǎo)航的切換，這一類(lèi)的應(yīng)用主要有滴滴、UBER、小米郵箱等。

抽屜式導(dǎo)航案例

完成了信息架構(gòu)的設(shè)計(jì)，只是完成了產(chǎn)品功能的橫向設(shè)計(jì)，還有產(chǎn)品功能的縱向設(shè)計(jì)。產(chǎn)品的縱向設(shè)計(jì)就要涉及到產(chǎn)品的流程設(shè)計(jì)，流程設(shè)計(jì)是在功能展示完備的情況下，對(duì)功能之間跳轉(zhuǎn)的設(shè)計(jì)，是交互設(shè)計(jì)中的另外一個(gè)重點(diǎn)。

第二要素：交互流程設(shè)計(jì)

1、任務(wù)與場(chǎng)景的梳理

相對(duì)于信息架構(gòu)的橫向信息布局與功能分類(lèi)來(lái)說(shuō)，流程設(shè)計(jì)更多的是縱向的完成任務(wù)的交互點(diǎn)的梳理，以達(dá)到讓用戶(hù)順利的完成相關(guān)任務(wù)的目的。對(duì)于用戶(hù)來(lái)講，交互設(shè)計(jì)流程是指用戶(hù)能夠順利的完成想要完成的任務(wù)；而從業(yè)務(wù)層面來(lái)講，以不干擾用戶(hù)使用流程的方式完成業(yè)務(wù)需求，才是流程設(shè)計(jì)的完整定義。

好的流程設(shè)計(jì)不僅能夠提升產(chǎn)品的用戶(hù)體驗(yàn)，同時(shí)能夠更加順利的完成業(yè)務(wù)目標(biāo)。作為兩大國(guó)民應(yīng)用的支付寶和微信，在產(chǎn)品的交互流程上的經(jīng)驗(yàn)也充分說(shuō)明了這一點(diǎn)。通過(guò)與春節(jié)聯(lián)歡晚會(huì)的合作，微信不僅實(shí)現(xiàn)了全民數(shù)百億次搖一搖的互動(dòng)，同時(shí)實(shí)現(xiàn)了在兩天之內(nèi)完成了兩億張銀行卡綁定的業(yè)務(wù)目標(biāo)，這可是支付寶數(shù)年才完成的目標(biāo)。這就是得益于微信紅包的好的流程設(shè)計(jì)，相反支付寶的效果就沒(méi)有那么明顯了。這也就是要做好交互流程設(shè)計(jì)的原因。

交互流程是依附于產(chǎn)品解決任務(wù)的過(guò)程而存在的，脫離任務(wù)來(lái)講流程是不恰當(dāng)?shù)?。因此，要做好交互流程設(shè)計(jì)，首先要明確的是圍繞什么樣的具體任務(wù)來(lái)展開(kāi)。任何一個(gè)應(yīng)用都有一個(gè)或者若干功能點(diǎn)，來(lái)解決某些問(wèn)題。針對(duì)這些功能點(diǎn)來(lái)解決任務(wù)的過(guò)程就是任務(wù)，同一個(gè)任務(wù)可能有不同的用戶(hù)場(chǎng)景。比如，同一個(gè)打電話任務(wù)就有若干不同場(chǎng)景：從未接電話開(kāi)始、聯(lián)系人開(kāi)始、撥號(hào)開(kāi)始等。所以，根據(jù)不同的任務(wù)，梳理出不同場(chǎng)景。因此，產(chǎn)品的交互流程可能不止一個(gè)，會(huì)擁有若干基于任務(wù)解決方案的流程設(shè)計(jì)。

梳理場(chǎng)景中的交互點(diǎn)

2、交互點(diǎn)的整理

完成任務(wù)與場(chǎng)景的梳理以后，就要進(jìn)第二步，就是要針對(duì)一個(gè)任務(wù)的一個(gè)主要場(chǎng)景梳理出用戶(hù)與產(chǎn)品存在的交互點(diǎn)（InteractionPoint），也就是用戶(hù)在完成任務(wù)過(guò)程中，與產(chǎn)品之間存在的物理與心理的互動(dòng)關(guān)系。我們以通過(guò)微信找到好友并發(fā)送消息為例，來(lái)說(shuō)明該任務(wù)中存在的用戶(hù)與產(chǎn)品之間存在的交互點(diǎn)。在這個(gè)過(guò)程中，通過(guò)對(duì)交互點(diǎn)的整理，可以清楚的看到完成某項(xiàng)任務(wù)的難易程度，以及對(duì)于用戶(hù)可能存在的交互障礙，需要在具體的界面設(shè)計(jì)時(shí)，對(duì)用進(jìn)行引導(dǎo)，來(lái)避免用戶(hù)出現(xiàn)困惑或者錯(cuò)誤。

3、添加業(yè)務(wù)流程

接下來(lái)就要將業(yè)務(wù)流程添加到交互點(diǎn)中，與相應(yīng)的頁(yè)面融合。添加業(yè)務(wù)目標(biāo)的方法一般有兩種，第一種是將其放置在核心任務(wù)流程結(jié)束的地方，比如，餓了么、美團(tuán)外賣(mài)等，用戶(hù)在完成一次訂餐后，會(huì)提示用戶(hù)將連接分享給朋友可以獲得相應(yīng)的優(yōu)惠券。其業(yè)務(wù)目標(biāo)就是讓用戶(hù)幫助應(yīng)用推廣應(yīng)用，這樣的好處是不影響用戶(hù)完成其任務(wù)，在完成其任務(wù)以后，即使用戶(hù)不分享也不會(huì)影響其體驗(yàn)。

業(yè)務(wù)目標(biāo)案例（來(lái)源網(wǎng)絡(luò)）

另外一種是將業(yè)務(wù)目標(biāo)弱化顯示在流程頁(yè)面中，比如我們?cè)谧?cè)的時(shí)候，都會(huì)在底部顯示用戶(hù)協(xié)議的選項(xiàng)，而其是默認(rèn)勾選的。因?yàn)檫@些信息使用戶(hù)不愿意看的，所以弱化處理。

業(yè)務(wù)目標(biāo)案例（來(lái)源網(wǎng)絡(luò)）

在完成以上任務(wù)后，就可以進(jìn)行相應(yīng)的流程設(shè)計(jì)，針對(duì)不同的任務(wù)與場(chǎng)景制作不同的流程，其中必然會(huì)有一部分的交互點(diǎn)重疊，這樣就可以將同一任務(wù)、不同場(chǎng)景下的交互流程整合到一起，完成核心功能的交互流程設(shè)計(jì)。相信大家對(duì)具體的流程設(shè)計(jì)的制作步驟都已經(jīng)很熟悉了，在這里就不贅述了。很多同學(xué)，覺(jué)得到這里，似乎流程以及大功告成。但是，遠(yuǎn)遠(yuǎn)不夠；至少還有兩件事情要完成。

設(shè)計(jì)流程

第一件事：相應(yīng)信息架構(gòu)的調(diào)整

我們一直在強(qiáng)調(diào)，信息架構(gòu)是橫向的信息布局與功能分類(lèi)，在設(shè)計(jì)交互流程的過(guò)程中，我們會(huì)發(fā)現(xiàn)有些信息架構(gòu)的設(shè)計(jì)、功能分類(lèi)可能并不是那么合理，或者，信息架構(gòu)本身沒(méi)有問(wèn)題，但是在用戶(hù)的使用流程中，和用戶(hù)的習(xí)慣有沖突，這樣就需要調(diào)整信息架構(gòu)，使信息架構(gòu)更合理。

第二件事：完成所有的流程設(shè)計(jì)

完成所有的流程設(shè)計(jì)，包括登錄注冊(cè)流程、異常狀況流程等等，其中異常狀況流程包括各種各樣的問(wèn)題，其中有一個(gè)偷懶的方法，就是把網(wǎng)絡(luò)異常編號(hào)整理出來(lái)，合并其中的類(lèi)似項(xiàng)目，這樣就可以整理出若干類(lèi)相應(yīng)的異常反饋，并設(shè)計(jì)出反饋語(yǔ)言，結(jié)合Toast和Alert提示，就可以滿(mǎn)足大部分的異常操作。
因此，流程設(shè)計(jì)的過(guò)程可以總結(jié)為：

流程驗(yàn)證

結(jié)合頁(yè)面的用戶(hù)場(chǎng)景故事，目的在于模擬一個(gè)典型的用戶(hù)場(chǎng)景，來(lái)檢查信息架構(gòu)和交互流程的設(shè)計(jì)是否符合用戶(hù)的心智模型。這樣才能在后期的細(xì)節(jié)設(shè)計(jì)中減少由于架構(gòu)與流程調(diào)整而增加的額外的工作量。

交互流程設(shè)計(jì)的意義更多在于，從功能角度模擬用戶(hù)的使用過(guò)程減少用在功能操作中的障礙，提高用戶(hù)體驗(yàn)。但是，無(wú)論信息架構(gòu)設(shè)計(jì)還是流程設(shè)計(jì)都只是邏輯上的模型，只有將這些邏輯表現(xiàn)在具體的界面上，這些邏輯才會(huì)有意義，才會(huì)為用戶(hù)了解、接受。這就牽扯到頁(yè)面的布局、Icon的大小、交互動(dòng)效和控件等等，也就是交互設(shè)計(jì)的第三個(gè)要素——交互細(xì)節(jié)設(shè)計(jì)。

第三要素：交互細(xì)節(jié)設(shè)計(jì)

交互細(xì)節(jié)設(shè)計(jì)是在前兩個(gè)要素指導(dǎo)下的設(shè)計(jì)實(shí)踐，也是交互設(shè)計(jì)可視化與形象化的關(guān)鍵。相對(duì)于前兩個(gè)要素的完整性和系統(tǒng)性，作為第三個(gè)要素的交互細(xì)節(jié)設(shè)計(jì)就顯得瑣碎和零散。根據(jù)交互設(shè)計(jì)由淺入深的漸進(jìn)，交互細(xì)節(jié)可以分為布局、控件、適配、音效與動(dòng)效、流（目光與手指的循跡）等等。接下來(lái)，我們就從布局開(kāi)始聊一聊交互細(xì)節(jié)設(shè)計(jì)。

1、布局

頁(yè)面布局的首要目的就是為了頁(yè)面功能的秩序感，使其在頁(yè)面功能的分類(lèi)以及輕重緩急的表現(xiàn)上更加合理，符合用戶(hù)的心智模型，在用戶(hù)使用的過(guò)程中，做到“Don’t make me think !”

在交互細(xì)節(jié)設(shè)計(jì)中，頁(yè)面布局與前兩個(gè)要素之間的聯(lián)系最為緊密。布局的依據(jù)就是通過(guò)卡片分類(lèi)法獲取的并通過(guò)流程設(shè)計(jì)優(yōu)化過(guò)的交互設(shè)計(jì)信息架構(gòu)。根據(jù)得到的信息架構(gòu)，我們就可以知道頁(yè)面導(dǎo)航應(yīng)該采用什么樣的導(dǎo)航方式，抽屜式導(dǎo)航還是標(biāo)簽式導(dǎo)航，以及每個(gè)頁(yè)面應(yīng)該有哪些相關(guān)元素需要體現(xiàn)和體現(xiàn)的程度。筆者在頁(yè)面布局中主要堅(jiān)持格式塔心理學(xué)的設(shè)計(jì)原則。

格式塔心理學(xué)派斷言：人們?cè)谟^看時(shí)眼腦共同作用，并不是在一開(kāi)始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分，而是將各個(gè)部分組合起來(lái)，使之成為一個(gè)更易于理解的統(tǒng)一體。當(dāng)一個(gè)格式塔單元中包含了太多互不相關(guān)的單位，眼腦就會(huì)試圖將其簡(jiǎn)化，把各個(gè)單位加以組合，使之成為知覺(jué)上易于理解的整體。格式塔理論明確地提出：眼腦作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過(guò)程，正是通過(guò)這一過(guò)程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體。由此產(chǎn)生出了格式塔的一些基本原則(適用于布局和界面設(shè)計(jì))：主要包括接近原則、連續(xù)原則、相似原則和閉合原則。

格式塔心理學(xué)界面設(shè)計(jì)四原則

在交互設(shè)計(jì)的頁(yè)面布局中，要對(duì)不同的功能進(jìn)行分類(lèi)，并將其在視覺(jué)體驗(yàn)上分開(kāi)，這就會(huì)用到格式塔心理學(xué)中的接近原則。同理在頁(yè)面布局中，主要功能的凸顯、次要功能的弱化?？偟囊缶褪侵攸c(diǎn)突出，詳略得當(dāng)。

2、控件

說(shuō)到控件，更多的是指移動(dòng)端應(yīng)用、Android和ios應(yīng)用。控件的作用有兩個(gè)，一是采用同一類(lèi)型的控件可以使得應(yīng)用的風(fēng)格鮮明、有個(gè)性，賦予應(yīng)用一種獨(dú)特的氣質(zhì)；二是以不同平臺(tái)為基礎(chǔ)的控件，在開(kāi)發(fā)的時(shí)候減少工作量，做到拿來(lái)就用?？丶ò粹o、開(kāi)關(guān)、輸入框和進(jìn)度指示器。控件還可以根據(jù)自己的需要來(lái)自己定義。有些應(yīng)用在開(kāi)發(fā)的過(guò)程中，制作設(shè)計(jì)規(guī)范的同時(shí)，會(huì)制作相應(yīng)的控件，便于在后期的開(kāi)發(fā)過(guò)程中減少工作量。

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

不同終端之間的界面適配包括不同分辨率手機(jī)之間的適配、移動(dòng)端和PC端的適配。適配有一個(gè)更專(zhuān)業(yè)的名稱(chēng)叫響應(yīng)式設(shè)計(jì)（Responsive Design）。響應(yīng)式的設(shè)計(jì)分為三個(gè)等級(jí)，第一等級(jí)是最弱的適配，就是沒(méi)有適配，手機(jī)端會(huì)等比例縮小，需要放大才能查看，但是不會(huì)出現(xiàn)圖片破損的狀況；第二個(gè)等級(jí)是輕度適配，可以實(shí)現(xiàn)移動(dòng)端的正常預(yù)覽，文字大小不變，圖片等比例縮?。坏谌燃?jí)是圖片、文字、元素位置以及顯示方式等等，都會(huì)隨著顯示屏幕的大小而適應(yīng)屏幕顯示，達(dá)到顯示效果的最優(yōu)化，提高用戶(hù)體驗(yàn)。

響應(yīng)式設(shè)計(jì)（來(lái)源網(wǎng)絡(luò)）

響應(yīng)式設(shè)計(jì)，第一要考慮兼容設(shè)備的范圍以及相應(yīng)的分辨率。這樣就可以確定出幾套交互稿和效果圖；第二是根據(jù)不同的尺寸以及設(shè)計(jì)規(guī)范來(lái)設(shè)計(jì)交互原型；第三是對(duì)相應(yīng)的元素和模塊進(jìn)行調(diào)整。在響應(yīng)式設(shè)計(jì)中，有兩點(diǎn)需要特別注意：一是菜單，PC端的頁(yè)面足夠大，能夠?qū)⒉藛稳空归_(kāi)來(lái)顯示，但是移動(dòng)端就要把菜單收起來(lái)或者以抽屜的形式放在左側(cè)；二是圖表，圖表是做所有的頁(yè)面中最難處理的。目前筆者還沒(méi)有找到通用的有效方法，多采用PC與移動(dòng)端不同的設(shè)計(jì)，PC上采用列表，移動(dòng)端采用內(nèi)容單元的形式，即將列表中的一個(gè)項(xiàng)目單獨(dú)成為一個(gè)內(nèi)容單元，以瀑布流的形式向下滾動(dòng)。但是這種方法就喪失了列表的一項(xiàng)重要功能，就是項(xiàng)目之間的對(duì)比。

4、音效和動(dòng)效

智能手機(jī)滿(mǎn)足了人們視覺(jué)和觸覺(jué)，音效則實(shí)現(xiàn)了聽(tīng)覺(jué)的交互。目前，音效設(shè)計(jì)的主要作用還是現(xiàn)在動(dòng)效設(shè)計(jì)師已經(jīng)單獨(dú)的獨(dú)立出來(lái)作為產(chǎn)品開(kāi)發(fā)中的一環(huán)。在扁平化風(fēng)行天下的情況下，優(yōu)雅的動(dòng)效設(shè)計(jì)是更多應(yīng)用的追求。目前，有很多動(dòng)效制作軟件各有優(yōu)劣點(diǎn)，比如：

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

筆者比較傾向于AE，因?yàn)锳E設(shè)計(jì)出來(lái)的效果細(xì)膩，細(xì)節(jié)豐富，你想要什么效果 AE都能實(shí)現(xiàn)，但是程序上能不能實(shí)現(xiàn)就難說(shuō)啦。AE缺點(diǎn)就是不可交互，以及精準(zhǔn)度很難控制。正式因?yàn)樾Ч?xì)膩豐富，精準(zhǔn)度的控制才是考驗(yàn)動(dòng)效設(shè)計(jì)師水平的試金石。

Material Design示例（來(lái)源網(wǎng)絡(luò)）

另外，網(wǎng)上關(guān)于動(dòng)效的設(shè)計(jì)案例很多，多看、多練才能提高。在《移動(dòng)設(shè)計(jì)》作者總結(jié)了動(dòng)效設(shè)計(jì)的相關(guān)原則：

• 運(yùn)動(dòng)形變，萬(wàn)變不離其宗（運(yùn)動(dòng)和形變之間的結(jié)合衍生）
• 節(jié)奏速度，掌控曲線時(shí)長(zhǎng)
• 情感故事，擬物、隱喻、品牌
• 結(jié)合操作，關(guān)聯(lián)輕量自然
• 點(diǎn)到即止，切記過(guò)猶不及
• 尊重習(xí)慣，謹(jǐn)慎進(jìn)行創(chuàng)新
• 快速原型，多方溝通權(quán)衡

5、視覺(jué)流

流，即目光和手指的循跡，是信息在設(shè)備與人之間的流轉(zhuǎn)，實(shí)現(xiàn)人與設(shè)備之間的觸發(fā)、影響和反饋交互。整個(gè)信息與反饋之間的流轉(zhuǎn)包括視線流和操作流。視線流的的形成是根據(jù)頁(yè)面布局以及頁(yè)面中的元素特點(diǎn)來(lái)流動(dòng)的，對(duì)比越強(qiáng)烈越容易引起人的注意。

頁(yè)面布局視覺(jué)熱力圖（來(lái)源網(wǎng)絡(luò)）

說(shuō)到這里我們不得不把百度和Google拉出來(lái)說(shuō)一說(shuō)。通過(guò)研究發(fā)現(xiàn)，用戶(hù)對(duì)于搜索的結(jié)果查看集中在前幾條，從上到下進(jìn)行閱讀。Goolge的搜索結(jié)果就是這樣布局的符合用戶(hù)的視覺(jué)流，當(dāng)用戶(hù)從上到下瀏覽完成以后，自然而然就要翻頁(yè)到下一頁(yè)，所以底部是翻頁(yè)操作。百度的設(shè)計(jì)也符合這一規(guī)律，但是百度將用戶(hù)的視覺(jué)熱力圖的重點(diǎn)以競(jìng)價(jià)方式做了廣告，這也是百度競(jìng)價(jià)排名遭人詬病的原因。所以，大家用百度搜索都形成了習(xí)慣，直接跳過(guò)前幾條，從后面開(kāi)始。

搜索結(jié)果視覺(jué)熱力圖（來(lái)源網(wǎng)絡(luò)）

從操作焦點(diǎn)到視覺(jué)焦點(diǎn)的引導(dǎo)更多的是通過(guò)動(dòng)效設(shè)計(jì)來(lái)實(shí)現(xiàn)。在搜索的過(guò)程中，從搜索結(jié)果到翻頁(yè)就形成了視覺(jué)的引導(dǎo)流，當(dāng)點(diǎn)擊翻頁(yè)以后，頁(yè)面會(huì)顯示在頂部，引導(dǎo)用戶(hù)從頭開(kāi)始閱讀，這就是從操作焦點(diǎn)到視覺(jué)焦點(diǎn)的反饋流。在界面設(shè)計(jì)過(guò)程中，要充分考慮視覺(jué)焦點(diǎn)到操作觸點(diǎn)的引導(dǎo)流，從操作觸點(diǎn)到視覺(jué)焦點(diǎn)的反饋流。

視覺(jué)流要符合用戶(hù)的視覺(jué)習(xí)慣，或者引導(dǎo)用戶(hù)去瀏覽產(chǎn)品想讓用戶(hù)瀏覽的內(nèi)容。操作流需要考慮在任務(wù)的背景下，系列操作的連貫與自然可以引導(dǎo)的手指毫不費(fèi)力地進(jìn)行點(diǎn)擊。另一方面要順應(yīng)用戶(hù)的手指點(diǎn)擊習(xí)慣，保證足夠的容錯(cuò)性，不要讓用戶(hù)用自然的操作卻達(dá)到了非預(yù)期的目標(biāo)。在我們操作一款應(yīng)用的時(shí)候，會(huì)因?yàn)榫W(wǎng)絡(luò)、內(nèi)存等原因，造成反應(yīng)不及時(shí)，用戶(hù)會(huì)產(chǎn)生多次點(diǎn)擊的情況，如果多次點(diǎn)擊的位置出現(xiàn)其他功能操作的button，就會(huì)出現(xiàn)誤操作，嚴(yán)重降低用戶(hù)體驗(yàn)。視覺(jué)流又提供了從另一個(gè)角度來(lái)審視頁(yè)面布局的新視野、新方法。在以用戶(hù)體驗(yàn)為中心的設(shè)計(jì)風(fēng)潮中，這種方法會(huì)越來(lái)越受到重視。

移動(dòng)端手勢(shì)舉例（來(lái)源網(wǎng)絡(luò)）

另外，交互設(shè)計(jì)的細(xì)節(jié)還包括手勢(shì)設(shè)計(jì)等等。交互細(xì)節(jié)的設(shè)計(jì)很多、很繁瑣，無(wú)論你做的多細(xì)致都不為過(guò)。這都需要用時(shí)間、以及用心去積累！

作者：莫忘&初心，微信huang942852369， 希望與同行者多多交流。

本文由 @莫忘&初心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。