提綱：
1、為什么用戶感覺復(fù)雜
2、如何簡(jiǎn)化概念，降低認(rèn)知成本
3、如何讓流程簡(jiǎn)短高效
4、如何簡(jiǎn)化頁(yè)面信息布局
5、如何讓操作更輕松
6、結(jié)語(yǔ)
一、為什么用戶感到復(fù)雜
你是否曾收到過類似的反饋：
“這文案是什么意思？”、“這能干什么？我需要干什么”、“那個(gè)功能在哪里？我找不到”、“要設(shè)置這么多項(xiàng)，好麻煩啊”、“這不能拖動(dòng)嗎？”…
這些都是用戶感到復(fù)雜的反饋。從用戶的感知層面分析，讓用戶感到復(fù)雜的原因可以劃分為四大方面：概念、流程、界面、操作，以下將詳細(xì)闡述原因。
1、概念復(fù)雜
導(dǎo)致用戶感覺產(chǎn)品復(fù)雜的其中一個(gè)主要原因是：用戶難以理解產(chǎn)品的概念模型。概念模型指事物的基礎(chǔ)定義及行為模式。（例如：汽車，一種在陸地上行駛的交通工具。通常需要司機(jī)駕駛，需要消耗汽油… ）用戶根據(jù)概念模型對(duì)事物的行為進(jìn)行預(yù)測(cè)，構(gòu)建出自身的心理模型。
因此，當(dāng)產(chǎn)品沒有清晰、準(zhǔn)確地傳達(dá)出概念模型，將導(dǎo)致用戶產(chǎn)生錯(cuò)誤的心理模型。用戶需要在大量探索過程中，逐步糾正自己的想法，最終才能了解產(chǎn)品實(shí)際的概念模型。
另外，根據(jù)「雅各布定律」和「設(shè)計(jì)心理學(xué)2：與復(fù)雜共存」，用戶基于以往積累經(jīng)驗(yàn)去理解新事物，即在使用產(chǎn)品前已構(gòu)建心理模型。而當(dāng)產(chǎn)品的概念模型與用戶的心理模型不匹配時(shí)，用戶在使用產(chǎn)品的過程中將持續(xù)產(chǎn)生認(rèn)知沖突，也將給用戶帶來巨大的認(rèn)知成本。尤其對(duì)于傳統(tǒng)工具型產(chǎn)品，顛覆型的概念模型，反而提高用戶的認(rèn)知成本，讓用戶感到復(fù)雜難懂。
2、流程復(fù)雜
工具型產(chǎn)品的流程主要分為兩方面：?jiǎn)喂δ苁褂昧鞒獭⒍喙δ芙M合使用流程。
在單功能使用流程方面，難免會(huì)遇到一些功能在生效前，需要經(jīng)過多個(gè)設(shè)置步驟的情況。雖然環(huán)環(huán)相扣的流程能夠降低產(chǎn)品的出錯(cuò)概率，但卻會(huì)給用戶帶來更多的成本。對(duì)于每個(gè)步驟，用戶都需要經(jīng)歷「理解」-「操作」-「反饋」的環(huán)節(jié)。在一些情況下用戶甚至不堪忍受，直接放棄使用功能。例如，在Airtable中創(chuàng)建甘特視圖，需要經(jīng)歷3步才能完成配置，查看到效果。對(duì)于一些抱著嘗試心態(tài)的新手用戶來說，這是難以接受的體驗(yàn)：在還沒理解功能的作用效果前，就要經(jīng)歷如此復(fù)雜的流程。
而多功能組合使用流程方面，工具型產(chǎn)品在產(chǎn)品功能設(shè)計(jì)層面，往往將功能的顆粒度設(shè)計(jì)得相當(dāng)精細(xì)，以靈活滿足各種場(chǎng)景需要。就Excel中的單元格而言，可設(shè)置單元格字體、單元格背景、單元格邊框。但如此精細(xì)的功能設(shè)計(jì)將導(dǎo)致，若用戶需要簡(jiǎn)單實(shí)現(xiàn)整體的目標(biāo)效果時(shí)，其操作流程就變得十分的冗長(zhǎng)。甚至在一些需要重復(fù)設(shè)置的場(chǎng)景下，工作量將幾何級(jí)數(shù)地增長(zhǎng)，讓用戶的工作流程將變得極其復(fù)雜。
3、界面復(fù)雜
大多數(shù)工具型產(chǎn)品都希望能在一個(gè)界面讓用戶完成所有任務(wù)，卻忽略了用戶在現(xiàn)實(shí)場(chǎng)景下的使用流程。通常一個(gè)任務(wù)完成的前提是，需要按照一定的步驟完成若干個(gè)細(xì)項(xiàng)任務(wù)。若無(wú)法聚焦于每一個(gè)個(gè)細(xì)項(xiàng)任務(wù)，而需要耗費(fèi)大量的時(shí)間精力來排除其他信息的干擾，則會(huì)產(chǎn)生“注意力被分散”、“太復(fù)雜”等體驗(yàn)感受，導(dǎo)致最終任務(wù)完成難度增加。
對(duì)用戶來說，界面內(nèi)的信息越多負(fù)擔(dān)就越大。工具型產(chǎn)品通常伴隨數(shù)量眾多的功能和選項(xiàng)，一味的平鋪功能，只為了展示自身的功能多樣性，缺乏合理的組織布局，導(dǎo)致用戶需要在幾十甚至上百個(gè)選項(xiàng)中進(jìn)行選擇，則會(huì)大大降低用戶使用效率。
4、操作復(fù)雜
設(shè)計(jì)者在不考慮具體操作場(chǎng)景的前提下，不同功能均使用同一種交互方式，名義上為了讓用戶降低學(xué)習(xí)成本，但實(shí)際上卻是不負(fù)責(zé)任地將復(fù)雜的理解過程轉(zhuǎn)移給了用戶。對(duì)于用戶而言，復(fù)雜的操作可以分為兩種：一種是「步驟復(fù)雜」，例如需要多次點(diǎn)擊、頁(yè)面跳轉(zhuǎn)、設(shè)備切換等；另外一種則是「認(rèn)知復(fù)雜」，例如交互方式與心理預(yù)期不匹配，需用戶自行轉(zhuǎn)換。無(wú)論是哪種，對(duì)于工具型產(chǎn)品而言都是災(zāi)難的。
除此之外，缺乏及時(shí)的反饋也會(huì)給用戶帶來不必要的麻煩。用戶需要反復(fù)操作比操作中的冗余更可怕，就像高速公路的減速帶，不斷降低用戶的效率。
二、如何簡(jiǎn)化概念，降低認(rèn)知成本
1、隱喻、類比已有事物
當(dāng)產(chǎn)品的概念模型越趨近于用戶的心理模型時(shí)，用戶就越感覺產(chǎn)品容易理解和使用，所要求的使用能力和學(xué)習(xí)成本就越低。而用戶心理模型是根據(jù)用戶的目標(biāo)，以及其過往的經(jīng)驗(yàn)構(gòu)成的。因此在設(shè)計(jì)產(chǎn)品的概念模型時(shí)，應(yīng)盡量使用隱喻、類比的方式，讓產(chǎn)品的文案概念及交互行為模式）與用戶所熟知事物相近。從而讓用戶建立聯(lián)想，激活行為記憶，降低認(rèn)知探索成本。
HyperCard，蘋果的早期時(shí)間的一款腳本系統(tǒng)。它以「Card」對(duì)產(chǎn)品進(jìn)行命名，同時(shí)在產(chǎn)品交互形態(tài)上以一疊卡片的形態(tài)呈現(xiàn)。這讓用戶很容易就聯(lián)想到現(xiàn)實(shí)生活中的卡片小冊(cè)子，進(jìn)而快速地了解到產(chǎn)品的大致行為模式。
需要注意的是，傳統(tǒng)工具型產(chǎn)品的用戶往往已被已有產(chǎn)品教育，積累了一定的使用經(jīng)驗(yàn)、習(xí)慣。對(duì)于此類產(chǎn)品的概念模型簡(jiǎn)化應(yīng)慎重考慮，因?yàn)橛脩羲⒌男睦砟Ｐ褪禽^難改變的，顛覆性的變化會(huì)讓用戶之前付出的學(xué)習(xí)成本付諸東流。此時(shí)可嘗試用戶的其他感知層面切入（流程、原型、操作），以探索簡(jiǎn)化的可能。
2、巧用大白話
在實(shí)際業(yè)務(wù)場(chǎng)景中，難免會(huì)遇到概念新穎、邏輯復(fù)雜的產(chǎn)品功能。由于用戶從未曾接觸過類似的事物，未建立起相應(yīng)的心理模型。在設(shè)計(jì)產(chǎn)品概念時(shí)也就難以使用隱喻、類比的方式來降低產(chǎn)品的復(fù)雜度。此時(shí)可采用「目標(biāo)導(dǎo)向」的設(shè)計(jì)方法，幫助用戶快速理解產(chǎn)品功能。因?yàn)橛脩舫嘶谶^往經(jīng)驗(yàn)建立心理模型，還可根據(jù)目標(biāo)而對(duì)產(chǎn)品的行為模式做預(yù)測(cè)。
與其生搬硬套地創(chuàng)造概念，不如在合適的使用場(chǎng)景下，使用目標(biāo)導(dǎo)向的大白話，清晰的傳達(dá)出功能的目標(biāo)效果。讓用戶快速了解產(chǎn)品功能的目標(biāo)效果，減少全新概念的理解成本。
例如，在交互原型設(shè)計(jì)中，按鈕往往存在多個(gè)狀態(tài)（默認(rèn)態(tài)、懸停態(tài)、點(diǎn)擊態(tài)、禁用態(tài)）。Figma對(duì)其賦予概念“變體（Variants）”，用戶難以對(duì)此概念產(chǎn)生目標(biāo)效果的聯(lián)想，無(wú)法建立起對(duì)應(yīng)的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目標(biāo)效果的大白話“組件狀態(tài)”。
三、如何讓流程簡(jiǎn)短高效
1、快速、直觀呈現(xiàn)效果
對(duì)于工具型產(chǎn)品來說，效果直觀是非常必要的。一來能讓用戶的探索快速獲得反饋，降低用戶的理解成本。二來能帶來更加輕量的操作體驗(yàn)，鼓勵(lì)用戶探索，給予用戶充分的掌控感。工具型產(chǎn)品的設(shè)計(jì)者應(yīng)以此作為設(shè)計(jì)理念之一。但難免會(huì)遇到產(chǎn)品功能的邏輯流程較為復(fù)雜，需要經(jīng)歷多個(gè)環(huán)環(huán)相扣步驟的情況。而研發(fā)者往往更關(guān)注與代碼的邏輯及可維護(hù)性，更加推薦邏輯嚴(yán)謹(jǐn)?shù)鞒倘唛L(zhǎng)的設(shè)計(jì)。這時(shí)設(shè)計(jì)者應(yīng)堅(jiān)守設(shè)計(jì)理念，不斷在用戶體驗(yàn)與功能邏輯中尋找平衡，貫徹落實(shí)設(shè)計(jì)理念。
對(duì)于冗長(zhǎng)的流程，設(shè)計(jì)者可通過以下方式解決：
1.根據(jù)場(chǎng)景自動(dòng)化配置
良好的產(chǎn)品應(yīng)該是聰明、高情商的，能夠根據(jù)用戶的實(shí)際情況進(jìn)行自動(dòng)化的配置，以減少用戶操作。在進(jìn)行自動(dòng)化配置時(shí)，應(yīng)謹(jǐn)慎梳理清楚用戶的所有場(chǎng)景，以及每種場(chǎng)景意圖，避免過度聰明，導(dǎo)致畫蛇添足。
例如，在Notion中可一鍵創(chuàng)建Timeline視圖，無(wú)需用戶進(jìn)行任何配置。因?yàn)槠渥隽藞?chǎng)景自動(dòng)化配置處理：自動(dòng)配置所需要的字段。
2.清晰的修改配置入口
在進(jìn)行自動(dòng)化配置后，不可避免可能存在場(chǎng)景理解錯(cuò)誤的情況，導(dǎo)致自動(dòng)配置的結(jié)果不符合用戶實(shí)際情況。此時(shí)應(yīng)提供清晰的修改配置入口，例如在用戶可發(fā)現(xiàn)錯(cuò)誤的地方中提供入口，允許用戶在發(fā)現(xiàn)錯(cuò)誤后即可發(fā)起修改。
3.異常后置處理，先讓用戶用起來
不應(yīng)要求用戶在功能生效前處理完所有異常。因?yàn)閷?duì)于每一個(gè)步驟，用戶都要付出理解及操作成本。尤其在處理異常情況時(shí)，用戶需要耗費(fèi)巨大的成本，極有可能因阻礙過大，從而放棄使用功能。設(shè)計(jì)者應(yīng)將異常后置，確保用戶能都快速查看功能效果并使用起來。對(duì)于異常的問題，應(yīng)允許用戶后續(xù)持續(xù)處理，不阻斷功能的使用。
例如，在Figma中導(dǎo)入sketch文件會(huì)遇到，多種格式適配問題。但不影響導(dǎo)入流程以及FIigma的正常使用，用戶可以在倒入后在對(duì)異常進(jìn)行處理。
2、基于目標(biāo)組合功能，一鍵快速設(shè)置
一般來說，工具型產(chǎn)品服務(wù)的用戶群體較廣，需要滿足豐富的個(gè)性化需求。在產(chǎn)品功能設(shè)計(jì)上，功能的顆粒度較小，能支持精細(xì)化的配置。這樣導(dǎo)致用戶需要實(shí)現(xiàn)組合的目標(biāo)效果時(shí)，需要執(zhí)行多個(gè)功能配置，整體的配置流程較為冗長(zhǎng)、復(fù)雜。設(shè)計(jì)者在設(shè)計(jì)工具型產(chǎn)品時(shí)，除了要考慮單個(gè)功能的使用體驗(yàn)，也要從用戶目標(biāo)出發(fā)，全局考慮用戶使用產(chǎn)品的整體流程體驗(yàn)。
如何既能保持產(chǎn)品的「靈活度」以滿足豐富的場(chǎng)景，又能減少整體操作流程，提升用戶效率。「一鍵操作」及「自定義腳本」是較為有效的方法。
1.一鍵操作
基于用戶的目標(biāo)，可以對(duì)一些列相關(guān)的功能進(jìn)行組合，允許用戶一鍵設(shè)置，快速達(dá)到目標(biāo)效果。同時(shí)應(yīng)存在更多配置的入口，允許進(jìn)階用戶進(jìn)行更加詳細(xì)的配置。例如，Keynote中可對(duì)文本框進(jìn)行快速樣式設(shè)置，設(shè)置內(nèi)容包含字體顏色、文本框背景顏色。當(dāng)用戶需求較為簡(jiǎn)單時(shí)，只需設(shè)置一次即可達(dá)到目標(biāo)效果，而無(wú)需設(shè)置多次。
2.自定義腳本
自定義腳本，指允許用戶將一系列操作/設(shè)置組合為一個(gè)操作組的能力。在一些進(jìn)階場(chǎng)景，用戶往往存在個(gè)性化的需求，對(duì)產(chǎn)品功能有著相對(duì)固定的使用習(xí)慣。自定義腳本，能夠極大幫助用戶減少重復(fù)性的操作，提高整體效率。
在Figma中，充滿了類似概念的設(shè)計(jì)，如：組件、樣式（文字、顏色、效果）。用戶可自定義保存相關(guān)的配置參數(shù)，以方便多次復(fù)用或一鍵修改。
四、如何簡(jiǎn)化頁(yè)面信息布局
1、圍繞行為組織功能，走一步看一步
在設(shè)計(jì)界面原型時(shí)，需要先了解用戶的任務(wù)目標(biāo)，用戶想做什么，先做什么后做什么。充分掌握用戶心理模型的行為路徑，基于用戶的行為路徑進(jìn)行組織功能，以確保用戶在每個(gè)環(huán)節(jié)中所看到的信息都是必要且準(zhǔn)確的。工具型產(chǎn)品通常擁有多個(gè)可選設(shè)置項(xiàng)，拆分任務(wù)步驟可減少用戶被非必選項(xiàng)的干擾。
除此之外，不同的用戶角色的行為路徑也會(huì)有所不同，例如：創(chuàng)建者，協(xié)作者，以及是否有編輯權(quán)限等等。不同的用戶場(chǎng)景對(duì)于功能的訴求也是不一樣的，而這就需要設(shè)計(jì)師從產(chǎn)品的定位，主流用戶以及使用習(xí)慣綜合考量。在優(yōu)先滿足主流用戶場(chǎng)景的基礎(chǔ)功能上，再進(jìn)行其他場(chǎng)景的功能增減。
2、功能層級(jí)分區(qū)，巧妙地藏起來
1.功能分區(qū)
George A. Miller在《神奇的數(shù)字7加減2：我們加工信息能力的某些限制》中表明，人的大腦最多同時(shí)處理7±2個(gè)信息塊（即5-9個(gè)），若超過則出錯(cuò)的概率將會(huì)大大提高。對(duì)于無(wú)法避免復(fù)雜信息的情況下，可以將煩瑣的信息分塊，組織成清晰的層級(jí)結(jié)構(gòu)，例如：微軟Office 中頂部工具欄包含上百個(gè)功能選項(xiàng)，為了便于用戶能快速找到想要的功能，他們將所有功能進(jìn)行分塊，包括：字體、對(duì)齊方式等模塊。每個(gè)模塊下再細(xì)分具體設(shè)置項(xiàng)，具體設(shè)置項(xiàng)又包含了其它功能。基于清晰的層級(jí)結(jié)構(gòu)，用戶可快速通過「字體模塊」-「字體設(shè)置項(xiàng)」- 「微軟雅黑」三個(gè)層級(jí)中快速找到想要的選項(xiàng)。
值得注意的是在信息分塊時(shí)，需制定出清晰的劃分界限，可通過詢問不同的用戶來判斷界限是否清晰。
與此同時(shí)，布局效果是否清晰，對(duì)于簡(jiǎn)化界面設(shè)計(jì)而言同樣重要。合理運(yùn)用「格式塔原理」中的「接近性原則」，將同類元素放在一起讓用戶在視覺上感覺是一組，再根據(jù)同組元素中的重要性不同，大小上也應(yīng)有所差異。做到讓用戶只看一眼便可快速找到想要的功能。
2.隱藏高級(jí)功能
「帕累托法則（二八法則）」同樣適用于工具型產(chǎn)品設(shè)計(jì)，即20%的功能影響80%的用戶體驗(yàn)結(jié)果。換句話說，大部分普通用戶經(jīng)常使用的基礎(chǔ)功能僅占20%，但影響程度卻遠(yuǎn)超于剩下的80%。所以需將功能劃分為基礎(chǔ)功能和高級(jí)功能，在優(yōu)先展示基礎(chǔ)功能的前提下，再考慮高級(jí)功能或自定義功能的展示，必要時(shí)可將高級(jí)功能或自定義功能進(jìn)行隱藏，但前提需是可見的。例如：更多設(shè)置，更多選項(xiàng)等，即對(duì)專家用戶始終保持可見，但又不打擾普通用戶。
五、如何讓操作更輕松
1、減少不必要的操作，使用更自然的交互
簡(jiǎn)化操作的過程中，針對(duì)不同的操作賦予最自然的交互形式能減少用戶操作過程中的精力消耗。自然的交互應(yīng)該是用戶無(wú)意識(shí)的操作，是基于過往生活經(jīng)驗(yàn)，閱歷，學(xué)識(shí)等的一種本能，幾乎不需要過多的學(xué)習(xí)成本即可完成。例如：用戶旋轉(zhuǎn)一張圖片。相對(duì)于在輸入框中輸入旋轉(zhuǎn)角度參數(shù)而言，將光標(biāo)直接操控在圖片上旋轉(zhuǎn)顯得更自然。輸入需要至少三步（點(diǎn)擊文本框-敲擊鍵盤數(shù)字-點(diǎn)擊確認(rèn)），而直接旋轉(zhuǎn)只需要兩步（點(diǎn)擊-旋轉(zhuǎn)）。因?yàn)閷?duì)于用戶而言，點(diǎn)擊圖片進(jìn)行旋轉(zhuǎn)更接近現(xiàn)實(shí)生活中的操作，不管是交互步驟還是心理認(rèn)知上，都會(huì)降低用戶的操作難度，讓用戶覺得產(chǎn)品更簡(jiǎn)單更自然。
2、提供及時(shí)的反饋與幫助，避免重復(fù)操作
在操作過程中得不到反饋，出錯(cuò)后再重新填寫，同樣會(huì)增加操作的復(fù)雜性。在尼爾森十大可用性原則中，第一原則就是系統(tǒng)狀態(tài)的可見性。系統(tǒng)需要讓用戶知道自己在做什么，需要讓用戶知道系統(tǒng)做了什么。例如：在表單填寫時(shí)及時(shí)反饋是否出錯(cuò)，在格式設(shè)置時(shí)及時(shí)反饋是否生效，可以讓用戶少走彎路。必要時(shí)給用戶提供幫助也能簡(jiǎn)化用戶操作的復(fù)雜性，提高操作的成功率。
六、結(jié)語(yǔ)
引用《簡(jiǎn)約至上》中的所說：創(chuàng)造簡(jiǎn)單用戶體驗(yàn)的秘訣就在于把復(fù)雜性轉(zhuǎn)移到正確的地方。任何產(chǎn)品都具有一定的復(fù)雜性，設(shè)計(jì)的目的不是為了消除所有復(fù)雜性，而是將它們放到最合適的位置。簡(jiǎn)化產(chǎn)品的復(fù)雜性替用戶排除不必要的干擾，通過設(shè)計(jì)師的努力給每一個(gè)用戶帶來簡(jiǎn)單、愉悅的使用體驗(yàn)，讓復(fù)雜的工作更簡(jiǎn)單。
參考文獻(xiàn)：
[1]Bill Moggridge.Designing Interactions[M].MIT Press，2006
[2][美]Alan Cooper,Robert Reimann,David Cronin,Christopher Noessel,Jason Csizamdi,Doug LeMoine.About Face 4 交互設(shè)計(jì)精髓[M].倪衛(wèi)國(guó)，劉松濤，薛菲，杭敏譯.北京：電子工業(yè)出版社，2015
[3][英]科爾伯恩(Colborne.G).簡(jiǎn)約至上：交互式設(shè)計(jì)四策[M].李松峰，秦緒文譯.北京：人民郵電出版社，2011
[4]劉津，李月.破繭成蝶：用戶體驗(yàn)設(shè)計(jì)師的成長(zhǎng)之路[M].北京：人民郵電出版社，2014
[5][美]唐納德?A?諾曼.設(shè)計(jì)心理學(xué)2:與復(fù)雜共處[M].張磊譯.北京：中信出版社，2015
作者：ISUX設(shè)計(jì)
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》面對(duì)繁冗，拒絕“擺爛”｜工具型產(chǎn)品如何簡(jiǎn)化設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( paul-jarrel.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司