提綱：

1、為什么用戶感覺(jué)復(fù)雜

2、如何簡(jiǎn)化概念，降低認(rèn)知成本

3、如何讓流程簡(jiǎn)短高效

4、如何簡(jiǎn)化頁(yè)面信息布局

5、如何讓操作更輕松

6、結(jié)語(yǔ)

一、為什么用戶感到復(fù)雜

你是否曾收到過(guò)類似的反饋：

“這文案是什么意思？”、“這能干什么？我需要干什么”、“那個(gè)功能在哪里？我找不到”、“要設(shè)置這么多項(xiàng)，好麻煩啊”、“這不能拖動(dòng)嗎？”…

這些都是用戶感到復(fù)雜的反饋。從用戶的感知層面分析，讓用戶感到復(fù)雜的原因可以劃分為四大方面：概念、流程、界面、操作，以下將詳細(xì)闡述原因。

1、概念復(fù)雜

導(dǎo)致用戶感覺(jué)產(chǎn)品復(fù)雜的其中一個(gè)主要原因是：用戶難以理解產(chǎn)品的概念模型。概念模型指事物的基礎(chǔ)定義及行為模式。（例如：汽車，一種在陸地上行駛的交通工具。通常需要司機(jī)駕駛，需要消耗汽油… ）用戶根據(jù)概念模型對(duì)事物的行為進(jìn)行預(yù)測(cè)，構(gòu)建出自身的心理模型。

因此，當(dāng)產(chǎn)品沒(méi)有清晰、準(zhǔn)確地傳達(dá)出概念模型，將導(dǎo)致用戶產(chǎn)生錯(cuò)誤的心理模型。用戶需要在大量探索過(guò)程中，逐步糾正自己的想法，最終才能了解產(chǎn)品實(shí)際的概念模型。

另外，根據(jù)「雅各布定律」和「設(shè)計(jì)心理學(xué)2：與復(fù)雜共存」，用戶基于以往積累經(jīng)驗(yàn)去理解新事物，即在使用產(chǎn)品前已構(gòu)建心理模型。而當(dāng)產(chǎn)品的概念模型與用戶的心理模型不匹配時(shí)，用戶在使用產(chǎn)品的過(guò)程中將持續(xù)產(chǎn)生認(rèn)知沖突，也將給用戶帶來(lái)巨大的認(rèn)知成本。尤其對(duì)于傳統(tǒng)工具型產(chǎn)品，顛覆型的概念模型，反而提高用戶的認(rèn)知成本，讓用戶感到復(fù)雜難懂。

2、流程復(fù)雜

工具型產(chǎn)品的流程主要分為兩方面：?jiǎn)喂δ苁褂昧鞒?、多功能組合使用流程。

在單功能使用流程方面，難免會(huì)遇到一些功能在生效前，需要經(jīng)過(guò)多個(gè)設(shè)置步驟的情況。雖然環(huán)環(huán)相扣的流程能夠降低產(chǎn)品的出錯(cuò)概率，但卻會(huì)給用戶帶來(lái)更多的成本。對(duì)于每個(gè)步驟，用戶都需要經(jīng)歷「理解」-「操作」-「反饋」的環(huán)節(jié)。在一些情況下用戶甚至不堪忍受，直接放棄使用功能。例如，在Airtable中創(chuàng)建甘特視圖，需要經(jīng)歷3步才能完成配置，查看到效果。對(duì)于一些抱著嘗試心態(tài)的新手用戶來(lái)說(shuō)，這是難以接受的體驗(yàn)：在還沒(méi)理解功能的作用效果前，就要經(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í)間精力來(lái)排除其他信息的干擾，則會(huì)產(chǎn)生“注意力被分散”、“太復(fù)雜”等體驗(yàn)感受，導(dǎo)致最終任務(wù)完成難度增加。

對(duì)用戶來(lái)說(shuō)，界面內(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ù)雜的理解過(guò)程轉(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ì)給用戶帶來(lái)不必要的麻煩。用戶需要反復(fù)操作比操作中的冗余更可怕，就像高速公路的減速帶，不斷降低用戶的效率。

二、如何簡(jiǎn)化概念，降低認(rèn)知成本

1、隱喻、類比已有事物

當(dāng)產(chǎn)品的概念模型越趨近于用戶的心理模型時(shí)，用戶就越感覺(jué)產(chǎn)品容易理解和使用，所要求的使用能力和學(xué)習(xí)成本就越低。而用戶心理模型是根據(jù)用戶的目標(biāo)，以及其過(guò)往的經(jīng)驗(yàn)構(gòu)成的。因此在設(shè)計(jì)產(chǎn)品的概念模型時(shí)，應(yīng)盡量使用隱喻、類比的方式，讓產(chǎn)品的文案概念及交互行為模式）與用戶所熟知事物相近。從而讓用戶建立聯(lián)想，激活行為記憶，降低認(rèn)知探索成本。

HyperCard，蘋(píng)果的早期時(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)品功能。由于用戶從未曾接觸過(guò)類似的事物，未建立起相應(yīng)的心理模型。在設(shè)計(jì)產(chǎn)品概念時(shí)也就難以使用隱喻、類比的方式來(lái)降低產(chǎn)品的復(fù)雜度。此時(shí)可采用「目標(biāo)導(dǎo)向」的設(shè)計(jì)方法，幫助用戶快速理解產(chǎn)品功能。因?yàn)橛脩舫嘶谶^(guò)往經(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)品來(lái)說(shuō)，效果直觀是非常必要的。一來(lái)能讓用戶的探索快速獲得反饋，降低用戶的理解成本。二來(lái)能帶來(lái)更加輕量的操作體驗(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ì)者可通過(guò)以下方式解決：

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)景意圖，避免過(guò)度聰明，導(dǎo)致畫(huà)蛇添足。

例如，在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.異常后置處理，先讓用戶用起來(lái)

不應(yīng)要求用戶在功能生效前處理完所有異常。因?yàn)閷?duì)于每一個(gè)步驟，用戶都要付出理解及操作成本。尤其在處理異常情況時(shí)，用戶需要耗費(fèi)巨大的成本，極有可能因阻礙過(guò)大，從而放棄使用功能。設(shè)計(jì)者應(yīng)將異常后置，確保用戶能都快速查看功能效果并使用起來(lái)。對(duì)于異常的問(wèn)題，應(yīng)允許用戶后續(xù)持續(xù)處理，不阻斷功能的使用。

例如，在Figma中導(dǎo)入sketch文件會(huì)遇到，多種格式適配問(wèn)題。但不影響導(dǎo)入流程以及FIigma的正常使用，用戶可以在倒入后在對(duì)異常進(jìn)行處理。

2、基于目標(biāo)組合功能，一鍵快速設(shè)置

一般來(lái)說(shuō)，工具型產(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)景，又能減少整體操作流程，提升用戶效率?！敢绘I操作」及「自定義腳本」是較為有效的方法。

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ū)，巧妙地藏起來(lái)

1.功能分區(qū)

George A. Miller在《神奇的數(shù)字7加減2：我們加工信息能力的某些限制》中表明，人的大腦最多同時(shí)處理7±2個(gè)信息塊（即5-9個(gè)），若超過(guò)則出錯(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)，用戶可快速通過(guò)「字體模塊」-「字體設(shè)置項(xiàng)」- 「微軟雅黑」三個(gè)層級(jí)中快速找到想要的選項(xiàng)。

值得注意的是在信息分塊時(shí)，需制定出清晰的劃分界限，可通過(guò)詢問(wèn)不同的用戶來(lái)判斷界限是否清晰。

與此同時(shí)，布局效果是否清晰，對(duì)于簡(jiǎn)化界面設(shè)計(jì)而言同樣重要。合理運(yùn)用「格式塔原理」中的「接近性原則」，將同類元素放在一起讓用戶在視覺(jué)上感覺(jué)是一組，再根據(jù)同組元素中的重要性不同，大小上也應(yīng)有所差異。做到讓用戶只看一眼便可快速找到想要的功能。

2.隱藏高級(jí)功能

「帕累托法則（二八法則）」同樣適用于工具型產(chǎn)品設(shè)計(jì)，即20%的功能影響80%的用戶體驗(yàn)結(jié)果。換句話說(shuō)，大部分普通用戶經(jīng)常使用的基礎(chǔ)功能僅占20%，但影響程度卻遠(yuǎn)超于剩下的80%。所以需將功能劃分為基礎(chǔ)功能和高級(jí)功能，在優(yōu)先展示基礎(chǔ)功能的前提下，再考慮高級(jí)功能或自定義功能的展示，必要時(shí)可將高級(jí)功能或自定義功能進(jìn)行隱藏，但前提需是可見(jiàn)的。例如：更多設(shè)置，更多選項(xiàng)等，即對(duì)專家用戶始終保持可見(jiàn)，但又不打擾普通用戶。

五、如何讓操作更輕松

1、減少不必要的操作，使用更自然的交互

簡(jiǎn)化操作的過(guò)程中，針對(duì)不同的操作賦予最自然的交互形式能減少用戶操作過(guò)程中的精力消耗。自然的交互應(yīng)該是用戶無(wú)意識(shí)的操作，是基于過(guò)往生活經(jīng)驗(yàn)，閱歷，學(xué)識(shí)等的一種本能，幾乎不需要過(guò)多的學(xué)習(xí)成本即可完成。例如：用戶旋轉(zhuǎn)一張圖片。相對(duì)于在輸入框中輸入旋轉(zhuǎn)角度參數(shù)而言，將光標(biāo)直接操控在圖片上旋轉(zhuǎn)顯得更自然。輸入需要至少三步（點(diǎn)擊文本框-敲擊鍵盤(pá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ì)降低用戶的操作難度，讓用戶覺(jué)得產(chǎn)品更簡(jiǎn)單更自然。

2、提供及時(shí)的反饋與幫助，避免重復(fù)操作

在操作過(guò)程中得不到反饋，出錯(cuò)后再重新填寫(xiě)，同樣會(huì)增加操作的復(fù)雜性。在尼爾森十大可用性原則中，第一原則就是系統(tǒng)狀態(tài)的可見(jiàn)性。系統(tǒng)需要讓用戶知道自己在做什么，需要讓用戶知道系統(tǒng)做了什么。例如：在表單填寫(xiě)時(shí)及時(shí)反饋是否出錯(cuò)，在格式設(shè)置時(shí)及時(shí)反饋是否生效，可以讓用戶少走彎路。必要時(shí)給用戶提供幫助也能簡(jiǎn)化用戶操作的復(fù)雜性，提高操作的成功率。

六、結(jié)語(yǔ)

引用《簡(jiǎn)約至上》中的所說(shuō)：創(chuàng)造簡(jiǎn)單用戶體驗(yàn)的秘訣就在于把復(fù)雜性轉(zhuǎn)移到正確的地方。任何產(chǎn)品都具有一定的復(fù)雜性，設(shè)計(jì)的目的不是為了消除所有復(fù)雜性，而是將它們放到最合適的位置。簡(jiǎn)化產(chǎn)品的復(fù)雜性替用戶排除不必要的干擾，通過(guò)設(shè)計(jì)師的努力給每一個(gè)用戶帶來(lái)簡(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ì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):   ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系010-63334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

正文

經(jīng)常使用愛(ài)奇藝刷劇的同學(xué)，有沒(méi)有發(fā)現(xiàn)愛(ài)奇藝的應(yīng)用圖標(biāo)又變了。前段時(shí)間愛(ài)奇藝針對(duì)品牌設(shè)計(jì)進(jìn)行了較大的調(diào)整，最近又悄悄地將應(yīng)用圖標(biāo)的背景色換成了這種多彩色混合漸變的形式。

針對(duì)這個(gè)視覺(jué)效果估計(jì)大家各有看法，我們就不討論這個(gè)話題了，今天黑馬哥是來(lái)出教程的~O(∩_∩)O~。

這個(gè)類似于極光/彌散漸變的風(fēng)格最近也比較流行，在 UI 場(chǎng)景中的運(yùn)用也是比較普及的，被運(yùn)用到應(yīng)用圖標(biāo)的案例中相對(duì)較少。大概的回憶了一下，也有一些產(chǎn)品會(huì)使用，特別是比較知名的 Instagram 很早之前就使用了，也成為了流行趨勢(shì)中的優(yōu)秀案例之一。

