01表單概念

表單頁作為基礎(chǔ)通用組件，也是B端產(chǎn)品中臺(tái)、后臺(tái)出現(xiàn)比較頻繁的頁面之一。看似簡(jiǎn)單的頁面我們?cè)谠O(shè)計(jì)時(shí)卻有很多值得推敲的點(diǎn)，在細(xì)節(jié)處提升用戶易用度，我通過日常的學(xué)習(xí)和公司項(xiàng)目，在這里總結(jié)復(fù)盤了自己的經(jīng)驗(yàn)。

表單的適用場(chǎng)景比較廣泛，常見的基礎(chǔ)表單比如登錄注冊(cè)頁面，這一類往往信息簡(jiǎn)單，格式比較固定，除此之外就是分步表單、高級(jí)表單。常見的場(chǎng)景主要用于新建信息、申請(qǐng)、客戶信息、商品信息等等。這類表單可能存在復(fù)雜邏輯關(guān)系和功能，有時(shí)會(huì)給我們?cè)斐衫_。以下我將以這一類表單為主要案例，一一進(jìn)行拆解。

登錄注冊(cè)頁：表單內(nèi)容簡(jiǎn)單，操作簡(jiǎn)單。

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

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

02設(shè)計(jì)原則

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

表單設(shè)計(jì)基本原則：明確、高效、安全

明確：用戶可以快速定位重要信息和目標(biāo)選項(xiàng)，表單文案和組件可以準(zhǔn)確傳達(dá)任務(wù)含義

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

安全感：操作前有效的防錯(cuò)機(jī)制，操作中有明確的狀態(tài)反饋與容錯(cuò)，允許糾正錯(cuò)誤。操作后及時(shí)的保存，取消機(jī)制。

03表單構(gòu)成

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

標(biāo)題：起到說明表單模塊的作用，是用戶快速明確任務(wù)和定位頁面位置的重要標(biāo)識(shí)。

表單標(biāo)簽：內(nèi)容項(xiàng)的名稱，說明對(duì)應(yīng)填寫項(xiàng)含義及說明用戶該填入什么信息。

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

占位符：一般出現(xiàn)在用戶未填寫內(nèi)容時(shí)，用于輔助提示用戶錄入線索。

提示信息：輔助提示用戶的作用。分為普通提示和錯(cuò)誤提示，也是很好的防錯(cuò)糾錯(cuò)機(jī)制體驗(yàn)。

操作按鈕：“結(jié)束”表單任務(wù)的觸發(fā)器，用于向服務(wù)器提交數(shù)據(jù)或者放棄操作。

表單標(biāo)簽

表單標(biāo)簽樣式常見的有4種，左對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽、頂部標(biāo)簽和行內(nèi)標(biāo)簽，不同的對(duì)齊方式各有優(yōu)勢(shì)和缺點(diǎn)，適應(yīng)在不同的場(chǎng)景。

右對(duì)齊標(biāo)簽（冒號(hào)對(duì)齊）

優(yōu)點(diǎn)：標(biāo)簽指向明確，操作效率高，節(jié)約縱向空間

缺點(diǎn)：可讀性低，不適用于狹長(zhǎng)空間或需要適配多語言的頁面

場(chǎng)景：普通表單填寫，多用于web端

左對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：閱讀性高，節(jié)約縱向空間

缺點(diǎn)：不適用于狹長(zhǎng)空間或需要多語言適配的頁面，操作效率低

場(chǎng)景：詳情陳列

頂部標(biāo)簽

優(yōu)點(diǎn)：視覺對(duì)齊舒適，節(jié)約橫向空間

缺點(diǎn)：縱向空間利用不高

場(chǎng)景：多用于移動(dòng)端表單填寫，多語言適配頁面

行內(nèi)標(biāo)簽

優(yōu)點(diǎn)：視覺對(duì)齊和空間最節(jié)約的方式

缺點(diǎn)：當(dāng)用戶輸入狀態(tài)時(shí)，標(biāo)簽消失，增加用戶記憶負(fù)擔(dān)

場(chǎng)景：多用于登錄注冊(cè)，修改密碼等內(nèi)容極少，不需要記憶的頁面

表單域

表單域是一個(gè)表單頁面的主體部分，其內(nèi)容豐富多樣，從而它可選擇形式也最多，不同的內(nèi)容我們?cè)谠O(shè)計(jì)的時(shí)候應(yīng)該選擇最合適的組件，以及應(yīng)該注意同類型內(nèi)容選擇統(tǒng)一的組件進(jìn)行設(shè)計(jì)。

定義操作框大小

在實(shí)際項(xiàng)目中我們往往會(huì)遇到內(nèi)容長(zhǎng)度不能統(tǒng)一的時(shí)候，那怎么這種情況該怎么處理呢？

以往我的處理方式是強(qiáng)行拉長(zhǎng)對(duì)齊，但我們可以發(fā)現(xiàn)強(qiáng)行對(duì)齊的時(shí)候，視覺沒有得到很大優(yōu)化，反而在隱喻傳達(dá)給用戶錯(cuò)誤的信息，當(dāng)用戶在操作1功能的時(shí)候，可能會(huì)錯(cuò)誤的認(rèn)為這個(gè)選項(xiàng)可以選擇很多，因?yàn)槲覀兘o的選擇框很長(zhǎng)，而實(shí)際上它只能選一個(gè)。這樣就會(huì)給用戶造成不必要的理解成本。

比較好的方式處理方式是我們?cè)O(shè)計(jì)組件庫時(shí)就設(shè)定不同尺寸的操作框，來適應(yīng)不同場(chǎng)景下不同內(nèi)容需求。如果不能對(duì)齊，那就讓它參差不齊。

提示信息

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

行內(nèi)占位符：這是一種基礎(chǔ)應(yīng)用，它即可用于占位，也可用于任務(wù)說明提示，當(dāng)我們說明文字很少的時(shí)候可選擇的一種方式。需要注意的是內(nèi)容務(wù)必簡(jiǎn)潔易懂，減少閱讀成本，不要說“正確的廢話”，語句應(yīng)該是完整的陳述句。

氣泡提示：當(dāng)提示文字很多，主要用于對(duì)標(biāo)簽的名字釋義時(shí)，氣泡彈窗是個(gè)不錯(cuò)的選擇。它的優(yōu)勢(shì)在于可以將更多內(nèi)容折疊，不占用空間，缺點(diǎn)是不直觀，增加了用戶操作步驟。

Tost提示：Tost提示一般是在出發(fā)操作按鈕后給出的提示，可以是操作結(jié)果提示，也可以是內(nèi)容填寫提示。

操作框下方文字提示：當(dāng)提示內(nèi)容很多時(shí)，還可以考慮操作框下方提示，多用于對(duì)輸入內(nèi)容的輔助說明場(chǎng)景。應(yīng)用場(chǎng)景包括以下幾種：

組件組合后在表現(xiàn)層的設(shè)計(jì)

提示信息在頁面中還是一個(gè)輔助性的角色，常規(guī)情況下的視覺層級(jí)應(yīng)該是 表單內(nèi)容>表單標(biāo)簽>提示信息。當(dāng)用戶有錯(cuò)誤操作時(shí)“錯(cuò)誤提示”優(yōu)先級(jí)是最高的，我們一般用帶有警示性的顏色給以醒目顯示。

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

04交互方式

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

組件構(gòu)成表單，實(shí)際項(xiàng)目中，我們的表單往往內(nèi)容會(huì)多而復(fù)雜，設(shè)計(jì)時(shí)可以考慮在布局上優(yōu)化去提升使用體驗(yàn)。

常用的方式有幾種：信息分組、錨點(diǎn)定位、標(biāo)簽頁、分步驟。

在格式塔鄰近性原則中提到，人們將彼此接近的事物、元素，傾向于認(rèn)為它們是相關(guān)的。在設(shè)計(jì)中很早就運(yùn)用到這種認(rèn)識(shí)傾向。所以我們?cè)谛畔⒎纸M時(shí)可以運(yùn)用設(shè)計(jì)手法將相關(guān)信息從視覺上區(qū)分開，提升信息閱讀有效率。

分組方式：

1.簡(jiǎn)單的內(nèi)容使用標(biāo)題分組或卡片分組就可以達(dá)到目的。

2.而內(nèi)容很多，組別之間沒有關(guān)聯(lián)性時(shí)用標(biāo)簽分組。

3.頁面內(nèi)容很長(zhǎng)需要連續(xù)下滑操作時(shí)，錨點(diǎn)定位就可以提供便捷的操作體驗(yàn)。

4.在任務(wù)有先后邏輯關(guān)系時(shí)，分步驟是最好的選擇。

標(biāo)簽分組與錨點(diǎn)定位在表現(xiàn)形式上類似，區(qū)別點(diǎn)在于操作后的結(jié)果。標(biāo)簽分組切換標(biāo)簽后頁面數(shù)據(jù)會(huì)刷新，一般沒有自動(dòng)保存功能，錨點(diǎn)定位則是每次點(diǎn)擊定位頁面不刷新數(shù)據(jù)，始終保持在同一數(shù)據(jù)頁面。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加：ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如何選擇合適的B端設(shè)計(jì)風(fēng)格？

1.B端后臺(tái)分類：

根據(jù)服務(wù)對(duì)象劃分：

一類支持有C端前臺(tái)，支持前臺(tái)產(chǎn)品管理各種資源。第二類服務(wù)企業(yè)，提高企業(yè)工作效率和營(yíng)收。

根據(jù)后臺(tái)功能：

1.監(jiān)控運(yùn)營(yíng)：時(shí)效性強(qiáng)，旨在實(shí)時(shí)反饋異常情況，快速判斷下達(dá)命令，回復(fù)信息、多用于數(shù)據(jù)控制中心。

2.數(shù)據(jù)分析：數(shù)據(jù)結(jié)果的對(duì)比和分析趨勢(shì)，時(shí)效性要求并不高，了解整體和各部分?jǐn)?shù)據(jù)水平，助力決策。

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

4.系統(tǒng)配置：權(quán)限配置、設(shè)備功能配置，操作為主。

2.后臺(tái)深淺兩大風(fēng)格分類：

淺色：

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

深色：

圖像信息密集的后臺(tái)適合圖片、數(shù)據(jù)可視化圖表等；深色對(duì)彩色的圖像信息襯托更強(qiáng)。信息獲取速度較慢，長(zhǎng)時(shí)間可能視疲勞。

3.作者常向產(chǎn)品方提供的風(fēng)格參考

較常見

