提綱：

1、為什么用戶感覺復雜

2、如何簡化概念，降低認知成本

3、如何讓流程簡短高效

4、如何簡化頁面信息布局

5、如何讓操作更輕松

6、結語

一、為什么用戶感到復雜

你是否曾收到過類似的反饋：

“這文案是什么意思？”、“這能干什么？我需要干什么”、“那個功能在哪里？我找不到”、“要設置這么多項，好麻煩啊”、“這不能拖動嗎？”…

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

1、概念復雜

導致用戶感覺產品復雜的其中一個主要原因是：用戶難以理解產品的概念模型。概念模型指事物的基礎定義及行為模式。（例如：汽車，一種在陸地上行駛的交通工具。通常需要司機駕駛，需要消耗汽油… ）用戶根據概念模型對事物的行為進行預測，構建出自身的心理模型。

因此，當產品沒有清晰、準確地傳達出概念模型，將導致用戶產生錯誤的心理模型。用戶需要在大量探索過程中，逐步糾正自己的想法，最終才能了解產品實際的概念模型。

另外，根據「雅各布定律」和「設計心理學2：與復雜共存」，用戶基于以往積累經驗去理解新事物，即在使用產品前已構建心理模型。而當產品的概念模型與用戶的心理模型不匹配時，用戶在使用產品的過程中將持續產生認知沖突，也將給用戶帶來巨大的認知成本。尤其對于傳統工具型產品，顛覆型的概念模型，反而提高用戶的認知成本，讓用戶感到復雜難懂。

2、流程復雜

工具型產品的流程主要分為兩方面：單功能使用流程、多功能組合使用流程。

在單功能使用流程方面，難免會遇到一些功能在生效前，需要經過多個設置步驟的情況。雖然環環相扣的流程能夠降低產品的出錯概率，但卻會給用戶帶來更多的成本。對于每個步驟，用戶都需要經歷「理解」-「操作」-「反饋」的環節。在一些情況下用戶甚至不堪忍受，直接放棄使用功能。例如，在Airtable中創建甘特視圖，需要經歷3步才能完成配置，查看到效果。對于一些抱著嘗試心態的新手用戶來說，這是難以接受的體驗：在還沒理解功能的作用效果前，就要經歷如此復雜的流程。

而多功能組合使用流程方面，工具型產品在產品功能設計層面，往往將功能的顆粒度設計得相當精細，以靈活滿足各種場景需要。就Excel中的單元格而言，可設置單元格字體、單元格背景、單元格邊框。但如此精細的功能設計將導致，若用戶需要簡單實現整體的目標效果時，其操作流程就變得十分的冗長。甚至在一些需要重復設置的場景下，工作量將幾何級數地增長，讓用戶的工作流程將變得極其復雜。

3、界面復雜

大多數工具型產品都希望能在一個界面讓用戶完成所有任務，卻忽略了用戶在現實場景下的使用流程。通常一個任務完成的前提是，需要按照一定的步驟完成若干個細項任務。若無法聚焦于每一個個細項任務，而需要耗費大量的時間精力來排除其他信息的干擾，則會產生“注意力被分散”、“太復雜”等體驗感受，導致最終任務完成難度增加。

對用戶來說，界面內的信息越多負擔就越大。工具型產品通常伴隨數量眾多的功能和選項，一味的平鋪功能，只為了展示自身的功能多樣性，缺乏合理的組織布局，導致用戶需要在幾十甚至上百個選項中進行選擇，則會大大降低用戶使用效率。

4、操作復雜

設計者在不考慮具體操作場景的前提下，不同功能均使用同一種交互方式，名義上為了讓用戶降低學習成本，但實際上卻是不負責任地將復雜的理解過程轉移給了用戶。對于用戶而言，復雜的操作可以分為兩種：一種是「步驟復雜」，例如需要多次點擊、頁面跳轉、設備切換等；另外一種則是「認知復雜」，例如交互方式與心理預期不匹配，需用戶自行轉換。無論是哪種，對于工具型產品而言都是災難的。

除此之外，缺乏及時的反饋也會給用戶帶來不必要的麻煩。用戶需要反復操作比操作中的冗余更可怕，就像高速公路的減速帶，不斷降低用戶的效率。

二、如何簡化概念，降低認知成本

1、隱喻、類比已有事物

當產品的概念模型越趨近于用戶的心理模型時，用戶就越感覺產品容易理解和使用，所要求的使用能力和學習成本就越低。而用戶心理模型是根據用戶的目標，以及其過往的經驗構成的。因此在設計產品的概念模型時，應盡量使用隱喻、類比的方式，讓產品的文案概念及交互行為模式）與用戶所熟知事物相近。從而讓用戶建立聯想，激活行為記憶，降低認知探索成本。

HyperCard，蘋果的早期時間的一款腳本系統。它以「Card」對產品進行命名，同時在產品交互形態上以一疊卡片的形態呈現。這讓用戶很容易就聯想到現實生活中的卡片小冊子，進而快速地了解到產品的大致行為模式。

需要注意的是，傳統工具型產品的用戶往往已被已有產品教育，積累了一定的使用經驗、習慣。對于此類產品的概念模型簡化應慎重考慮，因為用戶所建立的心理模型是較難改變的，顛覆性的變化會讓用戶之前付出的學習成本付諸東流。此時可嘗試用戶的其他感知層面切入（流程、原型、操作），以探索簡化的可能。

2、巧用大白話

在實際業務場景中，難免會遇到概念新穎、邏輯復雜的產品功能。由于用戶從未曾接觸過類似的事物，未建立起相應的心理模型。在設計產品概念時也就難以使用隱喻、類比的方式來降低產品的復雜度。此時可采用「目標導向」的設計方法，幫助用戶快速理解產品功能。因為用戶除了基于過往經驗建立心理模型，還可根據目標而對產品的行為模式做預測。

與其生搬硬套地創造概念，不如在合適的使用場景下，使用目標導向的大白話，清晰的傳達出功能的目標效果。讓用戶快速了解產品功能的目標效果，減少全新概念的理解成本。

例如，在交互原型設計中，按鈕往往存在多個狀態（默認態、懸停態、點擊態、禁用態）。Figma對其賦予概念“變體（Variants）”，用戶難以對此概念產生目標效果的聯想，無法建立起對應的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目標效果的大白話“組件狀態”。

三、如何讓流程簡短高效

1、快速、直觀呈現效果

對于工具型產品來說，效果直觀是非常必要的。一來能讓用戶的探索快速獲得反饋，降低用戶的理解成本。二來能帶來更加輕量的操作體驗，鼓勵用戶探索，給予用戶充分的掌控感。工具型產品的設計者應以此作為設計理念之一。但難免會遇到產品功能的邏輯流程較為復雜，需要經歷多個環環相扣步驟的情況。而研發者往往更關注與代碼的邏輯及可維護性，更加推薦邏輯嚴謹但流程冗長的設計。這時設計者應堅守設計理念，不斷在用戶體驗與功能邏輯中尋找平衡，貫徹落實設計理念。

對于冗長的流程，設計者可通過以下方式解決：

1.根據場景自動化配置

良好的產品應該是聰明、高情商的，能夠根據用戶的實際情況進行自動化的配置，以減少用戶操作。在進行自動化配置時，應謹慎梳理清楚用戶的所有場景，以及每種場景意圖，避免過度聰明，導致畫蛇添足。

例如，在Notion中可一鍵創建Timeline視圖，無需用戶進行任何配置。因為其做了場景自動化配置處理：自動配置所需要的字段。

