01 前言

在產(chǎn)品設(shè)計中，當(dāng)有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。

而人類是視覺生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動態(tài)內(nèi)容吸引。

今天來聊一下頁面中常見的動態(tài)引導(dǎo)。

02 一個小案例

當(dāng)你看到這個頁面時

我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）

而當(dāng)頁面元素都賦予細節(jié)時

假如我想讓你關(guān)注到其中某個較小元素

其實只需要為它添加動態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計中的動態(tài)引導(dǎo)。

03 動態(tài)引導(dǎo)的作用

• 新功能提示
• 重要內(nèi)容強調(diào)
• 誘導(dǎo)用戶操作
• 操作教學(xué)指引
• 信息高效傳遞

▍新功能提示 ?

當(dāng)產(chǎn)品上線新功能時，設(shè)計師們都會根據(jù)功能重要程度，來決定使用什么形式讓入口元素和其他元素區(qū)分開來。常見的有小紅點、標(biāo)簽、氣泡這類靜態(tài)點綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點擊后就會消失）。當(dāng)然，也有將上述點綴元素動態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動畫，這在很多電商產(chǎn)品的品類區(qū)經(jīng)?？梢钥吹?。

動態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對元素的注意力（與動態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動畫，因此可以持續(xù)吸引用戶注意力。

ps：據(jù)說，每當(dāng)頁面多出一個會動的元素，后臺就會多出這樣一些留言，捅了開發(fā)窩了[Doge]。

▍誘導(dǎo)用戶操作 ?

動態(tài)引導(dǎo)還常常被設(shè)計師用來強調(diào)重要內(nèi)容（有可能被產(chǎn)品、運營拿刀架脖子），來達成某些數(shù)據(jù)指標(biāo)，通過利用動態(tài)誘導(dǎo)用戶操作。

例如：在會員卡片中添加光效、在廣告中讓按鈕進行縮放、為簽到入口圖標(biāo)設(shè)置動畫。

這些都能充分引起用戶注意，甚至提升功能點擊率。

▍隱藏功能提示 ?

我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設(shè)計師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。

對于這些不可見的功能，在初次使用時需要進行引導(dǎo)，才能被用戶感知與使用。

▍操作教學(xué)指引 ?

講到引導(dǎo)，還必須要提的是手勢引導(dǎo)，通過動態(tài)直觀展示不同手勢的作用，提示用戶如何與產(chǎn)品進行交互。

這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。

回到視頻 App 中，你是否留意到，當(dāng)你第一打開視頻時， App 會提醒你雙擊屏幕可以點贊，上下滑動可以切換視頻。

在產(chǎn)品交互設(shè)計中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。

▍信息高效傳遞 ?

動態(tài)敘述的直觀性，使得我們可以減少對復(fù)雜信息進行大量文字描述。通過動態(tài)設(shè)計，我們可以創(chuàng)建視覺故事，這有助于將復(fù)雜信息以更簡單、清晰的方式進行傳遞，從而幫助用戶快速完成任務(wù)。

也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開始應(yīng)用。

但是需要注意的是，上述這些大多都只在第一次使用時才會觸發(fā)。

當(dāng)然有特例，例如：

在 App Store 每次下載應(yīng)用進行驗證時（面容解鎖的情況下），系統(tǒng)會通過動態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進行人臉識別。

在掃碼時，弱光場景下出現(xiàn)的手電筒，通過動態(tài)引起用戶注意，指引用戶使用。

以及作為動態(tài)演示，幫助用戶理解如何使用手掌滑動截屏

如何進行NFC感應(yīng)等等..

04 總結(jié)

動態(tài)引導(dǎo)像是設(shè)計師用來控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗，有的人用它提升商業(yè)轉(zhuǎn)化。

但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。

作者：幺零三



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



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



藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司 

在網(wǎng)絡(luò)購物發(fā)達的互聯(lián)網(wǎng)時代，大部分年輕人（包括小摹）在購買商品前都會在各種平臺上找測評貼，其中小紅書就是代表平臺之一。

小紅書入駐了許多博主，從明星到素人，他們經(jīng)常發(fā)布筆記幫大家種草或者拔草，UGC+電商的模式也實現(xiàn)了完美的購物流程閉環(huán)，使得小紅書擁有了一大批忠誠用戶（小紅薯）。那么為了讓用戶買買買，小紅書都做對了哪些事情呢？

本篇文章將從小紅書App的界面設(shè)計和交互設(shè)計進行分析。

一、小紅書至簡的界面設(shè)計

『色調(diào)』

小紅書色調(diào)以紅色為主，與其名稱呼應(yīng)，同時紅色受到年輕女性歡迎，與用戶的產(chǎn)品形象相吻合。

該設(shè)計還采用了女性喜愛的可愛清新風(fēng)格。

小紅書為其垂直官方帳號（穿搭薯、娛樂薯、校園薯等）也設(shè)計了可愛的卡通人物形象，為用戶打造了小紅薯表情包。

『界面』

小紅書與其它同類的競品風(fēng)格不太類似，其界面給人簡潔而又清晰的印象。這種簡潔和清晰源自對于功能設(shè)置上的克制。在Feed流上，為用戶提供最佳的信息閱讀體驗。

『Icon』

小紅書在一些內(nèi)容豐富的頁面，icon一般為線性，降低視覺感；面性的icon則會出現(xiàn)在比較醒目的地方，提醒用戶點擊；擬物風(fēng)格的icon一般為禮物圖標(biāo)等。

二、交互設(shè)計，如何做到簡單？

小紅書的整體界面比較簡潔，使用起來很簡單。首頁只有三大功能模塊，用戶操作路徑清晰。底部導(dǎo)航條之間分類明確，互不干擾，常用功能都能很快找到，不常用功能放在側(cè)邊欄中，節(jié)省了頁面空間。

小紅書的3種內(nèi)容方式

圖文：圖文筆記的瀏覽界面就是圖片與文字分開的形式，圖片左右滑動瀏覽，一般用戶會增加標(biāo)簽輔助說明。文字也只能利用圖形來增加可看性。此外在文章內(nèi)還可以增加商品鏈接，直接引導(dǎo)轉(zhuǎn)化。

視頻：短視頻的瀏覽界面與抖音非常類似了，文字說明的內(nèi)容超過一定字?jǐn)?shù)會折疊。當(dāng)然也有一些短視頻沒有的功能彈幕。右上角有分享功能，點贊、收藏和評論則在左下角。

直播：小紅書直播內(nèi)容主要是以互動為主，不同于其他的直播模式，而是以主播分享體驗向用戶推薦商品，這樣的方式更能提高用戶對商品質(zhì)量的信任程度。直播過程中用戶可以右滑進入簡潔模式，這樣直播的彈幕以及禮物點贊特效則會隱藏。

三、小紅書的購物方式

小紅書電商體量沒有淘寶大，商城首頁很干凈使各個活動入口更加清晰，使用卡片的布局形式展示，可以有效的與輪播廣告相區(qū)分。小紅書在商品界面設(shè)計上更加清新、層次分明，讓用戶能明確操作流程。

購物模塊與筆記社區(qū)有著非常巧妙的聯(lián)系，在添加筆記時，小紅書也鼓勵用戶關(guān)聯(lián)商品訂單，如果關(guān)聯(lián)，商品購買鏈接就會顯示在筆記中，不僅縮短了用戶查找時間，也直接進行了流量引導(dǎo)轉(zhuǎn)化。

作者：jongde          來源：站酷



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



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



藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司 

本文主要從業(yè)務(wù)分析、交互體驗和設(shè)計規(guī)范三個層面進行總結(jié)。

一、業(yè)務(wù)分析層面

與C端不同，B端產(chǎn)品主要圍繞業(yè)務(wù)為核心展開，面向?qū)I(yè)的人員，有固定的業(yè)務(wù)屬性，我們只有將業(yè)務(wù)理解透徹，熟悉業(yè)務(wù)的運作流程，才能在B端設(shè)計過程中，輸出良好清晰的設(shè)計架構(gòu)，更好的解決業(yè)務(wù)問題。因此，設(shè)計師的業(yè)務(wù)分析能力在B端設(shè)計中至關(guān)重要。進行業(yè)務(wù)分析可以從以下幾點著手：

1.深入透徹的理解業(yè)務(wù)場景

我們可以從多方面收集業(yè)務(wù)相關(guān)的信息，包括梳理需求文檔，與業(yè)務(wù)人員溝通等，來了解行業(yè)背景、業(yè)務(wù)目標(biāo)、組織架構(gòu)，理清一些專業(yè)名詞等。業(yè)務(wù)場景理解的越深入透徹，我們才能建立起一個系統(tǒng)性的邏輯思維，對我們接下來的設(shè)計脈絡(luò)的梳理以及整體設(shè)計的把控是越有利的。

2.梳理業(yè)務(wù)流程

我們可以通過繪制業(yè)務(wù)流程圖，將零散的業(yè)務(wù)信息通過具象的流程圖清晰地呈現(xiàn)出來，有助于我們宏觀系統(tǒng)的了解整個功能流程，同時也能夠確保業(yè)務(wù)的標(biāo)準(zhǔn)流程都能夠走通，不會出現(xiàn)邏輯問題及功能場景的缺失。

3.理清角色權(quán)限

B端用戶因其崗位角色的不同，使其具有清晰的角色權(quán)限。比如普通成員、管理員、超級管理員，分別對應(yīng)不同的權(quán)限，不同的權(quán)限背景下，其功能和業(yè)務(wù)路徑也是不同的。理清角色權(quán)限，聚焦當(dāng)前角色本身的任務(wù)流程，避免被無關(guān)的信息干擾，可以使我們的業(yè)務(wù)功能更加清晰，避免冗雜無用功能在不同角色間的穿插，有助于分解信息結(jié)構(gòu)呈現(xiàn)的復(fù)雜性。

二、交互體驗層面

我們知道，B端設(shè)計的核心目標(biāo)為降本增效，在交互體驗層面可以理解為降低認(rèn)知成本，提高使用效率。而B端設(shè)計的一個顯著特點就是功能、場景復(fù)雜，要達到降本增效，需要我們在交互體驗層面上注意以下幾點：

1.視覺降噪與引導(dǎo)

B端注重對頁面的高效操作，因此在設(shè)計的過程中要保持簡潔克制，排除過多的干擾元素，聚焦主要功能，弱化或隱藏非必要功能，保證頁面信息呈現(xiàn)輕量化，降低用戶認(rèn)知負荷。

同時，通過視覺設(shè)計，比如顏色、字號、字重、合理排版等，使頁面信息呈現(xiàn)有層次、有重點，能夠合理有效的進行優(yōu)先級的引導(dǎo)，頁面信息呈現(xiàn)更加清晰有序，降低頁面的復(fù)雜性。

2.設(shè)計一致性

設(shè)計過程中，遵守設(shè)計規(guī)范，在視覺與交互上保持一致性至關(guān)重要。