通過(guò)極光/彌散漸變（混合漸變）的形式強(qiáng)化應(yīng)用圖標(biāo)外輪廓背景，不僅可以提高視覺(jué)感，也是體現(xiàn)年輕化趨勢(shì)的一種色彩表現(xiàn)形式。不過(guò)漸變中的色彩本身也是關(guān)鍵性的因素，如果色彩不夠年輕活潑，帶來(lái)的效果也是千差萬(wàn)別的。

一、漸變的表現(xiàn)形式

漸變色在我們的設(shè)計(jì)中是非常普及的，漸變色分為線性漸變、徑向漸變、角度漸變、混合漸變、流體漸變等形式。不同的漸變形式可以營(yíng)造不一樣的視覺(jué)體驗(yàn)，可以豐富色彩環(huán)境、強(qiáng)化光影質(zhì)感、增強(qiáng)層次感和空間感等。

1、線性漸變

這是最常見(jiàn)的一種漸變方式，具備明確的方向性，由兩種或者多種顏色組合形成。相較于單色來(lái)說(shuō)，線性漸變可以使得畫(huà)面更加豐富，色彩營(yíng)造出的層次感更強(qiáng)。

2、徑向漸變

徑向漸變是以中心向外擴(kuò)散而形成的圓形漸變，可以作為立體感的表現(xiàn)，也可以營(yíng)造向中心聚攏的光影效果。

3、角度漸變

角度漸變形成類似于雷達(dá)掃描的效果，屬于運(yùn)用相對(duì)較少的漸變形式。在一些應(yīng)用圖標(biāo)的外輪廓背景中會(huì)被使用，也可以作為營(yíng)造產(chǎn)品的光影變化。

4、混合漸變

混合漸變就是多種顏色隨機(jī)混合，色彩形成不均勻的自然彌散開(kāi)，也可以成為彌散漸變或者極光漸變。是最近比較流行的視覺(jué)風(fēng)格，可以呈現(xiàn)出豐富的色彩變化和隨性自然的年輕化趨勢(shì)，被廣泛應(yīng)用到平面設(shè)計(jì)、UI 設(shè)計(jì)、電商設(shè)計(jì)等眾多視覺(jué)設(shè)計(jì)領(lǐng)域。

5、流體漸變

流體漸變就是多種顏色漸變組合，形成帶有流動(dòng)感的視覺(jué)效果，通常作為背景來(lái)豐富設(shè)計(jì)的視覺(jué)感。也有動(dòng)態(tài)形式的流體漸變，在 APP 和一些屏幕壁紙中出現(xiàn)，帶來(lái)的感官體驗(yàn)也是非常不錯(cuò)的。

隨著視覺(jué)感官體驗(yàn)的不斷追求，設(shè)計(jì)師已經(jīng)不滿足于趨于平面化的漸變形式，探索出造型多變、色彩豐富、刺激感官的視覺(jué)體驗(yàn)，以更加豐富的表現(xiàn)形式來(lái)探索漸變方式。

二、漸變小教程

線性漸變、徑向漸變和角度漸變實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，軟件自帶的漸變屬性即可滿足。下面重點(diǎn)給大家分享如何實(shí)現(xiàn)混合漸變的效果，以后再單獨(dú)給大家分享關(guān)于流體漸變的技巧。

混合漸變顧名思義就是將多種顏色進(jìn)行混合，形成色彩豐富的過(guò)度效果，需要把控的是顏色之間的自然過(guò)渡。

方法一：

通過(guò)繪制幾個(gè)不同顏色的形狀圖形，然后執(zhí)行高斯模糊形成混合漸變，模糊的參數(shù)值要適當(dāng)大一些，一直到顏色自然過(guò)渡為止。

方法二：

如果想要隨機(jī)性大一些，可以通過(guò)畫(huà)筆工具隨意涂抹顏色，這樣形成的效果更加隨機(jī)性。然后再執(zhí)行高斯模糊將顏色融合，帶來(lái)自然隨性的視覺(jué)體驗(yàn)。

三、分享幾個(gè)案例

不能只是紙上談兵，只有反復(fù)磨練和嘗試才會(huì)熟能生巧。根據(jù)以上的方式黑馬哥完成了以下的作品案例，大家也一起來(lái)動(dòng)動(dòng)手吧！

1、鄰近色系易把控

混合漸變技法層面來(lái)說(shuō)并不難，配色是相對(duì)具備難度的，很多同學(xué)都會(huì)因?yàn)榕渖坏轿欢霾怀鰞?yōu)秀的作品。針對(duì)應(yīng)用圖標(biāo)設(shè)計(jì)中的配色來(lái)說(shuō)，鄰近色系的搭配是最容易把控的。選擇色相范圍在 60° 以內(nèi)的色值，混合出來(lái)的色彩排斥感都是比較低的，融合度比較高，能夠呈現(xiàn)出比較舒適自然的視覺(jué)感官體驗(yàn)。

如果選擇了色相角度大于 60° 的色值，只要數(shù)值的增減關(guān)系控制在 30° 以內(nèi)都屬于可控范圍，這時(shí)候如果出現(xiàn)較大的色彩排斥感，可以通過(guò)降低不透明度來(lái)進(jìn)行視覺(jué)平衡。

2、強(qiáng)視覺(jué)感還得對(duì)比色

雖然鄰近色的處理比較容易把控，但是帶來(lái)的視覺(jué)感也是與顏色對(duì)比關(guān)系成正比的，想要達(dá)到強(qiáng)視覺(jué)感還得選對(duì)比色。色相選擇范圍在 120°~180° 之間的色值，容易形成較強(qiáng)的視覺(jué)張力，通過(guò)增加高斯模糊的值才能稍微過(guò)度相互之間的色彩排斥感。

3、學(xué)會(huì)舉一反三

今天分享的經(jīng)驗(yàn)不局限于應(yīng)用圖標(biāo)的設(shè)計(jì)范疇，我們要學(xué)會(huì)將這個(gè)技法舉一反三，運(yùn)用到更多的設(shè)計(jì)場(chǎng)景中。比如在下面作品中的一組信息卡片的設(shè)計(jì)中，通過(guò)混合漸變形成的卡片背景提高了局部的視覺(jué)感，配合磨砂玻璃質(zhì)感的運(yùn)用，提高了該部分的視覺(jué)感官體驗(yàn)。

4、其他作品欣賞

為了輔助大家理解和開(kāi)拓思維，為大家選擇了幾個(gè)類似的案例作品，希望可以帶給大家更多設(shè)計(jì)靈感。（以下作品版權(quán)歸屬原作者，僅作為學(xué)習(xí)交流）

四、布置一個(gè)小作業(yè)

通過(guò)對(duì)混合漸變實(shí)現(xiàn)技巧的學(xué)習(xí)和案例欣賞，相信大家對(duì)于混合漸變有了比較全面的認(rèn)知。學(xué)以致用的目的，下面為大家準(zhǔn)備了一個(gè)小作業(yè)，希望以此來(lái)強(qiáng)化大家的理解。

根據(jù)以上示意圖提供的高保真原型圖，以混合漸變的形式增強(qiáng)其作品的視覺(jué)感。

以下方案為黑馬哥完成的一個(gè)示意，大家可以轉(zhuǎn)換思維和調(diào)整新的配色方案，輸出不一樣的全新作品。

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這個(gè)效果原來(lái)是這樣做出來(lái)的

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

一、刪除，實(shí)現(xiàn)表單輕量化

前幾年，我們?cè)阢y行或者移動(dòng)營(yíng)業(yè)廳開(kāi)通一些新業(yè)務(wù)時(shí)，都會(huì)填寫(xiě)表單，通常是密密麻麻一堆信息。但是實(shí)際需要填寫(xiě)的內(nèi)容可能只有2～3項(xiàng)，業(yè)務(wù)人員會(huì)特意勾選出來(lái)給客戶，其余的都是非必填項(xiàng)，或者是業(yè)務(wù)人員填寫(xiě)的。

線上表單設(shè)計(jì)時(shí)，沒(méi)有專門(mén)的業(yè)務(wù)人員指導(dǎo)，用戶更容易迷失。所以設(shè)計(jì)師或者產(chǎn)品經(jīng)理的首要任務(wù)就是盡可能地減少表單信息量，降低用戶的認(rèn)知負(fù)荷。

最近在做一個(gè)表單的優(yōu)化，業(yè)務(wù)方要求增加“入?yún)ⅰ?、“出參”兩個(gè)表格項(xiàng)，說(shuō)是用戶會(huì)看。與用戶溝通后，反饋也說(shuō)“會(huì)看一下”。但是在深度挖掘用戶場(chǎng)景后，發(fā)現(xiàn)用戶確實(shí)會(huì)查看這個(gè)信息，只不過(guò)不是在當(dāng)前環(huán)節(jié)查看，而是在結(jié)果項(xiàng)中查看。

所以我們最終去掉了這兩個(gè)信息量較大的表格內(nèi)容，從而讓整個(gè)表單的信息量得到了明顯的下降。

因此面對(duì)復(fù)雜長(zhǎng)表單，我們需要從需求入手，判斷是否有必要讓用戶提供如此多的復(fù)雜信息。

二、組織，讓表單更加有層次

當(dāng)我們不得不面對(duì)復(fù)雜表單時(shí)，如果采用簡(jiǎn)單內(nèi)容平鋪，用戶看到的是滿屏的散點(diǎn)信息，造成信息識(shí)別困難，用戶一時(shí)間難以找到填寫(xiě)思路，反而增加用戶的心理負(fù)擔(dān)。因此信息的層次性，對(duì)于復(fù)雜表單至關(guān)重要。

首先要從內(nèi)容和視覺(jué)層面讓復(fù)雜信息變得清晰、規(guī)整，更加符合用戶的認(rèn)知習(xí)慣。例如，可以利用分組標(biāo)題、分割線、卡片，按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊劃分。

根據(jù)不同的布局和交互，主要有以下4種表單設(shè)計(jì)模式。

1、順序表單

表單分組后，可以按照業(yè)務(wù)邏輯順序鋪開(kāi)展示。用戶只要按順序填寫(xiě)就可以了。但是對(duì)于超長(zhǎng)表單，這種布局方式下，用戶無(wú)法全覽頁(yè)面信息。頁(yè)面上下滾動(dòng)、定位查找?guī)?lái)的交互成本比較高。

1）平鋪表單

2）卡片表單

因此順序表單更多地用在業(yè)務(wù)信息比較簡(jiǎn)單的場(chǎng)景中。

2、錨點(diǎn)表單

為了解決長(zhǎng)表單的定位效率問(wèn)題，可以在順序表單的基礎(chǔ)上增加錨點(diǎn)。另外錨點(diǎn)還可以幫助用戶快速了解表單所包含的內(nèi)容模塊。

根據(jù)錨點(diǎn)的布局，可以分為橫向錨點(diǎn)和縱向錨點(diǎn)兩類。錨點(diǎn)需要吸頂方便用戶操作。本質(zhì)上來(lái)說(shuō)，錨點(diǎn)表單是順序表單的優(yōu)化版本。

3、標(biāo)簽表單

如果長(zhǎng)表單內(nèi)容沒(méi)有依賴關(guān)系，還可以將表單拆分為幾個(gè)相互獨(dú)立的標(biāo)簽內(nèi)容，這就是標(biāo)簽表單。

不過(guò)標(biāo)簽表單更強(qiáng)調(diào)內(nèi)容的并列關(guān)系，常用于配置表單中，例如 MAC 或者 Windows 系統(tǒng)的配置彈窗。

標(biāo)簽表單在全新表單中應(yīng)用較少。因?yàn)闃?biāo)簽表單容易造成內(nèi)容遺漏，并且無(wú)法告知用戶哪些標(biāo)簽已經(jīng)填寫(xiě)，哪些標(biāo)簽未填寫(xiě)，或者無(wú)法清晰地展示校驗(yàn)信息。來(lái)回切換標(biāo)簽查看信息，也會(huì)影響效率，因此主要用于用戶有目的的配置行為中。

4、步驟表單

步驟表單是一種常見(jiàn)的表單拆分方式。通過(guò)節(jié)點(diǎn)將子表單串聯(lián)起來(lái)，形成一個(gè)完整的業(yè)務(wù)閉環(huán)。例如阿里云的云服務(wù)器訂單流程，或者一些開(kāi)戶流程等。

步驟表單有幾個(gè)特點(diǎn)：

1）過(guò)程串聯(lián)