2.清晰的修改配置入口

在進行自動化配置后，不可避免可能存在場景理解錯誤的情況，導致自動配置的結果不符合用戶實際情況。此時應提供清晰的修改配置入口，例如在用戶可發現錯誤的地方中提供入口，允許用戶在發現錯誤后即可發起修改。

3.異常后置處理，先讓用戶用起來

不應要求用戶在功能生效前處理完所有異常。因為對于每一個步驟，用戶都要付出理解及操作成本。尤其在處理異常情況時，用戶需要耗費巨大的成本，極有可能因阻礙過大，從而放棄使用功能。設計者應將異常后置，確保用戶能都快速查看功能效果并使用起來。對于異常的問題，應允許用戶后續持續處理，不阻斷功能的使用。

例如，在Figma中導入sketch文件會遇到，多種格式適配問題。但不影響導入流程以及FIigma的正常使用，用戶可以在倒入后在對異常進行處理。

2、基于目標組合功能，一鍵快速設置

一般來說，工具型產品服務的用戶群體較廣，需要滿足豐富的個性化需求。在產品功能設計上，功能的顆粒度較小，能支持精細化的配置。這樣導致用戶需要實現組合的目標效果時，需要執行多個功能配置，整體的配置流程較為冗長、復雜。設計者在設計工具型產品時，除了要考慮單個功能的使用體驗，也要從用戶目標出發，全局考慮用戶使用產品的整體流程體驗。

如何既能保持產品的「靈活度」以滿足豐富的場景，又能減少整體操作流程，提升用戶效率?！敢绘I操作」及「自定義腳本」是較為有效的方法。

1.一鍵操作

基于用戶的目標，可以對一些列相關的功能進行組合，允許用戶一鍵設置，快速達到目標效果。同時應存在更多配置的入口，允許進階用戶進行更加詳細的配置。例如，Keynote中可對文本框進行快速樣式設置，設置內容包含字體顏色、文本框背景顏色。當用戶需求較為簡單時，只需設置一次即可達到目標效果，而無需設置多次。

2.自定義腳本

自定義腳本，指允許用戶將一系列操作/設置組合為一個操作組的能力。在一些進階場景，用戶往往存在個性化的需求，對產品功能有著相對固定的使用習慣。自定義腳本，能夠極大幫助用戶減少重復性的操作，提高整體效率。

在Figma中，充滿了類似概念的設計，如：組件、樣式（文字、顏色、效果）。用戶可自定義保存相關的配置參數，以方便多次復用或一鍵修改。

四、如何簡化頁面信息布局

1、圍繞行為組織功能，走一步看一步

在設計界面原型時，需要先了解用戶的任務目標，用戶想做什么，先做什么后做什么。充分掌握用戶心理模型的行為路徑，基于用戶的行為路徑進行組織功能，以確保用戶在每個環節中所看到的信息都是必要且準確的。工具型產品通常擁有多個可選設置項，拆分任務步驟可減少用戶被非必選項的干擾。

除此之外，不同的用戶角色的行為路徑也會有所不同，例如：創建者，協作者，以及是否有編輯權限等等。不同的用戶場景對于功能的訴求也是不一樣的，而這就需要設計師從產品的定位，主流用戶以及使用習慣綜合考量。在優先滿足主流用戶場景的基礎功能上，再進行其他場景的功能增減。

2、功能層級分區，巧妙地藏起來

1.功能分區

George A. Miller在《神奇的數字7加減2：我們加工信息能力的某些限制》中表明，人的大腦最多同時處理7±2個信息塊（即5-9個），若超過則出錯的概率將會大大提高。對于無法避免復雜信息的情況下，可以將煩瑣的信息分塊，組織成清晰的層級結構，例如：微軟Office 中頂部工具欄包含上百個功能選項，為了便于用戶能快速找到想要的功能，他們將所有功能進行分塊，包括：字體、對齊方式等模塊。每個模塊下再細分具體設置項，具體設置項又包含了其它功能?；谇逦膶蛹壗Y構，用戶可快速通過「字體模塊」-「字體設置項」- 「微軟雅黑」三個層級中快速找到想要的選項。

值得注意的是在信息分塊時，需制定出清晰的劃分界限，可通過詢問不同的用戶來判斷界限是否清晰。

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

2.隱藏高級功能

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

五、如何讓操作更輕松

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

簡化操作的過程中，針對不同的操作賦予最自然的交互形式能減少用戶操作過程中的精力消耗。自然的交互應該是用戶無意識的操作，是基于過往生活經驗，閱歷，學識等的一種本能，幾乎不需要過多的學習成本即可完成。例如：用戶旋轉一張圖片。相對于在輸入框中輸入旋轉角度參數而言，將光標直接操控在圖片上旋轉顯得更自然。輸入需要至少三步（點擊文本框-敲擊鍵盤數字-點擊確認），而直接旋轉只需要兩步（點擊-旋轉）。因為對于用戶而言，點擊圖片進行旋轉更接近現實生活中的操作，不管是交互步驟還是心理認知上，都會降低用戶的操作難度，讓用戶覺得產品更簡單更自然。

2、提供及時的反饋與幫助，避免重復操作

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

六、結語

引用《簡約至上》中的所說：創造簡單用戶體驗的秘訣就在于把復雜性轉移到正確的地方。任何產品都具有一定的復雜性，設計的目的不是為了消除所有復雜性，而是將它們放到最合適的位置。簡化產品的復雜性替用戶排除不必要的干擾，通過設計師的努力給每一個用戶帶來簡單、愉悅的使用體驗，讓復雜的工作更簡單。

參考文獻：

