隨著科技的發(fā)展，人們的工作方式打破了空間、時間的束縛，傳統(tǒng)線下場景逐步遷移到線上，衍生出大量的工具型產(chǎn)品。由于實際業(yè)務場景靈活多變，為了盡可能覆蓋場景需求，工具型產(chǎn)品往往功能龐大且邏輯復雜，經(jīng)常會收到用戶反饋產(chǎn)品「復雜、難以理解」。對于工具型產(chǎn)品的設計者，如何「簡化設計」是他們必須要面對的重要難題之一。
本文將從用戶感知層面嘗試分析用戶感覺復雜的原因，并根據(jù)以往項目經(jīng)驗給出一些工具型產(chǎn)品簡化設計的方法。
提綱：
1、為什么用戶感覺復雜
2、如何簡化概念，降低認知成本
3、如何讓流程簡短高效
4、如何簡化頁面信息布局
5、如何讓操作更輕松
6、結語
你是否曾收到過類似的反饋：
“這文案是什么意思？”、“這能干什么？我需要干什么”、“那個功能在哪里？我找不到”、“要設置這么多項，好麻煩啊”、“這不能拖動嗎？”...
這些都是用戶感到復雜的反饋。從用戶的感知層面分析，讓用戶感到復雜的原因可以劃分為四大方面：概念、流程、界面、操作，以下將詳細闡述原因。
導致用戶感覺產(chǎn)品復雜的其中一個主要原因是：用戶難以理解產(chǎn)品的概念模型。概念模型指事物的基礎定義及行為模式。（例如：汽車，一種在陸地上行駛的交通工具。通常需要司機駕駛，需要消耗汽油... ）用戶根據(jù)概念模型對事物的行為進行預測，構建出自身的心理模型。
因此，當產(chǎn)品沒有清晰、準確地傳達出概念模型，將導致用戶產(chǎn)生錯誤的心理模型。用戶需要在大量探索過程中，逐步糾正自己的想法，最終才能了解產(chǎn)品實際的概念模型。
另外，根據(jù)「雅各布定律」和「設計心理學2：與復雜共存」，用戶基于以往積累經(jīng)驗去理解新事物，即在使用產(chǎn)品前已構建心理模型。而當產(chǎn)品的概念模型與用戶的心理模型不匹配時，用戶在使用產(chǎn)品的過程中將持續(xù)產(chǎn)生認知沖突，也將給用戶帶來巨大的認知成本。尤其對于傳統(tǒng)工具型產(chǎn)品，顛覆型的概念模型，反而提高用戶的認知成本，讓用戶感到復雜難懂。
1.2 流程復雜
工具型產(chǎn)品的流程主要分為兩方面：單功能使用流程、多功能組合使用流程。
在單功能使用流程方面，難免會遇到一些功能在生效前，需要經(jīng)過多個設置步驟的情況。雖然環(huán)環(huán)相扣的流程能夠降低產(chǎn)品的出錯概率，但卻會給用戶帶來更多的成本。對于每個步驟，用戶都需要經(jīng)歷「理解」-「操作」-「反饋」的環(huán)節(jié)。在一些情況下用戶甚至不堪忍受，直接放棄使用功能。例如，在Airtable中創(chuàng)建甘特視圖，需要經(jīng)歷3步才能完成配置，查看到效果。對于一些抱著嘗試心態(tài)的新手用戶來說，這是難以接受的體驗：在還沒理解功能的作用效果前，就要經(jīng)歷如此復雜的流程。
而多功能組合使用流程方面，工具型產(chǎn)品在產(chǎn)品功能設計層面，往往將功能的顆粒度設計得相當精細，以靈活滿足各種場景需要。就Excel中的單元格而言，可設置單元格字體、單元格背景、單元格邊框。但如此精細的功能設計將導致，若用戶需要簡單實現(xiàn)整體的目標效果時，其操作流程就變得十分的冗長。甚至在一些需要重復設置的場景下，工作量將幾何級數(shù)地增長，讓用戶的工作流程將變得極其復雜。
1.3 界面復雜
大多數(shù)工具型產(chǎn)品都希望能在一個界面讓用戶完成所有任務，卻忽略了用戶在現(xiàn)實場景下的使用流程。通常一個任務完成的前提是，需要按照一定的步驟完成若干個細項任務。若無法聚焦于每一個個細項任務，而需要耗費大量的時間精力來排除其他信息的干擾，則會產(chǎn)生“注意力被分散”、“太復雜”等體驗感受，導致最終任務完成難度增加。
對用戶來說，界面內(nèi)的信息越多負擔就越大。工具型產(chǎn)品通常伴隨數(shù)量眾多的功能和選項，一味的平鋪功能，只為了展示自身的功能多樣性，缺乏合理的組織布局，導致用戶需要在幾十甚至上百個選項中進行選擇，則會大大降低用戶使用效率。
1.4 操作復雜
設計者在不考慮具體操作場景的前提下，不同功能均使用同一種交互方式，名義上為了讓用戶降低學習成本，但實際上卻是不負責任地將復雜的理解過程轉移給了用戶。對于用戶而言，復雜的操作可以分為兩種：一種是「步驟復雜」，例如需要多次點擊、頁面跳轉、設備切換等；另外一種則是「認知復雜」，例如交互方式與心理預期不匹配，需用戶自行轉換。無論是哪種，對于工具型產(chǎn)品而言都是災難的。
除此之外，缺乏及時的反饋也會給用戶帶來不必要的麻煩。用戶需要反復操作比操作中的冗余更可怕，就像高速公路的減速帶，不斷降低用戶的效率。
2.1 隱喻、類比已有事物
當產(chǎn)品的概念模型越趨近于用戶的心理模型時，用戶就越感覺產(chǎn)品容易理解和使用，所要求的使用能力和學習成本就越低。而用戶心理模型是根據(jù)用戶的目標，以及其過往的經(jīng)驗構成的。因此在設計產(chǎn)品的概念模型時，應盡量使用隱喻、類比的方式，讓產(chǎn)品的文案概念及交互行為模式）與用戶所熟知事物相近。從而讓用戶建立聯(lián)想，激活行為記憶，降低認知探索成本。
HyperCard，蘋果的早期時間的一款腳本系統(tǒng)。它以「Card」對產(chǎn)品進行命名，同時在產(chǎn)品交互形態(tài)上以一疊卡片的形態(tài)呈現(xiàn)。這讓用戶很容易就聯(lián)想到現(xiàn)實生活中的卡片小冊子，進而快速地了解到產(chǎn)品的大致行為模式。
需要注意的是，傳統(tǒng)工具型產(chǎn)品的用戶往往已被已有產(chǎn)品教育，積累了一定的使用經(jīng)驗、習慣。對于此類產(chǎn)品的概念模型簡化應慎重考慮，因為用戶所建立的心理模型是較難改變的，顛覆性的變化會讓用戶之前付出的學習成本付諸東流。此時可嘗試用戶的其他感知層面切入（流程、原型、操作），以探索簡化的可能。
2.2 巧用大白話
在實際業(yè)務場景中，難免會遇到概念新穎、邏輯復雜的產(chǎn)品功能。由于用戶從未曾接觸過類似的事物，未建立起相應的心理模型。在設計產(chǎn)品概念時也就難以使用隱喻、類比的方式來降低產(chǎn)品的復雜度。此時可采用「目標導向」的設計方法，幫助用戶快速理解產(chǎn)品功能。因為用戶除了基于過往經(jīng)驗建立心理模型，還可根據(jù)目標而對產(chǎn)品的行為模式做預測。
與其生搬硬套地創(chuàng)造概念，不如在合適的使用場景下，使用目標導向的大白話，清晰的傳達出功能的目標效果。讓用戶快速了解產(chǎn)品功能的目標效果，減少全新概念的理解成本。
例如，在交互原型設計中，按鈕往往存在多個狀態(tài)（默認態(tài)、懸停態(tài)、點擊態(tài)、禁用態(tài)）。Figma對其賦予概念“變體（Variants）”，用戶難以對此概念產(chǎn)生目標效果的聯(lián)想，無法建立起對應的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目標效果的大白話“組件狀態(tài)”。
3.1 快速、直觀呈現(xiàn)效果
對于工具型產(chǎn)品來說，效果直觀是非常必要的。一來能讓用戶的探索快速獲得反饋，降低用戶的理解成本。二來能帶來更加輕量的操作體驗，鼓勵用戶探索，給予用戶充分的掌控感。工具型產(chǎn)品的設計者應以此作為設計理念之一。但難免會遇到產(chǎn)品功能的邏輯流程較為復雜，需要經(jīng)歷多個環(huán)環(huán)相扣步驟的情況。而研發(fā)者往往更關注與代碼的邏輯及可維護性，更加推薦邏輯嚴謹?shù)鞒倘唛L的設計。這時設計者應堅守設計理念，不斷在用戶體驗與功能邏輯中尋找平衡，貫徹落實設計理念。
對于冗長的流程，設計者可通過以下方式解決：
（1）根據(jù)場景自動化配置
良好的產(chǎn)品應該是聰明、高情商的，能夠根據(jù)用戶的實際情況進行自動化的配置，以減少用戶操作。在進行自動化配置時，應謹慎梳理清楚用戶的所有場景，以及每種場景意圖，避免過度聰明，導致畫蛇添足。
例如，在Notion中可一鍵創(chuàng)建Timeline視圖，無需用戶進行任何配置。因為其做了場景自動化配置處理：自動配置所需要的字段。
（2）清晰的修改配置入口
在進行自動化配置后，不可避免可能存在場景理解錯誤的情況，導致自動配置的結果不符合用戶實際情況。此時應提供清晰的修改配置入口，例如在用戶可發(fā)現(xiàn)錯誤的地方中提供入口，允許用戶在發(fā)現(xiàn)錯誤后即可發(fā)起修改。
（3）異常后置處理，先讓用戶用起來
不應要求用戶在功能生效前處理完所有異常。因為對于每一個步驟，用戶都要付出理解及操作成本。尤其在處理異常情況時，用戶需要耗費巨大的成本，極有可能因阻礙過大，從而放棄使用功能。設計者應將異常后置，確保用戶能都快速查看功能效果并使用起來。對于異常的問題，應允許用戶后續(xù)持續(xù)處理，不阻斷功能的使用。
例如，在Figma中導入sketch文件會遇到，多種格式適配問題。但不影響導入流程以及FIigma的正常使用，用戶可以在倒入后在對異常進行處理。
3.2 基于目標組合功能，一鍵快速設置
一般來說，工具型產(chǎn)品服務的用戶群體較廣，需要滿足豐富的個性化需求。在產(chǎn)品功能設計上，功能的顆粒度較小，能支持精細化的配置。這樣導致用戶需要實現(xiàn)組合的目標效果時，需要執(zhí)行多個功能配置，整體的配置流程較為冗長、復雜。設計者在設計工具型產(chǎn)品時，除了要考慮單個功能的使用體驗，也要從用戶目標出發(fā)，全局考慮用戶使用產(chǎn)品的整體流程體驗。
如何既能保持產(chǎn)品的「靈活度」以滿足豐富的場景，又能減少整體操作流程，提升用戶效率?！敢绘I操作」及「自定義腳本」是較為有效的方法。
（1）一鍵操作
基于用戶的目標，可以對一些列相關的功能進行組合，允許用戶一鍵設置，快速達到目標效果。同時應存在更多配置的入口，允許進階用戶進行更加詳細的配置。例如，Keynote中可對文本框進行快速樣式設置，設置內(nèi)容包含字體顏色、文本框背景顏色。當用戶需求較為簡單時，只需設置一次即可達到目標效果，而無需設置多次。
（2）自定義腳本
自定義腳本，指允許用戶將一系列操作/設置組合為一個操作組的能力。在一些進階場景，用戶往往存在個性化的需求，對產(chǎn)品功能有著相對固定的使用習慣。自定義腳本，能夠極大幫助用戶減少重復性的操作，提高整體效率。
在Figma中，充滿了類似概念的設計，如：組件、樣式（文字、顏色、效果）。用戶可自定義保存相關的配置參數(shù)，以方便多次復用或一鍵修改。
4.1 圍繞行為組織功能，走一步看一步
在設計界面原型時，需要先了解用戶的任務目標，用戶想做什么，先做什么后做什么。充分掌握用戶心理模型的行為路徑，基于用戶的行為路徑進行組織功能，以確保用戶在每個環(huán)節(jié)中所看到的信息都是必要且準確的。工具型產(chǎn)品通常擁有多個可選設置項，拆分任務步驟可減少用戶被非必選項的干擾。
除此之外，不同的用戶角色的行為路徑也會有所不同，例如：創(chuàng)建者，協(xié)作者，以及是否有編輯權限等等。不同的用戶場景對于功能的訴求也是不一樣的，而這就需要設計師從產(chǎn)品的定位，主流用戶以及使用習慣綜合考量。在優(yōu)先滿足主流用戶場景的基礎功能上，再進行其他場景的功能增減。
4.2 功能層級分區(qū)，巧妙地藏起來
（1）功能分區(qū)
George A. Miller在《神奇的數(shù)字7加減2：我們加工信息能力的某些限制》中表明，人的大腦最多同時處理7±2個信息塊（即5-9個），若超過則出錯的概率將會大大提高。對于無法避免復雜信息的情況下，可以將煩瑣的信息分塊，組織成清晰的層級結構，例如：微軟Office 中頂部工具欄包含上百個功能選項，為了便于用戶能快速找到想要的功能，他們將所有功能進行分塊，包括：字體、對齊方式等模塊。每個模塊下再細分具體設置項，具體設置項又包含了其它功能。基于清晰的層級結構，用戶可快速通過「字體模塊」-「字體設置項」- 「微軟雅黑」三個層級中快速找到想要的選項。
值得注意的是在信息分塊時，需制定出清晰的劃分界限，可通過詢問不同的用戶來判斷界限是否清晰。
與此同時，布局效果是否清晰，對于簡化界面設計而言同樣重要。合理運用「格式塔原理」中的「接近性原則」，將同類元素放在一起讓用戶在視覺上感覺是一組，再根據(jù)同組元素中的重要性不同，大小上也應有所差異。做到讓用戶只看一眼便可快速找到想要的功能。
（2）隱藏高級功能
「帕累托法則（二八法則）」同樣適用于工具型產(chǎn)品設計，即20%的功能影響80%的用戶體驗結果。換句話說，大部分普通用戶經(jīng)常使用的基礎功能僅占20%，但影響程度卻遠超于剩下的80%。所以需將功能劃分為基礎功能和高級功能，在優(yōu)先展示基礎功能的前提下，再考慮高級功能或自定義功能的展示，必要時可將高級功能或自定義功能進行隱藏，但前提需是可見的。例如：更多設置，更多選項等，即對專家用戶始終保持可見，但又不打擾普通用戶。
5.1 減少不必要的操作，使用更自然的交互
簡化操作的過程中，針對不同的操作賦予最自然的交互形式能減少用戶操作過程中的精力消耗。自然的交互應該是用戶無意識的操作，是基于過往生活經(jīng)驗，閱歷，學識等的一種本能，幾乎不需要過多的學習成本即可完成。例如：用戶旋轉一張圖片。相對于在輸入框中輸入旋轉角度參數(shù)而言，將光標直接操控在圖片上旋轉顯得更自然。輸入需要至少三步（點擊文本框-敲擊鍵盤數(shù)字-點擊確認），而直接旋轉只需要兩步（點擊-旋轉）。因為對于用戶而言，點擊圖片進行旋轉更接近現(xiàn)實生活中的操作，不管是交互步驟還是心理認知上，都會降低用戶的操作難度，讓用戶覺得產(chǎn)品更簡單更自然。
5.2 提供及時的反饋與幫助，避免重復操作
在操作過程中得不到反饋，出錯后再重新填寫，同樣會增加操作的復雜性。在尼爾森十大可用性原則中，第一原則就是系統(tǒng)狀態(tài)的可見性。系統(tǒng)需要讓用戶知道自己在做什么，需要讓用戶知道系統(tǒng)做了什么。例如：在表單填寫時及時反饋是否出錯，在格式設置時及時反饋是否生效，可以讓用戶少走彎路。必要時給用戶提供幫助也能簡化用戶操作的復雜性，提高操作的成功率。
引用《簡約至上》中的所說：創(chuàng)造簡單用戶體驗的秘訣就在于把復雜性轉移到正確的地方。任何產(chǎn)品都具有一定的復雜性，設計的目的不是為了消除所有復雜性，而是將它們放到最合適的位置。簡化產(chǎn)品的復雜性替用戶排除不必要的干擾，通過設計師的努力給每一個用戶帶來簡單、愉悅的使用體驗，讓復雜的工作更簡單。
作者：騰訊ISUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
7秒的消費決策中，67%的決策取決于色彩。
色彩是我們感知世界的重要媒介，在設計中僅次于功能的另一要素。色彩與我們的生活息息相關，怎樣科學配色、靈活用色成了絕大部分設計師的難題。
作為一名擁有多年擰螺絲經(jīng)驗的設計師，不免每天都會和色彩打交道，在配色的過程中，你是否也曾遇到過以下困擾：每次做項目隨便吸色？
盲目運用色卡？
配色總是看起來不舒服？
色感差，天天被老板和同事Diss？
…
接下來，請你花幾分鐘看看谷歌等其他大廠，都在用的系統(tǒng)配色方案。以下以船長BI為例，做品牌色彩的規(guī)范引導。
船長BI：
深圳船奇科技有限公司-是中國專業(yè)的跨境電商SAAS系統(tǒng)服務企業(yè)。旗下船長BI，專注亞馬遜精細化運營與大數(shù)據(jù)分析，為不同階段、不同規(guī)模的企業(yè)提供全場景多維度分析，一站式精準推廣和全鏈路供應鏈協(xié)同管理，幫助企業(yè)實現(xiàn)數(shù)智化運營。同是船奇科技也是亞馬遜SPN服務商。
01
1-1 設計主張
船長BI系統(tǒng)是亞馬遜精準化運營及大數(shù)據(jù)下鉆分析的高效化共同體。從單功能運作到多功能融合，再到大數(shù)據(jù)多元化產(chǎn)品下鉆、閉環(huán)及溯源，打破了亞馬遜跨境運營服務商單點運作的局限。我們希望新的品牌色，能夠為船長BI在跨境企業(yè)中營造更加權威、高效向數(shù)智化轉型的視覺感知。
船長BI 設計語言：英文Captain BI Design Language簡稱CapDesign。
經(jīng)過團隊的諸多調(diào)研到佐證,我們將品牌標準色太平洋藍(Pacific Blue)，升級為更加科學、權威、智略的明亮立體的黑綠松石色(Dark Turquoise)。黑綠松石色在跨境電商行業(yè)中具有更多神秘的數(shù)智化意味，在實際應用中隱含著更多的生機和信任，表明了船長對進入數(shù)智化運營新挑戰(zhàn)的氣魄。同時，品牌色的升級能夠快速區(qū)別于競品，形成船長BI獨特的色彩感知，通過色彩感知形成品牌記憶。
色彩命名源自潘通Pantone。
1-2 創(chuàng)建調(diào)色板
人的視覺系統(tǒng)在辨別顏色時，不會把色光分解成RGB或者CMYK幾種單獨顏色，而是按照色相度、純度和明度來判斷的，也就是HSB。HSB模式可以完美固定HSB中的某一個參數(shù)，只對其他兩個參數(shù)做改變或者只改動其中的一個參數(shù)，符合人對色彩差異幅度的感知，而RGB、CMYK都是牽一發(fā)動全身的節(jié)奏。↗
我們以CapDesign品牌基準色#2AC5D4（H=185\ S=80\ B=83) 為起始點，S飽和度、B明度保持不變，H色相以185°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據(jù)。
02
拓展豐富的輔助色
2-1 以鄰近色、互補色、對比色為原則，選擇絢麗多彩的輔助色↗
為了保有更多CapDesign 的品牌基調(diào)，我們選擇了相對較多的鄰近色，以保證整體色韻的清爽感和數(shù)智科技化意味。并利用對比色及互補色擴展色相，選擇更加豐富多元的輔助色，使其色相對比鮮明，以保證能色彩夠滿足各種復雜場景。
Q：色相位到底選擇多少個合適？
A：有的產(chǎn)品選擇7個色相位，有的產(chǎn)品選擇10幾個色相位，都是允許的，選擇的依據(jù)取決于：
1.色彩對比明顯，選擇色相數(shù)少；色彩對比柔和，選擇色相數(shù)多；
2.產(chǎn)品功能的場景簡單，選擇色相數(shù)少；產(chǎn)品功能的場景復雜，選擇色相數(shù)多；
Captain BI 是亞馬遜運營與大數(shù)據(jù)集成，功能交叉比對及數(shù)據(jù)可視場景復雜，為迎合業(yè)務發(fā)展需要，CapColor選擇的色相位為13個。
2-2 校正輔助色(波長和振幅)
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于每個色相的波長各不相同，導致色彩在感官感受上存在差異。
在可見光波譜當中，波長越長其穿透力就越強；紅色的波長是最長，穿透力就最強，感知度最高。↗
為了讓不同色相在視覺感官上看起來更加協(xié)調(diào)，需要對色板的明度和飽和度進行反復的校驗，以保證視覺感官更加和諧舒適。
校正原則
A.色相最好維系在同類色(色相環(huán)中15°夾角內(nèi)的顏色)↗
B.色相感官保持平衡(明度和飽和度)
C.保證視障群體的識別度(WCAG 對比度)
調(diào)色的技巧
淺灰色調(diào): 飽和度減少(S↓)，明度增加(B↑)
深色色調(diào): 飽和度減少(S↑)，明度增加(B↓)
使用HSB調(diào)色模式時，可以參考以上規(guī)律，能讓快速調(diào)和想要的顏色。校正后得到了以下色域清晰、對比明顯的主色及輔助色。并且針對視障群體進行了色彩測試。
2-3 拓展梯度色譜
校正主色和輔助色后，我們需建立完整的梯度色板，來滿足不同場景下顏色的應用。建立色彩層級，以提升品牌感知，達到信息傳達辨識、強化界面層級等作用。
在梯度色板系統(tǒng)中，很多配色產(chǎn)品都是使用Tints and shades系統(tǒng)：通過在原有色相的基礎上增加白色或者增加黑色，來改變它的明度和飽和度，形成梯度色板。但這種方法得到的調(diào)色板往往比較刻板生硬。CapColor在Material Design-Color的基礎上進行了細化，構建更有層次感、空間感、立體感的梯度色板。
CapColor梯度色板：
1.在Primary的基礎上，使用Tints and shades系統(tǒng)找到Light和Dark：
Light=(White+primary) 95%疊色；
Dark=Black 60%疊色；
Primary=原色相。
2.結合Material Design-Color實踐，得到CapDesign梯度色板及相應的參數(shù)。
CapColor選擇10階梯度，對比穩(wěn)健，更能凸顯船長系列產(chǎn)品權威和成熟的形象；9階梯度相對生硬跳躍，12階梯度過于柔和平滑。
有的色相穿透性強、飽和度高，所以還需要進一步的校驗，如藍色 RYB：
運用以上的方法，得到CapDesign豐富的調(diào)色板，為后期業(yè)務做支撐：
03
易用的中性灰色
Captain BI系統(tǒng)大部分是由容器、面板、列表、卡片等其他組件及元素構成。中性色為系統(tǒng)銳化布局、表達邊界、建立信息層次起到?jīng)Q定性作用。
3-1 中性色
中性色的搭建同時滿足暗黑模式、換膚及印刷等諸多場景，故在實現(xiàn)時按照透明度的呈現(xiàn)方式。
3-2 黑綠松石灰色
中性黑綠松石灰色解決更多復雜的場景，如表格和表單雙底色、圖標的顏色等。中性黑綠松石灰色增強布局、區(qū)別背景，起到強化信息層次的作用。
黑綠松石灰在中性灰色的基礎上增加色相和飽和度，這樣得到的藍灰色還是有些許生硬，還需要對飽和度和明度進行微調(diào)，讓顏色更有層次感。
中性黑綠松石灰的方法：
在配色模式HSB中：
H=185(Brand Color)；
S=3(必要時微調(diào))；
B=保持不變。
3-3 WCAG 2.1測試
為保證視障用戶的使用，保證足夠的對比度，CapDesign 遵守 WCAG 2.1 的標準，對調(diào)色板對比度進行了可用性測試，為后期靈活用色奠定基礎。以中性灰色為例：
WCAG 2.1中規(guī)范了A、AA、AAA的對比值范圍及使用場景，感興趣的朋友可以前往WCAG 2.1官網(wǎng)詳細了解，在這不在贅述。
3-4 場景案列
實踐是檢驗真理的唯一標準，以下通表格的微交互對中性色進行完美的詮釋：左邊的表頭和表格背景粘連到一起，視覺及信息識別困難。通過交叉運用中性灰色，明顯右邊的表格結構、信息層級得到強化，視覺更聚焦。
結語
主觀情感的取色，一開始可能沒遇到什么大問題，但隨著產(chǎn)品不斷完善，主觀取色往往不能滿足業(yè)務發(fā)展訴求?？茖W的系統(tǒng)配色，真正滿足和服務設計；同時對設計一致性及提升團隊效率起到肯定的作用。
通過這個漫長的配色過程，你是否重新審視過去設計中的配色方法？希望對配色困擾的你有所幫助。
色彩系統(tǒng)中的系統(tǒng)配色部分已經(jīng)完成，接下來我們將死熬，續(xù)更系統(tǒng)配色在實際項目中的應用，做到科學配色、靈活用色。
作者：楚焱UX
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
做b端產(chǎn)品的設計師都知道，為了提升開發(fā)效率，我們的前端在投入開發(fā)前，一般會選擇一種第三方前端框架作為底層來進行組件封裝。所以開始內(nèi)容前，我想先聊一聊第三方的UI框架。
目前國內(nèi)主流UI框架且個人工作過程中接觸使用過的有：
其他不太常用的框架我自己了解不多，如果有了解的朋友，歡迎在留言區(qū)討論。
我個人比較喜歡使用【Ant design】，一方面最先接觸Ant design，另一方面資源很全，下載的源文件基本能滿足大部分通用功能，很多控件（比如：各類選擇器、穿梭框等）的視覺與交互體驗也相對較好，可直接復制組件粘貼至設計稿中。
但前端同學更傾向于【Element】，我目前做的幾個項目都是基于Element組件封裝的，據(jù)前端同學說他的組件封裝簡單容易修改，對于沒接觸過框架的同學也方便上手無障礙。所以基于此，為了提升開發(fā)效率，兼顧全局，我們的項目都是采用的【Element】，我也是花了一些時間專門熟悉新的組件。
1.1UI樣式對比：
截取各官網(wǎng)中 Table 的基礎界面樣式，如下圖：
兩個產(chǎn)品示例出的默認組件樣式有些許區(qū)別，【Element】直接列出了不同的樣式類型， 而【Ant design】是結合功能綜合展示的。樣式皆可根據(jù)相對應的參數(shù)進行修改，前端同學在開發(fā)過程中可直接按照設計稿的標注進行修改樣式即可。如果風格一致，直接使用組件默認樣式也是可行的。
如果是數(shù)據(jù)信息平鋪且單一的項目，直接使用第三方組件庫表格的基礎用法，視覺與交互也能夠滿足大眾審美和習慣，普通后臺簡單數(shù)據(jù)表格是能夠滿足需求的。
像我現(xiàn)在負責的其中一個項目是供應商后臺管理系統(tǒng)。就是直接用【Element】，作為數(shù)據(jù)統(tǒng)計信息展示完全足夠，運營運維同事使用時也表示還算滿意。
但有些復雜的B端后臺界面除了承載信息，還有很多相關的操作與處理。產(chǎn)品供給B端客戶使用，數(shù)據(jù)文檔量大且類型繁雜，并且相互間有不同的關聯(lián)關系。很多情況下需要重新根據(jù)需求設計，且為了兼顧開發(fā)工作量盡可能的在設計上找到折中方案。這就要求最好能夠從框架組件中衍生出來，最少的修改滿足更多的需求。
因我們已確定使用【Element】故而以下所有的對比，以此框架中的 Table 組件功能為基準，進行功能有無與相關差別性的比較。
由上對比看來【Element】與【Ant design】功能基本一致。
需要注意的是：上圖沒有的功能組件，并不代表是不能夠實現(xiàn)，前端同學是可以基于組件重新寫的。
可能很多人會問市面上已經(jīng)有 Ant Design 如此成熟的 B端設計框架后，可以選擇直接使用，為什么還要增加開發(fā)的負擔。
開源確實是非常好的一件事，但是從另一方面考慮，市面上包含Ant Design和Element這一類平臺，都有很多不同點，同時并不是所有的組件Ant Design 都會提供，企業(yè)級產(chǎn)品會有很多自身個性化的需求，我接觸的項目一般是把 Ant Design 當作基礎框架，或者底層參考，在此基礎上去做設計框架。
當然在小項目或者初期產(chǎn)品的情況，為了提升效率降低成本會直接使用開源組件庫，各有千秋，最終目的是為了更加有效、好用的完成項目。
當使用組件時，并不需要設置間距等規(guī)范，可直接選擇一種一般不會有太大問題。更多的是關注表格中承載的數(shù)據(jù)字段類型。比如：
文本字段：可點擊的字段、普通文本類、數(shù)字字母等，此類長短參差不齊的，最好給出左對齊；
既定字段：日期、時間、部分枚舉類等，字符數(shù)一致且較短的，可與表頭標題居中對齊；
特殊字段：金額、狀態(tài)標簽、類型標識等業(yè)務性較強的，可根據(jù)相關特性與閱讀習慣確定其對齊方式。
不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。比如：普通文本若超長，可在鼠標hover狀態(tài)時將該單元格展開列出全部字段信息?；蛞詔ips形式，跟隨鼠標位置展示全部信息。
表格（Table），又稱為表，是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。是B端產(chǎn)品中一種常見的信息展現(xiàn)形式，它是所有B端組件中信息展示密度最高，同時涵蓋了B端的所有場景的一個重要的組件。
表格屬于列表的一種。列表分為兩種：
列表擁有一對多的數(shù)據(jù)結構，能夠讓用戶理清一條數(shù)據(jù)下的多個對應關系，并且多個對應關系是相互并列。列表能夠將數(shù)據(jù)在一列中井然有序地展示，保持數(shù)據(jù)的有序與整潔。常見的使用場景比如郵件、待辦事項等等。
在多維度的數(shù)據(jù)分析中，最常見的就是表格，使用多維度數(shù)據(jù)進行統(tǒng)一的結構化展示，讓用戶清晰地看到在同一主題下的多條數(shù)據(jù)的對比，使數(shù)據(jù)能夠進行多維度的展示，保證數(shù)據(jù)的完整性。
本篇文章想要說明的重點就是多維度表格樣式。
表格常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同出現(xiàn)。在企業(yè)級中后臺中，具有以下優(yōu)勢：
列表屬于形式十分單一的組件，對于沒有經(jīng)驗的設計師來說，會認為能夠調(diào)整的地方實在太少，往往在思考層面就會有所不足。對于一個B端表格來說，它需要具備數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計，因此功能多而全，很難思考解決問題思路。
通常設計師設計單個組件，都會有較好的全局意識。而到了多組件的聯(lián)動時，就會出現(xiàn)問題。比如在表格中，除了表格本身，還會有搜索、篩選、視圖、分頁等操作，如果不對多組件的交叉使用進行思考，也會缺少對于這些場景的設計。
在列表中，會承載多種多樣的字段類型，而每一個字段類型都會有相應的差異。形式的不同落到列表上就會有不同的呈現(xiàn)形式，在關鍵數(shù)值的處理上，也會差強人意。因此看上去簡單的一個列表，其實會有很多需要設計的點。
設計過程中如何在滿足業(yè)務需求的基礎上平衡用戶的瀏覽目的和設計者的傳達目的，如何讓表格在表現(xiàn)層更合理、在操作層更易用，是很考驗產(chǎn)品設計師的數(shù)據(jù)整合能力。
對于多數(shù)B端管理系統(tǒng)而言，數(shù)據(jù)的查詢和管理都是非常重要且高頻使用的功能，所以常規(guī)項目中會包含大量的表格頁面。甚至，有的中小型項目的90%的導航一級頁面都是使用表格，而不存在其它頁面形式。所以，表格的優(yōu)劣對用戶工作效率和平臺體驗可以產(chǎn)生決定性的影響。
而優(yōu)秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據(jù)具體情況具體分析。
表格的使用場景主要分為四類：數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作與數(shù)據(jù)統(tǒng)計。
表格的數(shù)據(jù)瀏覽從本質上就是對大量數(shù)據(jù)進行尋找與操作，在此場景下用戶需要進行高效準確的數(shù)據(jù)查找。當用戶需要對信息進行排序、搜索、篩選、以及相關業(yè)務處理等復雜操作時，表格結構能夠很好地保持頁面效果的穩(wěn)定性與一致性，提升用戶的操作和閱讀效率。
表格的數(shù)據(jù)新增場景從本質上是將復雜的數(shù)據(jù)結構，通過系統(tǒng)字段類型的相應規(guī)則，錄入保存到系統(tǒng)中。這也就我們常說的增刪改查的“增”，通常是一個比較常規(guī)且高頻的操作。
分為對單個數(shù)據(jù)的操作、單行數(shù)據(jù)的操作、多行數(shù)據(jù)的操作三種情況。
單個數(shù)據(jù)的操作：就是常見的快捷編輯，可以點擊快捷編輯按鈕，在原位對單個數(shù)據(jù)進行操作。入口一般在數(shù)據(jù)行內(nèi)。
單行數(shù)據(jù)的操作：主要通常會采取兩種路徑進行操作：一種是進入用戶詳情頁界面，對一整列數(shù)據(jù)進行編輯，這種情況通常都需要多個數(shù)據(jù)進行處理，因此進入編輯頁面更容易尋找。另一種是進入彈窗進行操作，這一方案路徑更加清晰便捷，同時和新增可以共用一套控件。
多行數(shù)據(jù)的操作：主要采取多選過后的操作方式：當用戶想要對多條數(shù)據(jù)進行操作時，就需要對多個數(shù)據(jù)進行checkbox 的勾選，從而滿足多行操作的需求。入口一般在篩選操作欄。
表格適合信息的歸納與分類，數(shù)據(jù)經(jīng)過歸納整理和合理布局后，更易于用戶在信息之間進行對比，快速定位、查詢其中的差異與變化、關聯(lián)和區(qū)別。
主要針對用戶需要審查分析。目的是在通過大量的數(shù)據(jù)分析去得出某一些結論，由于關注的數(shù)據(jù)會有主次之分，數(shù)據(jù)與數(shù)據(jù)之間也會有內(nèi)在聯(lián)系，用戶會更加跳躍地掃視頁面，而且會更加反復地審查數(shù)據(jù)。
表格的基本設計原則是“全面整合并呈現(xiàn)業(yè)務數(shù)據(jù)，提供順暢閱讀體驗，便于用戶發(fā)掘重要信息，進行便捷操作”，滿足業(yè)務需求+符合用戶心智模型。簡而言之設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。
表格層級分明、一目了然，讓用戶更多地感受表格承載的內(nèi)容信息而不是表格的形式。
對于提高表格查找效率，這里給出一些我個人的建議：
列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。
表格應該是可交互的，對于查找好的數(shù)據(jù)能讓用戶迅速找到對應操作進行決策，如導出、編輯等的快捷操作處理。
處理交互提效建議：
B端產(chǎn)品大多數(shù)業(yè)務場景都是使用基礎表格，但在B端產(chǎn)品的業(yè)務多樣性使得很多特殊的表格有它獨特發(fā)揮的空間。除了了解基礎表格樣式以外，了解更多的表格類型也能幫助設計師在做復雜項目時更加得心應手。
基礎表格樣式，是由行與列的單元格組成，能滿足用戶多維度查看數(shù)據(jù)的需求。通常用于橫向表格的縱列數(shù)據(jù)較少時，使頁面不需要滑動條也可以展示完全。操作項一般置于頁面最右側，便于用戶瀏覽完成后進行操作。
表格中的數(shù)據(jù)為包含與被包含的結構時，可采取樹形表格。
每一個條目可展開或折疊包含的更詳細的信息，也包含嵌套子表格。通過逐級大綱的形式來展現(xiàn)數(shù)據(jù)間的層級關系，讓整個信息結構變得一目了然。非常適合大型數(shù)據(jù)表或者項目管理工具中。
一條主數(shù)據(jù)下有多條數(shù)據(jù)結構不同的關聯(lián)數(shù)據(jù)進行嵌套時，這時候就可以用子表格進行創(chuàng)建。它能夠對主數(shù)據(jù)進行更加細致的解釋，詳細地了解主數(shù)據(jù)中數(shù)據(jù)的含義。結合層級表的使用場景，多以查看為主，編輯需求較少。
設計中需要考慮：表格中當父數(shù)據(jù)刪除時，子數(shù)據(jù)如何處理？設計上對父子之間的關聯(lián)有著何種限制？
當一條主數(shù)據(jù)下有多條數(shù)據(jù)結構不同的關聯(lián)數(shù)據(jù)進行嵌套時，這時候就可以用子表格進行創(chuàng)建。
它能夠對主數(shù)據(jù)進行更加細致的解釋，詳細地了解主數(shù)據(jù)中數(shù)據(jù)的含義。從表象上看，就是在一個表格中還能嵌套另一個表格或其他信息。
當一個表格里面有多條數(shù)據(jù)在同一個小范圍的維度進行展示時，或者說表頭有很多分組進行區(qū)分，它就是交叉表格。
它能夠通過硬拆分將數(shù)據(jù)進行切割，能夠滿足具體業(yè)務上的需求。
當一個表格里面有多種圖表數(shù)據(jù)進行展示時，他就是圖表表格。用戶點擊某一數(shù)據(jù)后，直接跳出數(shù)據(jù)的統(tǒng)計圖，方便用戶進行對比。同時這一功能也可以通過儀表盤這樣的功能去解決，是目前很多產(chǎn)品最愛做的數(shù)據(jù)可視化。
除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關注的數(shù)據(jù)。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調(diào)。
可以用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進行排列。此外，卡片彼此之間又形成一個整體。
卡片是一種承載信息的容器，對可承載的內(nèi)容類型無過多限制，它讓一類信息集中化，增強區(qū)塊感的同時更易于操作；卡片通常以網(wǎng)格或矩陣的方式排列，傳達相互之間的層級關系。適合較為輕量級和個性化較強的信息區(qū)塊展示。
注意：在有限的表格空間內(nèi)需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。
在實際工作中，上述表格類型還有可能互相結合，以更好地達到相應的分析目的。比如垂直–層級，矩陣–數(shù)據(jù)立體表等。
信息內(nèi)容的有效傳達是表格設計的本質，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內(nèi)容上。所以，邊框的顏色應非常淡，不能妨礙快速瀏覽。
表格有均勻而明顯的分割線，邊框單元格比較明顯。
適合：對于數(shù)據(jù)之間的關系緊密（列信息較多而沒有足夠空間用留白來分割信息）且有對比關系的。
僅顯示水平線可減少整個網(wǎng)格的視覺噪聲。
適合：它能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數(shù)據(jù)對比時的速度；因此對于所有數(shù)據(jù)集大小，此樣式都是最常見的。
隔行交替使用不同底色來區(qū)分數(shù)據(jù)。
適合：每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法；對于較大的數(shù)據(jù)集，建議使用此樣式，在較大的數(shù)據(jù)集中，交替模式將很清晰，并且不會引起特定行突出顯示的混亂。
移除所有分割線，通過盡可能減少視覺噪聲來創(chuàng)建極簡外觀。
適合：對于小型數(shù)據(jù)集，如果用戶在閱讀時不需要幫助就可以保持位置，則建議使用此樣式。
前面我們聊了表格的行元素和列元素相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強調(diào)行、列、單元格。
水平型會弱化列的存在，強調(diào)行信息的連貫性，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描，適合大量信息的瀏覽，是b端產(chǎn)品用的比較多的一種布局。
垂直型是在行分割的基礎上，通過強化列的視覺特征來突出不同列信息的對比。
矩陣型的表格有均勻統(tǒng)一的分割線，邊框單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合并的情況也屬于矩陣型。
設計建議：
表格中所承載的數(shù)據(jù)信息才是主體，在進行表格設計時，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數(shù)據(jù)信息上，而不是無關的邊框、底色等。
表格由內(nèi)（展示項）、外（操作項）兩部分組成，其中內(nèi)部構成元素包括標題、表頭、表體等；外部元素包括篩選區(qū)、按鈕區(qū)、底欄等，如圖：
除了表頭和列表內(nèi)容外，其它模塊內(nèi)容都根據(jù)實際需求應用。任何表格設計的第一步都是制定大框架，即包含的模塊和對應分布位置，再展開后續(xù)的細節(jié)設計。
1. 標題
標題是整個表格內(nèi)容概述的名稱，一般會放在表格的左上角，符合用戶的閱讀習慣，同時也能突出標題的重要性。但在有些情況嚴格意義上的標題則不存在，會被頁面標題、面包屑或其他內(nèi)容代替，主要看其能否表達對表格的概括。
標題盡量簡潔明了，不要太長。如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。
篩選操作區(qū)方便用戶快速定位查詢數(shù)據(jù)與操作數(shù)據(jù)，是承載表格核心功能“增刪改查”的重要橋梁。篩選操作區(qū)的排序方式對整個表格“好查找”起到了至關重要的作用，所以表格設計篩選操作區(qū)的設計至關重要。
表頭信息是對數(shù)據(jù)屬性的分類或基本概括，可以理解為表格總結，表頭也可以指行列標簽，是對所屬行或列的描述。表頭也可以承擔一些簡單的篩選、凍結與排序，方便用戶對具體的行列進行篩選操作。
表頭是用戶快速瀏覽表格布局的關鍵信息，表頭字段應當符合人們的思維慣性，保證大部分用戶能理解數(shù)據(jù)。
是表格的主體區(qū)，承載用戶的每一條數(shù)據(jù)，也是整個表格的核心。是由一個個的單元格組成，單元格的排列組成行或列，行/列中的數(shù)據(jù)可以是文本、計數(shù)、百分比、狀態(tài)、操作等任何形式，在表尾還可以進行數(shù)據(jù)統(tǒng)計，例如合計、平均值等。
單元格的大小行高都會直接影響用戶使用表格的體驗。單元格的設計上也會有很多設計思路，在后半部分也給他家提供了我自己的看法。
底欄位于表格最下方，一般展示正文的數(shù)據(jù)概要信息，有時也做數(shù)據(jù)的分類統(tǒng)計，或者配合篩選操作區(qū)放置批量處理操作、備注說明等內(nèi)容。
分頁是不屬于表格當中，但當數(shù)據(jù)超過用戶所設定的閾值時，就需要使用分頁拆解數(shù)據(jù)，所以分頁和表格是經(jīng)常聯(lián)系在一起的。分頁一共有：基礎型、迷你型、完整型三種類型。而如何進行跨頁的操作，一直都是分頁在B端中的難點，需要有好的思路與邏輯，在分頁模塊中與大家聊聊。
作者：789研習社 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
表格系列第一篇我們聊了表格的基礎內(nèi)容和表格的組成要素，包含表格由內(nèi)（展示項）、外（操作項）兩部分組成，如圖：
表格作為展現(xiàn)結構化數(shù)據(jù)最為清晰、高效的形式，常和按鈕、搜索、篩選、分頁等其他元素一起協(xié)同，構成表格頁。通常表格頁面包含三個部分：數(shù)據(jù)過濾、數(shù)據(jù)操作、數(shù)據(jù)查看。
數(shù)據(jù)過濾是對數(shù)據(jù)進行篩選的部分，由搜索、篩選、標簽這三個部分組成。產(chǎn)品設計上提供多維的篩選和排序，將操作者所關注的數(shù)據(jù)展示到前面，便于快速查看、對比、分析信息，是一種增加用戶效率的有效方式。
一般搜索和篩選會同時出現(xiàn)，但是兩者一般很少同時使用來對數(shù)據(jù)進行定位；
搜索的交互觸發(fā)方式有“實時篩選”和“點擊按鈕觸發(fā)篩選”。實時篩選只適合數(shù)據(jù)量較小、數(shù)據(jù)嚴謹?shù)谋砀耥撁妫ㄗh謹慎使用?！包c擊按鈕觸發(fā)篩選”適合大部分表格場景。
因用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。
用戶搜索意圖不明確時，將用戶的查詢與待檢索的內(nèi)容進行模糊匹配，使用模糊搜索時一定要結合自己的實際場景，慎重使用。
優(yōu)點：只要有相關的內(nèi)容都會被檢索出來，減少了精準搜索帶來的記憶負擔；
缺點：容易把相關的信息也帶出來，例如檢索地址廣州，把廣州的相關編碼也匹配出來。
用戶在搜索時，針對某一數(shù)據(jù)字段搜索，來查找所需要的數(shù)據(jù)。
優(yōu)點：搜索匹配精準度高。
缺點：每次只能對單一條件進行搜索。
搜索根據(jù)表現(xiàn)形式，可以分為以下四種類型：
單屬性精確搜索：通過某個特定屬性就可以快速定位到目標數(shù)據(jù)，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
切換屬性搜索：可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。
多標簽模糊搜索：表格多個數(shù)據(jù)都具有特征，往往業(yè)務要求對數(shù)據(jù)的精確度較高。
多屬性組合搜索：可以輸入多個字段進行組合搜索（取并集），對空間的利用率高，適合更加復雜的列表內(nèi)容。
篩選是將用戶所需數(shù)據(jù)選出展示，其余數(shù)據(jù)暫時隱藏，通過篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶輸入的過程，提升查找效率。一般篩選有三種形式：
平鋪篩選就是將篩選項的內(nèi)容，直接展示于頁面之上，用于篩選條件很多，單獨篩選條件對應數(shù)據(jù)無交叉，常見于信息密集型產(chǎn)品。
優(yōu)點：可以承載多維的數(shù)據(jù)信息，選中項的可見性高，用戶理解成本與操作成本低，且提高了用戶篩選的效率。
缺點：占用太多頁面空間，影響首屏的展示效率，增加用戶的決策時間。一般配合“勾選即執(zhí)行”使用，因此在執(zhí)行篩選的過程（動畫或加載時長）可能分散用戶精力。
通常電商類產(chǎn)品在篩選區(qū)往往采用平鋪布局。
條件篩選是最常用的篩選交互，便于從多個維度篩選，應對各種復雜的篩選情況。條件選擇完后，選擇觸發(fā)篩選（若篩選條件不交叉可以選擇實時篩選）。
優(yōu)點：空間利用率高，起到了很好的收納作用，整體頁面更加美觀。
缺點：當篩選過多時，信息量過于冗雜繁多。
2.3 表頭篩選
優(yōu)點：篩選當前列，更直觀，一般情況下表單左側數(shù)據(jù)篩選頻次越高。
缺點：篩選的內(nèi)容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學習
2.4 如何合理的使用篩選項
信息排序：基于用戶使用場景，以目標導向為依據(jù)，將高頻的篩選項排列到前面，低頻的篩選項置于后面。
默認折疊低頻篩選項：當篩選條件有高低頻之分，且對頁面空間要求較高時，通過展示高頻篩選項、隱藏低頻篩選項，更好的提升用戶體驗。
所有篩選項都很低頻：以點擊高級篩選按鈕的形式觸發(fā)，將全部篩選項置于氣泡或者彈窗之中。
在企業(yè)級中后臺中，用戶查看的數(shù)據(jù)往往屬性較多且不唯一，通過簡單的檢索方式很難精確定位到目標數(shù)據(jù)，所以，在實際使用時，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、標簽切換組合出現(xiàn)，形成多屬性組合檢索。
三、tab標簽
標簽切換一般用于和時間、狀態(tài)的流轉有關，且沒有交集的數(shù)據(jù)內(nèi)容。數(shù)據(jù)類型在5個以下的建議采用tab頁切換的方式進行交互，展示清晰，用戶操作效率高；超過5個可以考慮下拉選擇或模糊搜索。
優(yōu)點：根據(jù)標簽，可以很清楚知道劃分，篩選的準確性高，切換tab就可以篩選內(nèi)容。
缺點：分類需覆蓋選項，并且保證每一項沒有交集，分類不能過多，超過7±2個選項可選擇下拉篩選。
在使用中，索引本身應該是0思考成本的，否則就失去了索引的核心價值。圍繞這一點，有兩個設計原則：
1）寧少勿多和高頻前置：即不要揣測用戶需要，最常使用的展示位置盡量靠前。
2）當搜索項不可避免的比較多時，可以進行分類展示，降低尋找成本。
數(shù)據(jù)操作是表格的操作部分，根據(jù)操作對象的不同，可以分為：
單行操作也稱行內(nèi)操作，常見的顯性與隱性兩種方式。
1.1 顯性操作：
操作項顯示在行內(nèi)，直觀；文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將相對低頻操作選項折疊收起，點擊"更多"或“...”下拉顯示。操作按鈕致灰時，鼠標選中可顯示原因。
如果單行操作不那么重要，或者說行操作過多影響用戶閱讀時，可將所有的操作進行隱藏；
當用戶鼠標懸停時進行展開所有操作，界面簡潔，留更多的空間給需要查看的數(shù)據(jù)內(nèi)容，減輕空間壓力，減少干擾。這種方式能最大程度上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學習成本。
a、對齊式
將所有操作進行整齊排列，一般是一個操作對應一列，當有操作缺失時，展示為空，這種方式能夠讓用戶直接了解到操作的缺失，但反復的出現(xiàn)會造成表格視覺上的冗余，適合列數(shù)較少的表格使用。
將所有操作按照一定的預設排列順序進行平鋪，這種方式能夠適應B端的大多數(shù)場景，將操作都簡單平鋪出來雖然看上去簡單粗暴，但是在實際工作中，也是一種不錯的處理方式
設計點：操作按按鈕是全局操作還是單行操作其實是可以根據(jù)具體業(yè)務場景來決定的，判斷用戶批量操作是不是高頻功能，如果是，就采用全局操作，如果操作是低頻操作，那么完全可以只提供單個操作功能。
二、批量操作（表格外）
批量操作適用于數(shù)據(jù)量較大的表格，通常把操作放在表外部上方，這樣操作更便捷。批量操作允許用戶對一行或多行對象執(zhí)行操作，通常與復選框操作配合使用，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節(jié)省用戶時間，避免重復對多行進行相同操作，分顯隱性操作：
較為常用，外漏操作簡單易懂。如有贊的批量操作，表格左上角和左下角都有，這樣不管用戶從上往下選還是從下往上選的場景都能覆蓋；飛書的批量操作外漏在表格表格的右上角，雖然按鈕放在右側符合用戶右手操作鼠標的習慣，而且考慮到適配問題，但是批量操作的路徑不符合用戶的操作動線，路徑變長，大家可自行抉擇
容易造成記憶負擔，增加學習成本，適合批量操作較低頻的操作，產(chǎn)品沒有那么復雜的產(chǎn)品。如飛書文檔
統(tǒng)攬全局，無需選擇數(shù)據(jù)內(nèi)容即可進行的操作，常見的【新增】、【導入】操作。
數(shù)據(jù)查看是表格的主體部分，是信息的主要承載區(qū)域。在開始之前，我們先來看看該區(qū)的結構：主要由表頭、行、列、單元格四個部分組成。
每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數(shù)據(jù)類型。
表頭在展示信息的時候盡量概括、準確、簡化，達到節(jié)省表格頭部空間，引導用戶的注意力聚焦于表格中的數(shù)據(jù)本身。表頭并不是表格的必要元素，當數(shù)據(jù)本身能自我表意的時候（例如郵箱），表頭是可以刪減掉的。
通常，表頭的設計會和下方列表設計有一定的區(qū)分，標頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗等方式來做區(qū)分。
根據(jù)表頭的構成，可以分為以下三類：
除了容納行標簽之外，表頭也可以添加排序、搜索、篩選等功能，通過對表頭標簽的篩選可快速完成篩選條件。這些功能受列的影響，一般只能做單次篩選。雖然表頭篩選能在一定程度上節(jié)約空間，但對于復雜業(yè)務的產(chǎn)品來說，數(shù)據(jù)信息列多，高頻篩選功能可能會被遮蓋，表頭復雜影響用戶表格閱讀，不推薦使用。
可配置列與配置篩選條件的功能類似，同樣是考慮到不同角色的用戶，查看數(shù)據(jù)的視角不一樣，對應的關心的字段也會不一樣。
有些表格由于數(shù)據(jù)量較大，需要對頁面的上下滾動完成對數(shù)據(jù)的查閱，對表頭進行固定，可以幫助用戶更快地找到單元格的屬性和含義，尤其是單元格屬性信息數(shù)據(jù)沒有特征時（比如都是數(shù)字、百分比、姓名等）固定表頭可以大大提高使用效率。
當然還有固定列，當表格需要展示不同類別的數(shù)據(jù)較多一屏展示不下，可以對首尾字段進行固定，讓用戶通過左右滑動來實現(xiàn)對數(shù)據(jù)的快速翻閱，滿足用戶對數(shù)據(jù)的認知以及對數(shù)據(jù)操作的需求。
注意盡量避免橫向滾動：正常鼠標橫向滾動是需要用戶按住 「Shift + 滾動」 才會使表格進行滾動，對于所有的鼠標用戶而言，橫向滾動都是極為痛苦的。
表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據(jù)上下文關系來進行減短簡化，以達到節(jié)省表格頭部空間和減輕視覺壓力的作用。當數(shù)據(jù)結構比較復雜的時候，使用多級表頭來體現(xiàn)表頭與數(shù)據(jù)的層次關系。
對于比較復雜的表頭，可以定義一個專有名詞，如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。鼠標hover上去對專業(yè)術語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。
如果表格數(shù)據(jù)可以自我解釋，表頭就不是必須的。例如電子郵箱的收件表格，每列數(shù)據(jù)區(qū)別度高不會混淆，去掉表頭也能輕易閱讀。
表體部分所需要注意的設計點比較多，內(nèi)容包括了數(shù)據(jù)的對齊方式、字體、分割線、行高、數(shù)據(jù)顯示、單元格、行與列等，下面我們來依次聊聊。
表格內(nèi)數(shù)據(jù)按照格式塔原理進行對齊，能讓表格更加規(guī)范易理解，營造出良好的視覺引導線，視線流動更順暢,提升數(shù)據(jù)的瀏覽效率，讓用戶快速的捕捉到所需內(nèi)容。其對齊規(guī)則如下：
符合正常的心智模型，便于用戶掃描過程中快速定位到下一行文本，左對齊的文本在展示的時候起到了縱向分割線的作用。多行情況下，居中和頂部對齊都是可以的。
包含金額、長寬高等需要關聯(lián)比較的數(shù)字字段，這是因為我們在對比數(shù)字時，首先看個位，然后十位、百位等。
比如日期（2020-11-11），狀態(tài)文字（未審核、已收款等）或者存在布爾關系的文本（是/否、男/女等），字段固定不變，居中對齊能更好地信息呈現(xiàn)。這里根據(jù)業(yè)務也可以按照文本型左對齊處理，讓用戶查看表格不會感覺混亂。
對齊方式保持相同可以使表格更好閱讀，上下文保持一致，能保持表格豎直方向整潔，營造一致性和上下文環(huán)境。多級表頭：多行或多列合并居中對齊，最底層表頭可以按其數(shù)據(jù)對齊方式對齊。
使表格更加規(guī)則，視覺統(tǒng)一提高操作效率。
表格數(shù)據(jù)一般包含文本和數(shù)字，良好的字體能提高表格本身的閱讀性。設計上需要注意以下幾點：
表格中的數(shù)據(jù)要根據(jù)數(shù)量級確定展示形式，不需要精確的數(shù)學呈現(xiàn)，可以讓用戶更快地查找信息，下面是展示形式的建議。數(shù)據(jù)的度量單位無需重復標注，只需要在表頭標識清楚即可，注意同一列單位保持一致。
深入了解用戶需求，根據(jù)需求為用戶提供差值、升降變化、合計值、平均值等直接展示形式。
表格中字體保持一致，文字信息字體統(tǒng)一、數(shù)字信息字體統(tǒng)一即可。數(shù)字信息字體選擇——建議等寬等高字體，等寬的數(shù)字在同一豎線時更容易對比。推薦以下幾款數(shù)字字體在表格中有更好的呈現(xiàn)效果，分別為：微軟雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。
設計表格時，盡量避免任何裝飾性字體，簡約至上才是關鍵
不要出現(xiàn)襯線字體：因為個性會產(chǎn)生閱讀噪音，不利于用戶對數(shù)據(jù)的理解和思考。
不要出現(xiàn)全大寫字體：因為它很難讀，需要轉化思維。
不要出現(xiàn)使用斜體：易引起視線疲勞，影響閱讀。不要出現(xiàn)多種字體：保持風格統(tǒng)一。
在表格設計當中，每一條線都有著它存在的意義，比如：
當表格中展示橫線，隱藏縱線：用戶的橫向閱讀體驗更佳，強調(diào)一條數(shù)據(jù)的完整性，能夠讓用戶進行快速地對應。
當表格中展示縱線，隱藏橫線：用戶的縱向閱讀體驗更佳，強調(diào)數(shù)據(jù)上下間的對比，能夠讓用戶找到同一緯度數(shù)據(jù)下的對比。
在表格設計中，合理地使用分割線可以實現(xiàn)對表格行與列的強調(diào)。按照分割線的分布情況，可以分為4種類型：網(wǎng)格型、水平線型、斑馬條紋型、極簡留白型。這個部分在上一篇已詳細說明。
設計tips：表格具有的顏色盡可能少，顏色和可讀性是密切相關的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。
背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區(qū)分，但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
分割線和斑馬紋的應用色彩都不應該太深，如果你項目中對表格有比較多的選中需求，那么就不太建議使用斑馬紋的格式，因為選中背景需要被高亮，那么一個列表就會出現(xiàn) 3 種顏色，是要盡力避免發(fā)生的。
開發(fā)同學工作的時候，使用的是盒子模型，設計師在出設計圖的時候也要遵循開發(fā)邏輯。
為了讓表格中的文字高度看起來舒適，有著視覺的呼吸感。我們首先得了解影響行高是由文字的高度以及上下間距組成。因此我們得出：
單元格高度=內(nèi)容高度+上間距+下間距
單元格的尺寸包含：文字行高建議設為字號的1.5倍，上下間距設為字號的1.2倍。
對于單行顯示數(shù)據(jù)內(nèi)容的表格，建議行高約為內(nèi)容高度的2.5-3倍；對于多行顯示數(shù)據(jù)的表格，建議行中內(nèi)容的最高點與最低點到行框的上下邊距略小于文字高度。
當數(shù)據(jù)有單行信息展示有多行信息展示時（或長度不固定），要定義內(nèi)容的行數(shù)（根據(jù)業(yè)務），根據(jù)行數(shù)確定行高多出的內(nèi)容做省略處理。
固定行高時可以規(guī)范幾種不同的表格行高，例如在我日常工作中規(guī)定了3種行高56px80px110px，行高較高時，我們數(shù)據(jù)內(nèi)容都進行居中對齊就會有一些問題。有些單元格只有一行信息，有些有多行信息，會使頁面看起來更混亂，信息查找速度降低。
表格行高跟隨行內(nèi)占用最多行數(shù)的單元格變化，設置固定的上下邊距，表格行高隨著數(shù)據(jù)信息的換行而變化如下圖。
單元格數(shù)據(jù)一般有文字、圖標、頭像、進度等，在具體業(yè)務中，如果你找對了用戶想看的關鍵數(shù)據(jù)，將會大大提升用戶體驗，反之則干擾用戶查找信息，對于較為重要的數(shù)據(jù)可以進行關鍵數(shù)據(jù)的標識設計。
標簽：關鍵數(shù)據(jù)較多，顏色與視覺重量要做區(qū)分。
圖標：名稱與文件類型圖標區(qū)分。
人員信息：展示在表格中也十分常見，通常會用頭像+名稱的方式，例如下圖temabition和飛書中對人員信息的展示。
度量單位的使用：其中的關鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無需重復，一般在表頭標識清楚即可。
進度條：進度條或簡單的數(shù)據(jù)圖，它更能直觀地展示數(shù)據(jù)的進度狀態(tài)，方便用戶對數(shù)據(jù)信息做判斷如下圖。
關鍵屬性標識：比如用戶重點關注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。
空表格：表格數(shù)據(jù)為空時要給予一定的提示信息或快捷操作，讓用戶更快地進行對數(shù)據(jù)的操作。
空單元格：當表格單元格中沒有相應數(shù)據(jù)時，要避免直接留出空白單元格。空白格容易造成用戶的困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是根本沒有值？
正確做法是，數(shù)據(jù)不存在（數(shù)據(jù)庫中沒有該字段）用“-”，沒有數(shù)量（數(shù)據(jù)庫中有該字段）用“0”，且小數(shù)點后位數(shù)、單位，都要與上下單元格保持一致
是對單條數(shù)據(jù)的修改，直接在單元格編輯信息的形式有很多，針對不同的數(shù)據(jù)提供對應的編輯方案。
包含：原位編輯，懸停氣泡編輯，下拉狀態(tài)編輯，點擊彈窗編輯拖曳排序等等。針對不同的業(yè)務性質對單元格采用不同的交互形式。
拖拽排序為用戶的自定義排序，在用戶拖拽時頁面布局保持不變，適用于數(shù)據(jù)量較小有自定義排序的情況下。
可以通過視圖切換查看更多細節(jié)，例如在teambition中支持對任務的表格/列表/看板三種視圖的查看，每種視圖的側重點不同，可以 適應不同角色用戶的不同專注點。
工作中常常會遇到單元格數(shù)據(jù)過多的情況，常見的方法有兩種：
1、定義一個單元格長度或字數(shù)限制，超過該范圍以"..."顯示，鼠標懸停時出現(xiàn)氣泡顯示完整內(nèi)容。
2、折行顯示，這種方法讓平鋪直敘，用戶可以直接了當?shù)目吹剿行畔?，建議不要超過三行，超出可“...”顯示。
3、允許用戶拖邊框設置列寬，并記錄設置。這種方案弊端是會占用橫向的空間。
列寬的設置對于用戶的高效閱讀還是很有作用的，在設計時要根據(jù)具體的業(yè)務信息進行分析，列寬嚴謹?shù)奶幚矸绞接腥N：
第一，通過柵格，由列的數(shù)量決定列寬，主流框架組件一般是這種；
第二，可以固定部分列的寬度，其余列則按百分比處理；
第三，在固定寬度的基礎上，允許用戶自由拖動調(diào)整列寬的大小。（當然我覺得不要太拘泥這個，合適就好）
為了讓不同數(shù)據(jù)在表格中相互獨立，不混淆。我們需要保證首尾列的內(nèi)容與表格兩邊的間距N1保持固定，不同列之間的間距N2在最小寬度的基礎上，隨著表格的尺寸不同而做自適應的變化。
在設計表格的初期，就需要做好設計規(guī)范，表格的邊距要統(tǒng)一制定。
列的數(shù)量建議最多展示9條，因為人們的記憶在7±2之間，數(shù)據(jù)太多用戶會找不到重點。但也不是必須，根據(jù)業(yè)務需求，如果需要大量數(shù)據(jù)展示時也要展示，因為視覺永遠低于業(yè)務（好用比好看更重要）。
列信息從左往右視覺權重程度逐漸降低，最后一列權重高（以眼動實驗或點擊數(shù)據(jù)為依據(jù)得出權重高低）。所以盡量減少列的數(shù)量，關注用戶需要的必要信息。當數(shù)據(jù)列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區(qū)域左右拖動。
為便于用戶對數(shù)據(jù)進行對比分析，可以在原始數(shù)據(jù)的基礎上給出差值、升降變化等數(shù)據(jù)處理結果，減少用戶數(shù)據(jù)加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。
在一些用戶高度自定義表格中，數(shù)據(jù)的列寬不好確定的情況下，可以允許用戶對列寬進行調(diào)節(jié)。通過光標的變化提示列寬自定義操作，拖動可完成列寬設置。
列數(shù)據(jù)還可以根據(jù)用戶需求進行自定義設置，可以選擇要展示的列，在默認情況下僅展示最常用、最重要的幾個指標（如下圖），也可以對列進行排序。在表格右上方的設置按鈕對表格進行設置，清晰高效。用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。但需注意系統(tǒng)應記住用戶上一次的自定義列設置，減少用戶重復操作。
底欄在表格最下方，一般是統(tǒng)計信息、分頁控件、備注說明、操作按鈕(加載更多)等內(nèi)容。
底欄最常見的元素就是分頁，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。
1. 良好轉換：用戶在結果列表中查找特定信息而不僅僅瀏覽信息流。
2. 掌控感：分頁可以讓用戶知道表格的總量以及當前頁面在總量中的位置，知道瀏覽完頁面需要多長時間。
3. 數(shù)據(jù)加載快：通過對加載內(nèi)容的限制，可以極大的減少數(shù)據(jù)加載的時間。
額外的動作：用戶要到達下一頁表內(nèi)容，就必須點擊分頁控件上的按鈕跳轉，等待表格新內(nèi)容的加載。
簡潔型：當分頁數(shù)量較少時，通常在7頁以內(nèi)，就只有最基礎的展示。
迷你型：當頁面空間不足或者降低分頁的視覺影響時，可以采用迷你型。
多功能型：當表格數(shù)據(jù)較多，為了滿足更多的用戶需求，可以根據(jù)需求選擇分頁類型。完整型的雖然滿足各種功能需求，但是所占空間較大，所以我們要根據(jù)自己的需求合理拆分使用。
分頁的選擇需要根據(jù)不同的場景選擇最優(yōu)的設計方案。
表格無限下拉加載使用戶在數(shù)據(jù)內(nèi)容面前一直滾動查看。向下滾動的時候不斷加載新內(nèi)容，雖然十分方便與誘人，但不是什么場景都適用。一般來說，無限滾動適用于在數(shù)據(jù)有限且信息重復的表格，有利于內(nèi)容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。
1.高效瀏覽：一個高效的方法讓用戶瀏覽表格數(shù)據(jù)信息。
2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。
1.受限性能：緩慢的加載速度會造成用戶的不耐煩與離開。當數(shù)據(jù)量過大時，結果就是頁面性能越來越低。
2.位置丟失：沒法標記當前位置且不能再隨意回到之前位置。一旦離開，就會丟失當前的瀏覽記錄，要回到上次的位置，必須得重新滾動去尋找。
3.信息缺失：滾動條并沒有反映出實際數(shù)據(jù)量。
除了分頁的使用還可以進行無限滾動的交互，鼠標點擊“加載更多”按鈕以查看更多數(shù)據(jù)。這個功能不太適合數(shù)據(jù)量較大的表格，在具體業(yè)務中一定要慎用。
分析產(chǎn)品，也是難到很多 UI 設計師的問題。很多人認為這屬于產(chǎn)品經(jīng)理的工作，但實際上 UI 設計師也離不開使用產(chǎn)品分析的技能來處理日常的工作，以及提升自己的產(chǎn)出質量。
產(chǎn)品的分析其實遠遠沒有想象中那么玄乎，這篇文章就要教會大家如何通過正確的步驟完成對產(chǎn)品的分析。
以下為正文。
產(chǎn)品分析，顧名思義，就是對某互聯(lián)網(wǎng)產(chǎn)品，進行系統(tǒng)的、多緯度的分析，并最終完成一份邏輯清晰，符合客觀事實的商業(yè)報告。
為什么我們需要這個報告？那是因為對于我們工作的決策來說，獲取越多有效的參考信息，就越能幫助我們做出正確的選擇。
舉個例子，如果我準備做一款針對定制奶茶外賣的 APP，那么就要了解這樣的 APP 產(chǎn)品通常有哪些模塊和功能，通過 APP 下單的流程是什么樣的，以及用戶更喜歡什么樣的設計或者交互。這時候，光靠我自己腦補是沒用的，我得分析同行或者相關外賣 APP 產(chǎn)品，才能得到明確的結論，然后作為依據(jù)開始設計我自己的產(chǎn)品。
或者，我們在面試或者客戶談判之前，有認真的分析過對方的產(chǎn)品，那么在溝通過程中就可以讓我們的處境更有利，能進行更有質量的溝通和探討。
產(chǎn)品分析的好處很多，不僅能幫助我們解決當前的問題，也可以幫助設計師鍛煉自己的邏輯思維能力，產(chǎn)品能力以及業(yè)務能力，是升職加薪的必備技能。
接下來，可能很多同學已經(jīng)忍不住摩拳擦掌，想要知道產(chǎn)品分析應該怎么開始了，但別急，我要先講講一個被很多人忽略，以及在眾多講解文章中都沒有提及的東西，就是產(chǎn)品分析的 —— 目標。
前面提到，產(chǎn)品分析最后要以商業(yè)報告的形式呈現(xiàn)，而一份合格商業(yè)報告是要提供 “明確的結論” 的。如果這份報告指向性不清晰，洋洋灑灑寫了一百頁，像流水帳一樣把所有能羅列的分析內(nèi)容全都一股腦做進去，那對于自己和看的人都是一場災難。因為這樣的報告沒有重點，缺乏閱讀性。
開始分析前，我們要確定一個明確的目標，即想要通過這份報告獲得哪些信息。在獲取的內(nèi)容上，往往不會只想得到一個結果，很可能會是復數(shù)形式，所以我們需要列一個表格，將它們羅列出來。
比如我們再用想做奶茶外賣服務的APP為出發(fā)點，那么我們分析美團或者餓了么的產(chǎn)品，定了下面這些目標：
可以看出，對于產(chǎn)品、交互層面的分析明顯要大于設計的權重，根據(jù) MVP 原則，第一個版本應該要得出的是一個流程可以跑通的產(chǎn)品，在前期過分關注設計和細節(jié)并不是首要任務。
所以，在不同的場景、時期、戰(zhàn)略上，產(chǎn)品分析的側重點就不同，而且留給我們的分析時間也不可能足夠充足的，所以也要將精力集中在最重要的事情上，提升效率，才可以真正解決問題。
整個產(chǎn)品分析的內(nèi)容，可以劃分成多個緯度和若干的細節(jié)，我用下面這個思維導圖表示出來。
這樣的圖表讓人望而生畏，如果每一部分我們都認真做分析，那么勢必得寫出非常多的內(nèi)容不可，所以才有了前面所說的要規(guī)劃分析的目標，在實際執(zhí)行過程中有很多分析項是不需要提及的。
再者，產(chǎn)品分析中還包競品分析、運營分析、交互分析、視覺分析、文案分析等分支，它們各有側重和取舍，所以不要為此而感到恐慌。
下面，我們分別對這些內(nèi)容進行簡單的說明。
1.產(chǎn)品的基本信息
分析任何產(chǎn)品的第一步，就是對它有一個大致的認識，首先就是去下載和體驗它，并且能用一句話來概括它的功能，然后通過該功能解決了用戶什么樣的需求。
然后就是它所處的行業(yè)目前的狀態(tài)，是否規(guī)模連年上升，有什么重量級新聞或者革新，未來的發(fā)展趨勢是什么。如果我們不了解的情況下，可以多在百度、知乎、新聞門戶上進行搜索和了解
盡可能收集可信的數(shù)據(jù)報告或者圖表，便于信息的整理。
對于一些新上線不太久的應用，通常會帶有非常明顯的初創(chuàng)團隊烙印，可能有一些匪夷所思的交互或者功能，這時候在應用上浪費時間干想是沒有用的，可以花點時間在網(wǎng)上找找創(chuàng)始成員的履歷，會對我們認識應用有更大的幫助。比如拼多多創(chuàng)始人在上線前有 “拼好貨” 的多年積累，產(chǎn)品模式是經(jīng)過檢驗的產(chǎn)物，有大量相似的特征。
最后，還可以對產(chǎn)品當前的處境做簡單的收集，有沒有強大的外部競爭，它們各自在市場中占比的數(shù)據(jù)，以及用戶在不同商店、社交平臺中對其的評價。這可以幫助我們對該產(chǎn)品的競爭力和商譽做出初步的認識。
2.用戶研究
用戶研究這個名詞出現(xiàn)得非常頻繁，想不看見都難，它是專業(yè)產(chǎn)品團隊必備的項目準備工作。用戶研究的方式和產(chǎn)出物多種多樣，通常我們會建立清晰的目標畫像找出目標用戶，然后對他們進行訪談、調(diào)研，設計可用性測試、眼動測試等等，幫助我們更好的推出可以被用戶喜愛的產(chǎn)品。
但在我們研究外部產(chǎn)品的時候，往往不需要將它想得太復雜（除非是對直接競爭對手的分析），否則只需要整理該產(chǎn)品的目標用戶畫像即可。
用戶畫像即總結核心用戶多個緯度的特征，主要分成三個部分。
生理主要就是用戶的年齡、性別、身高或體重等特性，外在的則是諸如學歷、工作履歷、所處城市、薪資狀況等可以直接收集的內(nèi)容，內(nèi)在的則是性格、愛好、行為（喜好女裝之類的……）等等和關聯(lián)主觀特征的內(nèi)容。
根據(jù)我們的需要對這些屬性進行篩選，就可以制作幾個標準的用戶畫像卡片出來，比如下方這種。
3.用戶體驗要素
因為這兩年對于產(chǎn)品、體驗、設計的專業(yè)分析需求高漲，所以 《用戶體驗要素》 中的五要素就成為大家喜聞樂見的分析模型，它給我們提供了明確的分析步驟和方向，易于上手。
戰(zhàn)略層：
戰(zhàn)略層指的是產(chǎn)品在宏觀、商業(yè)層面上的的考慮，需要我們自己的判斷，因為如果不是內(nèi)部人員，那么對于一款產(chǎn)品的戰(zhàn)略層思考是無法做到絕對準確的。雖然網(wǎng)上可以搜索到很多商業(yè)分析和企業(yè) PR 稿，但是這些內(nèi)容的使用往往是具有欺騙性的，是基于運營需求拋給大眾的障眼法。
比如我之前分析的一篇關于瑞幸咖啡的總結（個人總結）：
https://www.zhihu.com/question/306547560/answer/559771838
所以，報告中沒有充足的把握時就不要在這個問題上侃侃而談，只需要回答，一款什么樣的產(chǎn)品才可以滿足用戶的需求獲得商業(yè)上的成功。
范圍層：
戰(zhàn)略層可以獲得的信息通常是一個比較宏觀、含糊的概念，所以，我們要來制定更具體的方案，明確產(chǎn)品應該包含那些功能和服務，規(guī)劃產(chǎn)品功能要覆蓋的范圍。
比如提供奶茶的外賣服務 APP，初期我們的功能包含選擇店鋪商品、加入購物車、交易結算系統(tǒng)，但不包含資訊推送、曬單社區(qū)等功能。
所以，范圍層就是將該產(chǎn)品提供的最重要的服務、產(chǎn)品內(nèi)容羅列出來。
結構層：
這就是一個產(chǎn)品的功能或者信息結構，通常我們可以用思維導圖或者樹狀圖的方式進行梳理。最初級的方法是通過對可視頁面的層級做梳理，整理出產(chǎn)品的頁面層級結構。
而更好的方式，是根據(jù)產(chǎn)品的幾個核心功能建立產(chǎn)品流程圖，將操作的結構與邏輯展示出來，繪制這個圖表的過程中可以更好的加深我們對產(chǎn)品的理解。
框架層：
框架層即頁面的布局結構，以及組件層面的交互和展示，一般來說，可以研究產(chǎn)品的主要流程頁面，每個頁面的布局和信息展示是否合理，操作是否順暢。
如果覺得沒法很好的理解，書中建議是通過 “界面設計”、“導航設計”、“信息設計” 三個角度切入，但這樣操作性太差。建議在分析這個界面的時候，只要關注內(nèi)容從上到下的布局內(nèi)容有沒有契合主題，并且重要的組件中，字段權重能不能很好的被表現(xiàn)出來即可。
比如我們看下面飛豬的航班頁面，頁面模塊依次是城市、日期、班次列表、排序篩選。在航班列表中，最被用戶關注的價格信息得到凸顯（證明買機票的用戶對價格更敏感），時間作為次級權重元素相對被弱化但依舊易于識別。
表現(xiàn)層：
這里就是著重分析產(chǎn)品設計本身的特點了，相對就容易了不少，只要分析配色的方案，設計的一致性，捕捉動效和情感化設計的細節(jié)即可。
就不展開更多的說明了。
用戶體驗五要素的分析一樣不是散亂的拋出結果而已，如果按原書的方法做分析，肯定也會作出非常復雜的報告，所以我再提煉一次用戶體驗分析的思路。
通過分析產(chǎn)品的商業(yè)目標，進入劃分功能和服務的范圍，之后根據(jù)核心的服務總結主要操作流程，并在最后的交互、布局、設計的幾個方向來判斷它們是否有益于核心流程，能被用戶接受。然后得出結論，如果有益，那么產(chǎn)品符合商業(yè)目標的條件，如果沒有，則難以達成。
4.盈利模式
有一些產(chǎn)品本身就有購買要素，或者有付費的項目，那么對它作出分析是非常重要的。因為任何商業(yè)產(chǎn)品最終的目的都是為了盈利，所以多數(shù)產(chǎn)品會在這方面下足功夫。
如果是電商、外賣、快遞這類直接發(fā)生交易的應用類型，只要分析產(chǎn)品本身的交流流程即可，相對比較直觀。
如果是類似社交、資訊、工具類的應用，往往在盈利點上會比較隱晦，并通常包含較多零散的盈利來源，比如不同位置的廣告位，訂閱服務，付費道具等等。
我們要做的就是把這些盈利來源全部羅列下來，如果知道價格也對應填寫上去即可。
5.運營策略
如果不是以工具為導向的產(chǎn)品，通常就有比較重的日常運營。包括用戶運營、社區(qū)運營、媒體運營、內(nèi)容運營和活動運營。
有不少產(chǎn)品的迭代是以運營為導向的，我們直接通過產(chǎn)品功能本身去分析它往往得不到理想的結果，所以需要從運營的角度進行切入。
比如每日優(yōu)鮮這樣的生鮮電商，如果仔細研究用過它的服務，就會發(fā)現(xiàn)這款產(chǎn)品本身交易的流程乏善可陳，但是出彩的地方是在于層出不窮的運營策略，無論是選品的內(nèi)容運營或者活動運營上，而這些運營方式才是推動產(chǎn)品的改動和優(yōu)化的主要因素。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
新手和初學者總會錯誤的將審美的能力托付給天賦或是科班教育，作為自己審美水平低下的借口。如果這么想，那肯定不會為自己帶來任何改善。
今天，我要寫一些不一樣的東西出來。
按我一貫的風格，我不喜歡在入門問題上高開高走，一開始就討論比較概念或者藝術性的問題，就講講在最初級月薪不過萬，連自己工作設計類型相關的作品都沒辦法評判好壞的情況下，展開討論。
所以，我要寫一篇接地氣的提高審美的回答。
關于比較
審美是一個宏大的話題，無論是文學、影視、視覺、時尚等我們都可以審視它們的 “美”。不同領域的 “美” 有不同的形式，不同的立場，不同的角度，不同的原則。
在這里，我們不談具體某個領域審美的規(guī)則和方式，我們來講講提升審美的具體做法。
講一個例子，在國內(nèi)，我們普遍覺得女生在對穿衣打扮的審美上比男生更優(yōu)，對于其它經(jīng)過設計的事物所展現(xiàn)的審美也比男生更好。這種差別在高中時期便逐漸放大，在大學中就能明顯得感覺出來這一點。
這是由于基因天賦論導致的嗎？
是也不是。女生愛美這點是一個既成的事實，有比較大的先天因素，而因為對美好事物的追求比男生更強烈，所以在審美上整體大于男性。
但大家要注意，這個因果關系的模型太過簡陋，我們要進一步來分析為什么對美好事物的追求就能導致審美上的差異，這就是我們提升審美的關鍵，先從衣品講起。
原因1：
基于對美的追求，女生往往會花更多的時間在穿衣打扮上，也就意味著要購物。無論是在商場還是淘寶，女生逛起來的熱情與時長都遠遠大于男生，這造成了女生在查看數(shù)量上也遠遠大于男生。
這就和很多設計前輩告訴你要 “多看” 的做法是一樣的，通過量變引起質變，只要你看的夠多，審美自然就可以提升了。
這話說的頗有道理，但依舊在推理上站不住腳。因為，量變?yōu)槭裁匆欢ň湍墚a(chǎn)生質變？這個變化的邏輯依據(jù)是什么？在青銅段位里打了一萬盤，也不代表一定能打進最強王者不是。
所以，這就是要引入第二個原因，關于對比。
原因2：
女生逛街能逛這么久，往往在除了看以外，還會做一件事，就是大量的試衣服（此處被我言中的女性同學可以點個贊讓我看見你們的雙手），經(jīng)常抱了一整籮筐的衣服進試衣間，在里面對著鏡子鼓搗擺 Pose 大半個小時，然后才能挑選一兩件自己喜歡的出來，或者干脆一件也不要。
嗯，不要問我是怎么知道的……
在這個過程里，就發(fā)生了提升審美中最重要的一環(huán) —— 對比。通過大量的對比，來找出好看的、高級的、適合自己的衣服。也因為對比，女生們就通過實踐來了解到，什么樣的衣服是好看的，什么樣的是丑的不適合自己的。
這個過程實際上收窄了選擇的范圍，比如一個個子比較高挑五官比較立體的女生，是很難在比較過后還會選擇那些可愛、少女、小鳥依人的設計。很可能會偏向運動、男友、中性等風格。
而在有了具體的偏向以后，她們依舊會深入到這個范圍，繼續(xù)觀察、嘗試、對比，然后再次提升對這些東西的理解和審美。
所以，看吧，審美的提升第一步就是這么簡單，通過大量的觀察，然后對比和篩選，就能非常直接的提升我們的審美，這個提升的過程完全依靠的是人的主觀能動性。
日常生活中我們遇到的絕大多數(shù)某些人審美比自己更好的人，都是因為他們在某些方面看過的，比較的比我們更多，而不是依靠天賦的加持，這個思路落實到創(chuàng)作中也一樣。
當然，我絲毫不懷疑人類的歷史長河里，有極少數(shù)人打娘胎里就因為染色體中某些基因片段神秘的律動，而獲得了獨特的審美與創(chuàng)作天賦，但那始終是一個可以忽略的概率。審美的提升是個人主動的行為，不要祈禱上帝在你身上投的骰子能得到你要的結果。
即使拋開這群有 “天賦” 的神仙，也依舊還有很多第二梯隊、第三梯隊的老法師們通過奮斗逼的經(jīng)歷功成名就不是。
所以別這么自戀總要搬達芬奇、畢加索、梵高等人舉例，每次忍不住想要把鍋甩給天賦前，就問問自己鑰匙配嘛？
什么？您配？
您配幾把……
具體案例
不正經(jīng)到此為止，正經(jīng)臉……
既然說了那么多關于比較的問題，空口白話難以令人信服，所謂沒圖我說個……錘子。因為很多新人都會說，你覺得大多數(shù)設計案例看起來都挺好，覺得挑不出什么毛病啊。
所以，下面我挑了幾個與設計有關的方向，并找了一些案例出來，你們來看看同類型中，哪一張圖是最優(yōu)的。
而沒被選上的那些，對于你選出來的圖而言，它們當然都是有 “問題的”。
人像攝影
美食攝影
室內(nèi)設計
產(chǎn)品設計
海報設計
管理界面
UI APP 界面
小結
審美提升的第一步，就是從對比開始，因為這個世界對所有事物的評判，都有不同方向的兩個極端。善惡、美丑、高矮、胖瘦，是對立而相互依存。
就像左拉的《陪襯人》中所講的：
“……另一個卻總是奇丑無比，丑得刺眼，使路人不禁要看她幾眼，并且拿她和她的同伴作個比較。要知道，你上了圈套。那個丑女子要是獨自走在街上，會嚇你一跳；那個相貌平常的，會被你毫不在意地忽略過去。但當她們結伴而行時，一個人的丑就提高了另一個人的美?！?
之前我們講了關于審美提升的第一步對比，但是我們留了一個疑問，為什么依靠對比我們可以提升，或者只靠對比我們就一定可以提升審美嘛？審美提升起來就如此容易？
當然不是！
對比的過程只是表象，我們還要追究深層次的原因，那就是“推理”。
在系統(tǒng)性提升審美的道路上，最大的敵人就是——主觀感受。因為無論我怎么解釋和審美提升相關的方法，總有人會覺得它就是依靠個人審美，不同人審美不一樣，總能找出有的人就喜歡網(wǎng)紅臉但看不上湯唯或者高圓圓的案例。
沒錯，每個人都有自己的審美，無論喜歡什么稀奇古怪的東西都可以，存在即合理。但是，設計師該擁有的審美是不能這么隨意的，因為作為專業(yè)人士，我們的審美就要符合 “專業(yè)” 的要求，即通過客觀標準來評價事物的內(nèi)在價值。
比如茶、酒、咖啡這類飲品，都已經(jīng)擁有非常成熟的市場，會根據(jù)產(chǎn)品的價值形成對應的價格。而有趣的是，這些飲品都不是甜的，都不符合我們本能的喜好。所以，還有很多人不接受它們，只喜歡帶有甜味的飲料。這種個人的選擇上，任何人都可以偏愛一杯 1 元不到的雀巢的速溶拿鐵，厭棄紅標瑰夏冰滴，但無論你怎么想，也無法改變它們價值不對等的事實，瑰夏手沖有遠遠超出速溶的口感和品質。
但超出的部分在哪里？答不答得上來，就是內(nèi)行和外行的區(qū)別。
內(nèi)行經(jīng)過專業(yè)的訓練可以品嘗出其中蘊含的風味、口感，解釋它們與產(chǎn)地氣候的聯(lián)系，儲藏運輸?shù)臈l件，以及沖制過程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類零碎、沒有體系的評價。
如果設計師對設計相關的作品只能做到和外行一樣的水平，那么他也只能是設計師中的外行，并且缺乏成為優(yōu)秀設計師的必要基礎。
所以，接下來我們來探究一下，作品的評價為什么重要！
丹尼爾·卡尼曼的暢銷書《思考快與慢》中，將我們的思考方式簡單的劃分成了兩個部分，用了非常簡單粗暴的 “系統(tǒng)1”、“系統(tǒng)2” 命名。簡單概括它們的含義，就是系統(tǒng) 1 是聯(lián)想式思維，系統(tǒng)2是規(guī)則式思維，也可以看成是直覺與慎思的區(qū)別。
先說系統(tǒng)1，直覺是我們大腦對日常接受信息簡化處理的產(chǎn)物，我們的大腦就像處理器一樣，每天都要面對海量的信息通過視覺、味覺等五感導入，如果它沒有任何區(qū)別的對這些內(nèi)容進行深度、縝密的分析，那么它一定會超負荷運轉并最終自我毀滅。
所以生物的演化，讓我們的大腦進化出了一套可以對信息進行過濾和簡化的系統(tǒng)，格式塔心理學中關于視覺對物體簡化、完形的理論，也是由其產(chǎn)生，這就是我們對很多事物下意識反應的來源。比如在走路的過程中，看見一輛自行車直挺挺的從遠處像你沖過來，那么你會馬上感覺到危險并往某個方向規(guī)避，整個過程會在不到1秒的時間內(nèi)完成。
而系統(tǒng)2，就是對事物進行邏輯推導的深入思考，如果用它來處理危險的事件，那么結果可能是我們先判斷這輛自行車行駛的軌跡并得出它前進的方向與我站立的位置相交，并且它的時速約為 40km， 在撞到我的時間還有3S，如果以這種速度撞在我們身上，大概率會發(fā)生……
“BONG～”
那就不用想可能會發(fā)生什么事情，你已經(jīng)被撞飛了，可以直接得到結果。類似的事情還有很多，無論是對與危險的，還是日常事務的作用，系統(tǒng)1都發(fā)揮出了極其重要的作用。也因為它的有效，而導致我們對它依賴過度。所以，很多人在對于美丑的審視上只依靠系統(tǒng) 1 來完成，而不會深入去思考各中原由。
系統(tǒng) 1 對美丑的判斷，是個人的，但它并沒有 “審” 的過程，專業(yè)的分析也就無從談起。斯洛曼和費恩巴赫所著的 《知識的錯覺》 里提到：
"直覺給予我們一個簡化的、粗略的，而且通常足夠好的分析，這讓我們產(chǎn)生錯覺，自以為所知甚廣。但是當我們慎思時，我們才意識到事物實際上何其復雜，我們真的只是略知皮毛。"
審美和品嘗美酒、咖啡一樣，需要通過了解專業(yè)的知識，培養(yǎng)系統(tǒng)的分析方式進行刻意練習，逐漸擺脫依靠我們直覺做出的不可靠的判斷。
因為任何優(yōu)秀的設計作品，在創(chuàng)作過程中都不可能是隨性而為的，都是經(jīng)過創(chuàng)作者深思熟慮后的產(chǎn)物，我們對優(yōu)秀作品的評價，就是通過專業(yè)的知識對其創(chuàng)作邏輯進行推導，哪里有亮點，哪些是敗筆，都是清晰可見的。
它不僅幫助我們判斷別人作品的優(yōu)劣，也可以分析我們自己作品的不足，從而得到改進的思路。所以為什么說審美要先于實踐，如果連什么是好的都不了解，自己設計出來的東西都不知道如何評價，又談何進步？
在我自己的教學經(jīng)驗中，這個問題所表現(xiàn)出來的差異就很有意思。如有一些審美能力較差的學生第一次設計 Banner ，花了非常多精力和時間，自我感覺不錯，但是作品質量極差，會在得到否定的評價以后表示詫異和茫然，因為他們已經(jīng)預感應該得到贊美與肯定。而審美較好的學生則是在完成作業(yè)以后充分的發(fā)現(xiàn)自己設計的東西和較好的作品之間的差距，那么他希望在我這里獲取的，就是如何縮小這種差距的具體方式，而不是對其作品做出評價，因為他們自己也會覺得作品質量差的沒評價的必要。
但不幸的是，在商業(yè)視覺設計的領域中，提升我們的專業(yè)評價的能力，并不如其它行業(yè)一般有固定的流程和教學，按筆者自己長期的經(jīng)驗來看，如果我們盲目的從藝術、設計、心理多個學科的基礎理論開始學起，那提升的速度太緩慢，需要的周期太長，而且有非常強烈的挫敗感，如果沒有好老師的引導，還容易鉆牛角尖誤入歧途。
所以，第一部分的對比，重要性才能體現(xiàn)出來。我們要通過實踐作為基礎，來系統(tǒng)性的提升我們的專業(yè)審美能力，通過應用推理的能力，抑制我們無所不在的直覺。
前面扯了這么一大堆，都是在紙面上的探討，不太接地氣，只分析一通原因，和你該如何提升審美沒太多關系，這是最氣人的。所以，最后一部分，我們來講講具體實施的做法。
先聲明，審美提升是要通過刻意練習的步驟的，誰也不可能只通過區(qū)區(qū)幾篇文章就以為自己已經(jīng)明白了，所以需要執(zhí)行下面這個循環(huán)步驟：
? 采集：大量觀察和收集作品
? 對比：留下它們中最好的
? 分析：尋找優(yōu)劣差異的原因
開始前，還要解釋一件事，就是我們提升審美都要先從某個點開始突破，從你最感興趣的，或是工作關聯(lián)度最高的設計類型開始，而不是無差別的亂看。與美術學相關的所有設計中，底層的原則都是近似的，精通一種，就能更容易理解其它種類的作品。
1.采集
觀察的來源多種多樣，強烈建議初期只使用花瓣即可，不要分心到太多的平臺上，選擇太多往往不是好事，會增加干擾，讓我們疲于奔命，模糊一開始的目標。
例如首先要提升在 APP 方面的審美，我們先在花瓣中創(chuàng)建一個 APP 的畫板，然后搜索 APP 相關的關鍵字，但不需要關注第一頁彈出的采集結果，直接查看 “畫板” 選項。
畫板是別的用戶自己整理的采集合集，我們可以通過封面簡單篩選出你喜歡的，然后打開它們，瀏覽里面收集的作品。
然后盡量按自己最高的要求來找到能讓自己覺得滿意的作品，再將它們 “采集” 到自己創(chuàng)建的畫板中，并設定一個數(shù)量，比如采集到500張為止。
2.對比：
達到目標的數(shù)量就停下來，因為再采集下去能帶來的作用已經(jīng)非常有限了。雖然采集中已經(jīng)包含了選擇和對比的過程，但我們要更進一步，在自己的選出來的作品里進行比較。相信在完成這個步驟以后，你們已經(jīng)可以明顯感覺到最后 100 張收集的質量是遠遠高于前 100 張的。在羅子雄 TEDX 的演講中就說過：你回頭看三個月前收集的作品，會發(fā)現(xiàn)它們都是垃圾……
更極端一點，那就是我們只在挑選的作品中留下最好的十分之一，聽起來是不是很刺激。
也就是我們要開始在自己選出來的作品中，你要刪掉其中的 450 張作品 （最好有留底），即使當中有一些你非常喜歡，而且它們都是你的勞動果實。但就因為這樣，你才會更慎重的進行比較。因為多數(shù)人的采集只是走馬觀花，后面根本就不會看這些東西。
當然，這個過程推薦用 Eagle 或者 花瓣 PRO 客戶端，操作起來會更順手一點。
3.分析：
在上一步操作里，我們會動用我們腦海里所有關于理性的分析方法來解釋它們的優(yōu)劣，并得出結論，雖然這些想法可能很幼稚或漏洞百出，但不要擔心，最后一步就是用來解決這個問題的。
我們捉對挑選一些作品出來，在剩下的作品中和已經(jīng)被你否決掉的作品各選一張，然后將它們排列到一起，對比它們的優(yōu)缺點，比如下圖是我從我自己畫板中找出的近期和早期的采集作品。
專業(yè)的分析是怎么得出的？當然不像朱熹提出的 “格物致知” 一般盯著它們思考，就能把設計的理論給格出來，這條路是走不通的，所以才有王陽明 “知行合一” 的教誨。
我們要把對比的內(nèi)容進行細化，把一套作品看成若干細節(jié)的合集，明確比較的目標，這樣才能得到理想的結果，比如：
? 字體
? 配色
? 布局
? 配圖
? ……
比如我們挑文字出來分析，這時候局勢已經(jīng)比較明朗了，上側的設計中文字是能被清晰識別的，在不同的字段類型中字重有對應的調(diào)整，主次有序。而下側的文字應用則缺乏對比，部分文字甚至和背景都無法做出區(qū)分，且字重幾乎沒有變化，使用了多種字體沒有整體性，導致最后的閱讀感受極差。
同理，你可以再試試分析其它幾個細節(jié)，是不是簡單多了。如果這時候你再覺得手足無措，完全分析不出什么具體的東西怎么辦？
學??！
如對比到配色，我們解釋不出為什么右圖的配色不行，那就針對配色去了解相關的配色技巧、理論，網(wǎng)上可以搜索的分享就一大堆了，比如關于色彩對比、用色比例等等，將你學到的知識現(xiàn)學現(xiàn)用套進這兩張作品中，也就可以很快的得到驗證。
后面每出現(xiàn)這樣的問題，就現(xiàn)學現(xiàn)賣，不僅可以直接提升我們對作品的理解能力，還能鞏固我們學過的理論知識。多分析幾組對比，你就會發(fā)現(xiàn)對于這類作品的審美和理解已經(jīng)得到了質的飛躍，這時候，你就可以以留下的這幾十張作品作為你接受的下限，去收集新的作品，完成下一次循環(huán)。
結尾
對于設計基礎審美的提升就解釋到這里了，再寫下去也沒人看了（寫不動了）。我們在職業(yè)相關的審美提升一定要具有實用性，接地氣，目標準確的特點，不要這個階段跑去聽古典，看畫展，讀詩歌，所以整個回答我都盡量避開這些坑不提。
設計師的專業(yè)性首先不是追求審美的極限，而是先提高自己的下限。只有超出自己動手能力的下限，才能讓我們拒絕粗制濫造的作品，驅動我們進步。
最后，在同意我前面觀點的基礎上，大家可以嘗試我最后給出的方法，如果你覺得你的審美還提升不上去，那歡迎你們隨時找我算賬！而只是看完卻沒有實質行動，那就不要再抱怨自己什么提升上去了。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在今天的 UI 設計領域，由扁平化設計風格占據(jù)主導地位，已經(jīng)是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。
一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標、幾何、文字，UI 設計師的工作僅僅是對內(nèi)容進行組織和排版，涉及到原創(chuàng)的也僅僅只有少量的圖標（大多數(shù)人還畫不好）。
這種狀態(tài)持續(xù)了很多年，看起來歲月一片靜好。
但是，這兩年市場發(fā)出了一些不同的聲音，那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。
比如新擬態(tài)風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發(fā)文和介紹，介紹它的設計理念和設計方法。
還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標，引起設計圈的熱議。
首先講講新擬態(tài)設計，之所以之前只字不提，是因為我對這個風格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應用是完全不適用的，只能活在飛機稿里。
而國內(nèi)大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經(jīng)過幾個大廠團隊認可，且有共識的。
當然，這并不因為大廠用了就無腦推崇。而是純扁平的設計已經(jīng)越來越難滿足部分需要強視覺效果的頁面設計了。
今天的互聯(lián)網(wǎng)和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產(chǎn)品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場。
佛系不行，當舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應用，進入的首頁大家自己意會……
有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經(jīng)開發(fā)到極限以后，那么進一步在一些細節(jié)處應用擬物就成為必然的選擇。
而擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區(qū)域的感知。
最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區(qū)域長期受運營活動支配，相信大家已經(jīng)很習慣了。
只是，這些圖標開始在脫離運營活動的狀態(tài)下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區(qū)）！
且除了 APP 外，其它領域對于擬物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。
作為新世代的 UI 設計師，多數(shù)人對擬物的設計可以說是完全空白的狀態(tài)，所以是時候要重拾擬物設計這個傳統(tǒng)藝能了。
前面我有提到，擬物主要應用在關鍵的圖標上，但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經(jīng)過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優(yōu)秀的擬物圖標和設計案例，它不僅表現(xiàn)元素本身的光影、透視、構造，甚至會非常完整的表現(xiàn)物體表面的材質和肌理。
這種圖標單看起來確實很好看、細致。但是，把它丟進我們當前的頁面中是非常違和的，因為它們細節(jié)實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。
所以為了符合畫面的質感，又要考慮項目效率，輕擬物這個概念開始被提出和應用，作為一個折中的解決方案。
它和純擬物設計的共同點在于，也表現(xiàn)光影、結構、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現(xiàn)出更概念化、理想化、易于辨識的擬物圖形。
所以，我們主要去學習的內(nèi)容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實體質感的。但是扁平從插畫到圖標設計經(jīng)過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設計，應用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標的系列干貨中有提過，這類設計是面性圖標的進階版，它們依舊屬于扁平風格的范疇之內(nèi)，不能和輕擬物劃上等號。
對于這幾年才開始學習 UI 設計的新手來講，擬物已經(jīng)變成一個很陌生的事物，這對行業(yè)來說是比較悲哀的一件事。
因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養(yǎng)，不僅包括對傳統(tǒng)美術（結構、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節(jié)。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
形體的表現(xiàn)，就是對圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內(nèi)容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現(xiàn)得太抽象，也不能增加過多的細節(jié)，需要一種恰到好處的平衡（玄學），這就非?？简炘O計師的判斷和經(jīng)驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側視圖、斜視圖等方法來呈現(xiàn)圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現(xiàn)的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續(xù)的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節(jié)的漸變角度、投影的使用上，就會產(chǎn)生錯誤的設計，造成光影視覺沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線的影響就會產(chǎn)生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現(xiàn)害會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長期存在的高光配飾（多數(shù)動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現(xiàn)物體結構和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發(fā)，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結它的問題，不難發(fā)現(xiàn)首頁頂部業(yè)務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調(diào)整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據(jù)原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達意。
第二步：完善圖形細節(jié)
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節(jié)交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現(xiàn)
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產(chǎn)生一個向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創(chuàng)建一個圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，講整個圖標的質感進行拉升，
通過上面的演示，我們可以將整個擬物設計流程精簡成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細節(jié)樣式增加趣味性和適當?shù)臄M真感
3.通過蒙版添加暗部來完善表現(xiàn)的明暗和層級關系
4.添加高光元素作為圖形的亮點，拉升層次感
然后，通過這樣的步驟，再來完成后續(xù)的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經(jīng)開始超負荷，且容易導致同質化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
在如今的界面設計中，投影使用的范圍和頻次越來越高。無論線上項目或是追波上飛機稿，都可以看見各種各樣的投影樣式。
投影的使用，是 UI 設計師必須掌握好的視覺設計基礎。投影遠沒有大家想象的那么簡單，即使軟件中可以設置的參數(shù)并不多，很多設計師始終沒辦法很好的應用投影來提升自己的設計質感。
所以，這篇文章就會詳細講解設計投影的正確姿勢。
有了光，才有影。光影是美術和攝影最核心的基礎。
如果沒有系統(tǒng)學習過相關理論，對投影的認識會有失偏頗，會認為投影只是將一個物體的輪廓（遮擋光源的部分）完整映射在其它平面上而已，一個光源下只有一個影子，比如下圖設計出來的情況。
但是，真實世界中的投影，卻并沒有這么簡單，往往虛實即不統(tǒng)一，明暗也不一致。就像下面這個物體的陰影。
在光學原理中，不透明物體遮擋光源，所產(chǎn)生的影子有兩個部分，本影和半影。本影是影子中間最暗的部分（還有偽本影的概念，我們暫時將它合并起來理解），而四周開始變淺變淡，有彌散質感的影子稱為半影，就像下圖所示。
現(xiàn)實世界中可見的投影都會形成這兩種影子，因為光源有散射的特征，當光線照射在物體上時勢必會產(chǎn)生非垂直角度的光線，于是其中作用最大，重疊最多的一部分形成本影，而其余比較極限的切線部分形成半影，如下圖的案例。
通過案例我們也可以發(fā)現(xiàn)，當光源、物體、陰影面的距離不同時，產(chǎn)生的本影和半影面積也就不同。反過來講，我們還可以通過物體本影和半影的面積，來判斷它的空間關系，比如下方的兩個物體，明顯能感受到下側懸浮的高度大于上側。
或者，通過陰影來判斷光源對于物體的方向和強弱。比如下圖案例，就可以明顯判斷光源位于畫面的左側，所以即使擺入其它物體，陰影也會朝反方向延伸。
除此之外，投影還可以反應很多其它隱藏的三維信息，只要使用得當，它就可以幫助設計師表達呈現(xiàn)各種不同的空間位置。比如可以通過投影判斷物體是處于懸空或者是平躺，以及物體的厚度如何。
根據(jù)生活的經(jīng)驗，我們已經(jīng)對投影所產(chǎn)生的暗示習以為常，能根據(jù)投影的結果下意識的對界面內(nèi)容做出判斷。所以，設計師在設計過程中如果對投影沒有進行很好的思考，就無法設計出符合規(guī)律和邏輯的投影，界面就會產(chǎn)生違和感，而作品也因此大幅降低了質感。
在進入了扁平化的設計環(huán)境后，投影有很長一段時間被抹除，因為大家認為那是擬物的遺毒，就怕設計里用到擬物元素顯得不夠時髦。
到了 Material Design 發(fā)布以后，谷歌在規(guī)范中增加了 Z 軸的概念，也就是為平面預設了立體的空間，設計元素可以定義與空間中水平面的距離，并通過投影來表現(xiàn)。
下圖中，Z 軸數(shù)字越大，代表和水平面的距離越遠，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的 XY 坐標并沒有任何改變。
即然增加了投影，那么谷歌的專業(yè)設計團隊，肯定不會很隨意的制定其參數(shù)。當我們打開谷歌的官方 UI kits 源文件進行查看時，就能發(fā)現(xiàn)其中的奧妙。它們?yōu)樵貏?chuàng)建了兩層投影，即本影和半影，有時也稱為 top shadow 和 bottom shadow。
并且，還有一個在第一部分沒有提及的要點，投影的深淺與元素的距離是非線性的，即中心到邊緣衰減的速度是越來越大的，用坐標軸標示就是非線性的函數(shù)關系，而大多數(shù)軟件中的投影只能以線性的模式呈現(xiàn)。
在 UI 設計師接觸的平面類軟件中，只有 PS 具備完美復現(xiàn)這種投影的能力，即控制投影的等高線。
上面出現(xiàn)的投影都是黑白灰，但在現(xiàn)在流行的設計作品中，最常見的是應用了彩色的投影，攝影中也經(jīng)常會應用彩色的投影渲染氛圍。
但是，投影中的這些彩色區(qū)域，并不完全都是投影，還包含了折射和漫反射等混雜的色光。為了簡化（完整的闡述可以寫一本書了），我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……
在開始展示具體的設計案例前，我們要先明確一個原則，即：優(yōu)雅的投影是讓你感受到它的存在，但不會吸引你去關注它！
一般的設計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數(shù)來設置它的彌散度。
當元素距離水平面越近，陰影距離元素也就越近，即投影的 XY 值越小，模糊也越小，如果離得遠則相反。
3.1 常規(guī)投影類型
第一種投影的類型，即假定元素平躺，光源正對著元素的平面，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0，只添加模糊的參數(shù)，透明度較低。第二層陰影使用相同的模糊參數(shù)，增加 Y 軸坐標，透明度較高。
在非 MD 設計中，它濃郁的投影參數(shù)會讓整個界面變“臟”，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是，當使用純黑色做陰影時，透明度無論如何都不應該高于 20%，正常區(qū)間在 5%-15%。
既然知道陰影屬性的規(guī)律，我們還可以復制這個矢量圖層做高斯模糊也可以得到一樣的效果，這種方法可以支持我們設計出更真實的投影。即將 Bottom Shadow 獨立出來，縮小并向下移動。
如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調(diào)整它們的透明度。
如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。
既然前面提到彩色投影是由于光線穿透了元素，那么當使用了漸變色或者是圖片的投影，我們在之前提到的復制出的那層充當 Bottom shadow 的矢量圖形，就可以不使用填充色，而是直接用漸變或者是原圖進行模糊和透明度調(diào)整。
3.2 非常規(guī)投影類型
光既然可以垂直于被照射平面，那么發(fā)揮想象力，我們還可以更改光與面的位置，讓光線與平面之間的夾角變小，如下圖所示。
在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態(tài)時，才能可以看見它的投影，所以，我們就可以得到下方的效果。
當然，我們還可以結合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發(fā)生變化。
我們甚至可以假設元素本身產(chǎn)生了一定的變形，如邊緣翹起，那么就會出現(xiàn)獨特的陰影形狀。
我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中，讓我們設計中的視覺形式更豐富有趣。
學會正確的投影設計方式，并不是僅僅讓我們局限在 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助，比如做設計作品的包裝。
通過前面講解的知識點，上方展示案例中應用的陰影方式相信你們已經(jīng)可以看出端倪了，如果使用基礎的陰影設置去創(chuàng)建展示的陰影，就會發(fā)現(xiàn)效果遠遠不如案例的高級，自然也難以帶給別人良好的視覺體驗。
最后，在項目中，想要將設計出來的陰影交付給開發(fā)，真正落地實現(xiàn)出來，無論安卓或是 iOS ，陰影的渲染和設計軟件的參數(shù)是不一致的，這就需要大家自己鉆研究了。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復雜。而 UI 的發(fā)展從擬物的繁瑣細節(jié)中掙脫出來，卻在色彩的展現(xiàn)中放飛了自我。
零售業(yè)有個有趣的研究成果 —— “七秒鐘定律”：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。
要在小小的手機屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗總結的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉化，且 HSB 的選色邏輯更清晰、簡潔、干練。
因為一個正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關注色相選擇條。
細心的同學應該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環(huán)形模式，所以它實際上就是色環(huán)的柱狀展示圖，應用起來和色環(huán)沒有實際區(qū)別。
接下來就要說到重點，飽和度和明度選擇區(qū)，我自己使用的習慣，是將這個選擇區(qū)通過黃金三分法的方式切割成等比的 9 個區(qū)域，然后明確它們在 UI 中的對應情緒和應用場景。
在過去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會往右上角聚集，一些次要、不可點的色彩聚集在中上方，而文字背景色則聚集在左側，無人區(qū)則是我們重點避開的對象。
下面我們分析幾個案例，看看它們在這個選擇區(qū)中的色彩分布情況：
大家也可以自己拿一些主流的應用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結果。牢記這 9 個區(qū)域的場景劃分，可以幫助我們非常高效、安全地完成 UI 配色。
在眾多的 UI 設計規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：
主色：應用的核心色彩，品牌色
輔色：豐富頁面視覺和傳達效果的次要顏色
中性：沒有色相的文字、背景用色
主色是一個應用的最核心的色彩，品牌的象征色，比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復雜，它的要點在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關聯(lián)一個大致的色彩范圍，再進行微調(diào)。
在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設計中的用色有非常大的不同。
移動端產(chǎn)品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無法實現(xiàn)這個目標的，所以今天主色飽和度越來越極致，比如我們之前整理的，發(fā)在站酷的一篇總結：
再加上屏幕的 RGB 顯示特性，高對比度，高動態(tài)范圍的特質能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。
輔助色是豐富應用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。
前面我們提到過色環(huán)，這里就要派上用場了。我們知道色環(huán)是個色彩序列首尾相連的環(huán)形模型，它蘊含一個最樸素的原則，即兩個顏色在這個環(huán)形中角度越大，那么視覺差異性越大，對比越強，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇，是根據(jù)實際場景的功能決定的。
比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了標準的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
沒有標準元素用色的情況下，再考慮應用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍色的情況下，支付、保險金標簽這些需要被重點突出的色彩，使用了主色的互補色， 讓我們一眼就能看見并產(chǎn)生強烈的操作欲望。
中性色，是頁面中文字、背景用到的顏色，它們承擔起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關緊要，實際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進行使用也不會有絲毫的障礙。
中性色的配置，就是制定一個由深到淺的灰度階梯，應用在對應權重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足 RGB 的某種特性）。
這種做法，顏色越淺的時候飽和度應用色值就越低，將這個規(guī)律在拾色器中進行表現(xiàn)，那么我們就可以得到一個 L 型曲線，我稱它為 “中性曲線”。
掌握對于主色、輔助色、中性色的選擇方法，那么對于 UI 配色的奧義來說，你已經(jīng)掌握了一半，接下來就要了解更具體的實踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學和理論，卻很少關心它們應用如何應用，如何配置。
所以，我根據(jù)主色和輔助色應用總結了一個配色的四象限表格，在分別看看它們對應的案例：
主色會作為頂部標題欄或其它重要模塊中的背景色，進行大面積應用，加深用戶對品牌的認知和辨識度。而產(chǎn)品中又包含了大量功能和服務，需要用豐富的色彩來進行暗示，吸引用戶關注。
這類配色中，主色的應用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對正式、品牌感強的應用。
這是多數(shù)主流應用的趨勢，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務和功能。
通常，會應用這種方式是因為產(chǎn)品的服務是相對單一，但也需要用戶投入注意力的應用，設計師就會盡力避免給予用戶過多的干擾。
每次在進行配色的時候，我們都需要對自己要應用哪種配色應用方式做出規(guī)劃，然后再動手執(zhí)行。有了這個目標，后面在整個項目的設計中的配色步驟就是水到渠成的事情了。
在實踐前，我們要簡單講講一個應用或者界面的標準配色的流程了，流程順序如下：
具體應該怎么使用這套流程，我們用一個圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。
原型是 UI 設計的基本藝能了，在開始具體設計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經(jīng)準備好的原型案例。
然后，我們確定以橙色作為應用主色，并在拾色器中進行確認。
有了主色，就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現(xiàn)模塊層級，文字信息的權重。
最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區(qū)圖標，然后將用戶關注、認證用戶、標簽等元素使用其它色彩，來豐富頁面的色彩內(nèi)容。
根據(jù)第一個方案，我們可以再用這個原型來實現(xiàn)其余的三個方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因為已經(jīng)不太應用其它輔助色，所以主色填充上我們不再填充頂部導航欄的背景，而是將更多元素應用主色，減少輔助色數(shù)量。
然后是主色占比小，色彩豐富度高的方案，進一步降低主色應用的比例，然后在金剛區(qū)、標簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結果和風格，在每次設計開始實施前，我們都可以根據(jù)這種做法來做嘗試，并選出自己滿意的方案。
要再次強調(diào)，UI 配色是極其強調(diào)形式的應用科學，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調(diào)整，并選出合理的那個。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
導讀
為什么B端產(chǎn)品總是容易“失控”？B端產(chǎn)品設計與C端有何差異？如何在不斷復雜的系統(tǒng)中，權衡效率、成本、體驗之間的關系？
本文將帶你從B端產(chǎn)品的本質出發(fā)，了解產(chǎn)品發(fā)展過程中容易出現(xiàn)的問題，并從復雜系統(tǒng)的角度去探討設計體系的構建方式。
目錄
一、「 困局 」容易“失控”的B端產(chǎn)品
A .「 關注重點的差異性 」
B .「 微小差異的不斷疊加 」
C .「 產(chǎn)品發(fā)展進入惡性循環(huán) 」
D .「 進入效率拐點，產(chǎn)品失控 」
二、「 啟發(fā) 」從復雜科學的角度思考設計
A.「 自然算法 」
B.「 物質的構成原理 」
三、「 探究 」什么是產(chǎn)品設計體系？
A.「 定義 」
B .「 組成部分 」
C .「團隊能力要求 」
D .「 構建方向 」
四、「 剖析 」B端產(chǎn)品的生命周期
「 產(chǎn)品生命周期概述 」
A .「 初創(chuàng)期 」解決核心問題，產(chǎn)生價值
B .「 成長期 」能力完善，產(chǎn)品擴張
C .「 成熟期 」效率提升，快速增長
D .「 暮年期 」商業(yè)價值降低，發(fā)展逐漸停滯
NEXT、「 下期預告 」設計體系的構建法則
前言
隨著產(chǎn)業(yè)互聯(lián)網(wǎng)時代的到來，市場對B端產(chǎn)品的重視程度逐漸提升。然而，談及B端產(chǎn)品，特別是SaaS產(chǎn)品，大多數(shù)設計師對此并不是特別感興趣。一來，SaaS更注重功能層面，似乎本身對設計的要求并不高；二來，SaaS產(chǎn)品的最終實現(xiàn)效果總是不盡人意，就算設計得再好看，實現(xiàn)出來也難以出彩。
確實，若設計師僅僅只是關注視覺層面本身，那么B端產(chǎn)品確實不像C端那么吸引人。但是，若你能以整個產(chǎn)品構建的角度去思考B端產(chǎn)品設計，那么設計師能夠在其中發(fā)揮的空間是巨大的。
假如把C端產(chǎn)品比作精致的小房子，那B端產(chǎn)品就是一幢巨大的高層建筑。建造小房子，你可以盡情地發(fā)揮創(chuàng)意，追逐潮流，大不了推倒重來。而建造大房子，則需要設計師考慮更多的維度，因為這是一個長期而復雜的工程。
建筑的外觀不僅需要好看，更需要足夠耐看、穩(wěn)定；為了適應更多人的需求，你不僅要考慮房子的軟裝，還要考慮戶型的合理性、通用性；而為了降低成本，你還需要考慮家具、硬裝的標準化、房間的兼容性等等…
“你是否有信心建造一個宏偉的高樓大廈？”
這是我在B端設計中，反復強調(diào)體系化思維的原因之一。想要建造一個大型建筑，沒有體系化思維、沒有更完善的多職能協(xié)作流程，那么這座高樓一定會在建設過程中埋下隱患。而當問題一旦出現(xiàn)，涉及到的沉沒成本也將會非常巨大。
當然，對于C端產(chǎn)品來說，體系化也愈發(fā)重要了。隨著互聯(lián)網(wǎng)時代的持續(xù)發(fā)展，一些C端產(chǎn)品的復雜性也堪比B端。我在之前的文章中提到過一個觀點：“C端B化，B端C化”。在未來的數(shù)字產(chǎn)品設計中，B端產(chǎn)品將會逐漸開始重視產(chǎn)品的外觀與體驗，因為觸達的人群更年輕化、對體驗要求更高了。而C端產(chǎn)品也會更注重體系化建設，因為產(chǎn)品體量越來越大，需要尋求效率與成本之間的平衡點。
產(chǎn)品設計體系，本質上是一套更科學的復雜性數(shù)字產(chǎn)品的設計方法與工作流程。因此，不管是B端產(chǎn)品還是C端產(chǎn)品，設計體系能夠在提升設計品質的同時，讓產(chǎn)品更“可控”，提升效能，降低成本。
這套設計方法論，是我在工作中不斷實踐與完善的一些經(jīng)驗與方法。希望能借此分享一些自己淺薄的經(jīng)驗，也探討一下數(shù)字產(chǎn)品設計未來的形態(tài)。
?
一、「 困局 」容易“失控”的B端產(chǎn)品
-
作為較為復雜的數(shù)字產(chǎn)品，B端產(chǎn)品在快速發(fā)展的過程中，總是容易出現(xiàn)一些問題。特別是當產(chǎn)品體量到達一定階段后，問題就會逐漸暴露出來，比如：
1. 產(chǎn)品丑、設計質量低；
2. 組件樣式繁多，操作習慣不一致；
3. 新老系統(tǒng)差異大，不同模塊體驗差異大；
4. 頁面結構混亂。
等等…
很多問題大家都能明顯地意識到，但往往因為“不影響售賣”、“價值不高”、“新功能優(yōu)先”等理由被擱置。
隨著問題逐漸積累，產(chǎn)品的優(yōu)化成本也變得越來越高，最終使整個產(chǎn)品已經(jīng)積重難返。若只是多部分頁面/組件進行優(yōu)化，小修小補，雖然成本低，但成效甚微；若是進行大修大補，那么優(yōu)化成本將遠大于研發(fā)新功能的成本。
這種普遍的B端產(chǎn)品現(xiàn)象，被稱為“產(chǎn)品失控”，即——團隊已經(jīng)對整個產(chǎn)品的形態(tài)失去控制力。
那么，為什么B端產(chǎn)品特別容易出現(xiàn)這種問題呢？
A .「 關注重點的差異性 」
首先，產(chǎn)品的本質決定了其關注重點的差異性。
與C端產(chǎn)品不同的是，B端產(chǎn)品往往更看重“能力”（為企業(yè)用戶解決問題），而產(chǎn)品的銷售方式與付費模式，也決定了產(chǎn)品體驗并非首要關注的對象。由于B端產(chǎn)品通常針對企業(yè)用戶，需要更長的研發(fā)過程，產(chǎn)品的體量和復雜性也相對較高。因此，除了產(chǎn)品解決問題的“能力”之外，產(chǎn)品還需要關注研發(fā)的效率及成本。
因此，在產(chǎn)品的發(fā)展初期，企業(yè)通常對效率最為關注，其次是成本，最后才是體驗（能用就行）。絕大多數(shù)B端企業(yè)，只有在產(chǎn)品跑通商業(yè)邏輯，并具備一定用戶與盈利預期之后，才會對產(chǎn)品的體驗逐漸重視起來。
B .「 微小差異的不斷疊加 」
任何微小的差異，在無數(shù)次的疊加之后，都會被快速放大。特別是當團隊的人員逐漸增多后，放大速度將會呈指數(shù)級上升。
為了配合產(chǎn)品的快速發(fā)展，產(chǎn)品往往會采用“堆量”的研發(fā)模式。增加研發(fā)效率，最簡單直接的方法便是投入更多的資源。隨著產(chǎn)品不斷增加模塊、功能、頁面，團隊人員也在不斷地擴充。
但是，人類不是機器，并非簡單的1+1=2。團隊數(shù)量的上升雖然會帶來效率的短期提升，但同樣也會增加團隊的管理成本。不同的產(chǎn)品經(jīng)理、設計師、研發(fā)人員，對于產(chǎn)品的認知是不同的。隨著團隊人員的不斷增加，“個體差異性”將會被不斷地疊加與放大。
就像“傳話筒”的游戲一樣，同一個事物，不同的人理解總是不同的，經(jīng)過多次的“傳話”以后，往往與原本的意思已經(jīng)大相徑庭了。
這種情況表現(xiàn)在產(chǎn)品設計中，則會出現(xiàn)：當相同的組件由不同的人做時，總是會在基本樣式、實現(xiàn)原理、交互細節(jié)等不同的維度出現(xiàn)差異。比如上圖中的導航菜單組件，不同的模塊在開發(fā)時總是會存在差異，最后差異越來越大，形成了五花八門的導航菜單形式。
C .「 產(chǎn)品發(fā)展進入惡性循環(huán) 」
令人遺憾的是，雖然問題很明顯。但是在不斷的“成本考量”中，產(chǎn)品團隊往往優(yōu)先關注新功能的開發(fā)，而忽略底層問題的優(yōu)化。
隨著產(chǎn)品的快速發(fā)展，產(chǎn)品的優(yōu)化/迭代成本將會逐漸大于研發(fā)新功能的成本。要么背負巨大的成本進行整體重構；要么降低標準，繼續(xù)以這種模式不斷疊加新功能。
在這種情況下，大部分B端產(chǎn)品往往會選擇后者。于是，產(chǎn)品的發(fā)展將會進入一個“惡性循環(huán)”：
產(chǎn)品快速發(fā)展，功能不斷疊加；
各模塊由不同的產(chǎn)品、不同的開發(fā)研發(fā)，導致各模塊之間差異增加；
產(chǎn)品丑、體驗不統(tǒng)一，但老系統(tǒng)優(yōu)化成本過高。綜合衡量，優(yōu)先進行新功能研發(fā)；
所有模塊標準不統(tǒng)一，產(chǎn)品迭代效率持續(xù)降低，維護成本持續(xù)增加。
…
D .「 進入效率拐點，產(chǎn)品失控 」
產(chǎn)品的發(fā)展猶如一輛快速奔馳的巨型列車，一旦加速便難以停止。
隨著問題的反復出現(xiàn)，以及在一次次的“利益權衡”中選擇性的忽略，產(chǎn)品的惡性循環(huán)不斷重復，而問題也逐漸疊加、沉積下來。
當這個問題已經(jīng)大到我們無法回避時，我們才發(fā)現(xiàn)：產(chǎn)品的單位迭代/優(yōu)化成本，已經(jīng)遠遠大于新功能的研發(fā)成本。而新功能帶來的增量，已經(jīng)無法抵消現(xiàn)有模塊的迭代成本——產(chǎn)品迎來了效率拐點。
就像一個龐大而復雜的機器，雖然依舊可以運行，但整體效率已經(jīng)很低了，而與之對應的維修成本則非常巨大。小修小補根本無法解決問題，而大修大補則很有可能會帶來更大的虧損。
最終，產(chǎn)品逐漸在“失控”中難以自拔，競爭力逐漸降低，但整個團隊對此卻無能為力，嚴重影響了企業(yè)的發(fā)展。
那么，在產(chǎn)品發(fā)展中，我們應該如何避免這種情況呢？換而言之，一個高度復雜的數(shù)字產(chǎn)品，我們應該如何設計，才能避免其逐步走向混亂？
?
二、「 啟發(fā) 」從復雜科學的角度思考設計
-
如果我們將B端產(chǎn)品看作是一個復雜系統(tǒng)，那么產(chǎn)品“失控”的本質即——在不斷復雜化的形態(tài)中，缺乏有效的控制機制，最終導致整個系統(tǒng)失去控制。
但是，在大自然面前，B端產(chǎn)品這種復雜程度顯然不值得一提。
像大自然這樣的復雜系統(tǒng)，是如何構成的？所有的物體都由原子所構成，為什么簡單的一百多種原子，能夠構成如此復雜的世界？生命又是如何在無機物的世界中誕生，并逐步進化成如此復雜的個體的？
A.「 自然算法 」
道生一、一生二、二生三、三生萬物...無論是老子的《道德經(jīng)》，還是《深奧的簡潔》、《萬物皆數(shù)》、《復雜》這些現(xiàn)代的書籍中都闡述了這樣一個觀點：
任何看似復雜而又可控的系統(tǒng)，一定存在著精簡的“算法”，通過不斷的疊加從而形成復雜系統(tǒng)。
就像愛因斯坦說的：“宇宙最不可理解之處，就是它居然是可以被理解?！?
在大自然中，有很多的花紋與圖案的形狀都存在相同的規(guī)律。比如上圖中的羊齒草分形圖案，這種圖案在森林當中到處可見，我們看到很多樹的形狀跟葉子的形狀是一致的，這就是一種分形圖案。而這種分形的圖案本質上是一個公式，通過不斷地自我引用進行迭代，這便是分形。
科赫曲線（Koch curve）就是一種分形。其形態(tài)似雪花，又稱科赫雪花（Koch snowflake）、科赫星（Koch star）、科赫島（Koch island）或雪花曲線（Snowflake curve）。
它最早出現(xiàn)在瑞典數(shù)學家海里格·馮·科赫的論文中。我們將一根直線分成四段，然后向中間擠壓形成等邊的倒V形狀；接著再將每個倒V的邊進行相同的操作，不斷地重復之后，我們發(fā)現(xiàn)：第一步是倒V型、第二步變成了大衛(wèi)星，第三部變成了楓葉，第四步… 經(jīng)過無數(shù)步以后，最終成了越來越復雜的“雪花”形態(tài)。
科赫曲線便是“自然算法”的一種。海岸線雖然很復雜，但是卻有一個重要的特性——自相似性。從不同比例尺的地形圖上，我們可以看出海岸線的形狀大體相同，其曲折、復雜程度也很相似，換句話說，任意一段海岸線就像是整個海岸線按比例縮小的結果。而海岸線的構成原理就是這種科赫曲線，它是通過天然的演化，不斷折疊最終形成了這種形狀。
可以發(fā)現(xiàn)，他們都是由 基礎物質 x 簡單算法 x 隨機變量，經(jīng)過無數(shù)次疊加后，最終形成了一個復雜而多變的整體。
B.「 物質的構成原理 」
宇宙中還有其他各種驚人的“巧合”。愛因斯坦的相對論揭示了宏觀世界的規(guī)律性，普朗克和海森堡的量子力學揭示了微觀物質世界的規(guī)律。當我們從微觀世界到天文學會發(fā)現(xiàn)——原子核的構成方式居然與天體的構成非常相似。粒子圍繞原子核的運動方式，就好像行星圍繞太陽運動一樣。
不管是整個宇宙，還是生命體，將其置于復雜科學的研究框架中，那些基本定律最終也會變得極其簡單。
在宇宙中所知最為復雜的形態(tài)，便是如同我們自身的生物。這些復雜體由已知存在于銀河系中最普通的物質所構成。但是，通過氨基酸的形態(tài)，這些基本原料竟能自然地將自己組合成一個自組織系統(tǒng)。
混沌中隱藏的算法，使宇宙成為極有秩序的地方。而在秩序中隱藏的隨機數(shù)，又使得宇宙成為極為豐富的世界。
也正是因為算法的精簡，一切物質的創(chuàng)造才能具備復制性、延續(xù)性、進化性。
那么，我們反過來思考——想要使復雜的系統(tǒng)簡單可控，是否就需要一套簡潔、有效的“算法”？通過“算法”，將基礎的“物質”不斷地“有序疊加”，形成一個可控的復雜體系。
因此，對于復雜的SaaS系統(tǒng)設計，我開始引入“設計體系”這一概念，希望能夠找到未來SaaS產(chǎn)品設計的發(fā)展方向。只有設計體系的建立，才能保證產(chǎn)品可控性，才能在不斷復雜系統(tǒng)中，保證效率、成本、體驗之間的平衡。
?
三、「 探究 」什么是產(chǎn)品設計體系？
-
產(chǎn)品設計體系，在國內(nèi)仍舊是較為陌生的詞匯。什么是設計體系？
A.「 定義 」
一個成熟的數(shù)字產(chǎn)品，需要有一個穩(wěn)定、且持續(xù)迭代的形態(tài)。創(chuàng)造這個形態(tài)的過程，我們稱之為廣義上的產(chǎn)品設計（這里指產(chǎn)品的整個策劃和設計過程，包含策劃、交互、視覺及部分前端開發(fā)）。而負責控制和維護這個形態(tài)的這套系統(tǒng)，便是產(chǎn)品設計體系。
我們接觸到的更多是設計系統(tǒng)（Design System），比如平臺級的設計體系，Apple、Google、Microsoft等系統(tǒng)級的設計系統(tǒng)，及其設計開發(fā)套件、應用生態(tài)。公司級的設計系統(tǒng)，如Airbnb設計系統(tǒng)、IBM的Carbon設計系統(tǒng)、螞蟻金服的Alipay Design等。
但是，在一個企業(yè)內(nèi)部，想要Design System能夠系統(tǒng)性地運轉，還需要基于這套標準建立的團隊協(xié)作機制。只有設計標準與團隊協(xié)作標準完美融合，才能建立真正的設計體系。
B .「 組成部分 」
如果將數(shù)字產(chǎn)品比作復雜的“生命體”，產(chǎn)品的發(fā)展比作競爭中“自我進化”，那么設計體系便是產(chǎn)品的DNA。它既是產(chǎn)品形態(tài)的控制源，又是不斷自我迭代的進化源，它的作用是：
控制產(chǎn)品外觀——感知性模型（視覺風格/規(guī)范）
制造基礎構件——功能性模型（基礎/復合組件）
模塊的構建規(guī)則——模式語言（產(chǎn)品框架規(guī)范）
產(chǎn)品標準定義、生產(chǎn)方式制定——協(xié)作模型（高度協(xié)同的工作流程）
它不僅能控制產(chǎn)品的“生產(chǎn)結果”，提升產(chǎn)品質量；還能規(guī)范產(chǎn)品的“生產(chǎn)過程”，形成一套完整的多職能協(xié)作流程，提升產(chǎn)品的生產(chǎn)、迭代和維護效率。
從宏觀來看，設計體系像是一個“規(guī)范的復合體”，它是各職能之間規(guī)范的有效整合，產(chǎn)品框架、交互規(guī)范、視覺規(guī)范、前端規(guī)則，同時也是基于整合規(guī)范所創(chuàng)造的一套創(chuàng)新的工作模式。
C .「團隊能力要求 」
設計體系的建立，需要整個產(chǎn)品團隊擁有一致的目標，并為之通力協(xié)作才能完成。這就需要整個團隊擁有較高的平均素質與契合度。
同時，體系化的建立和推動，也需要團隊中有人牽頭去推動。設計師作為“產(chǎn)品-開發(fā)”的中間環(huán)節(jié)，是非常有條件成為推動者的角色的。
當然，這就要求設計師擁有更豐富的橫向能力。
一方面，設計師需要將自身的能力邊界進行拓展，與上下游的職能保持密切的溝通，并解他們的訴求。只有當設計體系滿足各方利益時，體系化才有推動的空間。
另一方面，對于產(chǎn)品側與開發(fā)側人員，設計團隊也可以通過培訓來提升他們的能力邊界。比如針對產(chǎn)品的交互培訓、針對開發(fā)人員的基礎審美培訓等。這樣才能提升產(chǎn)品的下限與上限，增強產(chǎn)品的綜合競爭力。
D .「 構建方向 」
設計體系并非超脫于產(chǎn)品之上，而是根植于產(chǎn)品的成長過程中。
想要推動體系化的建立，必須充分了解產(chǎn)品發(fā)展的基本規(guī)律。產(chǎn)品處于不同的生命周期，所要解決的問題是不同的。在正確的時間做正確的事情，并對未來的形態(tài)進行規(guī)劃，才能逐步讓設計體系根植于產(chǎn)品、融合于產(chǎn)品。
因此，在下一章，我們首先來了解一下B端產(chǎn)品的生命周期。
?
四、「 剖析 」B端產(chǎn)品的生命周期
-
對于設計師來說，首先要更宏觀地了解產(chǎn)品所處的生命階段，才能知道設計需要解決的問題是什么，并以此有針對性制定不同的設計策略，最終幫助產(chǎn)品構建完善設計體系。
本章更多的是對B端產(chǎn)品的發(fā)展階段做一個剖析，而不同階段具體的實施策略，會在后面講解。
「 產(chǎn)品生命周期概述 」
類似于人的成長歷程，一個新的B端產(chǎn)品從誕生到逐步擴大，通常都會經(jīng)歷幾個不同的生命階段。
B端產(chǎn)品研發(fā)是一個漫長而系統(tǒng)化的過程。這個過程通常伴隨著商業(yè)業(yè)務發(fā)展與商業(yè)戰(zhàn)略模式的不斷調(diào)整。
B端產(chǎn)品從立項到下線，產(chǎn)品會處于幾個典型的不同狀態(tài)中，這就是產(chǎn)品的生命周期。通常來看，大多數(shù)產(chǎn)品都會經(jīng)歷以下幾個生命周期。初創(chuàng)期-成長期-成熟期，直至最終進入暮年期。
而產(chǎn)品的商業(yè)價值，也會伴隨著產(chǎn)品的發(fā)展而變化。在通常情況下，伴隨著產(chǎn)品的逐漸成長，其商業(yè)價值也會隨之增長，并在成熟期進入黃金的商業(yè)價值期。而當商業(yè)價值出現(xiàn)大幅、持續(xù)性的降低時，則基本算是進入了暮年期。
那么，不同的生命周期中，產(chǎn)品將會遇到哪些問題？而為了保證產(chǎn)品的持續(xù)發(fā)展，產(chǎn)品團隊又需要做哪些事情呢？
A .「 初創(chuàng)期 」解決核心問題，產(chǎn)生價值
初創(chuàng)期，即產(chǎn)品已經(jīng)從構思到研發(fā)，并成為了初步的產(chǎn)品。這個時期，產(chǎn)品雖然還不能覆蓋完整業(yè)務，但已經(jīng)能夠順利運行。
從構思到創(chuàng)意，再到實踐落地。B端產(chǎn)品的誕生，通常源于在行業(yè)內(nèi)深耕多年的資深玩家。在不斷地實踐中，通過創(chuàng)意與實踐，找到了一條能夠幫助行業(yè)解決問題、提升效率的路徑。
1）用戶是誰？
B端業(yè)務的本質，就是“向組織銷售服務來獲得盈利”。哪些企業(yè)最需要你的產(chǎn)品？哪一類用戶的問題最需要通過這種方式得到解決的？這些都是需要在早期非常明確的。
站在普羅大眾的角度去規(guī)劃產(chǎn)品固然是好的，但成功的產(chǎn)品都始于一小部分早期用戶；B端產(chǎn)品的用戶通常來自某一垂直領域，首先讓他們喜歡上你的產(chǎn)品，然后慢慢向外拓展至更大的人群當中。
想想看，最初一千名喜歡你產(chǎn)品的種子用戶可能是哪些人？
2）產(chǎn)品能夠解決什么問題？
我們要為用戶解決什么問題？“用戶的問題”可能是一個需求、一個困擾或是一個機遇。他們的需求是否真的是痛點？
這個時期，團隊需要拜訪大量的目標用戶，通過交流獲取痛點。我們必須驗證這個需求的真實性，以及我們的解決方案是否具備一定的可實施性。
我們可以通過更具象的UI或流程，初步展示想法，不斷優(yōu)化。最終形成一個可驗證的初步產(chǎn)品Demo，并通過Demo進一步與潛在用戶進行溝通。
3）這個問題是否普遍？是否具備標準化的可能？
不同企業(yè)的需求是有差異的，如何將個性化的需求抽象成共性的解決方案？如何權衡范圍與成本之間的關系？我們要將不同企業(yè)的需求進行抽象，形成標準化的解決路徑。
這個階段，我們需要為種子用戶創(chuàng)建方向聚焦的MVP。MVP必須是名副其實的最小化可行產(chǎn)品，要為種子用戶帶來端到端的精準體驗。如果他們不理解產(chǎn)品功能，不知道如何或為什么使用，或是發(fā)現(xiàn)其性能低劣、bug 太多，無法達到“可行”的程度，那么你的假設就難以得到有效驗證。
4）是否能夠形成完整的商業(yè)閉環(huán)？
用戶是否真的會為這個產(chǎn)品買單？換句話說，產(chǎn)品是否能賺錢并且養(yǎng)活整個團隊？
B端產(chǎn)品在初創(chuàng)期，最重要的是快速驗證產(chǎn)品與業(yè)務的親密性，能否完成既定的商業(yè)戰(zhàn)略。產(chǎn)品團隊需要通過磨合業(yè)務，快速調(diào)整業(yè)務解決方案和產(chǎn)品架構。
不僅是產(chǎn)品的打磨，整個團隊也要形成完整的閉環(huán)。工作流程、產(chǎn)品的商業(yè)運轉機制也要初步跑起來。產(chǎn)品的售前、解決方案、產(chǎn)品研發(fā)、實施、客戶成功，我們需要真實地完成這一套閉環(huán)的操作，并基于此做團隊毛利模型的測算。
解決問題，帶來價值，并且能夠將價值轉化為收益，這才是產(chǎn)品可持續(xù)發(fā)展的關鍵。只有跑通完整的商業(yè)模式，擁有長期的盈利預期，產(chǎn)品才能順利進入下一個階段。
B .「 成長期 」能力完善，產(chǎn)品擴張
成長期，即產(chǎn)品形態(tài)初具完善，并具備完整商業(yè)閉環(huán)之后，處于快速成長的時期。這個時期，產(chǎn)品將進行快速的迭代，覆蓋的業(yè)務一天比一天完整，能滿足的業(yè)務需求越來越多，而產(chǎn)品為業(yè)務帶來的價值越來越大。
與新生期的區(qū)別在于，新生期時的迭代方向還未完全明確，迭代更多的是嘗試，磨合業(yè)務與產(chǎn)品。而在成長期時，產(chǎn)品的迭代方向已經(jīng)是非常清晰了的。
1）更多用戶，更多真實需求
產(chǎn)品在真正投入運營之后，所遇到的情況一定與MVP時期有所區(qū)別。隨著產(chǎn)品的不斷售賣，我們將會接觸到越來越多的真實用戶，以及更多的真實需求。而這些用戶與他們的訴求，將會成為產(chǎn)品發(fā)展的指引。
2）解決更多問題，業(yè)務范圍擴張
經(jīng)過長期的打磨，產(chǎn)品的形態(tài)和可用性已經(jīng)初步成熟了，商業(yè)模式也已經(jīng)初步跑通。隨著更多的真實需求，產(chǎn)品將會選擇有價值的方向擴張業(yè)務范圍，從“解決一個問題”逐漸走向“解決一系列問題”。
3）功能完善，產(chǎn)品體量快速增加
伴隨產(chǎn)品的快速迭代，產(chǎn)品的基礎功能會逐漸完善，同時也會基于核心功能去搭建更為豐富的功能矩陣。更多的能力、產(chǎn)品模塊、頁面，最終逐漸疊加為一個完整的大型產(chǎn)品。
4）組織逐漸完善，人員專業(yè)化
隨著業(yè)務擴張，組織架構逐漸完善。為了提高專業(yè)性與效率，團隊人員從“多面手”逐漸轉化為專業(yè)化方向。與之對應的是，團隊成員的數(shù)量也會在這個時期快速增加。售前、解決方案、產(chǎn)品研發(fā)、實施、客戶成功，這一套完整的團隊模型在各模塊中不斷地復制。
C .「 成熟期 」效率提升，快速增長
成熟期，即產(chǎn)品的形態(tài)已經(jīng)穩(wěn)定，并能夠創(chuàng)造持續(xù)的商業(yè)價值。處于成熟期的產(chǎn)品，肯定是已經(jīng)進行商業(yè)化運行的。反之，沒有達到預期的商業(yè)價值的產(chǎn)品，不能算成熟期。
進入這個階段時，產(chǎn)品已經(jīng)實現(xiàn)了產(chǎn)品-市場匹配。但是，我們需要對整個產(chǎn)品、以及團隊進行一系列的調(diào)和與優(yōu)化，才能讓整個產(chǎn)品的形態(tài)與運作方式更加合理，以便將產(chǎn)品推向更廣闊的市場。
1）產(chǎn)品效率、組織效能提升
經(jīng)過一系列的快速發(fā)展，產(chǎn)品體量通常都會比較大，而團隊成員也快速擴張。隨著一致性成本、溝通成本增加，勢必會造成研發(fā)效率、組織效能會下降。因此，如何降低產(chǎn)品的單位研發(fā)成本？如何讓整個團隊的組織效能達到最佳狀態(tài)？是需要解決的問題。特別是當產(chǎn)品具備一定的客戶數(shù)量以后，單位研發(fā)成本的降低將會極大提升產(chǎn)品整體的利潤率。
2）產(chǎn)品設計-研發(fā)標準化，構建完整鏈路
通過產(chǎn)品設計-研發(fā)標準化、數(shù)據(jù)架構標準化，打通不同模塊的壁壘，提升模塊化與靈活性。將單點之間的競爭力相互配合，形成“場域”競爭力。
產(chǎn)品的單點也許不能保證都有最佳的競爭力，但如果我們能夠提供一系列的、高質量、無縫銜接的配套服務形成閉環(huán)，將會形成強大的整體競爭優(yōu)勢。同時，產(chǎn)品設計-研發(fā)標準化，能夠增加產(chǎn)品售賣的靈活性，通過靈活的組合方式吸引不同的用戶，提升銷售靈活性與成單率。
3）提供高質量的用戶體驗
產(chǎn)品最終是給人用的，用戶體驗也會在將來逐漸成為B端產(chǎn)品的核心競爭力。隨著競爭的加劇，以及用戶群體的逐漸年輕化，用戶體驗將成為企業(yè)在選擇產(chǎn)品時的重要考量因素，也是口碑傳播的重要途徑。
由于在“產(chǎn)品-市場匹配”階段需要盡快地推出產(chǎn)品，所以在設計開發(fā)過程中可能遺留諸多問題，需要進一步打磨優(yōu)化。產(chǎn)品設計需要與開發(fā)具備高度的一致性，視覺交互是否合理，前端代碼是否準確合理，操作反饋是否高效等問題，都需要這個階段來進行調(diào)和。
4）教育市場，賣給更多的人
當產(chǎn)品逐漸成熟并具備一定體量之后，單靠銷售跑單是遠遠達不到發(fā)展要求。這個階段，需要市場部人員對市場進行教育，聚焦不同的行業(yè)領域，從“點式營銷”轉變?yōu)椤懊媸綘I銷”，并配合銷售人員進行產(chǎn)品的售賣。因此，在這個階段，產(chǎn)品的品牌力、核心能力的傳播將至關重要。
D .「 暮年期 」商業(yè)價值降低，發(fā)展逐漸停滯
暮年期，即產(chǎn)品發(fā)展停滯甚至倒退，逐漸失去商業(yè)價值的產(chǎn)品。
B端產(chǎn)品進入暮年期的原因，主要有兩個。一是，伴隨著業(yè)務的發(fā)展，產(chǎn)品已經(jīng)很難滿足業(yè)務需求。且翻新產(chǎn)品的投入產(chǎn)出比較低。二是，伴隨產(chǎn)品的使用時長，產(chǎn)品將變得臃腫和遲鈍，逐漸難以敏捷地滿足業(yè)務需求。
很多時候，商業(yè)環(huán)境的快速發(fā)展、技術的更新迭代都有可能成為產(chǎn)品進入暮年期的原因。對于暮年期的產(chǎn)品，根據(jù)商業(yè)戰(zhàn)略，產(chǎn)品經(jīng)理既有可能要延長產(chǎn)品的壽命，也有可能持續(xù)保障產(chǎn)品完成順利換代。當然，更多暮年期的B端產(chǎn)品，由于業(yè)務的調(diào)整，最終迎來生命的終結。
需要注意的是，很多產(chǎn)品因為在成長期、發(fā)展期無法建立有效的產(chǎn)品控制機制，導致產(chǎn)品過早的進入臃腫階段。也就是前文中所講的“產(chǎn)品失控”，非常有可能加速產(chǎn)品暮年期的到來。
因此，是否能在前三個階段建立健康、完善的設計體系，是產(chǎn)品能夠獲得更長生命力、更多價值的關鍵。
?
NEXT
「 下期預告 」設計體系的構建法則
-
你的B端產(chǎn)品處于什么生命周期？在這個階段產(chǎn)品要解決的問題是什么？而在這些過程中設計體系又應該如何構建？
設計體系的建設并非一蹴而就，通常是伴隨著產(chǎn)品的而發(fā)展逐步建立的。在下一篇文章中，我們將基于B端產(chǎn)品的發(fā)展階段，帶你詳細了解設計體系的正確構建方式。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://www.yvirxh.cn