1.經(jīng)典商務(wù)風(fēng)（導(dǎo)航深、內(nèi)容淺）——專業(yè)、高效、成熟、可信賴（對(duì)照深色西裝人物形象）

      優(yōu)點(diǎn)：市面最常見的風(fēng)格，普世性高，大多數(shù)用戶可快速接受，層次分明

      缺點(diǎn)：視覺缺乏記憶點(diǎn)

 2.輕量科技感（導(dǎo)航淺、內(nèi)容淺）——簡(jiǎn)潔、明快、輕量、年輕（對(duì)照白襯衫打領(lǐng)帶男性）

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

      缺點(diǎn)：純白色導(dǎo)航+頁面層次略曖昧。

 3.藍(lán)色科技風(fēng)（導(dǎo)航中、內(nèi)容中）

      適合：適合科技屬性強(qiáng)的產(chǎn)品界面，圖像圖形展示

      缺點(diǎn)：對(duì)其他色彩信息有干擾，持續(xù)性長(zhǎng)時(shí)間觀看易視覺疲勞

 4.暗黑科技風(fēng)（導(dǎo)航深、內(nèi)容深）

      優(yōu)點(diǎn)：對(duì)色彩表現(xiàn)力強(qiáng)

      缺點(diǎn)：密集文本信息獲取速度會(huì)下降，持續(xù)性長(zhǎng)時(shí)間觀看易視覺疲勞

4.精準(zhǔn)選擇風(fēng)格時(shí)可以進(jìn)一步的考慮：

1.整體行業(yè)風(fēng)格

比如美妝和科技行業(yè)的整體設(shè)計(jì)基調(diào)就不太相同。

2.產(chǎn)品想要傳達(dá)的氣質(zhì)：

理性可靠 or  簡(jiǎn)潔輕松輕量 or 關(guān)懷普世 or 酷炫吸睛….這個(gè)可以和相關(guān)產(chǎn)品經(jīng)理、銷售共同商討

3.目標(biāo)用戶的群體特點(diǎn)及喜好。

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

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

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

4.使用場(chǎng)景及高頻的操作。

例如：最常使用數(shù)據(jù)分析管理，需要快速閱覽多條數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行比對(duì)，更適合淺色風(fēng)格展示表單數(shù)據(jù)。

5.判斷獨(dú)立的平臺(tái)是否為獨(dú)立開發(fā)

獨(dú)立開發(fā)的，可以采取更獨(dú)特設(shè)計(jì)。若平臺(tái)很大需要不同外包公司的合作屬于整合類平臺(tái)則更注重設(shè)計(jì)的包容性。

5.如何讓后臺(tái)設(shè)計(jì)更具特色：

1.重點(diǎn)色的使用

“731配色比例”70%的面板色，30%的導(dǎo)航面板色，10%的強(qiáng)調(diào)色。（這里的用色比例可以根據(jù)內(nèi)容具體再去調(diào)節(jié)只是大概比例）品牌色或重點(diǎn)色：強(qiáng)調(diào)行動(dòng)關(guān)鍵點(diǎn)、重要信息高亮、圖形化說明等。強(qiáng)調(diào)色用就要用的像蛋糕上的櫻桃。起到畫龍點(diǎn)睛作用即可。

2.圖標(biāo)的優(yōu)化

后臺(tái)高頻出現(xiàn)的圖標(biāo)，值得我們花時(shí)間去統(tǒng)一設(shè)計(jì)打磨，調(diào)整圓角粗細(xì)疏密，符合整體界面氣質(zhì)。從圖標(biāo)庫里拖出的圖標(biāo)很多在線條粗細(xì)上是不統(tǒng)一的，好的設(shè)計(jì)在細(xì)節(jié)處也要?jiǎng)尤恕?

B端工具類圖標(biāo)識(shí)別性第一，美觀性第二。B端導(dǎo)航圖標(biāo)更多是在基礎(chǔ)造型上打磨，不需要加花里胡哨的漸變、投影，導(dǎo)航圖標(biāo)一般在24px-16px大小，太復(fù)雜反而看不清。在區(qū)分狀態(tài)的時(shí)候可以考慮加點(diǎn)品牌色

3.空狀態(tài)小插畫

空狀態(tài)插畫是B端設(shè)計(jì)師少有能發(fā)揮自己繪畫天賦小巧思的地方。

圖形化狀態(tài)語言，輔助用戶理解內(nèi)容?？梢詫a(chǎn)品機(jī)械蒼白的文案設(shè)計(jì)表現(xiàn)的更加具有溫度，具有引導(dǎo)性。讓乏味的工作出現(xiàn)一些共情小彩蛋，有趣的插圖動(dòng)畫可以緩解等待的焦慮。

4.登錄注冊(cè)頁

純色背景卡片式：簡(jiǎn)單大方更聚焦登錄操作

插畫背景：場(chǎng)景化展示產(chǎn)品的功能及亮點(diǎn)，讓用戶更有心理預(yù)期

幾何圖形背景：最后和品牌圖形相關(guān)，加深用戶對(duì)產(chǎn)品的品牌印象。

照片背景：相關(guān)場(chǎng)景或產(chǎn)品類型，具象圖片信息更直觀

5.圓角的大小

不同大小的圓角傳達(dá)產(chǎn)品不同的氣質(zhì)，大圓角親和、小圓角精致、中等圓角大眾中庸。

6.優(yōu)化信息層級(jí)

優(yōu)化信息層級(jí)，區(qū)分信息主次可以使閱讀更快，操作更快，界面更有節(jié)奏感。

這時(shí)候你就是那個(gè)考前畫重點(diǎn)的老師

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

判斷一個(gè)模塊里那些是重要信息，強(qiáng)化它！

6.新人需要避免的雷點(diǎn)：

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

2.反常規(guī)用戶習(xí)慣的操作。尊重用戶習(xí)慣，不要為了個(gè)性化去嘗試改變，不要妄圖改變用戶的操作和認(rèn)知的慣性。慣性思維大于設(shè)計(jì)思維，曾經(jīng)遇到過產(chǎn)品因?yàn)橛沂植僮魉砸褜?dǎo)航放在右邊的離譜例子。

3.數(shù)量多，動(dòng)靜大的夸張的動(dòng)效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個(gè)反面例子后臺(tái)，在每一步操作后都出現(xiàn)大的場(chǎng)景動(dòng)效鼓勵(lì)完成，如果作為一個(gè)長(zhǎng)期使用的工作者，我會(huì)覺得每次完成任務(wù)都需要等待動(dòng)畫完成可能只需要2-3s也很浪費(fèi)我的時(shí)間。

4.新人建議多看Antdesign和Element等成熟的組件，創(chuàng)新類組件樣式，最好和和開發(fā)商量是否能夠?qū)崿F(xiàn)。

5.在確定主要風(fēng)格及2-5張主要頁面后，就應(yīng)該著手基礎(chǔ)規(guī)范（色彩字體等，不然后面越做越亂）。

6.一段時(shí)間一個(gè)審美，同一界面中的元素風(fēng)格不統(tǒng)一。

7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長(zhǎng)時(shí)間使用眼睛會(huì)累，產(chǎn)生不耐煩焦躁的負(fù)面情緒。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

背景

在 B 端設(shè)計(jì)領(lǐng)域中，不管是內(nèi)部用戶、產(chǎn)品、設(shè)計(jì)師、開發(fā)，還是外部產(chǎn)品、設(shè)計(jì)師等，總能聽到關(guān)于界面「屏效」方面的訴求或吐槽。

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

為了探索在 B 端產(chǎn)品中用戶為何對(duì)「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設(shè)計(jì)探索與實(shí)踐。「屏效」專題探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開，將實(shí)踐過程中反復(fù)驗(yàn)證有效的設(shè)計(jì)策略沉淀成設(shè)計(jì)手冊(cè)，同步將部分功能進(jìn)行工程化，確保可以開箱即用。

探索階段-為誰在何時(shí)何地設(shè)計(jì)

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

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求》《中后臺(tái)產(chǎn)品滿意度調(diào)研》問卷中認(rèn)為提高屏效能極大提升用戶體驗(yàn)的設(shè)計(jì)師占 58.14%；認(rèn)為提升屏效對(duì)體驗(yàn)有提升的終端用戶占 50.6%。

外部知乎上針對(duì)《Ant Design 4.0 設(shè)計(jì)價(jià)值觀》的 13 條反饋里，其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。

通過了解不同用戶和產(chǎn)品類型發(fā)現(xiàn)，不同的用戶在工作場(chǎng)景的產(chǎn)品使用中有著相似的特征：

案例收集｜發(fā)現(xiàn)問題，大膽假設(shè)

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

視覺、交互層在無需理解業(yè)務(wù)場(chǎng)景和用戶目標(biāo)的情況下，都較容易發(fā)現(xiàn)，屬基礎(chǔ)問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導(dǎo)致的「過度留白」。

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

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

基于假設(shè)，我們進(jìn)行了進(jìn)一步的桌面研究，查閱論文等書籍，尋找設(shè)計(jì)理論的驗(yàn)證和指導(dǎo)。

競(jìng)品分析｜尋找實(shí)踐證據(jù)，謹(jǐn)慎驗(yàn)證

我們知道視覺上界面留白過多（過疏會(huì)增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號(hào)、字高和行高的關(guān)系，因?yàn)椴煌煮w的同字號(hào)實(shí)際像素高度會(huì)有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔?hào)或字行高，決定留白的兩個(gè)重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關(guān)系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數(shù)據(jù)產(chǎn)品中的表格為例，通過直接和間接競(jìng)對(duì)的方式，分別從數(shù)據(jù)的查閱（視覺）、分析（交互）維度進(jìn)行功能點(diǎn)和設(shè)計(jì)細(xì)節(jié)上的比對(duì)，來看看優(yōu)秀產(chǎn)品是如何解決屏效問題。

直接競(jìng)對(duì)：內(nèi)部用戶口碑較好的產(chǎn)品 A、B外界競(jìng)對(duì)：同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格；間接競(jìng)對(duì)：谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表（一維表格）

通過競(jìng)品分析可以發(fā)現(xiàn)，數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數(shù)據(jù)用戶的 Tableau、網(wǎng)易有數(shù)，而谷歌郵箱等工作臺(tái)常用的常規(guī)列表緊湊版本中，留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。

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

除此外，競(jìng)品其他層次的設(shè)計(jì)也做了比對(duì)，總結(jié)來看整體設(shè)計(jì)做法：高密度、少屏數(shù)、少留白等。

文字陷阱：中英文字高不等于字號(hào)

舉個(gè)容易犯錯(cuò)的競(jìng)品參考是，谷歌在緊湊版主題下字號(hào) 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會(huì)發(fā)現(xiàn)非常擁擠，缺乏呼吸感。

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

論文查閱｜尋找理論證據(jù)，謹(jǐn)慎驗(yàn)證

研究表明，低密度認(rèn)知負(fù)荷低，但高密度任務(wù)完成率高，用戶更喜好

參考資料：論文《基于眼動(dòng)的網(wǎng)頁對(duì)稱性和復(fù)雜度對(duì)用戶認(rèn)知的影響的研究》

對(duì)于信息，用戶需要需要閱讀（視覺），思考和理解（認(rèn)知），需要點(diǎn)擊按鈕、操作鼠標(biāo)和打字（行動(dòng)），在人機(jī)工程學(xué)中，統(tǒng)稱為負(fù)荷。即認(rèn)知（記憶）負(fù)荷、視覺負(fù)荷、動(dòng)作負(fù)荷，即分別對(duì)應(yīng)用戶體驗(yàn)設(shè)計(jì)的三個(gè)層級(jí)，信息/視覺/交互。而負(fù)荷所花費(fèi)資源從多到少依次為：認(rèn)知 > 視覺 > 行動(dòng)。

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

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

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

