毫無疑問，表格之于B端產(chǎn)品而言是及其重要的一部分，那么，如何系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)呢？本文作者從表格設(shè)計(jì)規(guī)范與交互邏輯兩個(gè)角度提出了15點(diǎn)建議，干貨滿滿，希望對你有幫助。

表格作為B端產(chǎn)品中重要的界面組成部分，承載著內(nèi)容展示、數(shù)據(jù)記錄等多重任務(wù)。每家產(chǎn)品的表格看起來構(gòu)成差不多，但在交互細(xì)節(jié)上仍然有很多好的地方值得我們仔細(xì)思考。

本次通過整理10條B端表格設(shè)計(jì)規(guī)范+5條B端表格交互邏輯，系統(tǒng)掌握B端產(chǎn)品中的表格設(shè)計(jì)～

一、B端表格規(guī)范整理

1. 對齊，高效的信息獲取方式

表格內(nèi)的信息通過對齊，會(huì)更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，且視線流動(dòng)順暢，能夠讓人快速捕捉到所要的內(nèi)容。

• 文本信息左對齊，因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右，符合正常心智；
• 數(shù)據(jù)信息右對齊，方便數(shù)字大小的直觀對比；
• 內(nèi)容寬度固定居中對齊，更好的信息呈現(xiàn)及表格空間的節(jié)?。?/li>
• 表頭與信息內(nèi)容對齊方式一致，一致性以達(dá)到簡化，降低視覺噪音。

2. 表格列數(shù)與固定列

默認(rèn)展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會(huì)以滾動(dòng)條滑動(dòng)而展示出來。

有操作時(shí)需固定，操作項(xiàng)不固定時(shí)無法快速定位會(huì)降低操作效率；重要信息固定，有利于快速獲取重要的內(nèi)容。

3. 表格列表的寬度

寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。（如果由于屏幕小表格會(huì)出現(xiàn)省略，就要考慮多一個(gè)瀏覽器自帶的title提示。）

注：當(dāng)?shù)谝涣惺切蛱柣蚨噙x項(xiàng)時(shí)，列寬不需要太寬，這樣視覺不會(huì)顯得空洞。

4. 表頭每列標(biāo)題文字字?jǐn)?shù)

字符不要多，如果文字太多，就需要做文字信息精簡化。同樣，對于專業(yè)術(shù)語或用戶不常見的名詞應(yīng)給予一定的幫助說明。

5. 長文本處理

表格內(nèi)容較多且有長文本時(shí)，長文本縮略展示；表格內(nèi)容較少時(shí)有長文本，長文本換行展示。

6. 空白數(shù)據(jù)填充「-」，避免留白產(chǎn)生疑慮

表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況，留白處理會(huì)給用戶造成一定的困惑和誤解，是系統(tǒng)沒有加載出來嗎？明智的做法，使用「-」填充顯示。圖片為空時(shí)使用圖片占位符。

7. 操作列的統(tǒng)一

同一項(xiàng)目中的操作列命名應(yīng)該保持統(tǒng)一，例如：常規(guī)增、刪、改、查命名為新增、刪除、編輯、詳情。

操作項(xiàng)超過三個(gè)時(shí)，將操作低頻折疊收起，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。

8. 數(shù)據(jù)升降樣式

給數(shù)據(jù)做升降區(qū)分可以快速判斷數(shù)據(jù)的趨勢，國內(nèi)數(shù)據(jù)升圖標(biāo)默認(rèn)為紅色，降的為綠色。

9. 表格全局操作和批量操作

全局操作為無需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見的有新增、導(dǎo)入、篩選。

批量操作就是對表格的多行數(shù)據(jù)同時(shí)操作，常見的有導(dǎo)出、刪除。

全局和批量都不屬于單個(gè)對象因此需要放在表格外，操作具體的位置排放根據(jù)操作的重要程度一次從左到右遞減。

10. 斑馬線

條紋顏色：標(biāo)題背景色透明度60%左右；（條紋顏色視覺上應(yīng)該比標(biāo)題欄弱一點(diǎn)）鼠標(biāo)hover顏色：主題色透明度10%。

二、B端表格交互整理

1. 固定表頭，一目了然

當(dāng)閱讀豐富且繁多的表格時(shí)，由于屏幕有限，用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來閱讀信息。

固定表頭，能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現(xiàn)。

2. 排序，讓信息有序起來

可以讓無序信息內(nèi)容進(jìn)行有序排列，排序分為升序和降序，一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。

3. 調(diào)整列寬度，查看完整數(shù)據(jù)

允許調(diào)整列的寬度來查看更加完整的縮略數(shù)據(jù)。被截?cái)嗟臄?shù)據(jù)，默認(rèn)支持鼠標(biāo)懸停時(shí)瀏覽器自帶title顯示完整數(shù)據(jù)。

4. 水平滾動(dòng)，固定首尾列

呈現(xiàn)大型數(shù)據(jù)集時(shí)，水平滾動(dòng)是不可避免的，通過橫向滾動(dòng)查看其它數(shù)據(jù)。將首列進(jìn)行固定（若包含勾選操作，則一起固定），以便用戶將數(shù)據(jù)與對象進(jìn)行對應(yīng)。

5. 分頁固定

若表格是分頁處理的，分頁會(huì)放在上部、下部或上下部均有，分頁固定省去了用戶需要翻到頂部或底部進(jìn)行操作的麻煩。

都是交互反饋和提示組件，大家可能會(huì)疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 的區(qū)別是什么，兩者之間的應(yīng)用場景如何？本文對兩者的差異進(jìn)行總結(jié)，希望對你有所幫助。

同樣都是交互反饋及提示組件，你可能會(huì)疑惑：文字氣泡 Tooltips 和氣泡卡片 Popover 有什么區(qū)別？分別有哪些特定的使用場景？

本文就來詳細(xì)分析下這兩個(gè)組件的區(qū)別和聯(lián)系，幫助你做好應(yīng)用。

一、氣泡卡片  Popover

氣泡卡片（Popover）是當(dāng)用戶點(diǎn)擊 / 鼠標(biāo)移入元素時(shí)，就會(huì)彈出氣泡式的卡片浮層。當(dāng)對于某個(gè)元素有更多的解釋性描述和相關(guān)操作時(shí)，這些內(nèi)容可以收納到元素的氣泡卡片中，根據(jù)用戶的操作行為進(jìn)行展現(xiàn)。

其用法特征是：

1. 用戶可以在浮層卡片上進(jìn)行相關(guān)操作，也即氣泡卡片可以并需要承載更復(fù)雜的內(nèi)容和交互功能。

2. 卡片中可以包括的內(nèi)容有：文字說明，圖片內(nèi)容，操作按鈕，相關(guān)鏈接等等。

3. 組件功能側(cè)重于：承載信息和操作。即收納并在需要的時(shí)候展示與該元素內(nèi)容相關(guān)的信息和操作。這些信息的特征通常是：

• 并不緊急但比較重要的解釋內(nèi)容；
• 有一部分的用戶需要隨時(shí)閱讀的內(nèi)容；
• 在點(diǎn)擊關(guān)鍵操作后給用戶確認(rèn)“是否繼續(xù)進(jìn)行”的提示（Ant Design 也單獨(dú)把這個(gè)功能拿出來做成做了一個(gè)組件：Popconfirm 氣泡確認(rèn)框，如下圖）。

二、文字氣泡  Tooltips

文字氣泡（Tooltips）是相對簡單的文字提示氣泡框。用戶使用鼠標(biāo)移入元素后顯示提示，移出后提示消失。

其用法特征是：

1. 文字氣泡通常不承載復(fù)雜的信息和操作，僅提供一段文案解釋，也即用戶在文字氣泡中不能做除閱讀外的其它操作。

2. 該組件功能側(cè)重于：解釋說明。即對局部內(nèi)容或元素進(jìn)行文字性的解釋說明。通常來說該氣泡是對其載體本身的解釋，比如：

• 一個(gè)特殊的功能按鈕；
• 專有名詞、難懂詞匯；
• 看不出具體目的地的操作鏈接
• 特殊的 icon 等。

三、使用建議

1. 關(guān)于使用場景

• 氣泡卡片 Popover：常用于承載信息和操作。承載的內(nèi)容和形式更為多樣。
• 文字氣泡 Tooltips：常用于解釋說明。僅承載簡單的文案信息。

2. 關(guān)于組件樣式

有同學(xué)看過 Ant Design 組件庫提供的組件樣例，會(huì)覺得氣泡卡片 Popover 是白色背景，而文字氣泡 Tooltips 是半透明黑色背景。

其實(shí)這兩個(gè)組件的背景顏色上的差異并不是重點(diǎn)，因?yàn)檫@兩個(gè)組件都可以使用其他顏色（比如帶有透明度的品牌色）做背景底色。顏色并不具備唯一標(biāo)準(zhǔn)。AntD 就提供了多種顏色的文字氣泡樣式：

3. 關(guān)于理解規(guī)范

也許你已經(jīng)發(fā)現(xiàn)，即使我們將一個(gè)組件的使用規(guī)范和應(yīng)用場景解釋得再全面，在使用時(shí)也總會(huì)出現(xiàn)一些特殊的業(yè)務(wù)需求和應(yīng)用場景無法嚴(yán)格按照規(guī)范來執(zhí)行。

面對復(fù)雜多樣的業(yè)務(wù)需求，我們更應(yīng)該學(xué)會(huì)：在理解業(yè)務(wù)需求的基礎(chǔ)上，合理調(diào)整組件的使用方式和樣式。

組件的規(guī)范對設(shè)計(jì)師來說并不應(yīng)該是限制或約束，而是一種能夠幫助我們快速實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)一致性，保證基礎(chǔ)體驗(yàn)的快速方式。

編輯導(dǎo)語：B端產(chǎn)品的展現(xiàn)形式包含了很多類型，標(biāo)簽頁、彈窗、懸浮層等等。本篇文章中作者分享了如何正確的呈現(xiàn)B端產(chǎn)品，讓產(chǎn)品的交互體驗(yàn)更加絲滑。感興趣的小伙伴們快來一起看看吧，希望對你有所幫助。

在B端產(chǎn)品操作中，需要高頻率地打開各類鏈接和按鈕，如果點(diǎn)擊后需要展示新的內(nèi)容，那么展現(xiàn)形式就包含了很多種類型，標(biāo)簽頁、新頁面、懸浮層、彈窗、抽屜等等。

在面對數(shù)量龐大的B端頁面、組件、交互場景下，應(yīng)該選擇哪種展示形式就變成了一個(gè)棘手的問題。

本篇分享就將集中在解決如何選擇正確的呈現(xiàn)形式上，讓產(chǎn)品的交互體驗(yàn)更順滑。

一、內(nèi)容的載體形式

網(wǎng)頁是一種可視化的UI界面，也是一種內(nèi)容載體，它是瀏覽器訪問網(wǎng)站后顯示的主要對象，也是瀏覽器展示內(nèi)容中層級最高的單位。

在同一個(gè)網(wǎng)站中，如果我們想要訪問其它網(wǎng)頁，就需要點(diǎn)擊按鈕或鏈接觸發(fā)，這時(shí)候，打開新網(wǎng)頁的方式就有兩種，在新窗口/標(biāo)簽中打開（_blank）或者在本窗口/標(biāo)簽中打開（_self）。

不管是哪種，本質(zhì)上都需要瀏覽器重新加載新的頁面。對于一般的企業(yè)官網(wǎng)、新聞網(wǎng)站來說，這種加載的模式?jīng)]有太大的問題，因?yàn)椴僮黝l次相對適中，用戶中間會(huì)有比較長的時(shí)間停頓下來查看頁面的內(nèi)容信息。

而B端項(xiàng)目則不同，雖然也有不少查看頁面信息的需求，但是包含了更多需要短平快完成操作目標(biāo)的使用場景，比如修改個(gè)標(biāo)題，更改商品價(jià)格，添加分類字段等。

如果所有高頻操作的場景，都要重新加載頁面，使用起來的 “頓挫感” 是非常強(qiáng)的，降低使用體驗(yàn)。

早期的網(wǎng)站加載內(nèi)容必須刷新頁面，所以頓挫感是難以解決的，只能想辦法減少跳轉(zhuǎn)流程來提升用戶體驗(yàn)。

隨著網(wǎng)頁技術(shù)的發(fā)展，異步處理（AJAX數(shù)據(jù)交換方式）技術(shù)的應(yīng)用，讓網(wǎng)頁的內(nèi)容可以通過不刷新或加載新網(wǎng)頁的形式加載和顯示。

簡單解釋，就是早期的網(wǎng)頁加載完成以后就是 “靜止” 的，里面所有內(nèi)容是固定的（不是HTML的靜態(tài)）。而異步處理，就是讓頁面中的指定模塊處于 “運(yùn)動(dòng)” 的狀態(tài)，客戶端可以在不重載網(wǎng)頁的情況下只加載和更新這個(gè)模塊的內(nèi)容。

比如下面的案例，設(shè)置不同的條件選項(xiàng)，在過去的網(wǎng)頁中只能重載頁面更新，而使用異步處理就可以直接和服務(wù)器請求數(shù)據(jù)刷新這個(gè)圖表模塊，而不用重載整個(gè)頁面。

所以，在B端項(xiàng)目中，我們不再是只有重載網(wǎng)頁一個(gè)選項(xiàng)，而有了其它的選擇，如下圖所示。

