眾所周知，黑帕云這樣的產品幾乎使用了所有類型 B 端的組件。

由于我司設計資源有限，所以在擁有了組件庫、設計師定好了設計規范之后，作為產品經理就直接可以手擼設計稿了。

這是是前面一文《 B 端產品中，一個 Epic 基本功能設計的過程》 提到，作為一個長大了的產品經理，有時候沒有資源給你做交互沒有資源給你畫 UI 的，你要自己學會自給自足。

這個系列就是作為產品經理的我，在這兩年中“自給自足”做設計的的一些總結與發現。

自給自足的前提是，前面說的組件庫和設計規范，即擁有一個設計體系（Design System）。

01.什么是設計體系？

關于設計體系的定義和內容各家都不同，我找出來了以下案例供參考。

《設計體系：數字產品設計的系統化方法》

Tilio（一個寫作和筆記應用）聯合創始人，有十年 UX 設計經驗的阿拉·霍爾馬托娃在《設計體系：數字產品設計的系統化方法》一書中這么定義：

設計體系是為了實現數字產品的目的而組織起來的一套相互關聯的模式和共享實踐。
模式指的是界面中那些重復的要素：用戶流程、交互方式、按鈕、文本框、圖標、配色、排版、文案，等等。
實踐則是我們如何創建、捕獲、共享和使用這些模式，尤其是在團隊協作時做這些事情的方法。

書中將設計體系分成以下幾個部分：

設計目的、設計原則、組件庫、樣式指南，以及用于提高設計師和開發人員溝通效率的工作流程和實用工具。

整理之后，可以參考下圖：

Salesforce：Lightning Design System

Material Design

可以發現，以上設計體系無論如何定義概念，都是由設計原則+設計指南+一些基礎的元素（比如 Design Token、Material Foundation、Icons）+組件庫+其他資源工具構成。

形成這些內容的目的都是為了給自己產品建立一套保證設計質量、提升設計決策、提升溝通效率的“工具包”，從而讓產品形成自己的符合設計原則的風格。

所以設計體系是什么不重要，重要的是如何在遵循設計原則下，能夠高效做出高質量的設計。

02.設計原則（Design Principes）

一個開源設計原則和方法的網站 Design Principle 這樣定義設計原則：

Design Principles are a set of considerations that form the basis of any good product.

譯為“設計原則是構成任何好產品的一套基礎考慮因素?！?

比如 Salesforce 的設計原則是：清晰、高效、一致、美觀。并且優先級由前到后。

可以理解為 Salesforce 會追求清晰大于高效、一致、美觀，比如在產品設計中，讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。

這個準則很容易理解，可以推論出 Salesforce 在度量體驗時，將“易用性”放在了第一位，即作為一個 SaaS 產品，不能有任何讓用戶產生疑惑的地方。如果在設計上的美觀而要犧牲清晰，這就是不可取的。

03.組件庫

有了設計原則之后，下一步是需要一個組件庫。這里說的組件庫囊括了無論是原子化的顏色、字體、陰影、Icon 這些基本的元素，還包括了已經封裝好的組件，如 Button、Alert、Toast、Text Input。

關于為什么要組件化，也不多說了，之前看過一篇閱文體驗設計 YUX 的《組件化思維—— 適應并推動業務及產品變革的設計案例》寫的非常清楚。

接下來我通過 Minecraft 這個游戲來總結了組件庫。

玩過生存模擬類游戲大家都知道，在游戲中會有一些可以靠雙手勞動得來的基礎材料，比如砍樹砍來的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎材料可以合成一些簡單處理過的材料，比如把木頭合成為木板。然后可以再把半成品進一步加工，比如木棍。

在 Minecraft 這個游戲中，如果玩家要制造一個弓箭，需要一個弓和一個箭。弓和箭的合成又需要一些半成品和成品或者原材料來加工制作，如下圖：

對應在設計組件庫中可以對照查看，一個完整的頁面是可以通過一些元素、控件、組件、大組件組成：

04.適用人群

在系列開始之前，先聲明一下文章的范圍和適用人群。

關于 「B 端設計總結」這一系列，主要是我個人在已有了我們的設計規范和組件庫后，“自給自足”的情況下探索出來的一些組件使用規則，更偏向產品經理或者交互設計師來參考。

所以系列中不會寫設計規范，比如說字號、顏色、間距等等這些屬于設計規范中內容。而是基于已有的規范，總結之前我們功能中涉及到的該使用哪些組件，也可以稱之為狹義上的設計指南（Design Guidelines）或者設計模式（Design Patterns）。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

關于數據可視化項目

圖3 配色的概念圖

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

01表單概念

表單頁作為基礎通用組件，也是B端產品中臺、后臺出現比較頻繁的頁面之一。看似簡單的頁面我們在設計時卻有很多值得推敲的點，在細節處提升用戶易用度，我通過日常的學習和公司項目，在這里總結復盤了自己的經驗。

表單的適用場景比較廣泛，常見的基礎表單比如登錄注冊頁面，這一類往往信息簡單，格式比較固定，除此之外就是分步表單、高級表單。常見的場景主要用于新建信息、申請、客戶信息、商品信息等等。這類表單可能存在復雜邏輯關系和功能，有時會給我們造成困擾。以下我將以這一類表單為主要案例，一一進行拆解。

登錄注冊頁：表單內容簡單，操作簡單。

分步表單：具有流程化特點，具有先后邏輯關系，內容較多的業務類型，比如轉賬，新建商品訂單等。分步填寫可以減緩用戶壓力，起到安撫用戶情緒的作用。

高級表單：主要用于需要一次性輸入、提交 大批量數據的場景。也成為分組表單，和分布表單一樣都是為了減輕用戶填寫壓力。

02設計原則

首先我們需要明確表單頁的主要功能：表單頁承載了系統中絕大多數系統數據的錄入、增刪、修改、查看，是系統中人機交互最為頻繁和典型的數據媒介。表單頁通常需要用戶錄入大量的信息或數據，在設計時我們的核心目標應該是讓用戶明確當前表單頁面要完成什么任務，輕松理解項目含義及生效的結果，思考如何幫助用戶高效、準確、輕松的完成任務。

表單設計基本原則：明確、高效、安全

明確：用戶可以快速定位重要信息和目標選項，表單文案和組件可以準確傳達任務含義

高效：易理解易操作的交互方式，盡量減少交互步驟，減少用戶任務路徑步長，配合合理的信息布局引導，準確的選擇合適的組件傳達信息，幫助用戶高效的完成任務。

安全感：操作前有效的防錯機制，操作中有明確的狀態反饋與容錯，允許糾正錯誤。操作后及時的保存，取消機制。

03表單構成

一個完整的表單通常包括表單標題、表單標簽、表單域、提示信息、占位符、操作按鈕幾部分。

標題：起到說明表單模塊的作用，是用戶快速明確任務和定位頁面位置的重要標識。

表單標簽：內容項的名稱，說明對應填寫項含義及說明用戶該填入什么信息。

表單域：表單的核心操作區域，用戶操作最頻繁，最集中的地方，這里的可選擇組件樣式也會根據內容需要而變化，類型最為豐富多樣。需要注意的是同一類型的組件需保持一致性原則。

占位符：一般出現在用戶未填寫內容時，用于輔助提示用戶錄入線索。

提示信息：輔助提示用戶的作用。分為普通提示和錯誤提示，也是很好的防錯糾錯機制體驗。

操作按鈕：“結束”表單任務的觸發器，用于向服務器提交數據或者放棄操作。

表單標簽

表單標簽樣式常見的有4種，左對齊標簽、右對齊標簽、頂部標簽和行內標簽，不同的對齊方式各有優勢和缺點，適應在不同的場景。

右對齊標簽（冒號對齊）

優點：標簽指向明確，操作效率高，節約縱向空間

缺點：可讀性低，不適用于狹長空間或需要適配多語言的頁面

場景：普通表單填寫，多用于web端

左對齊標簽

優點：閱讀性高，節約縱向空間

缺點：不適用于狹長空間或需要多語言適配的頁面，操作效率低

場景：詳情陳列

頂部標簽

優點：視覺對齊舒適，節約橫向空間

缺點：縱向空間利用不高

場景：多用于移動端表單填寫，多語言適配頁面

行內標簽

優點：視覺對齊和空間最節約的方式

缺點：當用戶輸入狀態時，標簽消失，增加用戶記憶負擔

場景：多用于登錄注冊，修改密碼等內容極少，不需要記憶的頁面

表單域

表單域是一個表單頁面的主體部分，其內容豐富多樣，從而它可選擇形式也最多，不同的內容我們在設計的時候應該選擇最合適的組件，以及應該注意同類型內容選擇統一的組件進行設計。

定義操作框大小

在實際項目中我們往往會遇到內容長度不能統一的時候，那怎么這種情況該怎么處理呢？

以往我的處理方式是強行拉長對齊，但我們可以發現強行對齊的時候，視覺沒有得到很大優化，反而在隱喻傳達給用戶錯誤的信息，當用戶在操作1功能的時候，可能會錯誤的認為這個選項可以選擇很多，因為我們給的選擇框很長，而實際上它只能選一個。這樣就會給用戶造成不必要的理解成本。

比較好的方式處理方式是我們設計組件庫時就設定不同尺寸的操作框，來適應不同場景下不同內容需求。如果不能對齊，那就讓它參差不齊。

提示信息

提示信息在表單中起到提示、糾錯的作用。形式主要有以下幾種：行內占位符提示、操作框下方文字提示、tost提示、氣泡提示。

行內占位符：這是一種基礎應用，它即可用于占位，也可用于任務說明提示，當我們說明文字很少的時候可選擇的一種方式。需要注意的是內容務必簡潔易懂，減少閱讀成本，不要說“正確的廢話”，語句應該是完整的陳述句。

氣泡提示：當提示文字很多，主要用于對標簽的名字釋義時，氣泡彈窗是個不錯的選擇。它的優勢在于可以將更多內容折疊，不占用空間，缺點是不直觀，增加了用戶操作步驟。

Tost提示：Tost提示一般是在出發操作按鈕后給出的提示，可以是操作結果提示，也可以是內容填寫提示。

操作框下方文字提示：當提示內容很多時，還可以考慮操作框下方提示，多用于對輸入內容的輔助說明場景。應用場景包括以下幾種：

組件組合后在表現層的設計

提示信息在頁面中還是一個輔助性的角色，常規情況下的視覺層級應該是 表單內容>表單標簽>提示信息。當用戶有錯誤操作時“錯誤提示”優先級是最高的，我們一般用帶有警示性的顏色給以醒目顯示。

為了使用戶更好的辨別任務項，需要注意組件與組件、組件與說明文字之間的間距差別。

04交互方式