一方面保持視覺上的一致性，包括字體、顏色、間距、結(jié)構(gòu)等，能夠使頁面信息呈現(xiàn)嚴(yán)謹(jǐn)有序，保證易讀性；另一方面，保持整個系統(tǒng)交互操作的一致性，則可以大大降低用戶的學(xué)習(xí)成本，同時還能夠提升開發(fā)效率。

3.符合用戶心智模型

B端功能交互邏輯復(fù)雜，在設(shè)計過程中，盡量保持已成標(biāo)準(zhǔn)的用戶操作習(xí)慣，尊重用戶已有的認(rèn)知，保證內(nèi)容的可理解性，可以增加用戶的熟悉度，降低學(xué)習(xí)成本。

4.信息層級劃分

B端的信息結(jié)構(gòu)復(fù)雜，如果將信息完全平鋪呈現(xiàn)，不僅占用頁面空間，還會大大加重用戶的認(rèn)知負擔(dān)。這就需要我們站在用戶的角度，基于用戶的行為路徑，進行信息層級的劃分。

第一，對頁面信息進行梳理，明確主要信息和次要信息，必要信息和非必要信息，將次要信息和非必要信息進行隱藏、收起、刪除等，可以有效聚焦核心內(nèi)容，避免分散用戶注意力；

第二，對需要展示的主要、必要信息進行分類歸納、信息分組，通過合理的頁面排版布局，使信息結(jié)構(gòu)清晰有序的呈現(xiàn)；

第三，注意層級步驟的拆分，讓用戶逐級獲得信息，路徑清晰，避免過多信息雜亂無序的呈現(xiàn)，增加用戶認(rèn)知負荷。

5.預(yù)測用戶行為

首先，我們通過預(yù)測用戶行為，在關(guān)鍵交互節(jié)點增加功能曝光，給予用戶操作建議和提示，可以幫助用戶高效流暢的完成任務(wù)目標(biāo)；其次，對用戶行為進行預(yù)測，主動幫助用戶完成一部分操作，比如信息默認(rèn)值填充等，可以提升用戶體驗，減輕用戶的操作負擔(dān)。

6.保留舊版返回入口

B端產(chǎn)品結(jié)構(gòu)功能復(fù)雜，有使用學(xué)習(xí)的過程，如果對B端產(chǎn)品進行大的改版升級，會讓已經(jīng)熟悉舊版本且已經(jīng)產(chǎn)生使用習(xí)慣的用戶產(chǎn)生一些不適應(yīng)感。保留舊版本返回入口，讓用戶慢慢習(xí)慣過渡到新版本，可以減小用戶學(xué)習(xí)的壓力，避免因習(xí)慣問題影響產(chǎn)品的正常使用，無論是對用戶的接受度還是對我們改版的順利落地都是一種不錯的方式。

三、設(shè)計規(guī)范層面

B端系統(tǒng)龐大且復(fù)雜，建立起統(tǒng)一的設(shè)計組件和設(shè)計規(guī)范至關(guān)重要。

組件規(guī)范的建立：

第一，能夠保證交互及視覺設(shè)計的一致性，提升設(shè)計效率和降低用戶學(xué)習(xí)成本；

第二，能夠提升團隊的協(xié)作效率，提高設(shè)計還原度，降低對接成本；

第三，組件化設(shè)計，可復(fù)用性強，能夠提升開發(fā)效率，在后期的迭代開發(fā)中，也可以進行統(tǒng)一的更新和應(yīng)用，能夠減少開發(fā)工作量，便于維護。

設(shè)計規(guī)范比較具體，且不同的項目在規(guī)范細節(jié)方面也會有所不同，下面主要整理了一些比較常涉及且可以通用的規(guī)范和組件。

1.布局

B端系統(tǒng)用戶的主流分辨率為1920、1440和1366，我們在選擇分辨率時，首先確定目標(biāo)用戶使用場景是否對分辨率有特殊要求，如果沒有特殊的場景分辨率要求，基于上下好適配性，通常會選擇1440的尺寸進行設(shè)計。

由于B端業(yè)務(wù)場景復(fù)雜，信息量比較大，通常選用24柵格系統(tǒng)。

考慮結(jié)構(gòu)布局，根據(jù)不同的結(jié)構(gòu)布局，給出動態(tài)縮放適配方案。常用的布局為：左右布局和上下布局。

左右布局：通常是將左邊的導(dǎo)航欄固定，對右邊的工作區(qū)域進行動態(tài)縮放。

上下布局：通常是對兩邊留白區(qū)域進行最小值的定義，當(dāng)留白區(qū)域到達限定值之后再對中間的主內(nèi)容區(qū)域進行動態(tài)縮放。

2.色彩

B端用色講究簡潔克制，使用戶能夠高效聚焦功能內(nèi)容，Ant Design上面對色彩應(yīng)用的描述為“色彩在使用時更多的是基于信息傳遞、操作引導(dǎo)和交互反饋等目的。在不破壞操作效率，影響信息的清晰傳達的這些原則之上，理性的選擇顏色是關(guān)鍵?！被谏适褂玫哪康?，B端用色主要分為主色、功能色和中性色。

主色：通常是品牌色，或者根據(jù)用戶群體、產(chǎn)品定位以及使用場景來定義，主要用在主要按鈕、選中狀態(tài)、高亮信息、空狀態(tài)等。

功能色：代表了明確的信息以及狀態(tài)，如成功、錯誤、提醒、鏈接等。功能色的使用需要遵守用戶對色彩的基本認(rèn)知。

中性色：主要用于文字、分割線、邊框、背景等。

3.文字

字體：中文常用字有：Ping Fang SC、微軟雅黑、思源黑體；英文常用字體有：San Francisco UI（SF字體）、Helvetica Neue、Arial。

字號：最小字號不小于12px，常規(guī)字號大小一般為14px。輔助文字12px，正文（常規(guī)）14px，小標(biāo)題16px，標(biāo)題18px、主標(biāo)題20px，字號的選擇可根據(jù)具體情況進行定義。

字重：字重通常選用regular、medium、semibold，分別對應(yīng)代碼中的400、500、600。

行高：行高設(shè)置一般為字號的1.5倍左右，我們也可以采用，字號+8px做行高。

4.按鈕

(1)按照基礎(chǔ)樣式分為：主按鈕、次按鈕、虛線按鈕、文本按鈕、鏈接按鈕

(2)定義按鈕的交互狀態(tài)：Normal（默認(rèn)狀態(tài)）、Disable（禁用狀態(tài)）、Hover（懸停狀態(tài)）、Press（點擊狀態(tài)）、Loading（加載狀態(tài)）

(3)對按鈕進行規(guī)范的制定：包括尺寸、圓角、文字、顏色、背景等

5.表單

表單通常由輸入框、選擇器、單選框、多選框等組成，具有收集、校驗、提交數(shù)據(jù)的功能。

(1)表單的狀態(tài)：設(shè)計時，要明確規(guī)范表單的三種狀態(tài)

默認(rèn)狀態(tài)：即用戶輸入信息之前的狀態(tài)；

焦點狀態(tài)：即用戶正在輸入信息時的狀態(tài)；

反饋狀態(tài)：即用戶填寫信息后的校驗狀態(tài)。

(2)輸入順序：表單設(shè)計時，信息的輸入順序按照先易后難，先必填后選填，先公開信息后隱私信息進行，可以減輕用戶填寫表單的心理壓力。

(3)對齊方式：對齊方式分為三種：頂部對齊、右對齊和左對齊。

對齊方式的選擇，需要根據(jù)瀏覽效率、屏幕空間以及標(biāo)簽長度來實際判斷，做出選擇。

首先，需要明確，瀏覽效率上，頂對齊＞右對齊＞左對齊。

然后結(jié)合屏幕空間和標(biāo)簽長度做判斷：

頂對齊：效率最高，標(biāo)簽長度可以更靈活一些，但垂直空間占用多；

右對齊：效率次之，文本字?jǐn)?shù)不可控但又不是很多時可使用右對齊；

左對齊：瀏覽時間最長，效率最慢，標(biāo)簽字?jǐn)?shù)可控或者需要用戶謹(jǐn)慎確認(rèn)信息時，可使用左對齊。

需要注意的一點是，頂對齊的標(biāo)簽布局之間要有合適的垂直間距，才能瀏覽舒適，效率更高，通常使用輸入框 50%至 75%的高度作為相鄰輸入框的垂直間距。

(4)校驗反饋：校驗反饋要具有準(zhǔn)確性和及時性。

準(zhǔn)確性：主要體現(xiàn)在，要給予用戶準(zhǔn)確清晰的錯誤原因和解決方案，以及準(zhǔn)確的錯誤位置。

及時性：表單填寫時，出現(xiàn)錯誤是難免的，為了避免用戶盲目填寫信息或者出現(xiàn)大面積報錯，可以進行實時的校驗反饋，比如用戶輸入完成鼠標(biāo)失焦后進行信息校驗，但反饋的前提條件是不打擾到用戶。

需要注意的一點是，成功或者錯誤等的反饋，不能僅用顏色來區(qū)分，需要加入明確的圖標(biāo)和文字來提示，以達到視覺無障礙設(shè)計。

(5)標(biāo)簽與占位符：標(biāo)簽和占位符都要盡量簡潔，避免文字過多，給用戶造成視覺負擔(dān)，信息描述應(yīng)該準(zhǔn)確、直觀且完整。

(6)表單分步：當(dāng)表單內(nèi)容多而復(fù)雜時，會讓用戶感到煩躁和不知所措，表單分步不僅有利于減輕用戶的填寫負擔(dān)，緩解焦慮情緒，還能夠明確了解表單填寫的步驟流程。

(7)數(shù)據(jù)與默認(rèn)值填充：在用戶進行信息錄入時，可以通過后臺數(shù)據(jù)庫進行匹配，自動填寫已知信息，也可以設(shè)置合理的默認(rèn)值，滿足多數(shù)人需要的默認(rèn)選擇，幫助用戶節(jié)省時間，快速完成表單填寫。

(8)輸入框?qū)挾扰c高度設(shè)定：輸入框的大小通常對用戶輸入信息的多少有著暗示作用，輸入框尺寸越大，用戶會認(rèn)為是可以輸入很多字的。因此，并不是所有輸入框?qū)挾纫恢拢褪呛玫脑O(shè)計，需要根據(jù)實際情況，設(shè)定輸入框?qū)挾?，但是也不能設(shè)定太多寬度，寬度太多會使表單視覺效果凌亂，寬度設(shè)定要合理適當(dāng)。

輸入框的寬度是固定的，但是高度可以根據(jù)內(nèi)容進行自適應(yīng)調(diào)整，來保證信息的顯示完整性，給用戶以良好的體驗。

