隨著科技的發展，人們的工作方式打破了空間、時間的束縛，傳統線下場景逐步遷移到線上，衍生出大量的工具型產品。由于實際業務場景靈活多變，為了盡可能覆蓋場景需求，工具型產品往往功能龐大且邏輯復雜，經常會收到用戶反饋產品「復雜、難以理解」。對于工具型產品的設計者，如何「簡化設計」是他們必須要面對的重要難題之一。
本文將從用戶感知層面嘗試分析用戶感覺復雜的原因，并根據以往項目經驗給出一些工具型產品簡化設計的方法。
提綱：
1、為什么用戶感覺復雜
2、如何簡化概念，降低認知成本
3、如何讓流程簡短高效
4、如何簡化頁面信息布局
5、如何讓操作更輕松
6、結語
你是否曾收到過類似的反饋：
“這文案是什么意思？”、“這能干什么？我需要干什么”、“那個功能在哪里？我找不到”、“要設置這么多項，好麻煩啊”、“這不能拖動嗎？”...
這些都是用戶感到復雜的反饋。從用戶的感知層面分析，讓用戶感到復雜的原因可以劃分為四大方面：概念、流程、界面、操作，以下將詳細闡述原因。
導致用戶感覺產品復雜的其中一個主要原因是：用戶難以理解產品的概念模型。概念模型指事物的基礎定義及行為模式。（例如：汽車，一種在陸地上行駛的交通工具。通常需要司機駕駛，需要消耗汽油... ）用戶根據概念模型對事物的行為進行預測，構建出自身的心理模型。
因此，當產品沒有清晰、準確地傳達出概念模型，將導致用戶產生錯誤的心理模型。用戶需要在大量探索過程中，逐步糾正自己的想法，最終才能了解產品實際的概念模型。
另外，根據「雅各布定律」和「設計心理學2：與復雜共存」，用戶基于以往積累經驗去理解新事物，即在使用產品前已構建心理模型。而當產品的概念模型與用戶的心理模型不匹配時，用戶在使用產品的過程中將持續產生認知沖突，也將給用戶帶來巨大的認知成本。尤其對于傳統工具型產品，顛覆型的概念模型，反而提高用戶的認知成本，讓用戶感到復雜難懂。
1.2 流程復雜
工具型產品的流程主要分為兩方面：單功能使用流程、多功能組合使用流程。
在單功能使用流程方面，難免會遇到一些功能在生效前，需要經過多個設置步驟的情況。雖然環環相扣的流程能夠降低產品的出錯概率，但卻會給用戶帶來更多的成本。對于每個步驟，用戶都需要經歷「理解」-「操作」-「反饋」的環節。在一些情況下用戶甚至不堪忍受，直接放棄使用功能。例如，在Airtable中創建甘特視圖，需要經歷3步才能完成配置，查看到效果。對于一些抱著嘗試心態的新手用戶來說，這是難以接受的體驗：在還沒理解功能的作用效果前，就要經歷如此復雜的流程。
而多功能組合使用流程方面，工具型產品在產品功能設計層面，往往將功能的顆粒度設計得相當精細，以靈活滿足各種場景需要。就Excel中的單元格而言，可設置單元格字體、單元格背景、單元格邊框。但如此精細的功能設計將導致，若用戶需要簡單實現整體的目標效果時，其操作流程就變得十分的冗長。甚至在一些需要重復設置的場景下，工作量將幾何級數地增長，讓用戶的工作流程將變得極其復雜。
1.3 界面復雜
大多數工具型產品都希望能在一個界面讓用戶完成所有任務，卻忽略了用戶在現實場景下的使用流程。通常一個任務完成的前提是，需要按照一定的步驟完成若干個細項任務。若無法聚焦于每一個個細項任務，而需要耗費大量的時間精力來排除其他信息的干擾，則會產生“注意力被分散”、“太復雜”等體驗感受，導致最終任務完成難度增加。
對用戶來說，界面內的信息越多負擔就越大。工具型產品通常伴隨數量眾多的功能和選項，一味的平鋪功能，只為了展示自身的功能多樣性，缺乏合理的組織布局，導致用戶需要在幾十甚至上百個選項中進行選擇，則會大大降低用戶使用效率。
1.4 操作復雜
設計者在不考慮具體操作場景的前提下，不同功能均使用同一種交互方式，名義上為了讓用戶降低學習成本，但實際上卻是不負責任地將復雜的理解過程轉移給了用戶。對于用戶而言，復雜的操作可以分為兩種：一種是「步驟復雜」，例如需要多次點擊、頁面跳轉、設備切換等；另外一種則是「認知復雜」，例如交互方式與心理預期不匹配，需用戶自行轉換。無論是哪種，對于工具型產品而言都是災難的。
除此之外，缺乏及時的反饋也會給用戶帶來不必要的麻煩。用戶需要反復操作比操作中的冗余更可怕，就像高速公路的減速帶，不斷降低用戶的效率。
2.1 隱喻、類比已有事物
當產品的概念模型越趨近于用戶的心理模型時，用戶就越感覺產品容易理解和使用，所要求的使用能力和學習成本就越低。而用戶心理模型是根據用戶的目標，以及其過往的經驗構成的。因此在設計產品的概念模型時，應盡量使用隱喻、類比的方式，讓產品的文案概念及交互行為模式）與用戶所熟知事物相近。從而讓用戶建立聯想，激活行為記憶，降低認知探索成本。
HyperCard，蘋果的早期時間的一款腳本系統。它以「Card」對產品進行命名，同時在產品交互形態上以一疊卡片的形態呈現。這讓用戶很容易就聯想到現實生活中的卡片小冊子，進而快速地了解到產品的大致行為模式。
需要注意的是，傳統工具型產品的用戶往往已被已有產品教育，積累了一定的使用經驗、習慣。對于此類產品的概念模型簡化應慎重考慮，因為用戶所建立的心理模型是較難改變的，顛覆性的變化會讓用戶之前付出的學習成本付諸東流。此時可嘗試用戶的其他感知層面切入（流程、原型、操作），以探索簡化的可能。
2.2 巧用大白話
在實際業務場景中，難免會遇到概念新穎、邏輯復雜的產品功能。由于用戶從未曾接觸過類似的事物，未建立起相應的心理模型。在設計產品概念時也就難以使用隱喻、類比的方式來降低產品的復雜度。此時可采用「目標導向」的設計方法，幫助用戶快速理解產品功能。因為用戶除了基于過往經驗建立心理模型，還可根據目標而對產品的行為模式做預測。
與其生搬硬套地創造概念，不如在合適的使用場景下，使用目標導向的大白話，清晰的傳達出功能的目標效果。讓用戶快速了解產品功能的目標效果，減少全新概念的理解成本。
例如，在交互原型設計中，按鈕往往存在多個狀態（默認態、懸停態、點擊態、禁用態）。Figma對其賦予概念“變體（Variants）”，用戶難以對此概念產生目標效果的聯想，無法建立起對應的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目標效果的大白話“組件狀態”。
3.1 快速、直觀呈現效果
對于工具型產品來說，效果直觀是非常必要的。一來能讓用戶的探索快速獲得反饋，降低用戶的理解成本。二來能帶來更加輕量的操作體驗，鼓勵用戶探索，給予用戶充分的掌控感。工具型產品的設計者應以此作為設計理念之一。但難免會遇到產品功能的邏輯流程較為復雜，需要經歷多個環環相扣步驟的情況。而研發者往往更關注與代碼的邏輯及可維護性，更加推薦邏輯嚴謹但流程冗長的設計。這時設計者應堅守設計理念，不斷在用戶體驗與功能邏輯中尋找平衡，貫徹落實設計理念。
對于冗長的流程，設計者可通過以下方式解決：
（1）根據場景自動化配置
良好的產品應該是聰明、高情商的，能夠根據用戶的實際情況進行自動化的配置，以減少用戶操作。在進行自動化配置時，應謹慎梳理清楚用戶的所有場景，以及每種場景意圖，避免過度聰明，導致畫蛇添足。
例如，在Notion中可一鍵創建Timeline視圖，無需用戶進行任何配置。因為其做了場景自動化配置處理：自動配置所需要的字段。
（2）清晰的修改配置入口
在進行自動化配置后，不可避免可能存在場景理解錯誤的情況，導致自動配置的結果不符合用戶實際情況。此時應提供清晰的修改配置入口，例如在用戶可發現錯誤的地方中提供入口，允許用戶在發現錯誤后即可發起修改。
（3）異常后置處理，先讓用戶用起來
不應要求用戶在功能生效前處理完所有異常。因為對于每一個步驟，用戶都要付出理解及操作成本。尤其在處理異常情況時，用戶需要耗費巨大的成本，極有可能因阻礙過大，從而放棄使用功能。設計者應將異常后置，確保用戶能都快速查看功能效果并使用起來。對于異常的問題，應允許用戶后續持續處理，不阻斷功能的使用。
例如，在Figma中導入sketch文件會遇到，多種格式適配問題。但不影響導入流程以及FIigma的正常使用，用戶可以在倒入后在對異常進行處理。
3.2 基于目標組合功能，一鍵快速設置
一般來說，工具型產品服務的用戶群體較廣，需要滿足豐富的個性化需求。在產品功能設計上，功能的顆粒度較小，能支持精細化的配置。這樣導致用戶需要實現組合的目標效果時，需要執行多個功能配置，整體的配置流程較為冗長、復雜。設計者在設計工具型產品時，除了要考慮單個功能的使用體驗，也要從用戶目標出發，全局考慮用戶使用產品的整體流程體驗。
如何既能保持產品的「靈活度」以滿足豐富的場景，又能減少整體操作流程，提升用戶效率?！敢绘I操作」及「自定義腳本」是較為有效的方法。
（1）一鍵操作
基于用戶的目標，可以對一些列相關的功能進行組合，允許用戶一鍵設置，快速達到目標效果。同時應存在更多配置的入口，允許進階用戶進行更加詳細的配置。例如，Keynote中可對文本框進行快速樣式設置，設置內容包含字體顏色、文本框背景顏色。當用戶需求較為簡單時，只需設置一次即可達到目標效果，而無需設置多次。
（2）自定義腳本
自定義腳本，指允許用戶將一系列操作/設置組合為一個操作組的能力。在一些進階場景，用戶往往存在個性化的需求，對產品功能有著相對固定的使用習慣。自定義腳本，能夠極大幫助用戶減少重復性的操作，提高整體效率。
在Figma中，充滿了類似概念的設計，如：組件、樣式（文字、顏色、效果）。用戶可自定義保存相關的配置參數，以方便多次復用或一鍵修改。
4.1 圍繞行為組織功能，走一步看一步
在設計界面原型時，需要先了解用戶的任務目標，用戶想做什么，先做什么后做什么。充分掌握用戶心理模型的行為路徑，基于用戶的行為路徑進行組織功能，以確保用戶在每個環節中所看到的信息都是必要且準確的。工具型產品通常擁有多個可選設置項，拆分任務步驟可減少用戶被非必選項的干擾。
除此之外，不同的用戶角色的行為路徑也會有所不同，例如：創建者，協作者，以及是否有編輯權限等等。不同的用戶場景對于功能的訴求也是不一樣的，而這就需要設計師從產品的定位，主流用戶以及使用習慣綜合考量。在優先滿足主流用戶場景的基礎功能上，再進行其他場景的功能增減。
4.2 功能層級分區，巧妙地藏起來
（1）功能分區
George A. Miller在《神奇的數字7加減2：我們加工信息能力的某些限制》中表明，人的大腦最多同時處理7±2個信息塊（即5-9個），若超過則出錯的概率將會大大提高。對于無法避免復雜信息的情況下，可以將煩瑣的信息分塊，組織成清晰的層級結構，例如：微軟Office 中頂部工具欄包含上百個功能選項，為了便于用戶能快速找到想要的功能，他們將所有功能進行分塊，包括：字體、對齊方式等模塊。每個模塊下再細分具體設置項，具體設置項又包含了其它功能?；谇逦膶蛹壗Y構，用戶可快速通過「字體模塊」-「字體設置項」- 「微軟雅黑」三個層級中快速找到想要的選項。
值得注意的是在信息分塊時，需制定出清晰的劃分界限，可通過詢問不同的用戶來判斷界限是否清晰。
與此同時，布局效果是否清晰，對于簡化界面設計而言同樣重要。合理運用「格式塔原理」中的「接近性原則」，將同類元素放在一起讓用戶在視覺上感覺是一組，再根據同組元素中的重要性不同，大小上也應有所差異。做到讓用戶只看一眼便可快速找到想要的功能。
（2）隱藏高級功能
「帕累托法則（二八法則）」同樣適用于工具型產品設計，即20%的功能影響80%的用戶體驗結果。換句話說，大部分普通用戶經常使用的基礎功能僅占20%，但影響程度卻遠超于剩下的80%。所以需將功能劃分為基礎功能和高級功能，在優先展示基礎功能的前提下，再考慮高級功能或自定義功能的展示，必要時可將高級功能或自定義功能進行隱藏，但前提需是可見的。例如：更多設置，更多選項等，即對專家用戶始終保持可見，但又不打擾普通用戶。
5.1 減少不必要的操作，使用更自然的交互
簡化操作的過程中，針對不同的操作賦予最自然的交互形式能減少用戶操作過程中的精力消耗。自然的交互應該是用戶無意識的操作，是基于過往生活經驗，閱歷，學識等的一種本能，幾乎不需要過多的學習成本即可完成。例如：用戶旋轉一張圖片。相對于在輸入框中輸入旋轉角度參數而言，將光標直接操控在圖片上旋轉顯得更自然。輸入需要至少三步（點擊文本框-敲擊鍵盤數字-點擊確認），而直接旋轉只需要兩步（點擊-旋轉）。因為對于用戶而言，點擊圖片進行旋轉更接近現實生活中的操作，不管是交互步驟還是心理認知上，都會降低用戶的操作難度，讓用戶覺得產品更簡單更自然。
5.2 提供及時的反饋與幫助，避免重復操作
在操作過程中得不到反饋，出錯后再重新填寫，同樣會增加操作的復雜性。在尼爾森十大可用性原則中，第一原則就是系統狀態的可見性。系統需要讓用戶知道自己在做什么，需要讓用戶知道系統做了什么。例如：在表單填寫時及時反饋是否出錯，在格式設置時及時反饋是否生效，可以讓用戶少走彎路。必要時給用戶提供幫助也能簡化用戶操作的復雜性，提高操作的成功率。
引用《簡約至上》中的所說：創造簡單用戶體驗的秘訣就在于把復雜性轉移到正確的地方。任何產品都具有一定的復雜性，設計的目的不是為了消除所有復雜性，而是將它們放到最合適的位置。簡化產品的復雜性替用戶排除不必要的干擾，通過設計師的努力給每一個用戶帶來簡單、愉悅的使用體驗，讓復雜的工作更簡單。
作者：騰訊ISUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
7秒的消費決策中，67%的決策取決于色彩。
色彩是我們感知世界的重要媒介，在設計中僅次于功能的另一要素。色彩與我們的生活息息相關，怎樣科學配色、靈活用色成了絕大部分設計師的難題。
作為一名擁有多年擰螺絲經驗的設計師，不免每天都會和色彩打交道，在配色的過程中，你是否也曾遇到過以下困擾：每次做項目隨便吸色？
盲目運用色卡？
配色總是看起來不舒服？
色感差，天天被老板和同事Diss？
…
接下來，請你花幾分鐘看看谷歌等其他大廠，都在用的系統配色方案。以下以船長BI為例，做品牌色彩的規范引導。
船長BI：
深圳船奇科技有限公司-是中國專業的跨境電商SAAS系統服務企業。旗下船長BI，專注亞馬遜精細化運營與大數據分析，為不同階段、不同規模的企業提供全場景多維度分析，一站式精準推廣和全鏈路供應鏈協同管理，幫助企業實現數智化運營。同是船奇科技也是亞馬遜SPN服務商。
01
1-1 設計主張
船長BI系統是亞馬遜精準化運營及大數據下鉆分析的高效化共同體。從單功能運作到多功能融合，再到大數據多元化產品下鉆、閉環及溯源，打破了亞馬遜跨境運營服務商單點運作的局限。我們希望新的品牌色，能夠為船長BI在跨境企業中營造更加權威、高效向數智化轉型的視覺感知。
船長BI 設計語言：英文Captain BI Design Language簡稱CapDesign。
經過團隊的諸多調研到佐證,我們將品牌標準色太平洋藍(Pacific Blue)，升級為更加科學、權威、智略的明亮立體的黑綠松石色(Dark Turquoise)。黑綠松石色在跨境電商行業中具有更多神秘的數智化意味，在實際應用中隱含著更多的生機和信任，表明了船長對進入數智化運營新挑戰的氣魄。同時，品牌色的升級能夠快速區別于競品，形成船長BI獨特的色彩感知，通過色彩感知形成品牌記憶。
色彩命名源自潘通Pantone。
1-2 創建調色板
人的視覺系統在辨別顏色時，不會把色光分解成RGB或者CMYK幾種單獨顏色，而是按照色相度、純度和明度來判斷的，也就是HSB。HSB模式可以完美固定HSB中的某一個參數，只對其他兩個參數做改變或者只改動其中的一個參數，符合人對色彩差異幅度的感知，而RGB、CMYK都是牽一發動全身的節奏。↗
我們以CapDesign品牌基準色#2AC5D4（H=185\ S=80\ B=83) 為起始點，S飽和度、B明度保持不變，H色相以185°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據。
02
拓展豐富的輔助色
2-1 以鄰近色、互補色、對比色為原則，選擇絢麗多彩的輔助色↗
為了保有更多CapDesign 的品牌基調，我們選擇了相對較多的鄰近色，以保證整體色韻的清爽感和數智科技化意味。并利用對比色及互補色擴展色相，選擇更加豐富多元的輔助色，使其色相對比鮮明，以保證能色彩夠滿足各種復雜場景。
Q：色相位到底選擇多少個合適？
A：有的產品選擇7個色相位，有的產品選擇10幾個色相位，都是允許的，選擇的依據取決于：
1.色彩對比明顯，選擇色相數少；色彩對比柔和，選擇色相數多；
2.產品功能的場景簡單，選擇色相數少；產品功能的場景復雜，選擇色相數多；
Captain BI 是亞馬遜運營與大數據集成，功能交叉比對及數據可視場景復雜，為迎合業務發展需要，CapColor選擇的色相位為13個。
2-2 校正輔助色(波長和振幅)
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于每個色相的波長各不相同，導致色彩在感官感受上存在差異。
在可見光波譜當中，波長越長其穿透力就越強；紅色的波長是最長，穿透力就最強，感知度最高。↗
為了讓不同色相在視覺感官上看起來更加協調，需要對色板的明度和飽和度進行反復的校驗，以保證視覺感官更加和諧舒適。
校正原則
A.色相最好維系在同類色(色相環中15°夾角內的顏色)↗
B.色相感官保持平衡(明度和飽和度)
C.保證視障群體的識別度(WCAG 對比度)
調色的技巧
淺灰色調: 飽和度減少(S↓)，明度增加(B↑)
深色色調: 飽和度減少(S↑)，明度增加(B↓)
使用HSB調色模式時，可以參考以上規律，能讓快速調和想要的顏色。校正后得到了以下色域清晰、對比明顯的主色及輔助色。并且針對視障群體進行了色彩測試。
2-3 拓展梯度色譜
校正主色和輔助色后，我們需建立完整的梯度色板，來滿足不同場景下顏色的應用。建立色彩層級，以提升品牌感知，達到信息傳達辨識、強化界面層級等作用。
在梯度色板系統中，很多配色產品都是使用Tints and shades系統：通過在原有色相的基礎上增加白色或者增加黑色，來改變它的明度和飽和度，形成梯度色板。但這種方法得到的調色板往往比較刻板生硬。CapColor在Material Design-Color的基礎上進行了細化，構建更有層次感、空間感、立體感的梯度色板。
CapColor梯度色板：
1.在Primary的基礎上，使用Tints and shades系統找到Light和Dark：
Light=(White+primary) 95%疊色；
Dark=Black 60%疊色；
Primary=原色相。
2.結合Material Design-Color實踐，得到CapDesign梯度色板及相應的參數。
CapColor選擇10階梯度，對比穩健，更能凸顯船長系列產品權威和成熟的形象；9階梯度相對生硬跳躍，12階梯度過于柔和平滑。
有的色相穿透性強、飽和度高，所以還需要進一步的校驗，如藍色 RYB：
運用以上的方法，得到CapDesign豐富的調色板，為后期業務做支撐：
03
易用的中性灰色
Captain BI系統大部分是由容器、面板、列表、卡片等其他組件及元素構成。中性色為系統銳化布局、表達邊界、建立信息層次起到決定性作用。
3-1 中性色
中性色的搭建同時滿足暗黑模式、換膚及印刷等諸多場景，故在實現時按照透明度的呈現方式。
3-2 黑綠松石灰色
中性黑綠松石灰色解決更多復雜的場景，如表格和表單雙底色、圖標的顏色等。中性黑綠松石灰色增強布局、區別背景，起到強化信息層次的作用。
黑綠松石灰在中性灰色的基礎上增加色相和飽和度，這樣得到的藍灰色還是有些許生硬，還需要對飽和度和明度進行微調，讓顏色更有層次感。
中性黑綠松石灰的方法：
在配色模式HSB中：
H=185(Brand Color)；
S=3(必要時微調)；
B=保持不變。
3-3 WCAG 2.1測試
為保證視障用戶的使用，保證足夠的對比度，CapDesign 遵守 WCAG 2.1 的標準，對調色板對比度進行了可用性測試，為后期靈活用色奠定基礎。以中性灰色為例：
WCAG 2.1中規范了A、AA、AAA的對比值范圍及使用場景，感興趣的朋友可以前往WCAG 2.1官網詳細了解，在這不在贅述。
3-4 場景案列
實踐是檢驗真理的唯一標準，以下通表格的微交互對中性色進行完美的詮釋：左邊的表頭和表格背景粘連到一起，視覺及信息識別困難。通過交叉運用中性灰色，明顯右邊的表格結構、信息層級得到強化，視覺更聚焦。
結語
主觀情感的取色，一開始可能沒遇到什么大問題，但隨著產品不斷完善，主觀取色往往不能滿足業務發展訴求?？茖W的系統配色，真正滿足和服務設計；同時對設計一致性及提升團隊效率起到肯定的作用。
通過這個漫長的配色過程，你是否重新審視過去設計中的配色方法？希望對配色困擾的你有所幫助。
色彩系統中的系統配色部分已經完成，接下來我們將死熬，續更系統配色在實際項目中的應用，做到科學配色、靈活用色。
作者：楚焱UX
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
表格系列第一篇我們聊了表格的基礎內容和表格的組成要素，包含表格由內（展示項）、外（操作項）兩部分組成，如圖：
表格作為展現結構化數據最為清晰、高效的形式，常和按鈕、搜索、篩選、分頁等其他元素一起協同，構成表格頁。通常表格頁面包含三個部分：數據過濾、數據操作、數據查看。
數據過濾是對數據進行篩選的部分，由搜索、篩選、標簽這三個部分組成。產品設計上提供多維的篩選和排序，將操作者所關注的數據展示到前面，便于快速查看、對比、分析信息，是一種增加用戶效率的有效方式。
一般搜索和篩選會同時出現，但是兩者一般很少同時使用來對數據進行定位；
搜索的交互觸發方式有“實時篩選”和“點擊按鈕觸發篩選”。實時篩選只適合數據量較小、數據嚴謹的表格頁面，建議謹慎使用?！包c擊按鈕觸發篩選”適合大部分表格場景。
因用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。
用戶搜索意圖不明確時，將用戶的查詢與待檢索的內容進行模糊匹配，使用模糊搜索時一定要結合自己的實際場景，慎重使用。
優點：只要有相關的內容都會被檢索出來，減少了精準搜索帶來的記憶負擔；
缺點：容易把相關的信息也帶出來，例如檢索地址廣州，把廣州的相關編碼也匹配出來。
用戶在搜索時，針對某一數據字段搜索，來查找所需要的數據。
優點：搜索匹配精準度高。
缺點：每次只能對單一條件進行搜索。
搜索根據表現形式，可以分為以下四種類型：
單屬性精確搜索：通過某個特定屬性就可以快速定位到目標數據，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
切換屬性搜索：可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。
多標簽模糊搜索：表格多個數據都具有特征，往往業務要求對數據的精確度較高。
多屬性組合搜索：可以輸入多個字段進行組合搜索（取并集），對空間的利用率高，適合更加復雜的列表內容。
篩選是將用戶所需數據選出展示，其余數據暫時隱藏，通過篩選器的選擇可以快速定位所需的數據，取消用戶輸入的過程，提升查找效率。一般篩選有三種形式：
平鋪篩選就是將篩選項的內容，直接展示于頁面之上，用于篩選條件很多，單獨篩選條件對應數據無交叉，常見于信息密集型產品。
優點：可以承載多維的數據信息，選中項的可見性高，用戶理解成本與操作成本低，且提高了用戶篩選的效率。
缺點：占用太多頁面空間，影響首屏的展示效率，增加用戶的決策時間。一般配合“勾選即執行”使用，因此在執行篩選的過程（動畫或加載時長）可能分散用戶精力。
通常電商類產品在篩選區往往采用平鋪布局。
條件篩選是最常用的篩選交互，便于從多個維度篩選，應對各種復雜的篩選情況。條件選擇完后，選擇觸發篩選（若篩選條件不交叉可以選擇實時篩選）。
優點：空間利用率高，起到了很好的收納作用，整體頁面更加美觀。
缺點：當篩選過多時，信息量過于冗雜繁多。
2.3 表頭篩選
優點：篩選當前列，更直觀，一般情況下表單左側數據篩選頻次越高。
缺點：篩選的內容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學習
2.4 如何合理的使用篩選項
信息排序：基于用戶使用場景，以目標導向為依據，將高頻的篩選項排列到前面，低頻的篩選項置于后面。
默認折疊低頻篩選項：當篩選條件有高低頻之分，且對頁面空間要求較高時，通過展示高頻篩選項、隱藏低頻篩選項，更好的提升用戶體驗。
所有篩選項都很低頻：以點擊高級篩選按鈕的形式觸發，將全部篩選項置于氣泡或者彈窗之中。
在企業級中后臺中，用戶查看的數據往往屬性較多且不唯一，通過簡單的檢索方式很難精確定位到目標數據，所以，在實際使用時，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、標簽切換組合出現，形成多屬性組合檢索。
三、tab標簽
標簽切換一般用于和時間、狀態的流轉有關，且沒有交集的數據內容。數據類型在5個以下的建議采用tab頁切換的方式進行交互，展示清晰，用戶操作效率高；超過5個可以考慮下拉選擇或模糊搜索。
優點：根據標簽，可以很清楚知道劃分，篩選的準確性高，切換tab就可以篩選內容。
缺點：分類需覆蓋選項，并且保證每一項沒有交集，分類不能過多，超過7±2個選項可選擇下拉篩選。
在使用中，索引本身應該是0思考成本的，否則就失去了索引的核心價值。圍繞這一點，有兩個設計原則：
1）寧少勿多和高頻前置：即不要揣測用戶需要，最常使用的展示位置盡量靠前。
2）當搜索項不可避免的比較多時，可以進行分類展示，降低尋找成本。
數據操作是表格的操作部分，根據操作對象的不同，可以分為：
單行操作也稱行內操作，常見的顯性與隱性兩種方式。
1.1 顯性操作：
操作項顯示在行內，直觀；文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將相對低頻操作選項折疊收起，點擊"更多"或“...”下拉顯示。操作按鈕致灰時，鼠標選中可顯示原因。
如果單行操作不那么重要，或者說行操作過多影響用戶閱讀時，可將所有的操作進行隱藏；
當用戶鼠標懸停時進行展開所有操作，界面簡潔，留更多的空間給需要查看的數據內容，減輕空間壓力，減少干擾。這種方式能最大程度上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學習成本。
a、對齊式
將所有操作進行整齊排列，一般是一個操作對應一列，當有操作缺失時，展示為空，這種方式能夠讓用戶直接了解到操作的缺失，但反復的出現會造成表格視覺上的冗余，適合列數較少的表格使用。
將所有操作按照一定的預設排列順序進行平鋪，這種方式能夠適應B端的大多數場景，將操作都簡單平鋪出來雖然看上去簡單粗暴，但是在實際工作中，也是一種不錯的處理方式
設計點：操作按按鈕是全局操作還是單行操作其實是可以根據具體業務場景來決定的，判斷用戶批量操作是不是高頻功能，如果是，就采用全局操作，如果操作是低頻操作，那么完全可以只提供單個操作功能。
二、批量操作（表格外）
批量操作適用于數據量較大的表格，通常把操作放在表外部上方，這樣操作更便捷。批量操作允許用戶對一行或多行對象執行操作，通常與復選框操作配合使用，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作，分顯隱性操作：
較為常用，外漏操作簡單易懂。如有贊的批量操作，表格左上角和左下角都有，這樣不管用戶從上往下選還是從下往上選的場景都能覆蓋；飛書的批量操作外漏在表格表格的右上角，雖然按鈕放在右側符合用戶右手操作鼠標的習慣，而且考慮到適配問題，但是批量操作的路徑不符合用戶的操作動線，路徑變長，大家可自行抉擇
容易造成記憶負擔，增加學習成本，適合批量操作較低頻的操作，產品沒有那么復雜的產品。如飛書文檔
統攬全局，無需選擇數據內容即可進行的操作，常見的【新增】、【導入】操作。
數據查看是表格的主體部分，是信息的主要承載區域。在開始之前，我們先來看看該區的結構：主要由表頭、行、列、單元格四個部分組成。
每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數據類型。
表頭在展示信息的時候盡量概括、準確、簡化，達到節省表格頭部空間，引導用戶的注意力聚焦于表格中的數據本身。表頭并不是表格的必要元素，當數據本身能自我表意的時候（例如郵箱），表頭是可以刪減掉的。
通常，表頭的設計會和下方列表設計有一定的區分，標頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗等方式來做區分。
根據表頭的構成，可以分為以下三類：
除了容納行標簽之外，表頭也可以添加排序、搜索、篩選等功能，通過對表頭標簽的篩選可快速完成篩選條件。這些功能受列的影響，一般只能做單次篩選。雖然表頭篩選能在一定程度上節約空間，但對于復雜業務的產品來說，數據信息列多，高頻篩選功能可能會被遮蓋，表頭復雜影響用戶表格閱讀，不推薦使用。
可配置列與配置篩選條件的功能類似，同樣是考慮到不同角色的用戶，查看數據的視角不一樣，對應的關心的字段也會不一樣。
有些表格由于數據量較大，需要對頁面的上下滾動完成對數據的查閱，對表頭進行固定，可以幫助用戶更快地找到單元格的屬性和含義，尤其是單元格屬性信息數據沒有特征時（比如都是數字、百分比、姓名等）固定表頭可以大大提高使用效率。
當然還有固定列，當表格需要展示不同類別的數據較多一屏展示不下，可以對首尾字段進行固定，讓用戶通過左右滑動來實現對數據的快速翻閱，滿足用戶對數據的認知以及對數據操作的需求。
注意盡量避免橫向滾動：正常鼠標橫向滾動是需要用戶按住 「Shift + 滾動」 才會使表格進行滾動，對于所有的鼠標用戶而言，橫向滾動都是極為痛苦的。
表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用。當數據結構比較復雜的時候，使用多級表頭來體現表頭與數據的層次關系。
對于比較復雜的表頭，可以定義一個專有名詞，如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。鼠標hover上去對專業術語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。
如果表格數據可以自我解釋，表頭就不是必須的。例如電子郵箱的收件表格，每列數據區別度高不會混淆，去掉表頭也能輕易閱讀。
表體部分所需要注意的設計點比較多，內容包括了數據的對齊方式、字體、分割線、行高、數據顯示、單元格、行與列等，下面我們來依次聊聊。
表格內數據按照格式塔原理進行對齊，能讓表格更加規范易理解，營造出良好的視覺引導線，視線流動更順暢,提升數據的瀏覽效率，讓用戶快速的捕捉到所需內容。其對齊規則如下：
符合正常的心智模型，便于用戶掃描過程中快速定位到下一行文本，左對齊的文本在展示的時候起到了縱向分割線的作用。多行情況下，居中和頂部對齊都是可以的。
包含金額、長寬高等需要關聯比較的數字字段，這是因為我們在對比數字時，首先看個位，然后十位、百位等。
比如日期（2020-11-11），狀態文字（未審核、已收款等）或者存在布爾關系的文本（是/否、男/女等），字段固定不變，居中對齊能更好地信息呈現。這里根據業務也可以按照文本型左對齊處理，讓用戶查看表格不會感覺混亂。
對齊方式保持相同可以使表格更好閱讀，上下文保持一致，能保持表格豎直方向整潔，營造一致性和上下文環境。多級表頭：多行或多列合并居中對齊，最底層表頭可以按其數據對齊方式對齊。
使表格更加規則，視覺統一提高操作效率。
表格數據一般包含文本和數字，良好的字體能提高表格本身的閱讀性。設計上需要注意以下幾點：
表格中的數據要根據數量級確定展示形式，不需要精確的數學呈現，可以讓用戶更快地查找信息，下面是展示形式的建議。數據的度量單位無需重復標注，只需要在表頭標識清楚即可，注意同一列單位保持一致。
深入了解用戶需求，根據需求為用戶提供差值、升降變化、合計值、平均值等直接展示形式。
表格中字體保持一致，文字信息字體統一、數字信息字體統一即可。數字信息字體選擇——建議等寬等高字體，等寬的數字在同一豎線時更容易對比。推薦以下幾款數字字體在表格中有更好的呈現效果，分別為：微軟雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。
設計表格時，盡量避免任何裝飾性字體，簡約至上才是關鍵
不要出現襯線字體：因為個性會產生閱讀噪音，不利于用戶對數據的理解和思考。
不要出現全大寫字體：因為它很難讀，需要轉化思維。
不要出現使用斜體：易引起視線疲勞，影響閱讀。不要出現多種字體：保持風格統一。
在表格設計當中，每一條線都有著它存在的意義，比如：
當表格中展示橫線，隱藏縱線：用戶的橫向閱讀體驗更佳，強調一條數據的完整性，能夠讓用戶進行快速地對應。
當表格中展示縱線，隱藏橫線：用戶的縱向閱讀體驗更佳，強調數據上下間的對比，能夠讓用戶找到同一緯度數據下的對比。
在表格設計中，合理地使用分割線可以實現對表格行與列的強調。按照分割線的分布情況，可以分為4種類型：網格型、水平線型、斑馬條紋型、極簡留白型。這個部分在上一篇已詳細說明。
設計tips：表格具有的顏色盡可能少，顏色和可讀性是密切相關的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。
背景色方面，除了行/列交替顏色(可以區隔內容，引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區分，但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
分割線和斑馬紋的應用色彩都不應該太深，如果你項目中對表格有比較多的選中需求，那么就不太建議使用斑馬紋的格式，因為選中背景需要被高亮，那么一個列表就會出現 3 種顏色，是要盡力避免發生的。
開發同學工作的時候，使用的是盒子模型，設計師在出設計圖的時候也要遵循開發邏輯。
為了讓表格中的文字高度看起來舒適，有著視覺的呼吸感。我們首先得了解影響行高是由文字的高度以及上下間距組成。因此我們得出：
單元格高度=內容高度+上間距+下間距
單元格的尺寸包含：文字行高建議設為字號的1.5倍，上下間距設為字號的1.2倍。
對于單行顯示數據內容的表格，建議行高約為內容高度的2.5-3倍；對于多行顯示數據的表格，建議行中內容的最高點與最低點到行框的上下邊距略小于文字高度。
當數據有單行信息展示有多行信息展示時（或長度不固定），要定義內容的行數（根據業務），根據行數確定行高多出的內容做省略處理。
固定行高時可以規范幾種不同的表格行高，例如在我日常工作中規定了3種行高56px80px110px，行高較高時，我們數據內容都進行居中對齊就會有一些問題。有些單元格只有一行信息，有些有多行信息，會使頁面看起來更混亂，信息查找速度降低。
表格行高跟隨行內占用最多行數的單元格變化，設置固定的上下邊距，表格行高隨著數據信息的換行而變化如下圖。
單元格數據一般有文字、圖標、頭像、進度等，在具體業務中，如果你找對了用戶想看的關鍵數據，將會大大提升用戶體驗，反之則干擾用戶查找信息，對于較為重要的數據可以進行關鍵數據的標識設計。
標簽：關鍵數據較多，顏色與視覺重量要做區分。
圖標：名稱與文件類型圖標區分。
人員信息：展示在表格中也十分常見，通常會用頭像+名稱的方式，例如下圖temabition和飛書中對人員信息的展示。
度量單位的使用：其中的關鍵區別在于數字的大小。數據的度量單位無需重復，一般在表頭標識清楚即可。
進度條：進度條或簡單的數據圖，它更能直觀地展示數據的進度狀態，方便用戶對數據信息做判斷如下圖。
關鍵屬性標識：比如用戶重點關注數據狀態、某些數據的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。
空表格：表格數據為空時要給予一定的提示信息或快捷操作，讓用戶更快地進行對數據的操作。
空單元格：當表格單元格中沒有相應數據時，要避免直接留出空白單元格?？瞻赘袢菀自斐捎脩舻睦Щ笊踔琳`解，用戶會搞不清楚到底是沒有數據，還是根本沒有值？
正確做法是，數據不存在（數據庫中沒有該字段）用“-”，沒有數量（數據庫中有該字段）用“0”，且小數點后位數、單位，都要與上下單元格保持一致
是對單條數據的修改，直接在單元格編輯信息的形式有很多，針對不同的數據提供對應的編輯方案。
包含：原位編輯，懸停氣泡編輯，下拉狀態編輯，點擊彈窗編輯拖曳排序等等。針對不同的業務性質對單元格采用不同的交互形式。
拖拽排序為用戶的自定義排序，在用戶拖拽時頁面布局保持不變，適用于數據量較小有自定義排序的情況下。
可以通過視圖切換查看更多細節，例如在teambition中支持對任務的表格/列表/看板三種視圖的查看，每種視圖的側重點不同，可以 適應不同角色用戶的不同專注點。
工作中常常會遇到單元格數據過多的情況，常見的方法有兩種：
1、定義一個單元格長度或字數限制，超過該范圍以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。
2、折行顯示，這種方法讓平鋪直敘，用戶可以直接了當的看到所有信息，建議不要超過三行，超出可“...”顯示。
3、允許用戶拖邊框設置列寬，并記錄設置。這種方案弊端是會占用橫向的空間。
列寬的設置對于用戶的高效閱讀還是很有作用的，在設計時要根據具體的業務信息進行分析，列寬嚴謹的處理方式有三種：
第一，通過柵格，由列的數量決定列寬，主流框架組件一般是這種；
第二，可以固定部分列的寬度，其余列則按百分比處理；
第三，在固定寬度的基礎上，允許用戶自由拖動調整列寬的大小。（當然我覺得不要太拘泥這個，合適就好）
為了讓不同數據在表格中相互獨立，不混淆。我們需要保證首尾列的內容與表格兩邊的間距N1保持固定，不同列之間的間距N2在最小寬度的基礎上，隨著表格的尺寸不同而做自適應的變化。
在設計表格的初期，就需要做好設計規范，表格的邊距要統一制定。
列的數量建議最多展示9條，因為人們的記憶在7±2之間，數據太多用戶會找不到重點。但也不是必須，根據業務需求，如果需要大量數據展示時也要展示，因為視覺永遠低于業務（好用比好看更重要）。
列信息從左往右視覺權重程度逐漸降低，最后一列權重高（以眼動實驗或點擊數據為依據得出權重高低）。所以盡量減少列的數量，關注用戶需要的必要信息。當數據列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區域左右拖動。
為便于用戶對數據進行對比分析，可以在原始數據的基礎上給出差值、升降變化等數據處理結果，減少用戶數據加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。
在一些用戶高度自定義表格中，數據的列寬不好確定的情況下，可以允許用戶對列寬進行調節。通過光標的變化提示列寬自定義操作，拖動可完成列寬設置。
列數據還可以根據用戶需求進行自定義設置，可以選擇要展示的列，在默認情況下僅展示最常用、最重要的幾個指標（如下圖），也可以對列進行排序。在表格右上方的設置按鈕對表格進行設置，清晰高效。用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。但需注意系統應記住用戶上一次的自定義列設置，減少用戶重復操作。
底欄在表格最下方，一般是統計信息、分頁控件、備注說明、操作按鈕(加載更多)等內容。
底欄最常見的元素就是分頁，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。
1. 良好轉換：用戶在結果列表中查找特定信息而不僅僅瀏覽信息流。
2. 掌控感：分頁可以讓用戶知道表格的總量以及當前頁面在總量中的位置，知道瀏覽完頁面需要多長時間。
3. 數據加載快：通過對加載內容的限制，可以極大的減少數據加載的時間。
額外的動作：用戶要到達下一頁表內容，就必須點擊分頁控件上的按鈕跳轉，等待表格新內容的加載。
簡潔型：當分頁數量較少時，通常在7頁以內，就只有最基礎的展示。
迷你型：當頁面空間不足或者降低分頁的視覺影響時，可以采用迷你型。
多功能型：當表格數據較多，為了滿足更多的用戶需求，可以根據需求選擇分頁類型。完整型的雖然滿足各種功能需求，但是所占空間較大，所以我們要根據自己的需求合理拆分使用。
分頁的選擇需要根據不同的場景選擇最優的設計方案。
表格無限下拉加載使用戶在數據內容面前一直滾動查看。向下滾動的時候不斷加載新內容，雖然十分方便與誘人，但不是什么場景都適用。一般來說，無限滾動適用于在數據有限且信息重復的表格，有利于內容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。
1.高效瀏覽：一個高效的方法讓用戶瀏覽表格數據信息。
2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。
1.受限性能：緩慢的加載速度會造成用戶的不耐煩與離開。當數據量過大時，結果就是頁面性能越來越低。
2.位置丟失：沒法標記當前位置且不能再隨意回到之前位置。一旦離開，就會丟失當前的瀏覽記錄，要回到上次的位置，必須得重新滾動去尋找。
3.信息缺失：滾動條并沒有反映出實際數據量。
除了分頁的使用還可以進行無限滾動的交互，鼠標點擊“加載更多”按鈕以查看更多數據。這個功能不太適合數據量較大的表格，在具體業務中一定要慎用。
在今天的 UI 設計領域，由扁平化設計風格占據主導地位，已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。
一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標、幾何、文字，UI 設計師的工作僅僅是對內容進行組織和排版，涉及到原創的也僅僅只有少量的圖標（大多數人還畫不好）。
這種狀態持續了很多年，看起來歲月一片靜好。
但是，這兩年市場發出了一些不同的聲音，那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。
比如新擬態風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發文和介紹，介紹它的設計理念和設計方法。
還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標，引起設計圈的熱議。
首先講講新擬態設計，之所以之前只字不提，是因為我對這個風格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應用是完全不適用的，只能活在飛機稿里。
而國內大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經過幾個大廠團隊認可，且有共識的。
當然，這并不因為大廠用了就無腦推崇。而是純扁平的設計已經越來越難滿足部分需要強視覺效果的頁面設計了。
今天的互聯網和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯網產品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現狀也被稱為互聯網的下半場。
佛系不行，當舔狗更不行（成本太高），所以今天大型產品都在對待用戶的態度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應用，進入的首頁大家自己意會……
有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后，那么進一步在一些細節處應用擬物就成為必然的選擇。
而擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區域的感知。
最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配，相信大家已經很習慣了。
只是，這些圖標開始在脫離運營活動的狀態下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區）！
且除了 APP 外，其它領域對于擬物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數據展示、車載界面、定制系統等等。
作為新世代的 UI 設計師，多數人對擬物的設計可以說是完全空白的狀態，所以是時候要重拾擬物設計這個傳統藝能了。
前面我有提到，擬物主要應用在關鍵的圖標上，但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優秀的擬物圖標和設計案例，它不僅表現元素本身的光影、透視、構造，甚至會非常完整的表現物體表面的材質和肌理。
這種圖標單看起來確實很好看、細致。但是，把它丟進我們當前的頁面中是非常違和的，因為它們細節實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。
所以為了符合畫面的質感，又要考慮項目效率，輕擬物這個概念開始被提出和應用，作為一個折中的解決方案。
它和純擬物設計的共同點在于，也表現光影、結構、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現出更概念化、理想化、易于辨識的擬物圖形。
所以，我們主要去學習的內容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實體質感的。但是扁平從插畫到圖標設計經過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設計，應用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標的系列干貨中有提過，這類設計是面性圖標的進階版，它們依舊屬于扁平風格的范疇之內，不能和輕擬物劃上等號。
對于這幾年才開始學習 UI 設計的新手來講，擬物已經變成一個很陌生的事物，這對行業來說是比較悲哀的一件事。
因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養，不僅包括對傳統美術（結構、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
形體的表現，就是對圖形外輪廓的樣式的呈現。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節、內部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現得太抽象，也不能增加過多的細節，需要一種恰到好處的平衡（玄學），這就非?？简炘O計師的判斷和經驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側視圖、斜視圖等方法來呈現圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節的漸變角度、投影的使用上，就會產生錯誤的設計，造成光影視覺沖突和矛盾。
在創建了光源以后，物體受到光線的影響就會產生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現害會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現，再或者一拳超人中男主光頭上長期存在的高光配飾（多數動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現物體結構和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結它的問題，不難發現首頁頂部業務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區分。
形體的重要性在于要對圖形本身有比較合理的呈現，不要讓比例失調和圖不達意。
第二步：完善圖形細節
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產生一個向下的投影。并且反向暗部的表現，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創建一個圖層，然后添加深色的透明度漸變，就可以表現出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，講整個圖標的質感進行拉升，
通過上面的演示，我們可以將整個擬物設計流程精簡成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細節樣式增加趣味性和適當的擬真感
3.通過蒙版添加暗部來完善表現的明暗和層級關系
4.添加高光元素作為圖形的亮點，拉升層次感
然后，通過這樣的步驟，再來完成后續的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經開始超負荷，且容易導致同質化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
B 端產品主要是 Web 端產品，空間大、操作多，內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系，從設計角度降低用戶的學習成本。而用戶有固定的認知規律。格式塔原理揭示了人類視覺的認知是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域。
格式塔主要包括 7 個基本原則：
今天我們就來總結下，格式塔原理在 B 端產品中是如何應用的？
我們先看 2 張截圖，分別是不同分辨率下的界面效果。
可以明顯的感覺到高分辨率下，菜單列間距離較大，菜單的歸屬關系很清晰。而低分辨率下，菜單間的距離變小，特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則，距離近的關聯親密，距離遠的就各自獨立分組。
當我們想要傳達給用戶層級關系時，就需要善于利用接近性原則。例如表格上方的功能按鈕，通常我們將高頻、核心操作放置在左側，低頻、輔助功能放置在右側。通過增大元素間的距離，達到功能分區的目的。
相似性原則是通過顏色、尺寸、圖形等方面的共同屬性，實現信息的分組或者高可讀性。
例如在可視化圖表中，不同范圍值的指標采用不同的背景色。通過背景色的差異，將同一范圍內的數據形成視覺關聯，提高用戶對信息的識別效率。
通過圖形尺寸的相似性也可以構建內容分區。例如阿里云、騰訊云控制臺的首頁，都采用了雙列設計，左側主要以高頻的業務功能信息為主，右側是輔助運營信息。兩列尺寸寬度有明顯差異，用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異，并有效地突出業務信息。
IBM、蘋果的 Logo 設計，無論是“用刀砍過”，還是被“偷咬了一口”，用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現方式。
在 UI 設計中，則會通過對齊方式，形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色，內容區借助標題、卡片對齊形成視覺閉合空間，最終將頁面劃分為左側導航菜單和內容區兩個空間。視覺表現上更輕量化。
另外閉合性是需要元素之間相互輔助的，單獨的元素無法構建出閉合空間。以下圖為例，雖然四個小的卡片做了間距分割，但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。
用戶更習慣于從左到右的橫掃閱讀，因此連續性主要體現在橫向空間中。
下圖中，雖然左側的標簽文字與右側的內容信息有較為明顯的間距，高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體，而是理解為兩組信息。
在某些場景中，如果信息平均分布，不會產生連續性的視覺感知。
例如下圖指標監控中，指標都是采用小卡片，間距、尺寸較為統一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點，沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時，需要逐個檢索，花費的成本更高。
通過上述很多圖片，我們可以看出頁面元素基本都是橫平豎直，中規中矩的元素和分割方式?；蛟S有些單調乏味，但是勝在簡單，不會帶來額外的視覺噪點。
特別是 B 端產品，基本看不到異形的存在，甚至全圓角矩形都很少見到。即使有異形，也只是作為視覺表現元素存在于內容中，而不會作為空間的劃分邊界。
主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性，凸顯彈窗信息。
當我們需要著重表現內容時，同樣適用于主體與背景原則。例如登錄界面的設計，會通過差異化的背景、陰影等方式，帶給用戶清晰的視覺層級，適當凸顯輸入框的主體地位。
而 B 端內容區是核心空間，基本都是采用純白背景，與頁面背景形成對比，從而占據信息的主體地位。
共同命運原則聽起來有點玄學，指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少，我沒有找到合適的案例解釋這個原理。
在移動端產品中有些應用案例。比如 iOS 系統中，桌面布局編輯態下抖動的圖標，可以與靜態不可編輯的內容形成隔離效果，視覺引導性更強。同樣今日頭條頻道編輯時，也采用了抖動效果。
雖然 B 端產品沒有 C 端色彩豐富，表現力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的，要求和諧、有序、層次分明，輔助傳達內在的業務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。
格式塔原理不僅限于視覺表現，產品經理或交互設計師在原型設計時，也要重視格式塔原理，輔助設計方案表達，提高團隊間的協作效率。
今天的分享就到這里了。如果有更好的案例，歡迎評論區留言分享給大家~
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
快速迭代的產品存在著同質化趨向，如何做出差異性？如何將品牌精神向外傳達？如何在有限的時間內，滿足產品需求的同時帶給用戶更好的
體驗感，進而體現設計的價值呢？靜態畫面動起來或許是個不錯的選擇！
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Hi，我是彩云。界面是用戶在與任何產品、APP 或平臺交互時看到的內容，用戶體驗就是建立在堅實的界面設計基礎之上的。所以，如果你想要在 UI 設計上提升能力，應該多去思考界面設計背后的原因。
今天會跟大家分享一些被廣泛運用的界面設計規則，它們能快速使得你的界面設計更干凈、高效。
用更容易讓用戶理解（說人話）的引導文案，提升使用體驗。
（彩云注：下面 2 個案例中，左側的“購物車”和“庫存 2”太過于術語化，右側的“僅剩 2”和“加入購物車”更加貼近用戶的日常理解。大家平時工作的時候，也一定要注意界面中的文案，尤其是說明文字，控件文字等等，這個點經常容易被忽略。）
良好的對齊方式，可以增強內容的可讀性，讓用戶的視線更容易掃描。
（彩云注：左側的“之”字形視動線比較難閱讀，且不夠專業；右側的垂直對齊增強了可讀性，也讓設計看起來更加統一，能夠快速的提升設計細節。）
使用圖標、動畫作為標簽，有助于更輕松地理解內容，它使界面看起來更加理性和豐富，能瞬間抓住用戶的眼球。
（彩云注：左側的導航相較于右邊，很難第一時間準確識別它的意思，增加圖標后不僅更快看清，視覺上也更加美觀。）
大段的長句會讓內容變得難以閱讀。為了獲得好的體驗和 UI，應該注意拆分內容，并使用項目符號突出關鍵點，利用拆分好的內容塊讓用戶更快抓住重點。特別是在“功能說明和條款條件”或任何聲明時，提煉要點有助于提升用戶體驗，這樣也不至于讓用戶直接忽略。
（彩云注：左側的大段文字我想應該沒多少人會去閱讀，右邊的至少還能在短時間內快速看看幾個關鍵詞。）
進度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購物，表單填寫，申請流程等場景使用這種格式能很好的簡化流程。
（彩云注：左邊的表單 UI 不方便跟蹤進度和流程，右邊的表單把進度放在頂部能幫助用戶清楚的知道流程進度。）
錯誤提示一定要明確，易于理解，方便用戶進行下一步的操作。如果用戶不理解界面上出現的錯誤，用戶就會感到很失望，可能會放棄接下來的流程。在 UI 設計時，在正確的地方用通俗的語言說明問題，以避免歧義，這一點非常重要。
（彩云注：我常常遇到各種出錯，但出現的提示太過于術語化，也沒有提示在正確的地方讓我非?？鄲?。）
從菲茨定律（Fitt’s Law）中我們應該知道，目標區域的距離和外觀與所采取的行動成正比。因此，為了將注意力集中在轉化按鈕上，按鈕應該準確放置在合理位置上。此外，按鈕的大小應該易于點擊，避免用戶因嘗試點擊時不方便而流失。
（彩云注：左側的按鈕不在正確的決策位置以及按鈕太小，右側的按鈕簡潔明了并且符合用戶的心理預期，能夠讓用戶更快決策并點擊。）
顏色是 UI 中不可缺少的部分，它能影響用戶使用應用時的情緒。正確地使用顏色將使 UI 看起來更加豐富合理。
（彩云注：左側的藍色按鈕顏色并不符合用戶對于刪除的心理預期，右側的紅色按鈕對用戶的心理預期有危險和警告，用紅色代表刪除能夠讓用戶集中注意力關注這一特殊的操作。）
用單列展示內容，能更好地幫助用戶掃描。當你的應用和網站上要展示大量信息時，將所有信息垂直對齊時，能更好的保持用戶關注度。
當用戶準備登錄或注冊你平臺的時候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號，能很好地增加點擊率。
在用戶做選擇的時候，需要清晰地告訴用戶選中的到底是哪一個選項。模棱兩可的顏色會增加用戶的認知負擔。更少的顏色和清晰的選中狀態能讓用戶獲得更好的體驗。
（彩云注：左側的問題在于選中狀態不清晰且選項的顏色過于豐富，右側的選中狀態清晰且選項顏色只有 2 種，選中和非選中，體驗會更好。）
如果想給信息分組，使用留白是最好的方式。加條線作為分組符號會在界面中增加了一個額外元素，空白能讓 UI 看起來更加干凈和優雅。用線分組的情況適用于類似 Twitter、Medium 之類的重內容平臺等場景。
保持設計的一致性，能夠降低功能復雜度并讓用戶更快決策，一致性設計讓用戶更快熟悉操作而不需要太多思考。（彩云注：左側的選項圓角不一致，會讓用戶思考為什么這里會有不同，而右側的一致性選項設計，能讓用戶忽略內容外的干擾。）
在搜索輸入欄添加適當的占位符，提示用戶可以在平臺上搜索和找到的內容，這樣可以提供用戶參考并帶來更好的用戶體驗。
以上這些就是在設計數字產品體驗時應該遵循的 14 個基本規則，這些點雖然基礎，但卻經常被人忽略。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
無論作為設計師還是普通瀏覽者，大家觀看一個網站時最先接觸到的就是網頁的頭部區域，這部分內容為網站的其他各個方面設定了基調，在網頁設計中起著非常關鍵的作用。
尤其是如今簡潔設計比較盛行，多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力，同時要兼顧創造力和實用性。根據一項Google的研究，用戶只需要短短數秒就可以形成對一個網站的看法，甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。
在通常網頁設計中，首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分，頭部信息起到了一種邀請作用，它應該提供有關網站的基本信息，以便用戶能夠在幾秒內了解網站的主要內容。
如果以招聘活動站點為例，整個頭部區域設計要明確傳達企業形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業已向你發出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。
網頁頭部的任務是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴，那么就是正確的設計。
那么主要元素通常包括：
在設計網站頭部內容時，從思維層面來講沒有任何東西會限制你的創造力，它應該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創造性的開放領域。
下面讓我們一起來看看頭部內容設計的一些技巧。
1. 關于尺寸
對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字，但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經驗積累的常識規則。
頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區域是一個不錯的選擇，而對于落地頁或者企業客戶首頁，頭部區域可能會更大，而且多數大客戶會有主視覺單屏展示頁。
如果某些網頁，例如落地頁頭部內容較長的情況下，最好在首屏給下一屏內容露出一些空間，這樣用戶就可以意識到下一頁還有內容，引導用戶滾動。
2. Logo展現
當一個人發現自己在陌生網站上，總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果，但是多數用戶如果他們常規位置找不到預期的信息，將會不假思索地認為這個頁面是難用的和不規范的，需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數受眾。
Logo ——與居中或右側放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側要低。
3. 吸頂導航欄
吸頂導航，換句話說就是「粘性標題」，當你滾動頁面時，導航區在頁面中跟隨，現在成為一個網頁設計標準。如果不違反網站整體設計理念，請將導航欄吸頂固定。無論是PC端還是移動端設計，這都是一個好的選擇：
可根據頁面內容展示要求，向下滾動時調整導航背景透明度，盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導航欄有助于提升用戶體驗，保持用戶導向并給予了他們更多控制權。
3. 關于圖片的應用
頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的，例如招聘類網站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容；
高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業業務的出色照片，這種方式就沒錯！企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。
插畫——網站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯系。如果圖片是獨特的且易于辨認，即使是從網站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現這一點。
4. 視頻或動畫
當然我們也不能只關注靜態圖片，添加視頻也是最有效的網站頭部創意之一。如果可能的話，嘗試著在頭部內容中添加主題視頻材料，很多網站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產品。
△ 華夏幸福校招官網首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業務線融合到幾個轉輪中，產生了故事性的動畫場景。
如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非?？帷Ｒ悦考拘@招聘企業站點為例，各大公司對應屆生群體的追逐，很大程度上體現在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。
當然不一定只有滿屏大型動畫，一般動畫越復雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據功能不同，設計一些交互性的動畫，去提升客戶使用感受，盡量不影響網頁打開速度。
5. 移動端頭部設計
網頁頭部不可能只顯示PC端的網頁上，還應該正確顯示在移動端的網頁上。因此，在近年的設計中，網頁必須具有響應性，并且能夠很好地適應各種移動設備，這樣才能帶給用戶完整的設計體驗。
移動設備的日常使用廣泛性早已影響網站設計，即使在PC中，也有一些細節看起來像是面向移動設備的網站設計。例如，Banner和漢堡包菜單都起源于移動設計。
移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設計師在一開始就考慮到兩種界面的適應情況，比如在PC上頂部一條的導航，到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容，在移動端會向下層延伸，首層界面成為一個內容聚合頁。
網站是以頭部內容為先導的，它就像是一張獨特的名片。因此，我們在設計網站時，盡可能最大限度地關注該區域。
最后還要提醒大家，一定記得定期更新網站頭部內容哦！以校園招聘大客戶為例，大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網站的新鮮感和時效性。
以上只是在工作中的一些點滴體會，微不足道。感恩能在UXD集體中不斷成長。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
移動端網頁在今天雖然已經變得越來越重要，但我們在日常使用中依然會遇到一些糟糕的頁面。近日，開發者Umer Mansoor就總結了開發移動網頁時應該避免的“七宗罪”。
在移動端方寸地，有細節才能抓住用戶，可以參閱這《60個以小見大的設計細節！》，保證會學到很多。還有，記得不要犯《ANDROID應用中十大常見UX錯誤》
眾所周知網頁加載速度是網站性能的一項重要衡量指標，畢竟很多時候用戶并不總是在WiFi狀態下瀏覽網頁，所以加載緩慢無疑是移動頁面七宗罪之首。移動網頁在設計時應該避免集成過多高分辨率的圖片以及累贅的腳本文件。
當網頁映入眼前，凌亂的文字排版當然也是訪客難以忍受的。就像人們在現實生活中傾向于和思路清晰的人交流一樣，當用戶和網頁“交流”時也希望能快速找到自己需要的信息。所以雜亂的排版同樣是移動網頁應該避免的設計誤區之一。比如Eurosmartz的移動版完全不像是為移動設備設計的網頁。
隨著移動設備性能的提升，很多移動網頁設計者傾向于在移動端堆疊更多的內容，這時導航功能就變得必不可少了。可諸多移動頁面在設計導航功能時又沒有足夠重視其可操控性，比如按鈕太過緊密、鏈接間距過小、菜單過于隱蔽等等。各種社交網站的點贊功能尤其容易在滑動網頁時誤點擊。蹩腳的導航無疑嚴重影響了用戶和網頁“互動”的過程，以至于有些用戶要“抱怨”自己手指太肥。
某些時候我們可能會遇到一些桌面端和移動端頁面風格差異巨大的站點，比如Toybox。一些對此站點不熟悉的用戶在從Toybox的桌面端跳轉到移動端時，也許很難意識到這是同一個網站的兩個不同版本。雖然Toybox桌面端的動態效果挺好，但這種會給用戶造成極大困惑的設計明顯難以得到用戶的喜愛。
網頁彈窗在桌面端已經令用戶厭煩不已，可不幸的是一些移動端的網頁設計者還是把其帶到了移動頁面上。毫無疑問由于移動設備屏幕尺寸的限制在移動端彈窗明顯會有更好的傳播效果，但無疑也會遭受到用戶更多的厭惡。
當用戶使用iPad訪問某一個網站時將其自動重定向到適配iPad的版本，這聽上去的確是一個好想法，可在實際操作中一樣會遇到問題。比如當一個網站的移動版由于以上的種種問題讓用戶感到難以接受而想切換回桌面版時，自動重定向基本上讓用戶陷入了死循環。此外由于重定向而導致瀏覽器無法打開網頁的現象也時常出現。所以在使用自動重定向功能時應該三思而行。
作為用戶當然可以理解網頁開發者在頁面上設置一些廣告，可橫幅形式的廣告無疑應該被歸為“七宗罪”之一。從互聯網的發展歷程來看，橫幅廣告的思維好像還停留在1999年，可現在已經是2013年末尾了。
總結看來，Umer Mansoor列舉了頁面加載緩慢、排版凌亂、導航功能不易使用、桌面端和移動端頁面風格差異巨大、彈窗、自動重定向、橫幅廣告共七種讓移動頁面體驗糟糕的“罪惡”。如果自己設計的頁面中包含這其中的某些項，也許是時候考慮做一些改進了。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
提到網頁設計，最先想到的是當今主流的韓國設計和扁平化設計，當然個性化排版、視頻代替文本、全屏大視野、滾動視差、多平臺全適應等設計形式已經進入了我們的視野。西方簡單、功能性的美學精神”少即是多”這一設計理念攻占了我們的大腦，很多時候，在開始做設計之前腦子里會來回浮現這些風格的設計。那么，怎樣在主流設計方式中做出有自己特色的網站呢？我們從以下幾點介紹在大環境下提升網站設計形式的方法。
那么，怎樣在主流設計方式中作出自己的特色呢？我們從以下幾點介紹些提升網站設計形式的方法：
在眾多的設計師追逐主流風格的同時，民族文化感覺的設計越來越少，不光在國內，在世界各地都出現了這樣的情況。當然不可否認還有很多設計師在為民族設計而努力。下面這幾個站點雖然只有簡單的設計和動態效果，但是卻有一種非常淳樸的民族風格，這也是最吸引人的地方，每個細節都流露出民族的特點和氣氛。不是只有文化性質的網站才能賦予文化設計風格，在商業產品類型的設計推廣中同樣適用。
日本眼藥水網站，將現代工業社會的產物與傳統鬼神文化中的五種妖怪以卷軸、插畫傳統形式展示，與漫天遍地的明星代言廣告形成對比，同樣是眼干、眼澀、眼疲勞，同樣是以辦公室、上班族為消費群，文化創意上的突破使人眼前一亮。
(小編按：那個妹子是我的女神橫山美雪，嗎？)和風服裝店，日本特色的風鈴、簡約的插畫，”和風”，大和民族追求與自然的和諧之美，從這個服裝網站上我們可以看到日本設計文化體現了對自然的尊重，反映了樸素美學的內斂性格。
緬甸傳統舞蹈音樂合奏網站，緬甸古代戲劇舞蹈，是從緬甸傀儡戲、古典戲劇及阿迎舞等古典藝術中產生的?？軕蛑械囊恍┕澞亢透鞣N傀儡角色的不同的舞蹈動作被大量移植到現代緬甸舞中?？芪柚小笨懿健?、”傀儡爬跳”等成為現代緬甸舞的基本動作，是文化多樣性的輝煌繼承。黑白圖片和大面積留白的海報設計形式，突出舞蹈者主體，用在網站上更顯神秘。
http://www.itwillbeastounding.com/
俄羅斯莫斯科大劇院是莫斯科的地標性建筑之一，是莫斯科有名的芭蕾舞與歌劇劇院；是俄羅斯歷史最悠久的劇院，享譽天下，是世界上最著名的劇院之一。它不僅繼承了歐洲芭蕾的歷史傳統，更重要的是，在俄羅斯豐富的民族音樂與舞蹈的沃土上，建立和發展了自己的芭蕾體系。將沙俄古典風格融匯于設計版塊中，同樣大量留白處理給了圖片展示更多的空間。
大面積整站或局部性使用高清圖片，在之前設計分享中我們見到了很多案例，這里介紹幾個日本以圖片展示為主的網站，精致的圖片不需要過多的裝飾。
坂本龍一是日本當代最讓人尊崇的音樂家之一，音樂領域涉獵甚廣，在先鋒電子樂領域擁有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，為1992年巴塞羅那奧運會開幕式譜曲并擔任指揮……坂本龍一成為”大眾明星”的原因，一方面在于他個人對于電子、搖滾、爵士等多重音樂風格極具靈感的把握；另一方面則在于他能在商業、藝術和實驗之間找到平衡點，作出既有實驗意義又有動聽旋律的作品。
http://moonlinx.jp/special_issue/003/
日本設計強調材料的內在之美，注重與大自然的和諧，珍惜自然材質，這與日本自然資源相對稀缺有很大的關系。日式風格中，回歸自然是最大的特色，推崇貼近自然、強調自然主義，讓使用者有置身自然的感覺。用產品的工藝制作圖片作為網站的主體和背景，拉近了觀者與產品的距離。
http://www.ishiyamasenko.co.jp/
傳統工藝美妝店鋪，單從cover引導頁的圖片就能看出該店鋪的賣點。特色產品圖加上柔美的動態散花效果，為網站加分，導航中加入商城外鏈可直接在線購物，利于用戶體驗。
日本聯合新聞社，社內的場景圖片很好的展示要表達的主旨。
街區是一個城市的重要標志性特色，將這樣雜亂無章的舊街道作為網站通欄頭圖，配合簡介的形式設計，也能很出彩。
美寶蓮日本網站，將實體店作為網站背景，搭建成實景的巨幅海報展板，這種形式是否比存粹的明星代言更接地氣些？！
對比下面兩個日韓服飾類網站，可以看出日本網站在圖片選擇上更注重產品本身，極具質感和張力的圖片真實樸素，力求展示產品與人的關系。而韓國則更注重整體的氛圍的搭配，通過環境的營造來提升產品的品味和檔次，產品只是搭建系統中的一部分。
圖素質量低是我們在設計過程中經常遇到的情況，我們通常用到最多的方法莫過于高斯模糊、柔光、濾色、添加紋理質感，將圖片處理成做舊、仿古、年代感、單色……又會是什么效果呢？！
箔工藝，金銀箔具有很好的延展性，將金銀打展成薄膜狀，與絹結合，應用于古代服飾中。此文化再京都有四百余年的歷史，現在主要用于文物修復。取箔工藝品的一個局部，重新組合作為整張背景，貼片處理的文字與背景的融合更顯古代文化的精妙。
http://www.hiroto-rakusho.com/
人物素材粗糙的情況下，采用水彩的濾鏡效果，背景加入點狀網格，極具形勢感的箭頭做引導，個性十足。
全日本劍道聯合會，網站采用時間軸展示的形式，從1950－2000年每一期獲勝者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差較大，所以網站設計成了古樸做舊的年代感風格，加入很多早期照片中的截圖作為插畫元素，確保了風格統一。
http://www.kendo.or.jp/champ/#/about
Daum是韓國最大的門戶網站之一，以郵件和社區產品為核心，是韓國第一個電子郵件服務網站Hanmail的前身。牛仔藍單色照片處理更像電影和動漫場景。
也有整體黑白加入局部彩色色的案例，將復雜圖片簡化處理，對于簡潔的頁面設計來說，這是個不錯的方法。每個版塊都是黑白照片做背景，文字做JS動態移入效果，在圖片的某個元素上加入VI主體顏色，故事感很強。
手繪、矢量圖形設計的圖形場景環境，用在食品、旅游、地圖、嬰幼兒等方向的設計上更容易拉近消費者，給人放松愉悅的心情。相比圖文混排更貼近生活。
狗糧推廣網站，將網站設計成寵物樂園，各個品種的狗狗們都有自己的一段視頻，內容是狗狗們對幾種產品的喜好對比。
http://www.solvida.jp/solpa/#/MainPage/001
企劃創意公司，技術上只是一個簡單的FLASH站，但空間跨越性思維設計卻給這個網站帶來了不凡的效果。由局部的空間延伸出各種異空間的交匯，加入互動效果而引發的更多驚喜也進一步提升了用戶參與度。
用3D拼圖建造起一個小型城市，4個建筑代表網站要展示的4個心理學的具體分類，建筑物夸張的擬人化動作實現頁面跳轉。
http://www.soc.nara-u.ac.jp/kokoro/
日本兒童專用雞蛋，此網站將所有產品相關內容裝進雞蛋中，食用后產生的剩余物可大變身繼續用于其它物品的生產，循環利用避免環境污染，所以在首頁展示上才會有類似瀑布流的大量周邊產品展示。網站首頁是自動向下播放展示的瀑布流效果，hover及跳轉都伴隨非?？蓯鄣囊魳泛蛣討B，恰當音樂的播放和觸碰hover的小驚喜也會給網站增添色彩。
日本山形放送局的地區地形圖，大家都看過現實版的景點手繪地圖，該網站也用了這種形式。比較有意思的是他的功能非常強大，是一個可放大縮小的真實版地圖，沒有跳轉，完整的手繪google地形圖。以小青蛙作為代言人對每個景區的優勢作手繪圖形注解，以當前彈出的形式展示該地的歷史、自然、觀光、社會、祭祀、美食、傳統等信息的詳細圖文、視頻解析。
http://www.nhk.or.jp/yamagata/mitekero/
九州熊本天草村,用動態圖形化完整的對天草村進行了設計演繹，重要景點默認做了動態處理，跳轉后都是另一個完整的實景矢量圖。對景點中的標志性小建筑做了頁面彈出實景詳細講解。
這種形式在新加坡兒童樂園的設計中也同樣得到了使用。
設計風格也是體現一個國家文化的重要方式，嚴寒漫長的冬季成為俄羅斯的標志，在頁面上打造一個同色系的冰雪世界，反而使彩色的主體信息更加突出。
一個優秀的網站它的交互性也非常重要，擁有好的交互性可以讓瀏覽者有著更高的參與感，并且也能增大網站自身傳播效果，還可以提高用戶對自己的網站的依賴性和忠誠度。
Panasonic剃須刀產品JS展示站，設計形式與松下電子實現”星羅棋布的網絡社會”和”與地球環境共存”的理想呼應，整站的背景都是由動線點組成的動態圖形面拼合而成，圖片和文字的展示停留在這星羅棋布的空間組合中。此時網站要表達的不僅是展示產品，還有松下文化。
http://panasonic.jp/shaver/lamdash/dna/index.html
東京交響樂團，該網站對用戶的參與性做到了極致，從網站主內容上沒有關于東京交響樂團的圖片文字信息，用戶可以在頁面專屬音樂鍵盤提示的情況下，用獨創音樂的新穎形式創作屬于自己的個性音樂，并對音樂逐幀做了記錄，可以返回欣賞創作成果，并分享到各網站。
SPECIAL-T 綠茶網站，玩過網游的同學們都知道游戲中做任務有地圖尋路功能，該網站采用了這個原理，在大海中建立類似于西游記的龍宮，用戶在沒有任何導視的情況下，360度無死角在海洋里自由探尋，最終的成果便是在一段時間的遨游后到達網站的終點產品引導頁，闡釋special的感受。
http://ogreen.special-t.com/en/
如果你想要一種優雅而直觀的產品展示方式，全屏視頻網站是一個不錯的選擇。全屏視頻網站能一瞬間點燃人們的好奇心，當然也可能馬上讓訪客失去興趣，這都取決于你是否能夠駕馭這類高大上的設計風格。
日本福祉大學，校園內外學生學習、活動氛圍的場景視頻作為背景播放展示，視頻上一層則是手動切換的內容介紹字幕，一個大學的網站更像是一個微電影展示。
http://www.n-fukushi.ac.jp/lifestyle/
Mikihiko Kyobashi 海底攝影記錄展示站，整站視頻展示配上海洋真實的聲音。透過視頻看到的海洋不是一汪死水，陽光穿透海面，碧海藍天，比靜態的照片更能展示生命的氣息。
bc服裝網站，暗色的動態視頻做背景，與前層簡單的圖文排版形成反差，圖片hover的3D立體效果令人耳目一新。
圖片與視頻的混排切換展示，拉伸后展開整站播放效果。
http://getgoingtoday.org/beyond
日清食品，微距拍攝的視頻，用時間倒數計時的方式，記錄在這一碗日清方便面泡好的3分鐘內，世界各國家不同膚色年齡的人群品嘗日清食品的狀態緩慢特寫，加入了用各國語言描述倒數計時的聲音，視頻中間穿插有和日清logo呼應的裝飾語言，隱藏在頁面下方的時間軸可以找到每一分每一秒的畫面禎，時間可自行選擇切換到想要的那一幀。
以上五點都是當下主流設計中另辟蹊徑找創意，簡單五點很難將所有好的創意都涵蓋在內，除此之外大家肯定也有更好更多的想法。網頁設計總是立足于瀏覽者的審美、文化，以及信息傳播的習慣、方式，還有網頁開發技術的進步。對于絕大部份網站來說，沒有強大的專業力量去研究用戶新的習慣和需求，也不可能開發出新的技術功能，只能在一些大型的網站中窺見一些發展的趨勢，再從中找到自身可借鑒的地方。這種借鑒如果成為普遍性，那我們也很難在互聯網的大潮中有自己的一席之地。網頁設計已逐漸往多元化方向發展，更好的創意、更新的想法都來源于我們真實的生活感受，想要我們的網站變得更強大、擁有更好的用戶體驗，無可厚非，我們應該做的是大膽、大步地去嘗試。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一：怒馬！超實用的單頁網站設計指南（附大量資源）
網站設計之二：旅游網站設計分析！教你10個小技巧
網站設計之三：實例教學！如何將極簡風格的原則運用到網站設計中？
網站設計之四：另辟蹊徑談創新！提升網站設計形式的幾種方法
網站設計之五：經驗分享：移動網站設計應該避免的“七宗罪”
網站設計之六：4000 字快速回顧20多年的網頁設計發展史！
網站設計之七：騰訊出品！2021-2022設計趨勢報告：動態篇
網站設計之八：為什么千萬別隨便學國外的極簡設計？
網站設計之九：高手出品！2020~2021年UI界面設計趨勢
網站設計之十：如何做好網頁頭部內容設計？來看 58 設計師的總結！
藍藍設計的小編 http://www.syprn.cn