表單中的交互方式根據其內容選擇對應最合適的形式，內容簡單而少的可以直接在原位編輯，操作快捷，關聯性最強，所見即所得，內容容量低于5個。其次內容較多的，或者針對全局操作的可以選擇氣泡卡片，比如全局設置等。第三種是彈窗或者抽屜，兩者形式是一致的，區別在于對內容的承載量上，彈窗容量較小，內容較多的情況下抽屜式彈窗（側拉彈窗）是更好的選擇。最后，內容承載最大的就是頁面跳轉，同時這種方式與原頁面的關聯性最弱。

組件構成表單，實際項目中，我們的表單往往內容會多而復雜，設計時可以考慮在布局上優化去提升使用體驗。

常用的方式有幾種：信息分組、錨點定位、標簽頁、分步驟。

在格式塔鄰近性原則中提到，人們將彼此接近的事物、元素，傾向于認為它們是相關的。在設計中很早就運用到這種認識傾向。所以我們在信息分組時可以運用設計手法將相關信息從視覺上區分開，提升信息閱讀有效率。

分組方式：

1.簡單的內容使用標題分組或卡片分組就可以達到目的。

2.而內容很多，組別之間沒有關聯性時用標簽分組。

3.頁面內容很長需要連續下滑操作時，錨點定位就可以提供便捷的操作體驗。

4.在任務有先后邏輯關系時，分步驟是最好的選擇。

標簽分組與錨點定位在表現形式上類似，區別點在于操作后的結果。標簽分組切換標簽后頁面數據會刷新，一般沒有自動保存功能，錨點定位則是每次點擊定位頁面不刷新數據，始終保持在同一數據頁面。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

如何選擇合適的B端設計風格？

1.B端后臺分類：

根據服務對象劃分：

一類支持有C端前臺，支持前臺產品管理各種資源。第二類服務企業，提高企業工作效率和營收。

根據后臺功能：

1.監控運營：時效性強，旨在實時反饋異常情況，快速判斷下達命令，回復信息、多用于數據控制中心。

2.數據分析：數據結果的對比和分析趨勢，時效性要求并不高，了解整體和各部分數據水平，助力決策。

3.記錄管理類：主要用于人員、設備、資產等增刪改查，文本信息容量大，頻繁便捷的操作。

4.系統配置：權限配置、設備功能配置，操作為主。

2.后臺深淺兩大風格分類：

淺色：

適合文本信息多密集的表單列表類后臺，淺色更符合人眼白底黑字的閱讀習慣，瀏覽速度更快，信息獲取效率更高。

深色：

圖像信息密集的后臺適合圖片、數據可視化圖表等；深色對彩色的圖像信息襯托更強。信息獲取速度較慢，長時間可能視疲勞。

3.作者常向產品方提供的風格參考

較常見

1.經典商務風（導航深、內容淺）——專業、高效、成熟、可信賴（對照深色西裝人物形象）

      優點：市面最常見的風格，普世性高，大多數用戶可快速接受，層次分明

      缺點：視覺缺乏記憶點

 2.輕量科技感（導航淺、內容淺）——簡潔、明快、輕量、年輕（對照白襯衫打領帶男性）

      優點：視覺清新明快更年輕化更輕量，對其他文本及圖形展示包容性高，就像A4白紙一樣容器存在感弱

      缺點：純白色導航+頁面層次略曖昧。

 3.藍色科技風（導航中、內容中）

      適合：適合科技屬性強的產品界面，圖像圖形展示

      缺點：對其他色彩信息有干擾，持續性長時間觀看易視覺疲勞

 4.暗黑科技風（導航深、內容深）

      優點：對色彩表現力強

      缺點：密集文本信息獲取速度會下降，持續性長時間觀看易視覺疲勞

4.精準選擇風格時可以進一步的考慮：

1.整體行業風格

比如美妝和科技行業的整體設計基調就不太相同。

2.產品想要傳達的氣質：

理性可靠 or  簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討

3.目標用戶的群體特點及喜好。

根據目標用戶的性別、年齡層、受教育水平，審美水平考量（可能包含多種角色，選取1.2個核心角色為參考）帶入目標用戶工作場景及愛用物常用物品味，去判斷基調。

如主要用戶群：40+男性用戶，本科以上受教育水平，使用windows電腦進行專業管理操作，審美傾向明確內斂。

如主要用戶群：20-40歲，男女比例約6：4；大專；操作水平參差

4.使用場景及高頻的操作。

例如：最常使用數據分析管理，需要快速閱覽多條數據，對數據進行比對，更適合淺色風格展示表單數據。

5.判斷獨立的平臺是否為獨立開發

獨立開發的，可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。

5.如何讓后臺設計更具特色：

1.重點色的使用

“731配色比例”70%的面板色，30%的導航面板色，10%的強調色。（這里的用色比例可以根據內容具體再去調節只是大概比例）品牌色或重點色：強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。

2.圖標的優化

后臺高頻出現的圖標，值得我們花時間去統一設計打磨，調整圓角粗細疏密，符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的，好的設計在細節處也要動人。

B端工具類圖標識別性第一，美觀性第二。B端導航圖標更多是在基礎造型上打磨，不需要加花里胡哨的漸變、投影，導航圖標一般在24px-16px大小，太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色

3.空狀態小插畫

空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。

圖形化狀態語言，輔助用戶理解內容。可以將產品機械蒼白的文案設計表現的更加具有溫度，具有引導性。讓乏味的工作出現一些共情小彩蛋，有趣的插圖動畫可以緩解等待的焦慮。

4.登錄注冊頁

純色背景卡片式：簡單大方更聚焦登錄操作

插畫背景：場景化展示產品的功能及亮點，讓用戶更有心理預期

幾何圖形背景：最后和品牌圖形相關，加深用戶對產品的品牌印象。

照片背景：相關場景或產品類型，具象圖片信息更直觀

5.圓角的大小

不同大小的圓角傳達產品不同的氣質，大圓角親和、小圓角精致、中等圓角大眾中庸。

6.優化信息層級

優化信息層級，區分信息主次可以使閱讀更快，操作更快，界面更有節奏感。

這時候你就是那個考前畫重點的老師

判斷一個頁面里最重要的是那些信息或操作，強化它！并弱化輔助信息；

判斷一個模塊里那些是重要信息，強化它！

6.新人需要避免的雷點：

1.追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板，滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多，反而干擾信息獲取效率。

2.反常規用戶習慣的操作。尊重用戶習慣，不要為了個性化去嘗試改變，不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維，曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。

3.數量多，動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個反面例子后臺，在每一步操作后都出現大的場景動效鼓勵完成，如果作為一個長期使用的工作者，我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。

4.新人建議多看Antdesign和Element等成熟的組件，創新類組件樣式，最好和和開發商量是否能夠實現。

5.在確定主要風格及2-5張主要頁面后，就應該著手基礎規范（色彩字體等，不然后面越做越亂）。

6.一段時間一個審美，同一界面中的元素風格不統一。

7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長時間使用眼睛會累，產生不耐煩焦躁的負面情緒。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

背景

在 B 端設計領域中，不管是內部用戶、產品、設計師、開發，還是外部產品、設計師等，總能聽到關于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。

為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設計探索與實踐?！钙列А箤ｎ}探索主要以「探索」與「實踐」相結合的方式展開，將實踐過程中反復驗證有效的設計策略沉淀成設計手冊，同步將部分功能進行工程化，確?？梢蚤_箱即用。

探索階段-為誰在何時何地設計

用戶聲音｜不同的故事相似的訴求

面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%；認為提升屏效對體驗有提升的終端用戶占 50.6%。

外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里，其中就有 2 點提到關鍵字「效率」。

通過了解不同用戶和產品類型發現，不同的用戶在工作場景的產品使用中有著相似的特征：

案例收集｜發現問題，大膽假設

縱觀 B 端產品界面，發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例，為了逐步突破問題，選擇以數據產品中覆蓋率極高的表格為設計切入點，通過線上跨產品多端地毯式的體驗走查，發現表格三個層次的問題：

視覺、交互層在無需理解業務場景和用戶目標的情況下，都較容易發現，屬基礎問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

綜上我們提出假設：為提高屏效，可從視覺、交互、信息三個層次解決

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當前手勢到目標之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設，我們進行了進一步的桌面研究，查閱論文等書籍，尋找設計理論的驗證和指導。

競品分析｜尋找實踐證據，謹慎驗證

我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關系，因為不同字體的同字號實際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大小）而非字號或字行高，決定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數據產品中的表格為例，通過直接和間接競對的方式，分別從數據的查閱（視覺）、分析（交互）維度進行功能點和設計細節上的比對，來看看優秀產品是如何解決屏效問題。

直接競對：內部用戶口碑較好的產品 A、B外界競對：同領域的 Tableau、網易有數、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規列表（一維表格）

通過競品分析可以發現，數據分析領域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數據用戶的 Tableau、網易有數，而谷歌郵箱等工作臺常用的常規列表緊湊版本中，留白率和數據領域的電子表格不相上下。

緊湊版的使用場景也常常是面對數據量巨大的信息呈現，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大，而在實際案例實踐中，也已經將表格行高優化至 30px，克制的使用留白。

除此外，競品其他層次的設計也做了比對，總結來看整體設計做法：高密度、少屏數、少留白等。

文字陷阱：中英文字高不等于字號

舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實際字高只有 10px，而 AntD Table 的語境是中文字偏多，實際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

論文查閱｜尋找理論證據，謹慎驗證

研究表明，低密度認知負荷低，但高密度任務完成率高，用戶更喜好

參考資料：論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

對于信息，用戶需要需要閱讀（視覺），思考和理解（認知），需要點擊按鈕、操作鼠標和打字（行動），在人機工程學中，統稱為負荷。即認知（記憶）負荷、視覺負荷、動作負荷，即分別對應用戶體驗設計的三個層級，信息/視覺/交互。而負荷所花費資源從多到少依次為：認知 > 視覺 > 行動。

認知負荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因為刷短視頻時，你的輸入效率遠高于作者的輸出效率，而看一門 C4D 教學視頻時，你的輸入效率遠低于作者的輸出效率。可是，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強；否則輸出效率很低（信息質量低），你的輸入效率很高（很專業），信息于你而言都是無效的。

假設負荷總量不變的情況下，那么以上三類場景界面需要對用戶負擔分配大致如下，官網品宣類需要低認知成本，低視覺負擔，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗而帶來的趣味感，比如蘋果官網，信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息，而 B 端應用因為是專業使用，首先認知方面隨著員工的專業度提高而降低，因此可以通過提高視覺負擔，來降低行動負擔，進而減少操作用時，當然最佳情況是三個維度能整體降低負擔，讓總負擔降低，就需要更多設計巧思了。

面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中，設計師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。

實踐階段-如何設計

通過以上的探索，我們可以確定的是，B 端產品面向專業人員的工作界面設計中，提高屏效可從視覺、交互、信息三個層次進行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉，通過減少頁面跳轉、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業能力。

基于以上的總結，對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，尋找運營機會點。