(9)選項便捷性：表單填寫要始終遵循能不填寫就不填寫，能選擇就不要輸入的原則。當(dāng)選項多于5個時，適合使用下拉框的形式進行展示。當(dāng)選項內(nèi)容過多，超過下拉框的高度，用戶篩選比較困難時，可以考慮是否輸入更快，采用輸入的方式。

6.表格

B端表格的設(shè)計本著清晰易讀的原則進行，設(shè)計上需要我們注意以下四點：

(1)表格寬度：表格寬度的處理需要考慮自適應(yīng)問題，主要有三種方式：

a.設(shè)定表格的最小寬度，最大寬度不做限制，可以無限延伸，當(dāng)表格達到最小寬度時，做極限處理；

b.根據(jù)需要設(shè)定多個等級的最小單元格寬度，當(dāng)單元格達到最小寬度時，做極限處理；

c.也可以按照表格寬度的百分比，設(shè)置單元格寬度，或者固定部分無放大需求的單元格寬度，對剩余單元格按照百分比進行縮放；

(2)極限處理：極限處理主要針對最小寬度，當(dāng)表格達到最小寬度時，信息展示不全的情況下，常見的處理方式有：文本信息縮略顯示、文本信息換行顯示、橫向滾動顯示。

(3)單元格高度：單元格的高度直接影響表格的高度，信息呈現(xiàn)量，以及閱讀體驗。單元格高度一般在38px~58px之間，高度太大或者太小都不利于閱讀，個人實踐建議高度為字體行高的2.5倍。

(4)對齊方式：為了提升瀏覽效率和數(shù)據(jù)的對比效率，通常采用文字左對齊，長數(shù)字右對齊的方式，空數(shù)據(jù)使用“-”填充。

總之，做好B端產(chǎn)品的設(shè)計，需要我們多思考、多總結(jié)，規(guī)范與標(biāo)準(zhǔn)不是一成不變的，設(shè)計過程中要與業(yè)務(wù)、產(chǎn)品、前端多溝通，才能夠做出體驗更好的產(chǎn)品。

作者：陳小花兒          來源：站酷



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



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



藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司 

在開始講解 B 端的圖標(biāo)設(shè)計前，我們先來復(fù)習(xí)一遍圖標(biāo)設(shè)計的基礎(chǔ)知識。相信不少同學(xué)看過我們之前更新的圖標(biāo)系列干貨，沒看過的可以先收藏起來，等等看完本篇分享后再去閱讀……

史上最全的圖標(biāo)設(shè)計教學(xué).1 —— 圖標(biāo)設(shè)計詳解

史上最全的圖標(biāo)設(shè)計教學(xué).2 —— 工具圖標(biāo)的設(shè)計

史上最全的圖標(biāo)設(shè)計教學(xué).3 —— 其他圖標(biāo)及應(yīng)用

1.1 圖標(biāo)的主要類型

理解圖標(biāo)，首先關(guān)注的是圖標(biāo)本身的類型，在整個 UI 體系中，圖標(biāo)基本就分成3個大類：

工具圖標(biāo)：包含一定產(chǎn)品功能隱喻的簡化抽象圖形，代替文字節(jié)省界面空間，方便用戶理解

裝飾圖標(biāo)：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于節(jié)日活動中

啟動圖標(biāo)：產(chǎn)品的啟動圖標(biāo)，即用來在系統(tǒng)中打開該產(chǎn)品的圖形按鈕，基本以自身 LOGO 為主

在 B 端項目中，應(yīng)用最廣泛的必然是工具圖標(biāo)，而裝飾、啟動圖標(biāo)卻鮮有露面機會。但出現(xiàn)的少，不代表沒有，解釋工具圖標(biāo)前，我們先優(yōu)先講解下裝飾和啟動圖標(biāo)在什么情況下會出現(xiàn)。

其中，SAAS 類服務(wù)就有很多會重點強調(diào)品牌、情感化設(shè)計的案例，例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標(biāo)提升界面的質(zhì)感。

啟動圖標(biāo)則會應(yīng)用在一些比較大型的項目里，當(dāng)項目出現(xiàn)了很多下級功能模塊或類似插件的體系時，就會采取使用應(yīng)用圖標(biāo)的方式作為入口。

比如 Figma 也是一個 B 端工具，它的插件列表中就可以看見不同的啟動圖標(biāo)。還有類似 Slack、Invision、Teambition 等產(chǎn)品，一個龐大的產(chǎn)品生態(tài)就必然會衍生出強化不同子產(chǎn)品身份的需求，就自然而然會用到啟動圖標(biāo)了。

最后，就是我們熟知的工具圖標(biāo)了，前兩種圖標(biāo)，在前期畫不好不要緊，畢竟這類規(guī)格的產(chǎn)品會有經(jīng)驗更豐富的設(shè)計或總監(jiān)坐鎮(zhèn)，新手當(dāng)個切圖仔即可……

但是工具圖標(biāo)，重要性就不言而喻了，B 端項目對工具圖標(biāo)的需求非常大，幾乎每個組件中都會包含圖標(biāo)。

雖然今天網(wǎng)上有非常豐富的圖標(biāo)素材庫，但在形式各異的 B 端項目里依舊是供不應(yīng)求的，各種行業(yè)特有的功能、實物、隱喻，只能設(shè)計師自己完成。

B 端設(shè)計師在圖標(biāo)設(shè)計領(lǐng)域的主要工作，就是確定圖標(biāo)樣式、設(shè)計圖標(biāo)、導(dǎo)出切圖。下面的分享我們也會主要圍繞工具圖標(biāo)展開。

1.2 B端工具圖標(biāo)的風(fēng)格

工具圖標(biāo)的應(yīng)用主要包含兩個部分，線性圖標(biāo)和面性圖標(biāo)。

這里再提圖標(biāo)風(fēng)格，不是把以前的知識點重新講一遍，而是要強調(diào) B 端圖標(biāo)的特殊性。和 C 端相比，B 端圖標(biāo)的實用屬性更高，并不需要過多凸顯本身的視覺風(fēng)格。

所以，工具圖標(biāo)中，使用大量漸變、插畫、投影的類型都要排除掉，它們對 99.9% 的項目都只會造成體驗的負影響，不要被網(wǎng)上的追波風(fēng)飛機稿給帶偏。

適合 B 端項目的工具圖標(biāo)只要應(yīng)用最基礎(chǔ)的線性和面形風(fēng)格即可，一定要劃分出差異，應(yīng)該只包含圓潤、纖細、尖銳這幾種。

很多人好奇線性和面形圖標(biāo)在 B 端設(shè)計中有什么使用上的差異呢？答案是沒有差異。

線性和面形的使用，純粹看設(shè)計師在當(dāng)前場景判斷哪個合適用哪個，只要保證對應(yīng)圖標(biāo)風(fēng)格統(tǒng)一即可。

不過如果遇到一些比較特殊的情況，比如要表現(xiàn)各類設(shè)備的復(fù)雜圖標(biāo)，那用線性的做法還是相對合適和簡單一點。

1.3 圖標(biāo)的統(tǒng)一性規(guī)范

對 B 端設(shè)計來講，獨立設(shè)計圖標(biāo)的步驟是必不可少的，應(yīng)該掌握的圖標(biāo)規(guī)范還是必須要懂的。

我們雖然沒有 C 端那么多風(fēng)格和技法的拖累，但想畫好 B 端圖標(biāo)卻多出了其它難點，那就是一個頁面中出現(xiàn)的圖標(biāo)實在是太多了。

這就引發(fā)了我們要講的第一個規(guī)范要點 —— “統(tǒng)一性”，所有同規(guī)格類型圖標(biāo)具有一致性的特征，這些特征包含了：

• 粗細一致：首先使用統(tǒng)一的描邊、線段粗細參數(shù)
• 圓角一致：使用一致的圓角數(shù)值，不要一下尖角一下圓角
• 透視一致：使用接近的透視角度，不要有的側(cè)視有的正視圖
• 大小一致：視覺的大小保持一致，有均衡的大小感受
  

如果不能保證統(tǒng)一性的基本要求，那么整個頁面看起來就會非常的廉價、業(yè)余。很多新手處理 B 端項目就是應(yīng)用了多套素材庫圖標(biāo)，它們的細節(jié)完全不一樣，統(tǒng)一性當(dāng)然無從談起。

而讓整套圖標(biāo)保持統(tǒng)一性，是相當(dāng)有難度的，其中最難的一點，就是如何讓一套圖標(biāo)的大小均衡。雖然我們要對每套圖標(biāo)確定一個固定的尺寸，但不代表圖標(biāo)實際圖形的長寬數(shù)值是完全一致的。

幾何圖形對視覺有一定的欺騙性，有不同的大小體驗，比如下方案例（魷魚游戲亂入？）：

所以，基于這樣的特性，每個圖標(biāo)本身都包含了兩層屬性，圖標(biāo)的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小，是透明白的，排版的時候以這個尺寸作為實際的邊緣來測量。

而視覺尺寸，則是在占位尺寸下圖標(biāo)圖形的實際大小，這個大小是帶給我們實際視覺感受的部分。一套圖標(biāo)的不同圖形必然視覺尺寸是各不相同的，我們用占位尺寸包裹它們來方便我們進行統(tǒng)一的應(yīng)用。

所以，使用成熟的圖標(biāo)素材必然會發(fā)現(xiàn)圖形周邊還會有透明的空白區(qū)域。當(dāng)然，不同的素材，這個留白也是有區(qū)別的，下一個小節(jié)就會解釋。

最后要聲明一點，一套項目中可以包含多個規(guī)格（2-5個）的工具圖標(biāo)，比如導(dǎo)航用的圖標(biāo)比普通工具圖標(biāo)更復(fù)雜一點，設(shè)計師只要保證每種規(guī)格保持的統(tǒng)一性即可。

1.4 圖標(biāo)的柵格系統(tǒng)

圖標(biāo)越多，大小的控制越困難，所以專業(yè)的圖標(biāo)庫繪制就必然會應(yīng)用圖標(biāo)的柵格系統(tǒng)進行輔助。

在 Ant 的體系中，一個基于柵格的圖標(biāo)實際包含3層，背景層、格線層、圖形層。

背景層，即圖標(biāo)展位尺寸，需要先確定出這個元素的大小，然后才是里面的繪制區(qū)域。通常，柵格系統(tǒng)會為邊緣預(yù)留 1-4 像素的內(nèi)邊距（出血位），正所謂四周留一線，日后好相見。

格線層，則是使用的柵格線段，也是最重要的部分。格線層通常由 4 個基本圖形構(gòu)成，包含正方形、圓形、水平長方形、垂直長方形。

這四個圖形的長寬大小不一，原因是為了對應(yīng)幾何圖形視覺尺寸不同的特征。把它們并列排列，就可以發(fā)現(xiàn)它們的視覺大小非常接近。

這些格線的作用，就是提前幫我們確定好視覺比例，幫助我們快速繪制相同圖形類型的圖標(biāo)。