理論上來(lái)說(shuō)，步驟表單有明顯的操作順序，用戶需要按照節(jié)點(diǎn)完成內(nèi)容填寫(xiě)，因此不會(huì)產(chǎn)生信息遺漏。當(dāng)然也可以根據(jù)實(shí)際的業(yè)務(wù)場(chǎng)景，設(shè)置選填節(jié)點(diǎn)。但是總得來(lái)說(shuō)，步驟表單更強(qiáng)調(diào)的是順序操作。

2）業(yè)務(wù)引導(dǎo)性

對(duì)于復(fù)雜業(yè)務(wù)，步驟表單可以將分散在不同頁(yè)面中的獨(dú)立業(yè)務(wù)串聯(lián)起來(lái)，在一定程度上具備新人教學(xué)功能，幫助用戶了解業(yè)務(wù)邏輯。減少用戶自定義操作時(shí)在不同頁(yè)面的跳轉(zhuǎn)，從而提供新人用戶的操作效率。例如系統(tǒng)配置向?qū)ь惖牟襟E表單。

3）逆向操作

由于步驟表單存在正向和逆向操作，因此設(shè)計(jì)時(shí)還需要考慮清楚逆向操作的設(shè)計(jì)邏輯。例如：

• 當(dāng)用戶想要修改前面步驟信息時(shí)，除了逐步返回，是否可以步驟條直接跨節(jié)點(diǎn)修改？
• 用戶中途退出表單后，重啟時(shí)是從第一步開(kāi)始，還是直接從未填寫(xiě)的步驟開(kāi)始呢？
• 用戶如果完成了步驟條表單填寫(xiě)，想要二次修改時(shí)，是用普通表單，還是仍然使用步驟表單形式呢？

4）節(jié)點(diǎn)的平衡性

步驟表單可以分拆信息，化整為零。但是信息節(jié)點(diǎn)也不能過(guò)多，否則同樣會(huì)影響用戶的操作效率。所以要減少不必要的流程節(jié)點(diǎn)。

最近在做設(shè)計(jì)時(shí)，發(fā)現(xiàn)步驟表單最后一步是內(nèi)容預(yù)覽。通過(guò)用戶調(diào)研發(fā)現(xiàn)，部分用戶會(huì)謹(jǐn)慎地預(yù)覽前面４步填寫(xiě)的內(nèi)容。而另一部分用戶則認(rèn)為，剛填寫(xiě)了內(nèi)容不需要預(yù)覽，強(qiáng)制預(yù)覽的設(shè)計(jì)并不友好。該如何平衡設(shè)計(jì)呢？

最終我們選擇了將預(yù)覽節(jié)點(diǎn)取消，將預(yù)覽功能調(diào)整到第４步，采用「預(yù)覽」按鈕的形式。既滿足了部分用戶預(yù)覽的需要，另一部分用戶也可以不做預(yù)覽，直接提交申請(qǐng)。

所以步驟表單過(guò)程中的節(jié)點(diǎn)具有一定的強(qiáng)制性，需要謹(jǐn)慎對(duì)待，保證節(jié)點(diǎn)的合理有效。

三、隱藏，讓表單更加靈活

1、模塊隱藏

表單實(shí)際上是任務(wù)信息的集合，為了具有更高的適配性，內(nèi)容通常是多種場(chǎng)景的集合。而場(chǎng)景有高頻、低頻區(qū)分，對(duì)于高頻信息需要優(yōu)先展示，便于提高用戶的填寫(xiě)效率；對(duì)于低頻場(chǎng)景，可以隱藏弱化展示，從而降低整個(gè)表單的復(fù)雜度。

例如我們常見(jiàn)的「高級(jí)配置」，通常在表單的底部默認(rèn)收起展示。

2、信息隱藏

復(fù)雜表單中信息會(huì)出現(xiàn)多級(jí)信息共存的場(chǎng)景。這種場(chǎng)景下，復(fù)雜表單默認(rèn)展示當(dāng)前選項(xiàng)對(duì)應(yīng)的子內(nèi)容，隱藏其他選項(xiàng)的內(nèi)容，從而提高信息的指向性。

3、合理的組件形式

比較典型的就是單選和下拉選擇器如何選擇。有人為了強(qiáng)調(diào)效率，一味地追求單選按鈕平鋪展示，認(rèn)為單選更加直觀，用戶不需要點(diǎn)擊下拉滾動(dòng)查看備選項(xiàng)。但是用戶同樣需要逐個(gè)瀏覽選擇，反而增加了整個(gè)頁(yè)面的信息量。

所以單選框更多用在備選項(xiàng)較少的場(chǎng)景，如果備選項(xiàng)較多，建議優(yōu)先采用下拉選擇器，隱藏備選項(xiàng)。

四、轉(zhuǎn)移，擴(kuò)展表單的異步空間

1、信息轉(zhuǎn)移

在表單設(shè)計(jì)時(shí)，可以將部分二級(jí)信息轉(zhuǎn)移到彈窗、抽屜中，利用浮層空間拓展業(yè)務(wù)內(nèi)容，根據(jù)用戶操作逐級(jí)加載出來(lái)。從而減少表單的信息量。

例如下圖中，沒(méi)有將「所有配送區(qū)域及運(yùn)費(fèi)」直接展示出來(lái)供用戶選擇，而是放在了彈窗中，表單中只呈現(xiàn)最后的選擇結(jié)果。既簡(jiǎn)化了表單的內(nèi)容，又讓選擇結(jié)果更加突出，方便用戶的查看和校驗(yàn)。

2、記憶轉(zhuǎn)移

現(xiàn)在很多瀏覽器都增加了密碼存儲(chǔ)功能，減少用戶記憶成本。

而在電商購(gòu)物網(wǎng)站可以設(shè)定默認(rèn)的收貨地址。系統(tǒng)自動(dòng)讀取調(diào)用，從而減少用戶的輸入操作。

3、行為轉(zhuǎn)移

現(xiàn)在越來(lái)越多的網(wǎng)站支持「手機(jī)短信驗(yàn)證碼」免密注冊(cè)登錄方式，或者第三方登錄方式，或者手機(jī)端掃碼登錄。將原有的表單填寫(xiě)轉(zhuǎn)變?yōu)橄到y(tǒng)行為，從而降低用戶的行為成本。

好了，以上就是我總結(jié)的表單設(shè)計(jì)的內(nèi)容～

重復(fù)一遍：

• 刪除，實(shí)現(xiàn)表單輕量化
• 組織，讓表單更加有層次
• 隱藏，讓表單更加靈活
• 轉(zhuǎn)移，擴(kuò)展表單的異步空間

作者：子牧先生

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)基礎(chǔ)(7): 簡(jiǎn)約設(shè)計(jì)4原則在表單設(shè)計(jì)中的應(yīng)用

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

在設(shè)計(jì)中，相鄰的元素比分開(kāi)較遠(yuǎn)的元素會(huì)更加吸引人注意，在做設(shè)計(jì)閱讀順序的時(shí)候，利用設(shè)計(jì)分組是一個(gè)非常有效的方法，將不同信息進(jìn)行視覺(jué)間距分組，能提升用戶對(duì)于內(nèi)容上的理解。

如上圖slack的設(shè)計(jì)，插畫(huà)引導(dǎo)圖和底部按鈕上面文字拉開(kāi)了距離，使得內(nèi)容更聚焦。第二個(gè)界面的頂部頭像和下面的文字也是通過(guò)分組形成了對(duì)比。

stadium-live的產(chǎn)品設(shè)計(jì)上，登錄頁(yè)面按鈕為一組，頂部品牌LOGO和slogan一組，人物為一組，每組信息之間分組非常清晰，每一組都不會(huì)對(duì)對(duì)方視覺(jué)互相干擾，間距非常合理，用戶閱讀從一組信息到另外一組信息也很清晰。

后面兩張頁(yè)面也是如此，頂部的導(dǎo)航，和下面表單信息，以及頭像和底部按鈕，通過(guò)分組處理，內(nèi)容更加符合用戶的視覺(jué)動(dòng)線。

在球員定制的處理上，最左邊那張圖，通過(guò)卡片和線條分組處理，從視覺(jué)上很清晰的看見(jiàn)排名，哪個(gè)球隊(duì)和哪個(gè)球隊(duì)之間比賽。

當(dāng)一組信息比較接近，證明必須是有關(guān)聯(lián)的，如果距離比較遠(yuǎn)，這意味著這組信息和他們是不同的，簡(jiǎn)單來(lái)說(shuō)，通過(guò)鄰近性，通過(guò)分組創(chuàng)造這些關(guān)系，為信息帶來(lái)層次。

二、運(yùn)用空白建立層次 

classpass的設(shè)計(jì)不會(huì)使用太多的視覺(jué)元素，而是運(yùn)用留白把內(nèi)容進(jìn)行分組，每個(gè)頁(yè)面的留白恰到好處，同時(shí)留白本身就是對(duì)信息進(jìn)行分組，所以頁(yè)面中減少了很多線條使用，頁(yè)面會(huì)更加干凈有品質(zhì)感。

must是一款電影軟件，整體設(shè)計(jì)非常雜志感，頁(yè)面就是通過(guò)圖文處理，以及留白空間的處理，增加對(duì)比，基本產(chǎn)品體驗(yàn)?zāi)悴粫?huì)感覺(jué)到視覺(jué)負(fù)擔(dān)，元素之間的信息組織的非常清晰。

在電影展示頁(yè)面，信息的處理，以及打分設(shè)計(jì)上，重復(fù)運(yùn)用留白來(lái)處理信息層級(jí)，在設(shè)計(jì)中，當(dāng)你元素周圍留白越多，它產(chǎn)品的注意力也越強(qiáng)，如右邊的打分頁(yè)面，幾乎所有焦點(diǎn)都在這個(gè)彈窗上。

artsy是一款藝術(shù)品電商網(wǎng)站，整個(gè)app的設(shè)計(jì)也充滿了藝術(shù)氣息，每次我設(shè)計(jì)找不到感覺(jué)時(shí)候就會(huì)去打開(kāi)看看，里面的排版，還有設(shè)計(jì)的細(xì)節(jié)處理，都值得我學(xué)習(xí)，但我喜歡的還是他對(duì)于板式和留白空間的處理。

在首頁(yè)設(shè)計(jì)，我最喜歡他相框的設(shè)計(jì)，就像欣賞美術(shù)館的一幅畫(huà)，頁(yè)面留白也非常大，襯線體和非襯線體的對(duì)比也運(yùn)用的非常好。

整個(gè)APP的設(shè)計(jì)被大量留白包圍，雖然現(xiàn)在流行各種質(zhì)感，各種光感，C4D的設(shè)計(jì)，很多設(shè)計(jì)師認(rèn)為設(shè)計(jì)越多越好，但是大量視覺(jué)元素會(huì)讓頁(yè)面過(guò)于飽和，如果沒(méi)有很好的視覺(jué)引導(dǎo)，用戶會(huì)感到不知所措。

三、運(yùn)用氛圍建立層次 

有設(shè)計(jì)感的紋理從視覺(jué)感受上比簡(jiǎn)約主義更能吸引用戶注意力，但是背景紋理運(yùn)用不能為了設(shè)計(jì)而設(shè)計(jì)，而是需要和產(chǎn)品內(nèi)容有關(guān)系。比如紋理和文字內(nèi)容，和信息是密切相關(guān)的。如上圖，是一款打車軟件，背景結(jié)合了打車的地圖，公路線路，用車場(chǎng)景，讓頁(yè)面對(duì)比和設(shè)計(jì)層次更加突出。

jour這款產(chǎn)品在設(shè)計(jì)上，背景通過(guò)有層次的氛圍紋理和質(zhì)感，使得頁(yè)面氛圍感很強(qiáng)，層次細(xì)節(jié)更加豐富，當(dāng)然在設(shè)計(jì)的時(shí)候切忌對(duì)于設(shè)計(jì)氛圍過(guò)度運(yùn)用，那樣會(huì)讓用戶分散注意力。

其它場(chǎng)景上氛圍紋理的運(yùn)用，卡片上通過(guò)系列插畫(huà)的塑造，頁(yè)面雖然有很多插畫(huà)，但是頁(yè)面平衡感同樣重要。需要考慮用戶在界面看見(jiàn)的和其它頁(yè)面視覺(jué)感受是一致的。

氛圍除了圖形，其實(shí)色彩也是很重要一種方式，我很喜歡的ASANS的設(shè)計(jì)，在背景上就是運(yùn)用了一些幾何圖形的肌理效果讓整個(gè)空間感更加豐富，這些幾何圖形豐富細(xì)節(jié)同時(shí)也讓整個(gè)內(nèi)容更加凸顯。