如下表格經過高屏效策略優化前后對比圖，優化前相同維度下不同人群數量的對比需要視線來回跳動比對，而優化后的表格內容，更符合用戶看差異場景下分析目的數據查閱，視線鎖定相同維度，即可快速比對數值大小。

下面以視覺、交互、信息三個層次解剖設計過程背后的思考。

視覺層｜高密度-克制的留白

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉動區 30度，垂直最大眼動舒適轉動區 55度。可得出人眼最小識別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設計與研究》

如圖，縮小表格行高的同時，目標信息之間的眼動距離隨之縮短，在眼動舒適區內看到更多信息，便于信息的高效獲取。

交互層｜低跳轉-高頻信息前置

理論基礎：菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為：T=a+blog2(D/W+1)，W為其中目標的大?。籇為到目標的距離；T為移動到目標所用最短時間。參考資料：菲茲定律

表格單元格借助交互狀態，增加懸浮出現的信息組件，前置顯示目標單元格明細信息，同時通過交互出現的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標的距離，以提高整體操作效率。

信息層｜有效性-信息重組織

理論基礎：交互設計四大策略「組織、刪除、隱藏、轉移」參考資料：《簡約至上》

用戶為了對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看，根據用戶目標，將關聯性大的數據放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。

結語

設計趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節奏，時間和注意力變得尤為可貴，相對而言，基于復雜度守恒定律， B 端信息量大且高頻訪問的產品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉」詮釋的即是「空間換時間」，少一次點擊，少一次跳轉，少一份等待，就多一份時間和效率。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

什么是查詢列表？

首先我們先了解下官方Ant Design對查詢列表的定義：

簡介：

查詢列表可以查看和處理大量的條目數據，常有導航至詳情的作用，

用戶可在列表頁對條目進行篩選、搜索、對比、新增、分析、下鉆至條目完整詳情頁等操作。

設計目標：

幫助用戶更高效的查看、處理、查找條目。

設計原則：

易讀性：采用格式一致外觀，突出有利于對象識別的關鍵信息。利用富交互分層展示信息以減少認知負荷；

可尋性：列表以易于瀏覽的邏輯排序。提供合適的搜尋組件幫助用戶快速查找信息；

常規布局順序：

數據過濾 + 數據統計 + 數據列表 + 批量操作

模板頁面示例：

現在有了官方解答指導，我們就先從分析模仿開始

查詢列表有什么？

從四個維度開始一一分析：

一、數據過濾：

常規的數據過濾分為兩種類型：

1、條件篩選：

特點【結構化+有限范圍】，篩選需求和數據都是結構化的，

比如有一個用戶信息表，需要篩選出性別【男】+城市【北京】+年齡段【18-24歲】的用戶，就是因為信息屬性可以被量化和拆解處理，我們才能多條件組合篩選（且的關系）出來；

組件：選擇器（單選/多選）；

布局：上下結構（常用）、左右結構，條件多時要配合可折疊操作；

形式：區域堆疊、表頭、彈窗；

2、搜索查詢：

特點【非結構化+模糊/精準匹配】，搜索的需求是非結構化的，

比如還是用戶信息表，需要查到一個叫【寧榮榮】的信息，你就只能去手動打字去搜索，因為姓名是開放式的信息，無法被結構化處理。

組件：基礎搜索框、高級搜索框；

布局：跟隨列表，常放置其左上角或右上角；

關于具體使用，搜索不用多說，遵循系統統一性原則，選擇一處固定位置就好，

對于B段產品，業務本身比較復雜，篩選條件偏多，原則建議從使用高低頻入手，高頻顯性，低頻置后、折疊都可（后續可以出一片詳細的篩選篇分享下）

二、數據統計：

數據統計一般作為查詢列表的重要配角出現，方便用戶直觀了解到當前頁面的統計信息。

就是列表數據提煉出來統計信息，數據名稱+數值，左右、上下布局都可，

有一點強調一下，業務的數據統計要求和條件篩選聯動變化，就要放在條件篩選下方，

如果統計數值是固定值，就放置條件篩選上方。

三、數據列表：

這里的列表主要陳述標準的【表格Table】形式，

表格被公認為是展現數據最為清晰、高效的形式之一。

它常和排序、搜索、篩選、分頁等其他元素一起協同，適用于信息的收集和展示，以及操作結構化數據，

明顯優勢就是結構簡單，分隔歸納明確，使信息之間更易于對比，大大提升了用戶對信息的接收效率和理解程度。

常規內容構成：

Header：標題、篩選（高頻）、操作按鈕、表搜索、icon（列設置、刷新、全屏）

Table-Header：復選框、序號、列名稱、icon（排序、提示、列篩選、列搜索）

Table-Content：數據內容、按鈕

Footer：多選數量，分頁器

四、批量處理：

批量操作是作用于整個頁面的操作，故放置與頁面最底部，當然這個可以根據應用場景調整位置，

常見操作有【批量刪除】【批量禁用】【批量導出】。

如何設計查詢列表？

筆者也是從0開始接觸B端設計，開始查閱了相關很多設計規范體系，一頓狼吞虎咽，依葫蘆畫瓢出了設計模板

下圖就是依據Ant Design設計出的第一版查詢列表模板

經過產品和研發評審，這樣的布局表現雖說“五臟俱全”、“兼容性較好”，但是脫離了用戶實際使用場景和交互路徑，割裂感也很強，

舉個例子，你準備蓋一個房子，常規講應該有有客廳、臥室、書房、廚房和衛生間五個空間，但你現在只是單純用磚塊砌了五個房間，大小一樣，毫無順序，想必你也不會這么蓋···，我們現在從頭開始，你是不是會考慮：

1、是不是進門應該是客廳，是不是應該大一點好接待客人；

2、書房是不是應該遠離，減少噪音；

3、哪些房子需要窗戶，窗戶朝哪邊好通風，陽光充足；

4、等等···

總結一句：我們設計出的交互操作&視覺呈現，要契合用戶實際使用場景和路徑，而不是自己YY。

怎么獲取你想要的答案？調研和競品分析。

調研可以向產品、銷售、交付人員獲取你想要的信息，

競品分析可以找同類型產品進行優劣分析，取其精華。

下面列舉調研和競品分析的幾個點說明下：

調研一

問：產品或銷售登門拜訪客戶時，演示電腦分辨率是多少？客戶使用電腦分辨率是多少？

答：多為老式筆記本電腦且分辨率偏小，1440*900、1366*768偏多。

機會點：上圖數據來自百度統計-流量研究院也只能作為輔助參考，最終還是要看產品實際用戶設備情況，為了保證頁面內容盡可能多的展示在屏幕上，布局得緊湊，要優先適配小屏幕效果，所以設計稿尺寸得調整為1440*800（去除瀏覽器頂部頁簽+地址欄+Win任務欄高度，再取整）。

調研二

問：詢問客戶使用查詢列表頁面是否能高效的查看、處理、查找條目

答：查詢查看沒問題，就是一屏數據內容展示的太少，標題欄、篩選和數據統計占了太多高度，而且篩選也不常用，導出按鈕在底部不明顯，橫向滑動很難用，看錯行。

機會點：優化布局，篩選考慮折疊或者表頭篩選，橫向數據堆積能否換行展示，導出操作是否可以放在上方？

競品分析：紛享銷客CRM

優點：列表內容占主要視覺面積，篩選采用表頭和自定義配置條件功能結合，列內容可自定義隱藏/顯示/前置和列固定左側，優先展示用戶自己想看的信息，減少橫向滾動條操作和提升小屏用戶體驗，將主動權交給用戶，列表視圖和分屏視圖也滿足了不同用戶的查看需求，以上這些都是很好的優化方向。

競品分析：廣聯達

優點：同樣列表內容占主要視覺面積，高頻篩選放出來，低頻篩選采用折疊交互方式，用戶有需要則點開【更多篩選】去操作，頂部有數據統計支持總攬，Table內容對于強關聯的內容進行上下組合（節省橫向空間），所有的操作按鈕集合到右上角，方便用戶定位操作。

總結一下：

以上就是筆者在調研和競品分析上可以獲取到的主要信息，雖說第一版套用AntD模板的設計并不理想，但對于初入B端行業的筆者來說著實重要，對查詢列表的框架、功能、和交互有了基礎指導和了解，才能有后續的一些針對特定業務場景的設計優化改版，凡事還是得現有基礎理論支持，后面的路才會走的更遠。

言歸正傳，下圖就是針對上面的總結優化后的查詢列表，相比第一版（可上劃參考對比）變化還是挺大的，各位可以對照的優化點細細體會下：

1、取消面包屑（系統深度較淺），優化（減少）標題欄高度；

2、增加數據統計，區域板塊使用分割線劃分，減少割裂感；

3、頁面操作按鈕集合放置在右上角，主按鈕統一在最右側；

4、高頻篩選常駐+表頭篩選結合交互（這里其實還是有問題的，對于組合篩選操作并不易用，待優化）；

5、增加Table刷新和列設置操作（刷新和設置icon）；

6、列鎖定（鎖子icon）可以快速自定義設置優先左側固定；

7、Table內容根據業務內容屬性合并上下組合展示，節省橫向面積（寧可上下滑動，也不要橫向滑動，至少減少橫向滑動的距離）；

這一版看起來整體架構層級依然清晰明確，從視覺角度看更豐富、更有節奏感，從交互來看也更符合用戶的操作場景，新增了幾個輔助功能，讓用戶可以根據自己的業務需要自定義配置列表內容，更有掌控感，能更高效的查看、處理、查找相關信息，這也是基本達到了查詢列表的設計目標。

經過和產品經理溝通，此次優化思路和方向也很準確，獲得了肯定，后續的迭代還需持續進行。

調研和競品分析帶來的好處想必各位也體會到了，凡是我們不了解不精通的，就去多看看多搜搜，總會有收獲，站在巨人的肩膀上總會看的更遠。

Ending

這次的分享是自己在探索B端道路上的小經歷，同時也體會到一些更深層次的東西，比如設計的意義在哪，什么是好的設計，怎么才能做出“好”的產品，在此分享給各位，希望能給大家帶來些思維上的變化，共同進步。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

前言：

入行做車載 HMI 已有 2 年余久，也該沉淀輸出一些行業內容，HMI 行業還是一片藍海，很多設計師都不敢輕易的進入這個新型的行業，覺得有難度、門檻、視覺要求高、這篇文章先帶你入行，文章還是以一些 HMI 基礎知識作為講解，在設計規范方面的內容，我會添加很多干貨結合實際案例講解。

先給大家打一個預防針（規范是用來打破的，本篇文章只做為參考價值）

1. 設計規范包含什么內容

設計規范包含視覺規范和交互規范，本章節先說一下視覺規范，車載交互內容會安排在后續寫作中…

2. 視覺規范：