實(shí)踐階段-如何設(shè)計(jì)

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

基于以上的總結(jié)，對(duì)產(chǎn)品進(jìn)行優(yōu)化。下面以一個(gè)簡(jiǎn)單案例進(jìn)行設(shè)計(jì)策略的解讀。一位運(yùn)營(yíng)同學(xué)想對(duì)比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，尋找運(yùn)營(yíng)機(jī)會(huì)點(diǎn)。

如下表格經(jīng)過高屏效策略優(yōu)化前后對(duì)比圖，優(yōu)化前相同維度下不同人群數(shù)量的對(duì)比需要視線來回跳動(dòng)比對(duì)，而優(yōu)化后的表格內(nèi)容，更符合用戶看差異場(chǎng)景下分析目的數(shù)據(jù)查閱，視線鎖定相同維度，即可快速比對(duì)數(shù)值大小。

下面以視覺、交互、信息三個(gè)層次解剖設(shè)計(jì)過程背后的思考。

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

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

如圖，縮小表格行高的同時(shí)，目標(biāo)信息之間的眼動(dòng)距離隨之縮短，在眼動(dòng)舒適區(qū)內(nèi)看到更多信息，便于信息的高效獲取。

交互層｜低跳轉(zhuǎn)-高頻信息前置

理論基礎(chǔ)：菲茨定律是用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型，它由保羅·菲茨在1954年首先提出。這個(gè)模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對(duì)距離、目標(biāo)的大小、移動(dòng)的最短時(shí)間。三者之間關(guān)系公式為：T=a+blog2(D/W+1)，W為其中目標(biāo)的大小；D為到目標(biāo)的距離；T為移動(dòng)到目標(biāo)所用最短時(shí)間。參考資料：菲茲定律

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

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

理論基礎(chǔ)：交互設(shè)計(jì)四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料：《簡(jiǎn)約至上》

用戶為了對(duì)比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動(dòng)條來查看，根據(jù)用戶目標(biāo)，將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列（即將要對(duì)比的人群放置列頭），即可快速查閱，減少眼跳距離。

結(jié)語

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

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

什么是查詢列表？

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

簡(jiǎn)介：

查詢列表可以查看和處理大量的條目數(shù)據(jù)，常有導(dǎo)航至詳情的作用，

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

設(shè)計(jì)目標(biāo)：

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

設(shè)計(jì)原則：

易讀性：采用格式一致外觀，突出有利于對(duì)象識(shí)別的關(guān)鍵信息。利用富交互分層展示信息以減少認(rèn)知負(fù)荷；

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

常規(guī)布局順序：

數(shù)據(jù)過濾 + 數(shù)據(jù)統(tǒng)計(jì) + 數(shù)據(jù)列表 + 批量操作

模板頁面示例：

現(xiàn)在有了官方解答指導(dǎo)，我們就先從分析模仿開始

查詢列表有什么？

從四個(gè)維度開始一一分析：

一、數(shù)據(jù)過濾：

常規(guī)的數(shù)據(jù)過濾分為兩種類型：

1、條件篩選：

特點(diǎn)【結(jié)構(gòu)化+有限范圍】，篩選需求和數(shù)據(jù)都是結(jié)構(gòu)化的，

比如有一個(gè)用戶信息表，需要篩選出性別【男】+城市【北京】+年齡段【18-24歲】的用戶，就是因?yàn)樾畔傩钥梢员涣炕筒鸾馓幚?，我們才能多條件組合篩選（且的關(guān)系）出來；

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

布局：上下結(jié)構(gòu)（常用）、左右結(jié)構(gòu)，條件多時(shí)要配合可折疊操作；

形式：區(qū)域堆疊、表頭、彈窗；

2、搜索查詢：

特點(diǎn)【非結(jié)構(gòu)化+模糊/精準(zhǔn)匹配】，搜索的需求是非結(jié)構(gòu)化的，

比如還是用戶信息表，需要查到一個(gè)叫【寧榮榮】的信息，你就只能去手動(dòng)打字去搜索，因?yàn)樾彰情_放式的信息，無法被結(jié)構(gòu)化處理。

組件：基礎(chǔ)搜索框、高級(jí)搜索框；

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

關(guān)于具體使用，搜索不用多說，遵循系統(tǒng)統(tǒng)一性原則，選擇一處固定位置就好，

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

二、數(shù)據(jù)統(tǒng)計(jì)：

數(shù)據(jù)統(tǒng)計(jì)一般作為查詢列表的重要配角出現(xiàn)，方便用戶直觀了解到當(dāng)前頁面的統(tǒng)計(jì)信息。

就是列表數(shù)據(jù)提煉出來統(tǒng)計(jì)信息，數(shù)據(jù)名稱+數(shù)值，左右、上下布局都可，

有一點(diǎn)強(qiáng)調(diào)一下，業(yè)務(wù)的數(shù)據(jù)統(tǒng)計(jì)要求和條件篩選聯(lián)動(dòng)變化，就要放在條件篩選下方，

如果統(tǒng)計(jì)數(shù)值是固定值，就放置條件篩選上方。

三、數(shù)據(jù)列表：

這里的列表主要陳述標(biāo)準(zhǔn)的【表格Table】形式，

表格被公認(rèn)為是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一。

它常和排序、搜索、篩選、分頁等其他元素一起協(xié)同，適用于信息的收集和展示，以及操作結(jié)構(gòu)化數(shù)據(jù)，

明顯優(yōu)勢(shì)就是結(jié)構(gòu)簡(jiǎn)單，分隔歸納明確，使信息之間更易于對(duì)比，大大提升了用戶對(duì)信息的接收效率和理解程度。

常規(guī)內(nèi)容構(gòu)成：

Header：標(biāo)題、篩選（高頻）、操作按鈕、表搜索、icon（列設(shè)置、刷新、全屏）

Table-Header：復(fù)選框、序號(hào)、列名稱、icon（排序、提示、列篩選、列搜索）

Table-Content：數(shù)據(jù)內(nèi)容、按鈕

Footer：多選數(shù)量，分頁器

四、批量處理：

批量操作是作用于整個(gè)頁面的操作，故放置與頁面最底部，當(dāng)然這個(gè)可以根據(jù)應(yīng)用場(chǎng)景調(diào)整位置，

常見操作有【批量刪除】【批量禁用】【批量導(dǎo)出】。

如何設(shè)計(jì)查詢列表？

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

下圖就是依據(jù)Ant Design設(shè)計(jì)出的第一版查詢列表模板

經(jīng)過產(chǎn)品和研發(fā)評(píng)審，這樣的布局表現(xiàn)雖說“五臟俱全”、“兼容性較好”，但是脫離了用戶實(shí)際使用場(chǎng)景和交互路徑，割裂感也很強(qiáng)，

舉個(gè)例子，你準(zhǔn)備蓋一個(gè)房子，常規(guī)講應(yīng)該有有客廳、臥室、書房、廚房和衛(wèi)生間五個(gè)空間，但你現(xiàn)在只是單純用磚塊砌了五個(gè)房間，大小一樣，毫無順序，想必你也不會(huì)這么蓋···，我們現(xiàn)在從頭開始，你是不是會(huì)考慮：

1、是不是進(jìn)門應(yīng)該是客廳，是不是應(yīng)該大一點(diǎn)好接待客人；

2、書房是不是應(yīng)該遠(yuǎn)離，減少噪音；

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

4、等等···

總結(jié)一句：我們?cè)O(shè)計(jì)出的交互操作&視覺呈現(xiàn)，要契合用戶實(shí)際使用場(chǎng)景和路徑，而不是自己YY。

怎么獲取你想要的答案？調(diào)研和競(jìng)品分析。

調(diào)研可以向產(chǎn)品、銷售、交付人員獲取你想要的信息，

競(jìng)品分析可以找同類型產(chǎn)品進(jìn)行優(yōu)劣分析，取其精華。

下面列舉調(diào)研和競(jìng)品分析的幾個(gè)點(diǎn)說明下：

調(diào)研一

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

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

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

調(diào)研二

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

答：查詢查看沒問題，就是一屏數(shù)據(jù)內(nèi)容展示的太少，標(biāo)題欄、篩選和數(shù)據(jù)統(tǒng)計(jì)占了太多高度，而且篩選也不常用，導(dǎo)出按鈕在底部不明顯，橫向滑動(dòng)很難用，看錯(cuò)行。

機(jī)會(huì)點(diǎn)：優(yōu)化布局，篩選考慮折疊或者表頭篩選，橫向數(shù)據(jù)堆積能否換行展示，導(dǎo)出操作是否可以放在上方？

競(jìng)品分析：紛享銷客CRM

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

競(jìng)品分析：廣聯(lián)達(dá)

優(yōu)點(diǎn)：同樣列表內(nèi)容占主要視覺面積，高頻篩選放出來，低頻篩選采用折疊交互方式，用戶有需要?jiǎng)t點(diǎn)開【更多篩選】去操作，頂部有數(shù)據(jù)統(tǒng)計(jì)支持總攬，Table內(nèi)容對(duì)于強(qiáng)關(guān)聯(lián)的內(nèi)容進(jìn)行上下組合（節(jié)省橫向空間），所有的操作按鈕集合到右上角，方便用戶定位操作。

總結(jié)一下：

以上就是筆者在調(diào)研和競(jìng)品分析上可以獲取到的主要信息，雖說第一版套用AntD模板的設(shè)計(jì)并不理想，但對(duì)于初入B端行業(yè)的筆者來說著實(shí)重要，對(duì)查詢列表的框架、功能、和交互有了基礎(chǔ)指導(dǎo)和了解，才能有后續(xù)的一些針對(duì)特定業(yè)務(wù)場(chǎng)景的設(shè)計(jì)優(yōu)化改版，凡事還是得現(xiàn)有基礎(chǔ)理論支持，后面的路才會(huì)走的更遠(yuǎn)。

言歸正傳，下圖就是針對(duì)上面的總結(jié)優(yōu)化后的查詢列表，相比第一版（可上劃參考對(duì)比）變化還是挺大的，各位可以對(duì)照的優(yōu)化點(diǎn)細(xì)細(xì)體會(huì)下：

1、取消面包屑（系統(tǒng)深度較淺），優(yōu)化（減少）標(biāo)題欄高度；

2、增加數(shù)據(jù)統(tǒng)計(jì)，區(qū)域板塊使用分割線劃分，減少割裂感；

3、頁面操作按鈕集合放置在右上角，主按鈕統(tǒng)一在最右側(cè)；

4、高頻篩選常駐+表頭篩選結(jié)合交互（這里其實(shí)還是有問題的，對(duì)于組合篩選操作并不易用，待優(yōu)化）；

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

6、列鎖定（鎖子icon）可以快速自定義設(shè)置優(yōu)先左側(cè)固定；

7、Table內(nèi)容根據(jù)業(yè)務(wù)內(nèi)容屬性合并上下組合展示，節(jié)省橫向面積（寧可上下滑動(dòng)，也不要橫向滑動(dòng)，至少減少橫向滑動(dòng)的距離）；