其中，網(wǎng)頁展示作為一個(gè)基礎(chǔ)展示對象，我就不多做介紹了。我會(huì)通過分別介紹其它幾個(gè)內(nèi)容的載體，幫助大家區(qū)分它們和重載頁面有何不同，以及如何正確選擇內(nèi)容加載形式。

二、浮層的使用解析

首先介紹浮層，它是我對通過懸浮在頁面基礎(chǔ)內(nèi)容之上的內(nèi)容層的統(tǒng)稱。例如各類氣泡、提示框、下拉菜單，都是浮層的表現(xiàn)形式。

浮層是比較底層的形式，其展示內(nèi)的容完全不需要使用一個(gè)新的頁面，且和觸發(fā)的元素有較強(qiáng)的視覺聯(lián)系（對比彈窗）。

浮層并不是由內(nèi)容的多和少?zèng)Q定的，復(fù)雜的浮層可以包含非常多的交互選項(xiàng)和內(nèi)容信息，導(dǎo)致我們很容易和下方解釋的彈窗搞混。

比如客戶端軟件常見的隱藏式側(cè)邊欄，搜索欄中展開的復(fù)雜面板，都是浮層的一種而不是彈窗。

浮層最大的特點(diǎn)，源自它的位置定義邏輯，它會(huì)和觸發(fā)它的元素具有非常緊密的位置關(guān)系，而不是像彈窗一樣無差別顯示在界面或?yàn)g覽器視圖的固定區(qū)域。

如果我們想要顯示內(nèi)容，完全沒到用一個(gè)新頁面展示的地步（如搜索建議面板），且和觸發(fā)它的控件有較強(qiáng)的聯(lián)系，就可以考慮使用浮層來展示。

三、彈窗的使用解析

彈窗，也是一種懸浮在基礎(chǔ)內(nèi)容之上的內(nèi)容層，它和浮層的不同之處，就在于彈窗通常是居中固定的顯示區(qū)域，和觸發(fā)它的元素沒有什么位置聯(lián)系。并且，彈窗可以包含的內(nèi)容量級也是高于浮層的?；A(chǔ)的彈窗包含強(qiáng)提示彈窗，或類似注冊登錄這種表單彈窗。

而高級的彈窗，則類似下方案例，約等于打開一個(gè)獨(dú)立的網(wǎng)頁。

之所以使用這些高級彈窗作為頁面載體，原因就是對原觸發(fā)頁面的使用和關(guān)注并沒有結(jié)束，需要支持快速關(guān)閉當(dāng)前的窗口并返回原來的頁面中去。

比如在一個(gè)非常長的列表中，你下滑了幾十頁的高度，肯定不想放棄掉當(dāng)前的頁面位置，所以Behance或者花瓣等應(yīng)用，都采用窗口模式加載新頁面。

或者類似一個(gè)列表頁面中需要大量創(chuàng)建新的數(shù)據(jù)，這些數(shù)據(jù)又不復(fù)雜。于是就通過彈窗表單的形式，快速完成創(chuàng)建并在原頁面中再次點(diǎn)擊 “新增” 按鈕。

高級的彈窗使用除了保持原頁面位置、高頻操作等防止加載的原因之外，還有個(gè)更重要的特征，就是強(qiáng)制吸引用戶的注意力到窗口上。

因?yàn)閺棿爸饕阅B(tài) （Modal，后方有黑色遮罩）居中顯示，通過深色蒙版進(jìn)行前后隔斷，凸顯彈窗區(qū)域，意味著我們強(qiáng)制讓用戶關(guān)注眼前的信息和任務(wù)。

如果我們想要顯示的內(nèi)容，需要保留原頁面狀態(tài)，減少頁面跳轉(zhuǎn)數(shù)量，又需求用戶強(qiáng)行關(guān)注，就可以使用這種模式展示。

四、抽屜的使用解析

最后，就是最難選擇，也最容易和其它組件搞混的抽屜了。

抽屜本身的特征包含懸浮屬性，覆蓋在原頁面之上。而我們常見的側(cè)邊欄、側(cè)邊菜單并不能和抽屜畫上等號，因?yàn)樗麄儠?huì)占用畫布的實(shí)際顯示區(qū)域，和原有內(nèi)容同層。

比如下方案例中，Jira左側(cè)導(dǎo)航（不分左右）可以隱藏收入，頁面內(nèi)容變大，這是側(cè)邊欄。而點(diǎn)擊列表選項(xiàng)，右側(cè)彈窗的窗口覆蓋原有頁面，才是抽屜。

和高級的彈窗類似，抽屜也可以當(dāng)成一個(gè)獨(dú)立的頁面展示信息。但它和彈窗不同的是，抽屜通常是從頁面的右側(cè)展開，沒有遮擋左側(cè)的空間。它的主要特征是還需要在原頁面進(jìn)行交互。

比如Teambition案例中的列表，我們每開一個(gè)抽屜都還可以直接點(diǎn)擊原列表的其它選項(xiàng)切換下一個(gè)抽屜，省掉關(guān)閉步驟或者原頁面被遮擋的情況。

它比較適合應(yīng)用在表格/列表環(huán)境中，作為表格/列表內(nèi)容的詳情頁形式展開，這樣用戶可以在一個(gè)頁面中快速查看不同列表的具體信息或編輯。并且，表格/列表本身的特征會(huì)將標(biāo)題放在最左側(cè)，也方便抽屜的切換。

也因?yàn)檫@種特性，抽屜不太需要使用模態(tài)和遮罩將左側(cè)內(nèi)容遮擋掉。如果需要通過遮擋來吸引用戶注意力，那么這種情況往往更適合使用彈窗。

所以，如果不想通過新頁面打開的列表詳情內(nèi)容，且不是強(qiáng)制要求用戶聚焦的任務(wù)，就可以使用抽屜的形式展現(xiàn)。

五、結(jié)尾

以上就是幾種基本的內(nèi)容展現(xiàn)形式說明，時(shí)間關(guān)系還有后半部分關(guān)于如何站在系統(tǒng)框架級的角度使用內(nèi)容載體的分享，我會(huì)留在下次分享。

如果有關(guān)于這部分的實(shí)際項(xiàng)目疑問，也可以在下方留言。

我們下篇再見～

作者：酸梅干超人；公眾號：超人的電話亭

本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。

本文深入分析了B端彈窗設(shè)計(jì)的尺寸規(guī)范問題，提供了科學(xué)定義彈窗尺寸的方法和思路，旨在幫助設(shè)計(jì)師提升操作效率并確保良好的用戶體驗(yàn)，希望對您在彈窗設(shè)計(jì)上的決策有所啟發(fā)。

相信大多B端設(shè)計(jì)師對web彈窗設(shè)計(jì)的規(guī)范都不陌生：比如彈窗按交互形式可分為模態(tài)彈窗和非模態(tài)彈窗；

按承載內(nèi)容類型分為：提示類、操作類、展示類彈窗；按彈窗承載信息量的大小可以分為：小尺寸彈窗、中尺寸彈窗、大尺寸彈窗…等等但最近，在做一個(gè)操作提效的需求設(shè)計(jì)時(shí)遇到了需求方對彈窗尺寸的規(guī)范挑戰(zhàn)~

大致需求是這樣：為節(jié)省彈窗內(nèi)對選項(xiàng)選擇的時(shí)間，現(xiàn)將原本彈窗內(nèi)的級聯(lián)選擇下拉框改成平鋪按鈕的形式。（見下圖）ps：本平臺(tái)為人工審核平臺(tái)，使用用戶為審核員，平臺(tái)設(shè)計(jì)要為審核員的審核效率負(fù)責(zé)，審核效率一般表示為：單人單天（8小時(shí)）xxx條審核量。

問題點(diǎn)：承載內(nèi)容信息量不固定原因：彈窗內(nèi)用戶選擇項(xiàng)為不通過原因，而此選擇項(xiàng)是用戶根據(jù)自身企業(yè)的風(fēng)險(xiǎn)標(biāo)簽來自定義配置，這就涉及到級聯(lián)選擇數(shù)量的問題，有的客戶風(fēng)險(xiǎn)標(biāo)簽體系細(xì)，多則幾百個(gè)，有的客戶只需要粗粒度標(biāo)簽，例如只有一級標(biāo)簽，總數(shù)可能不超過十個(gè)…

設(shè)計(jì)思路

1.與用戶溝通-明確信息量的承載量級范圍

需求方：我要一個(gè)這么大的彈窗！好讓信息呈現(xiàn)更全面！

但做設(shè)計(jì)從來不是憑空定義一個(gè)彈窗大小，要做到有理有據(jù)；前期選擇先跟使用此平臺(tái)的審核負(fù)責(zé)人溝通，來確定目前已接入的客戶在此處自定義配置的原因數(shù)量量級并整理出溝通結(jié)論：

什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？

B端產(chǎn)品經(jīng)理中的B是Business，商業(yè)的意思，B端產(chǎn)品經(jīng)理首先就要理解這個(gè)職位的重要性，要設(shè)計(jì)出更適合這個(gè)項(xiàng)目需求的產(chǎn)品方案，B最終產(chǎn)品經(jīng)理在日常工作中...

查看詳情 >

存在少量客戶10個(gè)以內(nèi)的原因個(gè)數(shù)、常規(guī)客戶在30個(gè)左右的原因個(gè)數(shù)、現(xiàn)存一家客戶使用最大量級100+原因個(gè)數(shù)。但由于控制權(quán)在客戶方，原因量級不可控，未來也可能出現(xiàn)幾百的數(shù)量。在以上結(jié)論中，可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗，但到底哪個(gè)最為合適需要進(jìn)一步判斷。

2.確定彈窗彈窗尺寸

在有可能的600px、800px、1200px三種寬度中選取最合適的彈窗尺寸，分別從操作效率與適配性角度對其進(jìn)行判斷。操作效率層面：

當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí)：

若不同寬度時(shí)，都選擇第一個(gè)處置原因，根據(jù)交互方法論–菲茨定律，指點(diǎn)設(shè)備到達(dá)目標(biāo)的與兩個(gè)因素有關(guān)：（1）設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）。距離越長，所用時(shí)間越長；（2）目標(biāo)的大小（S）。目標(biāo)越大，所用時(shí)間越短。

由此可見此操作的最終目標(biāo)按鈕為右下角的確定按鈕，目標(biāo)按鈕大小不變，但整體的選擇距離是相對兩個(gè)較小彈窗要遠(yuǎn)的。D3>D2>D1，所用時(shí)間 T3>T2>T1。由于對審核員任務(wù)操作時(shí)間和效率要考慮到秒或毫秒級別，此大小對用戶快速完成此操作起到負(fù)向作用。

另外，當(dāng)原因個(gè)數(shù)10個(gè)以內(nèi)時(shí)，可見此時(shí)彈窗寬度過寬，導(dǎo)致空白區(qū)域過大。

當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí)，操作效率評分：

1200px ????

800px ??????

600px ??????

當(dāng)超過100個(gè)原因個(gè)數(shù)時(shí)：1200px 一屏內(nèi)展示完全，不需要滾屏滑動(dòng)；800px 可在兩屏內(nèi)展示完全，需要滾屏滑動(dòng)；600px 超出兩屏展示才可展示完全，需要滾屏滑動(dòng)。

當(dāng)原因個(gè)數(shù)超過100時(shí)，操作效率評分：

1200px ??????

800px ??????

600px ????

適配性層面：

根據(jù)市面主流屏幕分辨率尺寸調(diào)研：

市面上存在部分 1024 分辨率的顯示屏，所以：600px能夠適配所有市面主流分辨率顯示器；800px能夠適配所有市面主流分辨率顯示器；1200px不能能夠適配市面主流1024*768的分辨率顯示器，彈窗不能在顯示器內(nèi)顯示完全，固適配性相對較弱。

綜合三種彈窗大小的操作效率和適配性：

800px的表現(xiàn)最優(yōu)，固選取800px的彈窗大小。

3.確定彈窗基本規(guī)范

高度規(guī)范：由于信息量的不同可以根據(jù)內(nèi)容多少進(jìn)行自適應(yīng)高度，限定max high 700px。由于一般超出800px可能出現(xiàn)瀏覽器外滾動(dòng)條，所以選取高度為600-800px之間。

滾動(dòng)條規(guī)范：限高后，若信息超出max high支持出現(xiàn)內(nèi)滾動(dòng)條。瀏覽器適配規(guī)范：瀏覽器窗口>800px，彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應(yīng)。瀏覽器窗口<600px，彈窗寬度保持600px，出現(xiàn)瀏覽器外滾動(dòng)條。

在當(dāng)今這個(gè)信息爆炸、競爭激烈的市場環(huán)境中，用戶體驗(yàn)已成為企業(yè)核心競爭力的關(guān)鍵因素。在這一背景下，我們啟動(dòng)了一項(xiàng)名為“簡單設(shè)計(jì)”的專項(xiàng)優(yōu)化項(xiàng)目，旨在通過化繁為簡，重塑用戶體驗(yàn)，提升B端產(chǎn)品的用戶滿意度和忠誠度。

在當(dāng)今信息爆炸、競爭白熱化的市場大環(huán)境下，企業(yè)核心競爭力的內(nèi)涵已悄然變遷，不再單純聚焦于產(chǎn)品或服務(wù)本身，而是將重心逐漸傾向于用戶體驗(yàn)這一關(guān)鍵維度。

于招聘領(lǐng)域而言，B 端產(chǎn)品作為銜接招聘方與求職者的關(guān)鍵紐帶，其設(shè)計(jì)的合理性、操作的便捷性以及語義的明晰度，猶如三把密鑰，直接決定著用戶滿意度與忠誠度的高低。