車載端設計和移動端、web 端設計顯示差別還是蠻大的，最主要的差異就在于布局的不同，接下來我們從文字、顏色、布局、圓角、圖標等角度講解，PS：偶爾還會穿插一些工作心得的內容。

文字規范：

文字是 UI 界面設計中重要的組成元素，對于文字的使用是檢驗設計師基礎功底的時候，用得好壞會直接影響到用戶在使用產品的過程中的一個體驗，文字的使用從這幾個緯度出發：字體選擇、字號大小、顏色、字重、行高.

1. 字體選擇

（我要做一個良心的博主，讓你們避免侵權問題，別再傻乎乎的犯字體侵權的錯誤了）

在做車機系統設計的時候，需要選定該款車機中文、英文、數字或多國語言需要用什么字體。如果在乙方公司呢，客戶會指定給到你字體包，插播一段小插曲（職場心得：當客戶選定字體后，如果該款字體是付費字體，你得先和客戶確認是否得到使用許可，避免后續官司糾紛）在甲方爸爸工作的同學一般會遇到兩種情況：

• 公司已明確字體（請專業字體設計師設計一套）
• 用常規設計的字體，建議使用中文字體：思源黑體、英文/數字：Roboto。如果有做海外項目的，對于 Roboto 未涵蓋的語言，建議使用 Noto Sans 字體。Noto Sans 源自類似于 Roboto 的度量標準，旨在實現視覺上和諧的國際化。

這邊肯定會有人問為什么不能用蘋果字體呢？它不是免費字體嘛？

普及一下：首先該車機系統屬于商業用途，未得到許可使用，這就是侵權，在 app store 上 發布的 app 是可以免費使用的，因為這是在蘋果生態下使用，所以不屬于侵權。

2. 字號大小與字階

車機端的字號大小的制定也是要循規蹈矩

字號肯定要遠大于移動端和 web 端，為了確保文字信息的掃描性，結合了：基于 IDX & 同濟 (2020) 百度 Apollo 中控視覺基礎研究項目，設置清晰的文字階級參數，還有谷歌 Android Automotive OS 研究，以下是用字的規范（標紅色區域是他們之間的區別）

可參考谷歌：字體大小的遵循 4px 倍數大小增量

我們在做項目的時候，規定的字體大小維持在 4px，這樣有助于保持一致性和視覺層次感

用字的注意事項：

字體大小控制在 20px，這個要謹慎使用，一般都是使用在小標簽輔助類的文字上，最小的正文字號為 24px

設定文字規范有兩個好處：

• 文字樣式復用，不管對于設計師還是開發同學來說，都是極大提高工作效率的一件事情
• 對于界面設計來說，有規可循，避免設計時降低整體的視覺感

3. 字體用色規則

• 文字與背景顏色對比度要遵循 WCAG 的標準，需要考慮到無障礙設計需求，因此保持在 4.5:1 – 7:1 對比度，確保文字清晰易讀
• 將注意力集中到最重要的區域內容
• 文本元素之間傳達視覺層次感

4. 字體字重

字重是指一種字體的粗細樣式，下面展示字重的種類：

上實際案列講解：

謹慎使用中等字體粗細 ，盡量別用最粗的字體，這樣會使得頁面感覺差別很大，過度的不是那么自然，沒有了細膩、輕盈的感覺。所以在制定字體規范的時候就盡量將 Bold 字重去掉，如果你想通過加粗字體的方式來和下面信息作為區分，請選擇 Medium 字重（根據實際項目需求來定，我的規范只做參考價值）

5. 字體行高

為什么要加這一 pa，因為這個問題一直有小伙伴問到我，我就一次性解決了，文字模塊需要增加安全距離，這塊比較復雜。不行我后期錄一期視頻講解，下文也有詳細的講解。

字體文本的高度一直困擾著設計師，我該用什么方式去對接開發？在設計過程我們是否可以使用文字字號的高度進行對齊方式，而不是使用文字區域的行高？NO 肯定是不可以的。

微信朋友圈主頁作為案列：

文本的行高肯定是要大于字號的，個人動態的字號為 16px（在@1x 設計稿中）如果是多行文本的時候，微信是手動調整了文本行高（正常 Line：22px 微信實際 Line：20px），當行高為 20px 的時候，需要將文本上移 3px 才能使得圖片和文本視覺在一條線上面，如果按照這個進行開發的話，開發小哥需要在 CSS 屬性過程中注意圖片和文本之間的實際差異，這種左右高度不一致的設計，會直接導致在開發布局過程中變得更加繁瑣。

最后的結論：按照文本的行高來對接開發

普及一下小知識點：車載段落的行高一般為字號的 140%-180%的視覺呈現，提供舒適的閱讀環境給到用戶（取整數）

下面是一些專業性的知識 了解一下：

在設計字體過程中，字體設計師一般都會給字體預留安全距離，讓字體展示更加穩定。

我們在做設計的時候，將字號設置為 30px，但實際字體的空間是需要包含上下部分的安全距離，最終實際高度就變成了 42px（Font:pingfang） 穿插一個小干貨：在不同字體下相同字號，行高（Line height1）是不同的，Ant Design 的 30 號字，行高為 38px （詳見配圖計算方式）

顏色規范：

1. 使用場景

場景：白天陽光暴曬（陽光強度有很多檔位早、中、下午） 、 梅雨季節陰雨連天 、夜晚模式、地下隧道等。

駕駛汽車在室外不確定因素會比較的多，光線強度的干擾尤其重要，照明會根據一天中的時間，天氣，窗戶的色調等等而有很大不同。當你設計的車載應用程序在現實世界中使用時，設計時在計算機上看到的顏色并不總是相同。考慮顏色亮度如何影響駕駛條件，以及低對比度的顏色在陽光直射下如何被洗掉。始終在多種光照條件下預覽您的應用以查看顏色的顯示方式。如有必要，請進行調整以便在大多數案例中提供最佳的觀看體驗。

最初車機廠商系統大多數都是偏愛深色背景，具有代表性的兩家系統谷歌的 Android Auto 系統和蘋果 Carplay 系統，我在做項目最初也是沿用了深色系。

2. 色彩中的“TF BOY”組合

我想用一句蘋果的官方話說：“配色可以提供交互性，提供視覺連貫性，并且對界面賦予生命力。”這句話總結得真的非常到位。集中注意力認真聽，重點來了，UI設計中顏色的使用法則，在一個頁面設計中需要講究 60-30-10法則， 在60％+30％+10％的比例下創造一種平衡感，是為了視角能夠從一個焦點舒適地過渡到下一個點，避免給駕駛中的我們產生視覺落差很大的感覺。

一個項目車載系統的色彩規范，包括了品牌色、語義色、中性色。

品牌色：又稱為 “強調色“ ，通常一個車載系統只有一個品牌色，也是出現頻率較高的一種顏色，強調色一般使用場景為：tab 的切換選中，按鈕開啟狀態、音樂在播放中的音符小動畫等等 （拿我練習稿講解）

語義色：語義色需要在 UI 界面中承載著具有準確的信息傳達，在復雜場景里顏色的傾向性應十分明顯，減少用戶的理解成本和理解時間，給出行體驗者帶來良好的駕駛體驗。

根據交通標志的定義，紅色表示禁止、停止、危險，那么用戶需要在第一時間識別出這種信息，黃色為警示或不良結果等，綠色則代表通行、成功，上訴說的顏色為狀態色。下面要講一下功能色：說到鏈接色，大家第一時間肯定想到的是藍色。

中性色：主要用于除文字外，還被運用到背景色、分割線、置灰填充、邊框、等場景中 （注：根據背景色的變化，系統其余顏色也隨之而變，這是兩套用色規范切換）。

3. 如何制作 HMI 色彩規范？

盡量使用較少的顏色，顏色飽和度不要過高，避免對駕駛的視覺干擾，吸引駕駛者的注意力，讓老司機翻了車。

避免讓交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的顏色，則很難知道在何處點擊）。

保持色彩一致性（請勿使用不同的顏色來任意區分單個屏幕中的重復組件。當顏色不能增加價值時，請謹慎使用）。

建立視覺層次（通過不透明度值或者是同一色系，但不要過多的使用不透明度或對比度）。

盡量使用深色背景，這是市面上很多車廠的選擇（不過蔚來、特斯拉、小鵬、carplay 都相繼推出了白色版本，來適配白天，我們項目中后期也加入白天模式，經過路測在陽光很刺眼情況下，黑色會反光，無法看清顯示屏幕內容），最終在實際各種照明條件下，對應用配色方案進行測試。

車載 UI 系統中使用足夠色彩對比度，上述在使用場景中有所提到。

繼續講干貨

(在后續文章安排里我會單獨拿出 WCAG 從感知，可操作性，易于理解和穩定性去詳細講解，這次先挑重點說)

WCAG 全稱是 Web Content Accessibility Guidlines（網頁內容無障礙指南）它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人。一共分為三個級別 A（最低）、AA、AAA（最高）

講個概念：兩個白色的對比度是 1:1 , 白色（#FFFFFF）與黑色（#000000）的對比度為 21:1

做顏色對比的網站鏈接，搭梯子訪問：https://next.rsuitejs.com/en/tools/palette

要滿足 AAA 級準則，文本視覺呈現及文本圖像至少要有 7:1 的對比度，針對大號文本以及大文本圖像至少有 4.5:1 的對比度

總結：

對于顏色運用的細節，是證明了一位設計師的深度、且具備耐久力。上述內容對于顏色的規則不適用全部的設計方案，還是具體項目具體分析，用戶人群不同，運用場景也不一致，比如駕駛者和后排人的屏幕設計內容肯定會有差別。還有一個點在設計需要閱讀內容頁面，例如：微信發來的消息、設置中文本，最好能夠達到 AAA 標準。

布局規范：

HMI 的設計和其余終端設計，最大的差異就在于布局，布局是整個頁面設計的框架，也是最重要的內容之一，在講該模塊內容，我會從實際項目案例出發。開始制作車載 UI 系統，需要和汽車廠商確認車載 UI 可在屏幕中，設計的尺寸區域（注：其中“屏幕”是指應用正常工作空間而不是到邊緣的全部空間，有的廠商把固定按鍵也鑲嵌這塊區域中）。

1. 屏幕尺寸有多少種類別？

我們先要了解一下熱門和主流車機分辨率。眾所周知我們車機上的屏幕尺寸和分辨率種類可以說是種類繁多，在設計過程中設計師主要還是關注屏幕的分辨率是多少？（ 需要我們設計的屏幕為儀表盤、中控、有的車載還包含有副駕駛和后排娛樂屏幕 ）

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸為 120 像素是固定 ）Model S/X 用豎屏設計 分辨率 1200*1920

蔚來

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比較特殊，它擁有 4 塊屏幕，儀表盤 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副駕駛娛樂屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鵬