這一版看起來整體架構(gòu)層級(jí)依然清晰明確，從視覺角度看更豐富、更有節(jié)奏感，從交互來看也更符合用戶的操作場(chǎng)景，新增了幾個(gè)輔助功能，讓用戶可以根據(jù)自己的業(yè)務(wù)需要自定義配置列表內(nèi)容，更有掌控感，能更高效的查看、處理、查找相關(guān)信息，這也是基本達(dá)到了查詢列表的設(shè)計(jì)目標(biāo)。

經(jīng)過和產(chǎn)品經(jīng)理溝通，此次優(yōu)化思路和方向也很準(zhǔn)確，獲得了肯定，后續(xù)的迭代還需持續(xù)進(jìn)行。

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

Ending

這次的分享是自己在探索B端道路上的小經(jīng)歷，同時(shí)也體會(huì)到一些更深層次的東西，比如設(shè)計(jì)的意義在哪，什么是好的設(shè)計(jì)，怎么才能做出“好”的產(chǎn)品，在此分享給各位，希望能給大家?guī)硇┧季S上的變化，共同進(jìn)步。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前言：

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

先給大家打一個(gè)預(yù)防針（規(guī)范是用來打破的，本篇文章只做為參考價(jià)值）

1. 設(shè)計(jì)規(guī)范包含什么內(nèi)容

設(shè)計(jì)規(guī)范包含視覺規(guī)范和交互規(guī)范，本章節(jié)先說一下視覺規(guī)范，車載交互內(nèi)容會(huì)安排在后續(xù)寫作中…

2. 視覺規(guī)范：

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

文字規(guī)范：

文字是 UI 界面設(shè)計(jì)中重要的組成元素，對(duì)于文字的使用是檢驗(yàn)設(shè)計(jì)師基礎(chǔ)功底的時(shí)候，用得好壞會(huì)直接影響到用戶在使用產(chǎn)品的過程中的一個(gè)體驗(yàn)，文字的使用從這幾個(gè)緯度出發(fā)：字體選擇、字號(hào)大小、顏色、字重、行高.

1. 字體選擇

（我要做一個(gè)良心的博主，讓你們避免侵權(quán)問題，別再傻乎乎的犯字體侵權(quán)的錯(cuò)誤了）

在做車機(jī)系統(tǒng)設(shè)計(jì)的時(shí)候，需要選定該款車機(jī)中文、英文、數(shù)字或多國(guó)語言需要用什么字體。如果在乙方公司呢，客戶會(huì)指定給到你字體包，插播一段小插曲（職場(chǎng)心得：當(dāng)客戶選定字體后，如果該款字體是付費(fèi)字體，你得先和客戶確認(rèn)是否得到使用許可，避免后續(xù)官司糾紛）在甲方爸爸工作的同學(xué)一般會(huì)遇到兩種情況：

• 公司已明確字體（請(qǐng)專業(yè)字體設(shè)計(jì)師設(shè)計(jì)一套）
• 用常規(guī)設(shè)計(jì)的字體，建議使用中文字體：思源黑體、英文/數(shù)字：Roboto。如果有做海外項(xiàng)目的，對(duì)于 Roboto 未涵蓋的語言，建議使用 Noto Sans 字體。Noto Sans 源自類似于 Roboto 的度量標(biāo)準(zhǔn)，旨在實(shí)現(xiàn)視覺上和諧的國(guó)際化。

這邊肯定會(huì)有人問為什么不能用蘋果字體呢？它不是免費(fèi)字體嘛？

普及一下：首先該車機(jī)系統(tǒng)屬于商業(yè)用途，未得到許可使用，這就是侵權(quán)，在 app store 上 發(fā)布的 app 是可以免費(fèi)使用的，因?yàn)檫@是在蘋果生態(tài)下使用，所以不屬于侵權(quán)。

2. 字號(hào)大小與字階

車機(jī)端的字號(hào)大小的制定也是要循規(guī)蹈矩

字號(hào)肯定要遠(yuǎn)大于移動(dòng)端和 web 端，為了確保文字信息的掃描性，結(jié)合了：基于 IDX & 同濟(jì) (2020) 百度 Apollo 中控視覺基礎(chǔ)研究項(xiàng)目，設(shè)置清晰的文字階級(jí)參數(shù)，還有谷歌 Android Automotive OS 研究，以下是用字的規(guī)范（標(biāo)紅色區(qū)域是他們之間的區(qū)別）

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

我們?cè)谧鲰?xiàng)目的時(shí)候，規(guī)定的字體大小維持在 4px，這樣有助于保持一致性和視覺層次感

用字的注意事項(xiàng)：

字體大小控制在 20px，這個(gè)要謹(jǐn)慎使用，一般都是使用在小標(biāo)簽輔助類的文字上，最小的正文字號(hào)為 24px

設(shè)定文字規(guī)范有兩個(gè)好處：

• 文字樣式復(fù)用，不管對(duì)于設(shè)計(jì)師還是開發(fā)同學(xué)來說，都是極大提高工作效率的一件事情
• 對(duì)于界面設(shè)計(jì)來說，有規(guī)可循，避免設(shè)計(jì)時(shí)降低整體的視覺感

3. 字體用色規(guī)則

• 文字與背景顏色對(duì)比度要遵循 WCAG 的標(biāo)準(zhǔn)，需要考慮到無障礙設(shè)計(jì)需求，因此保持在 4.5:1 – 7:1 對(duì)比度，確保文字清晰易讀
• 將注意力集中到最重要的區(qū)域內(nèi)容
• 文本元素之間傳達(dá)視覺層次感

4. 字體字重

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

上實(shí)際案列講解：

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

5. 字體行高

為什么要加這一 pa，因?yàn)檫@個(gè)問題一直有小伙伴問到我，我就一次性解決了，文字模塊需要增加安全距離，這塊比較復(fù)雜。不行我后期錄一期視頻講解，下文也有詳細(xì)的講解。

字體文本的高度一直困擾著設(shè)計(jì)師，我該用什么方式去對(duì)接開發(fā)？在設(shè)計(jì)過程我們是否可以使用文字字號(hào)的高度進(jìn)行對(duì)齊方式，而不是使用文字區(qū)域的行高？NO 肯定是不可以的。

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

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

最后的結(jié)論：按照文本的行高來對(duì)接開發(fā)

普及一下小知識(shí)點(diǎn)：車載段落的行高一般為字號(hào)的 140%-180%的視覺呈現(xiàn)，提供舒適的閱讀環(huán)境給到用戶（取整數(shù)）

下面是一些專業(yè)性的知識(shí) 了解一下：

在設(shè)計(jì)字體過程中，字體設(shè)計(jì)師一般都會(huì)給字體預(yù)留安全距離，讓字體展示更加穩(wěn)定。

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

顏色規(guī)范：

1. 使用場(chǎng)景

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

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

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

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

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

一個(gè)項(xiàng)目車載系統(tǒng)的色彩規(guī)范，包括了品牌色、語義色、中性色。

品牌色：又稱為 “強(qiáng)調(diào)色“ ，通常一個(gè)車載系統(tǒng)只有一個(gè)品牌色，也是出現(xiàn)頻率較高的一種顏色，強(qiáng)調(diào)色一般使用場(chǎng)景為：tab 的切換選中，按鈕開啟狀態(tài)、音樂在播放中的音符小動(dòng)畫等等 （拿我練習(xí)稿講解）

語義色：語義色需要在 UI 界面中承載著具有準(zhǔn)確的信息傳達(dá)，在復(fù)雜場(chǎng)景里顏色的傾向性應(yīng)十分明顯，減少用戶的理解成本和理解時(shí)間，給出行體驗(yàn)者帶來良好的駕駛體驗(yàn)。

根據(jù)交通標(biāo)志的定義，紅色表示禁止、停止、危險(xiǎn)，那么用戶需要在第一時(shí)間識(shí)別出這種信息，黃色為警示或不良結(jié)果等，綠色則代表通行、成功，上訴說的顏色為狀態(tài)色。下面要講一下功能色：說到鏈接色，大家第一時(shí)間肯定想到的是藍(lán)色。

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

3. 如何制作 HMI 色彩規(guī)范？

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

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

保持色彩一致性（請(qǐng)勿使用不同的顏色來任意區(qū)分單個(gè)屏幕中的重復(fù)組件。當(dāng)顏色不能增加價(jià)值時(shí)，請(qǐng)謹(jǐn)慎使用）。

建立視覺層次（通過不透明度值或者是同一色系，但不要過多的使用不透明度或?qū)Ρ榷龋?

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

車載 UI 系統(tǒng)中使用足夠色彩對(duì)比度，上述在使用場(chǎng)景中有所提到。

繼續(xù)講干貨

(在后續(xù)文章安排里我會(huì)單獨(dú)拿出 WCAG 從感知，可操作性，易于理解和穩(wěn)定性去詳細(xì)講解，這次先挑重點(diǎn)說)

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

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

做顏色對(duì)比的網(wǎng)站鏈接，搭梯子訪問：https://next.rsuitejs.com/en/tools/palette

要滿足 AAA 級(jí)準(zhǔn)則，文本視覺呈現(xiàn)及文本圖像至少要有 7:1 的對(duì)比度，針對(duì)大號(hào)文本以及大文本圖像至少有 4.5:1 的對(duì)比度

總結(jié)：

對(duì)于顏色運(yùn)用的細(xì)節(jié)，是證明了一位設(shè)計(jì)師的深度、且具備耐久力。上述內(nèi)容對(duì)于顏色的規(guī)則不適用全部的設(shè)計(jì)方案，還是具體項(xiàng)目具體分析，用戶人群不同，運(yùn)用場(chǎng)景也不一致，比如駕駛者和后排人的屏幕設(shè)計(jì)內(nèi)容肯定會(huì)有差別。還有一個(gè)點(diǎn)在設(shè)計(jì)需要閱讀內(nèi)容頁面，例如：微信發(fā)來的消息、設(shè)置中文本，最好能夠達(dá)到 AAA 標(biāo)準(zhǔn)。

布局規(guī)范：

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

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

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

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸為 120 像素是固定 ）Model S/X 用豎屏設(shè)計(jì) 分辨率 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 控屏，在目前汽車產(chǎn)品中屬于分辨率較高的梯隊(duì) 2400×1200 精度超過 2K（普及一下 2K 分辨率標(biāo)準(zhǔn)為 2048×1080 像素）

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

CarPlay 系統(tǒng)分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已經(jīng)找出規(guī)律了：在設(shè)計(jì)橫屏的時(shí)候高度基本都為 720px，其余橫屏幕按照比列縮小。

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

2. 間距的規(guī)范制定

制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規(guī)格布局 8 像素點(diǎn)網(wǎng)格上構(gòu)建，這意味著規(guī)范中的 UI 組件和元素之間相隔 8px 的倍數(shù)

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

注意事項(xiàng)：提供 4px、12px 間距大小，是為了對(duì)齊較小的元素之間的距離，這兩個(gè)數(shù)值謹(jǐn)慎使用，在大屏幕車載系統(tǒng)內(nèi)，也有很多間距需要大于 96px，因此在對(duì)于這些數(shù)值制定規(guī)范的要求就是 8px 的倍數(shù)即可使用。