但是，不是完美符合這四個圖形要求的圖標(biāo)該怎么辦，總不能格線把所有輪廓都給你實現(xiàn)出來吧？

格線的另一層作用，也就是最重要的作用，其實是一個用來做測量的工具，而不是輪廓依據(jù)。在幾何視覺差中，最基礎(chǔ)的大小原理是占用面積越大的圖形，尺寸感受越大。所以，長寬一致的正方形大于圓形，圓大于三角形。

所以當(dāng)我們繪制的非常規(guī)圖形，和類似格線進行對比時，長寬缺少的一側(cè)，就要由另一側(cè)增加數(shù)值來填補它的面積。

比如下圖 Ant 官方的電腦圖標(biāo)，它的寬是橫向矩形，但是中間區(qū)域面積較小，所以增加了高度進行平衡。

再看一些其它的案例

這一步?jīng)]有固定的參數(shù)使用技巧，設(shè)計師需要將完成的圖標(biāo)置入到其它圖標(biāo)旁邊進行調(diào)試，確保尺寸是合適的。

格線只是一個圖標(biāo)大小設(shè)置的參考工具，一切以最終效果為標(biāo)準(zhǔn)。

理解完圖標(biāo)的基本規(guī)范，就到圖標(biāo)的使用邏輯了，解決一些常見的設(shè)置誤區(qū)。

2.1 圖標(biāo)應(yīng)該做多大

圖標(biāo)該做多大的，這是目前被問到最多的問題。本來應(yīng)該是非常簡單的一件事，但很多工作多年的設(shè)計師也搞不清楚。

仔細捋了捋，罪魁禍?zhǔn)拙褪?AntDesign 這套規(guī)范中對圖標(biāo)畫布的解釋了。

要重點強調(diào)，Ant 設(shè)計圖標(biāo)的意圖，和一般項目的是完全不同的。Ant 作為一套龐大的開源項目，它的圖標(biāo)核心特征之一就是 —— 適應(yīng)性。

這些圖標(biāo)要被應(yīng)用到各種不同的設(shè)備、顯示器、系統(tǒng)中，圖標(biāo)尺寸會用多大，在幾倍圖環(huán)境顯示全都是不確定的。所以圖標(biāo)一開始按越大的規(guī)格完成，后續(xù)實際應(yīng)用中的縮放、匹配也就越容易，適應(yīng)性越高。

但是，在我們自己的項目中，這種做法是完全沒有必要的，1024 圖標(biāo)的負面影響包含：

• 像素數(shù)過多使得數(shù)值的制定難度大大提升，不管是元素尺寸還是描邊粗細
• 矢量圖形源文件進行縮放很容易發(fā)生錯位，提前輪廓化會破壞源文件
• 縮放圖標(biāo)后描邊的數(shù)值往往會出現(xiàn)非整數(shù)和 0.5 的狀態(tài)，虛邊問題嚴(yán)重
  

在常規(guī)項目里，一套項目是可以包含不同尺寸和規(guī)格的圖標(biāo)的，而不是我們做一套相同風(fēng)格的圖標(biāo)在整個應(yīng)用中無差別使用。

這也意味著，每個圖標(biāo)在產(chǎn)品中的使用場景通常只有一個尺寸，不需要去面臨縮放的情況。即使需要縮放，也只是這套圖標(biāo)中的少數(shù)幾個需要，或者相對特殊的項目。

所以，圖標(biāo)尺寸設(shè)定，就是根據(jù)當(dāng)前位置合適的尺寸來制定?？梢允褂盟夭脑谝呀?jīng)設(shè)計好的布局中嘗試多大的數(shù)值合適，然后創(chuàng)建同樣的數(shù)值即可（盡量以4的倍數(shù)為標(biāo)準(zhǔn)）。

2.2 素材的正確使用方法

我們知道圖標(biāo)的素材非常豐富，不管是 Iconfont、IconPark 還是 Iconsearch 等網(wǎng)站，都提供了海量的素材。但是只要稍微專業(yè)點的項目，往往素材庫都滿足不了，部分規(guī)格的圖標(biāo)還是需要我們自己重新繪制。

所以說圖標(biāo)素材就完全沒用了嗎？當(dāng)然不是。

圖標(biāo)的正確用法是作為一種快速試錯的參照物，它可以幫助我們實現(xiàn)：

• 參考圖標(biāo)的具體尺寸在哪個數(shù)值最合理
• 參考當(dāng)前場景使用面性還是線性的風(fēng)格更合理
• 參考圖標(biāo)的設(shè)計風(fēng)格是圓還是尖銳更合理
• 參考相關(guān)隱喻的圖形樣式哪種更合理
  

在項目的界面設(shè)計階段，我們一向建議優(yōu)先使用外部的素材，尤其是 IconPark 這種比較統(tǒng)一，還可以快速調(diào)節(jié)圖標(biāo)樣式的工具網(wǎng)站。

這個過程即使素材找不到和寓意一致的也沒關(guān)系，用相近的圖標(biāo)替代就可以。等到頁面布局基本完成以后，最后再集中精力對需要繪制的圖標(biāo)重畫一遍（甚至是在開發(fā)階段繪制）。

通過別人的圖標(biāo)來快速匹配尺寸、風(fēng)格、樣式，會幫助我們節(jié)省非常多的時間，也有助于我們設(shè)計出更專業(yè)、美觀的圖標(biāo)。

另外，就是針對項目一些偏小尺寸的通用圖標(biāo)，就可以比較放心的應(yīng)用素材，例如翻頁的左右、更多、下拉、搜索等等。

2.3 圖標(biāo)的色彩和狀態(tài)

圖標(biāo)的尺寸、樣式都確定了，最后就是關(guān)于圖標(biāo)的色彩和不同狀態(tài)的制定了。

前面講過，B 端項目對圖標(biāo)的裝飾屬性沒有那么迫切，所以正常情況下，太花哨的圖標(biāo)是要盡量避免的。彩色、漸變色、投影，都不應(yīng)該在這個情況下胡亂使用。

常規(guī)的圖標(biāo)只要使用中性色即可，而需要特別對待的圖標(biāo)，色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。

當(dāng)然，如果項目涉及到一些特殊的工具圖標(biāo)，類似工廠、工業(yè)領(lǐng)域表達實體設(shè)備的擬物圖標(biāo)，可以打破這個原則。但是，同樣避免這套擬物圖標(biāo)的每個圖標(biāo)用色不同，盡量只使用 3 種以內(nèi)的顏色完成擬物的填色。

同時色彩的使用還有一個重要的意義就是對圖標(biāo)不同狀態(tài)的呈現(xiàn)，部分圖標(biāo)會承擔(dān)按鈕的功能，包含默認(rèn)、選中兩個基本狀態(tài)。

普通權(quán)重的圖標(biāo)，未選中狀態(tài)可以在默認(rèn)色彩基礎(chǔ)上使用透明度來實現(xiàn)。

高權(quán)重的圖標(biāo)，則可以在選中的狀態(tài)替換色彩，或者更改圖標(biāo)的類型，將原本的線性更改成面形并填充色彩制造反差。

完成所有圖標(biāo)的設(shè)計以后，最后一步就是切圖和導(dǎo)出了，這決定你的圖標(biāo)能不能被正確運用到線上項目中。

3.1 圖標(biāo)的收納和命名

在一套專業(yè)的 B 端項目中，已經(jīng)設(shè)計好的圖標(biāo)是設(shè)計規(guī)范的 “資產(chǎn)” 內(nèi)容之一。圖標(biāo)的文件不能散落在項目的各個界面里，而是在規(guī)范頁面中有統(tǒng)一的整理和收納。

這種做法的流程是，先在軟件的規(guī)范庫中創(chuàng)建對應(yīng)的圖標(biāo)組件（ Symbol / Compoent ），然后再在具體頁面中應(yīng)用，方便后續(xù)的統(tǒng)一管理和修改。

而在這個過程中，我們也需要對圖標(biāo)有正確的命名方法，來確保團隊調(diào)用、檢索圖標(biāo)的效率。通常，我的圖標(biāo)命名規(guī)范如下：

尺寸 / 類型 / 圖標(biāo)名-狀態(tài)

示例：

48px/導(dǎo)航圖標(biāo)/表盤頁-默認(rèn)

24px/一般圖標(biāo)/搜索-默認(rèn)

“/” 號的引用主要是方便軟件中對組件層級進行劃分，而我調(diào)用圖標(biāo)的規(guī)則勢必是先從尺寸開始，再選擇對應(yīng)規(guī)格，最后類型和狀態(tài)。

提前命名也是方便后續(xù)我們切圖和導(dǎo)出，但要提及一點，圖標(biāo)的命名不要追求英文化，因為我們的詞匯量不可能實現(xiàn)正式的英文命名規(guī)則，只會寫一堆大家都看不懂的單詞。

而開發(fā)在使用我們的圖標(biāo)切圖時，也不會用我們之前取的命名，會根據(jù)自己的命名習(xí)慣重新命一遍，寫個讓他能看懂的名字遠比用亂七八糟的英文強。

3.2 圖標(biāo)的切圖格式

接下來，就要解釋切圖的規(guī)則了。很多沒有經(jīng)驗的設(shè)計師切圖就只是隨手加個切片，然后上傳藍湖發(fā)給開發(fā)自生自滅了，這是一個非常不合理的操作。

再或者，強行使用 Fonticon 格式，而不管實際情況如何，造成最后實現(xiàn)效果完全不同步或?qū)崿F(xiàn)不了。

切圖是通過前端調(diào)用并在瀏覽器中進行顯示的圖形，而要被瀏覽器正常顯示，就有必要了解適合使用的切圖格式。

圖片的格式包含位圖和矢量兩種，位圖是通過記錄像素色值的圖形格式，假設(shè)一張圖是 100*100 像素，那么記錄 1W 個像素點的色彩，所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標(biāo)繪制出顯示圖形的格式，可以支持自由縮放。

理論上，矢量格式是最佳的圖標(biāo)切圖格式，但是它的限制同樣有很多，例如：

• 無法記錄漸變色
• 導(dǎo)出輪廓容易有錯誤
• 無法記錄擬物圖形
• 無法記錄投影元素
  

前面說過，普通項目中同一圖標(biāo)是很少出現(xiàn)一會兒大一會兒小的需求，所以矢量最大的特征無損縮放，往往就不需要我們?nèi)タ紤]。矢量格式切圖的主要出發(fā)點是用來應(yīng)對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題，而不是網(wǎng)頁端的基本使用。

當(dāng)一套項目中出現(xiàn)了矢量格式無法覆蓋的圖標(biāo)時，那么即用矢量切圖，又用位圖，就會顯得非常的混亂。只有類似 LOGO 等圖形元素，才需要考慮 SVG 格式，而不是一看到圖標(biāo)就上。