G3 豎屏幕 15.6 1920×1080 P7 控屏，在目前汽車產品中屬于分辨率較高的梯隊 2400×1200 精度超過 2K（普及一下 2K 分辨率標準為 2048×1080 像素）

接下來給大家觀看蘋果的 CarPlay 系統分辨率和谷歌車載系統

CarPlay 系統分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已經找出規律了：在設計橫屏的時候高度基本都為 720px，其余橫屏幕按照比列縮小。

這塊內容非常重要，以至于關乎到后面整個系統的布局方式，蘋果的 CarPlay、谷歌 Android Auto、國內的百度 carLife+等都有自己的車載系統，如有的車企屏幕分辨率不一致，就無法適配成功，會出現拉伸等現象，除非通過定制化服務重新按照廠商的尺寸去重新搭建一套。我們項目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我們有自己的想法，后面在自適應布局中會提到。

2. 間距的規范制定

制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規格布局 8 像素點網格上構建，這意味著規范中的 UI 組件和元素之間相隔 8px 的倍數

谷歌 Android Auto 間距規范一共制定了常用的九種數值，P0 – P8

注意事項：提供 4px、12px 間距大小，是為了對齊較小的元素之間的距離，這兩個數值謹慎使用，在大屏幕車載系統內，也有很多間距需要大于 96px，因此在對于這些數值制定規范的要求就是 8px 的倍數即可使用。

說到這邊肯定會有人有疑問，我們在做規范時能不能將間距不設定成 8 的倍數，4、5、6……倍數是否可行呢，當然是可以的，“規矩是死的，人是活的“。只要是按照倍數疊加完全都 OK，如果選定一種倍數，就不能加入其他倍數，如果頁面出現多種間距會使得頁面沒有節奏感，打破了親密性原則。

3. 車載模塊中布局

這部分對于想接觸車載設計同學非常友好。講一下通用的布局，具體交互設計等待我后續更新文章，這次就簡單按照 1920×720 分辨率每個模塊我都會稍微帶一下。

4. 自適應布局

講完前面每個模塊的大致布局，接下來我們來探討一下自適應布局，這個真的非常非常！??！超級重要，工作后期經常會遇到這個問題，甲方爸爸后續有增加屏幕分辨率的需求。我們前期在布局上花費的時間相對較多（但后期維護起來可以減少你很多工作量，前期需要你規劃好基礎框架）

下面拿實際做過的案列來陳述：拋出一個問題，我們如何將分辨率1920×720頁面的內容轉變成1280×720 呢？

（有同學說，直接丟開發然后他們寫自適應布局）導航相關頁面需要調用地圖的接口，這個開發是可以直接去寫自適應，但其余元素還是需設計師重新來排版。

（還有人說直接縮放比列，調整頁面布局）這個方案在比例相差很大的時候是行不通的，但同比例或者很相近是完全 OK 的，正巧我們項目上有 800×480 分辨率，和 1280×720 極其相似。

（還有人表示不服：折疊某塊區域內容，將該區域內容做成 icon 點擊后彈出來）該方法可以使用在部分內容。

有的模塊內容沒法降低層級，這個辦法就不行，遇到這類的情況我們就直接將這塊內容適配做成 1280×720 尺寸。

如果前兩種辦法都行不通，有的內容就得需要做彈性布局控件了，例如設置頁面，當中間空間很大的時候，放置到短屏中可以根據彈性布局拉伸該控件長度，拉至適配該屏幕的設計，如有需要請留言，后續彈性布局我會寫一篇文章詳細說明使用。

我們項目多種分辨率進行轉化基本都按照這些方案推進下去的，來一句雞湯：辦法總比困難多，真的只要用心做事情，沒有什么困難能難倒你的，還有不要做理想主義者，要做實踐者，實踐才會見真理。

不好意思，一下子說多了沒收住 ，進入正題。謹慎重新改變布局 ： 第一是增加開發工作量，其次就是增加用戶的學習成本，當然，屏幕是豎屏的時候則就需要重新布局，因為橫寬比例變成了相反數值。（旋轉屏幕大家可以去看看比亞迪的唐、漢車型）

上述的內容都是我們一步一個坑踩過來的，“且看且珍惜”。

圓角的規范

1. 如何制定圓角的大小規則

更圓的角和全圓角的使用

對主要動作和組件使用更圓的角（更大的角半徑 or 全圓角），是需要重點突出的，圓形對大多數直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會和其他按鈕做出反差，鼓勵用戶去點擊。比如：全局消息通知按鈕、電話模塊中接聽、掛斷、下拉負一屏中的按鈕等 （下方是練習稿案列）

較低的圓角和直角的使用

對于不需要 or 低強調的元素，使用較低角半徑 or 0px 圓角=直角，例如：工具欄或列表可以用較小的圓角，專輯封面不需要再強調，所以直接將它降到 0px，我們項目音樂專輯大封面就用的直角，具體問題需要具體去分析，像音樂控件的外輪廓就是帶圓角的，因此專輯封面在容器里面就必須帶有圓角，不然設計風格則就不統一。

還有一個模塊，就是在音樂分類的情況下會有很多專輯封面，我們對比一下兩種方案：有圓角 or 無圓角，兩張圖對比下來，帶有圓角的專輯封面有更明顯的邊緣產生了視覺差的感覺，而直角的專輯看起來就沒有，不易突出，因此不太可能引起我們的注意。所以在網格布局中，圓角的效果更好

谷歌對于圓角的定義

在設定圓角規則時，需要注意一個事項：大小種類不宜太多，不然顯得雜亂無章。

注意：即使應用布局是在 8dp 網格上構建的，但仍會提供 4dp 的半徑大小，以幫助在較小的組件中形成元素。該值應謹慎使用，因為它不是 8dp 的倍數

總結：圓角還是直角沒有對錯之分，合適的才是最好的。

圖標規范：

1. 圖標的種類（車載圖標分為應用程序圖標、系統性圖標）

應用程序圖標

現在 HMI 的設計趨勢已經去掉了應用程序圖標，取而代之的是卡片化的設計方案，簡單說一下卡片式設計有兩大好處，第一，把學習成本降至最低，第二，增大的接觸面積讓駕駛時誤觸率也降到最低，給到用戶最直觀的體驗就是簡單易用。不過有的汽車廠商對這一塊還是有需求，我們就稍微再提一下。

我自己也負責過有應用程序圖標的項目，在 1920×720 中為 160px 分辨率和蘋果@3x 分辨率相同 ；在相對較小的屏幕中應該按照比例同比縮小，如同 800×480 分辨率中首頁中的應用程序圖標為 80px，這是如何計算的呢？

項目中還有一款車型的屏幕分辨率為 1280×720，由于屏幕變窄，應用程序圖標需要縮小到 120px，高度 720 and 480 有一個共同 240 的倍數，所以最終小屏幕的應用程序圖標為 80px，圓角大小也隨之而變：R：24/18/12。其余分辨率按照實際情況使用。

系統性圖標（后續 HMI 組件庫搭建文章中我會詳細的講解）

該系統提供了許多小圖標（代表常見任務和內容類型），供導航欄和選項卡欄中使用。最好盡可能使用這些內置圖標，因為它們是人們熟悉的。

2. 圖標的尺寸

大廠是如何制定圖標尺寸

很多博主在講到圖標尺寸的時候都是一筆帶過，拿著別人得出的結論，卻沒說怎么計算出來，對于車載來說，前期發布這些研究報告的內容極少，所以我對圖標的計算想找到了計算方式，如果大家想知道怎么換算的話可以查看：https://zhuanlan.zhihu.com/p/158099749

根據百度 IDX 駕駛體驗中心，在對于《車載 HMI 界面效果客觀指標實驗報告》在基于視距為 50cm，計算出最小圖標為 9mm 推薦使用 12mm。視覺上的 1cm 的實際像素是多少呢？這就是一個錯誤的想法，上面文章中也有提到屏幕分辨率無法與物理長度單位進行轉換，（實際項目工作經驗告訴我，因為相同的屏幕大小但是分辨率不一樣，所以得出的結果不能共用）

PPI 的計算

我就大概講一下計算原理，這個根據屏幕的分辨率，我做過一款相同屏幕尺寸的車機，都是 8 寸屏幕，但分辨率一個為 1280×720，另外一個則為 800×480，每一個格子為一個像素。

最小圖標尺寸計算

接下來找一下分辨率 1280×720 最大公約數為 80，最后得出結論屏幕的比列 16:9

兩邊比例的平方相加 = 屏幕英寸的平方

根據勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的結果為 0.4357

16:9 的 8 英寸屏幕 長度（單位：英寸）=0.4357×16 =6.9712 寬 =0.4357×9=3.9213

國際計算單位 1 英寸 = 2.54cm

所得出屏幕的長度（單位：厘米）=6.9712×2.54≈17.7cm 寬 =3.9213×2.54≈9.96cm

分辨率：1280×720 寬度約等于 10cm 來計算，720/10 = 72px

分辨率：800×480 由于他們屏幕大小一致（英寸）480/10=48px

得出結論：視覺上的 1cm 的實際像素是有所差距的。

按照設計規則：按 4 的倍數來制定，因此最小圖標為 40px（這個結論只是作為推薦使用，在做項目的時候，變數有很多，甲方爸爸就喜歡超級大的，你也沒辦法，所以還是按照項目來制定）

為了計算這個我還特地的回顧了高中學習的開根號、初中的最大公約數都搬出來了，幸好當時數學還算是個小學霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 圖標大小規范

基礎的圖標：主圖標：44px 次要圖標：36px 第三方圖標：24px

頭像的使用：小頭像：56px 中頭像：76px 大頭像：96px

百度車載生態開放平臺下載了他們組件庫，進行了研究。

基礎為圖標：48px 次要圖標 40px（最小圖標尺寸）

這邊還要說一下，對于大圖標的尺寸設定，會有很多尺寸 icon，后續我還會在輸出關于車載圖標詳細的內容，敬請關注吧。

3. 圖標的點擊區域

圖標觸摸區域分為駕駛中使用和靜止中使用

例如說駕駛中需要調節空調的內外循環，原本老車機的硬按鍵替換成了屏幕中的按鈕，原有的硬按鍵已經通過長期使用有了記憶性，有觸感并且操作硬按鍵大小適中，所以在操作中減少了操作時間，降低了危險系數。新能源汽車在設計的時候可以通過增大觸摸區域降低誤操作、無法點擊使得駕駛員視野長時間遠離方向盤的情況，研究表明視野超過 2 秒以上停留，就會存在危險。

靜止使用例如：在設置頁面中調節車輛設置中的屬性，巡航模式、電動尾門打開百分比的調節等等。

谷歌制定觸摸區域的規則

最小觸摸目標尺寸為 76 x 76px，需要在單個圖標設計基礎上再額外增加一塊觸摸區域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設計規范中最小手指觸摸的區域為 44x44px

這是我根據實際項目并在車內進行路測（路測：駕駛中測試）中得出結論。