說到這邊肯定會(huì)有人有疑問，我們?cè)谧鲆?guī)范時(shí)能不能將間距不設(shè)定成 8 的倍數(shù)，4、5、6……倍數(shù)是否可行呢，當(dāng)然是可以的，“規(guī)矩是死的，人是活的“。只要是按照倍數(shù)疊加完全都 OK，如果選定一種倍數(shù)，就不能加入其他倍數(shù)，如果頁面出現(xiàn)多種間距會(huì)使得頁面沒有節(jié)奏感，打破了親密性原則。

3. 車載模塊中布局

這部分對(duì)于想接觸車載設(shè)計(jì)同學(xué)非常友好。講一下通用的布局，具體交互設(shè)計(jì)等待我后續(xù)更新文章，這次就簡(jiǎn)單按照 1920×720 分辨率每個(gè)模塊我都會(huì)稍微帶一下。

4. 自適應(yīng)布局

講完前面每個(gè)模塊的大致布局，接下來我們來探討一下自適應(yīng)布局，這個(gè)真的非常非常！?。〕?jí)重要，工作后期經(jīng)常會(huì)遇到這個(gè)問題，甲方爸爸后續(xù)有增加屏幕分辨率的需求。我們前期在布局上花費(fèi)的時(shí)間相對(duì)較多（但后期維護(hù)起來可以減少你很多工作量，前期需要你規(guī)劃好基礎(chǔ)框架）

下面拿實(shí)際做過的案列來陳述：拋出一個(gè)問題，我們?nèi)绾螌⒎直媛?920×720頁面的內(nèi)容轉(zhuǎn)變成1280×720 呢？

（有同學(xué)說，直接丟開發(fā)然后他們寫自適應(yīng)布局）導(dǎo)航相關(guān)頁面需要調(diào)用地圖的接口，這個(gè)開發(fā)是可以直接去寫自適應(yīng)，但其余元素還是需設(shè)計(jì)師重新來排版。

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

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

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

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

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

不好意思，一下子說多了沒收住 ，進(jìn)入正題。謹(jǐn)慎重新改變布局 ： 第一是增加開發(fā)工作量，其次就是增加用戶的學(xué)習(xí)成本，當(dāng)然，屏幕是豎屏的時(shí)候則就需要重新布局，因?yàn)闄M寬比例變成了相反數(shù)值。（旋轉(zhuǎn)屏幕大家可以去看看比亞迪的唐、漢車型）

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

圓角的規(guī)范

1. 如何制定圓角的大小規(guī)則

更圓的角和全圓角的使用

對(duì)主要?jiǎng)幼骱徒M件使用更圓的角（更大的角半徑 or 全圓角），是需要重點(diǎn)突出的，圓形對(duì)大多數(shù)直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會(huì)和其他按鈕做出反差，鼓勵(lì)用戶去點(diǎn)擊。比如：全局消息通知按鈕、電話模塊中接聽、掛斷、下拉負(fù)一屏中的按鈕等 （下方是練習(xí)稿案列）

較低的圓角和直角的使用

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

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

谷歌對(duì)于圓角的定義

在設(shè)定圓角規(guī)則時(shí)，需要注意一個(gè)事項(xiàng)：大小種類不宜太多，不然顯得雜亂無章。

注意：即使應(yīng)用布局是在 8dp 網(wǎng)格上構(gòu)建的，但仍會(huì)提供 4dp 的半徑大小，以幫助在較小的組件中形成元素。該值應(yīng)謹(jǐn)慎使用，因?yàn)樗皇?8dp 的倍數(shù)

總結(jié)：圓角還是直角沒有對(duì)錯(cuò)之分，合適的才是最好的。

圖標(biāo)規(guī)范：

1. 圖標(biāo)的種類（車載圖標(biāo)分為應(yīng)用程序圖標(biāo)、系統(tǒng)性圖標(biāo)）

應(yīng)用程序圖標(biāo)

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

我自己也負(fù)責(zé)過有應(yīng)用程序圖標(biāo)的項(xiàng)目，在 1920×720 中為 160px 分辨率和蘋果@3x 分辨率相同 ；在相對(duì)較小的屏幕中應(yīng)該按照比例同比縮小，如同 800×480 分辨率中首頁中的應(yīng)用程序圖標(biāo)為 80px，這是如何計(jì)算的呢？

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

系統(tǒng)性圖標(biāo)（后續(xù) HMI 組件庫搭建文章中我會(huì)詳細(xì)的講解）

該系統(tǒng)提供了許多小圖標(biāo)（代表常見任務(wù)和內(nèi)容類型），供導(dǎo)航欄和選項(xiàng)卡欄中使用。最好盡可能使用這些內(nèi)置圖標(biāo)，因?yàn)樗鼈兪侨藗兪煜さ摹?

2. 圖標(biāo)的尺寸

大廠是如何制定圖標(biāo)尺寸

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

根據(jù)百度 IDX 駕駛體驗(yàn)中心，在對(duì)于《車載 HMI 界面效果客觀指標(biāo)實(shí)驗(yàn)報(bào)告》在基于視距為 50cm，計(jì)算出最小圖標(biāo)為 9mm 推薦使用 12mm。視覺上的 1cm 的實(shí)際像素是多少呢？這就是一個(gè)錯(cuò)誤的想法，上面文章中也有提到屏幕分辨率無法與物理長(zhǎng)度單位進(jìn)行轉(zhuǎn)換，（實(shí)際項(xiàng)目工作經(jīng)驗(yàn)告訴我，因?yàn)橄嗤钠聊淮笮〉欠直媛什灰粯?，所以得出的結(jié)果不能共用）

PPI 的計(jì)算

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

最小圖標(biāo)尺寸計(jì)算

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

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

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

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

國(guó)際計(jì)算單位 1 英寸 = 2.54cm

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

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

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

得出結(jié)論：視覺上的 1cm 的實(shí)際像素是有所差距的。

按照設(shè)計(jì)規(guī)則：按 4 的倍數(shù)來制定，因此最小圖標(biāo)為 40px（這個(gè)結(jié)論只是作為推薦使用，在做項(xiàng)目的時(shí)候，變數(shù)有很多，甲方爸爸就喜歡超級(jí)大的，你也沒辦法，所以還是按照項(xiàng)目來制定）

為了計(jì)算這個(gè)我還特地的回顧了高中學(xué)習(xí)的開根號(hào)、初中的最大公約數(shù)都搬出來了，幸好當(dāng)時(shí)數(shù)學(xué)還算是個(gè)小學(xué)霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 圖標(biāo)大小規(guī)范

基礎(chǔ)的圖標(biāo)：主圖標(biāo)：44px 次要圖標(biāo)：36px 第三方圖標(biāo)：24px

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

百度車載生態(tài)開放平臺(tái)下載了他們組件庫，進(jìn)行了研究。

基礎(chǔ)為圖標(biāo)：48px 次要圖標(biāo) 40px（最小圖標(biāo)尺寸）

這邊還要說一下，對(duì)于大圖標(biāo)的尺寸設(shè)定，會(huì)有很多尺寸 icon，后續(xù)我還會(huì)在輸出關(guān)于車載圖標(biāo)詳細(xì)的內(nèi)容，敬請(qǐng)關(guān)注吧。

3. 圖標(biāo)的點(diǎn)擊區(qū)域

圖標(biāo)觸摸區(qū)域分為駕駛中使用和靜止中使用

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

靜止使用例如：在設(shè)置頁面中調(diào)節(jié)車輛設(shè)置中的屬性，巡航模式、電動(dòng)尾門打開百分比的調(diào)節(jié)等等。

谷歌制定觸摸區(qū)域的規(guī)則

最小觸摸目標(biāo)尺寸為 76 x 76px，需要在單個(gè)圖標(biāo)設(shè)計(jì)基礎(chǔ)上再額外增加一塊觸摸區(qū)域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設(shè)計(jì)規(guī)范中最小手指觸摸的區(qū)域?yàn)?44x44px

這是我根據(jù)實(shí)際項(xiàng)目并在車內(nèi)進(jìn)行路測(cè)（路測(cè)：駕駛中測(cè)試）中得出結(jié)論。

還有一種特殊情況：文字+圖標(biāo)組合點(diǎn)擊區(qū)域，在 icon 很小的時(shí)候也可以考慮將文字也組合一起，增大點(diǎn)擊區(qū)域

4. 圖標(biāo)設(shè)計(jì)的統(tǒng)一規(guī)則：

• 統(tǒng)一風(fēng)格
• 統(tǒng)一光源
• 統(tǒng)一線條粗細(xì)
• 統(tǒng)一圓角/直角
• 統(tǒng)一傾斜角度
• 斷點(diǎn)的距離、大小統(tǒng)一

5. 最后最一個(gè)小插曲：命名的規(guī)范

之前經(jīng)常有小伙伴問我，落地項(xiàng)目的 icon 切圖命名規(guī)范怎么制作？就拿我之前做的風(fēng)格稿首頁來說，首頁音樂卡片中的“下一首”的圖標(biāo)如何命名。

首先分析這個(gè) icon 在哪個(gè)頁面當(dāng)中 or 用在哪里，接下來就是他的屬性是什么 icon 還是 button，其次就是這個(gè) icon 代表什么，這個(gè) icon 的大小，因?yàn)樵谝粋€(gè)系統(tǒng)里面會(huì)有重復(fù)功能 icon，所以是有必要增加大?。ㄟ@塊內(nèi)容是選填項(xiàng)），最后在增加這個(gè) icon 是處于什么狀態(tài)下，狀態(tài)分為：禁用、常態(tài)、按下、選中

最后呈現(xiàn)：首頁_音樂_下一首_常態(tài) ，對(duì)接開發(fā)應(yīng)該是翻譯成英文。

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

總結(jié)

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

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：優(yōu)設(shè)  作者：設(shè)計(jì)界的影帝

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

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

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

風(fēng)格更加統(tǒng)一，功能小幅完善

在整體觀感上，和補(bǔ)丁摞補(bǔ)丁的 Windows 10 相比， Windows 11 擁有著更加明確統(tǒng)一的視覺設(shè)計(jì)，足夠簡(jiǎn)約又不會(huì)顯得簡(jiǎn)陋，充滿了一種濃郁的「形式跟隨功能」的設(shè)計(jì)特質(zhì)。微妙又高級(jí)的「亞克力美學(xué)」 Fluent Design 則顯而易見地貫穿整個(gè)系統(tǒng)，所以 Windows 11 應(yīng)該就是 Fluent design 的第一次集中式、成體系的呈現(xiàn)和總結(jié)。

在系統(tǒng)功能上，一眼就可以看到新增的桌面小組件功能模塊，經(jīng)過這么多年這么多系統(tǒng)的迭代 和驗(yàn)證，相信微軟這次的桌面小組件不會(huì)是那么雞肋的存在，應(yīng)該可以整出一個(gè)頗為不錯(cuò)的桌面信息中心：