今年，58招聘B端開啟了“簡單設(shè)計(jì)”專項(xiàng)優(yōu)化的征程，作為項(xiàng)目主導(dǎo)設(shè)計(jì)師，我全程深度參與了從調(diào)研、剖析、設(shè)計(jì)至實(shí)施的各個(gè)環(huán)節(jié)，在這一過程中，深刻領(lǐng)悟到設(shè)計(jì)對于提升用戶體驗(yàn)的非凡意義。

01 深入業(yè)務(wù)前言，洞見用戶痛點(diǎn)，錨定設(shè)計(jì)方向

項(xiàng)目伊始，我們即對58招聘B端產(chǎn)品的現(xiàn)有用戶展開了全面且深入的調(diào)研行動(dòng)。

我們深知，唯有精準(zhǔn)洞悉用戶需求與痛點(diǎn)，方能打造出契合用戶期望的產(chǎn)品。

為此，設(shè)計(jì)團(tuán)隊(duì)全員深入一線，置身于用戶的實(shí)際使用環(huán)境，與各行業(yè)用戶進(jìn)行深度的面對面溝通。同時(shí)，我們運(yùn)用多種調(diào)研方法，包括問卷調(diào)查、用戶訪談、數(shù)據(jù)分析等，多維度、全方位地搜集用戶信息。

在調(diào)研過程中，一系列影響用戶體驗(yàn)的關(guān)鍵問題浮出水面。

其中，操作繁瑣成為用戶反饋?zhàn)顬橥怀龅膯栴}。眾多用戶抱怨，在使用B端產(chǎn)品時(shí)，完成諸如客戶認(rèn)證、發(fā)布職位、篩選簡歷等簡單任務(wù)，往往需歷經(jīng)多個(gè)復(fù)雜步驟。

做交互設(shè)計(jì)10年，我為何轉(zhuǎn)崗到產(chǎn)品經(jīng)理？

真正轉(zhuǎn)崗之后，我發(fā)現(xiàn)很多工作還是超出了自己的想象。產(chǎn)品經(jīng)理的工作確實(shí)比較雜。理論上，產(chǎn)品經(jīng)理的工作包括了產(chǎn)品的方方面面，從市場研究、用戶調(diào)研、數(shù)據(jù)分析...

查看詳情 >

這種繁復(fù)的操作流程，不僅耗費(fèi)大量時(shí)間與精力，更易引發(fā)用戶的挫敗感和不滿情緒，宛如一道無形的屏障，拉遠(yuǎn)了用戶與平臺(tái)的距離。

此外，語義晦澀難懂也是普遍存在的問題。

B端產(chǎn)品中的專業(yè)術(shù)語和復(fù)雜表述，對于非專業(yè)用戶而言，仿若天書，極大地增加了學(xué)習(xí)成本，甚至可能導(dǎo)致誤解和誤操作，嚴(yán)重?fù)p害了用戶體驗(yàn)。

這些問題的根源，經(jīng)深入分析，與傳統(tǒng)產(chǎn)品設(shè)計(jì)理念的局限、對用戶體驗(yàn)的忽視以及用戶研究與溝通的不足密切相關(guān)。

基于此，我們決定從這三個(gè)層面入手，重塑設(shè)計(jì)思路，以提升用戶體驗(yàn)。

02 解構(gòu)問題根源，重構(gòu)設(shè)計(jì)理念之維

在扎實(shí)調(diào)研的基礎(chǔ)上，我們對問題進(jìn)行了抽絲剝繭般的分析。

我們深刻意識(shí)到，若要從根本上解決用戶問題，必須對設(shè)計(jì)理念進(jìn)行大刀闊斧的革新。

首先，我們毅然摒棄傳統(tǒng)的以產(chǎn)品為核心的設(shè)計(jì)理念，轉(zhuǎn)而擁抱以用戶為中心的設(shè)計(jì)哲學(xué)。用戶作為產(chǎn)品的最終使用者，他們的需求和體驗(yàn)是產(chǎn)品設(shè)計(jì)的靈魂所在。因此，我們將用戶需求與體驗(yàn)置于首位，重新審視產(chǎn)品的功能布局、操作流程以及語義表達(dá)等各個(gè)維度。

其次，我們將用戶體驗(yàn)的重視程度提升至前所未有的高度。用戶體驗(yàn)，作為產(chǎn)品競爭力的核心要素，貫穿于設(shè)計(jì)的全過程。我們通過簡化操作流程、優(yōu)化界面布局、明晰語義表述等手段，致力于提升用戶的操作效率和滿意度，打造流暢、高效的用戶交互體驗(yàn)。

最后，我們強(qiáng)化了用戶研究與溝通機(jī)制。深知只有深入了解用戶需求與痛點(diǎn)，才能設(shè)計(jì)出符合用戶期望的產(chǎn)品。因此，在與用戶的每一次接觸中，我們都用心收集他們的意見和建議，為產(chǎn)品設(shè)計(jì)與優(yōu)化注入源源不斷的智慧源泉。

03 以用戶為中心，雕琢極致體驗(yàn)之境

基于對問題的深度剖析，我們開啟了具體的設(shè)計(jì)工作。

設(shè)計(jì)，作為解決問題的關(guān)鍵環(huán)節(jié)，需要我們充分施展設(shè)計(jì)師的專業(yè)素養(yǎng)與創(chuàng)新能力，以用戶為中心，對招聘B端產(chǎn)品進(jìn)行全方位的重塑。

在操作流程優(yōu)化方面，我們對現(xiàn)有流程進(jìn)行了細(xì)致梳理和深度優(yōu)化，大刀闊斧地去除了冗余步驟和環(huán)節(jié)，使操作流程如行云流水般簡潔明了。

例如，在發(fā)布職位這一關(guān)鍵功能上，我們簡化了信息填寫步驟，并貼心地提供模板和自動(dòng)填充功能，極大地降低了用戶操作難度和時(shí)間成本，讓用戶在操作過程中感受到前所未有的便捷。

在語義表述清晰化上，我們對界面上的專業(yè)術(shù)語和復(fù)雜表述進(jìn)行了精心簡化和優(yōu)化，使其通俗易懂且易于記憶。同時(shí)，對重點(diǎn)文案和標(biāo)題進(jìn)行突出處理，便于用戶快速抓取關(guān)鍵信息，清晰知曉每一步操作的目的，輔助用戶迅速?zèng)Q策，從而進(jìn)一步提升用戶體驗(yàn)。

在界面布局精簡方面，我們對界面進(jìn)行了精心雕琢，去除了繁雜的信息和多余的按鈕。通過合理的布局與色彩搭配，提高了界面的可讀性和美觀度，營造出簡潔大氣的視覺體驗(yàn)。此外，增加搜索和篩選功能，使用戶能夠快速定位所需信息，進(jìn)一步提升操作效率和滿意度。

在整個(gè)設(shè)計(jì)過程中，我們充分發(fā)揮設(shè)計(jì)師的專業(yè)能力和創(chuàng)新精神，運(yùn)用多種先進(jìn)的設(shè)計(jì)方法和工具，如用戶畫像、設(shè)計(jì)原型、用戶體驗(yàn)測試等，確保設(shè)計(jì)方案的科學(xué)性和有效性。同時(shí)，與產(chǎn)品經(jīng)理、開發(fā)人員等團(tuán)隊(duì)成員緊密協(xié)作，形成強(qiáng)大的合力，共同推動(dòng)項(xiàng)目順利前行。

04 持續(xù)優(yōu)化迭代，升華用戶體驗(yàn)之峰

設(shè)計(jì)完成后，項(xiàng)目進(jìn)入實(shí)施階段。

我們深知，實(shí)施是設(shè)計(jì)落地生根的關(guān)鍵一步，需要團(tuán)隊(duì)充分發(fā)揮協(xié)作精神和強(qiáng)大執(zhí)行力，確保項(xiàng)目順利推進(jìn)。

在實(shí)施過程中，我們采用敏捷開發(fā)方法，通過持續(xù)迭代和優(yōu)化，不斷提升產(chǎn)品的功能和性能。定期收集和分析用戶反饋意見，及時(shí)對產(chǎn)品進(jìn)行調(diào)整和改進(jìn)。同時(shí)，加強(qiáng)與用戶的溝通，通過多樣化的用戶調(diào)研方式，積極捕捉用戶的每一個(gè)意見和建議，為產(chǎn)品的持續(xù)優(yōu)化提供堅(jiān)實(shí)支撐。

經(jīng)過不懈努力，“簡單設(shè)計(jì)”專項(xiàng)已取得顯著成效。用戶操作效率和滿意度大幅攀升，產(chǎn)品留存率和口碑亦顯著改善。然而，我們明白，設(shè)計(jì)優(yōu)化是一場永無止境的修行。隨著用戶需求的持續(xù)演變和技術(shù)的不斷革新，我們需持續(xù)探索與創(chuàng)新，以維持產(chǎn)品的競爭力和生命力。

展望未來，我們將堅(jiān)定不移地秉持以用戶為中心的設(shè)計(jì)理念，持續(xù)優(yōu)化產(chǎn)品功能和性能。同時(shí)，進(jìn)一步加強(qiáng)用戶研究與溝通，通過持續(xù)收集和分析用戶信息與意見，不斷改進(jìn)和優(yōu)化產(chǎn)品設(shè)計(jì)。我們堅(jiān)信，在全體設(shè)計(jì)師的共同努力下，58招聘B端產(chǎn)品將為用戶帶來更便捷、高效、愉悅的使用體驗(yàn)，成為招聘領(lǐng)域的璀璨之星。

總之，“簡單設(shè)計(jì)”專項(xiàng)不僅是產(chǎn)品設(shè)計(jì)層面的優(yōu)化與提升，更是對用戶需求深度洞察與積極回應(yīng)的生動(dòng)實(shí)踐。未來，我們將繼續(xù)堅(jiān)守這一理念，為用戶創(chuàng)造更多價(jià)值與驚喜，同時(shí)不斷提升自身設(shè)計(jì)能力與創(chuàng)新力，為產(chǎn)品的持續(xù)優(yōu)化與創(chuàng)新注入源源不斷的動(dòng)力。

在效率至上的數(shù)字時(shí)代，釘釘硬件卻走出一條“溫暖設(shè)計(jì)”之路，從愉悅體驗(yàn)到隱私守護(hù)，再到多感官協(xié)同，它是如何讓冰冷機(jī)器擁有心跳，重塑B端硬件設(shè)計(jì)準(zhǔn)則的？一起來探尋。

釘釘自2015年推出后，逐步構(gòu)建“軟硬一體”生態(tài)，其智能硬件以“簡單高效，底色溫暖”為核心，通過普惠（幾何美學(xué)/曲率連續(xù)）、專注（層級顯隱/寧靜科技）、平衡（功能-成本-環(huán)境）三大準(zhǔn)則，將復(fù)雜B端需求轉(zhuǎn)化為簡約設(shè)計(jì)，設(shè)計(jì)出的產(chǎn)品斬獲iF/Reddot等眾多國際大獎(jiǎng)，服務(wù)超1500萬企業(yè)。

四、愉悅

如今用戶的需求已不再局限于實(shí)用功能，更追求情感層面的滿足。

這種轉(zhuǎn)變就像從”需要一臺(tái)電腦處理工作”到”渴望一個(gè)能提供陪伴的機(jī)器人助手”——本質(zhì)是從單純的功能需求升級為情感連接。

通過洞察用戶從本能需求到行為習(xí)慣，再到情感共鳴的完整鏈條，我們不斷優(yōu)化產(chǎn)品，讓科技與人的關(guān)系變得更加緊密溫暖。

愉悅-人機(jī)工學(xué)

產(chǎn)品與人的配合度決定了使用體驗(yàn)是否安全順手，更是用戶獲得愉悅感的關(guān)鍵。我們建議從三個(gè)維度展開研究——人的使用習(xí)慣、設(shè)備性能特征、使用場景特點(diǎn)，通過實(shí)際測試與綜合分析，最終得出科學(xué)可靠的最優(yōu)方案。

愉悅-情感化設(shè)計(jì)

讓冰冷的工具性產(chǎn)品因?yàn)椴馁|(zhì)的改變而富有溫度，讓設(shè)備的立桿因?yàn)榻嵌鹊母淖兌兊糜袃x式感和尊重感，以人為本的情感的設(shè)計(jì)賦予產(chǎn)品價(jià)值，形成用戶對品牌的認(rèn)知性與認(rèn)可度。

愉悅-價(jià)值認(rèn)同

2030年的碳中和戰(zhàn)略和可持續(xù)目標(biāo)已經(jīng)是全球的趨勢共識(shí)，這意味著產(chǎn)品不僅為今天創(chuàng)造價(jià)值，也為明天創(chuàng)造價(jià)值，釘釘建議從產(chǎn)品級的3R原則 (Reduce、Reuse、Recycle) 再到系統(tǒng)級的LCED（產(chǎn)品生命周期設(shè)計(jì)）的設(shè)計(jì)標(biāo)準(zhǔn)去思考如何給用戶帶來產(chǎn)生正向的綠色價(jià)值認(rèn)同感和愉悅感的產(chǎn)品，再到通過設(shè)計(jì)領(lǐng)導(dǎo)力帶來理念變革與循環(huán)經(jīng)濟(jì)。