還有一種特殊情況：文字+圖標組合點擊區域，在 icon 很小的時候也可以考慮將文字也組合一起，增大點擊區域

4. 圖標設計的統一規則：

• 統一風格
• 統一光源
• 統一線條粗細
• 統一圓角/直角
• 統一傾斜角度
• 斷點的距離、大小統一

5. 最后最一個小插曲：命名的規范

之前經常有小伙伴問我，落地項目的 icon 切圖命名規范怎么制作？就拿我之前做的風格稿首頁來說，首頁音樂卡片中的“下一首”的圖標如何命名。

首先分析這個 icon 在哪個頁面當中 or 用在哪里，接下來就是他的屬性是什么 icon 還是 button，其次就是這個 icon 代表什么，這個 icon 的大小，因為在一個系統里面會有重復功能 icon，所以是有必要增加大?。ㄟ@塊內容是選填項），最后在增加這個 icon 是處于什么狀態下，狀態分為：禁用、常態、按下、選中

最后呈現：首頁_音樂_下一首_常態 ，對接開發應該是翻譯成英文。

有時候英文命名也可以用縮寫比如設置：setting 你直接可以寫成 set icon ic button bt（如果全局使用就使用   All）

總結

聽完小米的發布會，是我觸動較深的一次，視頻彈幕中滿屏刷著““干翻特斯拉”，小米造車一誕生就背負著全民的期望，創始人雷軍已經功成名就，但還是愿意押上全部的聲譽和未來十年的人生，全力 all in，我心中只有敬意，祝小米早日造車成功，“干翻特斯拉”，我們設計師也愿意和這個行業賭一次，行業深耕下去，砥礪前行。

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

文章來源：優設  作者：設計界的影帝

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

前幾天版本號為 「OS Build 21996.1」的 Windows 11 系統在網上泄漏，雖然微軟官方辟謠說這并非正式版本，但是這個非正式的泄漏版本依然可以讓我們窺見新的 Windows 系統的一些有趣的特質。

風格更加統一，功能小幅完善

在整體觀感上，和補丁摞補丁的 Windows 10 相比， Windows 11 擁有著更加明確統一的視覺設計，足夠簡約又不會顯得簡陋，充滿了一種濃郁的「形式跟隨功能」的設計特質。微妙又高級的「亞克力美學」 Fluent Design 則顯而易見地貫穿整個系統，所以 Windows 11 應該就是 Fluent design 的第一次集中式、成體系的呈現和總結。

在系統功能上，一眼就可以看到新增的桌面小組件功能模塊，經過這么多年這么多系統的迭代 和驗證，相信微軟這次的桌面小組件不會是那么雞肋的存在，應該可以整出一個頗為不錯的桌面信息中心：

新的軟件商店也根據當前風格進行了優化：

在游戲領域玩兒得風生水起的 Xbox 是肯定會出現在新的 Windows 11 當中，完善的游戲服務應該成為 Windows 11 的加分項，不過具體如何應該需要新版本正式發布之后再去驗證：

在動效和交互上，Windows 11 徹底擺脫了 Windows 10 時代似是而非的狀態，經歷過 Surface 系列產品的反復迭代和測試，Windows 11 在觸摸交互上終于有點樣子了，不再拉胯。得益于之前在 Surface Neo 和 Duo 上的探索，在分屏交互上，也提供了非常成熟的原生交互體驗：

不過，這次更新對于絕大多數用戶感覺最為不同的，應該是挪到底部最中間的開始菜單。這個歷經近30年的功能組件，變成今天這個樣子本身是一件非常有意思的事情。接下來我們回顧一下這一部分的變化。

順應潮流的「開始菜單」

其實「開始菜單」這個東西談不上是微軟的獨創，在 Windows 之前，這種系統級別的菜單設計由來已久，Macintosh 在左上角：

BeOS 在右上角：

不過和當年大量交互邏輯千奇百怪的桌面系統相比，MacOS 和 BeOS 這種終究是少數，而面向兼容機市場的 Windows 95 把這種易于上手、高度集成的功能發揚光大，不得不說既是時勢，也是機遇。

Windows 95 上的「開始菜單」設計可以說是當時同類設計中的最佳實踐，易于理解的樹狀結構和明確的位置結構，讓整個操作系統具備了更強的可用性。

Windows 系列在 開始菜單上的成功影響了后續包括 Gnome 、 KDE 在內的諸多 Linux 桌面環境，它們大都是順應著這種潮流來進行桌面端控件的設計。

隨著市場份額的增長，「開始菜單」也成了 Windows 系列最具認知度的組件之一。這種事情最直接反饋在鍵盤的設計上，在圈內有 WK 和 WKL 兩種常見的配列，前者即是 Win key Layout（有Win鍵鍵盤布局），WKL 則是 Win Key Less Layout（無Win鍵鍵盤布局）：

在 2000 年之前有大量的鍵盤這樣的鍵盤，而如今我們在零售市場上已經很少能見到這類產品了。為「開始菜單」單獨安置一個按鍵雖然也不是 Windows 的獨創，但是從這類鍵盤的市場份額的變化，也能看出 Windows 的市場變化。

功能緩慢迭代的「開始菜單」

在「開始菜單」上嘗到甜頭之后，微軟幾乎在每一代 WIndows 操作系統都會將這個默認位于界面左下角的組件進行升級，并且按照自己的想法進行了「優化」（當然后來的某些設計也確實是毀譽參半）。

Windows 98

Windows Me/2000

Windows 98/2000/Me 基本上還是在延續 Windows 95 上的簡單的層級結構，但是由于受限于硬件性能和操作系統領域的流行風格，這一波系統的開始菜單在視覺上也保留了當時桌面系統的浮雕式控件的視覺風格。

Windows XP

值得一提的是，促使微軟痛定思痛認真搞 Windows XP 的視覺風格的重要原因之一，其實是蘋果這邊的 Mac OS X 在視覺設計上搞得風生水起。要說微軟一新追求技術無心設計肯定是假的，因為在去年泄漏的部分 XP 源代碼當中，有微軟模擬的 Mac OS X 風格的主題：

兩相印證，也不難看出微軟在 Windows XP 的原有視覺風格上的探索還是相當上心的。而這個階段的「開始菜單」從單欄變成雙欄，一方面承載了更多的固定快捷方式、快捷文件夾，而且開關機按鈕和控制面板 等一系列常用的關鍵功能也相對簡約地集成，而全部程序則隱藏在下級菜單當中：

Windows xp

在 2000 年前后，隨著個人電腦的全面鋪開，操作系統戰爭開始在開源和商業領域充分展開，商業巨頭和個人開發者幾乎全都參與進來，無論功能還是視覺設計上，都必須一較高下。

視覺風格升級的「開始菜單」

Windows XP 在「開始菜單」的功能設計上是成功的，隨后帶來的影響持續了十幾年。不過市場份額上的增長并不足消除對于微軟對于設計的焦慮，所以下一代的 Vista，微軟拼著消耗性能也要讓新的視覺風格讓全世界看到：

Windows Vista

以 Aero 為命名的視覺風格，最講究的是玻璃式的光影變幻，Vista 當中的「開始菜單」也隨之進行了更為「現代」的改進，精簡了右側文件夾的圖標，通過雙色對比來區分功能屬性，也增加了信息層級，半透明的玻璃窗口也可以更好地傳遞界面之間的前后關系。

從成熟度上來說，比 XP 更進一步，隨后是小幅迭代之后的 Windows 7：

菜單上變化不大，功能和設計上的延續性顯而易見，隨后就是翻車了的 Windows 8:

需要強調的是，Windows 8 所處的整個時代，是移動端設計開始繁榮的開端、擬物化設計開始不足以滿足大眾新鮮感的階段，而從微軟的 Zune 部門開始流行的 Metro 設計風潮開始影響整個公司走向，催生了 Windows 8 這樣的新設計：

將簡約的LOGO和多彩多變的動態磁貼結合到一起，用層級清晰的文字排版來快速傳遞更多的信息，不同尺寸的磁貼結合成不同的組，這種「開始菜單」的設計是近乎顛覆式的，但是對于用戶認知上也同樣是顛覆式的。

而完整的程序菜單需要向下滾動才能呈現，而用戶看到的是布滿整個屏幕的小色塊和文字：

而用戶對于 Windows 8 的「開始菜單」的質疑也正是從這里開始的，不僅全部程序列表不是可見的且沒有引導，連原本的關機、重啟等功能也被隱藏了，可用性大打折扣。

最終，在作為增補升級版而存在的 Windows 8.1 當中，開始按鈕重新回到了桌面，但是「開始屏幕」依然保留，而全部程序的列表也有了視覺指引，沒有「開始菜單」的 Windows 依然沒有靈魂，沒有從根本上解決問題。同時，Windows Phone 這邊份額也是一路下跌，每況愈下。

原本期望借助「開始屏幕」讓 Windows 系統更加兼容彼時正在上行的移動端生態，可惜平板模式本身極度拉胯，加上同樣缺陷一堆的「開始屏幕」讓整個 Windows 8/8.1 世代呈現出一種干啥啥不行的狀態。而這個階段同樣也是微軟換帥、內部重新整合設計部門、戰略全面轉移革新的階段，產品出現這樣的問題也并非單一原因造成的。

后移動端時代的「開始菜單」

Windows Phone完蛋了。Windwos 8 也終于成為過去了。推倒重來升級系統，把問題留到過去似乎永遠是最好的選擇。

在 Windows 10 當中，動態磁貼的優點和傳統 Windows 「開始菜單」重新組合到一起，久經驗證的功能——或者說符合長久以來用戶認知的功能，又重新集成回來，讓「開始菜單」回歸了「用戶舒適」的狀態。

一方面，Windows 10 即使進行重要的功能和設計改進，也并沒有像之前那樣做名稱更換，而是自 2014 年以來一直以 Windows 10 的名稱面向大眾，幾遍內里隨著更新徹底翻新了好幾波。

另一方面，在「開始菜單」的設計上，Windows 10 前期和后期在視覺層面上有大量的細節差異。功能上雖然保留了動態磁貼的優點，但是在具體的性能、圖標元素、功能體驗、視覺風格上，進行了大幅度的升級和改變：

2014 年剛剛發布時的 Windows 10 的開始菜單，大概是 Windows 8 時代所有用戶都期待擁有的樣子。

2016年之后，隨著 Fluent Design 的逐步發展、成熟，Windows 10 在視覺上幾乎是每版都不一樣?！搁_始菜單」的優雅級別以肉眼可見的速度提升了上來。

但是功能上，「開始菜單」不管怎么換，它的默認位置倒是沒怎么變過。在原本的計劃當中，Windows 10 之后應該是會有一個針對移動端優化、面向雙屏設備的 Windows 10x 系統。原本，Windows 10x 系統會伴隨著雙屏設備 Surface Neo 來發布的：

Surface Neo