新的軟件商店也根據(jù)當(dāng)前風(fēng)格進(jìn)行了優(yōu)化：

在游戲領(lǐng)域玩兒得風(fēng)生水起的 Xbox 是肯定會(huì)出現(xiàn)在新的 Windows 11 當(dāng)中，完善的游戲服務(wù)應(yīng)該成為 Windows 11 的加分項(xiàng)，不過具體如何應(yīng)該需要新版本正式發(fā)布之后再去驗(yàn)證：

在動(dòng)效和交互上，Windows 11 徹底擺脫了 Windows 10 時(shí)代似是而非的狀態(tài)，經(jīng)歷過 Surface 系列產(chǎn)品的反復(fù)迭代和測(cè)試，Windows 11 在觸摸交互上終于有點(diǎn)樣子了，不再拉胯。得益于之前在 Surface Neo 和 Duo 上的探索，在分屏交互上，也提供了非常成熟的原生交互體驗(yàn)：

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

順應(yīng)潮流的「開始菜單」

其實(shí)「開始菜單」這個(gè)東西談不上是微軟的獨(dú)創(chuàng)，在 Windows 之前，這種系統(tǒng)級(jí)別的菜單設(shè)計(jì)由來已久，Macintosh 在左上角：

BeOS 在右上角：

不過和當(dāng)年大量交互邏輯千奇百怪的桌面系統(tǒng)相比，MacOS 和 BeOS 這種終究是少數(shù)，而面向兼容機(jī)市場(chǎng)的 Windows 95 把這種易于上手、高度集成的功能發(fā)揚(yáng)光大，不得不說既是時(shí)勢(shì)，也是機(jī)遇。

Windows 95 上的「開始菜單」設(shè)計(jì)可以說是當(dāng)時(shí)同類設(shè)計(jì)中的最佳實(shí)踐，易于理解的樹狀結(jié)構(gòu)和明確的位置結(jié)構(gòu)，讓整個(gè)操作系統(tǒng)具備了更強(qiáng)的可用性。

Windows 系列在 開始菜單上的成功影響了后續(xù)包括 Gnome 、 KDE 在內(nèi)的諸多 Linux 桌面環(huán)境，它們大都是順應(yīng)著這種潮流來進(jìn)行桌面端控件的設(shè)計(jì)。

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

在 2000 年之前有大量的鍵盤這樣的鍵盤，而如今我們?cè)诹闶凼袌?chǎng)上已經(jīng)很少能見到這類產(chǎn)品了。為「開始菜單」單獨(dú)安置一個(gè)按鍵雖然也不是 Windows 的獨(dú)創(chuàng)，但是從這類鍵盤的市場(chǎng)份額的變化，也能看出 Windows 的市場(chǎng)變化。

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

在「開始菜單」上嘗到甜頭之后，微軟幾乎在每一代 WIndows 操作系統(tǒng)都會(huì)將這個(gè)默認(rèn)位于界面左下角的組件進(jìn)行升級(jí)，并且按照自己的想法進(jìn)行了「優(yōu)化」（當(dāng)然后來的某些設(shè)計(jì)也確實(shí)是毀譽(yù)參半）。

Windows 98

Windows Me/2000

Windows 98/2000/Me 基本上還是在延續(xù) Windows 95 上的簡(jiǎn)單的層級(jí)結(jié)構(gòu)，但是由于受限于硬件性能和操作系統(tǒng)領(lǐng)域的流行風(fēng)格，這一波系統(tǒng)的開始菜單在視覺上也保留了當(dāng)時(shí)桌面系統(tǒng)的浮雕式控件的視覺風(fēng)格。

Windows XP

值得一提的是，促使微軟痛定思痛認(rèn)真搞 Windows XP 的視覺風(fēng)格的重要原因之一，其實(shí)是蘋果這邊的 Mac OS X 在視覺設(shè)計(jì)上搞得風(fēng)生水起。要說微軟一新追求技術(shù)無心設(shè)計(jì)肯定是假的，因?yàn)樵谌ツ晷孤┑牟糠?XP 源代碼當(dāng)中，有微軟模擬的 Mac OS X 風(fēng)格的主題：

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

Windows xp

在 2000 年前后，隨著個(gè)人電腦的全面鋪開，操作系統(tǒng)戰(zhàn)爭(zhēng)開始在開源和商業(yè)領(lǐng)域充分展開，商業(yè)巨頭和個(gè)人開發(fā)者幾乎全都參與進(jìn)來，無論功能還是視覺設(shè)計(jì)上，都必須一較高下。

視覺風(fēng)格升級(jí)的「開始菜單」

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

Windows Vista

以 Aero 為命名的視覺風(fēng)格，最講究的是玻璃式的光影變幻，Vista 當(dāng)中的「開始菜單」也隨之進(jìn)行了更為「現(xiàn)代」的改進(jìn)，精簡(jiǎn)了右側(cè)文件夾的圖標(biāo)，通過雙色對(duì)比來區(qū)分功能屬性，也增加了信息層級(jí)，半透明的玻璃窗口也可以更好地傳遞界面之間的前后關(guān)系。

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

菜單上變化不大，功能和設(shè)計(jì)上的延續(xù)性顯而易見，隨后就是翻車了的 Windows 8:

需要強(qiáng)調(diào)的是，Windows 8 所處的整個(gè)時(shí)代，是移動(dòng)端設(shè)計(jì)開始繁榮的開端、擬物化設(shè)計(jì)開始不足以滿足大眾新鮮感的階段，而從微軟的 Zune 部門開始流行的 Metro 設(shè)計(jì)風(fēng)潮開始影響整個(gè)公司走向，催生了 Windows 8 這樣的新設(shè)計(jì)：

將簡(jiǎn)約的LOGO和多彩多變的動(dòng)態(tài)磁貼結(jié)合到一起，用層級(jí)清晰的文字排版來快速傳遞更多的信息，不同尺寸的磁貼結(jié)合成不同的組，這種「開始菜單」的設(shè)計(jì)是近乎顛覆式的，但是對(duì)于用戶認(rèn)知上也同樣是顛覆式的。

而完整的程序菜單需要向下滾動(dòng)才能呈現(xiàn)，而用戶看到的是布滿整個(gè)屏幕的小色塊和文字：

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

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

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

后移動(dòng)端時(shí)代的「開始菜單」

Windows Phone完蛋了。Windwos 8 也終于成為過去了。推倒重來升級(jí)系統(tǒng)，把問題留到過去似乎永遠(yuǎn)是最好的選擇。

在 Windows 10 當(dāng)中，動(dòng)態(tài)磁貼的優(yōu)點(diǎn)和傳統(tǒng) Windows 「開始菜單」重新組合到一起，久經(jīng)驗(yàn)證的功能——或者說符合長(zhǎng)久以來用戶認(rèn)知的功能，又重新集成回來，讓「開始菜單」回歸了「用戶舒適」的狀態(tài)。

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

另一方面，在「開始菜單」的設(shè)計(jì)上，Windows 10 前期和后期在視覺層面上有大量的細(xì)節(jié)差異。功能上雖然保留了動(dòng)態(tài)磁貼的優(yōu)點(diǎn)，但是在具體的性能、圖標(biāo)元素、功能體驗(yàn)、視覺風(fēng)格上，進(jìn)行了大幅度的升級(jí)和改變：

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

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

但是功能上，「開始菜單」不管怎么換，它的默認(rèn)位置倒是沒怎么變過。在原本的計(jì)劃當(dāng)中，Windows 10 之后應(yīng)該是會(huì)有一個(gè)針對(duì)移動(dòng)端優(yōu)化、面向雙屏設(shè)備的 Windows 10x 系統(tǒng)。原本，Windows 10x 系統(tǒng)會(huì)伴隨著雙屏設(shè)備 Surface Neo 來發(fā)布的：

Surface Neo

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

泄漏的 Windwos 10x 界面

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

不過最重要的是，Windows 10x 和 Windows 11 在「開始菜單」上的設(shè)計(jì)，算是一次向著「移動(dòng)端設(shè)計(jì)最佳實(shí)踐」的妥協(xié)。

交互上選擇了最佳實(shí)踐

雖然居中的「開始菜單」看起來很像 macOS 的 Dock 的設(shè)計(jì)，但是，實(shí)際情況并不是這么簡(jiǎn)單。

一方面，微軟內(nèi)部來看，試圖重新進(jìn)入移動(dòng)端領(lǐng)域的微軟選擇了 Surface Neo 和 Surface Duo 兩款設(shè)備作為切入點(diǎn)。前者使用的是 Windows ，而后者使用的是魔改后的 Android：

在移動(dòng)端計(jì)算設(shè)備占據(jù)主流的今天，居中的底部快捷方式是經(jīng)過了十幾年驗(yàn)證的「最佳實(shí)踐」。

另一方面，在桌面端操作系統(tǒng)上，這種趨勢(shì)也相當(dāng)?shù)拿黠@。macOS 自不必說，而借助低價(jià)入門硬件和教育類電腦采購而快速崛起的 ChromeOS 設(shè)備，也是使用底部居中 Dock 的大戶：

ChromeOS

圍繞著 APP 和服務(wù)的整個(gè)軟件生態(tài)讓用戶對(duì)于復(fù)雜的系統(tǒng)級(jí)菜單功能沒有早年間那么強(qiáng)烈的依賴，大量的移動(dòng)端用戶的基礎(chǔ)認(rèn)知和桌面端操作系統(tǒng)交互的逐步統(tǒng)一，讓 Windows 早已沒有必要在這個(gè)簡(jiǎn)單的事情上去做不必要的差異化，這可能才是 Windows 11 順應(yīng)趨勢(shì)的主要原因。

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

Widonws 11 目前泄漏的開始菜單的設(shè)計(jì)相比于以往，更加簡(jiǎn)約，復(fù)雜的層級(jí)結(jié)構(gòu)被精簡(jiǎn)掉了，APP 快捷方式保留了，點(diǎn)擊 All apps 可以訪問全部程序，原本固定的文件夾選項(xiàng)被人工智能推薦所替代，順應(yīng)著時(shí)代潮流，最重要的關(guān)機(jī)等功能依然存在。

控制面板這類對(duì)于移動(dòng)端原住民有認(rèn)知負(fù)荷的功能，也在這個(gè)后 Win10 時(shí)代，化作一個(gè)「設(shè)置」快捷方式，和其他的 APP 待在一起，如同其他的手機(jī)或平板一般。

Windows 11 正式發(fā)布會(huì)就在幾天之后，關(guān)于全新的視覺設(shè)計(jì)、用戶體驗(yàn)細(xì)節(jié)上的東西，應(yīng)該有更多看點(diǎn)，不過最好還是再等幾天，正式版上手之后，再詳聊。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：優(yōu)設(shè)   作者：陳子木

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

1 位移類手勢(shì)的描述維度

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

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