[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 交互設計精髓[M].倪衛國，劉松濤，薛菲，杭敏譯.北京：電子工業出版社，2015

[3][英]科爾伯恩(Colborne.G).簡約至上：交互式設計四策[M].李松峰，秦緒文譯.北京：人民郵電出版社，2011

[4]劉津，李月.破繭成蝶：用戶體驗設計師的成長之路[M].北京：人民郵電出版社，2014

[5][美]唐納德?A?諾曼.設計心理學2:與復雜共處[M].張磊譯.北京：中信出版社，2015

作者：ISUX設計

轉載請注明：學UI網》面對繁冗，拒絕“擺爛”｜工具型產品如何簡化設計

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:   ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系010-63334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

正文

經常使用愛奇藝刷劇的同學，有沒有發現愛奇藝的應用圖標又變了。前段時間愛奇藝針對品牌設計進行了較大的調整，最近又悄悄地將應用圖標的背景色換成了這種多彩色混合漸變的形式。

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

這個類似于極光/彌散漸變的風格最近也比較流行，在 UI 場景中的運用也是比較普及的，被運用到應用圖標的案例中相對較少。大概的回憶了一下，也有一些產品會使用，特別是比較知名的 Instagram 很早之前就使用了，也成為了流行趨勢中的優秀案例之一。

通過極光/彌散漸變（混合漸變）的形式強化應用圖標外輪廓背景，不僅可以提高視覺感，也是體現年輕化趨勢的一種色彩表現形式。不過漸變中的色彩本身也是關鍵性的因素，如果色彩不夠年輕活潑，帶來的效果也是千差萬別的。

一、漸變的表現形式

漸變色在我們的設計中是非常普及的，漸變色分為線性漸變、徑向漸變、角度漸變、混合漸變、流體漸變等形式。不同的漸變形式可以營造不一樣的視覺體驗，可以豐富色彩環境、強化光影質感、增強層次感和空間感等。

1、線性漸變

這是最常見的一種漸變方式，具備明確的方向性，由兩種或者多種顏色組合形成。相較于單色來說，線性漸變可以使得畫面更加豐富，色彩營造出的層次感更強。

2、徑向漸變

徑向漸變是以中心向外擴散而形成的圓形漸變，可以作為立體感的表現，也可以營造向中心聚攏的光影效果。

3、角度漸變

角度漸變形成類似于雷達掃描的效果，屬于運用相對較少的漸變形式。在一些應用圖標的外輪廓背景中會被使用，也可以作為營造產品的光影變化。

4、混合漸變

混合漸變就是多種顏色隨機混合，色彩形成不均勻的自然彌散開，也可以成為彌散漸變或者極光漸變。是最近比較流行的視覺風格，可以呈現出豐富的色彩變化和隨性自然的年輕化趨勢，被廣泛應用到平面設計、UI 設計、電商設計等眾多視覺設計領域。

5、流體漸變

流體漸變就是多種顏色漸變組合，形成帶有流動感的視覺效果，通常作為背景來豐富設計的視覺感。也有動態形式的流體漸變，在 APP 和一些屏幕壁紙中出現，帶來的感官體驗也是非常不錯的。

隨著視覺感官體驗的不斷追求，設計師已經不滿足于趨于平面化的漸變形式，探索出造型多變、色彩豐富、刺激感官的視覺體驗，以更加豐富的表現形式來探索漸變方式。

二、漸變小教程

線性漸變、徑向漸變和角度漸變實現起來比較簡單，軟件自帶的漸變屬性即可滿足。下面重點給大家分享如何實現混合漸變的效果，以后再單獨給大家分享關于流體漸變的技巧。

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

方法一：

通過繪制幾個不同顏色的形狀圖形，然后執行高斯模糊形成混合漸變，模糊的參數值要適當大一些，一直到顏色自然過渡為止。

方法二：

如果想要隨機性大一些，可以通過畫筆工具隨意涂抹顏色，這樣形成的效果更加隨機性。然后再執行高斯模糊將顏色融合，帶來自然隨性的視覺體驗。

三、分享幾個案例

不能只是紙上談兵，只有反復磨練和嘗試才會熟能生巧。根據以上的方式黑馬哥完成了以下的作品案例，大家也一起來動動手吧！

1、鄰近色系易把控

混合漸變技法層面來說并不難，配色是相對具備難度的，很多同學都會因為配色不到位而做不出優秀的作品。針對應用圖標設計中的配色來說，鄰近色系的搭配是最容易把控的。選擇色相范圍在 60° 以內的色值，混合出來的色彩排斥感都是比較低的，融合度比較高，能夠呈現出比較舒適自然的視覺感官體驗。

如果選擇了色相角度大于 60° 的色值，只要數值的增減關系控制在 30° 以內都屬于可控范圍，這時候如果出現較大的色彩排斥感，可以通過降低不透明度來進行視覺平衡。

2、強視覺感還得對比色

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

3、學會舉一反三

今天分享的經驗不局限于應用圖標的設計范疇，我們要學會將這個技法舉一反三，運用到更多的設計場景中。比如在下面作品中的一組信息卡片的設計中，通過混合漸變形成的卡片背景提高了局部的視覺感，配合磨砂玻璃質感的運用，提高了該部分的視覺感官體驗。

4、其他作品欣賞

為了輔助大家理解和開拓思維，為大家選擇了幾個類似的案例作品，希望可以帶給大家更多設計靈感。（以下作品版權歸屬原作者，僅作為學習交流）

四、布置一個小作業

通過對混合漸變實現技巧的學習和案例欣賞，相信大家對于混合漸變有了比較全面的認知。學以致用的目的，下面為大家準備了一個小作業，希望以此來強化大家的理解。

根據以上示意圖提供的高保真原型圖，以混合漸變的形式增強其作品的視覺感。

以下方案為黑馬哥完成的一個示意，大家可以轉換思維和調整新的配色方案，輸出不一樣的全新作品。

作者：黑馬青年

轉載請注明：學UI網》這個效果原來是這樣做出來的

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、刪除，實現表單輕量化

前幾年，我們在銀行或者移動營業廳開通一些新業務時，都會填寫表單，通常是密密麻麻一堆信息。但是實際需要填寫的內容可能只有2～3項，業務人員會特意勾選出來給客戶，其余的都是非必填項，或者是業務人員填寫的。

線上表單設計時，沒有專門的業務人員指導，用戶更容易迷失。所以設計師或者產品經理的首要任務就是盡可能地減少表單信息量，降低用戶的認知負荷。

最近在做一個表單的優化，業務方要求增加“入參”、“出參”兩個表格項，說是用戶會看。與用戶溝通后，反饋也說“會看一下”。但是在深度挖掘用戶場景后，發現用戶確實會查看這個信息，只不過不是在當前環節查看，而是在結果項中查看。

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

因此面對復雜長表單，我們需要從需求入手，判斷是否有必要讓用戶提供如此多的復雜信息。

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

當我們不得不面對復雜表單時，如果采用簡單內容平鋪，用戶看到的是滿屏的散點信息，造成信息識別困難，用戶一時間難以找到填寫思路，反而增加用戶的心理負擔。因此信息的層次性，對于復雜表單至關重要。

首先要從內容和視覺層面讓復雜信息變得清晰、規整，更加符合用戶的認知習慣。例如，可以利用分組標題、分割線、卡片，按照不同信息的類別、屬性和相關性進行區塊劃分。

根據不同的布局和交互，主要有以下4種表單設計模式。

1、順序表單

表單分組后，可以按照業務邏輯順序鋪開展示。用戶只要按順序填寫就可以了。但是對于超長表單，這種布局方式下，用戶無法全覽頁面信息。頁面上下滾動、定位查找帶來的交互成本比較高。

1）平鋪表單

2）卡片表單

因此順序表單更多地用在業務信息比較簡單的場景中。

2、錨點表單

為了解決長表單的定位效率問題，可以在順序表單的基礎上增加錨點。另外錨點還可以幫助用戶快速了解表單所包含的內容模塊。

根據錨點的布局，可以分為橫向錨點和縱向錨點兩類。錨點需要吸頂方便用戶操作。本質上來說，錨點表單是順序表單的優化版本。

3、標簽表單

如果長表單內容沒有依賴關系，還可以將表單拆分為幾個相互獨立的標簽內容，這就是標簽表單。

不過標簽表單更強調內容的并列關系，常用于配置表單中，例如 MAC 或者 Windows 系統的配置彈窗。

標簽表單在全新表單中應用較少。因為標簽表單容易造成內容遺漏，并且無法告知用戶哪些標簽已經填寫，哪些標簽未填寫，或者無法清晰地展示校驗信息。來回切換標簽查看信息，也會影響效率，因此主要用于用戶有目的的配置行為中。

4、步驟表單

步驟表單是一種常見的表單拆分方式。通過節點將子表單串聯起來，形成一個完整的業務閉環。例如阿里云的云服務器訂單流程，或者一些開戶流程等。

步驟表單有幾個特點：

1）過程串聯

理論上來說，步驟表單有明顯的操作順序，用戶需要按照節點完成內容填寫，因此不會產生信息遺漏。當然也可以根據實際的業務場景，設置選填節點。但是總得來說，步驟表單更強調的是順序操作。

2）業務引導性

對于復雜業務，步驟表單可以將分散在不同頁面中的獨立業務串聯起來，在一定程度上具備新人教學功能，幫助用戶了解業務邏輯。減少用戶自定義操作時在不同頁面的跳轉，從而提供新人用戶的操作效率。例如系統配置向導類的步驟表單。

3）逆向操作

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

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

4）節點的平衡性

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

最近在做設計時，發現步驟表單最后一步是內容預覽。通過用戶調研發現，部分用戶會謹慎地預覽前面４步填寫的內容。而另一部分用戶則認為，剛填寫了內容不需要預覽，強制預覽的設計并不友好。該如何平衡設計呢？

最終我們選擇了將預覽節點取消，將預覽功能調整到第４步，采用「預覽」按鈕的形式。既滿足了部分用戶預覽的需要，另一部分用戶也可以不做預覽，直接提交申請。

所以步驟表單過程中的節點具有一定的強制性，需要謹慎對待，保證節點的合理有效。

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

1、模塊隱藏

表單實際上是任務信息的集合，為了具有更高的適配性，內容通常是多種場景的集合。而場景有高頻、低頻區分，對于高頻信息需要優先展示，便于提高用戶的填寫效率；對于低頻場景，可以隱藏弱化展示，從而降低整個表單的復雜度。

例如我們常見的「高級配置」，通常在表單的底部默認收起展示。

2、信息隱藏

復雜表單中信息會出現多級信息共存的場景。這種場景下，復雜表單默認展示當前選項對應的子內容，隱藏其他選項的內容，從而提高信息的指向性。

3、合理的組件形式

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

所以單選框更多用在備選項較少的場景，如果備選項較多，建議優先采用下拉選擇器，隱藏備選項。

四、轉移，擴展表單的異步空間

1、信息轉移

在表單設計時，可以將部分二級信息轉移到彈窗、抽屜中，利用浮層空間拓展業務內容，根據用戶操作逐級加載出來。從而減少表單的信息量。

例如下圖中，沒有將「所有配送區域及運費」直接展示出來供用戶選擇，而是放在了彈窗中，表單中只呈現最后的選擇結果。既簡化了表單的內容，又讓選擇結果更加突出，方便用戶的查看和校驗。

2、記憶轉移

現在很多瀏覽器都增加了密碼存儲功能，減少用戶記憶成本。

而在電商購物網站可以設定默認的收貨地址。系統自動讀取調用，從而減少用戶的輸入操作。

3、行為轉移

現在越來越多的網站支持「手機短信驗證碼」免密注冊登錄方式，或者第三方登錄方式，或者手機端掃碼登錄。將原有的表單填寫轉變為系統行為，從而降低用戶的行為成本。

好了，以上就是我總結的表單設計的內容～

重復一遍：

• 刪除，實現表單輕量化
• 組織，讓表單更加有層次
• 隱藏，讓表單更加靈活
• 轉移，擴展表單的異步空間

作者：子牧先生

轉載請注明：學UI網》設計基礎(7): 簡約設計4原則在表單設計中的應用

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在設計中，相鄰的元素比分開較遠的元素會更加吸引人注意，在做設計閱讀順序的時候，利用設計分組是一個非常有效的方法，將不同信息進行視覺間距分組，能提升用戶對于內容上的理解。

如上圖slack的設計，插畫引導圖和底部按鈕上面文字拉開了距離，使得內容更聚焦。第二個界面的頂部頭像和下面的文字也是通過分組形成了對比。

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

后面兩張頁面也是如此，頂部的導航，和下面表單信息，以及頭像和底部按鈕，通過分組處理，內容更加符合用戶的視覺動線。

在球員定制的處理上，最左邊那張圖，通過卡片和線條分組處理，從視覺上很清晰的看見排名，哪個球隊和哪個球隊之間比賽。

當一組信息比較接近，證明必須是有關聯的，如果距離比較遠，這意味著這組信息和他們是不同的，簡單來說，通過鄰近性，通過分組創造這些關系，為信息帶來層次。

二、運用空白建立層次 

classpass的設計不會使用太多的視覺元素，而是運用留白把內容進行分組，每個頁面的留白恰到好處，同時留白本身就是對信息進行分組，所以頁面中減少了很多線條使用，頁面會更加干凈有品質感。

must是一款電影軟件，整體設計非常雜志感，頁面就是通過圖文處理，以及留白空間的處理，增加對比，基本產品體驗你不會感覺到視覺負擔，元素之間的信息組織的非常清晰。

在電影展示頁面，信息的處理，以及打分設計上，重復運用留白來處理信息層級，在設計中，當你元素周圍留白越多，它產品的注意力也越強，如右邊的打分頁面，幾乎所有焦點都在這個彈窗上。

artsy是一款藝術品電商網站，整個app的設計也充滿了藝術氣息，每次我設計找不到感覺時候就會去打開看看，里面的排版，還有設計的細節處理，都值得我學習，但我喜歡的還是他對于板式和留白空間的處理。

在首頁設計，我最喜歡他相框的設計，就像欣賞美術館的一幅畫，頁面留白也非常大，襯線體和非襯線體的對比也運用的非常好。

整個APP的設計被大量留白包圍，雖然現在流行各種質感，各種光感，C4D的設計，很多設計師認為設計越多越好，但是大量視覺元素會讓頁面過于飽和，如果沒有很好的視覺引導，用戶會感到不知所措。

三、運用氛圍建立層次 

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

jour這款產品在設計上，背景通過有層次的氛圍紋理和質感，使得頁面氛圍感很強，層次細節更加豐富，當然在設計的時候切忌對于設計氛圍過度運用，那樣會讓用戶分散注意力。

其它場景上氛圍紋理的運用，卡片上通過系列插畫的塑造，頁面雖然有很多插畫，但是頁面平衡感同樣重要。需要考慮用戶在界面看見的和其它頁面視覺感受是一致的。

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

如上圖是他里面一個注冊登錄場景，在界面中，除了背景灰色底紋通過幾何圖形來烘托視覺層次，同時在插畫上也是非常巧妙，用戶輸出，完成后，整個插畫到品牌圖形的連貫變化體驗非常好。

Sift是一款新聞類閱讀產品，這類型產品設計一般就是文字排版，設計簡約為主，但是sift運用了一種大膽的設計，背景氛圍上采用一些點線底紋的肌理效果，和內容結合的很平衡。

Lugg是一款貨車APP有點像國內的貨拉拉，整個設計也氛圍感非常強，運用的全插畫設計，在頁面每個細節，從引導頁，讓頁面核心功能設計都能看見完整插畫的運用，我目前我看見運用插畫氛圍作為主設計最好的產品。

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

四、運用襯線字體和無襯線字體建立層次 

字體對比，運用襯線字體和非襯線字體對比是非常常用的方式，如上圖運用了Adelle Sans字和Tiempos字體這兩款字體的對比讓頁面內容結構非常清晰。

上圖官網的設計，干凈的排版，通過字體大小，字型進行對比，體現出視覺層次。

字體的選擇本身也是設計中很重要的因素，好的設計不僅能提升設計品質，同時也能讓頁面視覺層次更加分明。

五、結語 

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

作者：叮當貓

轉載請注明：學UI網》這么好的設計排版技巧，不看虧了?。?a style="color:#428BCA;text-decoration-line:none;">

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

如果光看視覺不論主題感覺還不錯的，但最大的問題也是不符合主題，主體是一個現實的籃球運動員，卻搞了很多魔幻的元素，結果就很像魔幻籃球似的，這樣在練習的時候可以試試，但作為一個項目需求肯定是不會讓你過的。

再來看看修改后的：

修改后的圖整個就和諧統一多了，更符合主題。

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

一、明確風格

視覺設計師經常會遇到各種各樣的需求，首先我們要做的第一件事就是了解需求，明確風格。
我們可以通過了解需求背景，和觀察人物素材來了解，之后再去推進設計。

我們來看看素材：

這不是NBA巨星科比么？！明顯是現實題材，不應該加入一些魔幻、科幻什么的元素進去。

二、明確需求

明確需求的目的是為了抓住設計關鍵點，方便為接下來的設計推進提高效率。比如這次作業是要求大家設計一張帶有神秘感的剪影海報，我們可以找剪影的參考來提取這類視覺表現的關鍵點是什么：

找了很多參考，可以看到剪影視覺的效果還是蠻強的。很容易出效果，通過觀察我們要學會提取里面的關鍵點：

我們要做的就很明確了，在一個場景里設置一個光源，再加入人物調黑放在光源前面形成對比。

三、元素聯想

我們的人物素材是籃球員，我們就可以通過籃球運d動員這一個點為中心去發散聯想：

再用這些點來組成畫面，就會很符合主題了。

比如我們的場景可以是球星的發布會背景墻：

一個簡單的場景就ok了

然后是我們的光源：

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

我直接從開源的圖標網站去下載，里面的圖標都可以免費用，且可以下載到矢量文件。

直接下一個不錯的放圖里看看：

emm，感覺有點太粗了，一點也不透氣，沒關系。我們把源文件拖進AI里調整下描邊粗細就可以了：

再放回圖里看看：

這樣就輕薄透氣多了！再給圖形加個外發光效果：

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

還可以增加燈光對地面的倒影，直接把墻上的籃球圖形復制一個下來，使用透視工具拉一下變形，放到地面上：

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

這樣整個場景就很豐富啦。

接下來是人物的處理，有一個點給大家分享下：

直接把人物涂黑也有剪影的感覺，但是毫無細節，人物就很平，薄的像紙，一點都不立體

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

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

這個同學的也有點這個問題，整個手臂沒有加過度光，所以會顯得有點平：

加完過度光看下整體效果：

一張帥帥的人物剪影海報就完成了！

四、其它的一些附加知識點

1.低視角會讓畫面充滿壓迫力。

以Amor的作業為例：人物我們不能調，

但我們可以調整地面的俯視角度。比如右邊這張，就放大了透視，就給人一種仰視角色的感覺，整張圖更有壓迫感。左邊這張因為透視比較小，視角就比較高，顯得是在俯視角色。就缺少了一點氣勢：

小小的改動就可以提升一個氣質。

2.在光源里加入一些碎片會讓畫面更豐滿，充滿細節。

這是兜兜一張作業，也是很不錯的。

我們觀察下底部光源的位置的區別：

很多同學打完光就會讓它空著，就會顯得很單一，光也會顯得有點蒼白平淡。其實我們可以在光源里加入一些細節，就可以讓光的層次更豐富了，從而讓畫面更耐看。

作者：慢熱

轉載請注明：學UI網》哦，原來這樣可以更高級！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

本篇講述：激進式創新

激進式創新是相對罕見的，它同時依賴革命性的技術和創新的商業模式來解決問題，激進創新的發生往往伴隨著產品的創新、組織創新等連鎖反應甚至引起產業結構的變化?？萍嫉膭撔聨砹撕芏喔锩琲Phone開創了電容觸屏時代，ARVR打開了元宇宙之門；新的商業模式利用現有的資源引起行業巨變，如Uber和滴滴用物聯網技術關聯私家車和出行乘客，連接異地旅者和房東的Airbnb等都是激進式創新。

作為設計師，我們在技術和用戶間承接著場景和體驗，了解激進式創新的方法可以讓我們在工作更好地幫助團隊突破。很多具有劃時代意義的創新產品其實都有設計師創始人的身影：顛覆傳統酒店行業的Airbnb（愛彼迎）的聯合創始人Rian Chesky和Joe Gebbia，首創了華夫格底跑鞋的Nike（耐克）創始人Bill Bowerman，設計開發了凹凸面圓點拼接積木的LEGO（樂高）創始人Ole Kirk Kristiansen，顛覆內容傳播權威、開啟全民播客時代的Youtube聯合創始人Chad Hurley…他們都是設計師出身，基于自己對行業、產品和用戶需求的洞察革新了行業。

一、激進創新啟動 / 策略2則

上一篇提到漸進式創新的起點難度主要在于溝通和傳達，而激進式創新依賴創意突破，有兩類需求命題可能會讓創意發散變得艱難。其中一種是需求命題過于具體，這可能會限制創意的發散空間；另一種則是需求命題過于宏大，無邊無際讓設計師不知從何著手調研和發散。針對這兩種狀態，下面的方法將針對性地幫助設計師們解題。

策略1.  問題挖掘 Dig Deeper

命題過于具體很可能會限制創意的發散空間，仿佛解決方案已經有了安排，那設計師很可能會被限制在已有思路中。問題挖掘就是針對這類命題打破砂鍋問到底，從而幫助自己更好地獲得發散思路。問題挖掘就是寫下所有能想到的問題，挖掘前因后果，了解內外機會和風險。

提問可以從以下三種工具角度著手：

• 5W1H問題

5W1H分別是：是什么，是誰，為什么，在哪里，在何時，如何。從這六個提問開始著手列出所有想問的問題，并繼續發散關聯的子問題。然后嘗試自己回答剛剛列出的問題，有些問題可能和命題無關則跳過。當我們自行完成了梳理篩選后，就可以將這些問題在和需求方溝通和訪談時提出，進行深入了解，獲得靈感。

• 是什么（What） “我們的創新想要解決什么問題？關鍵假設是什么？”…
• 是誰（Who）“產品創新的購買者是誰？用戶是誰？相關利益人是誰？”…
• 為什么（Why）“為何這個問題重要？為何發生這個問題？為何之前未能解決？”…
• 在哪里（Where） “這個問題發生在哪里？之前在哪里解決？還有哪里有相似的問題? ”…
• 在何時（When）“這個問題何時發生？問題何時開始？何時可以解決?” …
• 如何（How）“如何解決？已經嘗試了哪些解決辦法？”…

• 5個為什么（5Why）

經典的連問5個為什么。如果我們針對看到的結果，只問一個“為什么”，很容易停在第一層的表象原因，只有不斷的深入挖掘才可以層層遞進，找出最關鍵的底層原因。

• “機器為什么停下來？” 電路過載，使保險絲熔斷。
• “為什么？” 軸承潤滑不足，因此被鎖定。
• “為什么？” 機器人上的油泵沒有循環足夠的油。
• “為什么？” 泵入口被金屬屑堵塞。
• “為什么？” 泵上沒有過濾器。

• 層層擴散

如果五個為什么是向內層層遞進，那層層擴散就是向外發問。以最為基礎的命題問題作為中心點擴散，向外展開相關因素：產品的核心問題，相關結構技術，外部文化和法規…

• “這個產品我們要解決一個什么問題？為什么要解決這個問題？”
• “別人對這個產品的當前印象和期待是怎樣的，需求發起者是誰？”
• “這個產品的開發方式，有什么背景，歷史淵源，復雜的代碼歷史，變動難度？”
• “這個產品擁有的資源？”
• “這個產品有什么文化、政治、法規背景”
• “我們的外部優勢和劣勢是什么？”

策略2. 設置邊界 Planting Limits

都說設計是戴腳鐐跳舞，你是否接到過抽象空泛且聽起來沒有任何限制的命題？創作條件沒有限制也許意味無限可能，但更常意味著難以聚焦。適當的束縛有時可以幫助更好地放飛想法。所以如果面對的命題太龐大，可以嘗試給自己設限，或思考可能存在的限制，就能抓到一個相對靠譜的起點。

• “這個項目要控制成本投入，用最少的資金，最少的人力?！?
• “最大程度保留用戶的現有體驗，盡可能減少用戶學習成本?！?
• “新創意最大程度滿足原來的代碼框架，使用最小的開發成本?！?
• “新的產品體驗要極簡，將用戶路徑縮短到三步以內。”
• “在鏈路上需要用戶使用的媒介最少化。”

例. 重新設計支付流程

• 原體驗：原本用戶需要攜帶錢包出門，錢包里會有多張信用卡，儲蓄卡，還會有很多現金。而用戶出門手機也必不可少。
• 設置邊界: 在優化的支付流程里，盡可能減少用戶支付需要攜帶的東西；在用戶支付流程中減少遇到的阻力，提升消費。
• 新體驗：讓用戶可以用軟件進行轉賬，輸入需要支付的價格，雙方確認后輸密碼轉賬。

-> 讓用戶可以直接掃碼進行支付，無需輸入價格，無需人工核對。

-> 讓用戶用指紋確認，或開通多少元以下免密碼支付，無需輸入密碼。

-> 讓用戶直接手機感應支付，無需打開手機或軟件。

-> 掃臉進行支付，即使不帶手機也可以進行支付。

二、激進創新過程 / 策略3則

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

策略1.  創意矩陣 Creative Matrix

如果需要用創意解決一個較為龐大的主題，尤其是激進類創新設計，那創意矩陣可以迅速排列組合進行發散，且不遺漏內容。

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

例：設計一個針對工業設計的3D建模軟件，打破市面上常見的軟件功能和體驗。

我們以Gravity Sketch的3D建模產品為例，用創意矩陣倒推思考的流程。

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

（2）梳理亮點。在梳理發散過程中可以看出，VR客戶端和pad用移動端有相對創新的亮點，不同于較為傳統的PC端和云端。如果pad端和VR端可以滿足3D建模軟件所需要的性能，這樣的創新就可以被支持。

（3）繼續探索。針對每一個流程步驟，可以聚焦到里面的每一個分步驟，探索亮點。比如創作階段的流程可以展開到具體設計到建模的步驟。當把步驟進行分解之后，可以發散出各個階段利用VR的創作優勢。

（4）梳理亮點。在草圖和草模階段，VR內直接創作可以節約物理材料，支持無死角設計不用重復出圖，幫助立體想象、可視、模擬真實尺寸體驗，打通草圖到建模的鏈路…顛覆草圖到建模階段的設計流程，提升整體效率和可能性。

策略2.  逆向思考：程序 / 觀念 / 狀態

逆向思維締造了許多打破常規的創意。上一篇我們介紹了在漸進式創新中實用的原理/功能/結構三種逆向思路。這里介紹3類更適用于激進式創新的逆向思路和具體的案例，為激進式創新賦能。

• 程序或方向逆向 ｜ 顛倒事物發展變化的構成順序、排列位置。

例a. C端服務直接收費 -> C端服務免費，其他項盈利

很多產品在收費時直接向C端用戶收取服務費用，但是容易面臨C端有付費意愿的用戶量數不多。不如讓用戶免費使用體驗服務，擴大用戶留存的基礎上，通過向B端等有更多支付意愿的商家收取費用。QQ、微信等通訊軟件的出現讓用戶免費使用通訊、社區等功能，通過用戶的留存從其他商業化項目收費，如收取在軟件內的廣告費用。

例b. 主動檢索 -> 算法推薦

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

• 觀念逆向 ｜ 設計者反轉看待問題的觀念，或針對人們的觀念逆向設計。

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

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

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

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

• 狀態（過程）逆向 ｜ 改變現在的狀態，如正變負，進變退、動變靜、硬變軟等等，獲得創新。

例a. 人在路上跑動 -> 跑步機跑道帶動

過去跑步都是人在道路上跑動鍛煉身體，人動路不動。但在艷陽天、雨天等天氣下在室外的環境就會不適合跑步運動。跑步機的誕生就讓用戶可以隨時在室內環境中舒適、不占空間地進行運動，讓“地”動起來，人在原地跑動。不但可以調節跑步機跑帶的角度速度等模擬各類環境，還可以監控記錄用戶的跑動、健康狀態，一舉多得。

例b. 人去商店購物堂食 -> 外賣快遞送上門

過去的購物體驗基本都依賴用戶到店進行。但這樣商店能輻射的客戶范圍會相對狹小、用戶也必須出行才能購物和享用美食。比起提升到店體驗，支持送貨上門，讓用戶足不出戶體驗到購物的樂趣和便捷。不但讓顧客可以享受到更遠距離、甚至海外的商品，商家同時可以輻射更遠距離的顧客，也不用依賴實體門店進行銷售。

策略3.  多問”如果”， What if… 

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

對于市面上一些帶有亮點的產品，我們也可以倒推去思考當初設計者問出的“如果”是什么。這幾年全球都在疫情的不斷反復中掙扎，我們可以以遠程工作場景為例，來思考一些“如果”。

例. 遠程協作

• 發散：如果我們遠隔萬里還能面對面、身處一個空間工作交流…

如果遠程狀態下我們還可以像在辦公室一樣一起查看模型…

如果在查看模型的基礎上我們還可以調整、比對修改方案，及時看到反饋…

• 結果：空間感知設計評審

Microsoft Mesh使人們能夠與全息狀態聯系，跨空間共享，并從世界上任何地方進行協作。通過為組織引入支持 Mesh 的混合現實體驗，可以增強虛擬會議、進行虛擬設計會話、遠程幫助他人以及舉辦沉浸式虛擬會議，從而大幅提高工作效率。

Mesh通過允許用戶使用任何設備在任何位置加入任何位置來增強 3D 設計評審。無論是物理存在還是全息，同事都可以實時查看和批注 3D 模型。所有內容都在設計會話之間持續存在，因此團隊可以從他們中斷的地方快速開始交流理解，激發創造力。

例. 遠程培訓和維護

• 發散：如果維修人員不能上門工作，是否有人能遠程教學我修理電器…

如果維修人員可以遠程修理我的電器就好了…

如果他們能看到我看到的內容，完全基于我的視角指導我…

如果還能在我的視覺標記、說明、演示操作方法…

如果在工業界專業領域，也能這樣進行教學、監督、指導…

• 結果：遠程培訓和學習

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

三、激進創新決策 / 策略三則

Warren Bennis說，“創新—任何新想法—根據定義，一開始都不會被接受。在創新被組織接受和內化之前，需要反復嘗試、無休止的演示、單調的排練。這需要勇敢的耐心?！奔みM式創新需要經過的等待和挑戰可能非常漫長，在這個過程中，更需要謹慎地篩選想法和推進。下面的三則方法可以幫助我們在決策中減少試錯成本。

策略1.  考慮實現時間和所需要的技術系統。

九宮格視窗可以幫助進一步決策，將創意靈感在“系統結構”和“實現時間”兩個維度進行排列選擇，之后根據需求的資源和達成所需時間進行選擇和規劃。突破式的創新往往需要大量的時間來完善技術和系統，所以在篩選想法的過程中結合這兩個因素，可以保證持續性的創新。

例. Netflix播放創新

現在我們熟知的Netflix網飛是一家會員訂閱制的流媒體播放平臺。

• DVD及藍光租賃提供商

最初在1997年剛成立時，Netflix曾經是一家在線DVD及藍光租賃提供商。當時DVD技術剛誕生，輕質的材料代替了原本笨重的VHS電影格式存儲，讓郵寄DVD成為了可能。Netflix創新地使用線上下單、往返郵寄的租賃模式，讓用戶通過免費快遞信封租賃及歸還Netflix庫存的大量影片實體光盤，并以此打敗了線下租賃連鎖店百視達。

• 付費訂閱流媒體

2006年在線點播技術興起，隨著新技術的出現Netflix 轉向通過互聯網流式傳輸視頻，提供更廣泛的內容選擇，并且可以無限觀看、點播、低價，高質量的影視內容，并最終吸引了對手Blockbuster 的核心客戶。Netflix的付費訂閱模式和Apple的iTune下載、Youtube的免費模式成為當時最熱門的三個細分市場。

Netflix的創新幫助他們在市場上站穩腳跟并不斷突破，但如果在1997年Neflix就把流媒體視頻作為目標進行創新、不考慮當時的現實技術和研發時長，那公司可能在漫長的科技發展等待中生存，也就沒有后來的故事了。所以對于突破性的創意，按照時間維度、技術實現給出逐步創新的節奏，通常能更好地幫助產品持續創新。

策略2.  考慮可推動性&可實現性

如果你的創意需要在大公司里進行落地和推進，可以使用“傳播速度和可實現性”矩陣逐步選擇，第一步聚焦適應速度和傳播速度，將決策者對產品的影響也放入考察。第二步，審查可實現性和財務可行性，之后做出相應選擇和推動。

這個矩陣也可以用于對外部環境的判斷，在第一步驟中考慮想法在文化、政治、地緣等因素下的適應和傳播速度，在第二步驟中考慮市場技術或包容度是否能支持該想法的推動。

例. 出行產品的本地化決策

以出行領域的產品設計為例，我們可以看看在這個領域里一些創新決策考慮。我們熟悉的Uber，滴滴等打車平臺通過利用空閑的私家車來接送乘客，降低了打車花費、難度和空閑汽車的利用率，顛覆了原本的出租車打車市場。而在決策想法時，這類出行產品需要考慮當地的具體交通、運輸工具、出行狀態等現實因素進行推送。

• UberEats在美國部分城市用汽車送外賣

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

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

2015年，當來自美國的Uber和來自新加坡的打車平臺Grab在印尼打得火熱、且都使用出租車和私家車作為接送乘客的交通工具時，印尼市場的Gojek則聚焦印尼的國情，把打車平臺的思路運用在打摩的上，規范化摩的市場。在交通嚴重擁擠的印尼，摩的的快速穿梭遠比汽車出行更適合本土，這讓Gojak成為了印尼的第一大出行平臺，并在后來拓展出龐大的本地生活產品體系。

策略3.   小心鴻溝

“如果解決方案意味著與他們習慣接受的標準有太大的偏離，那么成年公眾的口味不一定準備好接受符合他們要求的合乎邏輯的解決方案。” ——Raymond Loewy，著名的可口可樂瓶、殼牌石油標志背后的工業設計師這樣說。

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

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

Airbnb將尋求經濟實惠住宿地點的旅行者與想要租房或備用房間的人聯系起來，這個想法現在已經被大眾熟悉。但在2009年業務的第一年，這個創意是非常具有創新性的，尚不為大眾熟知。

• 好創意卻不得市場認可

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

• 照片減少溝通鴻溝

究其原因，其實是雖然當時Airbnb的想法已經在市場上獨具突破性，但團隊沒有考慮到早期使用者和早期大眾之間的差距。早期使用者往往樂于嘗試新事物且有很強的需求（特別體驗、更低成本出行等），而早期大眾會和他們現有的酒店體驗進行比較，安全、正規、優質、溫馨的入住體驗是他們的強需求，那些非高清、非精美照片很難在第一印象上說服早起大眾這些品質。彌補上這個預期差距后，也就有更多的用戶愿意嘗試了。在后續的迭代中，Airbnb也也在系統改進上不斷強化安全、正規，更好地滿足用戶。

結語

激進式創新往往依賴團隊基于用戶需求、市場、技術等多維度內容的理解。在創新過程中，設計師更多了解相關領域和創意方法就能更有益啟迪想法。希望本文激進篇、上文漸進篇的設計策略可以幫助設計師們更好地創新發散。

創新思維可以被學習累積，設計師可以保持多看多思考的習慣，從其他優秀的設計和產品上反推創意思路。設計創新時要相信推進的過程，如果對題目感到無從下手，相比糾結現有思路是不是最優解，不如用文中的方法把想法全部寫下來并原型嘗試。許多時候我們離優秀的想法只是一步之遙，也許轉個彎就柳暗花明了。

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設計

轉載請注明：學UI網》設計策略｜源源不斷的創新思路（激進篇）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

作者：蔥爺

轉載請注明：學UI網》logo設計除了用首字母，還能怎么做？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、
 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

共識目標大致分為兩方面，拉齊理解和對齊標準。

拉齊理解，減小彼此間的認知差距。總體上，我們需要拉齊彼此對度量長短期價值和目標的理解；到各執行階段，則需要拉齊對所需資源和預期輸出的理解。

對齊標準，選擇團隊認同的維度指標與監測方式。個體對體驗優劣的主觀感受和不同崗位職責的關注視角不盡相同?？傮w上，我們需要以產品定位規劃為指導，結合客觀資源情況選擇適合的衡量標準。

如上圖舉例，一個對內的商戶操作系統與其他競對在系統操作層面的比較意義不大，度量模型中用于和同類產品對標的功能完整性的參考價值降低，則可以考慮暫不納入監測維度。

確定維度后的下探監測指標是共識最主要的內容。如上舉例，當前業務首要關心產品SOP（Standard Operating Procedure 標準操作程序）“使用率”，而這項指標與已確認的參與度指標定義極為貼合，那我們就不妨直接將該項做為參與度內衡量指標優先接入。

二、共識內容

到了具體的共識內容，我們再按立項之前、項目執行，項目復盤的階段順序聊聊。

1、立項之前

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

02.首期度量的范圍和預期？

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

如上說到，度量需要一個漸進的過程。我們可以選擇由局部擴充至整體，也可以由整體完善至局部。首期度量就面臨著這樣的選擇，當然選擇的范圍也對應著不同的預期。

由局部擴充至整體，圍繞業務當前需求，圈定最小度量范圍。這樣選擇，一方面可以適度減低試跑數據的成本；另一方面，首期度量結果還不便向前比對應用分析，但這不妨礙調研監測到的信息為業務當前需求提供輔助價值。需要注意的是，雖然選擇了由局部開始，但要始終遵循度量模型既定的統一框架，不能過分定制化。

由整體完善至局部，先監測宏觀指標再逐步完善下探。這樣選擇，一般可以快速選定已處于長期監測的指標接入系統，但也因指標較為宏觀，初期不免暫時無法解釋數據現象，就需要多期的下探追蹤來定位原因。

2、項目執行

01.指標統計

這部分是共識內容的主體，具體指標選取與統計方式我們在《體驗度量經驗分享：如何搭建體驗指標模型?》中進行了梳理介紹。這里補充兩個共識小方法，準備詳細參考資料和選取整合已有資源。

對應每次共識的內容，參考資料可以有效提高溝通效率?！罢驹谇叭说募绨蛏稀痹诰唧w可感的案例指標基礎上調整，遠比憑空討論有效。

選取整合已有資源，“避免重復造輪子”。舉例滿意度維度，如此前已建立了相似的NPS調研制度，那便不必費時費力重新發調研問卷或是開發線上場景化調研能力。接入現有調研數據，選擇符合模型需要的數據接入或許更經濟適用。然后，在此基礎上再去優化指標細項與收集方式。

02.分析提煉

指標選取和統計僅僅是準備，怎么應用現有食材炒出好吃的“菜”，目前依舊需要人工分析提煉。

結合業務所需，明確重點分析方向，深挖原因是收獲滿意結果的基礎。面對大量的數據呈現，雖不可預知提煉的結果，但唯有聚焦能減少迷失，盡量避免最終呈現結果過于泛泛。
分析結果往往包含需求洞察、痛點定位等多條信息，整體打包解決稍不實際。為跟進度量結果逐步落地，需明確優先級共識，推動度量不僅僅停留在“報告”的階段。

3、項目復盤

01.如何評定度量的投入產出？

每期度量復盤，除共識達成情況和后期調整外，團隊內對度量本身的投入產出評定常常有被忽略。

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

三、共識方式

最后，簡要聊聊共識的態度與形式。

中立的態度是溝通的基礎。每個環節共識前，可以先單獨收集團隊成員的思路想法，引導大家放心分享自己的見解，提高收集效率，而不需當即討論合適與否。

內部訪談，基于團隊成員職責差異，制定訪談大綱與溝通順序，為方便更高效的溝通與記錄。內部溝通在達成指標統計共識的基礎上，更可以幫我們對產品表象之下的業務邏輯有更加深入的理解。

穩定的節奏，明確每一階段的待辦與負責人，定期組會對齊進度，定期匯總小結，逐層匯報共識，得到更廣泛團隊成員的認可。

以上，便是對往期度量共識中非理論方法部分的梳理。如何溝通沒有標準，共識程度也難以衡量。期待大家提出寶貴意見，共同討論如何將度量的理論方法更好地應用于業務實踐。

作者：李明玥、賀紫蒙

轉載請注明：學UI網》體驗度量經驗分享：如何溝通共識?

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、暗色模式下飽和度不宜過高

高飽和度的顏色能形成強烈的對比。在暗黑模式下使用高飽和度會很刺眼，給用戶很不好的體驗。暗黑模式一般在晚上使用，因此對設計師來說，需要做的是讓整個配色相對柔和，讓用戶感到放松?；诖?，在設計的時候應該將飽和度限制在200-500之間。

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

二、 按鈕要有優先級

在同一個界面，最理想的狀態是只有一個最主要的關鍵按鈕和緊跟著的次要按鈕。這是因為如果一個界面上有太多這種行動按鈕（CTA）按鈕，會讓關鍵操作淹沒在這些按鈕中，讓用戶不知所措。

三、簡化不必要的動詞

沒必要在菜單上增加動詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設計上要盡量避免增加無關緊要的詞，這樣才不會影響用戶體驗。

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

你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來會更加平衡。在決定字體大小時，盡量規范字號的標準。比如標題（16px），副標題（12px），正文（10px），說明文字（8px），這些尺寸都是以2為倍數的。

五、不要混用圖標風格

盡管我知道要做好圖標一致性，但在實際工作中依然經常犯錯。很多設計師經常用不同風格的圖標混在一起，這樣會讓整個UI界面的設計顯得很不成熟。圖標是為了讓用戶更有效率地理解事物。在使用圖標的時候一定要注意圖標的一致性，尤其是一些是一些風格細節。

這里也跟大家分享2個我自己常用的figma圖標庫：

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

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

六、不同背景下的顏色飽和度適當微調

通常情況下，我們會認為一個顏色在深色模式和亮色模式下是用的同一個顏色值，但這其實是錯誤的。一個顏色在亮色模式下看起來非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個問題最好辦法是使用2套不同飽和度的顏色。

七、新手引導多給用戶自主權

App的新手引導決定了用戶第一次體驗產品時的感受。在設計的時候，試著公開需要哪些具體步驟，增加”跳過“和前后移動查看的能力對新用戶來說非常重要。

八、在圖片上增加疊加層

許多網站和App都是用圖片驅動的，但在圖片上直接增加文字內容有時候會被淹沒掉。在圖片上增加一個疊加層可以提升內容的可讀性。

九、信息部分露出

對于一些大屏設備來說，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對于這些閑置的空間來說，盡量通過設計告訴它底部還有更多內容。這對UI和UX方面都有好處，因為空間的使用方式能夠讓用戶清晰的知道所有內容。

十、拆分大段文字

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

十一、Z字形原理

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

十二、擴大可點擊范圍

擴大點擊區域，維護像按鈕、單選、多選等控件的響應尺寸，如果你設計的點擊區域太小會讓用戶點擊困難，造成流失。

十三、盡量使用簡潔的圖標

避免使用花俏和俗氣的圖標，它們會讓整個設計顯得非常不成熟，同時也是很難理解的。用上更簡單的圖標形式，會讓界面更高級。（彩云注：當然越簡單的圖標其實想畫出彩會更難，另外也需要區分不同的場景，像一些運營類的圖標可能會為了活動氛圍做的相對風格化一些。）

十四、正確的文案表達

選錯文案，會讓人們對于任務缺乏興趣，根據上下文使用更合適的詞組。

十五、考慮手勢操作

輕敲和點擊有時候很累人，可能不如使用滑動、拖拽等手勢操作，這些操作會讓界面更簡潔并且也能順利地完成既定任務。

十六、展示部分文案

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

十七、接近法則

”鄰近的物體往往被視為是同一組內容“。有時候為了把內容區分開的更清晰，嘗試用線對相關內容進行分組。（彩云注：其實有留白和不同顏色做區分也是可以的，建議根據自己的設計風格和具體內容來定）

十八、文字控件可視化

在設計控件時，如果可以用圖形可視化的地方就優先嘗試把控件圖形化，除了非常需要很精確的設置參數。對于價格范圍這種，很容易將它可視化為滑塊控件。

十九、占位符要接近要填寫內容

對一些人來說容易理解的東西，對某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內容時出錯。

二十、系列位置效應

根據”系列位置效應“，心理傾向于記住列表的第一項和最后一項，而不是中間項。因此，在任何App中設計導航時，根據應用的上下文保持最左和最右的選項。例如instagram，最左邊是”首頁“，而最右邊是”用戶“。（彩云注：這是一個心理學上的理論，人們對于一系列的材料更容易記住開頭的內容，也叫做首因效應或者首位效應；更容易記住末尾的內容，就叫近因效應。）

二十一、減少點擊次數

在設計任何體驗時，點擊次數都是非常重要的指標。統計用戶需要點擊多少次才能完成他的目標，額外的點擊會減慢整個操作過程。簡化過程，自然體驗就會更好，所以盡可能的減少點擊次數。（彩云注：下面的案例，增加可點擊符號也可以減少用戶思考的時間。）

二十二、少即是多

為了使內容突出，沒有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強的的文字層次結構、字體重量，同時只使用一種字體足以吸引用戶對內容的注意力。

二十三、留白定義重點

留白在設計中非常重要，太少或者沒有留白會使得設計非?；靵y。明智地使用留白可以明確地強調內容。

二十四、別讓用戶閑著

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

作者：彩云Sky

轉載請注明：學UI網》用上這24個UI體驗優化經驗，果然做出來的設計更高級了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司