所以，最適合切圖的格式就是位圖的 PNG 格式，一方面它是無損的，另一方面它支持透明背景，在切圖應(yīng)用上可以完美和設(shè)計稿結(jié)合，而這是其它大多數(shù)位圖格式不具備的特征。

當(dāng)每次項目完成以后，并不需要通過藍湖來實現(xiàn)切圖的導(dǎo)出，如果切圖文件分散在各個項目頁面里，那么一定會有很多圖標(biāo)被遺漏，尤其是圖標(biāo)的不同狀態(tài)切圖。

所以，最理想的切圖形式，就是將所有圖標(biāo)完成整理和命名以后，一起框選，然后導(dǎo)出成 PNG 格式，再同步給程序員即可。

作者：酸梅干超人   來源：站酷

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

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

藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

1.1 表格是什么，為什么重要

表格已經(jīng)是現(xiàn)代電子計算機系統(tǒng)中重要的組成部分之一，從小學(xué)開始，我們就已經(jīng)在電腦課上學(xué)習(xí)如何使用 Office Excel 來制作電子表格。

那么我們?yōu)槭裁葱枰褂帽砀衲?？因為我們有記錄和查詢?shù)據(jù)的需求。

在任何商業(yè)活動中，都會產(chǎn)生大量的數(shù)據(jù)信息，雖然我們發(fā)明了 SQL、Mysql 等數(shù)據(jù)庫語言記錄數(shù)據(jù)，但最原始的數(shù)據(jù)記錄是沒有可讀性的。

所以，為了讓數(shù)據(jù)可以更好的展示，我們就必須借助可視性更強的圖形工具，即電子表格。通過 X、Y 軸構(gòu)建的網(wǎng)格系統(tǒng)，將數(shù)據(jù)有序、清晰得羅列出來。

表格的重要性就體現(xiàn)在企業(yè)日常工作中對這些數(shù)據(jù)進行管理的需求和頻次上。

例如為電商 APP 開發(fā)了一套管理系統(tǒng)，那么電商運營每天的工作，都要繞著其中銷售、物流、流水等重要模塊的數(shù)據(jù)打轉(zhuǎn)，也就是圍繞著表格展開工作。

對于多數(shù)管理系統(tǒng)而言，數(shù)據(jù)查詢、管理都是非常重要且高頻使用的功能，所以常規(guī)項目中會包含大量的表格頁面。

甚至，有的中小型項目的所有導(dǎo)航一級頁面，只有表格，而不存在其它頁面形式。所以，表格的優(yōu)劣對用戶工作效率和平臺體驗可以產(chǎn)生決定性的影響。

而優(yōu)秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據(jù)具體情況具體分析。

所以，這也是 B 端設(shè)計師的價值之一。一個優(yōu)秀的 B 端設(shè)計師勢必投入大量精力來提升對表格的認(rèn)識和表格設(shè)計能力。

1.2 表格的主要構(gòu)成模塊

表格雖然細節(jié)設(shè)計上千差萬別，但在表現(xiàn)形式和閱讀順序上卻是基本一致的。

常規(guī)的表格必然包含表頭欄、列表、翻頁器三個部分，根據(jù)需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。

1.2.1 搜索欄

主要是用來進行簡單的數(shù)據(jù)搜索和篩選的，當(dāng)搜索項較少的時候，就可以將搜索結(jié)合到表格組件內(nèi)。而搜索項較多時，則會把它們獨立成一個篩選模塊到表格組件的上方。

1.2.2 表頭欄

每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數(shù)據(jù)類型數(shù)量。

通常，表頭的設(shè)計會和下方列表設(shè)計有一定的區(qū)分，表頭文字有一定的標(biāo)題屬性，所以會通過背景色、分割線、文字加粗來增強對比。

1.2.3 列表

列表則是縱向排列數(shù)據(jù)對象的模塊。每個數(shù)據(jù)對象占一行，行的高度根據(jù)內(nèi)容來制定。橫向列表高度和縱向表頭寬度重疊的區(qū)域稱為單元格，每個單元格展示表頭對應(yīng)的數(shù)據(jù)明細。

常規(guī) B 端項目表格都會限制列表一次展示的行數(shù)，極少使用無限滾動加載的模式。因為當(dāng)數(shù)據(jù)包含成千上萬條時會對本地、服務(wù)器性能和交互方式帶來一系列的負面影響。

1.2.4 多選和操作欄

如果數(shù)據(jù)對象支持多選和批量操作，則我們會在第一列中添加選框，并將選中后的可操作選項放進操作欄中。

1.2.5 翻頁器

翻頁器是切換列表頁面的控件。通常大數(shù)據(jù)量的列表包含上千頁，所以翻頁器只會顯示開頭幾頁和最后一頁，省略中間的，并增加適合快速跳轉(zhuǎn)的功能。

除了表頭和列表內(nèi)容外，其它模塊內(nèi)容都根據(jù)實際需求應(yīng)用。任何表格設(shè)計的第一步都是制定大框架，即包含的模塊和對應(yīng)分布位置，再展開后續(xù)的細節(jié)設(shè)計。

B 端項目支持響應(yīng)式是今天行業(yè)的普遍需求，也就是頁面內(nèi)容隨著瀏覽器視圖寬度變更而變更。

不同頁面類型的響應(yīng)式邏輯各不相同，而表格是其中邏輯最復(fù)雜，也最難理解的一種。

表格響應(yīng)式規(guī)則通常在確定好框架以后制定，優(yōu)于視覺、交互設(shè)計，因為它對視覺和交互產(chǎn)生的影響非常大，是前置條件而不是通過設(shè)計稿逆推出來的。

表格的響應(yīng)式規(guī)則比較細碎，我根據(jù)下面的順序展開解釋：

- 表格的總寬響應(yīng)

- 表格的最小寬度

- 單元格的響應(yīng)邏輯

- 內(nèi)容的響應(yīng)邏輯

2.1 表格的總寬響應(yīng)

表格的響應(yīng)主要是寬度上的響應(yīng)，整個表格的寬度區(qū)域隨父集元素的放大而放大。比如父級元素左右內(nèi)邊距為 20px，則表格整體寬度保持和父級 20px 的左右間距。

2.2 表格的最小寬度

上方邏輯中表格可以無限延長，但它卻不能無限的縮短，因為你不可能做一個只有 10px，20px 寬的表格。

過窄的表格不僅支持不了內(nèi)容的正常顯示，也毫無任何使用體驗，所以我們要為表格確定一個最小的寬度。即瀏覽器視圖即使比這個寬度更小，表格也不會再縮小了。

最小的寬度可以結(jié)合前端柵格系統(tǒng)使用的 Breakpoint 規(guī)則來制定，如 Ant deisgn 中 SM：576px，或 MD：768px。

如果不了解柵格的段落規(guī)則，也可以 “憑感覺” 定，最小表格寬度通常在 560-640px，當(dāng)然，不管怎么定一定要提前和前端溝通，確定尺寸方案。

當(dāng)表格內(nèi)容少的時候，最小寬度只是相對較大寬度窄了一點而已。而當(dāng)表格內(nèi)容過多，最小寬度無論如何也不夠放的情況，那么就會使用橫向滾動的交互形式來隱藏超出內(nèi)容。

2.3 單元格的響應(yīng)邏輯

單元格響應(yīng)這是整個表格最復(fù)雜的一環(huán)，橫向內(nèi)容會超出最小寬度的情況，就是由單元格規(guī)則決定的。

首先，單元格本身也有最小寬度，原因和前面一樣，1px、10px 寬的單元格沒有存在的意義。所以可以根據(jù)需要，制定多個等級的最小單元格寬度，應(yīng)用在不同的數(shù)據(jù)類型中。

假設(shè)表格中包含了 20 個表頭，分別使用了 10 個最小 24px 和 10 個最小 80 px 的，那么單元格的總寬最小就是 240+800 = 1040px。

所以當(dāng)父級整個表格視圖小于 1040px 的時候，內(nèi)容就會不夠顯示從而觸發(fā)左右滾動的條件。

當(dāng)上級表格寬度大于單元格最小總和時，那么單元格也就會隨之變寬。最簡單的響應(yīng)邏輯，就是為單元格寬設(shè)置百分比。比如 5 個單元格分別是父級寬度的 10%、10%、10%、20%、30%、20% ，那么在父級 1000px 的時候它們分別是 100px、100px、100px、200px、300px、200px。

只要確保百分比的總和是 100%，不管你單元格是比例均分（5個單元格等分各20%寬），還是獨立制定（上面案例），單元格寬都是等比縮放的狀態(tài)。

雖然好理解，但這種初級的做法帶來的問題也很多，那就是部分單元格沒有被 ”放大“ 的需求。比如常出現(xiàn)在第一列的多選框，或者部分標(biāo)簽單元格、固定操作按鈕單元格。

于是，為了預(yù)留給有需要的單元格更多的空間，提升體驗，就會對這些單元格實施定寬的方式，剩下的單元格繼續(xù)使用等比，只是計算的方法要減去定寬元素。

比如還是一個占比 20% 的單元格，在包含 2 個 48px 定寬單元格的 1000px 表格中，實際寬為：

（1000px - 2*48） * 20% = 180px

2.4 內(nèi)容的響應(yīng)邏輯

作為單元格的子級，內(nèi)容也可以獨立定義響應(yīng)的規(guī)則。主要包含 3 種情況：

- 無響應(yīng)

- 隱藏多余

- 換行顯示

無響應(yīng)就是顯示的內(nèi)容是固定的，比如多選框、縮略圖、單按鈕等單元格內(nèi)容，它們沒有大小變動的必要。

隱藏多余，則是主要應(yīng)用在文本內(nèi)容上，當(dāng)單元格寬度小于當(dāng)前文本所需寬度時，就會把多余的文字進行省略，這種做法適合應(yīng)用在一些原本就不是太重要的信息上。

比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“，之后再通過鼠標(biāo)懸浮彈出文字氣泡框的方式顯示所有文本。

而換行顯示，則是文本或多標(biāo)簽狀態(tài)下，一行不夠顯示就換行的做法。除非一開始單行行高預(yù)留了多行顯示的高度，否則多行內(nèi)容就會撐高單元格。

以上就是表格在響應(yīng)式模式下相關(guān)知識點。

隨著經(jīng)驗的積累，實戰(zhàn)經(jīng)驗豐富的 B 端設(shè)計師，就會在前期的規(guī)范環(huán)節(jié)制定出完整的表格響應(yīng)邏輯，應(yīng)用到前端框架開發(fā)和后續(xù)的設(shè)計，而不是做到哪定到哪。

3.1 表格框架的操作

表格首先是一個展示信息的組件，而單純依靠布局和排版技巧，并不能解決所有的信息展示問題。所以，針對網(wǎng)頁表格的局限性，我們要添加一些交互的細節(jié)來提升使用體驗。