一談到位移類手勢(shì)，大部分設(shè)計(jì)師的腦海中可能會(huì)浮現(xiàn)出拖拽、甩動(dòng)和輕掃這三個(gè)術(shù)語。然而，當(dāng)我們想仔細(xì)談?wù)撍麄內(nèi)咧g的區(qū)別時(shí)，大部分設(shè)計(jì)師可能無法準(zhǔn)確地描述。為了能夠準(zhǔn)確描述三者的區(qū)別，我們?cè)谶@里引入三個(gè)維度的概念，它們分別是控制方式、穩(wěn)定化效果、以及閾值類型，這三者的不同的變化組合可以創(chuàng)造不同的位移類手勢(shì)，拖拽、甩動(dòng)和輕掃之間的區(qū)別也是這三個(gè)維度影響的。當(dāng)我們?cè)谟懻摬煌灰祁愂謩?shì)之間的區(qū)別時(shí)，不如說是在討論這三個(gè)維度之間的區(qū)別。比如常見的輕掃手勢(shì)，因?yàn)檫@三個(gè)維度的變化就會(huì)產(chǎn)生不同的變種，而且不同變種在體驗(yàn)上也存在很大差別，若不分場(chǎng)景隨意使用，很容易就影響用戶體驗(yàn)。那接下來我們首先了解一下這三個(gè)維度。

1.1 控制方式

第一個(gè)維度是控制方式，它分為絕對(duì)控制和相對(duì)控制，也可以通俗的表達(dá)為跟手和不跟手，區(qū)別如下。

絕對(duì)控制/跟手：施加控制的一方（后文簡(jiǎn)稱施控物）的某個(gè)屬性變化與被施加控制的一方（后文簡(jiǎn)稱受控物）的某個(gè)屬性變化是對(duì)應(yīng)的。

相對(duì)控制/不跟手：施控物的某個(gè)屬性變化與受控物的某個(gè)屬性變化不是對(duì)應(yīng)的。

比如在網(wǎng)易云音樂的播放頁（下圖左），左右滑動(dòng)黑膠時(shí)，手指是施控物，黑膠是受控物，手指的橫向位置變化和黑膠的橫向位置變化是對(duì)應(yīng)的，即絕對(duì)控制。上滑調(diào)出評(píng)論頁時(shí)（下圖右），評(píng)論頁的位置和手指的位置沒有對(duì)應(yīng)關(guān)系，手指的上滑僅僅控制評(píng)論頁是否出現(xiàn)，即相對(duì)控制。

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

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

1.2 穩(wěn)定化效果

1.2.1 定義

當(dāng)我們使用手勢(shì)控制某個(gè)受控物時(shí)，由于手勢(shì)的某個(gè)屬性（如手指位移）達(dá)到閾值，進(jìn)而導(dǎo)致受控物的某個(gè)屬性穩(wěn)定在了特定狀態(tài)的效果被稱為「穩(wěn)定化效果」，或者也可以稱為「吸附」。

穩(wěn)定化效果能夠保持界面的視覺秩序，避免過多的中間狀態(tài)導(dǎo)致界面的雜亂，進(jìn)而幫助用戶聚焦信息。

是否有穩(wěn)定化效果是區(qū)別輕掃與另外兩個(gè)手勢(shì)即甩動(dòng)和拖拽的重要維度，當(dāng)某個(gè)位移類手勢(shì)有穩(wěn)定化效果，我們就將其稱作輕掃。

以滑動(dòng)切換抖音視頻為例，當(dāng)手指上滑的位移距離和釋放速度其中的某一項(xiàng)屬性達(dá)到閾值后，下一條視頻會(huì)往上移動(dòng)到一個(gè)固定的位置然后進(jìn)入穩(wěn)定狀態(tài)，而不會(huì)出現(xiàn)停留在不完整的中間狀態(tài)，如下圖所示。

在 iOS 端的微信消息頁左滑某條消息后會(huì)出現(xiàn)更多操作按鈕，按鈕會(huì)在手指滑動(dòng)的距離達(dá)到閾值并松開后穩(wěn)定在一個(gè)固定的大小，而不會(huì)停在類似下圖左所示的混亂的中間狀態(tài)。

在多內(nèi)容選擇的場(chǎng)景中，如果滑動(dòng)與選中是綁定的話，一般需要使用穩(wěn)定化效果。例如在 iOS 相機(jī)里選擇濾鏡時(shí)，滑動(dòng)濾鏡選項(xiàng)不但能夠控制濾鏡選項(xiàng)的位置，并且會(huì)自動(dòng)選中一個(gè)位于中間位置的濾鏡，位置的穩(wěn)定化避免了被選中選項(xiàng)的不明確。

如果滑動(dòng)與選中是分開的，比如美圖秀秀的濾鏡選項(xiàng)需要先滑動(dòng)后選中，這種情況下穩(wěn)定化效果不是必要的。

1.2.2 與效率的關(guān)系

不同的穩(wěn)定化規(guī)則帶給用戶的體驗(yàn)差異是非常大的，最明顯的差異是在效率方面。我們使用穩(wěn)定化效果的強(qiáng)弱來理解，穩(wěn)定化效果越強(qiáng)，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越少，效率越低。穩(wěn)定化效果越弱，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越多，效率越高。

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

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

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

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

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

在某些場(chǎng)景，用戶需要先通過高效的方式選擇特定區(qū)域的內(nèi)容，然后進(jìn)入聚焦?fàn)顟B(tài)進(jìn)行內(nèi)容瀏覽和慢速的切換，此時(shí)我們需要設(shè)計(jì)兩種切換效率不同的手勢(shì)應(yīng)對(duì)前后場(chǎng)景的變化。如下圖，在 iOS 的照片 App 中，先使用切換效率較高的甩動(dòng)進(jìn)行粗略切換找到目標(biāo)圖片大概位置，點(diǎn)擊進(jìn)入大圖模式時(shí)使用切換效率較低的輕掃進(jìn)行精確切換查看。

1.2.3 觸發(fā)時(shí)機(jī)

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

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

1.3 閾值類型

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

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

市面上的 App 暫時(shí)不存在僅通過釋放速度判定而與手指位移無關(guān)的閾值判定方式，因?yàn)槠洳惶铣ＷR(shí)。因此我們?cè)谠O(shè)計(jì)位移類手勢(shì)時(shí)，能夠選擇的閾值判定方式常見的有兩種：① 判定手指位移和釋放速度滿足任意一個(gè)即可；② 僅判定手指位移。

當(dāng)我們?cè)O(shè)計(jì)手勢(shì)時(shí)，就需要考慮兩者的區(qū)別。由于 ① 比 ② 增加了釋放速度帶來的額外移動(dòng)距離，因此 ① 的主要優(yōu)點(diǎn)是高效。但是由于我們無法預(yù)判釋放速度帶給受控物的移動(dòng)距離長(zhǎng)短，所以相對(duì)應(yīng)的缺點(diǎn)就是易誤操作和不精確。②就恰恰相反，由于不存在釋放速度造成的不確定因素，它的優(yōu)點(diǎn)是不易誤操作和精確，缺點(diǎn)是低效。

甩動(dòng)和拖拽之間的區(qū)別就在于閾值判定方式，甩動(dòng)是 ① ，拖拽是 ② 。如下圖，當(dāng)在微信消息列表找相應(yīng)的消息時(shí)，用戶的訴求就是能夠快速找到特定消息的位置，對(duì)特定消息的出現(xiàn)在屏幕的位置也沒有特定要求，只要能夠被手指點(diǎn)擊到即可，因此選用甩動(dòng)較為合適，但是對(duì)于調(diào)節(jié)音量、亮度這一類的操作，滑動(dòng)的范圍有限，因此用戶對(duì)效率沒有太高的要求，但是對(duì)于滑塊位置的精確度有要求，因此選用拖拽是更為恰當(dāng)?shù)摹?img src="https://img.zcool.cn/community/01b65a60c3810a11013eaf70574ca0.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" />

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

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

當(dāng)我們?cè)谒⒍兑粢曨l時(shí)使用的手勢(shì)就是輕掃，是否滑動(dòng)到下一條視頻進(jìn)行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個(gè)即可，對(duì)應(yīng)的手勢(shì)類別是上面表格中的輕掃A。如下圖所示，在刷抖音時(shí)，如果使用判定手指位移的方式，我們可以將手指在垂直方向位移大于半個(gè)屏幕高度的距離，從而切換到下一個(gè)視頻。如果使用判定釋放速度的方式，我們可以移動(dòng)任意的垂直距離但是手指離開屏幕時(shí)保留一個(gè)速度從而切換到下一個(gè)視頻。大部分情況下用戶都會(huì)使用判定釋放速度的方式，因?yàn)榧仁×τ直憬荨?/span>

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

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

因此，對(duì)于位移類手勢(shì)，選用哪種閾值判斷方式要依據(jù)用戶使用場(chǎng)景和訴求，不能想當(dāng)然地設(shè)計(jì)。

2 常見位移類手勢(shì)解析

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

2.1 拖拽

2.1.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)，無論釋放時(shí)手指是否仍有速度，受控物都會(huì)立即停止移動(dòng)。（下圖的動(dòng)態(tài)演示由 Principle 制作，觀看會(huì)有些不太直觀，大家可以在文章結(jié)尾處下載 Principle 源文件后導(dǎo)入到手機(jī)里體驗(yàn)，源文件包含文章提到的所有位移類手勢(shì)）

2.1.2 特點(diǎn)

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

2.1.3 案例

在 iOS 設(shè)置中調(diào)節(jié)亮度時(shí)，在有限范圍內(nèi)，手指左右拖拽可以控制亮度變化。

2.2甩動(dòng)

2.2.1定義

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

2.2.2 特點(diǎn)

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

2.2.3 案例

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

2.3 輕掃 A

2.3.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)。若釋放時(shí)的速度和手指位移有任意一個(gè)達(dá)到閾值，受控物將穩(wěn)定在一個(gè)新位置。若釋放速度和手指位移沒有任何一個(gè)達(dá)到閾值，受控物將回到原位置。

2.3.2 特點(diǎn)

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

2.3.3 案例

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

2.4 輕掃 B

2.4.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)。若釋放時(shí)手指位移達(dá)到閾值，受控物將穩(wěn)定在一個(gè)新位置。若釋放時(shí)手指位移沒有達(dá)到閾值，受控物將回到原位置。

2.4.2 特點(diǎn)

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

2.4.3 案例

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

因此，當(dāng)頁面已存在一個(gè)滑動(dòng)操作的情況下，還存在另外一個(gè)方向相同的滑動(dòng)操作且僅會(huì)在邊界情況下才能觸發(fā)時(shí)，為了避免誤操作，會(huì)將后者的手勢(shì)設(shè)計(jì)為輕掃 B 。

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

2.5 輕掃 C

2.5.1 定義

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

2.5.2 特點(diǎn)

上文講到過釋放后穩(wěn)定化和相對(duì)控制的缺點(diǎn)，釋放后穩(wěn)定化比較拖沓，相對(duì)控制讓用戶缺乏掌控感。兩者如果應(yīng)用到了同一個(gè)手勢(shì)（即輕掃 C ），就會(huì)導(dǎo)致用戶在滑動(dòng)屏幕時(shí)得不到任何反饋，用戶會(huì)疑惑是否因?yàn)樽约翰僮鞑划?dāng)或是設(shè)備出現(xiàn)故障。只有當(dāng)用戶手指離開屏幕后才會(huì)發(fā)現(xiàn)觸發(fā)了操作，整體的交互流程給用戶一種滯后與延遲的感覺。

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

