2022 年即將過半，疫情在家的我們重新花一些時間，回顧今年最引為人注目的一些設計趨勢，有些已經變成現實，有些可能即將會發生。在過去的這十幾年里，全國的互聯網和移動互聯網行業蓬勃發展，引發了 UX / UI 行業的火爆，無論是在設計技術方面還是在設計實踐方面維持著快速發展狀態。設計探索受到了前所未有的關注。創新也永不停止，正在向各個方向延伸——有的是曇花一現，有的是重塑想象，有的卻循環往復。
下面我們將更詳細地向你探討一些 2022 年的設計趨勢。
The Badass Project 搗蛋派計劃
過去幾年里，大字排版的趨勢越來越明顯，字體尺寸也在增加！接下來，字體更大且幾乎沒有圖像的時尚 英雄形象 網頁設計，將成為主流風格。
（英雄形象在網頁設計中是一個特定的網頁橫幅，通常是一個包含與內容相關的大圖像頁眉）
設計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體，網站可以做出比以往更大膽的宣傳，以吸引受眾的注意力并有效地信息傳達。
這些字體選擇通過 引人注目的動畫進一步生動起來。設計師正在實現通過鼠標移動或向下滾動頁面使排版移動并與用戶產生互動的創造性效果。以粗體、動畫和交互式排版為核心，許多網站也就不使用任何背景圖像，讓外觀變得干凈且精致。
MAFF
所以一定要試試這種趨勢：把文本尺寸放大，可以將其放置在一些圖像上，制作大尺寸的動態標題，讓用戶從中獲得樂趣。最重要的是，要勇于呈現大膽強烈視覺效果，從而可以立即吸引用戶的注意力。
案例：Medium 官網——https://medium.com/
Shakib - Sneakerbumb
在經歷了充滿不確定性和陰郁的兩年，我們學會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數字空間上，這一現象也不例外。
La puce à l’oreille
為了回應這一需求，設計師從 80 年代和 90 年代獲得了巨大的靈感；將色彩豐富、質感豐富、復古風格的主題與現代氣息結合起來，打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網格的布局、非傳統的圖像和古怪的插圖，都可能會在接下來的一年吸引你的注意力。
Kristen Ryan for MakeReign
隨著這一切的發生，我們甚至可以說，在過去幾年里，每個人都學會了賦予自己一些自由的生活態度。這為我們提供了更多的實驗空間，當然也為設計和其他領域帶來了讓人愉快的成果。這就是說，設計師們覺得有必要從簡單和實用的用戶體驗轉向有趣、搞笑甚至愚蠢的交互。出人意料的是，讓別人微笑可能會是你的網站或 app 令人印象深刻的一種方式。
Blumenkopf
野獸派設計從 1950 年代的野獸派建筑運動中汲取靈感，延用其不修邊幅、毛糙粗狂的外觀形式，和故意做出的丑陋效果。就像在建筑中一樣，野蠻主義在網站中揭露和解構(甚至慶祝)這種媒介的底層結構和重要原則。原始、大膽和反動的本性使野獸派設計一直處于數字空間的邊緣，因為原始是互聯網的全部。然而，近年來，野獸派一直在緩慢而穩定地復蘇，現在被一些人稱為新野獸派。
Caroselling
隨著互聯網上干凈、傳統的網站越來越多，個人網站變得難以脫穎而出。轉向野獸派，提供真誠、原始但獨特的視覺體驗，可能正是提升你下一個網站的方式。
無網格布局，強烈的調色板，重疊的元素，擁擠和幾乎混亂的設計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結合起來，缺乏或極少的導航，這相當于沒有額外的“空間”或子頁面的“開放式版面”，你會得到一個引人注目的粗野派外觀。
Work with us
案例：阿里云設計官網——Alibaba Cloud Design - Not Design Just Future
當然，還有更多，但野獸派網頁設計的定義規則是沒有規則；它反對既定的規則和慣例。更重要的是，你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設計糟糕的網站區分開來。
Messenger
Figma、Todoist、Slack和 Messenger 等網站和移動應用程序都把時間和精力集中在桌面客戶端版本。
Todoist
越來越多的應用程序似乎也在效仿，因為研究表明，這樣用戶會感到 更舒適、更安全。用戶希望自己的應用程序遠離互聯網瀏覽器，遠離所有打開的標簽，回到指定的應用程序窗口，讓人感覺更寬敞、更專注。在使用這些應用程序時，不需要處理數分散注意力的標簽，這無疑是一種進步！此外，將通知直接發送到桌面，我們的通知管理也必然得到改善。
Figma
為阿拉伯語國家的谷歌搜索頁面布局
用戶研究團隊利用 人類心理學 領域的洞察，以及 可用性測試，已經能夠塑造界面，為用戶提供最大的滿意度和愉快的體驗感受。幾十年來，這一直是用戶體驗設計的核心。
隨著技術的快速進步，我們看到數字產品體驗的保真度有了空前的提高。這一發展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結構（以及其他因素）的差異可能會導致人們對什么構成令人滿意用戶體驗的期望存在顯著的差異。因此，這些體驗可能需要類似的設計，但肯定不是相同的設計方法。
隨著技術和研究方法的到位，我們開始看到一款產品的多種變體同時推出，以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體，創造本地化的產品體驗可能會成為一種大趨勢——如果不是標準的話。
NhuSW- Everyfit — Fitness for Everyone
包容性不僅是一種趨勢，也是一種運作模式；人類生存和共存是一個不可否認的重要方面。在日益全球化的復雜世界中，我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任，并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當地納入全球社會。
Spotify
隨著數字空間引領著世界的全球化，它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言，并向包容性的平臺、產品和服務 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現，這樣做不僅僅是為了營銷收益，而是為了更大的意義和價值。
這些是我們在 2022 年會看到的趨勢和現象。記住，它們是為了提醒我們當前的總體設計趨勢?？梢允褂盟鼈儊碇С趾褪跈嗄脑O計決策，但不要害怕挑戰它們，或用它們為人們創造更多積極有效的體驗。
原文標題：UI/UX Design Trends of 2022
文章來源：Codeart
原創作者：Taras Bakusevych & Maja Mitrovikj
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文主要介紹等距柵格，旨在為有需要的同學解析柵格，從概念、結構和設計上更有效、自信地解決柵格問題，其實主要還是自己對柵格體系的查缺補漏。大家可以對照目錄跳著閱讀。
事實上，絕大多數的設計師都知道柵格很重要，簡單點就是等分運用在內容層。當我們仔細研究柵格相關原理時，只要不嫌麻煩，就會發現在柵格系統下能更快解決設計問題，并讓設計更具功能性、邏輯性和視覺美感。
柵格與網格的本質其實是相同的，實現有組織的設計最簡單方法之一就是應用網格系統，約束性地為你提供了一個非常基本的設計框架，這是一種久經考驗的技術，最初運用在印刷版式中。網格與柵格英文都以“Grid”來表示。但一般我們更愿意在平面設計中更多的稱為 “網格”，會存在上下或傾斜，在網頁端或移動端中更多的稱為為“柵格”。
常見網格系統有三種：直接分割，等距分割，數學分割。本文主要介紹等距柵格，網頁中的網格是指使用垂直和水平(較少)等距輔助線對布局進行的劃分，它形成了用戶界面的基本結構或框架。
平面設計一般用到的是固定的紙張規格，寬度和高度都是固定的，網格會存在上下或傾斜的視圖；在界面中柵格寬度跟隨不同設備，高度由內容多少來決定，是上下視圖。
界面柵格系統是從平面網格系統中發展而來，以依據一定的規律、合理設置基準線來指導和規范界面中的如文本、圖像、按鈕和其他元素，保證頁面的每個區域能夠穩健地排布起來。柵格系統的使用，讓界面信息呈現更美觀易讀、更具可用性，對于前端來說，網頁也將更加靈活與規范。
將柵格視為一種秩序系統來進行使用，是設計師某種特定的精神和態度的表達，它體現了設計師是以一種結構性、預見性的方式來進行構思和設計。同時，這也是一種職業信仰的體現，設計作品應該是易懂的、客觀的、功能性的和具有數學邏輯美感的。
用結構化、系統化的柵格手段進行設計，對設計是具有極為重要的意義的。使用柵格系統就意味著設計遵循普遍與合理。系統化和清晰化、集中精力看透關鍵問題、用客觀取代主觀、理性地去看待設計過程。
產品設計中，參與設計的人員越多，用戶設備越多，屏幕越多，設計師就越需創建一套柵格系統來組織內容，使設計內容與細節能適應更多場景。合理的柵格系統可以通過調整布局滿足產品各設備尺寸的需求。
有序可依，提升協同效率
對于設計師與團隊：柵格系統定義了一套底層的、統一的測量單位，當設計團隊內對此達成共識時，可以避免因屏幕適配、比例換算產生的像素偏移，適配多種屏幕，提升精致細膩程度，同時保證了設計稿件中元素屬性的一致性和規范化，并有效降低設計師的決策成本，提高不同設計師之間的協同效率。同時避免了設計師與前端工程師在細節上的反復溝通確認，提升了整個開發效率。
布局規律，減少認知成本
對于用戶：運用網格系統能夠讓設計更有秩序和節奏感，規避了不同設計師理解不同造成產出差異的問題，如頁面節奏，空白等。在保持與原先展示內容基本一致的情況下，頁面信息結構更加清晰，提高閱讀效率，減少認知成本，提供一致性體驗。
柵格使用列在水平方向上拆分頁面，以有組織的方式對元素進行布局，并模塊化設計多個頁面和組件。同時柵格還定義了一組固定的測量單位，指示每個設計元素遵守的尺寸，間距和對齊方式。
最小單元
網格的基本構成就是單元格，由格子組成網。間距都可以用最小單元來增加或者減小，最小單元格是所有設計元素（從排版到列，框，圖標和插圖）的幾何基礎，它為所有創造性的決策提供了結構和指導。所以柵格系統的重要一步就是需要先定義好柵格的原子單元大小，我們以最小單元去定義網格系統。
最小單位推薦 8px
目前 web 端最普適易用最小單位的是 8px，我們利用 8px 建立網格，8 的倍數組成了列、行、框的尺寸以及它們的邊距和填充，使用 8 的倍數來定義模塊的間距與元素的尺寸。
當我們熟悉最小的柵格單位 8px 以后，能有力的減少決策時間。整個設計的元素大小，尤其是間距可以快捷的在腦海中反應出來，8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數或能被 8 整除。讓設計師帶著工程實現的思維去考慮頁面布局，設計側和工程側對頁面一致性的解讀，能夠有效降低設計到實現的轉化成本，提高開發效率。也要注意間距不能無腦套 8 的倍數，優先用 8，當跨度太大也可以使用 4 和 12。
那為什么不選擇 4，6 或 10？
注意的是最小單位應由實際工作來決定，沒有絕對的最小單位數值。在適用性方面，4、6、8、10 這四個數值都基本可以滿足。
當使用 4px 時，頁面就會被分割的非常細碎，當 8 不夠用的時候，就要使用 4 了。
最小單元格的數值選擇需要從兩方面考慮：
屏幕尺寸和分辨率種類有增無減。使得設計師對 “維護適配性” 的難度越來越大，設計稿導出會有@0.5、@0.75、@1、@1.5、@2、@3 倍多種需求，在 1@倍設計稿，奇數（比如 5px）就會出現半像素偏移。而 6 除以 2 得 3，3 就是奇數了，10 除以 2 的 5，6 和 10 不能被 2 除盡。
使用偶數 8px 可以輕松一致地縮放各種倍數而不失真，大多數流行的屏幕尺寸都可以被 8 整除，足夠普適，以 8px 為增量進行縮放可提供大量選項，所以推薦 8px。
列 + 列間距 + 大邊距
柵格系統由 3 個部分組成：列、列間距、左右大邊距。柵格系統是由列和列間距交替分布形成的，列是柵格的數量單位，虛擬的垂直塊，用于對齊內容，我們以百分比或固定值定義列寬。豎直方向根據頁面內容是可以無限延伸，所以柵格系統在豎直方向的柵格可以不體現出來，設計時只要在水平方向保持規律變化就可以了。
通常設定柵格數量說的就是列的數量，如 12 柵格就有 12 列、24 柵格就有 24 個列。列間距把控頁面留白，數值越大，頁面留白越多，視覺效果越松散；反之，頁面越緊湊，畫片分割的越碎。
大邊距就是設計內容區以外的空間。我們在設計中一般將大邊距寬度定義為固定值，該值決定每個設計的最小呼吸空間，靈活的邊距占據了由列，列間距組成的網格后的剩余空間。左右大邊距是計算在柵格的總寬之內的，刪格系統的寬度就是列、列邊距、大邊距之和。
也有彈性大邊距，會根據不同的屏幕尺寸而變化，就是頁面邊距可以隨著屏幕尺寸的變化而變化。頁面邊距在移動設備上通常是 12px 到 40px 之間，在平板設備和桌面設備頁面邊距變化就相對多了。
容器
我們按照頁面結構從組件 – 容器 – 區塊 – 頁面 – 場景進行依次拼裝成最終形成產品設計方案。容器集合了下級組件，也可以是多個復雜元素的集合，文字、圖片、按鈕。如登錄區塊是由多個標簽、輸入框、按鈕組成。容器是成組的設計元素，形成了獨立的內容或功能盒子。區塊嵌套容器，由區塊組成了頁面內容。
柵格規范的是容器間比例，而非具體寬度。容器大小收到柵格系統的限制，柵格系統可以根據需求被 2 等分、3 等分、4 等分、6 等分、12 等分，具體采用哪種比例的組合需要根據需求來定。柵格系統 / 設備分辨率大小在變換的同時會帶動區塊大小的變化，從而使容器發生變化，如元素尺寸變化，文字換行等。
如下圖，共有 32 個容器。對于緊密相關的內容，請考慮組成區塊。頁面被分割的越碎時，設計中越難把控。
960 柵格系統
這是一個比較單純的框架。從 1990 年代后期開始就基于表格的布局開始使用的柵格系統 960 Grid System。與早期計算機相比，雖然今天的屏幕分辨率達到了很高的尺寸，但使用 960 像素的寬度依舊可以確保在許多屏幕上能夠正確顯示。
960 Grid System，是由 Nathan Smith 開發的 CSS 框架，因為早期的電腦熒幕寬度約為 1024，扣除瀏覽器的卷軸及邊框，為 960px，960 Grid System 有 12 欄位、16 欄位版本，960 正是意味著，12 能被 3、4、6 整除，能建立 3 欄、4 欄、6 欄的版面配置，網頁的使用也比較靈活。網頁版面可以輕松配置，合并，也不會有畸零數，非常適合排版。
960 Grid System 是使用固定寬度 960px，置中對齊畫面的方式呈現在網頁上，去除左右兩邊各 10px 的邊距空間，留下中間 940 px 的設計內容區，以 20px 作為槽。
而超出 960 的部分的設計元素，就使用定寬設計。
Bootstrap 網頁框架
今天市面上看見的響應式網站，多數使用了一些開源的代碼或者框架。而應用最廣泛的，就數 Bootstrap 了。
Bootstrap 是 Twitter 推出的一套強大網頁框架，是全球最受歡迎的前端開源工具庫，它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 JavaScript 插件，也提供了快速建立響應式網頁的功能。已經更新到 V5.0.1 版本了 Bootstrap 中的柵格系統是一套響應式、移動設備優先的瀑布流式柵格系統。市面上很多前端框架會對 Bootstrap 進行補充或基于 Bootstrap 開發。
Bootstrap 提供的柵格系統，也是一樣將內容區分 12 等分。
它將系統分為 12 列，當然也可以通過變量來改變列數和列寬，水槽寬度，屏幕浮動寬度；其實設置屏幕浮動寬度就是我們看到的屏幕自適應，就是根據屏幕寬度來選擇顯示參數。Bootstrap 中的柵格流只能作為大的布局定義，那么針對最小單位是該用 8、10、15 還是多少也是需要根據需求去做分析。
12 列結構可以進一步分解 4 等分，3 等分大小的模塊。
柵格設計的第一步就是創建畫布，對于不同設計的項目，寬度設定是不同的。需要注意第一屏重點內容全部顯示，瀏覽器和 Windows 底欄都會占用屏幕的高度空間，第一屏縮減默認高度 -100px (可調整)。
屏幕寬度
設計師有存在從最大的屏幕 1920 著手設計界面的習慣，最后考慮最小的屏幕上的顯示效果。這意味著絕大多數的設計都是從大尺寸開始設計的，通常大尺寸的內容和功能更全面。從小往大適配容易，但是從大往小適配問題就特別多。以 1920px 寬設計的界面在面向小尺寸屏幕的時候多數都很不友好，甚至到了部分頁面無法正常預覽和使用的地步。所以優先設計最小適配屏幕，然后給出適配方案進行調試。
C 端設計的屏幕寬度是找全網平均數值，而 B 端的目標受眾更細分、更具體。類似政府、學校、企業等等，計算機都是統一購買的，這種情況并不需要你去統計全網和其它渠道數據，只要了解具體受眾使用什么分辨率即可，以它作為主要輸出的畫布寬度。如果 B 端設計受眾屏幕寬度實在不清楚，可以參考螞蟻中臺設計團隊統一的畫板尺寸為 1440。
是否定寬(版心)
如果是定寬的設計，便不需要考慮自適應與響應式適配屏幕寬度。版心是源用平面上的說法。根據實際情況，定寬設計如果以 1024 的屏幕為內容主體，1366、1440、1536、1600、1920 的屏幕適配 1024 的內容主體，多余的空間為左右大邊距，這種方式設計上容易輸出，適配方式更加高效，隨之就是可用性較低，對于使用高分辨的用戶來說，布局會留下很大的空白。如知乎：
還記得第一次做網頁練習的時候我使用的定寬為 1000px。
屏幕終端的寬度不等于我們要柵格的寬度。我們在確定柵格區域設計前，先來熟悉一下 web 產品界面的基礎模塊和分層邏輯，以常見的 B 端布局為例。
根據模塊自身屬性及功能定義，常見的模塊有九類，分別為頂部導航模塊、左側導航模塊、頁眉模塊、頁腳模塊、主內容模塊、左內容模塊、右內容模塊、抽屜模塊、彈窗模塊。
全局控制層為常置的功能底層，是提供穩定性和可預測性、必不可少的層級，具體有頂部導航模塊、左側導航模塊等；內容層可分為常置展示層，具體有主內容模塊、左右內容模塊或上下模塊等；臨時層為動態出現的功能頂層，始終疊加在基礎層及內容層上方，是鏈接上下體驗流程的模塊，具體有抽屜模塊、彈窗浮層模塊。
梳理了相關模塊所組合的柵格布局。Web 端有三種基礎布局和多種擴展布局。一般來說，柵格區域就是指內容層。前面我們提到了定寬(版心)，版心和內容層還是有差別的，版心+兩端頁邊距=內容區。
那其他模塊能用柵格嗎？當然可以，有需要就用，不過需要注意使用效率。
首先，創建一個低保真或高保真的原型，設計一些基本元素和交互流程之后，考慮最優的列數。列間距的區域不可以放置內容，我們一般會給列間距設定一個定值來確定列寬大小，這個列間距也是模塊間的間距。
柵格數量
常見的柵格系統通常被劃分為 12 柵格或 24 柵格。劃分的格子越多，承載的內容越精細。也有較少項目會根據實際情況也會劃分成 16 柵格、20 柵格，移動設備屏幕尺寸小于 PC 屏幕，想要有更靈活發揮空間，就必須采用列寬較小的柵格。
12 柵格
12 柵格系統在流行的前端開發開源工具庫 Bootstrap 與 Foundation 中廣泛使用，一些商業網站、門戶網站通常劃分成 12 柵格，適用于業務信息分組較少，單個容器內信息體積較大的中后臺頁面設計。根據業務場景可以很容易的將 12 柵格區域劃分成 2 等分、3 等分、4 等分、6 等分，以及根據等分容器組合的多種不等分場景，組合也是柵格作為一個界面輔助系統非常方便的原因。
24 柵格
24 柵格系統適用于業務信息量大、信息分組較多、單個容器內信息體積較小，場景復雜的頁面設計。相對 12 柵格系統，24 柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。我們常見的 B 端 web 設計一般選用 24 柵格，柵格系統大小就是 24 列+23 列間距+2 大邊距。
Ant 采用了 24 列、23 列間隔的柵格系統。其中間隔數值是固定的，內容區域減去 23 列間隔后，剩下的部分等分成 24 列。
注意：
其內容模塊必須位于若干列上，可以任意分割，比如 6×2，3×4，4×3，下面是不同分割方式設計的信息模塊。
只要父級模塊對齊柵格，子級元素可以不對齊列，同時子模塊也可以有自己的柵格系統。
列寬無法永遠精準整除，而相差的像素值往往是無法被用戶以肉眼察覺的，柵格不是為了每一像素的精確，而是為了保證瀏覽效果的秩序、協調與統一。
確定列間距與大邊距
列間距與大邊距選擇 8(最小單位)的倍數，網格將更加一致。可以將間距值把常用的數值整理成號碼表，間距復用化：小= 8px，中= 16px，大= 24px，x 大= 32px 等等…這樣一來，保持一致性更加容易，更加合乎邏輯，并且開發人員也會高興，因為他們可以根據屏幕元素之間的關系安全地假定間距。
注意：
列間距的數值越大，頁面留白間隙越多
列間距的區域不可以放置內容模塊，內容區從列間距開始到列間距結束
非常規設計時不需要柵格系統，根據設計場景可自定義。
柵格系統適配過程中需要考慮三個原則:等比縮放、彈性控件、文字流自適應。隨著設備多樣化，通用的適配方式是自適應與響應式布局，隨之就是柵格系統的變化。我們先聊下斷點。
斷點，用瀏覽器打開一個網站，檢查元素，右上角會顯示視窗當前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。
斷點設計主要考慮基礎的 3 端，一般大于等于 1440 為 web 布局，1439-500 為平板布局，小于 500 為手機布局。每經過一個斷點，可以改變柵格大小（比如 16 柵格改為 8 柵格），固定改為拉伸，樣式（文字、顏色）。制作精良的話可以設計多個斷點，如 480、600、840、960、1280、1440 和 1600px。
固定柵格
固定網格的最大特征是在網頁收縮過程中，經過一個斷點就會自動減少最邊緣元素，其他元素基本保持不變。通過在嵌入式塊中排列圖塊，在工具欄中放置圖標等，可以用固定的框來形成網格。柵格列數隨著瀏覽器寬度的減少而減少，邊緣圖塊自動換行，或者有時會溢出滾動條。
首先通過最小單位選擇一個基本尺寸，然后以基本尺寸的倍數構建每個盒子框，就會出現一個個網格。
流動柵格
流動柵格是元素隨著設備尺寸變化而比例變化，當到屏幕大小變化的斷點時，列可以增長或收縮以適應可用空間，邊緣元素被減掉。但并不是每一個斷點都需要去減少元素，可以適當的按照元素的比例進行大小調整。流動布局兼容性高，能更好的適配多分辨率。
流體柵格非常適合編輯內容，儀表板、圖像、視頻、數據可視化等。對用戶而言，縮放事物的大小比縮放可見事物的數量更為有用。
在每個斷點處，列數是固定的，在斷點范圍之間，實際列寬是柵格區域百分比縮放，而不是最小單位倍數。內容區域是動態運動，就需要運用柵格系統。
混合柵格
內容區域流動和固定柵格組合也是常見的做法，混合柵格既有流動的寬度，也有固定寬度?；旌喜季謱τ脩羰钟押茫缦聢D左側是固定柵格，右側是流動柵格。
在初期，網頁使用的是絕對靜態布局為主。靜態布局中如果用戶的屏幕大于或小于設計預期，結果會出現的滾動條，過長的行以及對空間的不良使用。后隨技術發展，為了兼容各種瀏覽器，出現了針對各設備適配的解決方案，自適應布局。
后來移動互聯網爆發，html5 標準發布，與移動設備、平板電腦和智能設備(游戲機)等需要提供了更豐富的功能，用戶希望能夠使用各種設備訪問任何網站，結合自適應的思想，出現了響應式布局的概念——2010 年由 Ethan Marcotte 提出。
自適應
自適應布局是網頁內容根據設備的不同而進行適應，來判斷當前訪問的設備是 PC 端、平板還是手機，為不同終端分別提供獨立的前端代碼。自適應設計可以更好地適應用戶在現場的各種需求，缺點是成本較高。
自適應設計即創建多個布局，每個靜態布局對應一個屏幕分辨率范圍。比如你對自適應網站的窗口大小進行調整，每經過一個斷點就可以得到不同的布局（頁面元素位置發生改變），但在每個布局中，沒有經過斷點時頁面元素不隨窗口大小的調整發生變化。每經過一個斷點，布局和位置是可改變的，也有特殊，如兩個斷點間等比縮放，可以保留用戶在多個設備間的操作習慣。
自適應設計，變化沒必要過于復雜，保留必要的功能入口，不必要的可以隱藏給不同設備切換不同的樣式，在同一設備下(斷點范圍下)實際還是固定布局。
響應式
響應式是通過一套代碼，無縫匹配符合電腦、平板、手機效果的前端技術，開發成本更低，高適應性；設計成本更低，一套設計應對多端，最大化提升用戶的操作體驗；響應式不提供自適應性那么多的控制，多端同步生效，減少運營成本，保障業務效率。
一個典型的響應式布局，通過改變瀏覽器的寬度就會發生響應變化，而不是像自適應經過設備斷點時內容才發生改變。響應式布局中會出現諸多差異較小的狀態，同樣讓響應式布局更加的難以測試和預測。
響應式也存在斷點，是網頁在收縮的過程中的最小范圍。當網頁到達這個范圍以后，網頁內部的元素就要進行相應的變化，用來適應屏幕的變化。
響應式設計的前提有兩點：1，頁面布局具有規律性，元素寬高可用百分比代替固定數值；2，網頁圖片必須是可伸縮的。這正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式是順理成章和高效快捷。
響應式網頁測試工具：我有反應嗎？和 designmodo
總結一下：
自適應布局是內容根據終端不同進行適應，響應式布局是網頁的布局針對屏幕大小進行響應。響應式布局等于流動柵格，而自適應布局使用固定斷點來進行多個布局。 自適應布局給了我們更多設計的空間，因為只用考慮幾種不同的狀態；而在響應式布局中就會出現上百種不同的狀態，雖然絕大部分差異較小。
自適應與響應式如何選擇用哪個呢？
頁面功能不多，用戶交互少，不需要經常升級，響應式設計從運營的難易和維護的便利性考慮會更好，如邏輯簡單并且內容大致相同的官網和展示頁面；頁面個性化多功能方面考慮，自適應設計更合適，用戶體驗更好，如功能復雜、用戶交互頻繁的網站。
全平臺適配
除此之外，隨著移動設備的生產力逐步加強，手機、折疊屏、平板、電腦之間的界限變得模糊，端與端的差距也在縮小。蘋果推出 iPadOS，讓移動端的便捷和桌面端的超強生產力進一步融合。而從應用的開發而言 Electron、Flutter 等跨系統框架層出不窮，開發者也在不斷嘗試在不同平臺上用一套代碼提供同一套服務，減少系統隔閡所帶來的維護成本。
盡管全平臺系統設計的概念還不成熟，但我們可以看到打造流暢的全平臺體驗的必要性。這也許會成為下一代應用的基礎規則，正如當初的響應式設計。
figma 有三種不同形式的柵格可供選擇：統一網格，列和行。支持單個畫板柵格系統的使用和隱藏。
嵌套柵格
與其他工具不同，figma 不會在內容層只局限一個柵格，可以建立多層柵格嵌套?？梢岳眠@一點，在盒子內部設計時，再用柵格用作視覺輔助，可以通過顏色和不透明度來區分不同柵格。
figma 可以通過相對調整畫布大小，同步拉伸柵格系統。
內容自適應
當我們拖動窗口的寬度，模塊會發生自動布局。定義下級元素針對父模塊的響應，做到模塊變化的同時下級元素的顯示也是合理的。比如相對內容左右間距一致、對齊方向一致、尺寸固定等設置。這就是 Sketch/Figma/XD 中的自適應功能。
其實在設計稿時，使用自適應功能頻率不高，不是每個區塊都需要自適應的。
固定和拉伸混合使用，在內容自適應框架中，可以將一些元素設置為固定，將一些元素設置為填充容器并與固定和拉伸形式相結合使用。
同時可以修改圖層透明度為 0，相當于占位，可以占位搭配組件。
共享樣式
在創建柵格系統時，可能需要對不同設備尺寸或其他常見用例上的布局進行不同的更改。為了更輕松地將這些柵格應用于框架，文件和項目，可以將其中的幾個合并為一個柵格樣式(相當于組件)，然后可以從團隊庫中共享該樣式或者自己復用，簡單快捷。
同樣有三種柵格可供選擇，柵格系統統一使用和隱藏。Sketch 里自適應功能不能隱藏某對象占位，而 figma 可以，當位置隱藏后，布局就會進行調整。
sketch 使用柵格設計需先設置一個總寬度尺寸，點擊左下角默認設置還可以將自定義的柵格系統設置為默認，方便以后重復調用，但 sketch 只能儲存一組柵格系統的數值。
sketch 怎么以最小單位進行移動？
可以在首選項設置最小單位如 8px，按 shift+方向鍵就能以最小單位進行調整。
這個網站，輸入版心和分割數，自動生成柵格方案。
在實際設計過程中，柵格的使用會伴隨著限制條件。我們應當明白，柵格只是為設計師提供便捷的輔助工具，而不是限制設計師的工具。
不過從柵格這個工具來說，完全的自由反而是降低效率。如果能夠給出一定的限制，反而會使得我們的設計效率提升。我們不必關心每個區域盒子具體值是多少，只需保證它們存在正確的關系。柵格系統是對界面元素進行橫向排布時需要遵循的模式，不適用于類似圖標與文字間隔的小型元素安排，而是用于大型區塊間距的安排。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
決策疲勞在現今互聯網深度發展的時代似乎非常常見，面對眼花繚亂的APP頁面，我們通常會因為需要做出過多決策而煩躁。那么產品設計者應該如何減少決策疲勞現象，給予用戶更好的體驗。本文圍繞解決用戶決策疲勞展開了詳細講述，推薦對此感興趣的伙伴閱讀。
決策疲勞是用戶體驗圈一個路人皆知的詞匯，用于描述人們在某個時期內做出過多決策而導致厭煩的情況。研究表明，它主要發生在人類的認知能力在單位時間內隨著時間的延長而減少時。這就是為什么學習、鉆研問題，是一件非公眾都能做好的少數事件。
在產品設計中，我們要堅持減少用戶需要做出決策數量的基本原則。保證用戶使用產品來完成一項任務，能夠越順利、越直接。個人在特定時期內被要求做出的決定越多，即使這些決定是微不足道的（比如選擇播放那個節目），他們的決策質量也會越低。
當你感到疲倦時，這會顯著地影響你的決策能力，而 設計師在為用戶設計界面時必須了解到疲勞可能對用戶的影響。這個話題很有趣，因為人們在使用你的產品時可能會遇到的認知過載的原因有很多。
本文重點是介紹在你進行下一個 產品項目時減少認知過載的六種方法。
作為用戶，每天我們擁有的選擇題都在呈指數增長?；ヂ摼W讓我們可以在瞬間訪問世界上的內容。如此多的選擇會使我們思維遲鈍，降低我們的滿意度，并可能導致我們對體驗感到沮喪而不是變得更好。
當給用戶太多選擇時，他們往往會感到困惑和迷茫。一個產品可以擁有世界上所有的功能，但是當界面因為選擇過多而過于復雜時，它最終給到用戶的體驗一定很差?！度烁衽c社會心理學雜志》的一項研究表明，當我們有太多選擇時，往往會導致決策失誤和情緒沮喪。
來自哈佛商業評論的模型
在追求最大化滿足商業化可能的產品設計中，老板可能會要求在其產品中包含過多或過少的功能。通過使用哈佛商業評論提供的模型，橫軸為功能數量，三個點依次為用戶復購最大化、用戶終生價值最大化、用戶初次購買銷售最大化，公司能夠根據他們想要的結果找到適合他們的功能數量最佳點。
研究表明，人們更有可能購買提供了有限數量的商品。在這種情況下，他們也會對自己的選擇更滿意，而不是從購買前的猶豫到購買后的忐忑，從而產生更大的滿足感。
關鍵是很多產品為用戶創造了太多的選擇，這可能會造成浪費并適得其反。用戶可能會浪費時間嘗試點擊所有可能的產品，而不是按照預期進行實際購買。
在用戶體驗世界中，關于使用多少次點擊以及人腦一次可以接收多少信息，存在許多相關的說法。但最重要的是，產品設計師需要在簡單性和功能性之間取得平衡，這樣他們就不會要求用戶做太多的操作或過多考慮用戶的需求遺漏了什么。
最容易被誤解的理論之一是喬治米勒的“神奇數字 7”。有人說產品設計應該只有七個菜單選項卡或下拉列表中的七個項目。
這是個謬誤，雖然我在某種程度上同意這種觀點，因為堅持這樣的限制似乎更自然，但我們也必須考慮信息是如何隨著社會和我們的大腦發生變化的。當前的互聯網會通過網站和大屏手機向我們展示數據，而不是早年的4.0英寸的小屏手機，用戶可以輕松地一次看到他們的所有選項，并不是非要強制通過數字7的限制讓用戶一塊很大的屏幕上來回滾動。
同時現在也有一些研究表明，人們有可能喜歡有多種選擇的菜單。我們擁有的選項越多越好，因為用戶不必花時間深入查找相關信息。
比如主頁上最多包含 幾十個類別鏈接的淘寶列表）比僅提供有限選項（如沒有子類別的類別）的網站更有用。但這里要強調的是需要考慮實際的用戶場景，電商平臺的屬性導致了要為消費者提供更多的選擇，而類似工具產品，尤其是垂直工具產品，在設計選項數量時一定要謹慎。
還有另一個站不住腳的理論：從業者普遍接受但完全不靠譜的“三擊規則”，或者更加扯淡的“兩擊規則”。用戶的滿意度和事件完成率其實并不一定受幾次點擊影響，比方說付費流程，缺少必要的流程硬按點擊次數把流程縮短，導致用戶錯誤付費而產生的用戶體驗變差幾乎是不可逆的。
比菜單選項卡或下拉列表的數量更重要的是視覺體驗。視覺布局可以更輕松地掃描和記住每個選項。根據信息搜索理論，信息線索的持續感知對你的用戶體驗很重要。
人們在日常生活中要做出很多選擇，而太多的選擇可能會讓人不知所措。當我們因產品特性不得不呈現更多的信息時，重要的是信息組織方式。
你可以去嘗試減少選擇的數量，但最重要的是你的信息結構。如果你的信息沒有組織好，或者給到用戶的決策過程中涉及的步驟過多，用戶就不會費心去尋找他們想要的東西，因為他們覺得這會花費太長時間或可能沒必要去更更努力地探索。
為了在產品上讓用戶的決策中有更好的轉化，我建議去掉任何不必要的東西，例如無關的標簽和鏈接，這些標簽和鏈接會分散用戶的注意力，使其無法找到他們正在尋找的東西。同時綜合產品特性去考慮實際該有的流程數量和必要選項，平衡簡單性和功能性的關系。
現實中我們都會犯錯。它可能發生在我們所有人身上！但是，如果用戶犯了錯誤，優秀的產品設計師應該怎么做？
答案是：讓用戶輕松回到起點。
通過讓用戶走上正軌，你更有可能留住他們作為用戶，而不是導致他們離開你的網站或應用程序。
下面是我在設計用戶流程時的一些最佳實踐：
導航是任何網站或應用程序的核心。這就是讓你的設計能夠讓每個人都易于訪問和使用的原因。設計出到適合你產品的導航系統，對用戶體驗至關重要。
導航的設計應該直觀且易于使用。用戶應該始終知道它在哪里，它的意義，以及點擊它會去哪。
一個好方法是通過顏色為用戶對操作區域進行導航：比如當進行切換、更改等動作時配備不同的顏色，并用文案清楚地說明每個菜單項下是什么功能。
這些小動作有助于使瀏覽您的網站或應用程序成為一種暢快的體驗。
一個例子是 Instapage 登陸頁面。如果標題沒有箭頭，很難看出下方有更多內容：
在設計新界面時，必須盡可能降低受眾的學習成本。一個方法是利用他們已經熟悉的模式和習慣。但是你怎么知道這些約定是什么？
下面是三個常見的 設計慣例，這些慣例可以讓你的用戶在與產品內交互時感覺更熟悉，這有助于減少他們的學習成本，并讓他們更快地開始學習你試圖傳達給他們的任何內容。
簡潔的配色方案要遠比復雜華麗的配色更有效果。人眼會被顏色所吸引，因此如果你在整個界面中使用簡潔的配色方案，人們會更容易找到自己想要的信息而不是被顏色亂神。
不僅要遵循常見的用戶體驗規則，而且要在一個產品里不停的重復，不要輕易作新穎的嘗試，前輩們大多已經幫你嘗試過了。
這樣的意義在于：
人們使用你的產品感覺更輕松，因為這個產品沒什么復雜的新東西（降低了學習成本）。
一個例子是，目前無論你在那個瀏覽器查看哪個頁面，你的菜單欄都會保持在站點的頂部或底部。這會讓你產生導航認知，因為它在幫助你決定下一步需要采取什么行動時減輕了學習成本。
圖標是在你在表示操作對象是什么的好方法，它們易于理解且具有普遍可識別性，因此非常適合作為交互介質。使用在生活中已經被廣泛理解的圖標和符號有助于讓你的產品內容不會感覺難以理解和過于復雜。
圖標一定要廣為人知——例如房子。這個圖標被普遍認為是“主頁”或開始屏幕的圖標。垃圾桶也是一樣——這個圖標被認定為一個垃圾桶圖標來刪除一個元素。
我們都知道應該以用戶為中心進行設計，而不是你自己，但其實不是那么容易。當你處于設計過程中試圖弄清楚你的用戶需要什么或他們會如何反應時，其實往往會按照自己的喜好走偏。
一個方法是你可以使用一些簡單的技巧來確保你在設計時考慮到你的用戶。有些人發現從第一人稱的角度寫下他們的想法有助于將自己想象成最終被服務的用戶。
或者某些設計師會講角色分類，然后全情單線程的專注一個項目，以犧牲時間和效率為代價確保航道的正向。
以用戶為中心進行設計的最佳方式是聽取用戶的意見。當你從事一個新項目并考慮這個產品將如何服務于用戶時，請確保在進行原型設計之前先和你的用戶聊聊。
可以嘗試提出以下問題：
往往你會驚訝于他們可以提供的見解以及他們將期望如何改變你原型的方向。
你可以使用多種用戶體驗研究方法來確保你在設計時考慮到用戶：
不要提供太多的選項或功能讓用戶不知所措。
每個產品都有自己為用戶解決的核心問題，用戶希望在產品中獲得幫助并快速做出決定。問題是，很多產品經常沉迷于他們產品功能以及他可以為用戶實現什么，忘記了如果有太多選項和功能，新用戶可能會感到不知所措。
如果你負責一個產品，可以考慮你的用戶在面臨過多選擇或功能時的感受，并盡量優先突出他們最需要的選項或功能。
例如，在電子商務網站中，用戶不能從 50 種不同的衣服面料中選擇他們最喜歡的材質，如果預先只有三四個選擇，可能會帶來更好的體驗。也可以考慮隱藏一些選項，方法是使用視覺提示，例如類似“探索更多”文字的按鈕。
確保將最重要的信息呈現給用戶的一種方法是將信息流設計為金字塔形狀，首先呈現基本信息，不太重要的信息盡量放在不顯眼的地方或者想辦法隱藏。
這里提供了六種方法，幫助你減少產品中的決策疲勞，從而使用戶更有可能走上正軌，解決他們的問題，并幫助獲得更高的轉化。產品設計時把自己放到用戶的角度去思考，才能更好的服務于用戶
文章來源：人人都是產品經理 作者：公眾號：真的不一定
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
以下內容主要分成兩大部分，第一是聊聊響應式和自適應的區別和原理，以及我們應該如何去設計響應式界面；第二部分也是比較關鍵的B端系統設計的核心，B端設計中臺完整構建過程的具體步驟，以及應用到的格式塔原則，和命名的一些注意事項，內容較多，大家可以根據上述目錄來選擇性閱讀。
簡單概括多端兼容設計的發展史，最早是桌面端，比如桌面的一些應用；后來出現了移動端，針對移動端大家用的都是WAP，指一種無線應用協議，大家在用手機瀏覽一些網站，會把網站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當時網絡不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現了響應式，也就是做一套代碼可以兼容三端（網頁、移動端、iPad）設備，在發展的同時也遇到很多問題，但響應式同時也遇到了很多問題；于是又出現了自適應，指不同的設備打開不同的頁面進行自適應，自適應能增加效率，但需要增加工作量；2017年以后直到現在看到最常用的就是漸進式，類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。
可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。
自動布局算是響應式的一種，但平時看到很多響應式其實并不是真正的響應式，而是自動布局，因為界面在不同的設備用的是不同的模板，當我們用電腦打開呈現的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應式，其實不是。因為當我在開發者模式下調節不同設備展示時，就會發現，其實是換了一個網址來根據不同的設備進行自適應的，而真正的響應式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。
漸進式布局是近幾年比較新起的，這種布局設計，很像一個網站或者本身它就是一個網站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進式布局得一種，小程序明顯是一個網頁，但通過技術的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術還是web網頁。
響應式的原理是通過定位的方式來做響應式的各種開發，需要在頁面中至少標出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解，其實結合figma來看，這些點對應的就是這樣（如下圖），在figma中的布局點。設計師通過調節圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應式的原理。換言之，我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。
01、響應式
如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面，這個頁面兼容三端。雖然做了響應式，但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面，然后全部做好對應的自動布局，再進行頁面拉伸，內容隨之會發生變化，比如當拉伸到1024*768的時候，也就是iPad的尺寸，就會發現局部在設計上有些不合實際情況，這時就需要設計師在對應尺寸的設計稿上進行內容上的微調，比如按鈕不可能那么長，就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時，然后再酌情針對網頁尺寸的呈現樣式，局部進行尺寸的調整，比如文字和按鈕被拉伸到網頁版都需要居中對齊，電腦端的樣式就需要設計師重新排版了。
通常在B端系統，設計師需要做響應式設計時，往往是從大往小做設計，這也取決于這個B端產品是否需要進行移動端的設計，《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端，就需要我們將網頁改成移動端設計，比如B端的側邊欄導航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進行演示，通過對斷點插件的設置，就可以完美的看到頁面在三端不同情況的適配呈現，斷點插件用來做演示非常方便。
02、自適應
如下圖是自適應的優點和缺點，其實就是一個項目開發三個頁面，分別做定制設計，網頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型，尤其是今年我們設計師更能深刻體會，C端和B端已經是完全兩個不同的行業，C端發展近十年，已經很難再做到創新上的突破，該做的功能和創新都已經做了，而B端這片藍海才剛剛開始發力，很多企業也都在考慮B端系統的搭建，降本提效率成了很多公司新的指標，因此數字化轉型重點在于B端系統探索，B端重點在于中臺的搭建！設計師通過設計中臺，構建出基本的業務類型，再分類到業務中，構建出不同的業務界面，所以設計中臺非常關鍵，很多公司經常會用這兩個系統去構建，Antdesign和Elemnet就是設計中臺，我們會發現用Antdesign可以做出很多的系統，那怎么進行設計中臺的設計呢？和我們設計師有什么樣的關聯度呢？帶著這個問題，我們深度探索B端設計中臺的落地！
概念：中臺是互聯網的術語，一般應用于大型企業，中國互聯網的變革永遠是從大型互聯網開始，大型互聯網公司引發了技術的變革，這也是中臺的興起，一般指搭建一個靈活快速應對變化的架構，快速實現前端提的需求，避免重復建設，達到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產生，一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設計師設計的組件只是一個樣式，而前端需要把組件進行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用，和前端代碼的復用，可以大大提高設計師的工作效率。
基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等，之所以強調系統兩個字，有系統就要統一規則和統一規范，然后進行調用應用在系統中的各個地方，比如我們想調用一個顏色，不是去隨選用一個顏色，應該嚴格的從色彩系統中去調用，如果系統組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用，這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應的組件，我們應該試著反推一下，是否要加進組件庫中去，來進行系統的調用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進行查看），所以并不是Antdesign組件庫形成了一定的規則，它也是在沿用別人的規則，而這些規則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現在這樣的組件庫，那中臺設計，首先要搭建基本庫，把基本庫里的基礎一些系統搭建好后，我們繼續去做擴展庫。
如下圖，擴展庫中包含了很多內容，比如分了四類，導航系統，數據錄入，數據展示和反饋系統。其中導航系統又包含了，面包屑導航、下拉菜單、導航菜單、頂部導航等等，包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節Arco組件庫，因為它們面向的是系統級的解決方案，各行各業都可以用它，它面向的是一個大系統，也許我們只涉及到了其中的20%，因為也沒有一個系統能用到它所有的組件，所以我們自己在設計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應該加以說明什么時候用這個多選框。類似于是組件的設計說明。
最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應該如何正確的使用，或者說的方法是什么。比如標簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據眼動儀實驗數據數據來看，并且結合給出一些工作中業務中的最佳實踐得案例放進去，給使用的人去做指引。
所以設計師做的事情，不僅僅是應用組件庫和創造組價庫，還應該指導其他設計師，指導開發人員在去復用每個頁面組件的的時候，應該怎么正確的使用，這也是在B端設計中一個關鍵的環節，同時我們的視覺系統一定也是和業務有關聯度的，所以在B端中做設計一定也不會脫離業務去做，我們一定要聯系到實際的業務場景中，這個業務場景指的就是業務和視覺的結合，在做C端的時候，業務場景一定不會比B端多，C端的業務場景大多是定制化的業務場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標、按鈕、頁面，而B端需要統一化，中臺組件庫的落地，可以大大提高設計師的工作效率和開發人員的協同效率，嚴謹的調用組件使用組件，可以使得系統頁面保持高度的一致。
如圖1：可以看出縱列的關系更緊密，因為縱間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢？這屬于用戶心理學的應用，如果元素相鄰的更近，元素之間的關系就會更加的緊密。
如圖3：如果元素相鄰的關系都是保持一樣的，那么它們的關系是相對對等的。
由此可以得出結論，如果相鄰的關系越近，它們的關聯度就越近，如果相鄰的越遠，它們的關聯度就越遠。
應用案例：如圖4卡片中得標題和內容，設計中把標題和內容進行區分，所以我們會做大量的留白，這樣的留白就會讓信息結構具有層次感，層次感就是指它們信息結構的關聯度，如果想讓它們有關聯度，就讓它們距離近一點不要做區分，如果不想讓它們有關聯度，或者關聯度出現一個等級的區分，那么就可以加一條線，讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。
如圖5：如果去區分右邊的形狀，通常我們會根據形狀進行區分，因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。
應用案例：如果文字的標題大小是保持一致的，包括它有統一的大小，統一的色彩，統一的字號，那系統中的其他同樣功能的地方，都應該用統一的文字，這就是格式塔相似性的應用，比如圖標也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標進行表達，圖標之間的設計才具有相似性。
如圖6：可以看到有一個L，是主體與背景進行了區分，如果在設計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。
應用案例：比如警告彈出，可以用色彩去區分，目標就是讓用戶看的更加得清晰，當警告的時候給用戶一個警告的信息，當成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中，前景和背景進行區分的時候，我們就可以通過色彩進行區分，色彩的區分要保持統一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠，它得陰影越長，這也是陰影的層級關系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應用案例：當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認知，一定會腦補出另外一個形狀，這個原則和我們UI的關系是什么呢？比如一個loading，半圓一直在旋轉，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當前的進程和位置，封閉性原則通常應用在圖標的設計，圖表的設計和步驟條的設計中。
如圖9：可以看出用一些簡單得形狀來體現，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續性；另外一組三角形箭頭指向右下角，可以看出它們是連續的一組。不同的形狀會有連續性，箭頭也特別有指向性，這就是為什么返回和前要進放在不同的位置，當我們的數據需要有連續的時候，我們也要使用相似的形狀來表達，這就是連續性原則的應用。
同理如圖10：連續性一定是要有連續等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續等階變化，通過色彩的透明度也可以做到連續性。
很多公司或者不同公司有不同的命名方式，這個需要和團隊開發提前做溝通，主要以方便開發習慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態，這樣的命名順序來進行，這樣命名開發使用也比較方便，因為是按照了開發的統一規則來進行命名的。如圖所示：
當英文不好的時候，推薦大家記常用組件英文名，以及常用狀態名、級別名、內部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
文章來源：站酷 作者：飛魚十七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。
通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然的將信息進行分組。
圖3 親密性原則體現的留白分割
如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標等）之間默認采用的都是留白分割。比如相冊中單張照片之間，文章中每個文字之間，間距留白是區隔單一信息元素的默認選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個元素之間默認使用留白分割，隨著元素的增多，多個元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進行區隔時，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。
圖5 iOS和Android系統的分割方式差異
在 iOS 中，線性分割是條目間默認的分割方式（參見 iPhone 通訊錄和設置），當多個條目成組后，為了區分不同組別，則會采用更高層級的卡片分割方式。
在 Android 系統，留白分割是條目間默認的分割方式，線性分割用于劃分信息組塊，而不僅僅是區隔上下文內容。（參見 Pixel 5 的通訊錄和設置）
從 2014 年 Material Design 發布后“卡片式設計”的風靡，再到 2019 年前后“去線化設計”盛行，結合設計趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數據指標的前提下，條目之間盡可能采用留白分割，會讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設計的創始團隊 Google，在設計 Android OS 時也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內容。在 Material Design 中，對分割線(Dividers)有明確的定義和規范。（iOS 中沒有相關定義，根據上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設計規范建議和效果）
分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾，影響頁面信息傳達，所以 Android 系統明確規定了分割線的使用原則：
圖7 Android系統中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數時候（信息層級≤2），采用分割線進行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因為間距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會更清晰，如下圖所示：
圖10 追求縱向信息屏效時線性分割效果更好
當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時應注意以下三個使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應，非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好，畫面的分割感會更強。
不管是哪種卡片類型，它們都是獨立的、包含單個主題的內容(操作)的容器，它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。
那什么時候使用通欄分割線，什么時候使用卡片分割呢？這里有三個參考建議給你：
圖14 使用卡片的三個參考條件
回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。
圖15 設計師設計的三種分割效果
在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。
根據分割方式自身的特點（視覺干擾性、分割強弱感、滑動沉浸感）、上下文條目之間的關系，單個條目的內容復雜度，屏幕空間的利用率，我們可以對分割方式做一個簡單的小結，如下：
圖17 分割方式特點小結
簡而言之：
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。
通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然的將信息進行分組。
圖3 親密性原則體現的留白分割
如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標等）之間默認采用的都是留白分割。比如相冊中單張照片之間，文章中每個文字之間，間距留白是區隔單一信息元素的默認選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個元素之間默認使用留白分割，隨著元素的增多，多個元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進行區隔時，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。
圖5 iOS和Android系統的分割方式差異
在 iOS 中，線性分割是條目間默認的分割方式（參見 iPhone 通訊錄和設置），當多個條目成組后，為了區分不同組別，則會采用更高層級的卡片分割方式。
在 Android 系統，留白分割是條目間默認的分割方式，線性分割用于劃分信息組塊，而不僅僅是區隔上下文內容。（參見 Pixel 5 的通訊錄和設置）
從 2014 年 Material Design 發布后“卡片式設計”的風靡，再到 2019 年前后“去線化設計”盛行，結合設計趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數據指標的前提下，條目之間盡可能采用留白分割，會讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設計的創始團隊 Google，在設計 Android OS 時也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內容。在 Material Design 中，對分割線(Dividers)有明確的定義和規范。（iOS 中沒有相關定義，根據上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設計規范建議和效果）
分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾，影響頁面信息傳達，所以 Android 系統明確規定了分割線的使用原則：
圖7 Android系統中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數時候（信息層級≤2），采用分割線進行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因為間距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會更清晰，如下圖所示：
圖10 追求縱向信息屏效時線性分割效果更好
當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時應注意以下三個使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應，非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好，畫面的分割感會更強。
不管是哪種卡片類型，它們都是獨立的、包含單個主題的內容(操作)的容器，它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。
那什么時候使用通欄分割線，什么時候使用卡片分割呢？這里有三個參考建議給你：
圖14 使用卡片的三個參考條件
回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。
圖15 設計師設計的三種分割效果
在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。
根據分割方式自身的特點（視覺干擾性、分割強弱感、滑動沉浸感）、上下文條目之間的關系，單個條目的內容復雜度，屏幕空間的利用率，我們可以對分割方式做一個簡單的小結，如下：
圖17 分割方式特點小結
簡而言之：
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。
通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然的將信息進行分組。
圖3 親密性原則體現的留白分割
如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標等）之間默認采用的都是留白分割。比如相冊中單張照片之間，文章中每個文字之間，間距留白是區隔單一信息元素的默認選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個元素之間默認使用留白分割，隨著元素的增多，多個元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進行區隔時，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點 iOS 和 Android 系統中差異還蠻大的。
圖5 iOS和Android系統的分割方式差異
在 iOS 中，線性分割是條目間默認的分割方式（參見 iPhone 通訊錄和設置），當多個條目成組后，為了區分不同組別，則會采用更高層級的卡片分割方式。
在 Android 系統，留白分割是條目間默認的分割方式，線性分割用于劃分信息組塊，而不僅僅是區隔上下文內容。（參見 Pixel 5 的通訊錄和設置）
從 2014 年 Material Design 發布后“卡片式設計”的風靡，再到 2019 年前后“去線化設計”盛行，結合設計趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數據指標的前提下，條目之間盡可能采用留白分割，會讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設計的創始團隊 Google，在設計 Android OS 時也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內容。在 Material Design 中，對分割線(Dividers)有明確的定義和規范。（iOS 中沒有相關定義，根據上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設計規范建議和效果）
分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內容是如何組織的。但過度使用分割線會造成視覺干擾，影響頁面信息傳達，所以 Android 系統明確規定了分割線的使用原則：
圖7 Android系統中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數時候（信息層級≤2），采用分割線進行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因為間距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會更清晰，如下圖所示：
圖10 追求縱向信息屏效時線性分割效果更好
當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時應注意以下三個使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應，非通欄卡片對于凸顯單個卡片的獨立性和內容的效果都更好，畫面的分割感會更強。
不管是哪種卡片類型，它們都是獨立的、包含單個主題的內容(操作)的容器，它內容的獨立性與我們前面提到的通欄分割線分割的內容相似。
那什么時候使用通欄分割線，什么時候使用卡片分割呢？這里有三個參考建議給你：
圖14 使用卡片的三個參考條件
回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。
圖15 設計師設計的三種分割效果
在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。
根據分割方式自身的特點（視覺干擾性、分割強弱感、滑動沉浸感）、上下文條目之間的關系，單個條目的內容復雜度，屏幕空間的利用率，我們可以對分割方式做一個簡單的小結，如下：
圖17 分割方式特點小結
簡而言之：
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“復雜是世界的一部分，但它不應該令人困惑，好的設計幫我們馴服復雜，不是讓事物變簡單（如果復雜是符合需求的），而是去管理復雜”--唐納德·A·諾曼
與復雜共處，這是一個有趣的話題。在這個奉行“少即是多”的時代，設計師對于復雜噤若寒蟬，認為優秀的設計應該簡潔明了，若無必要，勿增實體，而復雜則常備被視作失敗設計的標簽。設計師為了保持設計上的簡約挖空心思，甚至試圖通過削弱功能的方式來降低產品的復雜度，得到自己想象中的完美設計。然而一味追求“簡單”的設計真的符合用戶的實際需求嗎？從心理學的角度來看，復雜的事物往往功能強大，而功能強大意味著更好的服務與更高的價值，用戶也更愿意為之付費。當我們購買商品時，我們會仔細斟酌，拿著產品的功能列表反復比對，這個時候我們忘記了產品復雜與否，更多考慮的是功能是否滿足自身需求。
對于大部分B端產品而言，復雜或許難以避免，復雜是出于實實在在的業務的需要，而非某位設計師的錯誤喜好。B端產品之所以給人感覺會相對復雜，是因為產品需要完成復雜的工作任務，界面內承載的信息內容較多，在視覺上會帶給用戶壓力，直觀感受上覺得產品很復雜。但是這些信息又都是必需的，如果缺少這些必要的信息，會對用戶理解和使用產品造成阻礙。就如同飛機的駕駛艙，密密麻麻的按鈕如此復雜，但是每一個按鈕都有著相應的功能，不可或缺。既然復雜難以避免，那么作為設計師我們不應該被動接受或盲目拒絕復雜，我們應該學會如何與復雜共處，去嘗試馴服復雜、管理復雜。
相信很多設計師和我一樣，經歷過現代主義浪潮的洗禮，對于簡約的設計有著或多或少的偏好。因為這種偏好，在自己進行設計時也希望能夠選用這種風格，在設計時刻意的去追求界面簡約，卻忽略了界面上的簡約不等同于產品易于理解和使用。從心理學的角度上看，復雜的事物更容易理解，簡單的事物反倒令人困惑，一味的追求簡單反而會讓事物變得復雜。
B端產品的目標是降本提效，追求簡約的設計思想在B端產品的設計中并沒有那么適用，為了提升用戶的操作效率，我們需要將一些能夠幫助用戶理解的信息與常用的操作直觀的展示給用戶。這會在一定程度上增加界面的復雜度，但是相較于產品視覺界面會因此變得復雜，產品的易用性和操作效率對于B端產品而言會更為重要。
與復雜共處的前提是能夠理性地看待復雜，復雜本身的含義即非褒義也非貶義。復雜描述的是事物的狀態，它在詞典上的解釋是擁有很多即錯綜復雜又相互關聯的組成部分的事物。產品復雜與否是由產品本身所從事的業務和需要完成的任務來決定，就像我們不能要求一個做機械結構設計的工程軟件做得像一個圖畫板一樣簡單，因為兩者的功能需求不是一個層面的，所以我們也不能單純的將產品簡潔還復雜作為評判一款產品優秀與否的標準。
我們之所以對復雜懷有畏懼，其實更多的是畏懼令人困惑的復雜，復雜與困惑有著本質的區別，理解他們之間的區別很有必要，復雜描述的是事物的狀態，而困惑表述的是用戶使用產品時的心理。復雜的背后可以擁有規則與邏輯，理解這些規則和邏輯，能夠幫助我們理解和使用產品。而令人困惑的產品往往缺少這樣的內在規則與邏輯，用戶難以理解產品的運轉機制，需要花費很大力氣才能完成有效操作，容易讓用戶產生挫敗感。產品可以是復雜的，但是不應該讓用戶困惑。
在很多復雜的傳統線下業務數字化轉型的過程中，為了讓產品易于使用，設計師需要深入到一線，去了解真實用戶在線下業務場景中是如何處理日常任務的，在流程線上化過程中也需要遵循這樣的業務流程，這樣能夠讓用戶更快上手，而如果我們在設計過程中不去參考用戶在線下的操作場景，按照自己的想法去意測用戶的行為，這樣設計出的產品背離了用戶的心理模型，缺乏內在邏輯，會讓用戶感到混亂困惑，陷入深深的麻煩。
基于產品本身功能需要，我們可能無法很主觀的去降低產品的復雜度，這就需要我們在進行產品設計時花費更多的心思，通過對業務流程、頁面布局、信息呈現上的調整與設計讓產品變得清晰，不讓用戶陷入困惑。如下圖的關于表單編輯器的A\B兩種設計，用戶在編輯器內完成一系列針對表單的編輯、配置操作，然后發布表單。方案A中將這些表單編輯配置項通過tab進行排列，這種方式結構簡單，但是擴展性較差，過多的欄目也容易讓用戶陷入困惑，不清楚需要完成哪些配置項才能進行發布。方案B中采用了步驟導航加側欄導航的雙層導航結構，在步驟導航上給出完成表單編輯配置的主要步驟，在大的步驟下用側欄導航承載小的編輯項，結構清晰，且能夠對用戶編輯表單提供一定的幫助指引。雖然兩種方案信息內容上都一致，視覺觀感上甚至方案B更為復雜，但是方案B在這里可能是更合適的方案，因為方案B在配置流程的指引上更為清晰，也更貼近用戶心理模型，即使沒有使用過在線表單的用戶也能理解產品流程，因而用戶能夠更容易的完成表單配置并發布表單。
我們在使用產品時，都會有一個大概的心理預期，會認為某一類型的產品會較為復雜，某一類型的產品會相對簡單。為什么我們會有這樣的認知呢？是因為我們知道這些產品大概有哪些功能，而這些功能就決定了產品的復雜層度。產品的復雜程度由產品的業務與功能決定，而不是依照設計師的自我喜好，像如淘寶、京東這類的購物網站、擁有著很多的欄目，所以淘寶、京東的界面相對來說較為復雜；而像百度這樣的搜索引擎功能相對來說比較簡單，所以界面設計相對簡單干凈。
我們可以容許一個功能強大的產品設計得相對復雜，但是一個功能簡單的產品設計得復雜難用就是一個災難。作為設計師我們需要根據產品的實際需要來進行設計，即不過度設計，也不執著于追求簡約，而是基于需求恰到好處的進行設計。
復雜的產品會有好的用戶體驗嗎？答案是肯定的，用戶體驗的好壞與產品是復雜還是簡單并沒有直接的關系，很多時候復雜的產品也能帶給我們良好的用戶體驗，在互聯網產品中，我們可以看到很多復雜的產品，這些復雜的軟件產品，一點點的改變著我們的生活與工作方式，讓我們生活與工作變得便捷與高效。
首先可以看看我們的國民級電商應用淘寶，乍看淘寶的界面，可能會覺得十分復雜，甚至會給人一種眼花繚亂的感覺，但是包括我在內的許多人仍然十分喜歡逛淘寶。淘寶內除了有本身的淘寶、天貓店鋪外還有專做海淘的天貓國際，做社區團購的淘鮮達，專做拍賣的阿里拍賣等數十個板塊，業務繁多，功能復雜，但這幾乎很難改變，因為之所以做這些業務和功能背后都有著商業上的考量。從交互設計的角度看，雖然淘寶的業務和功能繁多，卻有著清晰的布局、信息對齊、內容組織，產品盡管復雜，但并不令人感到費解和困惑。購物流程也與用戶在線下購物流程相仿，貼近用戶的心理模型，用戶容易了解產品功能、容易與之交互，整體上有著良好的用戶體驗。
又如我一直在使用的一款筆記軟件Notion，Notion相對于印象筆記、有道云筆記而言更為復雜，需要花費一定的時間成本學習才能夠從容上手使用，但是這并不妨礙Notion被眾多使用者所追捧。Notion的很多功能在使用之前，甚至都不會想到會出現在一款筆記產品里面，如甘特圖，多維表格等，這類功能一般出現在項目管理類軟件中。而Notion塊結構的布局模式，讓筆記能夠自由拖拽，擁有了極強的自由度，用戶可以很自由的用各種各樣的形式來記筆記，要是你肯再花一些心思，你甚至可以在Notion內搭建一個個人專屬網站來記錄的學習知識，打造個人專屬知識庫。將我們習以為常的線性筆記思維，轉變成縱向思維，甚至是網格狀思維。Notion無疑是復雜的，但是這樣做是為了給用戶提供的強大功能和極高的自由度，這些功能恰恰也切合了用戶的需求，創造了一種全新的筆記體驗，帶給用戶愉悅的使用感受。
簡單是產品追求的最終形態嗎？其實未必，很多時候產品設計的過度簡單反而會給用戶帶來麻煩。為了追求簡單的設計，不可避免的就需要隱藏一些信息或者拉長操作路徑，這是一個權衡的過程，我們在做設計時也會經常面臨這樣的抉擇，是追求視覺上的簡約美觀還是信息傳達準確性與操作上的效率。給用戶一個簡約美觀的視覺感受無疑很重要，人們對于美的事物往往更有耐心，也更愿意去探索。但是對于一款針對B端用戶的效率軟件、辦公應用而言，準確的傳達信息，幫助用戶進行判斷，頻繁使用的功能設計得更高效便捷，這些點能帶給用戶更實際價值，也是我們在設計產品時應該優先考慮的點。
特別是在一些專業性的軟件中，如果我們為了追求簡約而弱化或者省略掉一些關鍵信息，還有可能會導致用戶錯誤操作的出現，造成嚴重的后果。試想一下當你在使用軟件編寫一個計算字段時，軟件提供給你了計算公式卻沒有就近給你提供計算公式的解釋和用法示例，導致你因為書寫上的不規范使得計算結果頻繁出錯。這時你可能會滿懷憤怒的抱怨為什么產品會如此難用，為什么不能配置過程中給到更多的反饋與幫助信息來減少配置錯誤的發生。
前面我們了解了關于復雜的定義，認識了復雜與困惑之間的區別，也明確了在B端產品中復雜或許難以避免，復雜是出于實實在在的業務的需要而非某位設計師的錯誤喜好，既然復雜無法避免，我們就應該學會與復雜共處，管理與馴服復雜。那么如何與復雜共處呢，有一些策略或許可以給予我們一些思路。
復雜與困惑的本質區別在于復雜的背后隱藏著規則與邏輯，而困惑缺少這樣的規則與邏輯，讓人無法預測與揣摩，對應到軟件產品的設計，一款成功的優秀的軟件產品，應該是易學易用、能夠滿足用戶預期，用戶能夠直觀的理解產品的流程與主要功能，并通過產品實現自己的目標。那么具體到軟件的設計上我們應該怎樣做呢？
這里可以看看我們團隊正在使用的研發管理工具TAPD，TAPD是一款敏捷研發協作工具，凝聚了騰訊研發方法及敏捷實踐精髓，其中敏捷開發的方法就是TAPD的內在規則與邏輯，有過敏捷開發經驗，理解敏捷開發流程的的開發人員能夠快速的上手使用TAPD，對于不了解敏捷開發的開發人員也可以通過產品幫助中心學習敏捷開發思想，進而理解產品的功能與流程，因此雖然TAPD功能與頁面結構相對復雜，但是基于對敏捷開發的認識用戶還是能從產品復雜的功能界面中摸索出一條操作路徑，實現自己的目標。這就是產品擁有內核思想以后能夠帶來的直觀好處，將原本零散的功能點通過特定邏輯鏈接成操作流程，幫助用戶更好地理解與使用產品。
相同的在我們公司自己的一個項目中我們也運用了同樣的方法，在我們公司之前研發的一款crm產品中，為了給用戶提供最佳的銷售實踐，幫助用戶更快上手使用我們的產品，我們在設計產品時尋找了硅谷藍圖團隊做了顧問咨詢，并依照硅谷藍圖的銷售轉化路徑來構建我們的產品體系，確定產品功能，梳理產品中的業務流程。并希望在以后為客戶做實施的過程中能夠將硅谷藍圖的銷售方法一起帶給用戶，讓用戶能夠更好地使用我們的產品，實現產品的最高價值，為中小企業銷售團隊賦能。
通過前面兩個案例其實我們可以感受到，當一款復雜的產品有了內在的規則與邏輯以后，用戶理解和使用我們的產品會變得更順暢，用戶不會迷失在茫茫的功能之中，通過理解規則與邏輯，用戶能夠對自己操作結果有一個大概的預期，而不是處于困惑狀態，作為設計師的我們也可以將這種規則邏輯作為我們設計的引導，讓我們的設計更為系統和有條理，讓產品不再是一堆功能的堆疊，各自為戰。
復雜是用戶的一種心理感受，用戶覺得產品復雜除了產品本身結構信息復雜之外，也是因為產品在設計上沒有貼合用戶的心理預期，用戶很難理解產品的流程與交互，所以貼近用戶心理進行設計就顯得尤為重要。這里我們需要先了解三個概念，實現模型、表現模型和心理模型，三個概念的釋義如下：
實現模型：產品是怎樣工作的
心里模型：用戶認為產品是怎樣工作的
表現模型：通過設計來讓用戶認為產品是怎樣工作的
表現模型越接近心理模型，用戶就越容易了解產品功能、容易與之交互。表現模型越接近實現模型，用戶越難理解產品，產品就越難使用。復雜產品在用戶體驗過程中的痛點在于用戶需要花費時間學習或培訓之后才能了解產品的運轉機制，很多B端產品在設計時更多的偏向于實現模型，用戶在使用產品的過程中會發現很多地方的交互和自己心理預期并不一致，使用過程中會遇到很多的阻礙，影響整體的使用體驗。對于一款復雜的產品而言，我們需要讓我們產品的表現模型更接近于用戶的心理模型，這樣用戶能夠更容易了解產品的功能，并與之交互。
大家使用電腦時有沒有遇到過類似下圖這樣的電腦報錯信息，里面是一堆的專業名詞，看得人一頭霧水。這時候我們能做的只有默默的打開百度，去了解彈窗里面講的內容究竟是什么，了解后才明白原來這樣，然后按照百度上操作步驟一通操作，僥幸解決了問題。但是當下次我們遇到相同問題時，可能還是不知道如何解決，無可避免還是需要求助百度。這個就是表現模型貼近與實現模型會帶給用戶的困擾，用戶不是專業的開發者，他們不了解也不需要了解產品背后的實現邏輯，這對用戶而言是沒有價值的，給予用戶這些信息不能對用戶起到預想的幫助作用。貼近實現模型進行設計會讓用戶與產品交互變得困難，變相的是在人為的增加產品的復雜度，與復雜共處，我們需要學會貼近用戶心理進行設計。
復雜的產品往往功能、頁面繁多，如果頁面內的視覺元素以及交互各自為戰，那么放大到整個產品就是一個災難，不僅是產品給用戶感官上不統一、整體性差，過多的交互模式也會增加用戶的學習與記憶成本，用戶在這些相視功能但是不同的視覺與交互的模塊之間容易陷入困惑，對用戶使用產品造成困擾。針對這個問題，現在越來越多的公司開始通過搭建組件庫的方式來規范自家產品內的視覺與交互，一個規范完整的組件庫的確能夠在很大程度上解決產品在視覺與交互上的一致性問題，通過模塊化解決方案，也能降低冗余的生產成本，實現產品快速開發。因此很多人也認為搭建好組件庫就能一次性的解決產品體驗一致性問題，但實際上就算一個產品有了一個自己的組件庫，依舊還會遇到體驗上統一性問題，這是為什么呢？
在原子化設計理論中，粒子是構成頁面的最小顆粒，粒子構成簡單組件，簡單組件到復雜組件，再到區塊、頁面。雖然用組件能去構建頁面，但是還會遇到頁面結構、交互不一致的問題，設計師各自使用組件去搭建并不能提升我們的效率和解決設計一致性的問題，在末端設計并沒有做到約束。因此我們在構建好組件以后還需要繼續抽取出了頁面級的組裝結構和交互模式。
這里我們拿B端產品中常見的列表頁來舉例，縱觀所有后臺列表頁面，抽取后無非就分為這么幾個區域。不同的業務可以通過基礎組件和樣式定義符合自己業務線的子模塊。比如列表頁中的篩選區，在不同的業務場景下，對篩選器的需求也各不相同，簡單的可能只需要使用標簽選擇就能夠完成篩選，復雜的可能添加很多的篩選項甚至選項之間還有且或關系，我們需要根據實際的業務場景設計適合的篩選器，但是需要注意的是一個產品中用到的篩選器形式不應太多，我們需要抽取歸納出三四種篩選器形式去覆蓋我們產品內所有的篩選場景。來保證產品內不會出現各種相識卻有各不相同的篩選器。
B端后臺產品中比較常見的還有表單，我們可以歸納出產品內可能會使用到的表單類型，然后定義出具體的框架結構與交互，在具體的設計過程中在根據實際情況選用不同的表單區塊。
一種常見的信息錄入以及信息展示表單，這種形式是我們最長用。
分布表單適用于信息錄入項以及信息展示項過多，在一個頁面內已經不能合理清晰的組織傳遞信息，或者表單內容的錄入方式或者展示方式存在較大差異，不適宜在一個頁面內進行展示時。按照布局的不同也可分為橫向步驟和縱向步驟兩種。
組合表單因其結構能夠承載更多的信息，每一個欄目都可以承載一個獨立的表單頁，有效的管理信息。
很多時候我們也會用彈窗來承載表單，好處是交互銜接流暢，不用跳頁。
將產品中類似的區塊做成最佳的交互模式范例，能夠最大的程度的規范我們產品中的交互，這樣才能真正的實現產品體驗上的統一，化繁為簡，讓復雜的產品也能夠調理清晰，上手簡單容易。在面對復雜的系統級軟件時，在統一組件樣式的基礎上還應該統一產品內的交互模式。
復雜的產品頁面內信息往往都特別繁多，如果不做好信息歸納，用戶將很難把握住重點內容，信息獲取效率低下，十分影響用戶的使用體驗，所以信息的強弱的整理十分重要，那么什么樣的信息是對用戶而言重要的信息呢？
信息設計大師愛德華·塔夫特認為優秀的視覺設計應該是“將清晰的思考視覺化”，他還認為只有充分理解觀看者的“認知任務”及一些設計原則才能設計出優秀的產品。
如何找到對用戶真正重要的信息需要借助到產品設計中一個十分重要的工具--用戶模型，通過調研的來得用戶模型是對于我們產品客戶的抽象歸納，通過用戶模型我們可以確定哪些功能對于用戶而言是高價值的重要內容該重點突出，哪些內容相對不是那么重要可以弱化處理，通過對于頁面內容強弱的劃分，用戶能夠更快的獲取到對自己有用的內容，盡管頁面仍舊復雜，但是信息劃分合理、層級清晰、表意明確的頁面人就能夠帶給用戶良好的用戶體驗，幫助用戶高效的處理任務。
復雜是產品的本來特性，本身不含褒貶，但是如果復雜不加以控制，讓其發展為困惑與混亂，這對于一款產品而言絕對不是一件好事情，這樣即使產品功能上很優秀，用戶也無法長期忍受，一旦市場上出現替代產品，那么忍受已久的用戶也將拋棄產品轉向體驗更好的新產品。
曾經我也是一個極簡主義的追捧者，但是經歷過越來越多的設計項目，我開始發現某些產品復雜性是必需的，將產品做得簡單并不是其核心訴求。真正需要處理的問題也不是復雜，而是混淆的狀態和由此產生的無條理性。解決的方法不是簡單的去除幾個界面元素，讓其在視覺界面上變得簡潔干凈，而是要讓產品擁有內在規則、一致且能夠被理解。
文章來源：站酷 作者：Yone楊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
著：[英] 賈爾斯·科爾伯恩
譯：李松峰
人民郵電出版社
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. 梳理知識框架，記錄閱讀收獲、心得，本身就是一個加深理解、溫故內化的過程。
2. 摘錄重要知識，存儲在數字媒體上，方便隨時按需查閱。
3. 鍛煉思維和表達。
百利無一害，來吧，走起。
本書講述了一個產品價值觀和四個策略。
一個產品價值觀：作者崇尚簡單體驗的產品設計。簡單的產品更容易制造 (成本也更低)，也更容易使用 (市場也更廣)
① 這里的產品指數字產品或實體產品。
② 本書主要考慮大多數用戶 (主流用戶) 的體驗。
四個策略：刪除、組織、隱藏、轉移。本書的核心內容就是講述如何通過這四個策略（我理解就是方法論）設計大多數用戶喜愛的簡單體驗。這幾個策略適用于簡化功能和內容。
1. 知識原理很多都是相通的
① 本書的刪除策略與奧卡姆剃刀
奧卡姆剃刀：“如無必要，勿增實體”。講的也是簡單性原則。
他說：“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情。” 講得真好，不能贊同更多。
② 組織策略與親密性原則
親密性原則：彼此相關的項應當靠近，歸組在一起，成為一個視覺單元?！秾懡o大家看的設計書》Robin Williams，非常棒 推薦
組織策略與親密性原則講的都是正確組織信息的方法論。
③ 簡單與別讓我思考
別讓我思考 (可用性最重要的原則)：你的目標應該是讓每一個頁面或屏幕都不言而喻，這樣的話，普通用戶只要看它一眼就知道是什么內容，知道怎么使用它。即他們不需要思考就能明白?？捎眯允顷P于人，關于人們如何理解和使用產品的，它和技術沒有關系。技術日新月異，人本身的變化卻非常緩慢?！饵c石成金》史蒂夫·克魯格，很棒 推薦+1
2. 凡事過猶不及。
書中有一個案例驚嘆不已，講的是東京蘋果專賣店，沒有按鈕的電梯 (電梯內和外都沒有操控按鈕)，自動在每一樓層停靠、自動開和關門 (乘客干預不了)。置用戶于完全失控的環境中（要是深夜一個人乘坐，估計得嚇不活了）。難以置信，誰能想到以優質體驗設計征服世界的鼎鼎大名的蘋果，居然還有這種反人類的逆天設計！
3. 這本書的閱讀體驗跟《寫給大家看的設計書》極相似
① 簡單、輕松、通俗易懂兩者都為讀者創造了簡單、輕松的閱讀體驗。把知識融入情境、故事，以圖示意，短小的一篇一篇像在和你講故事，娓娓道來、言之有物、簡明扼要、通俗易懂。
② 知識框架扁平、濃縮為極簡，過目難忘《簡約至上》把全書核心凝煉為：刪除、組織、隱藏、轉移?！秾懡o大家看的設計書》將復雜的設計原理凝煉為：親密性、對齊、對比、重復。合上書，就能回憶起來，太簡單又太深刻，真的想忘記都難。
4. 好書亦師亦友
“雖然這世界上不能改變的東西很多，但眼前的設計還是有很多簡化的途徑可循。”、“你能做到”... 像不像一個智慧溫暖又真誠善良的朋友在不斷的給你信心和鼓舞？
(小聲說，我也喜歡)
以我淺薄有限的認知來看，人們喜歡簡單不僅因為簡單順應人性，還因為簡單帶來高效：
① 簡單順應人性簡單意味著不用思考，以現有的認知水平一看就明白，在人的舒適區，啟用的是人低耗能自動模式，是本能來的。而復雜的事物，如思考、學習、鍛煉、做一件難的事，都是更多的消耗人的腦力、體力、意志力、自控力、耐心、時間，都是調用人的高耗能模式，所以復雜這個東西本質上是反人性的。
② 簡單帶來高效不管是工具任務型產品還是內容型產品，用戶使用產品的邏輯路線是一樣的，都是經由認知 -> 決策 -> 行動 -> 達成目標；如果簡單就會：認知快 -> 決策快 -> 行動快 -> 高效達成目標；所以，簡單是大多數用戶的剛需了。
1. 越復雜或少用的知識，忘記就越快。
2. 簡單源自專注。明確自己的目標，更容易迷途知返。
3. 解決問題前，先搞清楚狀況。糾結于某個設計時，退一步想想：“用戶在這里真正想干的是什么？” 聚焦用戶。
4. 共識：把所有利益相關方的目標都統一到最終用戶身上，通過共識構建愿景。然后，阻力和爭斗就會減少。
怎么讓利益相關方聽自己的？答案是必須理解他們的想法。
先從傾聽他們和理解什么對他們最重要開始。把匯總的意見恰當地反饋給他們，他們會知道你已經明白了。在感覺被人傾聽后，他們才會樂意敞開心扉。
“我也希望看到最適合用戶的設計，我們一塊看幾個，看看是否可行。”
不要嘗試說服別人，聽他們說，讓他們自己判斷，讓他們自己承認而不是回避問題，然后再去尋找解決他們問題的方案。
5. 產品使用環境是觀察用戶的最佳地點，必須使軟件設計符合環境需求。你的用戶體驗應該簡單到不受這些干擾的影響，能夠在人們被打斷的間隙生存。
6. 為主流用戶 (大多數用戶) 而設計，忽略專家型用戶。
7. 體現品牌特征① 實用性——這個品牌能做什么對我有幫助的事情？(如讓飛行更簡單)② 這個品牌給了我什么感覺？(如充滿活力，好玩)③ 這個品牌崇尚什么？
8. 簡單就是讓用戶感到自己在掌控一切。你的設計不能跟這種掌控的感覺有什么抵觸，而是應該放大這種感覺。
9. 設計之所以會變復雜，通常是因為某些不重要的步驟擠占了核心特性。關注用戶行為 (而不是你的設計)，并且從用戶的視角把它描述出來。
10. 在研究某個問題的時候，你需要把它轉換成一種認識。故事是描述認識的一種好方式。與一大堆需求描述相比，故事更容易讓讀者明白什么重要和為什么重要。故事應該用三言兩語把核心體驗表達出來。
11. 極端的可用性
① 任何人都可以使用
② 毫不費力的使用
③ 瞬間響應
④ 一目了然
⑤ 始終工作
⑥ 不出錯
⑦ 恰好夠用的信息
⑧ 在混亂無序的環境中工作
爭取你不可能達成的目標有一個重要的好處：保持正確的方向。
12. 堅持不懈是達成簡單最重要的一步。
“乍一看到某個問題，你會覺得很簡單，其實你并沒有理解其復雜性。當你把問題搞清楚之后，又會發現真的很復雜，于是你就拿出一套復雜的方案來。實際上，你的工作只做了一半，大多數人也都會到此為止……但是，真正偉大的人還會繼續向前，直至找到問題的關鍵和深層次原因，然后再拿出一個優雅的、堪稱完美的有效方案?！?——史蒂夫·喬布斯
13. 簡化意味著改變，而改變始終意味著痛苦。多數人會不惜代價避免痛苦。收集需要改變的證據很重要。
14. 挑出正確的點子，確保能夠得到很好的執行。
刪除：通過刪除來簡化設計，刪除所有不必要的，直到減無可減。
15. 刪除雜亂的特性可以讓設計師專注于把有限的重要問題解決好，而且也有助于用戶心無旁騖地完成自己的目標。
16. 不要等著別人不分青紅皂白地、無情地刪除最有意思的功能。要總攬全局，保證只交付那些對用戶體驗而言真正有價值的功能和內容。
17. 體驗的核心是最能打動用戶的東西。找到它，刪什么留什么就一目了然了。能夠消除用戶挫折感的功能同樣也會受到歡迎。
18. 刪除殘缺的功能、導致出錯的功能、不必要的功能
19. 如果一個小變化導致了復雜的流程，就應該退一步去尋找更好的解決方案。
20. 錯誤：即使非常小的錯誤也會讓用戶煩惱。消除錯誤是簡化用戶體驗的重要途徑。無論顯示什么錯誤信息，好像都沒有那么友好、親切和簡單。
21. 不要以功能的多寡來認定產品的價值，而應該看產品能否滿足用戶最高優先級的目標。
22. 刪除視覺干擾因素，讓用戶注意力保持集中。界面中的各種小細節會增加用戶的負擔、打斷用戶的思維，會像公路上的減速帶或坑坑洼洼一樣降低用戶的效率。
23. 太多選擇容易讓人反感。
24. 清除減速帶：選擇聰明的默認值可以減少用戶的選擇。
25. 刪除視覺混亂和噪音，意味著人們必須處理的信息變少了，能夠把注意力集中到真正重要的內容上。
26. 刪減文字、精簡句子：重要的內容“水落石出”，消除了分析滿屏內容的麻煩，用戶更有掌控感，把文字變得簡潔、清晰、有說服力。
27. 簡化對話，長話短說。一次交互就是用戶與設備之間的一次對話。
28. 砍掉時間?？车艄δ芎蛢热菘梢怨澥r間，因為決定少了、按鈕少了、思考少了、閱讀少了。要在對用戶真正重要的事情上節省他們的腦力。
組織：通過組織來簡化設計
29. 通過組織的方式簡化設計，要點在于只強調一兩個最重要的主題。
信息布局、分類、排序、搜索、使用顏色分層 (地鐵線路圖)，找到組織信息的正確方式，可以極大的簡化用戶體驗。要想知道設計是否成功，可以瞇起眼睛來觀察屏幕，看是否能區分出不同的層。
隱藏：隱藏不重要的，避免分散用戶注意力
30. 無論隱藏什么功能，都意味著你在用戶和功能之間設置了一道障礙。這個障礙可能是遙控器上的塑料倉門，也可能是網站上一連串的點擊。為了避免給用戶造成不必要的麻煩，必須仔細權衡要隱藏哪些功能。
31. 不常用但不能少，如個性化設置不會經常改變，因此非常適合隱藏。
32. 隱藏所有需要隱藏的功能，在你需要時出現在合適的位置上。
33. 細微的線索足以提示隱藏的功能。
轉移
34. 轉移合適的功能到其他設備上、系統組件中，向用戶轉移。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
“先有思想，后有設計”設計師自身應該逐步建立一套自己的設計體系，需要對設計方法論有專業的認識和理解。一直想收集整理日常說到的各類設計理論知識，也希望通過整理和總結能有新的收獲，加深記憶。
格式塔心理學是視覺排版及設計中應用比較廣泛，主要指人的眼腦作用是一個不斷組織、簡化、統一的過程，正是通過這一過程，才產生出易于理解、協調的整體。格式塔的理論核心是整體決定部分的性質，部分依從于整體，人腦知覺到的東西要大于眼睛見到的東西。
古登堡法則是又稱對角線平衡法則，由14世紀西方活字印刷術的發明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個象限：
1.第一視覺區(Primary Optical Area)：左上方，讀者首先注意到的地方。
2.最終視覺區(Final Optical Area)：右下方，視覺流程的終點。
3.強閑置區(Strong Follow Area)：右上方，較少被注意到。
4.弱閑置區(Weak Follow Area)：左下方，最少被注意到。
通過古登堡法則我們知道用戶的視覺中心往往在頁面的左上方，而結束瀏覽時視線往往落在右下角，所以合理利用這個法則可以幫助用戶更好地獲取內容并采取行動。自上而下的界面設計，自左向右的界面設計，頁面中通常將操作按鈕放在右下角。
菲茲定律：從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小（圖中的 D與 W），用數學公式表達為時間 T = a + b log2(D/W+1)。意味著小而近的目標用戶不需要花費太大的精力就能輕易觸及或者關注，相反小而遠的目標則需要花費用戶更多的時間和注意力，菲茲定律闡述的是效率相關的問題
思考結論：1.必要時讓按鈕更大，2.讓相關信息更近
?？硕?span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#080808;">：一個人面臨的選擇(n)越多，所需要作出決定(t)就越長。用數學公式表達為反應時間T=a+b log2（n）。在人機交互界面中選項越多，意味著用戶作出決定的時間越長。如比起2個菜單，每個菜單有5項，用戶會更快從有10項的1個菜單中做出選擇。席克定律在產品應用中主要用于通過合理的選項及功能規劃提高用戶的決策及完成任務效率
應用場景：
1.分類編組，提高決策效率
2.過濾選項，隱藏/刪除低頻率功能選項
3.分布執行，提高流程轉化率
米勒定律：頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。米勒定律在產品應用中主要在于合理的信息布局和信息處理可以提高用戶對信息的獲取效率和記憶難度。
應用場景：
1.控制數量，減少用戶選擇
2.信息分段，輔助用戶記憶
3.流程分步，優化用戶操作
4.信息排序，引導用戶記憶
臨近性原則：當對象離得太近的時候，意識會認為它們是相關的。在交互設計中表現為一個提交按鈕會緊挨著一個文本框，用戶會理解為按鈕于文本框有關聯性。換句話說當相互靠近的功能塊是不相關的話，就說明交互設計可能是有問題的。
泰斯勒定律（復雜守恒定律):該定律認為每一個過程都有其固有的復雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
應用場景：
1.合理縮短用戶使用路徑，在設計中可有適度的簡化縮短操作流程但是到一定的程度可能會影響整體的功能和價值。
2.將固有的復雜性從一個地方轉移到另一個地方，例如搜索中歷史記錄，信息商品的收藏等功能，實際都利用了此定律。
3.將功能進行拆分，一次性無法降低復雜度的功能可以進行拆分。
奧卡姆剃刀原理：奧卡姆剃刀原理只承認確實存在的東西，認為那些空洞的普遍性的東西都是沒有用的，應該剔除掉，概括起來就是“如非必要，勿增實體”實際上無論實體、視覺或認知上，多余的負擔都會削弱表現效能，去除解決方案的雜質，讓最后的設計會更嚴謹、更純粹。在設計蘋果產品的時候，喬布斯一直堅持認為：為了實現一個功能而造出一堆復雜的東西，沒用，簡單的才最好。Google專注于搜索，主頁上也只有搜索，其他搜索引擎就沒有做的這么徹底，這也是為什么Google用戶量最多的原因之一。
防錯原則：最早應用于汽車制造領域中，工程師新鄉重夫（豐田精益生產莊家）于上世紀60年代，創造了這個理念。防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽，例如硬件設計上的 USB 插槽，醬油瓶口。防錯原則有四項基本原則包括，輕松原則，簡單原則，安全原則和自動原則。
狀態可見原則：保持界面的狀態可見，變化可見，內容可見。讓用戶知道發生了什么，在適當的時間內做出適當的反饋。 比如用戶在網頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應即時給出反饋。
貼近場景原則：用用戶的語言，用詞，短語和用戶熟悉的概念，而不是系統術語。遵循現實世界的慣例來呈現信息，功能操作符合用戶的使用場景。進一步來說貼近場景，也是要求在設計的時候要考慮，產品面對的人群和人群所在的環境，比如，同一款產品在不同地區呈現形式需要考慮文化差異。不同屬性的產品例如兒童教育和辦公產品，需考慮使用人群的特性。
可控原則：操作應該是可逆的，可以支持“撤銷”和“重試”，以此來離開“非預期” 的狀態，簡單來說就是不要讓用戶走進死胡同，提供出口和退路。例如微信發送消息可以撤回可重新編輯等。很多web端的表單，文章發布等都支持自動保存，很大程度上避免錯誤或者意外操作。
一致性原則：遵循平臺的慣例。也就是，同一用語、功能、操作保持一致。
防錯原則：核心觀點是如何有效的在用戶出錯之前就盡量避免錯誤發生，在互聯網產品中，比起回退修改錯誤信息或者操作更好的是，用設計防止這類問題發生。很多轉賬功能中輸入數字后會顯示千萬等說明文字，用戶輸入卡號后會自動識別關聯銀行，避免用戶出錯。
1.限制操作范圍和條件。例如很多手機登錄等交互中默認設置手機號為11位避免了用戶出錯，提高了易用性。
2.對有風險的操作進行二次確認。
易取原則：盡量減少用戶對操作目標的記憶負荷，動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。 很多產品搜索功能的關鍵詞聯想搜索，即使用戶不能完全記住關鍵詞也能輕松搜索。
1.讓用戶選擇而不是輸入，選擇和輸入的操作成本相差巨大，產品應給給用戶提供選項，讓用戶可以直接選擇，而不是自己輸入，比如填寫收貨地址。
2.自動讀取、記錄信息、減少操作路徑。在用戶使用產品的過程中，會產生一些需要記憶的內容、或者操作路徑，這個時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里
高效靈活原則：為大多數用戶設計，兼容少部分特殊用戶。允許用戶進行頻繁的操作，更加便捷靈活的代碼和反饋。各大產品中常使用的搜索功能，提供歷史搜索功能。微信朋友圈發布中選擇可見/不可見人群時，提供上次選人記錄。
1.提供快捷入口，例如支付寶的首頁可以自主配置常用的小程序，微信下拉對話頁面可以快捷進入歷史小程序
2.方便用戶重復操作，例如外賣平臺中自動定位常用地址，訂單中可以再來重復的一單等
3.預知用戶操作縮短操作路徑，例如截圖后打開微信對話框會關聯截圖發送
簡約原則：審美和簡約設計，頁面不應該包含無關緊要的信息，頁面的每個額外信息都會降低主要內容的相對可見性。
容錯原則：錯誤信息應該用語言表達（不要用代碼），較準確地反應問題所在，并且提出一個建設性的解決方案。比如404。
人性化幫助原則：有必要提供幫助和文檔。任何信息應容易去搜索，專注于用戶的任務，列出具體的步驟來進行。幫助性提示最好的方式是：1、一次性提示；2、常駐提示；3；幫助文檔。
通過這些方法的總結歸納，我發現其實很多原則原理我們在平時的設計中有意無意的總會用到，在實際工作中設計很大程度上是做選擇，哪一種是對產品對用戶最優的方案，有的設計師可以通過自己的經驗作出選擇，沒有經驗的可能需要多多理解這些原則原理，交互設計之父阿蘭·庫珀說過“除非有更好的選擇，否則就遵從標準”只有反復的遵循使用標準才能建立自己的一套設計方法論，讓工作更加得心應手。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
來源：站酷
作者：有魚MUMU
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
“少即是多”是經常掛在嘴邊的話題，在設計過程中，設計師們都會想盡一切辦法去簡化交互流程、組件元素及各種設計屬性，讓用戶使用起來更簡單。當產品簡化到一定程度，就必須要面對其不可簡化的復雜性。
諾曼曾說過 “復雜是世界的一部分，但它不應該令人困惑 ”，如果復雜性是合理的，我們應該學會如何去管理復雜，考慮好復雜的問題在流向用戶后以何種方式處理，篩選控件就是用戶自行處理復雜信息的方式之一，只要是符合用戶行為做出的設計，將應有的復雜以篩選的形式呈現給用戶，讓其自行決定，用戶反而會樂意接受。
篩選控件的使用頻率非常高，本文根據筆者對各類篩選控件的拆解及自身經驗進行分總結，整理了在移動端中常用篩選控件的類型、使用場景以及設計思路，幫助大家在設計中更好的選擇適合自己產品的篩選控件。
一、現實生活中的篩選
二、篩選功能的重要性
三、常見的篩選類樣式
四、篩選的幾個維度
五、篩選功能設計準則
六、總結
在日常生活中，我們天天都在跟篩選打交道。設想一下，當你走進超市，在沒有任何分類指示的情況下，看到琳瑯滿目的商品是否會不知所措，答案是肯定的，且不論超市規模大小、商品的多少，相信沒有任何一個人愿意在不清楚的情況下花時間去找一個很可能不存在的商品，即便這點時間會很短。
道理還沒說完，大家都感覺自己很懂，可依然逃脫不了如今在各種形形色色的應用中找不到自己需要的功能而苦惱，那么這些應用又是誰設計的呢？答案就是「大多數人」。
換言之，如果我們能通過標識牌、平面圖指引（模糊查找），詢問服務員、記憶指引（精準查找），就容易很多，這些指引路徑就完全充當了篩選功能，至于通過什么方式，只能根據人們自身或現場條件自行選擇，能滿足自己的需求即可。在功能繁多、交互流程復雜的互聯網產品中也是如此。
在我們設計篩選控件之前，需要清楚了解什么是篩選，東施效顰不是什么明智之舉。篩選，即用戶根據自身需求、通過一個或多個特定條件，在已有的內容中快速找到滿足自己當前條件的信息，單獨呈現的同時、并將未滿足條件的信息暫時作隱藏處理，以便用戶完成自己的目標需求。
篩選也可以稱之為過濾器，是搜索框架的一部分。這里需要說明一點，篩選不同于搜索，它是系統結合用戶提出的條件，對內容進行規則性的查找，準確的說，用戶屬于被動，篩選出的結果在產品側「精準」、用戶側「模糊」；而搜索則是用戶通過明確的目標主動進行精準查找，要么直接找到自己想要的結果、要么對結果不滿意，搜索出的結果在產品側「模糊」、用戶側需要「精準」。說直接點就是，搜索直接查找出結果、篩選只是縮小查找范圍（并非絕對，也可以對搜索結果縮小范圍）。
在電商應用中，如果有目標的用戶更多使用的是搜索，那么沒有目標的用戶更多使用的則是系統推薦或商品分類，不管是哪種類型的用戶，前面雖然已經進行過一次范圍縮減，但下一步還是逃不掉要面對的海量商品，這時，不給用戶提供選擇上的便利，用戶很可能因瀏覽商品耗時過長、選擇性困難等原因扭頭就走，即便離轉化僅一步之遙，也無法避免用戶流失的問題。
增加篩選功能就能很好解決這個困局，用戶通過篩選、設置接近于目標需求的條件，縮短查找路徑，就能從海量的商品信息中快速找到符合條件的內容，大大降低了用戶的查找成本，節省了很多查找時間，用戶體驗得到很大程度的提升，由此可見，為什么要使用篩選，不言而喻。
1）系統定義篩選需求
方向性的篩選：用戶通過系統提供的多種類型進行頻道切換，還會存在多少子級，可定義為一級篩選。例如訂單列表（待支付/待發貨/待收貨/待評價），優惠券（未使用/已使用/已過期）等，用戶從已有的類型列表中選擇自己所需。
2）用戶自定義篩選需求
精細化篩選：當系統已提供方向性的篩選，用戶依然可從分類篩選出的結果中進一步細化。例如針對單個類型的商品列表自定義價格區間、發貨地、品牌...等，也可稱之為二級次篩選，相比一級篩選，其篩選的結果會更精細化，也更接近于用戶的真實需求。
（PS：系統定義篩選條件后，配合用戶自定義二次篩選條件以及排序功能，則更容易滿足用戶需求）
Tab式篩選條件大部分在操作前、操作中、操作后基本都會一直顯示，有橫向Tab和縱向Tab兩種，如新聞、視頻類型的應用大多使用橫向Tab，通過將不同的內容以大的方向、區塊進行分類，便于用戶隨時切換、篩選出不同的內容；縱向Tab更多則是在電商類應用中出現，且會存在多個子級，例如我們在京東購買「鼠標」，則需要在tab分類中依次找到「電腦辦公>外設產品>鼠標」進行篩選。
Tab類型主要以大的維度進行篩選，所篩選出的結果可能模糊且信息量極大，如果想要結果更加精準，則需配備其他類型的控件進行二次篩選。
操作中以蒙層的方式彈出，其他時候均為隱藏狀態。彈窗類型的篩選最大的優點是占用空間小，僅需一個入口，能在有限的彈出空間中從多個維度展示篩選條件，用戶選中或自定義對應的篩選項，即可快速篩選出自己想要的信息。
介于Tab式與彈窗式之間，篩選條件初始為隱藏狀態并提供一個入口。點擊后展開，期間不影響當前頁面的任何其他操作且一直處于展示狀態，需經過再次點擊才會將篩選條件隱藏。
基于自定義篩選條件過多，為滿足用戶個性化需求，點擊后會跳轉到新頁面操作多個條件進行篩選。相比前面提到的Tab、彈窗更為復雜，對篩選的要求較高。
高級篩選適合用在顆粒度很細的場景，為的是避開其他視覺元素的干擾，讓用戶更專注于當前頁面較為復雜的篩選條件，降低因受其他因素影響而出錯的情況。例如：在選擇汽車時，需要對服務、價格、級別、排量...等各種情況作出非常細致的選擇，這時用高級篩選就再合適不過。
篩選、排序組合方式算是商品列表中的標配了，尤其在空間資源有限的移動端設備中，能最大化的將多個控制條件一次性展示給用戶，在篩選出結果后再使用排序功能，便于更快找到想要的商品。例如美團、餓了么將篩選與排序控件形成組合，極大的提高了用戶篩選的效率。
單維度的篩選不管是設計還是操作都相對簡單，無需操作確定/下一步按鈕，觸發篩選條件后會就會更新信息列表，大家最熟悉的訂單系統（待支付、待發貨、待收貨...）即是單維度篩選。
另外，單維度具備短、明、快的特點，為方便用戶識別，單個標簽一般不超過5個文字，且語義明確，用戶不用任何思考就能快速理解。
當產品中的屬性過多，使用單維度篩選不僅會降低篩選結果的精準度，還可能會導致用戶因反復/重復無用的操作而產生挫敗感，已無法滿足用戶的需求。這時，需采用多維度篩選幫助用戶縮小查找范圍，讓其快速找到符合自己需求的內容。
多維度篩選條件一般以按鈕（單選/多選）、輸入框為主，有些還會以滑塊來控制數據范圍。設定好篩選條件需通過重置、確認操作按鈕，用來清空篩選條件或進入下一步。在移動端，因屏幕空間有限，一級篩選數量最好不要超過9個，如果太多，建議進行整合或并入二級篩選。
在多級篩選控件中，可以把當前篩選條件的上一級看成是篩選分類菜單，每個等級中可包含一個或多個單維度/多維度的篩選條件，移動端最多不超過3個等級。
從表面看，多級篩選與多維度篩選其本質是一樣的，但多級篩選會存在下一級或再下一級，而多維度會將所有篩選條件平鋪在空間中。當單維度、多維度篩選還是無法滿足用戶需求，多等級就能作為最好的延伸。
在設計篩選之前，需要思考用戶為什么要使用篩選、在什么樣的場景下使用篩選、以及如何滿足用戶的心理預期等，有了清晰的用戶需求，設計出來的篩選才能更好的幫助用戶滿足其需求。
以「餓了么」用戶點餐為例，使用點餐服務的用戶類型雖然很多，不過主力還是來自于辦公室白領、宅男/女這兩大用戶群體，有目標的用戶會從搜索、收藏、訂單記錄等入口直接去購買，但絕大多數用戶因長期點外賣的原因，“吃什么”就成了最大的問題，這時如果用戶還要“吃”，就必須得使用篩選功能，從Tab分類（模糊）到彈窗式篩選（精準）再配合排序功能滿足自己的點餐需求，得出結論：
1）一群不知道“吃什么”的白領、宅男/女用戶；
2）需要使用篩選功能解決自己“吃什么”的問題；
3）問題很快得到解決后，對結果及使用體驗非常滿意。
上面的案例可以看出，用戶想要在海量的信息中找到自身所需，從表面上看，最直接、真實的需求就是找到滿意的商品去下單。站在產品的角度并非如此，最應該解決的應該是效率的問題，這才是篩選的終極目標，不管用戶花多長時間，筆者相信都能找到想要的，但所花費的時間成本越少，滿意度就會越高，其產品的可信度、使用粘性、用戶體驗也隨之提升。
篩選并非千篇一律，不要一上場就來一波大眾化的篩選條件，很多APP首頁設計就是最好的例子，什么都不考慮，直接導航欄+輪播圖+金剛區+內容推薦...傳統的一套流程走下來，結果可想而知。
設計篩選功能時，不同類型的產品需要根據其產品定位、用戶目標以及使用場景來定義篩選條件，用戶需求是用來設定篩選條件范圍的決定因素。例如：購物類產品需要結合商品的銷量、評價、價格及知名度等，而新聞類產品側重于用戶偏好、點贊量、熱度值來提供篩選，方便用戶快速找到感興趣的內容。
在滿足上述兩個條件后也不能將篩選項一股腦的挨個排出來，即便是在同一個頁面內，也需要結合當前內容的屬性對篩選條件進行優先級排序，將用戶高頻使用的條件按先后順序依次排列，不重要的也可將其隱藏于某個入口。
以淘寶為例，在「手機」商品列表，篩選條件中首先看到的是品牌，其次是內存、容量...，我相信很少人不在乎手機品牌吧；而在「鋼釘」列表中，依次是價格排序、銷量...，品牌條件隱藏在了高級篩選中，試問，如果是你購買釘子這種實用性的商品，是在乎價格、還是品牌呢？
篩選功能旨在滿足用戶查找需求，通過縮短用戶選擇商品的范圍，節約查找時間，快速將符合條件的信息呈現出來，并讓用戶在這一過程中產生愉悅的使用體驗，以發揮產品的最大價值，從而增強用戶的使用粘性。
至于在設計中該使用何種篩選控件則取決于用戶需求和使用場景，設定符合需求的篩選維度及條件，且根據內容屬性做靈活變動即可，切記篩選的核心需求是通過簡單易用的方式來幫助用戶提高操作效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
整個報告分兩個部分，
一部分是調研概述，主要描述調研是如何進行的，包含：用戶方法闡述，調研對象說明，用戶畫像等，簡單清晰的告訴別人你數據是如何獲取的，增加后期問題及數據闡述的科學性。（還有一部分，就是關于調研涉及人員，可以在合適的時機帶一下是UED全員協作完成的整個過程的。）
另一部分是調研結論，我的描述思路是：總-分-總，先描述總結論，讓觀看報告的人對整體結論有個初步了解，然后詳細描述各模塊分結論，最后提出各模塊共性問題。
結論部分是整個報告的重點，所以前面的概述就簡單介紹清楚就好了，不需要占太多篇幅。
調研流程，確定標準，是匯報，也是邀功，調研本身就是個繁瑣的過程，我們把過程直觀的呈現出來，讓老板知道我們整個調研過程，前前后后做了哪些準備。付出了哪些努力，體現工作量的同時，也能體現我們的專業性，但是不是記流水賬，得有總結。
我把整個路程大體分了3個部分，第一個部分是調研前的準備，第二個部分是調研，第三個部分結果闡述。結果匯報，后期工作計劃，匯報很重要，調研做得再好，你的結果無法呈現，問題就沒辦法結論，那就只會停留在發現結論。
評估緯度是為了闡述我們從哪些緯度去收集答案的，想要驗證什么問題。
由于大部分人對調研都只是停留在問卷調查的層面，所以對樣本量的選擇有不理解，可用性測試主要是為了觀察用戶操作路徑及反饋，所以樣本量不需要太大，這個可以簡單的解釋下是如何挑選用戶的。
數據整理也是匯報的一部分，一方面，材料佐證我們做過的努力和準備，另一方面，數據存檔。
我們整個調研采用了錄音與錄音相結合，錄音是為了便于后期多人協作幫忙整理問題，錄屏是記錄用戶操作路徑，收集用戶使用過程中的卡頓，去挖掘卡頓原因，這是是我們做可用性測試的主要目的，這也是跟問卷調研最主要的差異。
在寫報告的過程中，我一直在想關于整體滿意度的結論，是放在第一部分還是第二部分，但是鑒于第二部分主要描述問題，所以思慮再三，還是把他放到了第一部分。
我們拿到各模塊的數據后，要怎么用著很關鍵，單個零散的數據是體現不出問題的，只有對比著看才能看出問題。
通過數據對比我們明顯能發現，付費用戶對產品的整體要求要比增值服務的要求高得多，畢竟不要錢的，好不好用無所謂，好用我就用，不要用我就不用。但是如果是用戶花錢了的，那他就需要考慮，我獲取到的服務和花的錢是否成正比，這也就間接確定了我們后面問題處理的優先級。
這里建議做個中場頁。
前面說過，問題描述采用的總-分-總的節奏，所以最開始描述了一下我們收集到的所有問題的概述，包含，總共多少個問題，已經分類類型的分類占比。
這里分享一個問題整理的表格，表格跟PPT的作用不一樣，PPT是為了匯報成果，獲取支持，表格是為了后續跟進落地，解決問題。
當然，先把問題整理出來也是為了更好的輸出PPT。
共享文檔可以讓更多人清晰的看到問題，因為匯報的效果比較好，老板給了明確支持，所以匯報后我們將表格發給了各個產品，與設計師配合，認領問題，給出優先級和排期計劃，整個過程推進的很順利。
分結論部分，主要通過用戶體驗地圖去描述用戶路徑，直觀闡述用戶使用過程中的情緒和痛點，右邊整理出來了需要重點關注的一些點。
用戶體驗地圖主要描述的是用戶發現，不一定是問題，屬于啟發類，可以為后期優化方案的輸出提供方向引導。
問題整理則是明確的已知問題描述。
各模塊可以根據實際情況去描述各自的問題，這里就挑了幾個典型的模塊舉例了一下，就不一一闡述了。
再來說一下，分結論講完之后，整理的共性問題。先說問題，再說涉及的模塊，體現問題的嚴重性。
到此，整個PPT就結束了，匯報完成后，老板就開始給各業務線下達任務了，就又回到了表格上，我們把之前的問題以界面緯度進行整理，跟產品確認優先級和排期計劃，并與老板就排期計劃進行了確認，然后責任到人，目前第一輪優化方案已經在陸續落地中，整個發現問題到推進落地的過程，還是比較順利的，
藍藍設計的小編 http://www.syprn.cn