例如，單頁表格數(shù)據(jù)量較大，有好幾屏高，往下滾動后看不見表頭，不能很好的識別單元格內(nèi)容。

或者，表頭屬性數(shù)量較多，需要左右滾動，但是每行數(shù)據(jù)要不然操作欄目看不見，要不然對應(yīng) ID 被滑走了等等。

所以，表格的框架就可以做懸浮固定的模式，將需要被持續(xù)露出的欄目懸浮固定。

表格的默認(rèn)狀態(tài)

表頭懸浮效果

右側(cè)操作列懸浮

左側(cè)ID列目懸浮

操作欄懸浮效果

當(dāng)然，除了單獨欄目的懸浮，也可以使用混合模式，比如表頭吸頂?shù)耐瑫r固定右側(cè)的操作欄。盡量將固定元素控制在 3 個以內(nèi)，以免懸浮要素太多影響內(nèi)容的瀏覽。

還要注意，除了筆記本觸摸板和少數(shù)鼠標(biāo)，一般用戶是沒有頁面左右滾動滾輪的，所以當(dāng)表格出現(xiàn)左右滾動情況以后，就一定要默認(rèn)展示進度條，方便用戶操作。

3.2 表格表頭的操作

第二步，就是和表頭相關(guān)的操作了。我們都知道常規(guī)表格頁面中，表格上方還會有個篩選區(qū)域，專門用來進行篩選相關(guān)的條件制定。

但是，部分項目需求中，會將篩選的功能整合到表頭欄目內(nèi)，而很多新手甚至不能有效的區(qū)分篩選和排序的差異。

我們先對這兩者做一個明確的定義：

篩選 Filter：對要顯示的內(nèi)容設(shè)置篩選條件，不符合條件的將會被過濾隱藏

排序 Sort：對已有內(nèi)容的顯示順序進行條件設(shè)置，不會有內(nèi)容被過濾或隱藏

這看起來好像很容易理解，但會搞混的地方就在排序的應(yīng)用上。我們常規(guī)以為的排序，就像電腦文件夾列表一樣，通過點擊表頭來決定內(nèi)容通過哪個屬性來進行升序或者降序。

在這種 “樸素” 的設(shè)定中，篩選是以單個表頭屬性為標(biāo)準(zhǔn)的，有唯一性。比如在學(xué)生數(shù)據(jù)表格中，可以以 ID、姓名、年級、年齡或成績單個屬性進行列表排序，選中其中一個屬性其它屬性的排序就被取消了。

但是復(fù)雜的排序并不是 “唯一屬性” 的，而是多個屬性的并集，以及具備優(yōu)先級和排序模式。還用學(xué)生數(shù)據(jù)表格舉例：

優(yōu)先根據(jù)年齡降序排列，同年齡下根據(jù)班級升序排列，同班級再根據(jù)成績降序排列。

這里面疊加了三個屬性，年齡優(yōu)先級最好，然后班級次要，成績最后，我們用圖表的展示可以實現(xiàn)出下面這樣的形式：

再進一步，這是我們條件已經(jīng)確定才做出來的組件，要是要制定的屬性不確定，要制定的屬性數(shù)量也不確定，順序不確定，排序模式也不確定……

這種情況就肯定要應(yīng)用排序自定義條件的邏輯了，而表頭自定義一加，那邏輯就立馬復(fù)雜了，它的操作面板可能就長下圖這樣。

排序復(fù)雜了，并不代表篩選就不要了。部分項目的篩選除了在表格外的獨立篩選區(qū)域，還可能應(yīng)用表頭篩選模式。即以單個表頭緯度設(shè)置篩選條件，比如點擊 “年份” 表頭，設(shè)置起始和結(jié)束時間。

所以，只包含篩選的情況下，表頭的圖標(biāo)就不是排序而是漏斗，點擊后就要展開篩選設(shè)置面板進行操作。

而當(dāng)多表頭篩選和多表頭排序需求并存的時候，怎么解決？

這里只建議在表頭中留存篩選選項，因為篩選可以實現(xiàn)并集關(guān)系，即前后任何表頭添加篩選項都可以組成完整的篩選條件。但是，這種交互難以完成篩選優(yōu)先級排序。

所以，我們要將排序獨立成一個按鈕到表頭之外的地方，而不是強行讓兩者并存。尤其是不要設(shè)計出有的表頭是排序，有的表頭是篩選，甚至表頭的按鈕展開面板里又會有篩選又有排序……

表頭是針對列的操作，而針對行的操作，就是對單行列表的選擇、展開和進入了。

前面我們有說過，表格第一列往往放多選框，通過點擊選擇當(dāng)前列表行。它本身的交互并沒有太多需要注意的，只要針對行的交互如果不止選擇應(yīng)該如何平衡。

部分復(fù)雜項目喜歡在表格中添加 “套娃” 的需求。即單行數(shù)據(jù)可以向下展開二級數(shù)據(jù)，或者更進一步到三級、四級。

同時，每個數(shù)據(jù)行往往還關(guān)聯(lián)詳情頁面，需要點擊展開后查看更細節(jié)的信息。

所以當(dāng)多種操作需求混合出現(xiàn)的時候，我們就要具體分析這些需求的優(yōu)先級了。到底是多選操作頻率最高，還是查看下級行，打開詳情頁。

這是為讓點擊整個數(shù)據(jù)行這個最便捷的交互可以關(guān)聯(lián)到最高頻的操作上。而其它低頻操作的交互則只限定在對應(yīng)的按鈕或圖標(biāo)上即可。

因為多選需求往往需要我們在一系列數(shù)據(jù)中選擇很多條數(shù)據(jù)，一個小小的復(fù)選框不僅選擇起來麻煩，且通過查看右側(cè)的內(nèi)容篩選數(shù)據(jù)行，再用右手握鼠標(biāo)按需點擊最左側(cè)的多選框，是非常別扭的體驗。

還有一個需要注意的細節(jié)，就是當(dāng)多選和展開下級列表共同出現(xiàn)的時候，選框和展開圖標(biāo)的排列。

通常一個數(shù)據(jù)行第一列的內(nèi)容，應(yīng)該是整行邏輯層級最高的元素。如果子數(shù)據(jù)行是被獨立出來需要單選，那么展開圖標(biāo)就要放到選擇前面。如果選擇數(shù)據(jù)包含了該行和所有子行，那么選擇就應(yīng)該在展開圖標(biāo)前面。

當(dāng)然，如果展開數(shù)據(jù)和父集就完全不是一種類型，用另一套屬性，那么它也就沒有被同時選中的需求和可能，不需要為它添加選擇框。所以，這種情況下多選框也應(yīng)該放在第一位。

最后，就是解決單元格的交互了。常見的單元格交互可以總結(jié)成下面這幾類：

- 點擊打開頁面

- 點擊復(fù)制內(nèi)容

- 點擊修改內(nèi)容

- 懸浮提示說明

點擊打開頁面很好理解，比如單元格內(nèi)的數(shù)據(jù)是鏈接、圖片、按鈕然后實現(xiàn)跳轉(zhuǎn)或彈窗。

而復(fù)制內(nèi)容，則有一些需要注意的細節(jié)。表格中有一些數(shù)據(jù)是沒有實際閱讀意義的，它的存在就是用來做特定的校對或者是復(fù)制出去，比如 ID 號、哈希值、訂單號等。

常規(guī)的做法是直接在右側(cè)添加一個復(fù)制圖標(biāo)，但對于一些偏復(fù)雜的表格來說，所有可復(fù)制的單元格都加復(fù)制圖標(biāo)是非常影響瀏覽體驗的。

所以，我的建議是都是默認(rèn)隱藏復(fù)制圖標(biāo)，只有當(dāng)鼠標(biāo)移動到對應(yīng)單元格的時候會顯示。同時，這個圖標(biāo)可以覆蓋到數(shù)據(jù)上層，因為既然鼠標(biāo)移動過來為了復(fù)制，那么數(shù)據(jù)被遮擋在這階段自然無關(guān)緊要，為整體頁面預(yù)留空間

這樣的操作按鈕隱藏浮現(xiàn)方式，也適用于單元格修改的操作。但是，和復(fù)制不同，單元格信息編輯通常是編輯文本信息，還有后續(xù)的操作步驟。

如果點擊進行文本編輯，那么建議在該表格打開一個新的輸入浮窗，且浮窗內(nèi)輸入框文本和原來文本位置持平實現(xiàn)順暢的步驟轉(zhuǎn)換。

同時建議，為了防止誤操作，盡量增加確定、取消按鈕，防止誤操作覆蓋原有數(shù)據(jù)且無法撤銷。

最后就是單元格的懸浮提示了。B 端控件中的氣泡框就是用來做提示的控件，但它只是手段。為什么需要懸浮提示，提示什么內(nèi)容是我們需要考慮的。

對于及其復(fù)雜的表格來說，往往是沒辦法支持所有數(shù)據(jù)都完整展示的，我們會在使用省略號對它進行截斷。但截斷不意味著用戶完全不需要在表格查看到完整的信息。

所以，就可以通過氣泡的做法，將信息呈現(xiàn)給用戶。而呈現(xiàn)過程中，盡量確保鼠標(biāo)可以移動到氣泡上復(fù)制里面的文字內(nèi)容（和全部復(fù)制不一樣），而不是鼠標(biāo)移走就直接關(guān)閉消失。

熟練運營這幾個交互方式，并統(tǒng)一對應(yīng)的使用規(guī)則，就能確保整個項目的表格單元格操作預(yù)期的一致，不需要逐一進行嘗試和鑒別。

作者：酸梅干超人   來源：站酷

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

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

藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

網(wǎng)上對介紹導(dǎo)航文章已經(jīng)有很多，有部分已過時，今天自己再重新整理一遍，方便自己也方便更多人理解。

如2、社區(qū)產(chǎn)品引導(dǎo)用戶發(fā)帖子

如3、凸顯核心功能，如百度地圖、高德等

優(yōu)點：

 藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。 



作者：UX設(shè)計筆記    來源：站酷





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



藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

這些年里，這款工具進行了快速的迭代和更新，響應(yīng)設(shè)計師們的需求，不斷完善功能，成為設(shè)計行業(yè)推薦率（NPS）最高的軟件之一。

尤其是作為一款優(yōu)秀的買斷制軟件，不僅定價合理，甚至 5 年來 ￥199 的售價分文未漲。 

而我同期開始用的 Ulysses（用它寫了兩本書，寫過的公眾號內(nèi)容超100W字）、MindNode、Notability 等，全都在這期間從買斷制改成訂閱制，甚至訂閱價格還逐年上漲？？

我從來不吝嗇于贊美優(yōu)秀的軟件工具，尤其是保持初心以純粹的產(chǎn)品功能來服務(wù)用戶的那種更甚。五年前我作為最早就推薦它的人之一，五年后我不介意再夸它一次。 

它就是 —— Eagle。 