現(xiàn)今無處不在的智能產(chǎn)品和共享數(shù)據(jù)在帶來變革的同時(shí)帶來了巨大的安全風(fēng)險(xiǎn)， 釘釘設(shè)計(jì)非常注重可感知的用戶隱私信息保護(hù)（PBD），一直致力于通過最好的手段來守護(hù)用戶安全隱私，消除用戶在使用產(chǎn)品中“被監(jiān)視”來的不安定感。

五、隱私

在隱私性設(shè)計(jì)上應(yīng)考量如下維度：

如何定義B端產(chǎn)品及B端產(chǎn)品經(jīng)理方法論

相較于C端產(chǎn)品，B端產(chǎn)品最大的特點(diǎn)是：面向特定領(lǐng)域用戶，且數(shù)量少得多，但更注重對用戶專業(yè)領(lǐng)域操作流程的深度挖掘——也就是專業(yè)性更強(qiáng)，與業(yè)務(wù)的結(jié)合更緊密。

查看詳情 >

• 主動(dòng)-在隱私泄露發(fā)生前預(yù)判風(fēng)險(xiǎn)，而非事后補(bǔ)救
• 全鏈-排查設(shè)備物理結(jié)構(gòu)、數(shù)字界面等所有接觸點(diǎn)，監(jiān)控信息從收集、存儲(chǔ)到共享的全生命周期。
• 可感-用聲音提醒、呼吸燈閃爍或震動(dòng)反饋，讓用戶清晰感知設(shè)備何時(shí)開啟/關(guān)閉數(shù)據(jù)采集。
• 可控-以用戶為中心，用戶始終擁有數(shù)據(jù)主權(quán)，可隨時(shí)一鍵停止數(shù)據(jù)收集或撤回歷史授權(quán)

策略-隱私保護(hù)不是成本負(fù)擔(dān)，而是產(chǎn)品核心競爭力。

眼睛看到的不等于全部體驗(yàn)。我們始終相信，當(dāng)視覺與聽覺的韻律、觸覺的肌理、嗅覺的記憶、味覺的驚喜交織成網(wǎng)（五感聯(lián)動(dòng)），產(chǎn)品才能真正叩擊人心。這種立體的感官交響，不僅塑造獨(dú)特的品牌印記，更能在用戶腦海中種下記憶錨點(diǎn)。要讓感官設(shè)計(jì)真正釋放能量，設(shè)計(jì)師們需要一套系統(tǒng)化的設(shè)計(jì)指南——就像指揮家需要樂譜來統(tǒng)籌交響樂團(tuán)。

六、多感官

多感官-光響應(yīng)

釘釘設(shè)計(jì)一直致力于協(xié)調(diào)所有感官輸入，以提供關(guān)于品牌價(jià)值的豐富信息和功能表達(dá)，光作為其中一條重要媒介，即是交互媒介也是內(nèi)容更是品牌記憶點(diǎn)，其中包含了光的色彩，明暗，變化形式，以帶給產(chǎn)品獨(dú)特的識(shí)別度和無限的可能性。

多感官-聲音識(shí)別

聲音的反饋能夠在恰當(dāng)?shù)膱鼍敖o予用戶明確的指向和好的用戶體驗(yàn)，同時(shí)也能很好得傳達(dá)出品牌和價(jià)值主張，汽車關(guān)車門的聲音是感官設(shè)計(jì)方法中最著名和最常用的例子，許多頂級汽車品牌都有獨(dú)立的車門開發(fā)團(tuán)隊(duì)，例如梅賽德斯 SUV 的車門被調(diào)教得聽起來更重，以傳達(dá)它們的堅(jiān)固性。

七、產(chǎn)品細(xì)節(jié)

色彩（Color）

色彩是除了造型以外最能影響產(chǎn)品設(shè)計(jì)視覺體驗(yàn)的關(guān)鍵設(shè)計(jì)因素，中性的黑白灰建議作為產(chǎn)品主基調(diào)，能夠適配更多場景的同時(shí)也能覆蓋更多受眾，限定色一般做根據(jù)產(chǎn)品定位的特殊版，或者局部的顏色點(diǎn)綴。

材質(zhì)（Material）

材質(zhì)是產(chǎn)品外觀效果實(shí)現(xiàn)的物質(zhì)載體同樣也是凸顯產(chǎn)品定位的重要媒介，我們主張通過引入功能&情感導(dǎo)向材質(zhì)的概念，來進(jìn)行不同產(chǎn)品定位上的區(qū)分，同時(shí)保持理念透出的一致性。

工藝處理&圖案（Finish）

工藝處理&圖案是外觀效果最后一步，為營造溫潤感和保證多場景下的耐用性，表面處理應(yīng)注意以下兩點(diǎn)：

1.主殼體表面處理應(yīng)避免大面積高亮，避免使用大面積金屬拉絲，表面質(zhì)感光澤低于4分光，素色為主，可點(diǎn)綴亮色，避免大面積純度過高的顏色噴涂，除窗口鏡片外避免大面積亮鍍，

2.肌理圖案應(yīng)選擇低調(diào)克制的圖形，以功能性為導(dǎo)向，例如在關(guān)鍵物理交互點(diǎn)上給予適當(dāng)?shù)挠|感引導(dǎo)或輔助。

在產(chǎn)品落地過程中，設(shè)計(jì)師應(yīng)在量產(chǎn)限制與工藝要求之間平衡出最優(yōu)化解，并將其沉淀成相應(yīng)準(zhǔn)則。

小結(jié)

在效率至上的數(shù)字時(shí)代，釘釘硬件的設(shè)計(jì)選擇了一條不同的路——不讓技術(shù)成為壓迫用戶的工具，而是化作理解人心的伙伴。上篇提出的“簡單高效”生態(tài)，不是把復(fù)雜功能簡單堆砌，而是像拼樂高一樣，用“普惠、專注、平衡”三大準(zhǔn)則搭建出真正懂用戶需求的硬件；下篇揭示的“溫暖設(shè)計(jì)”，則讓冷冰冰的機(jī)器擁有了心跳：它可能是電腦支架上一個(gè)微微傾斜的弧度，讓你工作時(shí)挺直腰背的瞬間，感受到被尊重的儀式感；也可能是設(shè)備上一盞呼吸節(jié)奏的指示燈，用光的明暗變化悄悄告訴你：“數(shù)據(jù)已加密，請安心”；或是關(guān)機(jī)時(shí)那一秒類似合上書頁的“咔嗒”聲，讓結(jié)束工作的動(dòng)作變得像放下咖啡杯一樣自然。這些細(xì)節(jié)背后，是釘釘對產(chǎn)品的三個(gè)堅(jiān)持：

1. 隱私不是口號，而是底線——從攝像頭物理遮擋到數(shù)據(jù)授權(quán)隨時(shí)可撤銷，把“用戶掌控權(quán)”刻進(jìn)產(chǎn)品基因；
2. 環(huán)保不靠貼標(biāo)簽，而是真行動(dòng)——舊設(shè)備零件像積木一樣拆解重組，讓一部會(huì)議終端的壽命從三年延長到十年；
3. 體驗(yàn)不只靠屏幕，而是五感聯(lián)動(dòng)——就像頂級汽車品牌會(huì)專門調(diào)校關(guān)車門的聲音，釘釘?shù)脑O(shè)備提示音也藏著“聽得見的安心”。

說到底，好的設(shè)計(jì)從不需要刻意標(biāo)榜“高大上”。當(dāng)科技能讀懂人的疲憊、尊重隱私的敏感、在乎環(huán)境的未來，甚至在意你觸摸機(jī)身時(shí)的指尖溫度——這便是“芥子納須彌”的真正含義：用最小的人文微光，照亮最深的數(shù)字叢林，讓每個(gè)人在智能時(shí)代依然能體面地工作、自在地生活。

許多設(shè)計(jì)團(tuán)隊(duì)在面對復(fù)雜的業(yè)務(wù)需求時(shí)，往往忽視了側(cè)邊欄設(shè)計(jì)的細(xì)節(jié)和靈活性。本文將深入探討B(tài)端側(cè)邊欄的設(shè)計(jì)要點(diǎn)，并結(jié)合實(shí)際案例，分享如何根據(jù)不同行業(yè)、業(yè)務(wù)場景和用戶習(xí)慣進(jìn)行靈活設(shè)計(jì)，供大家參考。

很長一段時(shí)間我都覺得做B端的中臺(tái)時(shí)間沒什么技術(shù)含量，不就是第三方的組件，拼積木一樣，拼接就好，甚至很多團(tuán)隊(duì)也是這么想的，早期很多的中臺(tái)都沒有設(shè)計(jì)師；

但是隨著這幾年越來越深度的B端中臺(tái)的設(shè)計(jì)，做了太多各式各樣的后臺(tái)的設(shè)計(jì)系統(tǒng)，深入的進(jìn)入業(yè)務(wù)，才發(fā)現(xiàn)設(shè)計(jì)過程中必須考慮很多細(xì)節(jié)和維度，甚至很小的點(diǎn)，也是有考究的。

最近我們在做側(cè)邊欄的升級，我做了市場上50+中臺(tái)的側(cè)邊欄目調(diào)研，看了上萬張圖，越看越越是能發(fā)現(xiàn)針對不同的行業(yè)，不同的業(yè)務(wù)場景、信息層級和用戶習(xí)慣進(jìn)行靈活設(shè)計(jì)選擇，需要具體問題具體分析及處理。

下面我就來總結(jié)一下我調(diào)研的這些側(cè)邊的設(shè)計(jì)分類及設(shè)計(jì)規(guī)則。

一、B端側(cè)邊欄的設(shè)計(jì)分類

按布局形態(tài)分類

細(xì)欄（垂直導(dǎo)航）：以圖標(biāo)為主，文字輔助，適用于模塊較少、內(nèi)容區(qū)域需最大化展示的場景。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

優(yōu)勢是簡潔高效，但要求用戶對圖標(biāo)含義有較高認(rèn)知。

寬欄（混合導(dǎo)航）：圖標(biāo)與文字并存，支持多級菜單，兼容性強(qiáng)，適合復(fù)雜業(yè)務(wù)層級。這也是常見的側(cè)邊欄樣式。

通過分組和標(biāo)題提升信息密度，但可能壓縮內(nèi)容區(qū)域。

按結(jié)構(gòu)層級分類

單級導(dǎo)航：直接展示所有一級菜單，適合功能模塊較少的中小型系統(tǒng)（如藍(lán)湖、Coding）。

遵循“7±2”原則，菜單數(shù)量控制在5-9個(gè)，避免用戶選擇疲勞;

多級導(dǎo)航：通過折疊面板或樹形結(jié)構(gòu)收納子菜單，適用于大型企業(yè)級系統(tǒng)（如ERP、CRM）。

需明確可點(diǎn)擊項(xiàng)與純分類項(xiàng)的區(qū)分，避免交互混淆 ；

按交互模式分類

平鋪模式：菜單完全展開，用戶可快速定位功能（如新紅小紅書后臺(tái)、抖音抖店等等模塊）。適用于高頻操作場景；

折疊/懸浮模式：側(cè)邊欄可收縮為圖標(biāo)或隱藏，適應(yīng)窄屏設(shè)備或需專注內(nèi)容的情境（如飛書的icon展開收起）。需提供顯性觸發(fā)按鈕（如漢堡菜單）

二、B端側(cè)邊欄的設(shè)計(jì)規(guī)則

側(cè)邊欄設(shè)計(jì)需平衡功能性與視覺體驗(yàn)，核心規(guī)則如下：

視覺對比與層級劃分

背景色差異化：通過深色或淺色背景區(qū)分側(cè)邊欄與內(nèi)容區(qū)域，避免視覺干擾。例如，深色背景可突出白色內(nèi)容區(qū)，但需確保品牌色符合無障礙標(biāo)準(zhǔn)（對比度≥4.5:1）

信息分組與留白：使用分割線、標(biāo)題或間距對功能模塊分組，減少信息密度。

圖標(biāo)與交互細(xì)節(jié)

圖標(biāo)設(shè)計(jì)原則：B端圖標(biāo)需簡約且具辨識(shí)度，避免過度裝飾。選中狀態(tài)可通過填充色、微動(dòng)效或標(biāo)識(shí)線強(qiáng)化（如Ant Design的選中高亮）

交互反饋優(yōu)化：鼠標(biāo)懸停時(shí)圖標(biāo)變色、文字浮現(xiàn)；選中狀態(tài)結(jié)合背景色與文字加粗，提升操作感知

拓展性與一致性

響應(yīng)式適配：窄屏下自動(dòng)切換為圖標(biāo)模式，確保移動(dòng)端可用性（如飛書后臺(tái)的側(cè)邊欄收縮功能）

規(guī)范復(fù)用：建立統(tǒng)一的字號、間距、顏色規(guī)范（如主文字14px、輔助文字12px），降低用戶認(rèn)知成本

業(yè)務(wù)導(dǎo)向的優(yōu)先級

高頻功能前置：將常用模塊置于頂部（如“更多功能、功能設(shè)置等等”），低頻功能收納至底部折疊區(qū)

teambition：不僅做了更多功能，有意思的他還做了自定義導(dǎo)航欄的功能，支持排序，做到低成本的定制化。

權(quán)限分級展示：根據(jù)角色動(dòng)態(tài)顯示菜單（如管理員可見“系統(tǒng)設(shè)置”，普通員工僅顯示“任務(wù)列表”），減少信息冗余

三、典型案例解析

飛書：平鋪式動(dòng)態(tài)導(dǎo)航