而這個更加偏向移動端使用場景的「開始菜單」其實上用于這里的。只是出于種種原因，Neo 跳票了，Windows 10x 也一直沒有出來。

泄漏的 Windwos 10x 界面

在原本的 Windows 10x 當中，全新的「開始菜單」被挪移到中間的同時，并沒有包含關機等按鈕和功能。不過并入 Windows 11 之后，開始菜單的核心功能還是得到了很好的延續，而目前泄漏的 Win11 系統界面也很好的印證了這一點：

不過最重要的是，Windows 10x 和 Windows 11 在「開始菜單」上的設計，算是一次向著「移動端設計最佳實踐」的妥協。

交互上選擇了最佳實踐

雖然居中的「開始菜單」看起來很像 macOS 的 Dock 的設計，但是，實際情況并不是這么簡單。

一方面，微軟內部來看，試圖重新進入移動端領域的微軟選擇了 Surface Neo 和 Surface Duo 兩款設備作為切入點。前者使用的是 Windows ，而后者使用的是魔改后的 Android：

在移動端計算設備占據主流的今天，居中的底部快捷方式是經過了十幾年驗證的「最佳實踐」。

另一方面，在桌面端操作系統上，這種趨勢也相當的明顯。macOS 自不必說，而借助低價入門硬件和教育類電腦采購而快速崛起的 ChromeOS 設備，也是使用底部居中 Dock 的大戶：

ChromeOS

圍繞著 APP 和服務的整個軟件生態讓用戶對于復雜的系統級菜單功能沒有早年間那么強烈的依賴，大量的移動端用戶的基礎認知和桌面端操作系統交互的逐步統一，讓 Windows 早已沒有必要在這個簡單的事情上去做不必要的差異化，這可能才是 Windows 11 順應趨勢的主要原因。

當然，Windows 的老用戶依然可以遵循自己的喜好，讓開始按鈕老老實實待在原來的位置。

Widonws 11 目前泄漏的開始菜單的設計相比于以往，更加簡約，復雜的層級結構被精簡掉了，APP 快捷方式保留了，點擊 All apps 可以訪問全部程序，原本固定的文件夾選項被人工智能推薦所替代，順應著時代潮流，最重要的關機等功能依然存在。

控制面板這類對于移動端原住民有認知負荷的功能，也在這個后 Win10 時代，化作一個「設置」快捷方式，和其他的 APP 待在一起，如同其他的手機或平板一般。

Windows 11 正式發布會就在幾天之后，關于全新的視覺設計、用戶體驗細節上的東西，應該有更多看點，不過最好還是再等幾天，正式版上手之后，再詳聊。

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

文章來源：優設   作者：陳子木

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

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

1 位移類手勢的描述維度

手勢作為圖形界面與用戶之間溝通的方式之一，在便攜電子設備上大量應用。與實體按鍵相比，它有著純粹的簡潔性和無盡的創造性，手指的個數變化、不同變量的組合能夠創造出無數的操控方式。

位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢，本篇文章主要講解單指操作的位移類手勢，多指的位移類手勢（如捏合）將放到后續文章中講解。

一談到位移類手勢，大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而，當我們想仔細談論他們三者之間的區別時，大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別，我們在這里引入三個維度的概念，它們分別是控制方式、穩定化效果、以及閾值類型，這三者的不同的變化組合可以創造不同的位移類手勢，拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時，不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢，因為這三個維度的變化就會產生不同的變種，而且不同變種在體驗上也存在很大差別，若不分場景隨意使用，很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。

1.1 控制方式

第一個維度是控制方式，它分為絕對控制和相對控制，也可以通俗的表達為跟手和不跟手，區別如下。

絕對控制/跟手：施加控制的一方（后文簡稱施控物）的某個屬性變化與被施加控制的一方（后文簡稱受控物）的某個屬性變化是對應的。

相對控制/不跟手：施控物的某個屬性變化與受控物的某個屬性變化不是對應的。

比如在網易云音樂的播放頁（下圖左），左右滑動黑膠時，手指是施控物，黑膠是受控物，手指的橫向位置變化和黑膠的橫向位置變化是對應的，即絕對控制。上滑調出評論頁時（下圖右），評論頁的位置和手指的位置沒有對應關系，手指的上滑僅僅控制評論頁是否出現，即相對控制。

與相對控制相比，絕對控制允許用戶去操控受控物的屬性變化過程，因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑，手指的橫向位置與書籍封面的變化過程對應，模擬現實生活中慢慢合上書的感覺，如下圖。

但是在有些場景，為了避免混亂，屬性變化過程是不適合被用戶絕對控制的，此時我們應采取相對控制的方案。比如 iOS 的相機中，左右滑動切換拍攝模式，由于前后不同模式之間的頁面框架變化較大，切換時會有過多元素的屬性變化，如果使用絕對控制就會導致切換拖沓且混亂，使用相對控制就能避免這個問題。

1.2 穩定化效果

1.2.1 定義

當我們使用手勢控制某個受控物時，由于手勢的某個屬性（如手指位移）達到閾值，進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」，或者也可以稱為「吸附」。

穩定化效果能夠保持界面的視覺秩序，避免過多的中間狀態導致界面的雜亂，進而幫助用戶聚焦信息。

是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度，當某個位移類手勢有穩定化效果，我們就將其稱作輕掃。

以滑動切換抖音視頻為例，當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后，下一條視頻會往上移動到一個固定的位置然后進入穩定狀態，而不會出現停留在不完整的中間狀態，如下圖所示。

在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕，按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小，而不會停在類似下圖左所示的混亂的中間狀態。

在多內容選擇的場景中，如果滑動與選中是綁定的話，一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時，滑動濾鏡選項不但能夠控制濾鏡選項的位置，并且會自動選中一個位于中間位置的濾鏡，位置的穩定化避免了被選中選項的不明確。

如果滑動與選中是分開的，比如美圖秀秀的濾鏡選項需要先滑動后選中，這種情況下穩定化效果不是必要的。

1.2.2 與效率的關系

不同的穩定化規則帶給用戶的體驗差異是非常大的，最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解，穩定化效果越強，單次滑動能夠切換的選項個數越少，效率越低。穩定化效果越弱，單次滑動能夠切換的選項個數越多，效率越高。

比如在比較常見的 banner 切換功能中（下圖左），無論手指位移和釋放速度的值有多高，banner 只能切換并穩定到下一個，不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中，一次滑動能夠切換多個內容卡片。因此，我們可以說前者的穩定化效果比后者強。

拖拽和甩動雖然沒有穩定化效果，但是也存在效率的高低。我們可以將其與輕掃放在一起做對比，如下圖所示，拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。

那么我們決定添加穩定化效果后，如何選擇強弱程度呢？選擇沒有絕對的對錯，整體來說主要考慮兩點，業務訴求和用戶訴求。例如在常見的 banner 切換中，banner  的總數量一般不會很多，業務的訴求是希望盡可能曝光每一個 banner ，使感興趣的用戶進行消費，因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里，不同用戶感興趣的榜單是不同的，穩定化效果弱的輕掃可以方便用戶單次滑動切換多個，快速切換到自己感興趣的榜單的大概位置。

百度 App 的表情面板原本是左右輕掃瀏覽表情，在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。

微信視頻號的改版是一個典型的案例，舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢（下圖右），而是占據屏幕尺寸三分之一到二分之一之間的卡片形式（下圖左），并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏，社交推薦算法不完善，貿然模仿抖音式的全屏化形式和輕掃手勢的話，會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低，反之卡片形式加甩動手勢給予了用戶更自由的選擇空間，提高了用戶的切換效率，降低了負面體驗。等到如今時機成熟，再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。

在某些場景，用戶需要先通過高效的方式選擇特定區域的內容，然后進入聚焦狀態進行內容瀏覽和慢速的切換，此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖，在 iOS 的照片 App 中，先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置，點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。

1.2.3 觸發時機

觸發穩定化的時機可以分為釋放前和釋放后，不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時，手指位移達到閾值后，手指無需離開屏幕，穩定化即可被觸發。如下圖左，iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時，手指位移或釋放速度達到閾值后，手指必須離開屏幕，穩定化才能被觸發。如下圖右，常見的 banner 切換。

釋放前穩定化可以避免拖沓，增加切換效率，但是缺點是無法反悔回退且缺乏掌控感。反之，釋放后穩定可以反悔回退，掌控感強，但是缺點是比釋放前穩定化拖沓了一些。

1.3 閾值類型

閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣，100 度就是一個閾值，溫度是閾值類型。在手指與屏幕的交互中，手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型，達到相應閾值后就可以觸發相應的變化，常見的變化有受控物的位置、大小、不透明度等，理論上變化可以是任意的。

在位移類手勢中，通常會用到的閾值類型有手指位移和釋放速度，手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離，釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。

市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式，因為其不太符合常識。因此我們在設計位移類手勢時，能夠選擇的閾值判定方式常見的有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。

當我們設計手勢時，就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離，因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短，所以相對應的缺點就是易誤操作和不精確。②就恰恰相反，由于不存在釋放速度造成的不確定因素，它的優點是不易誤操作和精確，缺點是低效。

甩動和拖拽之間的區別就在于閾值判定方式，甩動是 ① ，拖拽是 ② 。如下圖，當在微信消息列表找相應的消息時，用戶的訴求就是能夠快速找到特定消息的位置，對特定消息的出現在屏幕的位置也沒有特定要求，只要能夠被手指點擊到即可，因此選用甩動較為合適，但是對于調節音量、亮度這一類的操作，滑動的范圍有限，因此用戶對效率沒有太高的要求，但是對于滑塊位置的精確度有要求，因此選用拖拽是更為恰當的。

再舉一個反例，在 Steam 移動端橫滑首頁的泳道卡片時（下圖左），使用的手勢是拖拽而不是甩動，瀏覽起來特別低效。更適合的做法應為甩動，會更符合此場景下的快速瀏覽的訴求，如下圖右的豆瓣。

對于輕掃來說，使用哪種閾值判定方式有多種情況（如下圖所示）。在本文中，根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類（A-E的命名方式僅存在于本文章，因此在向其他人傳達時，盡量使用在后文我介紹的手勢描述而不是類別名稱，以便于對方理解。）。后續會為大家仔細舉例講解，大家現在僅了解一下即可。

當我們在刷抖音視頻時使用的手勢就是輕掃，是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可，對應的手勢類別是上面表格中的輕掃A。如下圖所示，在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向位移大于半個屏幕高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式，因為既省力又便捷。

如果將閾值判定方式改為 ②僅判定手指位移，對應的手勢類別是上面表格中的輕掃 B，并且位移的閾值設置得比較大的話，給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后，想要下滑收起時，App 僅判定手指位移，而且這個位移閾值設置得比較大，對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移，我們也可以通過減少手指位移的閾值來降低負面體驗。

