聊聊交互設(shè)計(jì)三要素之信息架構(gòu)和流程設(shè)計(jì)

交互設(shè)計(jì)主要分為三部分：信息架構(gòu)、使用流程以及交互細(xì)節(jié)。今天我們來談?wù)撘幌滦畔⒓軜?gòu)的產(chǎn)生和交互的流程設(shè)計(jì)，交互基礎(chǔ)不扎實(shí)的同學(xué)，可以來補(bǔ)補(bǔ)課。 信息架構(gòu) 說到交互設(shè)計(jì)，就不能不提需求，因?yàn)樗械慕换ピO(shè)計(jì)的工作都是基于需求，這也是交互設(shè)計(jì)的第一個(gè)著力點(diǎn)。因此，只有深刻理解需求以后，才有可能做出好的交互設(shè)計(jì)。 舉一個(gè)飽含血淚的例子：在做一個(gè)項(xiàng)目的過程中，有一個(gè)需求是要將一個(gè)應(yīng)用的數(shù)據(jù)展示做一下調(diào)整，使之能夠查看在三個(gè)月之內(nèi)的該數(shù)據(jù)。當(dāng)時(shí)，自以為已經(jīng)很了解需求，只是將時(shí)間限制放開到三個(gè)月，同時(shí)，數(shù)據(jù)的展示限制在一個(gè)月內(nèi)。也就是說，可以查看三個(gè)月內(nèi)任意小于三十天的時(shí)間段。
優(yōu)點(diǎn)是：1）滿足了需求；2）頁面顯示效果比較好。但是，自己是沒有真正的理解需求，用戶要查看三個(gè)月的數(shù)據(jù)，更多的是要查看三個(gè)月所有的數(shù)據(jù)，而不是三個(gè)月中的一段數(shù)據(jù)。發(fā)現(xiàn)用戶的真正需求后，我們又做了相應(yīng)的調(diào)整，數(shù)據(jù)的可查時(shí)間范圍不變，但是顯示范圍可以是一個(gè)可以頁面顯示并能夠之間交互操作的時(shí)間軸。這樣，產(chǎn)品的交互效果和顯示效果都得到了很大的提高。相似的功能需求，交互解決方案如圖所示：數(shù)據(jù)展示頁面窗口大小保持不變，而用戶可以通過調(diào)節(jié)X軸的滑塊來查看某一時(shí)間段的數(shù)據(jù)。
但是所花費(fèi)的時(shí)間成本、人力成本都在那一點(diǎn)小小的偏差上成了無用功。因此，需求的理解詳細(xì)到任何程度都不為過。 交互設(shè)計(jì)的第二個(gè)著力點(diǎn)是競(jìng)品分析。人們常說，如果一個(gè)人要走的快，那就一個(gè)人走；如果要走的遠(yuǎn)，那就一群人走。在中國當(dāng)前的環(huán)境下，你很容易就能找到三五個(gè)相似的產(chǎn)品，充分的競(jìng)品分析與調(diào)研能夠找到你的產(chǎn)品方向，能夠補(bǔ)充你的需求以及用戶場(chǎng)景，同時(shí)能夠很好地了解用戶習(xí)慣，尊重用戶的習(xí)慣是以用戶體驗(yàn)為中心的交互設(shè)計(jì)的第一要?jiǎng)?wù)。在尊重用戶習(xí)慣的前提下，結(jié)合自身的優(yōu)勢(shì)與自己產(chǎn)品與競(jìng)品的定位差異，很容易就得到了你產(chǎn)品大致的信息架構(gòu)。當(dāng)然，這不是最終的信息架構(gòu)。 要得到自己的信息架構(gòu)，并能夠有自己的特色與創(chuàng)新，還要一個(gè)著力點(diǎn)，那就是卡片分析法。關(guān)于卡片分析法的文章，網(wǎng)上有很多，在這里就不一一嘮叨了。如何對(duì)卡片分析法結(jié)果進(jìn)行處理，才是關(guān)鍵。不過，在這里要注意“層”和“度”的平衡。所謂的“層”就是你的產(chǎn)品的層級(jí)有多深。以移動(dòng)端的應(yīng)用為例，移動(dòng)端的層級(jí)最好不要超過五層，因?yàn)橐苿?dòng)端的應(yīng)用沒有類似PC網(wǎng)站的面包屑導(dǎo)航，如果層級(jí)太深，用戶很容易在其中迷失，不能找到自己想要的功能。所謂的“度”就是產(chǎn)品功能的分類。產(chǎn)品功能分類的好壞，可以深刻的影響到用戶的體驗(yàn)以及用戶能不能順利的找到自己想要的功能。這也是為什么使用卡片分類法的原因所在，卡片分類法能夠?qū)⒛繕?biāo)用戶內(nèi)心的心智模型表現(xiàn)出來，有利用用戶順利的尋找到目標(biāo)。 在信息架構(gòu)設(shè)計(jì)中，最后一個(gè)著力點(diǎn)是對(duì)信息架構(gòu)的應(yīng)用。通過對(duì)產(chǎn)品的“層”和“度”的整理，對(duì)其進(jìn)行重要度分級(jí)。如果有若干一級(jí)標(biāo)簽屬于第一優(yōu)先級(jí)，那么，這種類型比較適合使用標(biāo)簽式導(dǎo)航。因?yàn)?，用戶在相同?yōu)先級(jí)標(biāo)簽之間的切換比較頻繁，這樣的導(dǎo)航強(qiáng)調(diào)若干相同優(yōu)先級(jí)的標(biāo)簽之間的切換，使用戶能夠方便的瀏覽到不同分類的信息，這一類的應(yīng)用比較多，如QQ、淘寶、天貓、京東等。 如果只有一個(gè)比較核心的功能且優(yōu)先級(jí)比較高，其他的信息較為次要，這種情況的信息架構(gòu)比較適合采用抽屜式導(dǎo)航。因?yàn)?，用戶在?dāng)前主要頁面中就能完成任務(wù)，就沒有必要進(jìn)行導(dǎo)航的切換，這一類的應(yīng)用主要有滴滴、UBER、小米郵箱等。
完成了信息架構(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)。 關(guān)于信息架構(gòu)，還有這兩篇好文可以借鑒：