設(shè)計(jì)亮點(diǎn)：頂部導(dǎo)航進(jìn)行功能入口切換，左側(cè)平鋪核心功能，圖標(biāo)與文字比例均衡；通過級分類提升信息層級

適用場景：設(shè)計(jì)協(xié)作工具，功能模塊清晰且用戶操作高頻

小鵝通：混合式寬欄導(dǎo)航

設(shè)計(jì)亮點(diǎn)：頂部導(dǎo)航切換業(yè)務(wù)大類，側(cè)邊欄展開子模塊；有一級也有多級菜單通過折疊面板收納，層級深度可控。

適用場景：復(fù)雜業(yè)務(wù)，需支持多業(yè)務(wù)線交叉跳轉(zhuǎn)

千牛商家后臺(tái)：多層級側(cè)邊欄

設(shè)計(jì)亮點(diǎn)：分兩欄導(dǎo)航，窄屏下收縮為圖標(biāo)或者圖標(biāo)+簡短文字；第二欄按照層級排列，客一級或者多級。

適用場景：企業(yè)級后臺(tái)系統(tǒng)，業(yè)務(wù)場景復(fù)雜，需要多種場景切換，導(dǎo)航多層級切功能極多的情況

微贊直播：可自定義導(dǎo)航

設(shè)計(jì)亮點(diǎn)：可自定義導(dǎo)航，包含排版、顏色。相對來說體驗(yàn)感更加，不過對應(yīng)屏幕自適應(yīng)要求更高。

適用場景：針對C端，功能復(fù)雜的情況

老版設(shè)計(jì)

新版設(shè)計(jì)

Ant Design Pro：規(guī)范驅(qū)動(dòng)的側(cè)邊欄

設(shè)計(jì)亮點(diǎn)：遵循原子設(shè)計(jì)方法論，定義圖標(biāo)尺寸（24px）、間距（8px倍數(shù)）、選中態(tài)（主色填充），確保開發(fā)與設(shè)計(jì)一致性 ，便于快速搭建新平臺(tái)

適用場景：中臺(tái)型系統(tǒng)，需快速復(fù)用組件庫

四、總結(jié)

側(cè)邊欄設(shè)計(jì)需以業(yè)務(wù)邏輯為核心，考慮信息層級與用戶角色，同時(shí)兼顧視覺清晰度與交互效率。

未來趨勢上，側(cè)邊欄的“C端化”設(shè)計(jì)（如情感化微交互、個(gè)性化皮膚）可能成為提升B端產(chǎn)品吸引力的新方向。

總的來說，做設(shè)計(jì)這些年，當(dāng)遇到問題的時(shí)候，我覺得最好的解法就是看案例，看很多案例，爆炸式的研究一下，很多問題就有了解法。

在B端產(chǎn)品設(shè)計(jì)的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗(yàn)和品牌識(shí)別的重要角色。本文深入探討了色彩空間理論在B端設(shè)計(jì)中的應(yīng)用，從基礎(chǔ)的色彩空間概念到如何在實(shí)際工作中運(yùn)用這些理論，為設(shè)計(jì)師提供了一套科學(xué)的顏色搭配和管理方法。

對于 B 端產(chǎn)品而言，我們經(jīng)常會(huì)和顏色進(jìn)行斗爭。

比如在工作當(dāng)中，開發(fā)沒有正確還原顏色、不知道如何進(jìn)行色彩配置、以及對于 B 端產(chǎn)品而言，究竟應(yīng)該如何協(xié)調(diào)科學(xué)的進(jìn)行顏色的搭配～

最近會(huì)講顏色的部分，整體會(huì)分為四篇文章：B 端設(shè)計(jì)如何理解色彩空間、B 端產(chǎn)品怎樣合理搭配顏色、B 端項(xiàng)目的視覺風(fēng)格、B 端項(xiàng)目顏色的實(shí)戰(zhàn)技巧。

本篇文章是第一篇，我們先來聊聊產(chǎn)品配色的基礎(chǔ) 色彩空間與顏色管理。

不知道各位同學(xué)是否遇到這種情況，當(dāng)你在調(diào)整顏色時(shí)，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個(gè)顏色時(shí)，也茫然無措，這時(shí)候的你作何感想？

所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進(jìn)行顏色管理，才能夠讓設(shè)計(jì)順利落地。但顏色其實(shí)過于抽象，因此我們將整體內(nèi)容進(jìn)行簡化，多和大家聊聊在理論背后究竟應(yīng)該如何與工作內(nèi)容進(jìn)行結(jié)合。

B端究竟需要什么樣的產(chǎn)品經(jīng)理？

B端產(chǎn)品經(jīng)理都是以提升供應(yīng)側(cè)的工作效率為目的，所以B端需求主要是以業(yè)務(wù)問題為導(dǎo)向。 這個(gè)是B端產(chǎn)品比較重要的一點(diǎn)，B端產(chǎn)品是服務(wù)于一個(gè)主體 ...

查看詳情 >

首先我們先說說色彩空間。

一、什么是色彩空間？

色彩空間又叫色彩模型，它是為了讓系統(tǒng)能夠準(zhǔn)確地描述顏色、使用顏色，進(jìn)而定義出來的一種顏色組織方式。

比如有一排隨機(jī)顏色，要按特定規(guī)則排列，你會(huì)怎么做？我相信，我們首先想到的便是按照不同的色相進(jìn)行歸類。

如果顏色變?yōu)?0000個(gè)，又該怎么排列呢？因此，為了讓企業(yè)更好地使用顏色、設(shè)計(jì)師更便利地選擇一致的顏色，行業(yè)中便提出了色彩空間的概念。

色彩空間其實(shí)很簡單。因?yàn)槲覀冃枰褂妙伾?，且不同人群對顏色的需求不同，所以顏色的排列方式?huì)存在差異。

比如，行業(yè)中較為出名的潘通色彩體系，其實(shí)是基于印刷行業(yè)制定的一種特殊色彩空間；CMYK是為印刷從業(yè)者提供的、便于他們更好地進(jìn)行物料印刷的色彩空間；Lab是一種更強(qiáng)調(diào)色彩亮度的色彩空間。

因此，行業(yè)會(huì)根據(jù)顏色的不同規(guī)律和自身使用需求，總結(jié)整理出不同的色彩空間。

我們目前在工作當(dāng)中，主要都是聚焦于屏幕當(dāng)中，因此影響顏色呈現(xiàn)的也就變?yōu)椋?/p>

• 設(shè)計(jì)軟件當(dāng)中的色彩空間：以 RGB、HSB、HCT 為主，主要是計(jì)算機(jī)識(shí)別顏色顏色，調(diào)整顏色的重要方式，在電腦軟件當(dāng)中起到重要作用。
• 屏幕顯示當(dāng)中的色彩空間：以 Adobe RGB、Display P3、sRGB 為主，主要是能準(zhǔn)確展示屏幕當(dāng)中的各種顏色。

在我們細(xì)致講解色彩空間的部分時(shí)，我們先來了解三個(gè)重要的概念。

1. 亮度：是光作用于人眼所引起的明亮程度的感覺，它與被觀察物體的發(fā)光強(qiáng)度有關(guān)，主要表現(xiàn)光的強(qiáng)與弱。
2. 色相：是當(dāng)人眼看一種或多種波長的光時(shí)所產(chǎn)生的色彩感覺，它反映顏色的種類，是決定顏色的基本特征。
3. 飽和度：是指顏色的純度，即該摻入白光的程度，表示顏色深淺的程度。例如：藍(lán)色 + 白色 = 天藍(lán)色，也就是飽和度下降

二、色彩空間的類型

1. RGB  色彩空間

RGB是顯示器當(dāng)中的顏色基礎(chǔ)。

比如在現(xiàn)實(shí)世界當(dāng)中，我們將手機(jī)屏幕進(jìn)行放大，你會(huì)發(fā)現(xiàn)屏幕都是由紅綠藍(lán)三個(gè)燈管所組成的。

而 RGB 的色彩模式就是模擬現(xiàn)實(shí)世界當(dāng)中的屏幕顯示原理，將燈光照射的邏輯在設(shè)計(jì)軟件當(dāng)中進(jìn)行復(fù)現(xiàn)，因此在 RGB 的調(diào)色盤中，就會(huì)分別包含三個(gè)輸入框，這便是 紅綠藍(lán)。

其中，數(shù)字 0 代表不發(fā)光、255 則是最亮的燈光。

那為什么最亮是 255，不是 250？或者是 280 呢？

原因在于RGB 所有的顏色，最后都需要通過計(jì)算機(jī)進(jìn)行運(yùn)算顯示，對于它說并不認(rèn)識(shí) 紅色、藍(lán)色，在它的腦袋里（不對，CPU 里面）就只有 0 與 1，因此在計(jì)算機(jī)存儲(chǔ)的時(shí)候，一個(gè)字節(jié)也就是 8 個(gè)比特、也就是 2 的八次方、也就是 256，這樣 一個(gè)色彩信息等于一個(gè)字節(jié)，數(shù)據(jù)存儲(chǔ)就會(huì)更加高效。

所以我們所聊的顏色更多指的是代碼層面的顏色設(shè)定。

接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡版。

因?yàn)樗訔壝總€(gè)輸入框都會(huì)出現(xiàn) 255（255,255,255 白色）實(shí)在太長，不利于我們在日常工作當(dāng)中進(jìn)行記錄。

因此將每個(gè)顏色，三位數(shù)值縮減為兩位數(shù)值（十進(jìn)制變?yōu)槭M(jìn)制），就是增加英文字符的數(shù)據(jù)，就能較短的表達(dá)顏色，使得顏色表達(dá)更為高效。

因?yàn)?Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個(gè)字符所對應(yīng)的就是 紅、綠、藍(lán)。

比如我們剛才提到的這個(gè)藍(lán)色，在 RGB 空間當(dāng)中為(0,86,255) ，Hex 則是#0056FF，也是一一對應(yīng)關(guān)系。

RGB 聽上去似乎很美好，但問題在于兩點(diǎn)：

1.顏色的調(diào)整不夠直觀：作為設(shè)計(jì)師，我們很難模擬燈光的照射思維對顏色進(jìn)行調(diào)整，具體應(yīng)該增加多少顏色，其實(shí)是不夠清楚的。我們更熟悉的其實(shí)是：亮度、色相、飽和度，因此在調(diào)色時(shí)會(huì)十分困難。

比如我目前是紅色，那我要調(diào)整到紫色，應(yīng)該輸入多少值呢？其實(shí)我們很難進(jìn)行一個(gè)準(zhǔn)確的判斷。

2.顏色信息與亮度信息的數(shù)據(jù)混合：導(dǎo)致我們很難對于有一個(gè)準(zhǔn)確的判斷，比如在 RGB 相同的數(shù)值當(dāng)中，明顯會(huì)感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調(diào)色時(shí)，顏色一致性偏差較大。

為了解決這些問題，就提出一種新的色彩模型：HSB

2. HSB 色彩空間

HSB （也叫 HSV）就是通過顏色的  色相、飽和度、亮度 來進(jìn)行表示。

在色相當(dāng)中，由于顏色的呈現(xiàn)是色環(huán)的方式，因此在數(shù)值上是以 0-360 度來進(jìn)行表示的，在設(shè)計(jì)軟件里面，我們也只能輸入所對應(yīng)的數(shù)值。

同時(shí)飽和度與亮度都是以百分比的形式進(jìn)行呈現(xiàn)，飽和度越低，相對應(yīng)就會(huì)給顏色增加白色，使其更灰；亮度越低，就會(huì)增加對應(yīng)的黑色，讓其更深。

由于 HSB 的色彩空間的分類模式非常有利于我們進(jìn)行顏色的調(diào)整，因此我們在日常調(diào)色時(shí)其實(shí)會(huì)經(jīng)常用到。

比如日常工作當(dāng)中，假設(shè)我們需要設(shè)計(jì)一組圖標(biāo)，根據(jù) HSB 顏色的基本原理，我們其實(shí)只需要調(diào)整不同的色相，就能夠得到不同的圖標(biāo)顏色。

但… 顏色上依舊會(huì)存在問題。

你會(huì)發(fā)現(xiàn)當(dāng)我們調(diào)整了色相過后，整體的顏色并沒有形成統(tǒng)一。原因在于我們?nèi)搜蹖τ?黃綠色的感知 會(huì)和紅色、藍(lán)色有所不同，我們通常在看黃綠色時(shí)會(huì)更為刺眼，因此在設(shè)計(jì)層面上需要單獨(dú)調(diào)整。

所以在 HSB 當(dāng)中的顏色邏輯上，也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。

3. HCT 色彩空間

HCT 首先會(huì)將顏色當(dāng)中的 感知度、亮度 進(jìn)行結(jié)合，對之前的 HSB 重新調(diào)整。

在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調(diào)

色相與色度和之前基本類似，但色調(diào)上優(yōu)化了黃綠色凸顯問題，讓人眼的感知度也加入到了色彩空間當(dāng)中，使其顏色更為準(zhǔn)確。

同時(shí)色彩空間的呈現(xiàn)，優(yōu)化了顏色漸變的流暢性，我們會(huì)發(fā)現(xiàn)整體的漸變感覺會(huì)更為自然。

那為什么 Google 想要做 HCT？

其實(shí)因?yàn)?Material Design 當(dāng)中會(huì)強(qiáng)調(diào)設(shè)計(jì)的一致性和靈活性，在功能設(shè)計(jì)上，需要增加一個(gè)根據(jù)屏幕當(dāng)中的圖標(biāo)生成與其風(fēng)格一致的壁紙。