Eagle官網(wǎng)：https://cn.eagle.cool/

前面說過，Eagle 是一個設(shè)計資源管理器，它可以做的事情非常多，但我不是要在這里寫功能介紹的，而是來分享一下，我都用它做了什么。

2.1 圖片采集 

圖片采集是我使用 Eagle 的核心目的，他包含豐富的采集形式完美覆蓋我的實際使用需要。 

第一類采集形式就是通過瀏覽器插件或截圖工具，將網(wǎng)頁中看見的圖片下載到本地。 

第二類采集形式，則是通過粘貼花瓣或 Pinterest 的畫板地址，批量采集該畫板的所有圖片。這是我最喜歡的功能，沒有之一。

花瓣和 Pinterest 這類網(wǎng)站，真正的精華是優(yōu)質(zhì)用戶自己收錄的圖庫，而不是直接搜索出來的結(jié)果。批量采集，就是讓我在找到優(yōu)質(zhì)圖庫后，用最簡單的方式下載這些被精挑細選出來的圖集。 

2.2 篩選排序 

因為批量下載很方便，我可以很快的針對同一類目收集出成千上萬的內(nèi)容。但同一個類目下載那么多圖片或素材有意義嗎？ 

數(shù)量從來不是我追求的目標(biāo)，我會將任何類目的內(nèi)容數(shù)量進行精簡，只保留其中最精華的一小部分，即使它們是由一批最優(yōu)秀的設(shè)計師收藏的圖庫，我也只取精華中的精華。 

但是，光靠一張張圖看過去打星再篩選，會把我累死。于是，我就會利用 Eagle 的篩選與排序功能，快速剔除劣質(zhì)內(nèi)容，縮小選擇范圍。 

比如之前我分享過的 UI 配圖的素材，包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張，是我從上百個攝影畫板里批量采集下來的。

應(yīng)用到大小、尺寸排序，色彩篩選，星級篩選等多種手段配合，幫助我快速篩選出各自質(zhì)量最好的 100 張圖片。而這前后大概只用了兩小時的時間。

2.3 資源管理 

通過前面兩個功能，我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置，需要根據(jù)一定的規(guī)律進行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。 

Eagle 的資源管理包含三個方向： 

1. 普通文件夾：類似電腦文件夾的邏輯，可以進行排序和上下級設(shè)置，收納 

2. 智能文件夾：通過一定條件設(shè)置，篩選出對應(yīng)圖片和素材的動態(tài)文件夾 

3. 分類標(biāo)簽：即可以作為分類來使用的標(biāo)簽系統(tǒng)，可以為一張圖片或素材打上多個分類標(biāo)簽

我的資源管理方法論一直崇尚的是極簡主義，能用普通文件夾管理的情況我就一定不用智能和標(biāo)簽。不是說這些功能不好，而是因為它們需要對素材進行二次的處理和維護，只有在必要條件下才會使用。 

我的素材資源管理是首先構(gòu)思我會用到的幾個大類，每個大類下會包含幾個二級分類，即 Eagle 中的1級文件夾，然后再創(chuàng)建對應(yīng)的文件夾并命名和添加色彩，比如下面示例。

不要奢望一開始規(guī)劃分類能做到盡善盡美，只要大的方向上確定了，然后再根據(jù)日常收集的需要慢慢去添加下級文件夾，而這一級就沒有那么嚴(yán)格的限定，用到哪加到哪。

只有在一些非常特殊類目下，我才會去為圖片和素材增加標(biāo)簽，而不是為了打標(biāo)簽而打標(biāo)簽。比如我收集的學(xué)員作業(yè)也存在 Eagle 中，會包含課程期數(shù)、作業(yè)類型兩個維度，我就需要用標(biāo)簽進行管理，方便我后續(xù)進行跨文件夾的查看與篩選。 

2.4 素材預(yù)覽

除了基礎(chǔ)的靈感圖片外，我還往里面存了很多其它文件素材，包括但不限于下面這些種類。 

Eagle 能作為一個設(shè)計資源管理工具，并不是因為可以添加文件夾和標(biāo)簽，再實現(xiàn)一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預(yù)覽。 

它比 Mac 自身的快速預(yù)覽更高效（后面會解釋），同時作為雙系統(tǒng)用戶，我得以在 Windows 系統(tǒng)下如下圖快速查看素材預(yù)覽，而不是安裝格式支持零碎的插件（或流氓軟件）來實現(xiàn)。

尤其是 Sketch、XD、Mindnode 文件，有了縮略圖，就不用通過打開源文件來查看內(nèi)容。并且字體文件支持在目錄中直接啟用和停用，可以非常方便的實時管理本地字庫，保證我在設(shè)計軟件中只會出現(xiàn)必要的字體，而不會全部顯示出來。

2.5 網(wǎng)址記錄 

Eagle 還有個特別的功能 —— 網(wǎng)址記錄，這也是我最常用的功能之一。 

早前有先用 Pocket 然后轉(zhuǎn)移 InstaPaper 和 Cubox 來收錄網(wǎng)上看到的優(yōu)質(zhì)設(shè)計文章，方便我需要引用原文和整理思緒的時候回看。

雖然最后采用的 Cubox 也是一個優(yōu)秀的稍后閱讀工具，但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以，自然而然的，我還是把網(wǎng)址全部遷移回 Eagle 中。 

只要安裝 Eagle 瀏覽器插件，我就可以快速收集網(wǎng)址到 Eagle 目錄中，之后隨時進行查看。 

可能有的同學(xué)喜歡用網(wǎng)頁整頁截圖來收集文章，只是我不太喜歡用圖片格式查看文本，所以這個根據(jù)個人喜好即可。

2.6 項目管理 

同時，我不止拿 Eagle 管理靈感和素材，也直接拿來做項目管理。 

在 Eagle 庫文件進行團隊同步以后，針對每個項目創(chuàng)建獨立的項目文件夾，用來收錄相關(guān)的文檔、靈感圖、情緒版、配圖和設(shè)計文件。

尤其是項目前期收集靈感圖和情緒板的階段，多人共同收集和編輯的結(jié)果可以最方便的查看和進行評價，非常好的優(yōu)化我們的協(xié)作流程和效率。 

2.7 作業(yè)評審 

作為一個設(shè)計講師，要觀察學(xué)生的作業(yè)和進行點評。自然而然，我也會優(yōu)先將所有作業(yè)添加到 Eagle 中去。 

通過對每份作業(yè)前期的打分，標(biāo)注，來進行后面點評課程的分享和講解。

同時，這些收集的作業(yè)，需要在后續(xù)其它場景中作為正、反面的案例。所以對作業(yè)的評級和標(biāo)簽就變得必要起來，在相關(guān)場景下通過創(chuàng)建智能文件夾快速篩選出范圍內(nèi)的圖例。 

以上就是我使用 Eagle 最重要的 7 個場景，雖然實際應(yīng)用還遠遠不止它們，但因為篇幅關(guān)系就先介紹到這里。

Eagle 作為一款被我長期使用和推薦的工具，不僅僅是因為上面的使用場景，它們是結(jié)果。所以，我要從更底層的角度，來解釋它的不同之處和特點。

3.1 獨立的 Eagle 庫文件 

從上線以來，Eagle 有一個飽受誤解和詬病的底層設(shè)計，就是它的 “素材包” 文件 .eaglepack 。用戶需要先創(chuàng)建一個 “庫“，之后添加的所有素材、文件，都會被保存到這個庫文件中去。

換句話說，相當(dāng)于 Eagle 在你的電腦中創(chuàng)建了一個特殊的文件夾，用來保存你置入的文件。即使你添加的素材是已經(jīng)下載到本地，它也會再 “復(fù)制” 一份到這個庫中。 

很多設(shè)計師對這個邏輯感到很費解，為什么本地存的好好的，Eagle 要再復(fù)制一份，完全就是浪費系統(tǒng)資源和時間的做法。如果無法理解這個邏輯，就是不具備 ”產(chǎn)品思維“ 的特征之一。 

我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。

它們的運作機制，是通過運行該軟件，來讀取你的硬盤目錄和對應(yīng)文件。使用它們并不會額外復(fù)制文件出來，即使你在軟件中置入素材，它們也只是幫助你正常保存到硬盤的對應(yīng)位置。 

為什么這類工具會被我們放棄，有下面這些原因： 

第一，它們的核心一直都不是全領(lǐng)域的設(shè)計資產(chǎn)管理，而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理，尤其是攝影相關(guān)項目。 

第二，就像對比 Photoshop 相較與 XD 一樣，龐大的軟件體積和功能，對啟動速度和硬件資源消耗帶來沒辦法忽視的負面影響，降低操作的效率。 

第三，就是比較值得深入思考的地方，那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中，多出大量非必要的目錄和文件，嚴(yán)重增加我們的決策成本和管理成本。 

范圍太大或自由度太高并不是什么好事，就像 iOS 的相冊一樣，它是個封閉的圖片庫，不像安卓一樣讀取其它硬盤文件夾，從而讓相片的管理更簡單明了。 

自由雖然可以做更多事，但這些沒有必要的可能性增加就只會變成決策和行為中的負擔(dān)。簡潔明了，才是高效的前提條件。 

第四，就是設(shè)計文件的 ”預(yù)覽效率“ 問題。不管電腦的性能怎么提升，大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件，還是高達幾億像素的超清圖片，加載都是需要等待的。 

比如下方目錄中的作業(yè)文件，因為很多同學(xué)導(dǎo)出畫布不考慮圖片質(zhì)量尺寸，所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。

當(dāng)這么多大型位圖聚集在一起，Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了，這個功能的代價是生成了大量的 ”緩存”，即這些縮略圖會暫時保存到緩存文件夾中。

緩存文件都只是過客，在你格式化系統(tǒng)，換另一臺電腦打開，或者緩存超過了上面設(shè)置的 50G，那么舊的文件就會被刪除，你還是要重新加載該文件的縮略圖。相信我，超出緩存容量是非常容易的事，即使你加到 100G 也一樣。 

Eagle 的庫特性，是在添加素材進庫之前，會生成一個對應(yīng)的縮略圖文件，之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件，而不是解析原圖。 

這種策略帶來的幫助除了在文件夾之間切換高效自如，也對本地內(nèi)存的壓力有非常大的緩解。 

在一般資源管理中，一個文件夾內(nèi)有幾千張高清圖片時，持續(xù)滾動到目錄底部就會發(fā)現(xiàn)越來越卡，因為占用的內(nèi)存越來越多，直至達到臨界點釋放掉上方列表加載的內(nèi)容（上滾會重新加載）。相信有用相機的同學(xué)一定很了解這種感受。 

綜合各種問題和影響，自建庫，并為每個素材生成不會被刪除的縮略圖就是最好的選擇。 

這不僅僅是 Eagle 一個工具的做法，即使 Adobe 也在 Lightroom 應(yīng)用了相同的策略，新 LR 導(dǎo)入圖片素材到它的自建庫中進行管理，同時生成縮略圖用于列表加載（降低高像素調(diào)節(jié)延遲）。而老版的 LR 雖然還沒下架，但為它增加 Classic（古典） 的后綴，所以它們認(rèn)為哪種做法更有潛力，你們自己也能判斷了對吧？

3.2 為什么不能聯(lián)網(wǎng) 

今天我們使用的絕大數(shù)軟件都是 SaaS（微軟：基于web的軟件服務(wù)），自帶聯(lián)網(wǎng)備份和同步，但是 Eagle 只能保存本地卻不符合我們的 “習(xí)慣”，這是為什么？ 

因為成本是沒辦法控制的，重度用戶成百上千 G 的硬盤占用，是不可能輕易使用云服務(wù)來實現(xiàn)同步的。這些動輒幾 G 的 PSD 文件或其它大型設(shè)計文件，會讓整個同步過程充滿不確定性和沖突。 

同時，云同步是一種成本特別高的服務(wù)類型，和一般的云存儲空間不是一種概念，想要大容量又要免費，是不可能的。Adobe 同步盤 1T 容量港區(qū)售價 68 港幣，蘋果 iCloud 同步盤是 2TB 68 元/月。 

算起來他們的價格并不貴，但一定要清楚 Adobe 和蘋果云都是為了自家生態(tài)服務(wù)的，而且作為軟件業(yè)巨頭有自己的大型數(shù)據(jù)中心，降低云服務(wù)成本。類似 Eagle 這樣的初創(chuàng)團隊是不具備這種條件的，即使推出了，價格也不會便宜。 

可能還有人會對比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方網(wǎng)站的本地客戶端，更方便的訪問自己的官網(wǎng)個人中心，無法收集和整理圖片以外的其它素材，所以同步起來容易。

Eagle 的數(shù)據(jù)就只能保存本地，或者保存在笨拙的移動硬盤內(nèi)，隨身帶著嘛？肯定也不是。 

庫文件的另一個管理好處，就是方便做備份。在今天同步盤服務(wù)逐漸成熟的環(huán)境下，你可以選擇購買類似 Dropbox、堅果云這類同步網(wǎng)盤，通過它們實現(xiàn)備份和多設(shè)備同步。

或者，可以購買群暉、威聯(lián)通、極空間為主導(dǎo)的個人云盤硬件，實現(xiàn)空間更大、更靈活的使用體驗。

如果有同學(xué)不知道怎么同步的，我會在后面分享。 

3.3 ARM 硬件的適配 

最后一點，就是對蘋果 ARM 架構(gòu)的適配了。在 Eagle 2.0 版本中，快速適配了 Mac 的新硬件架構(gòu)，從而讓軟件的運行、讀取效率遠遠高于上一個版本，做到了絲般順滑的地步。

對軟件本身的優(yōu)化也是速度的保障之一，相信 Bridge 用的多的同學(xué)一定忽略不了它無處不在的延遲與卡頓。

4.1 Eagle 庫的同步方法 

Eagle 如果要進行網(wǎng)絡(luò)的備份和同步，那么一定要分清楚同步盤、網(wǎng)盤、移動硬盤的區(qū)別。 

其中，網(wǎng)盤和移動硬盤基本上是一樣的，它們的使用特點就是我們要主動把要保存的東西，拖拽進硬盤目錄內(nèi)。移動硬盤備份速度還好點，網(wǎng)盤的備份就要非常久的時間。 

如果你有兩臺電腦，使用移動硬盤的方案就得一直隨身帶著，用哪臺插哪臺上。非常容易在第二天忘記拔掉，然后回公司的時候沒庫可用。使用網(wǎng)盤的方案，那就更不可能的頻繁的備份和在另一臺電腦中下載。 

類似 Dropbox 或 同步盤工具，就是用來解決這類問題的。簡單點說，同步盤的原理就是本地安裝一個同步軟件和云端的服務(wù)器進行通信，這個同步軟件會綁定相關(guān)的本地文件夾。于是，這個文件夾內(nèi)有任何文件的變更，同步軟件就會自動把變更的軟件傳輸?shù)椒?wù)器上。 

而同步盤的特點并不是只能客戶端和服務(wù)器一對一傳輸，而是可以多對一同步。如果服務(wù)器內(nèi)容更新，它就會把更新的數(shù)據(jù)實時推送給其它客戶端，更新它們本地的文件。

通過這種模式，就能實現(xiàn)自己多臺設(shè)備，或者團隊多個成員設(shè)備的文件夾實時同步，無需你手動進行操作。 

當(dāng)然，同步盤對服務(wù)器的資源占用與消耗遠遠大于一般網(wǎng)盤，所以基本只有付費的工具，而這種帶給我們生產(chǎn)力的提升和數(shù)據(jù)安全的預(yù)算是有絕對必要的。 

如果使用蘋果的同學(xué)，可以通過將 .eaglepack 保存到關(guān)聯(lián) iCloud 的文件夾即可（最好“文稿”里）。蘋果系統(tǒng)就會自動開始同步，其它 Mac 電腦就能實時接收。 默認(rèn)的空間肯定不夠用，建議開通 200G 容量的服務(wù)。

如果用專業(yè)同步云軟件，以堅果云舉例，下載完客戶端，只要完成關(guān)聯(lián)包含 .eaglepack 的文件夾，那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云，就可以把該文件夾下載下來并自動同步。

4.2 靈活使用網(wǎng)頁采集

我收集靈感素材是非常有目的性的，比如一個項目需要的配圖素材，我會一口氣去收集幾十張覺得合適的圖。

Eagle 有一個瀏覽器的采集插件，這個插件非常好用。只要拖動瀏覽器的圖片，就會出現(xiàn)對應(yīng)的采集彈窗，把鼠標(biāo)移動到對應(yīng)目錄上就可以完成采集。

如果你覺得整個頁面的圖片都想保存，也可以在插件圖標(biāo)中使用批量收藏按鈕（或快捷鍵），就可以采集整個頁面中的所有圖片，以及通過尺寸篩選對應(yīng)尺寸。

應(yīng)對日常看到的優(yōu)質(zhì)作品、靈感圖，也可以非?？焖俚膶崿F(xiàn)采集?？梢宰罘奖愕氖占{我們自己的采集資料。

4.3 UI 靈感庫的搭建模式 

作為移動端 UI 設(shè)計師來講，收集日常見過的優(yōu)秀 APP 界面，是必要的職業(yè)素養(yǎng)。而使用 iPhone + MacOS 再結(jié)合 Eagle 的話，這個過程就會變得非常的簡單。 

首先以完整頁面收集為例，之前看過不少人推薦使用 iOS 的跨設(shè)備復(fù)制圖片到 Mac 中黏貼的操作，是完全沒有必要的，因為一次只能復(fù)制一張截圖。 

你要做的就是開啟相冊的云同步，日常使用 iPhone 時把想要收集的頁面進行截屏即可。每過一段時間，在電腦的相冊中打開 ”截屏“ 相冊，就有你這段時間收集的所有截屏。框選相關(guān)內(nèi)容，拖進 Eagle 對應(yīng)文件夾中就完成收集，然后再刪除原圖。 

而且因為相冊特殊的機制，直接拖拽出的圖片是壓縮后的版本，讓截圖的文件的體積大幅度縮小，從3M 變成 300K（完全夠看），非常好的降低硬盤占用量。 

除了收集頁面，更重要的 UI 靈感是頁面中的 ”組件“，我們需要根據(jù)組件為目標(biāo)去收集相關(guān)的案例。直接拖進整頁截圖的方式就不太合適，比如下面的瓷片區(qū)案例區(qū)。

所以，我們要開啟 Eagle 的自帶截圖功能，并設(shè)置好你覺得順手的快捷鍵。

記得打開第一個選項 ”彈出分類“，就可以每次截圖后選擇指定的文件夾。不管是你的截圖，還是網(wǎng)上的其它案例，你都可以用最高效的方式收集這些組件樣式，輕易搭建自己的組件靈感系統(tǒng)。

4.4 文件的自動導(dǎo)入

前面講過，我會用 Eagle 來放 Mindnode 這類思維導(dǎo)圖文件。但是，Mindnode 先創(chuàng)建保存，再拖進 Eagle 的步驟太麻煩了。 

所以，我正常新建并保存 Mindnode 思維導(dǎo)圖會到它默認(rèn)文件夾中，然后使用 Eagle 的文件夾檢測功能關(guān)聯(lián)它，之后所有保存的文件就會出現(xiàn)在 Eagle 的目錄中。

之后，我編輯和查看老的 Mindnode 文件就在 Eagle 中進行了。這么做的好處，還可以讓我使用 Windows 系統(tǒng)的時候能夠正常預(yù)覽思維導(dǎo)圖。 

4.5 高效的字體的管理

Eagle 是可以管理字體的，我把所有正在用或收集的字體都放進了 Eagle 的字體文件夾中。

可能你們會有疑問字體丟進字庫就行了，還管理它們干什么？或者說有字由之類的字體軟件，用 Eagle 干什么。 

一方面是我會盡量精簡使用工具的數(shù)量，另一方面，就是使用團隊同步盤的時候，我們的團隊字庫是統(tǒng)一的，隨時可以找到啟用的，最快解決其他人的設(shè)計文件字體缺失問題。 

同時，當(dāng)我在使用 UI 軟件設(shè)置字體覺得選擇起來太困難時，就會去關(guān)閉掉大多數(shù)最近不會用的字體。實現(xiàn)這個操作非常的簡單，只要新建 ”智能文件夾“，并添加選項 ”字形文件“ 和 ”已安裝“，那么啟用的字體就會全部出現(xiàn)在這個列表中。

用一兩分鐘的時間就可以批量選擇你想要停用的字體，右鍵停用即可，它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾，每次清理只需要一兩分鐘時間。 

目前上方截圖中的很多案例還不是最終的完整版，最近上海疫情居家隔離，大多數(shù)工作暫停中，我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西，所以這次我把整體素材都導(dǎo)出后重新進行整理中，也是為什么會寫這篇內(nèi)容的原因。

Eagle 帶給我最大的價值，就是為我和團隊節(jié)省了海量的時間，讓我有可以更快的找到參考素材，更快的整理分類，更好的同步項目文件。 

上面分享的很多體驗和總結(jié)，都是在 5 年來長期使用中一點點摸索，適應(yīng)，并形成習(xí)慣的。任何工具的使用與自己工作學(xué)習(xí)的結(jié)合，都是漸進磨合的，每個人都可以在這個工具中挖掘出適合自己的用法。 

但依舊要給大家一個建議，不要為了收集而收集，也不要沉迷與堆積素材的數(shù)量，讓它為我們服務(wù)，恰到好處的出現(xiàn)在我們的實踐過程中。

作者：酸梅干超人   來源：站酷

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

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

藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司