1. 《從優(yōu)秀到卓越！交互設(shè)計(jì)師怎樣理解信息架構(gòu)？》
2. 《交互設(shè)計(jì)師來收！如何設(shè)計(jì)復(fù)雜信息架構(gòu)產(chǎn)品？》

流程設(shè)計(jì) 相對(duì)于信息架構(gòu)的橫向信息布局與功能分類來說，流程設(shè)計(jì)更多的是縱向的完成任務(wù)的交互點(diǎn)的梳理，以達(dá)到讓用戶順利的完成相關(guān)任務(wù)的目的。對(duì)于用戶來講，交互設(shè)計(jì)流程是指用戶能夠順利的完成想要完成的任務(wù)。而從業(yè)務(wù)層面來講，以不干擾用戶使用流程的方式完成業(yè)務(wù)需求，才是流程設(shè)計(jì)的完整定義。 好的流程設(shè)計(jì)不僅能夠提升產(chǎn)品的用戶體驗(yàn)，同時(shí)，能夠更加順利的完成業(yè)務(wù)目標(biāo)。作為兩大國民應(yīng)用的支付寶和微信，在產(chǎn)品的交互流程上的經(jīng)驗(yàn)也充分說明了這一點(diǎn)。通過與春節(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ì)，相反支付寶的效果就沒有那么明顯了。這也就是為什么要做好交互流程設(shè)計(jì)的原因。 交互流程是依附于產(chǎn)品解決任務(wù)的過程而存在的，脫離任務(wù)來講流程是不恰當(dāng)?shù)?。因此，要做好交互流程設(shè)計(jì)，首先要明確的是圍繞什么樣的具體任務(wù)來展開。任何一個(gè)應(yīng)用都有一個(gè)或者若干功能點(diǎn)，來解決某些問題。針對(duì)這些功能點(diǎn)來解決任務(wù)的過程就是任務(wù)，同一個(gè)任務(wù)可能有不同的用戶場(chǎng)景。比如，同一個(gè)打電話任務(wù)就有若干不同場(chǎng)景：從未接電話開始、聯(lián)系人開始、撥號(hào)開始等。所以，根據(jù)不同的任務(wù)，梳理出不同場(chǎng)景，因此，產(chǎn)品的交互流程可能不止一個(gè)，會(huì)擁有若干基于任務(wù)解決方案的流程設(shè)計(jì)。 完成任務(wù)與場(chǎng)景的梳理以后，就要進(jìn)第二步，就是要針對(duì)一個(gè)任務(wù)的一個(gè)主要場(chǎng)景梳理出用戶與產(chǎn)品存在的交互點(diǎn)（InteractionPoint），也就是用戶在完成任務(wù)過程中，與產(chǎn)品之間存在的物理與心理的互動(dòng)關(guān)系。我們以通過微信找到好友并發(fā)送消息為例，來說明該任務(wù)中存在的用戶與產(chǎn)品之間存在的交互點(diǎn)。在這個(gè)過程中，通過對(duì)交互點(diǎn)的整理，可以清楚的看到完成某項(xiàng)任務(wù)的難易程度，以及對(duì)于用戶可能存在的交互障礙，需要在具體的界面設(shè)計(jì)時(shí)，對(duì)用進(jìn)行引導(dǎo)，來避免用戶出現(xiàn)困惑或者錯(cuò)誤。 接下來就要將業(yè)務(wù)流程添加到交互點(diǎn)中，與相應(yīng)的頁面融合。添加業(yè)務(wù)目標(biāo)的方法一般有兩種，第一種是將其放置在核心任務(wù)流程結(jié)束的地方，比如，餓了么、美團(tuán)外賣等，用戶在完成一次訂餐后，會(huì)提示用戶將連接分享給朋友可以獲得相應(yīng)的優(yōu)惠券。其業(yè)務(wù)目標(biāo)就是讓用戶幫助應(yīng)用推廣應(yīng)用，這樣的好處是不影響用戶完成其任務(wù)，在完成其任務(wù)以后，即使用戶不分享也不會(huì)影響其體驗(yàn)。 另外一種是將業(yè)務(wù)目標(biāo)弱化顯示在流程頁面中，比如我們?cè)谧?cè)的時(shí)候，都會(huì)在底部顯示用戶協(xié)議的選項(xiàng)，而其是默認(rèn)勾選的。因?yàn)檫@些信息使用戶不愿意看的，所以弱化處理。
在完成以上任務(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é)，覺得到這里，似乎流程以及大功告成。但是，遠(yuǎn)遠(yuǎn)不夠；至少，還有兩件事情要完成。 第一件事，相應(yīng)信息架構(gòu)的調(diào)整。我們一直在強(qiáng)調(diào)，信息架構(gòu)是橫向的信息布局與功能分類，在設(shè)計(jì)交互流程的過程中，我們會(huì)發(fā)現(xiàn)有些信息架構(gòu)的設(shè)計(jì)、功能分類可能并不是那么合理，或者，信息架構(gòu)本身沒有問題，但是在用戶的使用流程中，和用戶的習(xí)慣有沖突，這樣就需要調(diào)整信息架構(gòu)，使信息架構(gòu)更合理。第二件事，就是完成所有的流程設(shè)計(jì)，包括登錄注冊(cè)流程、異常狀況流程等等，其中異常狀況流程包括各種各樣的問題，其中有一個(gè)偷懶的方法，就是把網(wǎng)絡(luò)異常編號(hào)整理出來，合并其中的類似項(xiàng)目，這樣就可以整理出若干類相應(yīng)的異常反饋，并設(shè)計(jì)出反饋語言，結(jié)合Toast和alert提示，就可以滿足大部分的異常操作。 因此，流程設(shè)計(jì)的過程可以總結(jié)為： 結(jié)合頁面的用戶場(chǎng)景故事，目的在于模擬一個(gè)典型的用戶場(chǎng)景，來檢查信息架構(gòu)和交互流程的設(shè)計(jì)，是否符合用戶的心智模型。這樣，才能在后期的細(xì)節(jié)設(shè)計(jì)中減少由于架構(gòu)與流程調(diào)整而增加的額外的工作量。 交互流程設(shè)計(jì)的意義更多在于，從功能角度模擬用戶的使用過程，減少用在功能操作中的障礙，提高用戶體驗(yàn)。但是，無論信息架構(gòu)設(shè)計(jì)，還是流程設(shè)計(jì)都只是邏輯上的模型，只有將這些邏輯表現(xiàn)在具體的界面上，這些邏輯才會(huì)有意義，才會(huì)為用戶了解、接受。這就牽扯到頁面的布局、Icon的大小、交互動(dòng)效、控件等等。