如上圖是他里面一個(gè)注冊(cè)登錄場(chǎng)景，在界面中，除了背景灰色底紋通過(guò)幾何圖形來(lái)烘托視覺(jué)層次，同時(shí)在插畫(huà)上也是非常巧妙，用戶輸出，完成后，整個(gè)插畫(huà)到品牌圖形的連貫變化體驗(yàn)非常好。

Sift是一款新聞?lì)愰喿x產(chǎn)品，這類型產(chǎn)品設(shè)計(jì)一般就是文字排版，設(shè)計(jì)簡(jiǎn)約為主，但是sift運(yùn)用了一種大膽的設(shè)計(jì)，背景氛圍上采用一些點(diǎn)線底紋的肌理效果，和內(nèi)容結(jié)合的很平衡。

Lugg是一款貨車APP有點(diǎn)像國(guó)內(nèi)的貨拉拉，整個(gè)設(shè)計(jì)也氛圍感非常強(qiáng)，運(yùn)用的全插畫(huà)設(shè)計(jì)，在頁(yè)面每個(gè)細(xì)節(jié)，從引導(dǎo)頁(yè)，讓頁(yè)面核心功能設(shè)計(jì)都能看見(jiàn)完整插畫(huà)的運(yùn)用，我目前我看見(jiàn)運(yùn)用插畫(huà)氛圍作為主設(shè)計(jì)最好的產(chǎn)品。

感興趣的同學(xué)可以去美國(guó)蘋(píng)果商店去下載使用，頁(yè)面中增加氛圍是一種增加層次很好的方式，但是同時(shí)需要主要好視覺(jué)平衡，不要做到本末倒置。

四、運(yùn)用襯線字體和無(wú)襯線字體建立層次 

字體對(duì)比，運(yùn)用襯線字體和非襯線字體對(duì)比是非常常用的方式，如上圖運(yùn)用了Adelle Sans字和Tiempos字體這兩款字體的對(duì)比讓頁(yè)面內(nèi)容結(jié)構(gòu)非常清晰。

上圖官網(wǎng)的設(shè)計(jì)，干凈的排版，通過(guò)字體大小，字型進(jìn)行對(duì)比，體現(xiàn)出視覺(jué)層次。

字體的選擇本身也是設(shè)計(jì)中很重要的因素，好的設(shè)計(jì)不僅能提升設(shè)計(jì)品質(zhì)，同時(shí)也能讓頁(yè)面視覺(jué)層次更加分明。

五、結(jié)語(yǔ) 

回歸設(shè)計(jì)本質(zhì)，其實(shí)我一直覺(jué)得設(shè)計(jì)這個(gè)工作就是一個(gè)翻譯官，我們的使命是讓用戶使用產(chǎn)品過(guò)程中更加易懂，同時(shí)我們能方便地解決他們的問(wèn)題，而不僅僅是專注在界面美觀本身上，今天分享的這些提升設(shè)計(jì)層次的一些技巧，也是為了讓頁(yè)面有更好的體驗(yàn)。

作者：叮當(dāng)貓

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這么好的設(shè)計(jì)排版技巧，不看虧了??！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

如果光看視覺(jué)不論主題感覺(jué)還不錯(cuò)的，但最大的問(wèn)題也是不符合主題，主體是一個(gè)現(xiàn)實(shí)的籃球運(yùn)動(dòng)員，卻搞了很多魔幻的元素，結(jié)果就很像魔幻籃球似的，這樣在練習(xí)的時(shí)候可以試試，但作為一個(gè)項(xiàng)目需求肯定是不會(huì)讓你過(guò)的。

再來(lái)看看修改后的：

修改后的圖整個(gè)就和諧統(tǒng)一多了，更符合主題。

我們做圖的時(shí)候符合主題是最基本的，那到底該怎么做呢？今天就給家分享一下設(shè)計(jì)思路。

一、明確風(fēng)格

視覺(jué)設(shè)計(jì)師經(jīng)常會(huì)遇到各種各樣的需求，首先我們要做的第一件事就是了解需求，明確風(fēng)格。
我們可以通過(guò)了解需求背景，和觀察人物素材來(lái)了解，之后再去推進(jìn)設(shè)計(jì)。

我們來(lái)看看素材：

這不是NBA巨星科比么？！明顯是現(xiàn)實(shí)題材，不應(yīng)該加入一些魔幻、科幻什么的元素進(jìn)去。

二、明確需求

明確需求的目的是為了抓住設(shè)計(jì)關(guān)鍵點(diǎn)，方便為接下來(lái)的設(shè)計(jì)推進(jìn)提高效率。比如這次作業(yè)是要求大家設(shè)計(jì)一張帶有神秘感的剪影海報(bào)，我們可以找剪影的參考來(lái)提取這類視覺(jué)表現(xiàn)的關(guān)鍵點(diǎn)是什么：

找了很多參考，可以看到剪影視覺(jué)的效果還是蠻強(qiáng)的。很容易出效果，通過(guò)觀察我們要學(xué)會(huì)提取里面的關(guān)鍵點(diǎn)：

我們要做的就很明確了，在一個(gè)場(chǎng)景里設(shè)置一個(gè)光源，再加入人物調(diào)黑放在光源前面形成對(duì)比。

三、元素聯(lián)想

我們的人物素材是籃球員，我們就可以通過(guò)籃球運(yùn)d動(dòng)員這一個(gè)點(diǎn)為中心去發(fā)散聯(lián)想：

再用這些點(diǎn)來(lái)組成畫(huà)面，就會(huì)很符合主題了。

比如我們的場(chǎng)景可以是球星的發(fā)布會(huì)背景墻：

一個(gè)簡(jiǎn)單的場(chǎng)景就ok了

然后是我們的光源：

原圖中就是一個(gè)圓，就比較普通。
其實(shí)光源也可能是各種各樣的造型，來(lái)增加設(shè)計(jì)感和主題感。我們剛才聯(lián)想到有籃球，光源我們就可以用籃球來(lái)做。但我又懶得畫(huà)，怎么快速的做一個(gè)呢。這里給大家分享個(gè)省力的小辦法。

我直接從開(kāi)源的圖標(biāo)網(wǎng)站去下載，里面的圖標(biāo)都可以免費(fèi)用，且可以下載到矢量文件。

直接下一個(gè)不錯(cuò)的放圖里看看：

emm，感覺(jué)有點(diǎn)太粗了，一點(diǎn)也不透氣，沒(méi)關(guān)系。我們把源文件拖進(jìn)AI里調(diào)整下描邊粗細(xì)就可以了：

再放回圖里看看：

這樣就輕薄透氣多了！再給圖形加個(gè)外發(fā)光效果：

光源就完成了，又快又貼合主題棒棒的！
接著可以繼續(xù)豐富畫(huà)面，比如把光源想成一個(gè)霓虹燈，那可能需要繪制一些線路，也可以在墻上張貼一些人物宣傳海報(bào)：

還可以增加燈光對(duì)地面的倒影，直接把墻上的籃球圖形復(fù)制一個(gè)下來(lái)，使用透視工具拉一下變形，放到地面上：

這里要注意做好兩個(gè)點(diǎn)，倒影才能更真實(shí)：
1.靠近光源的位置會(huì)很亮，遠(yuǎn)離光源的地方要暗下去；
2.靠近光源的位置邊緣比較實(shí)，遠(yuǎn)離光源的地方要用高斯模糊虛化下去。

這樣整個(gè)場(chǎng)景就很豐富啦。

接下來(lái)是人物的處理，有一個(gè)點(diǎn)給大家分享下：

直接把人物涂黑也有剪影的感覺(jué)，但是毫無(wú)細(xì)節(jié)，人物就很平，薄的像紙，一點(diǎn)都不立體

為了解決這個(gè)問(wèn)題，我們可以給人物的邊緣加一些過(guò)度的光，注意觀察手臂的位置：

有過(guò)度光的人物是不是就顯得很立體啦？

這個(gè)同學(xué)的也有點(diǎn)這個(gè)問(wèn)題，整個(gè)手臂沒(méi)有加過(guò)度光，所以會(huì)顯得有點(diǎn)平：

加完過(guò)度光看下整體效果：

一張帥帥的人物剪影海報(bào)就完成了！

四、其它的一些附加知識(shí)點(diǎn)

1.低視角會(huì)讓畫(huà)面充滿壓迫力。

以Amor的作業(yè)為例：人物我們不能調(diào)，

但我們可以調(diào)整地面的俯視角度。比如右邊這張，就放大了透視，就給人一種仰視角色的感覺(jué)，整張圖更有壓迫感。左邊這張因?yàn)橥敢暠容^小，視角就比較高，顯得是在俯視角色。就缺少了一點(diǎn)氣勢(shì)：

小小的改動(dòng)就可以提升一個(gè)氣質(zhì)。

2.在光源里加入一些碎片會(huì)讓畫(huà)面更豐滿，充滿細(xì)節(jié)。

這是兜兜一張作業(yè)，也是很不錯(cuò)的。

我們觀察下底部光源的位置的區(qū)別：

很多同學(xué)打完光就會(huì)讓它空著，就會(huì)顯得很單一，光也會(huì)顯得有點(diǎn)蒼白平淡。其實(shí)我們可以在光源里加入一些細(xì)節(jié)，就可以讓光的層次更豐富了，從而讓畫(huà)面更耐看。

作者：慢熱

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》哦，原來(lái)這樣可以更高級(jí)！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

本篇講述：激進(jìn)式創(chuàng)新

激進(jìn)式創(chuàng)新是相對(duì)罕見(jiàn)的，它同時(shí)依賴革命性的技術(shù)和創(chuàng)新的商業(yè)模式來(lái)解決問(wèn)題，激進(jìn)創(chuàng)新的發(fā)生往往伴隨著產(chǎn)品的創(chuàng)新、組織創(chuàng)新等連鎖反應(yīng)甚至引起產(chǎn)業(yè)結(jié)構(gòu)的變化?？萍嫉膭?chuàng)新帶來(lái)了很多革命，iPhone開(kāi)創(chuàng)了電容觸屏?xí)r代，ARVR打開(kāi)了元宇宙之門(mén)；新的商業(yè)模式利用現(xiàn)有的資源引起行業(yè)巨變，如Uber和滴滴用物聯(lián)網(wǎng)技術(shù)關(guān)聯(lián)私家車和出行乘客，連接異地旅者和房東的Airbnb等都是激進(jìn)式創(chuàng)新。

作為設(shè)計(jì)師，我們?cè)诩夹g(shù)和用戶間承接著場(chǎng)景和體驗(yàn)，了解激進(jìn)式創(chuàng)新的方法可以讓我們?cè)诠ぷ鞲玫貛椭鷪F(tuán)隊(duì)突破。很多具有劃時(shí)代意義的創(chuàng)新產(chǎn)品其實(shí)都有設(shè)計(jì)師創(chuàng)始人的身影：顛覆傳統(tǒng)酒店行業(yè)的Airbnb（愛(ài)彼迎）的聯(lián)合創(chuàng)始人Rian Chesky和Joe Gebbia，首創(chuàng)了華夫格底跑鞋的Nike（耐克）創(chuàng)始人Bill Bowerman，設(shè)計(jì)開(kāi)發(fā)了凹凸面圓點(diǎn)拼接積木的LEGO（樂(lè)高）創(chuàng)始人Ole Kirk Kristiansen，顛覆內(nèi)容傳播權(quán)威、開(kāi)啟全民播客時(shí)代的Youtube聯(lián)合創(chuàng)始人Chad Hurley…他們都是設(shè)計(jì)師出身，基于自己對(duì)行業(yè)、產(chǎn)品和用戶需求的洞察革新了行業(yè)。

一、激進(jìn)創(chuàng)新啟動(dòng) / 策略2則

上一篇提到漸進(jìn)式創(chuàng)新的起點(diǎn)難度主要在于溝通和傳達(dá)，而激進(jìn)式創(chuàng)新依賴創(chuàng)意突破，有兩類需求命題可能會(huì)讓創(chuàng)意發(fā)散變得艱難。其中一種是需求命題過(guò)于具體，這可能會(huì)限制創(chuàng)意的發(fā)散空間；另一種則是需求命題過(guò)于宏大，無(wú)邊無(wú)際讓設(shè)計(jì)師不知從何著手調(diào)研和發(fā)散。針對(duì)這兩種狀態(tài)，下面的方法將針對(duì)性地幫助設(shè)計(jì)師們解題。