但是某些場景下，②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達到一個特定的閾值才能夠觸發，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁，上下滑動瀏覽微信消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值的話，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序選擇頁。

因此，對于位移類手勢，選用哪種閾值判斷方式要依據用戶使用場景和訴求，不能想當然地設計。

2 常見位移類手勢解析

了解完三個基礎維度后，我們再將其進行組合，從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢，我列舉出了常見的 7 類，如下圖所示，這 7 類基本涵蓋了 95% 以上的場景，我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置，因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。

2.1 拖拽

2.1.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，無論釋放時手指是否仍有速度，受控物都會立即停止移動。（下圖的動態演示由 Principle 制作，觀看會有些不太直觀，大家可以在文章結尾處下載 Principle 源文件后導入到手機里體驗，源文件包含文章提到的所有位移類手勢）

2.1.2 特點

精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果，拖拽適用于對操作精度要求高，對效率要求低的功能。

2.1.3 案例

在 iOS 設置中調節亮度時，在有限范圍內，手指左右拖拽可以控制亮度變化。

2.2甩動

2.2.1定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指仍有速度，受控物將移動一段距離后才慢慢停止，移動的距離與釋放速度呈正相關。若釋放時手指速度為 0 ，則受控物立即停止移動。

2.2.2 特點

精確度低但效率高。由于閾值類型判定釋放速度和手指位移，甩動適用于需要快速瀏覽較多內容的場景，如滾動瀏覽列表。

2.2.3 案例

在微信的消息列表頁，使用甩動手勢控制列表上下移動，若釋放時仍有速度，列表將仍移動一段距離后才慢慢停止。

2.3 輕掃 A

2.3.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值，受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值，受控物將回到原位置。

2.3.2 特點

由于輕掃擁有穩定化效果，因此它能夠保持界面的視覺秩序，避免過多的中間狀態導致界面的雜亂，進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性，就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」，這讓輕掃 A 與輕掃 B-E 有兩點不同，一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少，更加高效，二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容，因此更加省力。

2.3.3 案例

在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向移動大概半個屏幕高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。

2.4 輕掃 B

2.4.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指位移達到閾值，受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值，受控物將回到原位置。

2.4.2 特點

輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式，這提高了觸發切換的難度，使操作成本變高，但是在某些場景下，這也降低了誤操作的概率。如下拉刷新等。

2.4.3 案例

比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達到一個特定的閾值才能夠觸發，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁，這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值判定方式，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序頁面。

因此，當頁面已存在一個滑動操作的情況下，還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時，為了避免誤操作，會將后者的手勢設計為輕掃 B 。

上文提到，輕掃 A 的閾值類型為判定「釋放速度和手指位移」，輕掃 B 的閾值類型為僅判定「手指位移」，由于前者的實現成本比后者高，導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B ，比如之前提到過的美圖秀秀的短視頻評論浮層案例，但我們也可以通過減少手指位移的閾值來降低負面體驗，后文會講解如何與開發同學溝通。

2.5 輕掃 C

2.5.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是受控物并不隨著手指的控制而同步移動，僅當釋放時手指位移達到閾值時，受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值，受控物位置則一直保持不變。

2.5.2 特點

上文講到過釋放后穩定化和相對控制的缺點，釋放后穩定化比較拖沓，相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢（即輕掃 C ），就會導致用戶在滑動屏幕時得不到任何反饋，用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作，整體的交互流程給用戶一種滯后與延遲的感覺。

因此輕掃 C 與其他類別的輕掃相比存在劣勢，但是它也存在很多的 App 的 H5 頁面中，我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多，因此只能退而求其次選擇輕掃 C 這個較差的方案，實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。

2.5.3 案例

下圖左是 QQ 的個性裝扮的 H5 頁面，卡片的切換使用的就是輕掃 C ，如果能夠優化為輕掃 A 體驗會更好，比如下圖右的音街首頁卡片的設計。

2.6 輕掃 D

2.6.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值，無需手指釋放，受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值，無論是否釋放，受控物位置則一直保持不變。

2.6.2 特點

相對控制的方式降低了用戶的掌控感，釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時，我們不希望用戶過于自由地操控對象之間的屬性變化過程，并且犧牲掌控感從而增加單次的切換效率。

2.6.3 案例

比如 iOS 的相機中，左右滑動切換拍攝模式時，由于前后不同模式之間的頁面框架變化較大，切換時會有不同元素的屬性變化，如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓，使用相對控制和釋放前穩定化就能避免這個問題。

2.7 輕掃E

2.7.1 特殊說明

上文我們講到，通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前，受控物一旦穩定化，就脫離了手指的控制，需要手指離開屏幕后再次接觸屏幕開始下一次控制。

輕掃E的不同之處在于它可以在受控物穩定化后，仍然控制受控物朝著下一個節點穩定化，在每個節點之間切換時能夠明顯感覺到分段感，如下圖案例所示。

由于輕掃E相對于輕掃 A-D 的特殊性，控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象，因此我們使用「多段相對控制」來命名輕掃E的這種特殊的控制方式。

2.7.2 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，若手指位移達到閾值，無需手指釋放，受控物就穩定在了一個新位置，但是此時手指還是仍然可以操控受控物繼續移動的，并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。

2.7.3 特點

輕掃 E 適用于需要在多個對象之間快速切換和確認的場景，它的使用感覺很接近拖拽。如下圖所示，我們可以這樣理解，當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時，輕掃 E 就可以視為拖拽。

2.7.4 案例

iOS相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航，它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。

3 實戰案例

了解完上述的維度和常用手勢后，我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時，就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。

本案例是網易云音樂陌生人版一起聽中的一個功能，一起聽的雙方在聽歌過程中會收到彼此共同信息，比如聽歌口味相似度、是否同城、都喜歡哪些歌手等，目的是為了增加可玩性和互動性、降低退出率，鼓勵用戶互相了解、提高一起聽過程中的社交體驗。

為了營造儀式感和避免信息過載，共同信息的展示方式設計為了一次只能看一條，進入浮層后默認展示最新的一條，可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態（如下圖左），我們為其添加了釋放后穩定化效果（如下圖右），同時為了方便用戶可以快速瀏覽舊的共同信息，這里使用的穩定化效果是較弱的，用戶可以通過滑動一次切換多個共同信息。

由于需要滿足用戶快速瀏覽舊的共同信息的訴求，閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」，用戶可以通過控制釋放速度進而控制信息的切換數量?？刂品绞絼t選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類，此手勢為穩定化效果較弱的輕掃 A 。

4 手勢角度的處理

位移類手勢的方向一般為上下或左右，但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時，默認會有一個容錯角度，比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑，如下圖所示。

但是有時開發同學出現失誤，導致容錯角度沒有均分，例如下圖中觸發上滑和下滑的角度極小，導致用戶在上下滑動時非常容易誤操作為左滑和右滑。

云音樂也曾有過類似的遺留問題，iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌（如下圖 A ，現已修復），安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄（如下圖 B ）。

因此，在驗收階段，除了上述的三個維度外，角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下，最好要切換不同的手持方式分別體驗一次，因為有些問題只有在特定的手持方式下才能夠被發現。

客戶端的角度判定方式實際上是一個比較復雜的過程，上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。

5 客戶端的差異

上文講到，基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別，是設計階段一定要定義清楚的。但是除此之外，設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線？手指位移與受控物之間的位移的比率是多少呢？這些都是開發階段不得不面對的。幸運的是，安卓和 iOS 有系統封裝好的一套系統組件可以調用，操作系統自行解決了剛才講到的細節問題，但是 H5 框架下是無法調用系統組件的，手勢的各種細節都需要前端開發人員自己編寫，難度較大，大部分情況只能實現一些比較簡陋的效果，這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。

6 高效溝通

由于信息不對稱，與開發的溝通過程中，很容易出現理解偏差。比較常見的錯誤有：將甩動誤解為輕掃 A ，將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況，很多設計師不知道如何讓開發同學修改，只能說“這個手勢不絲滑，優化一下”，開發同學也是一頭霧水，不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移，需要釋放時的速度也能夠觸發跳轉；這個位移的閾值太高了，滑動時很難觸發跳轉，需要把閾值改為 16pt ”類似這樣準確的描述，就能夠大大降低溝通成本，順利驗收。為了避免溝通出現問題，下面我將日常經驗總結出現希望能夠幫助到大家。

首先，一旦涉及到位移類手勢，除了必要的文字描述外（可參考上述的手勢定義的描述），最好給開發體驗 demo 或者其他 App 上類似的效果，否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示，但是 App 可能會更新，案例可能在未來某個時間就找不到了，所以我用 Principle 做了一個簡易的基礎 demo 集合（如下圖，源文件在文章末尾下載），和我上述介紹的手勢是對應的，大家可以拿著這個 demo 給開發同學演示大概的效果，也可以在這個 demo 源文件修改。

下載鏈接： https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q  密碼: asto。

拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了，一般不需要我們給到額外的標注。但是對于輕掃，我們需要將細節定義清晰，下面將詳細講解。

6.1 閾值類型

上文講到，閾值類型一般有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。①的開發成本高于②。

如果我們選用輕掃的閾值類型是①，開發同學編寫代碼需要兩個參數的閾值，分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2，例如下圖的全屏短視頻和 Banner 。

當然我們也可以自定義一個閾值，比如 100pt 、受控物高度的 1/6 等，沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明，但是如果有特殊需要想要修改默認值，就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值，通常默認就非常的小，幾乎是大于 0 即可觸發，一般情況下使用默認值即可。

在本應該選用①的場景中，如果由于技術成本原因不得不選用②，需要注意的是由于缺少了釋放速度的判定，手指位移的閾值我們需要設置得小一些方便用戶觸發，否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗，手指位移閾值一般定為 16pt 是比較適中的，既不會太容易誤操作也不會難以觸發。

6.2 穩定化效果

輕掃是一定存在穩定化效果的，關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講，系統會監測用戶的行為，用戶在使用滑動時會有按下（down）、移動（move）、抬起（up）三個行為，釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作，開發成本幾乎沒有區別。

上文提到過穩定化效果強弱的概念。穩定化效果越強，單次滑動能夠切換的選項個數越少，效率越低。穩定化效果越弱，單次滑動能夠切換的選項個數越多，效率越高。首先，我們需要確定單次滑動允許切換多個還是只允許切換一個，如果允許切換多個，開發同學會設定一個控制切換難度的系數，而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數，但如果想讓操作更加難或容易觸發，可以告知開發同學修改這個系數。

6.3 控制方式

絕對控制比相對控制的開發成本高，如果開發資源并不是很緊張，需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式，否則很可能被視為相對控制處理。

7 手勢排查

通過本文的學習，我們不但可以在開發工作進行前與開發同學高效溝通，保證開發工作的順利進行，也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄，并且找到合適解決方案，然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格，挑選出一些有代表性的案例給大家作參考，開發同學可以通過它快速明確問題，理解解決方案。

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

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

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