但在之前無論什么樣的色彩空間都不能準(zhǔn)確的還原顏色?，F(xiàn)在就提供了一個(gè)可靠的色彩基礎(chǔ)，能夠讓我們在不同的設(shè)備、平臺(tái)和應(yīng)用場景下，都能夠生成具有一致性的色彩方案，同時(shí)也能更好地適應(yīng)各種主題和風(fēng)格的變化，如亮色模式和暗色模式的切換。

比如，還是以上面這個(gè)案例，我們使用 HSB 與 HCT 對顏色進(jìn)行的色相的調(diào)整，那得到的結(jié)果明顯會(huì)發(fā)現(xiàn) HCT 會(huì)更加準(zhǔn)確。

那 HCT 就真那么完美無瑕？

其實(shí)也不然，因?yàn)?HCT 色彩空間出現(xiàn)時(shí)間較晚，所以在使用上也會(huì)有很多問題。

• 設(shè)備兼容性差：很多設(shè)計(jì)軟件目前對 HCT 基礎(chǔ)沒有適配，所以即使使用，很多老舊設(shè)備也并不能支持。
• 計(jì)算復(fù)雜度高：HCT 的色彩空間涉及到更為復(fù)雜的計(jì)算算法，因此它對于系統(tǒng)的資源要求更高。
• 認(rèn)知成本較大：對于新的事物，往往在行業(yè)中的普及會(huì)相對較慢，因此還需要長時(shí)間的普及才行。

三、色彩空間如何應(yīng)用？

這么深?yuàn)W的色彩空間，到底要如何使用？

1. 以 HSB 的為主

因?yàn)?HSB 是設(shè)計(jì)師最容易理解的色彩空間，因此我們在調(diào)色時(shí)需要根據(jù)數(shù)值來進(jìn)行顏色的調(diào)教。

比如說你的顏色很臟，不夠干凈。其實(shí)就是在強(qiáng)調(diào) HSB 當(dāng)中使用了更多的黑色，我們便可以調(diào)整到這個(gè)色彩空間當(dāng)中，去增加 B 的值（也就是第三個(gè)輸入框）

比如說你的字體很灰，不夠明確。

其實(shí)就是在說 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個(gè)輸入框）

2. 色彩更具數(shù)據(jù)化

因?yàn)槊恳粋€(gè)屏幕所顯示的顏色其實(shí)都不太相同，因此色彩調(diào)整時(shí)要多看數(shù)據(jù)，觀察數(shù)據(jù)之間的對比變化。

比如以 B 端產(chǎn)品的中性色為例，現(xiàn)在系統(tǒng)當(dāng)中所使用的正文顏色為 #333333，看到過后就明確知道顏色深度不夠、顏色也不透氣。

我們就會(huì)按照，先確定顏色色相，為灰色偏藍(lán)色，因此在色相當(dāng)中需要拖動(dòng)色環(huán)找到合適的色相；

緊接著確定飽和度，因?yàn)橐{(lán)色，但不宜過多，因此整體的數(shù)值只會(huì)在 1-5 之前浮動(dòng)；

最后確定深度，之前顏色過于淺，需要加深，所以直接減少，變?yōu)?22 左右的數(shù)值。

3. HCT 輔助顏色判斷

其次在判斷顏色時(shí)，也會(huì)更具章法。

在多輔助色的情況下，我們可以使用 HCT 對顏色進(jìn)行判斷。

對于日常工作來說，我們可以使用 Figma 當(dāng)中的 color Space 插件 進(jìn)行日常的色彩管理。在今后遇到類似同類型圖標(biāo)時(shí)，我們可以使用 HCT 的方式快速生成發(fā)散色板，幫助我們進(jìn)行色彩搭配。

4. 引入 HCT 完善工作流

最后在 B 端系統(tǒng)當(dāng)中，會(huì)存在較多顏色搭配的場景。

像是圖表設(shè)計(jì)、自定義系統(tǒng)主題，原來只能通過系統(tǒng)預(yù)設(shè)固定顏色的方式進(jìn)行解決，而現(xiàn)在 Google 也將這套計(jì)算公式開源，也就是說程序員可以直接引用 HCT 的色彩空間，將顏色配置的權(quán)限給到用戶，通過顏色的調(diào)整，呈現(xiàn)用戶想要的顏色內(nèi)容。

四、屏幕顯示的色彩空間

對于屏幕顯示的色彩空間而言，有部分內(nèi)容我們也是要重點(diǎn)關(guān)注。比如在 B 端設(shè)計(jì)當(dāng)中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進(jìn)行判斷。

1. sRGB 色彩空間

sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發(fā)的一種標(biāo)準(zhǔn)色彩空間，目的是提供一種通用的色彩標(biāo)準(zhǔn)，使得在不同的設(shè)備（如顯示器、打印機(jī)等）之間能夠?qū)崿F(xiàn)相對一致的色彩顯示。

對于 sRGB 來說，它是我們作為設(shè)計(jì)師最為重要的屏幕顯示色彩空間，因?yàn)樗ㄓ眯詮?qiáng)，所以大多數(shù)普通的電腦顯示器、網(wǎng)頁瀏覽器等都默認(rèn)采用 sRGB 色彩空間，這樣在瀏覽網(wǎng)頁、查看普通的數(shù)碼照片時(shí)，可以獲得比較穩(wěn)定的色彩效果。

所以我們在做設(shè)計(jì)時(shí)，通常都會(huì)將屏幕與軟件，都調(diào)整的 sRGB 的空間當(dāng)中，這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費(fèi)級顯示器設(shè)備。它在 DCI – P3 的基礎(chǔ)上進(jìn)行了一些調(diào)整，以適應(yīng)顯示器的特性。

整體而言 P3 色彩空間顯示出來的顏色會(huì)更加 生動(dòng)、艷麗，但是這會(huì)和你的設(shè)備密切相關(guān)。目前行業(yè)中只在蘋果設(shè)備以及部分高端顯示器才會(huì)使用，所以我們在設(shè)計(jì)時(shí)需要考慮自己產(chǎn)品的受眾，這一設(shè)備是否普遍使用。

最后，我們總結(jié)一下：

1. 色彩空間就是我們使用顏色的一種方式
2. 在調(diào)色時(shí)，我們會(huì)優(yōu)先使用 HSB 的色彩空間
3. HCT 是 Google 推出，主要目的是 色彩視覺的統(tǒng)一，在我們生成輔助色的時(shí)候有用
4. 屏幕當(dāng)中我們的所有顯示配置盡量調(diào)整為 sRGB，這樣更符合大多數(shù)用戶的顯示情況

在視覺設(shè)計(jì)的世界里，色彩不僅僅是一種裝飾，它是傳達(dá)情感、影響情緒和吸引用戶的關(guān)鍵。本文深入探討了色彩在界面設(shè)計(jì)中的重要性，揭示了如何通過色彩的定義、屬性、模型以及在不同場景下的應(yīng)用來增強(qiáng)設(shè)計(jì)的吸引力。

色彩在我們?nèi)粘ＴO(shè)計(jì)中起著定生死的作用，它是設(shè)計(jì)的靈魂，舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿，感覺在自己的設(shè)計(jì)生涯中，大部分都是在與色彩的博弈中度過的，雖然客戶可能不懂色彩原理，可是客戶天生都是色彩的感受家，什么樣的色彩搭配美，通常他們瞄一眼就會(huì)有定論，不用你去辯解太多，不好的搭配，縱使有千萬種理由，也說服不了客戶，所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設(shè)計(jì)至關(guān)重要。

目錄

一、 色彩的定義

二、 色彩的三屬性

三、 色彩的三種常見模型

四、 色彩的語意及它的應(yīng)用

五、 不同場景下的色彩應(yīng)用

六、 色彩在B端設(shè)計(jì)中的作用

七、 B端色彩設(shè)計(jì)使用的原則

一、色彩的定義？

1、物理學(xué)角度

色彩是光的屬性，當(dāng)光波通過物體時(shí)，物體會(huì)吸收某些波長的光，而反射或透射其他波長的光，這些被反射或透射的光波長度決定了我們看到的顏色。

2、心理學(xué)角度

色彩是人腦對光波長的視覺感知，不同的波長刺激視網(wǎng)膜上不同類型的感光細(xì)胞，進(jìn)而產(chǎn)生不同的色彩感覺。

什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？

B端產(chǎn)品經(jīng)理中的B是Business，商業(yè)的意思，B端產(chǎn)品經(jīng)理首先就要理解這個(gè)職位的重要性，要設(shè)計(jì)出更適合這個(gè)項(xiàng)目需求的產(chǎn)品方案，B最終產(chǎn)品經(jīng)理在日常工作中...

查看詳情 >

3、 藝術(shù)學(xué)角度

色彩是藝術(shù)創(chuàng)作的重要元素，它不僅關(guān)乎視覺感受，還與情感、文化、象征意義相關(guān)聯(lián)。

4、 設(shè)計(jì)學(xué)角度

在設(shè)計(jì)領(lǐng)域，色彩是傳達(dá)信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。

5、 計(jì)算機(jī)科學(xué)角度

在數(shù)字圖像處理中，色彩通常通過顏色模型（如RGB、CMYK等）來定義，這些模型通過不同比例的原色或色料混合來表示各種顏色。

二、色彩的三屬性

1、色相

色相是指不同顏色之間的差別，即不同顏色的表象和名稱，每個(gè)顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍(lán)、紫等。不同的色別都可用光譜中的波長來表示，人的眼睛可分辨出的色別有180種左右。

2、明度

明度是指色彩的明暗程度。一般在反光率相同的情況下，不同色別的明暗程度不同。如黃色光比紅色光更明亮，而紅色光則比青色光要明亮。

同時(shí)，同一色相在受光強(qiáng)弱或者物體對光的吸收、反射性能不同的情況下，會(huì)呈現(xiàn)不同的明暗變化和差異。

3、飽和度（純度）

飽和度（純度）是指同一色別的純凈度和鮮明度的變化。從色光的角度而言，光的波長單一程度越高，飽和度就會(huì)越高；不同色別所達(dá)到的飽和度不同，一般情況下，紅色的純度可達(dá)到最高，綠色的則相對較低；同一色相深淺不同的顏色有不同的飽和度；黑白色光的滲入會(huì)導(dǎo)致飽和度和明度發(fā)生變化；通常，照明光線的性質(zhì)、物體表面結(jié)構(gòu)對光線吸收與反射的性能等因素影響飽和度。

三、色彩三種常見模型

1、HSB模型

HSB模型也叫HSV模型，其中H代表色相，即顏色的種類；S代表飽和度，即顏色的純度；B(V)代表亮度，即顏色的明亮程度。

這種色彩模型是我日常在的設(shè)計(jì)工作中用的最多的一種色彩模型，如果在同色系中如果只想讓他們有細(xì)微的變化，我通常會(huì)通過調(diào)節(jié)S和B的百分比數(shù)值來達(dá)到自己想要的目的。

以上就是我在設(shè)計(jì)項(xiàng)目中，運(yùn)用該色彩模型做的一個(gè)實(shí)戰(zhàn)，項(xiàng)目中用到了一個(gè)圖形，需要用同色系來表達(dá)，我保持了H色值的不變，讓S值和B值都發(fā)生著微妙的不同，于是就產(chǎn)生了四五種同色系的綠色，該色彩模型特別的好使，也鼓勵(lì)大家多在實(shí)戰(zhàn)中運(yùn)用這樣的色彩模型，簡單實(shí)用。

• H色相: Hue，以角度(0°-360°)表示
• S飽和度: Saturation，以百分比值(0%-100%)表示
• B/V 亮度: Brightness 或 Value，以百分比值(0%-100%)表示

2、RGB模型

RGB是從顏色發(fā)光的原理來設(shè)計(jì)定的，通俗點(diǎn)說它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈，當(dāng)它們的光相互疊合的時(shí)候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。

紅、綠、藍(lán)三個(gè)顏色通道每種色各分為256階亮度，在0時(shí)“燈”最弱——是關(guān)掉的，而在255時(shí)“燈”最亮。當(dāng)三色灰度數(shù)值相同時(shí)，產(chǎn)生不同灰度值的灰色調(diào)，即三色灰度都為0時(shí)，是最暗的黑色調(diào)；三色灰度都為255時(shí)，是最亮的白色調(diào)。

• R紅：Red，以數(shù)值(0-255)表示
• G綠：Green，以數(shù)值(0-255)表示
• B藍(lán)：Blue，以數(shù)值(0-255)表示

3、CMYK模型

雖然RGB模型色彩更加的豐富，但是很多顏色不能完全打印出來，于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑，通過顏料反射和吸收光線來顯色。

記得之前自己從事平面工作的時(shí)候，就經(jīng)常要用到CMYK模式，因?yàn)橛〕鰜淼男Ч钍亲钚〉?，是最靠近設(shè)計(jì)效果圖的。

通過對比，我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實(shí)更加的絢麗豐富些，而CMYK的色彩模型顏色顯示上就黯淡了不少，但是要印刷的話，就必須轉(zhuǎn)化為成CMYK的色彩模式。

• R青：Cyan，以百分比值(0%-100%)表示
• M品紅：Magenta，以百分比值(0%-100%)表示
• Y黃：Yellow，以百分比值(0%-100%)表示
• B黑：Black，以百分比值(0%-100%)表示

四、色彩的語意及應(yīng)用

1、紅色的語意及應(yīng)用