策略1.  問(wèn)題挖掘 Dig Deeper

命題過(guò)于具體很可能會(huì)限制創(chuàng)意的發(fā)散空間，仿佛解決方案已經(jīng)有了安排，那設(shè)計(jì)師很可能會(huì)被限制在已有思路中。問(wèn)題挖掘就是針對(duì)這類命題打破砂鍋問(wèn)到底，從而幫助自己更好地獲得發(fā)散思路。問(wèn)題挖掘就是寫(xiě)下所有能想到的問(wèn)題，挖掘前因后果，了解內(nèi)外機(jī)會(huì)和風(fēng)險(xiǎn)。

提問(wèn)可以從以下三種工具角度著手：

• 5W1H問(wèn)題

5W1H分別是：是什么，是誰(shuí)，為什么，在哪里，在何時(shí)，如何。從這六個(gè)提問(wèn)開(kāi)始著手列出所有想問(wèn)的問(wèn)題，并繼續(xù)發(fā)散關(guān)聯(lián)的子問(wèn)題。然后嘗試自己回答剛剛列出的問(wèn)題，有些問(wèn)題可能和命題無(wú)關(guān)則跳過(guò)。當(dāng)我們自行完成了梳理篩選后，就可以將這些問(wèn)題在和需求方溝通和訪談時(shí)提出，進(jìn)行深入了解，獲得靈感。

• 是什么（What） “我們的創(chuàng)新想要解決什么問(wèn)題？關(guān)鍵假設(shè)是什么？”…
• 是誰(shuí)（Who）“產(chǎn)品創(chuàng)新的購(gòu)買者是誰(shuí)？用戶是誰(shuí)？相關(guān)利益人是誰(shuí)？”…
• 為什么（Why）“為何這個(gè)問(wèn)題重要？為何發(fā)生這個(gè)問(wèn)題？為何之前未能解決？”…
• 在哪里（Where） “這個(gè)問(wèn)題發(fā)生在哪里？之前在哪里解決？還有哪里有相似的問(wèn)題? ”…
• 在何時(shí)（When）“這個(gè)問(wèn)題何時(shí)發(fā)生？問(wèn)題何時(shí)開(kāi)始？何時(shí)可以解決?” …
• 如何（How）“如何解決？已經(jīng)嘗試了哪些解決辦法？”…

• 5個(gè)為什么（5Why）

經(jīng)典的連問(wèn)5個(gè)為什么。如果我們針對(duì)看到的結(jié)果，只問(wèn)一個(gè)“為什么”，很容易停在第一層的表象原因，只有不斷的深入挖掘才可以層層遞進(jìn)，找出最關(guān)鍵的底層原因。

• “機(jī)器為什么停下來(lái)？” 電路過(guò)載，使保險(xiǎn)絲熔斷。
• “為什么？” 軸承潤(rùn)滑不足，因此被鎖定。
• “為什么？” 機(jī)器人上的油泵沒(méi)有循環(huán)足夠的油。
• “為什么？” 泵入口被金屬屑堵塞。
• “為什么？” 泵上沒(méi)有過(guò)濾器。

• 層層擴(kuò)散

如果五個(gè)為什么是向內(nèi)層層遞進(jìn)，那層層擴(kuò)散就是向外發(fā)問(wèn)。以最為基礎(chǔ)的命題問(wèn)題作為中心點(diǎn)擴(kuò)散，向外展開(kāi)相關(guān)因素：產(chǎn)品的核心問(wèn)題，相關(guān)結(jié)構(gòu)技術(shù)，外部文化和法規(guī)…

• “這個(gè)產(chǎn)品我們要解決一個(gè)什么問(wèn)題？為什么要解決這個(gè)問(wèn)題？”
• “別人對(duì)這個(gè)產(chǎn)品的當(dāng)前印象和期待是怎樣的，需求發(fā)起者是誰(shuí)？”
• “這個(gè)產(chǎn)品的開(kāi)發(fā)方式，有什么背景，歷史淵源，復(fù)雜的代碼歷史，變動(dòng)難度？”
• “這個(gè)產(chǎn)品擁有的資源？”
• “這個(gè)產(chǎn)品有什么文化、政治、法規(guī)背景”
• “我們的外部?jī)?yōu)勢(shì)和劣勢(shì)是什么？”

策略2. 設(shè)置邊界 Planting Limits