2.5.3 案例

下圖左是 QQ 的個(gè)性裝扮的 H5 頁面，卡片的切換使用的就是輕掃 C ，如果能夠優(yōu)化為輕掃 A 體驗(yàn)會(huì)更好，比如下圖右的音街首頁卡片的設(shè)計(jì)。

2.6 輕掃 D

2.6.1 定義

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

2.6.2 特點(diǎn)

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

2.6.3 案例

比如 iOS 的相機(jī)中，左右滑動(dòng)切換拍攝模式時(shí)，由于前后不同模式之間的頁面框架變化較大，切換時(shí)會(huì)有不同元素的屬性變化，如果使用絕對(duì)控制和釋放后穩(wěn)定化就會(huì)導(dǎo)致切換混亂且拖沓，使用相對(duì)控制和釋放前穩(wěn)定化就能避免這個(gè)問題。

2.7 輕掃E

2.7.1 特殊說明

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

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

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

2.7.2 定義

使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)，若手指位移達(dá)到閾值，無需手指釋放，受控物就穩(wěn)定在了一個(gè)新位置，但是此時(shí)手指還是仍然可以操控受控物繼續(xù)移動(dòng)的，并且繼續(xù)移動(dòng)過程中如果手指位移達(dá)到閾值將會(huì)到達(dá)下一個(gè)穩(wěn)定化狀態(tài)。

2.7.3 特點(diǎn)

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

2.7.4 案例

iOS相機(jī)人像模式切換打光方式、微信的通訊錄滑動(dòng)字母索引導(dǎo)航，它們都使用輕掃 E 來滿足多個(gè)對(duì)象之間快速切換和確認(rèn)的需求。

3 實(shí)戰(zhàn)案例

了解完上述的維度和常用手勢(shì)后，我們?cè)谀X中就可以形成一個(gè)思考框架。當(dāng)我們要針對(duì)一個(gè)功能設(shè)計(jì)位移類手勢(shì)時(shí)，就可以從閾值類型、穩(wěn)定化效果以及控制方式這三個(gè)維度思考。接下來我用一個(gè)我參與過的實(shí)際項(xiàng)目作為案例給大家講解一下思考過程。

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

為了營(yíng)造儀式感和避免信息過載，共同信息的展示方式設(shè)計(jì)為了一次只能看一條，進(jìn)入浮層后默認(rèn)展示最新的一條，可以通過滑動(dòng)查看上一條。因此為了避免出現(xiàn)兩條同時(shí)占據(jù)展示區(qū)域的混亂狀態(tài)（如下圖左），我們?yōu)槠涮砑恿?strong style="outline:0px;margin:0px;padding:0px;">釋放后穩(wěn)定化效果（如下圖右），同時(shí)為了方便用戶可以快速瀏覽舊的共同信息，這里使用的穩(wěn)定化效果是較弱的，用戶可以通過滑動(dòng)一次切換多個(gè)共同信息。

由于需要滿足用戶快速瀏覽舊的共同信息的訴求，閾值類型選用了「判定手指位移和釋放速度滿足任意一個(gè)即可」，用戶可以通過控制釋放速度進(jìn)而控制信息的切換數(shù)量。控制方式則選擇了掌控感強(qiáng)的絕對(duì)控制。最后的結(jié)果如下圖所示。綜合三個(gè)維度進(jìn)行歸類，此手勢(shì)為穩(wěn)定化效果較弱的輕掃 A 。

4 手勢(shì)角度的處理

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

但是有時(shí)開發(fā)同學(xué)出現(xiàn)失誤，導(dǎo)致容錯(cuò)角度沒有均分，例如下圖中觸發(fā)上滑和下滑的角度極小，導(dǎo)致用戶在上下滑動(dòng)時(shí)非常容易誤操作為左滑和右滑。

云音樂也曾有過類似的遺留問題，iOS 端的播放頁上滑調(diào)出評(píng)論頁極易誤操作為左右滑動(dòng)黑膠切歌（如下圖 A ，現(xiàn)已修復(fù)），安卓端的賬號(hào)側(cè)邊欄上滑瀏覽極易誤操作為左滑收起側(cè)邊欄（如下圖 B ）。

因此，在驗(yàn)收階段，除了上述的三個(gè)維度外，角度的容錯(cuò)性檢查也是重要的一環(huán)。因此在驗(yàn)收時(shí)間充裕的情況下，最好要切換不同的手持方式分別體驗(yàn)一次，因?yàn)橛行﹩栴}只有在特定的手持方式下才能夠被發(fā)現(xiàn)。

客戶端的角度判定方式實(shí)際上是一個(gè)比較復(fù)雜的過程，上述的內(nèi)容是簡(jiǎn)化的版本。后續(xù)將延展為一篇獨(dú)立文章給大家仔細(xì)聊一聊。

5 客戶端的差異

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

6 高效溝通

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

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

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

拖拽和甩動(dòng)由于需要定義的細(xì)節(jié)參數(shù)都被操作系統(tǒng)提前封裝好了，一般不需要我們給到額外的標(biāo)注。但是對(duì)于輕掃，我們需要將細(xì)節(jié)定義清晰，下面將詳細(xì)講解。

6.1 閾值類型

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

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

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

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

6.2 穩(wěn)定化效果

輕掃是一定存在穩(wěn)定化效果的，關(guān)鍵在于告知開發(fā)是釋放前穩(wěn)定化還是釋放后穩(wěn)定化。從開發(fā)的角度講，系統(tǒng)會(huì)監(jiān)測(cè)用戶的行為，用戶在使用滑動(dòng)時(shí)會(huì)有按下（down）、移動(dòng)（move）、抬起（up）三個(gè)行為，釋放前穩(wěn)定化是在移動(dòng)階段判斷閾值并觸發(fā)操作、釋放后穩(wěn)定化是在抬起后判斷閾值并觸發(fā)操作，開發(fā)成本幾乎沒有區(qū)別。

上文提到過穩(wěn)定化效果強(qiáng)弱的概念。穩(wěn)定化效果越強(qiáng)，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越少，效率越低。穩(wěn)定化效果越弱，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越多，效率越高。首先，我們需要確定單次滑動(dòng)允許切換多個(gè)還是只允許切換一個(gè)，如果允許切換多個(gè)，開發(fā)同學(xué)會(huì)設(shè)定一個(gè)控制切換難度的系數(shù)，而只允許切換一個(gè)的話就不存在這個(gè)系數(shù)。通常我們也不需要修改這個(gè)默認(rèn)系數(shù)，但如果想讓操作更加難或容易觸發(fā)，可以告知開發(fā)同學(xué)修改這個(gè)系數(shù)。

6.3 控制方式

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

7 手勢(shì)排查

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

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

很多網(wǎng)站仍然在使用老舊的頁面設(shè)計(jì)，比如國(guó)內(nèi)一些企業(yè)官網(wǎng)，萬年不變的相類似的模板，外國(guó)的則是hero頁面，帶CTA按鈕，三欄式的布局。這些設(shè)計(jì)不能說是不好的設(shè)計(jì)，很實(shí)用，用戶能夠預(yù)測(cè)展示的內(nèi)容，也容易找到需要的內(nèi)容。但是正因?yàn)榭深A(yù)測(cè)，用戶沒有新鮮感，沒有期待，所以我們找了一些不僅打破常規(guī)，也依然有良好用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對(duì)UI設(shè)計(jì)的追求一向很高，致力于為卓越的國(guó)內(nèi)外企業(yè)提供卓越的手機(jī)app/安卓ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)服務(wù)。

接下來是精彩的UI設(shè)計(jì)賞析

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

  藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

  更多精彩文章：

       ui界面設(shè)計(jì)之網(wǎng)站設(shè)計(jì)案例欣賞(一)

       超贊的創(chuàng)意頁面排版設(shè)計(jì)，打造“視”不可擋的網(wǎng)頁設(shè)計(jì)

      超贊的網(wǎng)頁設(shè)計(jì)+精美流程圖賞析

       超贊的網(wǎng)站設(shè)計(jì)賞析

很多網(wǎng)站仍然在使用老舊的頁面設(shè)計(jì)，比如國(guó)內(nèi)一些企業(yè)官網(wǎng)，萬年不變的相類似的模板，外國(guó)的則是hero頁面，帶CTA按鈕，三欄式的布局。這些設(shè)計(jì)不能說是不好的設(shè)計(jì)，很實(shí)用，用戶能夠預(yù)測(cè)展示的內(nèi)容，也容易找到需要的內(nèi)容。但是正因?yàn)榭深A(yù)測(cè)，用戶沒有新鮮感，沒有期待，所以我們找了一些不僅打破常規(guī)，也依然有良好用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對(duì)UI設(shè)計(jì)的追求一向很高，致力于為卓越的國(guó)內(nèi)外企業(yè)提供卓越的手機(jī)app/安卓ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)服務(wù)。

接下來是精彩的UI設(shè)計(jì)賞析

藍(lán)藍(lán)設(shè)計(jì)秉承設(shè)計(jì)優(yōu)秀，不斷超越的理念，誠(chéng)信敬業(yè)、專業(yè)耐心的工作作風(fēng)，一直堅(jiān)持注重用戶心理體驗(yàn)及“設(shè)計(jì)與營(yíng)銷”等領(lǐng)域的理論與實(shí)踐相結(jié)合。10余年專注努力，300+案例磨練。我們?cè)趗i創(chuàng)意設(shè)計(jì)，用戶體驗(yàn)與交互設(shè)計(jì)，各種類型軟件界面設(shè)計(jì)，國(guó)際化標(biāo)準(zhǔn)和流行趨勢(shì)，進(jìn)行過不斷的學(xué)習(xí)和實(shí)踐。藍(lán)藍(lán)設(shè)計(jì)提供的是可以信賴的ui設(shè)計(jì)服務(wù)，我們內(nèi)部有一套管理要求，比如去客戶現(xiàn)場(chǎng)每周一次的檢視和溝通、內(nèi)部提案會(huì)議、每天下班前的整理反饋成果發(fā)郵件、隨時(shí)溝通的qq、電話，階段性的匯報(bào)和進(jìn)度記錄整理。多勞多得的獎(jiǎng)勵(lì)機(jī)制，客戶滿意度評(píng)價(jià)獎(jiǎng)勵(lì)機(jī)制，鼓勵(lì)大家用心、平和、耐心、勤奮、創(chuàng)新的做事.

（以上圖片均來源于網(wǎng)絡(luò)）

（精美流程圖設(shè)計(jì)）

  藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

  更多精彩文章：

       ui界面設(shè)計(jì)之網(wǎng)站設(shè)計(jì)案例欣賞(一)

       超贊的創(chuàng)意頁面排版設(shè)計(jì)，打造“視”不可擋的網(wǎng)頁設(shè)計(jì)

      超贊的網(wǎng)頁設(shè)計(jì)+精美流程圖賞析

       超贊的網(wǎng)站設(shè)計(jì)賞析