紅色代表熱情、活力、強(qiáng)烈的情感和愛。它可以象征著激情、勇氣和行動(dòng)力，也常與興奮、熱烈的情緒相關(guān)。

著名的快餐品牌肯德基，在自己的網(wǎng)頁及店鋪裝修中都運(yùn)用了紅色，因?yàn)榧t色是所有顏色中最容易引起人們注意的顏色，也是很容易刺激人們食欲和購買的顏色。

2、橙色的語意及應(yīng)用

橙色傳達(dá)溫暖、歡快和積極向上的情感；它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起，給人以活力充沛和充滿希望的感覺。

百度網(wǎng)盤的這個(gè)登錄界面就運(yùn)用了橙色，給人陽光、向上、熱情的感覺，通過色彩的運(yùn)用一下讓界面有了溫度。

3、黃色的語意及應(yīng)用

黃色象征快樂、開朗和樂觀；它能帶來明亮、愉悅的情緒，代表著陽光、溫暖和智慧。

叫叫閱讀是一款非常著名的兒童閱讀軟件，整個(gè)色調(diào)采用的是非常有活力的黃色，這與兒童處于好奇與活力的階段相符合，這種高亮的黃色，飽和度和明度都非常的高，特別容易抓住兒童的目光，同時(shí)它是一種快樂的顏色，也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色，特別符合兒童成長的需求。

4、綠色的語意及應(yīng)用

綠色代表平靜、和諧與生機(jī)。綠色常與大自然相關(guān)，給人帶來安寧、放松的感覺，也象征著成長、希望和新生。

青椒云的目標(biāo)用戶是吸引年輕用戶和創(chuàng)意工作者，綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注，同時(shí)綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。

5、青色的語意及應(yīng)用

青色寓意清新、寧靜和沉穩(wěn)，它給人一種冷靜、理智的印象，同時(shí)也帶有一絲清新的活力。

青色是一種帶有藍(lán)色和綠色的顏色，因此青色既有藍(lán)色的專業(yè)感、信任感，也有綠色的生機(jī)感、希望感。

以下是日本某牙醫(yī)品牌的官網(wǎng)首頁，病人希望在這里帶來健康與復(fù)蘇，也希望獲得專業(yè)、可靠的治療，而青色就成了很好傳遞這種情感的品牌色。

6、藍(lán)色的語意及應(yīng)用

藍(lán)色代表冷靜、忠誠和信任；它常與沉穩(wěn)、深邃的情感相關(guān)，能帶來寧靜、平和的心境，也象征著智慧和理性。

123云盤使用了藍(lán)色，藍(lán)色符合社會(huì)的普遍審美認(rèn)知，接受度比較高；其次，藍(lán)色給人安全的感覺，也符合云盤的初衷，給用戶安全的存儲(chǔ)服務(wù)。

7、紫色的語意及應(yīng)用

紫色象征神秘、高貴和浪漫；它常給人一種優(yōu)雅、奢華的感覺，同時(shí)也帶有神秘莫測的氛圍，與夢幻、創(chuàng)造力等情感相關(guān)。

美柚的主要用戶是女性，紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì)，這些特質(zhì)與女性的審美和情感需求相契合，能夠吸引女性的關(guān)注。

8、白色的語意及應(yīng)用

白色代表著純潔、神圣、信任、安靜、樸素和雅致，是一種充滿純潔的顏色，它可以跟任何顏色和諧的共生。

以下是熊掌ID的登錄界面，顏色用了大量的白與灰，簡潔又不失大氣，傳遞出了一種質(zhì)樸、雅致的感覺。

五、不同場景下的色彩應(yīng)用

1、商場色彩多彩的原因？

? 吸引顧客注意力

在眾多商業(yè)場所中脫穎而出，色彩鮮艷的商場外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來，吸引過往行人的目光，激發(fā)他們的好奇心和探索欲。

確實(shí)多彩的顏色更加容易引起我的關(guān)注，這不看到商場的美圖，都忍不住拍照留念了，成功的吸引了我的目光。

? 增強(qiáng)可見性

即使在較遠(yuǎn)的距離或在繁忙的街道上，多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn)，提高商場的知名度和曝光度。

多彩的配色，讓我很遠(yuǎn)就被商場美輪美奐的插畫吸引，大大增加了商場的可見性。

? 營造愉悅氛圍

色彩可以激發(fā)積極情緒，明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進(jìn)入一個(gè)色彩豐富的商場時(shí)，會(huì)感受到一種愉悅和輕松的氛圍，從而更愿意在商場中停留和購物。

星沙永旺城的美陳設(shè)計(jì)很好，墻面采用極具誘惑力的顏色與美食，把小小實(shí)物十倍放大，增加了視覺看點(diǎn)，讓人忍不住過去拍照曬一下，大大增加了愉悅性。

? 緩解壓力

在現(xiàn)代生活中，人們常常面臨各種壓力。走進(jìn)一個(gè)多彩熱烈的商場，可以暫時(shí)擺脫日常的煩惱和壓力，享受購物的樂趣。

特別可愛夸張的插圖設(shè)計(jì)，引發(fā)了絲絲童趣和歡樂，讓人短暫忘記壓力，遠(yuǎn)離煩惱。

? 引導(dǎo)消費(fèi)行為

商場通常會(huì)使用不同的顏色來區(qū)分不同的區(qū)域，如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域，提高購物效率。

突出重點(diǎn)商品，對于一些重點(diǎn)推薦的商品或促銷活動(dòng)，商場可以使用鮮艷的色彩來突出展示，吸引顧客的注意力，引導(dǎo)他們進(jìn)行購買。

? 塑造品牌形象

6.1 傳達(dá)個(gè)性和風(fēng)格

不同的商場可能有不同的品牌定位和目標(biāo)客戶群體。通過選擇特定的色彩組合，商場可以傳達(dá)出自己的個(gè)性和風(fēng)格，吸引與之相符的顧客。

6.2 增強(qiáng)品牌記憶度

獨(dú)特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象，提高品牌的記憶度和辨識(shí)度。

芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭，是一個(gè)區(qū)域型的購物中心，集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體，為消費(fèi)者提供一站式商業(yè)綜合體，它在餐飲區(qū)采用了大量的吃喝玩樂的插畫來引導(dǎo)用戶消費(fèi)。

2、為什么藍(lán)色在B端設(shè)計(jì)中廣泛應(yīng)用？

? 視覺特性方面

1.1 穩(wěn)定性

藍(lán)色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中，用戶往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進(jìn)行復(fù)雜的操作，藍(lán)色的穩(wěn)定性可以讓用戶感到安心，增強(qiáng)對產(chǎn)品的信任感。

1.2 專業(yè)性

藍(lán)色通常與科技、專業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶，需要傳達(dá)出專業(yè)、高效的形象，藍(lán)色正好符合這一需求。

? 心理影響方面

2.1 減少焦慮

相比鮮艷、刺激的顏色，藍(lán)色較為柔和，不容易引起用戶焦慮和緊張的情緒；在B端使用場景中，用戶可能需要長時(shí)間使用產(chǎn)品，藍(lán)色的舒緩效果有助于提高用戶的使用體驗(yàn)。

2.2 提高專注度

藍(lán)色具有一定的沉靜作用，能夠幫助用戶集中注意力，專注于工作任務(wù)。對于B端用戶來說，高效完成工作是首要目標(biāo)，藍(lán)色的這一特性有助于提高工作效率。

B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗(yàn)，跟教育有著異曲同工之處，就像這個(gè)易貝樂少兒英語一樣，用大面積的藍(lán)色，希望孩子在這里能很快的安靜下來學(xué)習(xí)、專注自己的事情。

? 行業(yè)習(xí)慣方面

3.1 科技行業(yè)引領(lǐng)

許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場中廣泛使用藍(lán)色，逐漸形成了一種行業(yè)習(xí)慣。其他企業(yè)在設(shè)計(jì)B端產(chǎn)品時(shí)，也會(huì)傾向于選擇藍(lán)色以符合用戶的認(rèn)知和期望。

3.2 傳統(tǒng)與延續(xù)

在過去的設(shè)計(jì)中，藍(lán)色在 B 端領(lǐng)域的成功應(yīng)用使得它成為了一種傳統(tǒng)選擇。設(shè)計(jì)師們在延續(xù)這一傳統(tǒng)的同時(shí)，也不斷優(yōu)化和創(chuàng)新藍(lán)色的運(yùn)用方式，使其更符合現(xiàn)代設(shè)計(jì)趨勢和用戶需求。

嘉為科技是一個(gè)有著20多年技術(shù)沉淀的科技公司，它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍(lán)的風(fēng)格，應(yīng)該也是基于傳統(tǒng)的沉淀吧。

?藍(lán)色可以提高產(chǎn)品的復(fù)用率

很多用戶都能接受藍(lán)色的B端界面，當(dāng)面對有差不多需求客戶時(shí)，同一套UI，可以多次復(fù)用，可以減少開發(fā)成本和設(shè)計(jì)成本，這也是自己通過長期實(shí)戰(zhàn)觀察發(fā)現(xiàn)的。

一個(gè)UI風(fēng)格，用在了兩個(gè)項(xiàng)目中，不同的用戶，趨向同樣的風(fēng)格，說明藍(lán)色在大家心目中的接受度是非常的高，用藍(lán)色可以促進(jìn)設(shè)計(jì)的多次復(fù)用。

在日常的項(xiàng)目中，我看到的B端UI界面是千篇一律的穩(wěn)重，不追求過于刺激的顏色搭配，通常都比較的干凈簡潔，不像商場里面的美陳背景設(shè)計(jì)，色彩對比非常的強(qiáng)烈，比較的吸引人眼球。

有一次我厭煩了常規(guī)的穩(wěn)重風(fēng)，探索一種大膽的色彩風(fēng)格時(shí)，雖然風(fēng)格比較新穎，可是發(fā)出去客戶的接受度不高，覺得太不穩(wěn)重了，然后重新按照以往習(xí)慣進(jìn)行設(shè)計(jì)時(shí)，就很好，客戶一致認(rèn)同。

可見每個(gè)領(lǐng)域都有自己的色彩運(yùn)用習(xí)慣，商場需要吸引人眼球、刺激消費(fèi)，越大膽越好，可是B端設(shè)計(jì)需要提供一個(gè)讓人平靜去處理工作事項(xiàng)的環(huán)境，它需要安靜，不需要過于刺激的顏色搭配。

六、色彩在B端設(shè)計(jì)中的作用？

1、通過色彩向用戶反饋操作結(jié)果及當(dāng)前狀況

比方在日常設(shè)計(jì)當(dāng)中，紅色代表流程失敗，綠色代表流程成功，橙色代表信息有告警，藍(lán)色代表著鏈接，同時(shí)不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài)，在反饋結(jié)果和狀況方面，色彩起著非常重要的作用。

下面這個(gè)IDC運(yùn)營的監(jiān)測平臺(tái)，它就是通過顏色來區(qū)分不同的告警級別的，可見顏色在B端產(chǎn)品中的重要性。（備注：圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù)，僅做展示）

2、可以助力品牌傳達(dá)

B端設(shè)計(jì)中大面積使用品牌色，可以強(qiáng)化品牌形象，使用與品牌標(biāo)志風(fēng)格相近的色彩，可以幫助用戶快速識(shí)別和記住品牌，在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案，有助于建立品牌的連貫性和一致性，增強(qiáng)用戶對品牌的信任。

例如我給湖南高速設(shè)計(jì)的一套B端界面設(shè)計(jì)，用戶強(qiáng)烈要求改變傳統(tǒng)的藍(lán)色風(fēng)格，要求整套界面設(shè)計(jì)要用湖南高速品牌色-綠色，說明在追求大流和品牌色之間，客戶更加傾向品牌的傳達(dá)。（備注：圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù)，僅做展示）

3、顏色可以很好的進(jìn)行信息區(qū)分

在B端界面設(shè)計(jì)中，顏色在幫助信息區(qū)分起著非常重要的作用，通?？梢酝ㄟ^不同的色彩來區(qū)分功能區(qū)域，可以讓用戶更清晰地了解界面的結(jié)構(gòu)和布局，例如，導(dǎo)航欄使用一種特定的顏色，而內(nèi)容區(qū)域則使用另一種顏色。

我設(shè)計(jì)的天翼寫作，就是這樣的設(shè)計(jì)思路，導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣，這里顏色起到了很好的區(qū)分作用。

4、舒適的色彩搭配可以提升用戶體驗(yàn)

選擇合適的色彩對比度可以增強(qiáng)文本的可讀性，減少用戶的視覺疲勞。例如，黑色文字在白色背景上通常比較容易閱讀。

選擇適當(dāng)?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍，從而影響用戶的情緒和感受，提高用戶的使用體驗(yàn)。

我參與的這個(gè)后臺(tái)界面，就是通過合理的色彩搭配來引導(dǎo)用戶使用的，當(dāng)用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示，沒有走完的流程就會(huì)是灰色的，寓意指示非常的鮮明，很好的解決了用戶不知道清晰進(jìn)程的卡點(diǎn)，提升了用戶體驗(yàn)。

5、色彩可以傳遞性格

人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的，其實(shí)色彩也是有性格的，不同的色彩也有不同的性格，當(dāng)我們對色彩的性格有足夠多的了解，在面對不同的客戶時(shí)，我們對色彩的拿捏以及設(shè)計(jì)需求的把握時(shí)，會(huì)更加的游刃有余。