都說(shuō)設(shè)計(jì)是戴腳鐐跳舞，你是否接到過(guò)抽象空泛且聽(tīng)起來(lái)沒(méi)有任何限制的命題？創(chuàng)作條件沒(méi)有限制也許意味無(wú)限可能，但更常意味著難以聚焦。適當(dāng)?shù)氖`有時(shí)可以幫助更好地放飛想法。所以如果面對(duì)的命題太龐大，可以嘗試給自己設(shè)限，或思考可能存在的限制，就能抓到一個(gè)相對(duì)靠譜的起點(diǎn)。

• “這個(gè)項(xiàng)目要控制成本投入，用最少的資金，最少的人力?！?
• “最大程度保留用戶的現(xiàn)有體驗(yàn)，盡可能減少用戶學(xué)習(xí)成本?！?
• “新創(chuàng)意最大程度滿足原來(lái)的代碼框架，使用最小的開(kāi)發(fā)成本。”
• “新的產(chǎn)品體驗(yàn)要極簡(jiǎn)，將用戶路徑縮短到三步以內(nèi)?！?
• “在鏈路上需要用戶使用的媒介最少化。”

例. 重新設(shè)計(jì)支付流程

• 原體驗(yàn)：原本用戶需要攜帶錢(qián)包出門(mén)，錢(qián)包里會(huì)有多張信用卡，儲(chǔ)蓄卡，還會(huì)有很多現(xiàn)金。而用戶出門(mén)手機(jī)也必不可少。
• 設(shè)置邊界: 在優(yōu)化的支付流程里，盡可能減少用戶支付需要攜帶的東西；在用戶支付流程中減少遇到的阻力，提升消費(fèi)。
• 新體驗(yàn)：讓用戶可以用軟件進(jìn)行轉(zhuǎn)賬，輸入需要支付的價(jià)格，雙方確認(rèn)后輸密碼轉(zhuǎn)賬。

-> 讓用戶可以直接掃碼進(jìn)行支付，無(wú)需輸入價(jià)格，無(wú)需人工核對(duì)。

-> 讓用戶用指紋確認(rèn)，或開(kāi)通多少元以下免密碼支付，無(wú)需輸入密碼。

-> 讓用戶直接手機(jī)感應(yīng)支付，無(wú)需打開(kāi)手機(jī)或軟件。

-> 掃臉進(jìn)行支付，即使不帶手機(jī)也可以進(jìn)行支付。

二、激進(jìn)創(chuàng)新過(guò)程 / 策略3則

上一篇漸進(jìn)式創(chuàng)新介紹的方法和原則在激進(jìn)式創(chuàng)新同樣適用，而本文將介紹三則對(duì)于命題較大的激進(jìn)式創(chuàng)新非常適合的過(guò)程方法，分別是：創(chuàng)意矩陣，逆向思考，多問(wèn)“如果”。

策略1.  創(chuàng)意矩陣 Creative Matrix

如果需要用創(chuàng)意解決一個(gè)較為龐大的主題，尤其是激進(jìn)類創(chuàng)新設(shè)計(jì)，那創(chuàng)意矩陣可以迅速排列組合進(jìn)行發(fā)散，且不遺漏內(nèi)容。

創(chuàng)意矩陣以表格的形式，讓X軸和Y軸上的內(nèi)容進(jìn)行交叉碰撞，強(qiáng)制、批量地激發(fā)創(chuàng)意的方法。如在X軸寫(xiě)下選擇一類用戶和主題間的需求（目的 / 流程 / 用戶類型 / 特點(diǎn) / 心理等…），Y軸寫(xiě)下解決問(wèn)題的方式（內(nèi)外部新機(jī)會(huì) / 實(shí)現(xiàn)方式 / 科技 / 環(huán)境 / 媒介 / 分發(fā)渠道 / 政策等…），橫縱碰撞在一起，就會(huì)有一張完全覆蓋的創(chuàng)意表格，之后可找出亮點(diǎn)、分析可行性進(jìn)行創(chuàng)意選擇和組合。

例：設(shè)計(jì)一個(gè)針對(duì)工業(yè)設(shè)計(jì)的3D建模軟件，打破市面上常見(jiàn)的軟件功能和體驗(yàn)。

我們以Gravity Sketch的3D建模產(chǎn)品為例，用創(chuàng)意矩陣倒推思考的流程。

（1）首先確定XY軸發(fā)散方向。能帶來(lái)革命性改變的體驗(yàn)往往依賴技術(shù)層面的實(shí)現(xiàn)，技術(shù)革新會(huì)帶來(lái)在流程、建模方式的革新。所以我們將3D軟件依托的技術(shù)和媒介為Y軸，在媒介的放散方向上同時(shí)考慮建模現(xiàn)有媒介（傳統(tǒng)的PC端和云端軟件等）是否還有新的機(jī)會(huì)；再考慮相對(duì)激進(jìn)、未來(lái)的媒介（如pad端、VR端等）。3D建模的工程經(jīng)常會(huì)涉及到協(xié)作分享等流程，選擇以整體設(shè)計(jì)步驟為X軸。從這個(gè)矩陣開(kāi)始進(jìn)行發(fā)散，交叉重合的部分思考結(jié)合出的設(shè)計(jì)，再選取其中的亮點(diǎn)向產(chǎn)品方向創(chuàng)新。

（2）梳理亮點(diǎn)。在梳理發(fā)散過(guò)程中可以看出，VR客戶端和pad用移動(dòng)端有相對(duì)創(chuàng)新的亮點(diǎn)，不同于較為傳統(tǒng)的PC端和云端。如果pad端和VR端可以滿足3D建模軟件所需要的性能，這樣的創(chuàng)新就可以被支持。

（3）繼續(xù)探索。針對(duì)每一個(gè)流程步驟，可以聚焦到里面的每一個(gè)分步驟，探索亮點(diǎn)。比如創(chuàng)作階段的流程可以展開(kāi)到具體設(shè)計(jì)到建模的步驟。當(dāng)把步驟進(jìn)行分解之后，可以發(fā)散出各個(gè)階段利用VR的創(chuàng)作優(yōu)勢(shì)。

（4）梳理亮點(diǎn)。在草圖和草模階段，VR內(nèi)直接創(chuàng)作可以節(jié)約物理材料，支持無(wú)死角設(shè)計(jì)不用重復(fù)出圖，幫助立體想象、可視、模擬真實(shí)尺寸體驗(yàn)，打通草圖到建模的鏈路…顛覆草圖到建模階段的設(shè)計(jì)流程，提升整體效率和可能性。

策略2.  逆向思考：程序 / 觀念 / 狀態(tài)

逆向思維締造了許多打破常規(guī)的創(chuàng)意。上一篇我們介紹了在漸進(jìn)式創(chuàng)新中實(shí)用的原理/功能/結(jié)構(gòu)三種逆向思路。這里介紹3類更適用于激進(jìn)式創(chuàng)新的逆向思路和具體的案例，為激進(jìn)式創(chuàng)新賦能。

• 程序或方向逆向 ｜ 顛倒事物發(fā)展變化的構(gòu)成順序、排列位置。

例a. C端服務(wù)直接收費(fèi) -> C端服務(wù)免費(fèi)，其他項(xiàng)盈利

很多產(chǎn)品在收費(fèi)時(shí)直接向C端用戶收取服務(wù)費(fèi)用，但是容易面臨C端有付費(fèi)意愿的用戶量數(shù)不多。不如讓用戶免費(fèi)使用體驗(yàn)服務(wù)，擴(kuò)大用戶留存的基礎(chǔ)上，通過(guò)向B端等有更多支付意愿的商家收取費(fèi)用。QQ、微信等通訊軟件的出現(xiàn)讓用戶免費(fèi)使用通訊、社區(qū)等功能，通過(guò)用戶的留存從其他商業(yè)化項(xiàng)目收費(fèi)，如收取在軟件內(nèi)的廣告費(fèi)用。

例b. 主動(dòng)檢索 -> 算法推薦

以前用戶瀏覽信息的方式，偏重于主動(dòng)搜索需要或感興趣的內(nèi)容，但是檢索流程相對(duì)繁瑣，用戶可能并不夠了解自己的喜好。逆向思路讓用戶被動(dòng)接收信息，由算法基于用戶的瀏覽喜好狀態(tài)進(jìn)行推薦，無(wú)需用戶進(jìn)行檢索即可將信息推送給用戶。短視頻等產(chǎn)品就是通過(guò)算法推薦匹配出用戶感興趣的視頻，讓用戶享受“刷”視頻的過(guò)程。

• 觀念逆向 ｜ 設(shè)計(jì)者反轉(zhuǎn)看待問(wèn)題的觀念，或針對(duì)人們的觀念逆向設(shè)計(jì)。

例a. 少即是多 -> 多才是多

現(xiàn)代主義建筑大師Ludwig Mies Van der Rohe提出“少即是多(Less is more)”的極簡(jiǎn)設(shè)計(jì)理念改變了很多產(chǎn)品和建筑設(shè)計(jì)，之后許多設(shè)計(jì)師都遵循”少即是多原則進(jìn)行設(shè)計(jì)，羅伯特?文丘里 （Robert Venturi）逆向而行從設(shè)計(jì)思路上“反叛”，開(kāi)創(chuàng)了“少則無(wú)聊(Less is bore)”觀念，讓設(shè)計(jì)的建筑更符合街道氛圍和文化。BJARKE INGELS B.I.G 事務(wù)所則喊出了“多才是多(Yes is more)”，設(shè)計(jì)出造型夸張有趣的建筑，并從外觀出發(fā)讓設(shè)計(jì)帶有更多豐富的能力。

例b. 追隨變化 -> 鎖定不變

在日新月異、瞬息萬(wàn)變的互聯(lián)網(wǎng)，很多企業(yè)和產(chǎn)品都在努力擁抱、追隨變化，但很少有人去思考什么是不變的。Amazon（亞馬遜）創(chuàng)始人Devin Beverage在亞馬遜創(chuàng)立之初就選擇思考未來(lái)十年，什么是不變的，并得出了三件極其普通但是消費(fèi)者最核心在意、不會(huì)變化的三件事情：無(wú)限選擇，最低價(jià)格，快速配送。在用戶的底層需求上出發(fā)，并且長(zhǎng)期、持續(xù)地投入讓亞馬遜成長(zhǎng)為現(xiàn)在的頭部企業(yè)，支持經(jīng)典的包括支持自營(yíng)&第三方賣家平臺(tái)（Marketplace）、開(kāi)放給消費(fèi)者的比價(jià)工具、Prime會(huì)員兩日達(dá)、影視服務(wù)等開(kāi)創(chuàng)性產(chǎn)品設(shè)計(jì)。

• 狀態(tài)（過(guò)程）逆向 ｜ 改變現(xiàn)在的狀態(tài)，如正變負(fù)，進(jìn)變退、動(dòng)變靜、硬變軟等等，獲得創(chuàng)新。

例a. 人在路上跑動(dòng) -> 跑步機(jī)跑道帶動(dòng)

過(guò)去跑步都是人在道路上跑動(dòng)鍛煉身體，人動(dòng)路不動(dòng)。但在艷陽(yáng)天、雨天等天氣下在室外的環(huán)境就會(huì)不適合跑步運(yùn)動(dòng)。跑步機(jī)的誕生就讓用戶可以隨時(shí)在室內(nèi)環(huán)境中舒適、不占空間地進(jìn)行運(yùn)動(dòng)，讓“地”動(dòng)起來(lái)，人在原地跑動(dòng)。不但可以調(diào)節(jié)跑步機(jī)跑帶的角度速度等模擬各類環(huán)境，還可以監(jiān)控記錄用戶的跑動(dòng)、健康狀態(tài)，一舉多得。

例b. 人去商店購(gòu)物堂食 -> 外賣快遞送上門(mén)

過(guò)去的購(gòu)物體驗(yàn)基本都依賴用戶到店進(jìn)行。但這樣商店能輻射的客戶范圍會(huì)相對(duì)狹小、用戶也必須出行才能購(gòu)物和享用美食。比起提升到店體驗(yàn)，支持送貨上門(mén)，讓用戶足不出戶體驗(yàn)到購(gòu)物的樂(lè)趣和便捷。不但讓顧客可以享受到更遠(yuǎn)距離、甚至海外的商品，商家同時(shí)可以輻射更遠(yuǎn)距離的顧客，也不用依賴實(shí)體門(mén)店進(jìn)行銷售。

策略3.  多問(wèn)”如果”， What if… 

多問(wèn)些異想天開(kāi)的問(wèn)題，別害怕天馬行空的發(fā)散。我們總是可以把解題思路再聚焦到一個(gè)盒子，所以不用最初就把蓋子蓋上。阿爾伯特?愛(ài)因斯坦甚至說(shuō)過(guò)：“如果一開(kāi)始這個(gè)想法不荒謬，那么它就沒(méi)有希望了?！?在發(fā)散的過(guò)程中要敢于想象發(fā)散，才能帶來(lái)突破式創(chuàng)新。當(dāng)我們想要解決問(wèn)題的時(shí)候可以首先大膽發(fā)問(wèn)、設(shè)想出“如果”的場(chǎng)景后，再去考慮實(shí)現(xiàn)該場(chǎng)景所需要用到的技術(shù)；也可以從技術(shù)出發(fā)，暢想落地場(chǎng)景的“如果“。

對(duì)于市面上一些帶有亮點(diǎn)的產(chǎn)品，我們也可以倒推去思考當(dāng)初設(shè)計(jì)者問(wèn)出的“如果”是什么。這幾年全球都在疫情的不斷反復(fù)中掙扎，我們可以以遠(yuǎn)程工作場(chǎng)景為例，來(lái)思考一些“如果”。

例. 遠(yuǎn)程協(xié)作

• 發(fā)散：如果我們遠(yuǎn)隔萬(wàn)里還能面對(duì)面、身處一個(gè)空間工作交流…

如果遠(yuǎn)程狀態(tài)下我們還可以像在辦公室一樣一起查看模型…

如果在查看模型的基礎(chǔ)上我們還可以調(diào)整、比對(duì)修改方案，及時(shí)看到反饋…

• 結(jié)果：空間感知設(shè)計(jì)評(píng)審

Microsoft Mesh使人們能夠與全息狀態(tài)聯(lián)系，跨空間共享，并從世界上任何地方進(jìn)行協(xié)作。通過(guò)為組織引入支持 Mesh 的混合現(xiàn)實(shí)體驗(yàn)，可以增強(qiáng)虛擬會(huì)議、進(jìn)行虛擬設(shè)計(jì)會(huì)話、遠(yuǎn)程幫助他人以及舉辦沉浸式虛擬會(huì)議，從而大幅提高工作效率。

Mesh通過(guò)允許用戶使用任何設(shè)備在任何位置加入任何位置來(lái)增強(qiáng) 3D 設(shè)計(jì)評(píng)審。無(wú)論是物理存在還是全息，同事都可以實(shí)時(shí)查看和批注 3D 模型。所有內(nèi)容都在設(shè)計(jì)會(huì)話之間持續(xù)存在，因此團(tuán)隊(duì)可以從他們中斷的地方快速開(kāi)始交流理解，激發(fā)創(chuàng)造力。

例. 遠(yuǎn)程培訓(xùn)和維護(hù)

• 發(fā)散：如果維修人員不能上門(mén)工作，是否有人能遠(yuǎn)程教學(xué)我修理電器…

如果維修人員可以遠(yuǎn)程修理我的電器就好了…

如果他們能看到我看到的內(nèi)容，完全基于我的視角指導(dǎo)我…

如果還能在我的視覺(jué)標(biāo)記、說(shuō)明、演示操作方法…

如果在工業(yè)界專業(yè)領(lǐng)域，也能這樣進(jìn)行教學(xué)、監(jiān)督、指導(dǎo)…

• 結(jié)果：遠(yuǎn)程培訓(xùn)和學(xué)習(xí)

Hololens利用AR技術(shù)進(jìn)行遠(yuǎn)程培訓(xùn)，特別是關(guān)于手術(shù)、設(shè)備維護(hù)和交通管制等復(fù)雜主題的培訓(xùn)，很難與講師在同一個(gè)房間，并從多個(gè)角度查看同一組對(duì)象。員工可以通過(guò)全息傳送、全息共享和可視化效果從任何地方一起學(xué)習(xí)，有助于提高虛擬培訓(xùn)的效率，同時(shí)降低差旅和物流成本。

三、激進(jìn)創(chuàng)新決策 / 策略三則

Warren Bennis說(shuō)，“創(chuàng)新—任何新想法—根據(jù)定義，一開(kāi)始都不會(huì)被接受。在創(chuàng)新被組織接受和內(nèi)化之前，需要反復(fù)嘗試、無(wú)休止的演示、單調(diào)的排練。這需要勇敢的耐心?！奔みM(jìn)式創(chuàng)新需要經(jīng)過(guò)的等待和挑戰(zhàn)可能非常漫長(zhǎng)，在這個(gè)過(guò)程中，更需要謹(jǐn)慎地篩選想法和推進(jìn)。下面的三則方法可以幫助我們?cè)跊Q策中減少試錯(cuò)成本。

策略1.  考慮實(shí)現(xiàn)時(shí)間和所需要的技術(shù)系統(tǒng)。

九宮格視窗可以幫助進(jìn)一步?jīng)Q策，將創(chuàng)意靈感在“系統(tǒng)結(jié)構(gòu)”和“實(shí)現(xiàn)時(shí)間”兩個(gè)維度進(jìn)行排列選擇，之后根據(jù)需求的資源和達(dá)成所需時(shí)間進(jìn)行選擇和規(guī)劃。突破式的創(chuàng)新往往需要大量的時(shí)間來(lái)完善技術(shù)和系統(tǒng)，所以在篩選想法的過(guò)程中結(jié)合這兩個(gè)因素，可以保證持續(xù)性的創(chuàng)新。

例. Netflix播放創(chuàng)新

現(xiàn)在我們熟知的Netflix網(wǎng)飛是一家會(huì)員訂閱制的流媒體播放平臺(tái)。

• DVD及藍(lán)光租賃提供商

最初在1997年剛成立時(shí)，Netflix曾經(jīng)是一家在線DVD及藍(lán)光租賃提供商。當(dāng)時(shí)DVD技術(shù)剛誕生，輕質(zhì)的材料代替了原本笨重的VHS電影格式存儲(chǔ)，讓郵寄DVD成為了可能。Netflix創(chuàng)新地使用線上下單、往返郵寄的租賃模式，讓用戶通過(guò)免費(fèi)快遞信封租賃及歸還Netflix庫(kù)存的大量影片實(shí)體光盤(pán)，并以此打敗了線下租賃連鎖店百視達(dá)。

• 付費(fèi)訂閱流媒體

2006年在線點(diǎn)播技術(shù)興起，隨著新技術(shù)的出現(xiàn)Netflix 轉(zhuǎn)向通過(guò)互聯(lián)網(wǎng)流式傳輸視頻，提供更廣泛的內(nèi)容選擇，并且可以無(wú)限觀看、點(diǎn)播、低價(jià)，高質(zhì)量的影視內(nèi)容，并最終吸引了對(duì)手Blockbuster 的核心客戶。Netflix的付費(fèi)訂閱模式和Apple的iTune下載、Youtube的免費(fèi)模式成為當(dāng)時(shí)最熱門(mén)的三個(gè)細(xì)分市場(chǎng)。

Netflix的創(chuàng)新幫助他們?cè)谑袌?chǎng)上站穩(wěn)腳跟并不斷突破，但如果在1997年Neflix就把流媒體視頻作為目標(biāo)進(jìn)行創(chuàng)新、不考慮當(dāng)時(shí)的現(xiàn)實(shí)技術(shù)和研發(fā)時(shí)長(zhǎng)，那公司可能在漫長(zhǎng)的科技發(fā)展等待中生存，也就沒(méi)有后來(lái)的故事了。所以對(duì)于突破性的創(chuàng)意，按照時(shí)間維度、技術(shù)實(shí)現(xiàn)給出逐步創(chuàng)新的節(jié)奏，通常能更好地幫助產(chǎn)品持續(xù)創(chuàng)新。

策略2.  考慮可推動(dòng)性&可實(shí)現(xiàn)性

如果你的創(chuàng)意需要在大公司里進(jìn)行落地和推進(jìn)，可以使用“傳播速度和可實(shí)現(xiàn)性”矩陣逐步選擇，第一步聚焦適應(yīng)速度和傳播速度，將決策者對(duì)產(chǎn)品的影響也放入考察。第二步，審查可實(shí)現(xiàn)性和財(cái)務(wù)可行性，之后做出相應(yīng)選擇和推動(dòng)。

這個(gè)矩陣也可以用于對(duì)外部環(huán)境的判斷，在第一步驟中考慮想法在文化、政治、地緣等因素下的適應(yīng)和傳播速度，在第二步驟中考慮市場(chǎng)技術(shù)或包容度是否能支持該想法的推動(dòng)。

例. 出行產(chǎn)品的本地化決策

以出行領(lǐng)域的產(chǎn)品設(shè)計(jì)為例，我們可以看看在這個(gè)領(lǐng)域里一些創(chuàng)新決策考慮。我們熟悉的Uber，滴滴等打車平臺(tái)通過(guò)利用空閑的私家車來(lái)接送乘客，降低了打車花費(fèi)、難度和空閑汽車的利用率，顛覆了原本的出租車打車市場(chǎng)。而在決策想法時(shí)，這類出行產(chǎn)品需要考慮當(dāng)?shù)氐木唧w交通、運(yùn)輸工具、出行狀態(tài)等現(xiàn)實(shí)因素進(jìn)行推送。

• UberEats在美國(guó)部分城市用汽車送外賣

Uber優(yōu)步是起源美國(guó)的打車平臺(tái)，2016年該品牌在美國(guó)本土開(kāi)啟外賣業(yè)務(wù)。當(dāng)時(shí)中國(guó)已經(jīng)成熟的外賣業(yè)務(wù)主要是由騎手騎電瓶車來(lái)完成外賣服務(wù)，但在美國(guó)一些城市自行車作為工具的出行道路十分有限，人們居住的距離也相對(duì)遙遠(yuǎn)。所以Uber從他們已有的打車系統(tǒng)上汲取了思路，在這些城市讓司機(jī)用汽車送外賣解決了路程遙遠(yuǎn)的問(wèn)題，同時(shí)讓他們可以有機(jī)結(jié)合接送乘客和接送外賣的訂單，系統(tǒng)規(guī)劃路線后不但提高效率，也讓司機(jī)增加了收益。

• Gojek在印尼用摩托車送乘客

2015年，當(dāng)來(lái)自美國(guó)的Uber和來(lái)自新加坡的打車平臺(tái)Grab在印尼打得火熱、且都使用出租車和私家車作為接送乘客的交通工具時(shí)，印尼市場(chǎng)的Gojek則聚焦印尼的國(guó)情，把打車平臺(tái)的思路運(yùn)用在打摩的上，規(guī)范化摩的市場(chǎng)。在交通嚴(yán)重?fù)頂D的印尼，摩的的快速穿梭遠(yuǎn)比汽車出行更適合本土，這讓Gojak成為了印尼的第一大出行平臺(tái)，并在后來(lái)拓展出龐大的本地生活產(chǎn)品體系。

策略3.   小心鴻溝

“如果解決方案意味著與他們習(xí)慣接受的標(biāo)準(zhǔn)有太大的偏離，那么成年公眾的口味不一定準(zhǔn)備好接受符合他們要求的合乎邏輯的解決方案。” ——Raymond Loewy，著名的可口可樂(lè)瓶、殼牌石油標(biāo)志背后的工業(yè)設(shè)計(jì)師這樣說(shuō)。

如果你的創(chuàng)意需要很多解釋，大量的培訓(xùn)和“幫助”功能，那么這樣的設(shè)計(jì)可能過(guò)于先進(jìn)或復(fù)雜，不易被大眾理解。產(chǎn)品創(chuàng)意在初期會(huì)輻射到的創(chuàng)新者、早期使用者與普通使用大眾間可能存在著差距，在一些案例中，早期使用者覺(jué)得有趣認(rèn)可的解決方案并不被大眾所買單，所以在選擇創(chuàng)意和推進(jìn)過(guò)程中，設(shè)計(jì)師也要考慮這種差距。

例. Airbnb如何更好地銜接早期大眾

Airbnb將尋求經(jīng)濟(jì)實(shí)惠住宿地點(diǎn)的旅行者與想要租房或備用房間的人聯(lián)系起來(lái)，這個(gè)想法現(xiàn)在已經(jīng)被大眾熟悉。但在2009年業(yè)務(wù)的第一年，這個(gè)創(chuàng)意是非常具有創(chuàng)新性的，尚不為大眾熟知。

• 好創(chuàng)意卻不得市場(chǎng)認(rèn)可

當(dāng)時(shí)雖然早期使用者的反饋非常好，但團(tuán)隊(duì)仍然面臨著嚴(yán)峻的用戶增長(zhǎng)和收入挑戰(zhàn)，甚至一度每周只賺200美元。為什么這樣一個(gè)對(duì)租客和出租者都互惠互利的創(chuàng)新，卻不能在市場(chǎng)上得到良好的反饋呢？一天下午，團(tuán)隊(duì)正在與Paul Graham一起思考紐約市的搜索結(jié)果，試圖弄清楚為什么他們?cè)鲩L(zhǎng)。Paul Graham給出了一個(gè)簡(jiǎn)單的建議：前往紐約，租一臺(tái)相機(jī)，花一些時(shí)間與客戶一起列出他們的房產(chǎn)，并用美麗的高分辨率照片取代業(yè)余攝影。因此，團(tuán)隊(duì)成員飛往紐約，與Airbnb在網(wǎng)站上列出房產(chǎn)的客戶會(huì)面、拍攝高質(zhì)量照片。結(jié)果收入迅速增加了100%（400美元）。

• 照片減少溝通鴻溝

究其原因，其實(shí)是雖然當(dāng)時(shí)Airbnb的想法已經(jīng)在市場(chǎng)上獨(dú)具突破性，但團(tuán)隊(duì)沒(méi)有考慮到早期使用者和早期大眾之間的差距。早期使用者往往樂(lè)于嘗試新事物且有很強(qiáng)的需求（特別體驗(yàn)、更低成本出行等），而早期大眾會(huì)和他們現(xiàn)有的酒店體驗(yàn)進(jìn)行比較，安全、正規(guī)、優(yōu)質(zhì)、溫馨的入住體驗(yàn)是他們的強(qiáng)需求，那些非高清、非精美照片很難在第一印象上說(shuō)服早起大眾這些品質(zhì)。彌補(bǔ)上這個(gè)預(yù)期差距后，也就有更多的用戶愿意嘗試了。在后續(xù)的迭代中，Airbnb也也在系統(tǒng)改進(jìn)上不斷強(qiáng)化安全、正規(guī)，更好地滿足用戶。

結(jié)語(yǔ)

激進(jìn)式創(chuàng)新往往依賴團(tuán)隊(duì)基于用戶需求、市場(chǎng)、技術(shù)等多維度內(nèi)容的理解。在創(chuàng)新過(guò)程中，設(shè)計(jì)師更多了解相關(guān)領(lǐng)域和創(chuàng)意方法就能更有益啟迪想法。希望本文激進(jìn)篇、上文漸進(jìn)篇的設(shè)計(jì)策略可以幫助設(shè)計(jì)師們更好地創(chuàng)新發(fā)散。

創(chuàng)新思維可以被學(xué)習(xí)累積，設(shè)計(jì)師可以保持多看多思考的習(xí)慣，從其他優(yōu)秀的設(shè)計(jì)和產(chǎn)品上反推創(chuàng)意思路。設(shè)計(jì)創(chuàng)新時(shí)要相信推進(jìn)的過(guò)程，如果對(duì)題目感到無(wú)從下手，相比糾結(jié)現(xiàn)有思路是不是最優(yōu)解，不如用文中的方法把想法全部寫(xiě)下來(lái)并原型嘗試。許多時(shí)候我們離優(yōu)秀的想法只是一步之遙，也許轉(zhuǎn)個(gè)彎就柳暗花明了。

1. 《Creative Strategies》by Fridolin Beisert (Author), Jessie Kawata (Artist)
2. 《The Design Thinking Playbook: Mindful Digital Transformation of Teams, Products, Services, Businesses and Ecosystems》Michael Lewrick（Author)，Nadia Langensand（Artist）
3. 《Zero to One: Notes on Startups, or How to Build the Future》by Peter Thiel, Blake Masters
4. 《Thinking, Fast and Slow》Daniel Kahneman
5. 《Cross the Chasm》Geoffrey A. Moore
6. 《The Innovator‘s Dilemma》Clayton M. Christensen
7. 《Lean Startup》Eric Ries
8. What are 5 Whys? | Interaction Design Foundation (IxDF)
9. https://cwodtke.medium.com/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8
10. Types of Innovation – The Ultimate Guide with Definitions and Examples
11. The Design Process Simplifed – Design Sojourn
12. https://medium.com/user-experience-design-1/10-design-principles-every-designer-should-know-a03e12f8deca
13. https://blog.prototypr.io/shaping-user-behaviour-is-better-than-changing-them-47997f36e71
14. Airbnb 2021 Release: 100+ innovations and upgrades across our entire service
15. Clipdrop – Copy and Paste reality with AR + ML | Product Hunt
16. https://dodo-africa.medium.com/how-design-turned-airbnb-from-a-dying-startup-to-a-billion-dollar-business-b7f711e9ef73
17. https://docs.microsoft.com/zh-cn/mesh/get-started

作者：ISUX設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)策略｜源源不斷的創(chuàng)新思路（激進(jìn)篇）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

作者：蔥爺

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》logo設(shè)計(jì)除了用首字母，還能怎么做？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

共識(shí)目標(biāo)大致分為兩方面，拉齊理解和對(duì)齊標(biāo)準(zhǔn)。

拉齊理解，減小彼此間的認(rèn)知差距。總體上，我們需要拉齊彼此對(duì)度量長(zhǎng)短期價(jià)值和目標(biāo)的理解；到各執(zhí)行階段，則需要拉齊對(duì)所需資源和預(yù)期輸出的理解。

對(duì)齊標(biāo)準(zhǔn)，選擇團(tuán)隊(duì)認(rèn)同的維度指標(biāo)與監(jiān)測(cè)方式。個(gè)體對(duì)體驗(yàn)優(yōu)劣的主觀感受和不同崗位職責(zé)的關(guān)注視角不盡相同?？傮w上，我們需要以產(chǎn)品定位規(guī)劃為指導(dǎo)，結(jié)合客觀資源情況選擇適合的衡量標(biāo)準(zhǔn)。

如上圖舉例，一個(gè)對(duì)內(nèi)的商戶操作系統(tǒng)與其他競(jìng)對(duì)在系統(tǒng)操作層面的比較意義不大，度量模型中用于和同類產(chǎn)品對(duì)標(biāo)的功能完整性的參考價(jià)值降低，則可以考慮暫不納入監(jiān)測(cè)維度。

確定維度后的下探監(jiān)測(cè)指標(biāo)是共識(shí)最主要的內(nèi)容。如上舉例，當(dāng)前業(yè)務(wù)首要關(guān)心產(chǎn)品SOP（Standard Operating Procedure 標(biāo)準(zhǔn)操作程序）“使用率”，而這項(xiàng)指標(biāo)與已確認(rèn)的參與度指標(biāo)定義極為貼合，那我們就不妨直接將該項(xiàng)做為參與度內(nèi)衡量指標(biāo)優(yōu)先接入。

二、共識(shí)內(nèi)容

到了具體的共識(shí)內(nèi)容，我們?cè)侔戳㈨?xiàng)之前、項(xiàng)目執(zhí)行，項(xiàng)目復(fù)盤(pán)的階段順序聊聊。

1、立項(xiàng)之前

01.確認(rèn)要做體驗(yàn)度量嗎？
體驗(yàn)度量模型從搭建、驗(yàn)證，到持續(xù)分析應(yīng)用需要一個(gè)漸進(jìn)的過(guò)程。充足的數(shù)據(jù)和穩(wěn)定的調(diào)研機(jī)制是良好應(yīng)用模型的基礎(chǔ)。處于探索與深化初期的產(chǎn)品調(diào)整較為頻繁，數(shù)據(jù)資源可能也有待完善。這一階段體驗(yàn)度量理論方法或可以輔助完善線上埋點(diǎn)、建立定期走查、用戶調(diào)研等機(jī)制，但對(duì)度量前期數(shù)據(jù)可用于分析的價(jià)值預(yù)期要適度降低。

02.首期度量的范圍和預(yù)期？

首因效應(yīng)的影響不容忽視。雖然第一印象并非總是正確的，但卻是最鮮明、最牢固的，并且決定著以后雙方交往的進(jìn)程。

如上說(shuō)到，度量需要一個(gè)漸進(jìn)的過(guò)程。我們可以選擇由局部擴(kuò)充至整體，也可以由整體完善至局部。首期度量就面臨著這樣的選擇，當(dāng)然選擇的范圍也對(duì)應(yīng)著不同的預(yù)期。

由局部擴(kuò)充至整體，圍繞業(yè)務(wù)當(dāng)前需求，圈定最小度量范圍。這樣選擇，一方面可以適度減低試跑數(shù)據(jù)的成本；另一方面，首期度量結(jié)果還不便向前比對(duì)應(yīng)用分析，但這不妨礙調(diào)研監(jiān)測(cè)到的信息為業(yè)務(wù)當(dāng)前需求提供輔助價(jià)值。需要注意的是，雖然選擇了由局部開(kāi)始，但要始終遵循度量模型既定的統(tǒng)一框架，不能過(guò)分定制化。

由整體完善至局部，先監(jiān)測(cè)宏觀指標(biāo)再逐步完善下探。這樣選擇，一般可以快速選定已處于長(zhǎng)期監(jiān)測(cè)的指標(biāo)接入系統(tǒng)，但也因指標(biāo)較為宏觀，初期不免暫時(shí)無(wú)法解釋數(shù)據(jù)現(xiàn)象，就需要多期的下探追蹤來(lái)定位原因。

2、項(xiàng)目執(zhí)行

01.指標(biāo)統(tǒng)計(jì)

這部分是共識(shí)內(nèi)容的主體，具體指標(biāo)選取與統(tǒng)計(jì)方式我們?cè)凇扼w驗(yàn)度量經(jīng)驗(yàn)分享：如何搭建體驗(yàn)指標(biāo)模型?》中進(jìn)行了梳理介紹。這里補(bǔ)充兩個(gè)共識(shí)小方法，準(zhǔn)備詳細(xì)參考資料和選取整合已有資源。

對(duì)應(yīng)每次共識(shí)的內(nèi)容，參考資料可以有效提高溝通效率?！罢驹谇叭说募绨蛏稀痹诰唧w可感的案例指標(biāo)基礎(chǔ)上調(diào)整，遠(yuǎn)比憑空討論有效。

選取整合已有資源，“避免重復(fù)造輪子”。舉例滿意度維度，如此前已建立了相似的NPS調(diào)研制度，那便不必費(fèi)時(shí)費(fèi)力重新發(fā)調(diào)研問(wèn)卷或是開(kāi)發(fā)線上場(chǎng)景化調(diào)研能力。接入現(xiàn)有調(diào)研數(shù)據(jù)，選擇符合模型需要的數(shù)據(jù)接入或許更經(jīng)濟(jì)適用。然后，在此基礎(chǔ)上再去優(yōu)化指標(biāo)細(xì)項(xiàng)與收集方式。

02.分析提煉

指標(biāo)選取和統(tǒng)計(jì)僅僅是準(zhǔn)備，怎么應(yīng)用現(xiàn)有食材炒出好吃的“菜”，目前依舊需要人工分析提煉。

結(jié)合業(yè)務(wù)所需，明確重點(diǎn)分析方向，深挖原因是收獲滿意結(jié)果的基礎(chǔ)。面對(duì)大量的數(shù)據(jù)呈現(xiàn)，雖不可預(yù)知提煉的結(jié)果，但唯有聚焦能減少迷失，盡量避免最終呈現(xiàn)結(jié)果過(guò)于泛泛。
分析結(jié)果往往包含需求洞察、痛點(diǎn)定位等多條信息，整體打包解決稍不實(shí)際。為跟進(jìn)度量結(jié)果逐步落地，需明確優(yōu)先級(jí)共識(shí)，推動(dòng)度量不僅僅停留在“報(bào)告”的階段。

3、項(xiàng)目復(fù)盤(pán)

01.如何評(píng)定度量的投入產(chǎn)出？

每期度量復(fù)盤(pán)，除共識(shí)達(dá)成情況和后期調(diào)整外，團(tuán)隊(duì)內(nèi)對(duì)度量本身的投入產(chǎn)出評(píng)定常常有被忽略。

因度量周期較長(zhǎng)，定位問(wèn)題也較寬泛，即便已經(jīng)定義了問(wèn)題優(yōu)先級(jí)，通常狀況下也不便短期內(nèi)解決，有些方向性的洞察也會(huì)分散應(yīng)用到更多常規(guī)需求上，度量的價(jià)值也就沒(méi)能被很好的跟蹤記錄下來(lái)。這一方面我們的經(jīng)驗(yàn)也稍顯欠缺，與需求綁定似乎還是不夠明確的解決方案。拿出來(lái)和大家分享，期待收獲更多的討論。

三、共識(shí)方式

最后，簡(jiǎn)要聊聊共識(shí)的態(tài)度與形式。

中立的態(tài)度是溝通的基礎(chǔ)。每個(gè)環(huán)節(jié)共識(shí)前，可以先單獨(dú)收集團(tuán)隊(duì)成員的思路想法，引導(dǎo)大家放心分享自己的見(jiàn)解，提高收集效率，而不需當(dāng)即討論合適與否。

內(nèi)部訪談，基于團(tuán)隊(duì)成員職責(zé)差異，制定訪談大綱與溝通順序，為方便更高效的溝通與記錄。內(nèi)部溝通在達(dá)成指標(biāo)統(tǒng)計(jì)共識(shí)的基礎(chǔ)上，更可以幫我們對(duì)產(chǎn)品表象之下的業(yè)務(wù)邏輯有更加深入的理解。

穩(wěn)定的節(jié)奏，明確每一階段的待辦與負(fù)責(zé)人，定期組會(huì)對(duì)齊進(jìn)度，定期匯總小結(jié)，逐層匯報(bào)共識(shí)，得到更廣泛團(tuán)隊(duì)成員的認(rèn)可。

以上，便是對(duì)往期度量共識(shí)中非理論方法部分的梳理。如何溝通沒(méi)有標(biāo)準(zhǔn)，共識(shí)程度也難以衡量。期待大家提出寶貴意見(jiàn)，共同討論如何將度量的理論方法更好地應(yīng)用于業(yè)務(wù)實(shí)踐。

作者：李明玥、賀紫蒙

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》體驗(yàn)度量經(jīng)驗(yàn)分享：如何溝通共識(shí)?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司

一、暗色模式下飽和度不宜過(guò)高

高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來(lái)說(shuō)，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶感到放松?；诖?，在設(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。

(彩云注：這里的200-500彩云去查了不少資料，但沒(méi)有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找)

二、 按鈕要有優(yōu)先級(jí)

在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒(méi)在這些按鈕中，讓用戶不知所措。

三、簡(jiǎn)化不必要的動(dòng)詞

沒(méi)必要在菜單上增加動(dòng)詞和短語(yǔ)，用最少的信息寫(xiě)清楚功能就足夠讓用戶理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無(wú)關(guān)緊要的詞，這樣才不會(huì)影響用戶體驗(yàn)。

四、字體尺寸類別越少越好

你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來(lái)會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說(shuō)明文字（8px），這些尺寸都是以2為倍數(shù)的。

五、不要混用圖標(biāo)風(fēng)格

盡管我知道要做好圖標(biāo)一致性，但在實(shí)際工作中依然經(jīng)常犯錯(cuò)。很多設(shè)計(jì)師經(jīng)常用不同風(fēng)格的圖標(biāo)混在一起，這樣會(huì)讓整個(gè)UI界面的設(shè)計(jì)顯得很不成熟。圖標(biāo)是為了讓用戶更有效率地理解事物。在使用圖標(biāo)的時(shí)候一定要注意圖標(biāo)的一致性，尤其是一些是一些風(fēng)格細(xì)節(jié)。

這里也跟大家分享2個(gè)我自己常用的figma圖標(biāo)庫(kù)：

1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

六、不同背景下的顏色飽和度適當(dāng)微調(diào)

通常情況下，我們會(huì)認(rèn)為一個(gè)顏色在深色模式和亮色模式下是用的同一個(gè)顏色值，但這其實(shí)是錯(cuò)誤的。一個(gè)顏色在亮色模式下看起來(lái)非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問(wèn)題最好辦法是使用2套不同飽和度的顏色。

七、新手引導(dǎo)多給用戶自主權(quán)

App的新手引導(dǎo)決定了用戶第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開(kāi)需要哪些具體步驟，增加”跳過(guò)“和前后移動(dòng)查看的能力對(duì)新用戶來(lái)說(shuō)非常重要。

八、在圖片上增加疊加層

許多網(wǎng)站和App都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒(méi)掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。

九、信息部分露出

對(duì)于一些大屏設(shè)備來(lái)說(shuō)，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來(lái)說(shuō)，盡量通過(guò)設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì)UI和UX方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶清晰的知道所有內(nèi)容。

十、拆分大段文字

為了讓用戶聚焦閱讀，應(yīng)盡量避免使用大段的長(zhǎng)/寬行。保持短句和簡(jiǎn)潔能夠增加內(nèi)容的可讀性。（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來(lái)描述，很可能直接勸退面試官）

十一、Z字形原理

Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過(guò)這個(gè)原理我們知道，用戶在內(nèi)容上的視線是沿著Z字形來(lái)閱讀的，所以遵循這一原理設(shè)計(jì)你想要核心表達(dá)的內(nèi)容。

十二、擴(kuò)大可點(diǎn)擊范圍

擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶點(diǎn)擊困難，造成流失。

十三、盡量使用簡(jiǎn)潔的圖標(biāo)

避免使用花俏和俗氣的圖標(biāo)，它們會(huì)讓整個(gè)設(shè)計(jì)顯得非常不成熟，同時(shí)也是很難理解的。用上更簡(jiǎn)單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。（彩云注：當(dāng)然越簡(jiǎn)單的圖標(biāo)其實(shí)想畫(huà)出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營(yíng)類的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）

十四、正確的文案表達(dá)

選錯(cuò)文案，會(huì)讓人們對(duì)于任務(wù)缺乏興趣，根據(jù)上下文使用更合適的詞組。

十五、考慮手勢(shì)操作

輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡(jiǎn)潔并且也能順利地完成既定任務(wù)。

十六、展示部分文案

在探索酒店、目的地甚至是閱讀任何文章時(shí)，用戶經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長(zhǎng)文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。

十七、接近法則

”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開(kāi)的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來(lái)定）

十八、文字控件可視化

在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。

十九、占位符要接近要填寫(xiě)內(nèi)容

對(duì)一些人來(lái)說(shuō)容易理解的東西，對(duì)某些人來(lái)說(shuō)可能不是。因此，最好使用示例占位符來(lái)解釋輸入字段，這可以防止用戶在填寫(xiě)內(nèi)容時(shí)出錯(cuò)。

二十、系列位置效應(yīng)

根據(jù)”系列位置效應(yīng)“，心理傾向于記住列表的第一項(xiàng)和最后一項(xiàng)，而不是中間項(xiàng)。因此，在任何App中設(shè)計(jì)導(dǎo)航時(shí)，根據(jù)應(yīng)用的上下文保持最左和最右的選項(xiàng)。例如instagram，最左邊是”首頁(yè)“，而最右邊是”用戶“。（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開(kāi)頭的內(nèi)容，也叫做首因效應(yīng)或者首位效應(yīng)；更容易記住末尾的內(nèi)容，就叫近因效應(yīng)。）

二十一、減少點(diǎn)擊次數(shù)

在設(shè)計(jì)任何體驗(yàn)時(shí)，點(diǎn)擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計(jì)用戶需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過(guò)程。簡(jiǎn)化過(guò)程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。）

二十二、少即是多

為了使內(nèi)容突出，沒(méi)有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶對(duì)內(nèi)容的注意力。

二十三、留白定義重點(diǎn)

留白在設(shè)計(jì)中非常重要，太少或者沒(méi)有留白會(huì)使得設(shè)計(jì)非常混亂。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。

二十四、別讓用戶閑著

根據(jù)多爾蒂閾值(Doherty Threshold)這個(gè)理論：”系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率?！?。因此，我們可以使用動(dòng)畫(huà)、圖像甚至文本來(lái)保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）

作者：彩云Sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》用上這24個(gè)UI體驗(yàn)優(yōu)化經(jīng)驗(yàn)，果然做出來(lái)的設(shè)計(jì)更高級(jí)了！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ì)公司