我們平常確實(shí)是在做設(shè)計(jì)，但是我們更多的是在與人打交道，我們更好的聆聽，會(huì)幫助我們更快的抓取到客戶的喜好，快速做出滿足客戶需求的設(shè)計(jì)，少受加班之苦。

比方說我之前給云門戶設(shè)計(jì)的一套UI，客戶的決策層是男性，且年齡偏大，他們就偏愛深沉的UI風(fēng)格；而我負(fù)責(zé)的天翼云電腦專家，客戶的決策層是女性，且年齡偏年輕，她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶，就會(huì)帶來不同的設(shè)計(jì)結(jié)果。

七、B端色彩設(shè)計(jì)使用的原則

1、B端設(shè)計(jì)中，色彩設(shè)計(jì)應(yīng)遵循6：3：1原則

在這個(gè)登錄頁面中，我就是運(yùn)用的6：3：1原則，60%的主色，30%的次要色，10%的點(diǎn)綴色；使用了大面積的藍(lán)色和藍(lán)灰色，最后使用一點(diǎn)點(diǎn)的橙色，這樣的配色會(huì)顯得高級。

2、文字、卡片背景色和邊框都使用無彩色

為了保證畫面風(fēng)格的統(tǒng)一、干凈整潔，文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色，通常通過顏色的深淺來區(qū)分信息的層級關(guān)系。

比方說我參與的星辰大模型AI文檔生成能力的應(yīng)用，里面無論文字顏色還是底色都是運(yùn)用的無彩色，只是通過了色彩深淺變化來做了層級區(qū)分，因?yàn)闊o彩色可以起到很好的降噪作用，既傳達(dá)了信息，又不會(huì)顯得界面凌亂復(fù)雜。

3、需要凸顯的內(nèi)容，用明度和純度比較高的色彩

比方說，日常我們設(shè)計(jì)的卡片都是用的白色，而底色我們用的是灰色，因?yàn)榭ㄆ锩娴膬?nèi)容都是比較重要的信息，需要用一個(gè)亮度比較高的顏色，讓內(nèi)容往前走，而灰色的背景通常就往后走的感覺，這樣能跟卡片形成一個(gè)一前一后的對比，更好的幫助內(nèi)容進(jìn)行傳播。

比方說我設(shè)計(jì)的這個(gè)IT運(yùn)維監(jiān)控平臺(tái)的首頁，物理主機(jī)、網(wǎng)絡(luò)及安全設(shè)備、工單、在途工單這幾個(gè)指標(biāo)是非常關(guān)鍵的，所以他們的圖片底色用了純度比較高的有彩色來標(biāo)識(shí)。

4、設(shè)計(jì)前一定要有定色調(diào)的意識(shí)

作為設(shè)計(jì)師，我們的設(shè)計(jì)工作其實(shí)就是在設(shè)計(jì)一種感覺，一種情緒，設(shè)計(jì)前定調(diào)的意識(shí)真的太重要了，感覺對了，什么都就對了。

比方說我前段時(shí)間接到了一個(gè)B端的大屏可視化需求設(shè)計(jì)，客戶說之前的大屏設(shè)計(jì)不喜歡，希望重新出一個(gè)新的設(shè)計(jì)，然后公司的需求對接人員在給我下達(dá)需求時(shí)，真的就只是給我下達(dá)了這幾個(gè)字，讓我重新出一個(gè)設(shè)計(jì)試試。

以我的職業(yè)直覺，感覺這個(gè)需求是不夠細(xì)化的，于是我就多問了幾句，我問客戶是想要常規(guī)的藍(lán)色調(diào)的還是別的？果然一問，客戶說不希望再用常規(guī)的藍(lán)色的，希望新的設(shè)計(jì)要用他們的品牌色綠色，剛聽到這幾個(gè)字的時(shí)候，我以為這次我把握住需求了，在收集參考圖的時(shí)候，我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的，根據(jù)自己以往的作圖習(xí)慣，我覺得深色會(huì)更加的受歡迎一些，我自以為是的朝著深色的方向去出圖，出到了一半的時(shí)候，我內(nèi)心有些許的忐忑，我于是找了一深一淺的參考圖，讓同事跟客戶確認(rèn)一下，客戶是想要深色的感覺，還是要淺色的感覺，這次溝通又給了我深深的一擊，客戶不按常理出牌，說希望按淺色的風(fēng)格來出圖。

在出稿之前，通過自己反復(fù)的溝通確認(rèn)，發(fā)現(xiàn)設(shè)計(jì)前的定調(diào)意識(shí)真的太重要了，要不是有出圖前一波三折的反復(fù)確認(rèn)以及需求的細(xì)化，就不會(huì)有后來的一遍過稿。

5.設(shè)計(jì)的灰色盡量使用帶有色彩偏向的灰

不管我們設(shè)計(jì)什么色系的界面，都避不開用到灰色，在設(shè)計(jì)中用跟主視覺相符的灰，會(huì)使得界面更加的高級、協(xié)調(diào)與美觀，注意好了這個(gè)小細(xì)節(jié)，會(huì)給我們的設(shè)計(jì)加分不少。

下面是我日常體驗(yàn)到的兩個(gè)界面，上面綜合管理平臺(tái)里面的灰色就沒有跟主色調(diào)藍(lán)色相呼應(yīng)，灰色沒有向藍(lán)色傾斜，界面看起來就沒那么美觀；下面通義千問的灰色設(shè)計(jì)就非常的注重細(xì)節(jié)，灰色偏紫，整個(gè)界面看起來渾然天成，毫無違和，美感、檔次瞬間提升好幾個(gè)等級。

一個(gè)微小細(xì)節(jié)的在意，在無形中拉高了設(shè)計(jì)的高度，十個(gè)細(xì)節(jié)乃至更多細(xì)節(jié)的在意，就會(huì)帶來更多意想不到的結(jié)果。

總結(jié)：

以上就是我最近對色彩的一些頓悟、感受和學(xué)習(xí)收獲，在不斷的復(fù)盤總結(jié)中，我們總會(huì)收獲一些新的認(rèn)知，通過這次色彩的復(fù)盤之旅，發(fā)現(xiàn)色彩對設(shè)計(jì)師真的太重要了，希望我的分享對大家有啟發(fā)，不足之處也歡迎大家留言交流。

“B 端頁面加載，關(guān)乎用戶體驗(yàn)。” 在 B 端產(chǎn)品設(shè)計(jì)中，頁面加載功能不容小覷。如何讓用戶在等待中減少焦慮？怎樣使頁面加載邏輯清晰、策略得當(dāng)？本文將詳細(xì)闡述，為 B 端產(chǎn)品設(shè)計(jì)提供指引。

每一個(gè)用戶都不喜歡進(jìn)入頁面時(shí)需要長時(shí)間的等待，并且對著一個(gè)空白的頁面。

因此在 iOS當(dāng)中會(huì)使用大量的動(dòng)效、情感化設(shè)計(jì)來引導(dǎo)用戶多停留一些時(shí)間等待加載；在較多 app 當(dāng)中，也會(huì)通過動(dòng)效設(shè)計(jì)，優(yōu)化頁面信息的加載。

那既然頁面加載很重要，對于B端產(chǎn)品而言，我們也需要去考慮頁面的功能究竟要如何進(jìn)行設(shè)計(jì)。

今天我們會(huì)聊聊 頁面加載 功能的具體邏輯，以及B端產(chǎn)品的常見頁面加載策略，希望能夠?qū)Ω魑煌瑢W(xué)有所幫助～

一、頁面加載的邏輯

在系統(tǒng)當(dāng)中，頁面加載其實(shí)是用戶對系統(tǒng)界面進(jìn)行交互后，系統(tǒng)會(huì)將對應(yīng)的數(shù)據(jù)傳給服務(wù)器，而服務(wù)器又會(huì)將內(nèi)容反饋給用戶的整個(gè)過程。

比如在按鈕組件中，我們就需要去設(shè)定「當(dāng)用戶點(diǎn)擊了按鈕過后它需要長時(shí)間加載的 Loading 狀態(tài)」

通過這樣的做法，其實(shí)就是緩解用戶等待所花費(fèi)的時(shí)間，減少焦慮。

在很多C端產(chǎn)品中，頁面加載是非常常見的。比如會(huì)有懶加載、預(yù)加載、異步加載等。

什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？

B端產(chǎn)品經(jīng)理中的B是Business，商業(yè)的意思，B端產(chǎn)品經(jīng)理首先就要理解這個(gè)職位的重要性，要設(shè)計(jì)出更適合這個(gè)項(xiàng)目需求的產(chǎn)品方案，B最終產(chǎn)品經(jīng)理在日常工作中...

查看詳情 >

同時(shí)會(huì)使用非常多的 插畫設(shè)計(jì)、動(dòng)效設(shè)計(jì) 去降低用戶所使用的焦慮。但是在桌面端中，它的思考方式會(huì)有些許不同，我們將其分為四種不同的方式。

二、骨架圖/skeleton

骨架屏是較為常規(guī)的頁面模塊加載方式。

它主要適用于模塊當(dāng)中，加載內(nèi)容需要提供占位信息時(shí)進(jìn)行使用。通常會(huì)在 列表、卡片類 圖文信息較多的頁面當(dāng)中進(jìn)行呈現(xiàn) 。

在用戶預(yù)期上，骨架圖能夠幫助我們展示當(dāng)中頁面的大體結(jié)構(gòu)，以避免在頁面加載信息的過程當(dāng)中出現(xiàn)隨意跳動(dòng)、亂展示的情況。

特別是在很多頁面第一次加載時(shí)，由于數(shù)據(jù)內(nèi)容較多，因此使用骨架圖填充會(huì)更為合理。比如在有贊當(dāng)中， 就會(huì)使用骨架圖的方式來進(jìn)行頁面信息的加載。而在B端后臺(tái)中也更多的適用于工作臺(tái)信息的加載，特別是在工作臺(tái)中有數(shù)據(jù)部分的內(nèi)容呈現(xiàn)的時(shí)候，需要格外去注意。

三、加載中/Spin

Spin 主要要于頁面和區(qū)塊當(dāng)中的信息加載，通過適當(dāng)?shù)膭?dòng)效，能夠保證頁面加載時(shí)緩解用戶的焦慮。

在 Spin 當(dāng)中，會(huì)有許多不同的類型：基礎(chǔ)Loading、動(dòng)畫Loading、進(jìn)度Loading

基礎(chǔ)Loading 更適用于頁面當(dāng)中的組件類級別的加載，像是在輸入框內(nèi)、按鈕中、下拉選擇… 的內(nèi)容加載。

動(dòng)畫Loading 則偏向于區(qū)塊、頁面級別的加載，比如在表格頁面中，就會(huì)經(jīng)常使用加載的方式展示目前正在相應(yīng)。

進(jìn)度Loading 則更像是進(jìn)度條的外露，想要更凸顯目前的真實(shí)進(jìn)度情況。目前在 Ant Design 5.18.0 版本當(dāng)中即可支持

四、長時(shí)間加載

當(dāng)然，在系統(tǒng)當(dāng)中還會(huì)出現(xiàn)一些特殊的加載狀態(tài)。比如在針對數(shù)據(jù)量較大的情況下時(shí)，我們會(huì)采取什么樣的加載策略？

比如在神策數(shù)據(jù)當(dāng)中，當(dāng)我們在去分析后臺(tái)的行為數(shù)據(jù)時(shí)，需要進(jìn)行大量的計(jì)算，因此在分析完一次過后所等待的時(shí)間也會(huì)更為長久。這時(shí)候神策會(huì)給出一套更為復(fù)雜的加載策略。

首先在加載層面上，它會(huì)優(yōu)先告知用戶目前整體的加載進(jìn)度，這對于用戶的等待是非常有益的。

其次，如果你對于整體加載的時(shí)間進(jìn)度不夠滿意，那我可以給你相應(yīng)的解決策略，像是分批加載等等。

最后如果你在加載過程當(dāng)中有其他的分析任務(wù)，也可以通過異步加載的方式，進(jìn)行后臺(tái)計(jì)算，等結(jié)果出來后會(huì)通過通知的方式進(jìn)行提示。當(dāng)然，在此過程中，你可以中斷、退出。

五、異步加載

異步加載也是針對長時(shí)間加載的一種策略，比如我需要去上傳較大信息的時(shí)候，我需要耗費(fèi)特別多的時(shí)間。那這時(shí)候就可以采用異步加載的方式，滿足用戶的正常使用。

在飛書當(dāng)中，我要上傳飛書妙記，我要導(dǎo)入飛書成員，那都可以通過異步加載的方式來進(jìn)行呈現(xiàn)。

那在設(shè)計(jì)的時(shí)候需要去考慮異步加載整體的入口以及功能之間是如何實(shí)現(xiàn)的。

像是在飛書妙記中，它會(huì)將其作為一個(gè)上傳入口，進(jìn)行快速的展現(xiàn)。而在導(dǎo)入飛書成員的時(shí)候，則會(huì)展現(xiàn)是將其放在后臺(tái)進(jìn)行加載，等完成過后通過通知的方式來告知用戶（與神策相同）

關(guān)于加載，其實(shí)在設(shè)計(jì)上還會(huì)有很多細(xì)節(jié)，我們也會(huì)在課程當(dāng)中，通過 功能設(shè)計(jì) 的方式給大家進(jìn)行梳理設(shè)計(jì)要點(diǎn)（肯定會(huì)比現(xiàn)在更為系統(tǒng)），后續(xù)有時(shí)間，再和大家分享～

本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan