乱码国产一区二区三区-精品久久久久免费极品大片-久久中文视频青草-亚洲福利片午夜在线-中文字幕久在线视频-色网中文一区av-亚洲欧洲在线播放-欧美日韩国产亚洲一区二区-久久精品视频991区二区-www.国产三级久久久

編輯導語：交互設計本質上就是設計產品的使用方式的過程，“如何才能做出合理的B端交互決策”是很多人都在思考的問題。在這篇文章里，作者聚焦具體的實戰(zhàn)場景，分享了一些自己做B端交互設計的經驗，一起看看吧。

這陣子想了想關于交互知識的分享，還是應該要拓展成一整個系列的內容，包含各類組件、控件和行為的解析。

基于我的分享習慣，我會盡量避免使用太過理論還是空泛的方式進行講解，而是聚焦具體的實戰(zhàn)場景，幫助大家理解如何做出合理的交互決策。

一、交互的全局框架是什么

交互設計本質上就是設計產品的使用方式的過程，賬號怎么填寫，表單怎么導出，數據怎么篩選，列表怎么排序等等……針對每個功能的使用方式，都可以花很長的時間去考慮其合理性。一個項目的交互，就是這個項目所有功能使用方式的總和。

那設計師如何開始項目的交互設計？直接進入細節(jié)，開始跟著原型制定輸入框的狀態(tài)，下拉菜單的展開邏輯嗎？

這樣肯定是不行的，項目的交互內容又多又雜，設計師會很快陷入這些細枝末節(jié)中疲于奔命。頭疼醫(yī)頭腳疼醫(yī)腳，容易造成項目細節(jié)缺乏統(tǒng)一性，前后矛盾，體驗割裂。

所以，理解項目交互設計的正確思路，就要知道在項目中有哪些交互內容，它們對應的層級和設計對象是什么。

在這里，我把需要設計的交互對象拆分成4個種類，它們從大到小依次為：

1. 全局框架：項目的主要模塊排版和布局，產品使用的主要依據和步驟
2. 功能流程：需要較多操作步驟才可以完成的一個完整的用戶使用目標
3. 組件操作：一些復雜模塊、業(yè)務組件的完整操作方法和狀態(tài)
4. 控件使用：基礎控件元素的操作方法和狀態(tài)

我們先圍繞在全局框架這個類型進行解釋，什么是項目的主要模塊排版和布局，以及為什么全局框架可以決定產品的主要使用依據和步驟。

比如大家都用過 Adobe 的軟件，應該會有個感覺，就是熟悉了其中一款后用下一個，立馬就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的軟件，用起來感覺就感覺非常別扭，往往要從頭開始學起，比如對標 PS 的 Affinity Photo、Pixelmator。

為什么會出現這樣的反差？就是因為 Adobe 盡可能統(tǒng)一了自己生態(tài)內的軟件全局框架，操作方式，讓全家桶用戶可以用最快的方法適應不同的軟件。

包括頂部的屬性欄，左側的工具欄，中間的標簽欄、創(chuàng)作區(qū)域，右側的不同工作窗口排列形式。

除了主要界面的布局框架外，還包含一些二級窗口的框架結構也是統(tǒng)一和固定的。比如打開 PS 內的首選項設置和屬性設置窗口，和其它幾個軟件的屬性設置窗口幾乎一致。

而在 Affinity 中，軟件首選項設置就沒有使用左側導航，而是類似 Mac 通用設置的快速入口分層模式，用慣了 Adobe 再換這個就會有股說不出的別扭。

可能有同學有疑問，Photoshop 并不是只有這幾種窗口，其它窗口不就樣式和上面這類不一樣嘛？那是因為窗口的框架肯定是要考慮功能和場景的，即使使用了多種窗口類型，那也是有規(guī)律的應用在操作方式相近的場景中。

再回想一下 PhotoShop 的基本操作流程，就是在創(chuàng)建文件以后，通過左側工具添加圖層元素到中間畫布區(qū)域進行排版，再在右側屬性欄中調節(jié)畫布對象的圖層順序、屬性。

PhotoShop 作為平面領域中的獨角獸，直接影響了絕大多數同類設計軟件的框架結構和布局方法。因為絕大多數設計師學習設計的入門軟件都是 PS，想要讓用戶更快上手自己的軟件，那就應該順著他們已經習慣的方式來。

所以，從 Sketch 開始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即時設計等，都應用了幾乎相同的全局框架，所以你只要掌握其中一個就能立馬熟悉其它軟件的使用。

而當實際功能和 UI 設計軟件高度相似的其它幾個 “辦公應用” 結構框架不同時，上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint，先學了設計軟件再去學這幾個軟件的同學一定深有感觸。

而其它行業(yè)的軟件，如果沒有一個具備絕對主導性的產品作為標桿，那么每家公司的產品框架就各不相同。比如 3D 建模軟件中的 C4D、Blender、犀牛，視頻剪輯工具中的 Pr、Finalcut、達芬奇，你就是熟練掌握其中一款，對專業(yè)術語和必要功能邏輯了如指掌，也需要通過基本教學才能掌握其它同類軟件。

這就是框架帶來的作用，它是軟件使用方式和操作流程的主要依據，其它細節(jié)的交互和操作都是附著于全局框架下的子集內容。之所以交互設計要從全局框架開始，原因就是設計師要：

先確定產品整體操作的方式，再去考慮按鈕和表單那些細節(jié)的處理。

二、B端產品的全局框架拆解

雖然前面舉例的都是軟件案例，但只要仔細留意，你們就會發(fā)現網頁端管理系統(tǒng)的操作框架和一般軟件別無二致。只不過相比較五花八門的專業(yè)軟件來說，B 端管理系統(tǒng)的操作框架模式經過了長期的演化形成了固定的幾種套路。所以網上找到的管理界面案例，看起來只是圍繞幾個固定的布局翻來覆去的改顏色和圖標。

雖然它們看起來都很像，但依舊包含很多交互細節(jié)是需要設計師留意和制定的，不是簡單照搬就能設計出符合項目需要的全局框架。

所以，交互的全局框架到底怎么設計？

它不是一個個體，而是一個由多個組件、頁面類型、適配方式組成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它們的基本特點。

1. 全局框架中的組件

在全局框架的范疇中，包含的組件模塊類型可以分成兩個大類，全局組件和浮層元素。

全局組件是指在項目多數頁面中都會存在并進行交互的組件，功能往往和當前頁面沒有直接聯系，比如路徑跳轉、色彩切換、快捷操作等。

而包含的浮層元素，本質上也是全局組件，只是它們的共性是不會默認展示，需要被特定條件觸發(fā)才能被感知。比如斷網提示、刪除確認、側邊抽屜等都是全局化的浮層要素，也是需要在前期做好規(guī)劃的內容。

下面就針對這個兩種類型的組件一一展開解釋。

（1）全局組件

a. 導航欄

導航欄不僅僅是 B 端管理系統(tǒng)，也是網站設計中最重要的組件。優(yōu)秀的導航欄可以清晰的展示項目的頁面層級結構，幫助用戶高效的訪問目標頁面。全局框架制定的一步，就是根據項目的具體情況，選擇合適的導航類型。

導航欄主要使用上方、左側、混合型三種布局形式：

1. 上方導航：適合選項內容較少，預留更多橫向空間內容區(qū)域。
2. 左側導航：適合選項、層級較多的情況，方便折疊和上下滾動。
3. 混合導航：適合需要有效區(qū)分不同功能區(qū)塊的場景。

確定導航欄的類型，還需要確定導航的操作邏輯，包含幾級菜單，默認、展開、選中、關閉的交互。

b. 頂部欄

除了導航外，另一個基本必備的組件，就是頂部欄，除了放最基礎的用戶和設置選項外，它的角色定位要根據需求決定，最常見的包含下方幾種：

• 標題欄：主要用來展示頁面標題、副標題，或者面包屑控件。
• 工具欄：包含比較多的操作要素，如搜索、新增、邀請、消息管理等。
• 菜單欄：包含較多針對當前頁面/模塊的菜單選項和內容切換操作。

當然，以上幾種情況并不是絕對的。設計師需要根據項目的實際需求出發(fā)，去梳理項目包含哪些全局控件或操作，然后再決定如何分配到導航或者頂部菜單上，而不是先定義菜單的類型再往里面填內容和字段。

c. 頁面標簽欄

頁面標簽欄是一個類似瀏覽器標簽欄的組件，用來展示和關閉當前項目內打開的頁面。

標簽欄的使用在遠古時期的 B 端項目應用非常普遍，因為已經入土的 IE 瀏覽在那個年代是沒有頁面標簽功能的，導致開啟多個頁面的切換非常麻煩。

隨著瀏覽器標簽的普及，它已經不適用于多數 B 端項目，但依舊有一小部分項目是需要結合它的優(yōu)勢才可以更好的提升操作效率。

在一些需要持續(xù)打開和來回切換頁面的項目，如客服系統(tǒng)、財務審核、合同審批，因為打開新頁面僅僅需要加載內容區(qū)域而不是全局，沒有新建窗口后的空白頁面加載過程，就能帶來更好的體驗。

d. 內容模塊

內容模塊是用來容納和顯示頁面相關內容的模塊，這是個被很多人忽略的組件類型，包含模塊標題欄和操作區(qū)域。

一個成熟的 B 端項目會統(tǒng)一制定內容模塊的組件結構，保證大量頁面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。

如果只是簡單做個標題再統(tǒng)一間距參數，那么這個組件也就沒必要在這里提了，因為這僅僅是設計問題而不是交互問題。內容模塊的制定是為了盡可能考慮各種內容場景，并進行統(tǒng)一處理。

例如要應用一級分頁標簽、多層級分頁標簽、操作按鈕、內容折疊等。考慮的越全，后面處理起來越工整，否則就像下方淘寶賣家端千牛的案例一樣，損害用戶的體驗和操作效率。

內容模塊是很難在初期一口氣全部定完，不僅需要產品經理前期給出詳盡的需求和產品原型，還依賴設計師自身的經驗判斷。

所以，它的制定流程是在前期先根據掌握的信息制定出最初的版本，然后在完成后續(xù)的頁面中逐漸進行補充、優(yōu)化并替換。

作者：酸梅干超人；

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

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

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

B端設計規(guī)范如何正確搭建，好的設計規(guī)范對設計有什么幫助呢？設計夾老師在這篇文章中圍繞清晰、高效、友好、可控四個關鍵設計原則，帶你一步步建立起設計規(guī)范，推薦各位設計er和對交互產品、B端產品設計感興趣的童鞋閱讀。

Halo，這里是設計夾，今天為大家分享的是「B端設計」。B端設計離不開設計規(guī)范這個話題，而做好設計規(guī)范是一個龐大復雜工程，很多人對這些處于一知半解狀態(tài)。在這個系列文章里通過結合平時的項目案例來談談自己對B端設計規(guī)范的一些理解，希望可以帶來一些啟發(fā)。

本篇先談談設計規(guī)范制作的指導思想–設計原則，后續(xù)文章再展開講一下常見各種組件的設計規(guī)范。

一、設計規(guī)范作用

設計規(guī)范作為B端設計中非常重要的一環(huán)，它的作用主要體現在以下三個方面：

在日常工作中，當項目組收到一個新的需求時，如果已經具備了成熟的設計規(guī)范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：

二、設計原則

通過前面內容我們知道了設計規(guī)范對于產品設計意義重大，那么制定設計規(guī)范制定依據又是什么呢？這里就要引出設計原則這個話題，設計原則是設計規(guī)范的總綱領，所有的設計規(guī)范都應當以設計原則為基準。設計原則主要包含以下內容：

接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。

(一) 清晰

清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復四個方面。

1.對比

對比是指界面中為了區(qū)分信息層級，強化元素對比度，使用的很常見的一種手段。例如，下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕；通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關鍵文字信息。

2.親密

如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。

3.對齊

在界面設計中，將元素進行對齊，既符合了用戶的認知特點(我們往往傾向使知覺對象的直線延續(xù)還是直線，曲線延續(xù)還是曲線)，也能引導用戶視覺流，讓用戶更流暢地接收信息。

4.重復

重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯性。

(二) 高效

高效原則體現在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產品操作更加便捷；交互體驗與內容更加輕量和簡化；以及產品風格保持一致。下面結合常見案例說明如何應用這一原則。

1.合理利用拖拽–便捷、輕量

在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。

2.盡量減少不必要的跳轉–便捷、輕量

用戶操作過程盡量減少跳轉，以實現交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡…依次類推(優(yōu)先級從高到低：原位＞展開收起＞氣泡＞彈窗＞抽屜＞新頁面)

3.放大點擊熱區(qū)–便捷

放大可點擊按鈕熱區(qū)，相對于較小點擊熱區(qū)，具備更絲滑操作體驗。

4.懸停即現–輕量

利用懸停即現，避免信息過于重復啰嗦，簡化頁面提高閱讀體驗。

5.折疊次要功能–簡化

頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內容簡潔。

6.統(tǒng)一樣式–一致

一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式，可有降低用戶學習成本與企業(yè)開發(fā)成本。

(三) 友好

友好原則應貫穿用戶操作前，操作中及操作后三個階段，給予用戶及時反饋與幫助。

1.操作前

在用戶操作前給到合適的引導與幫助，有效減少用戶迷茫感。

2.操作中

通過交互效果及頁面樣式讓用戶可以清晰感知到自己當前操作。

3.操作后

利用界面中元素變化清晰直觀展示當前的狀態(tài)。

(四) 可控

可控主要體現在自由和導航兩個方面。

1.自由

自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。

2.導航

導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。

最后

通過本篇內容我們大概知道了制作設計規(guī)范主要方向，那么具體到每個組件上，我們該如何去設計呢？后續(xù)篇章將細分聊聊如何去設計「B端常見組件」。

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

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

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

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

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

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

• 文本信息左對齊，因為現代人的閱讀方式習慣從左到右，符合正常心智；
• 數據信息右對齊，方便數字大小的直觀對比；
• 內容寬度固定居中對齊，更好的信息呈現及表格空間的節(jié)省；
• 表頭與信息內容對齊方式一致，一致性以達到簡化，降低視覺噪音。

2. 表格列數與固定列

默認展示的列數為3-8列，如果需要展示更多列數，則需要優(yōu)先固定展示重要列，其余的列的內容會以滾動條滑動而展示出來。

有操作時需固定，操作項不固定時無法快速定位會降低操作效率；重要信息固定，有利于快速獲取重要的內容。

3. 表格列表的寬度

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

注：當第一列是序號或多選項時，列寬不需要太寬，這樣視覺不會顯得空洞。

4. 表頭每列標題文字字數

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

5. 長文本處理

表格內容較多且有長文本時，長文本縮略展示；表格內容較少時有長文本，長文本換行展示。

6. 空白數據填充「-」，避免留白產生疑慮

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

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

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

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

8. 數據升降樣式

給數據做升降區(qū)分可以快速判斷數據的趨勢，國內數據升圖標默認為紅色，降的為綠色。

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

全局操作為無需選擇數據內容即可進行的操作，常見的有新增、導入、篩選。

批量操作就是對表格的多行數據同時操作，常見的有導出、刪除。

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

10. 斑馬線

條紋顏色：標題背景色透明度60%左右；（條紋顏色視覺上應該比標題欄弱一點）鼠標hover顏色：主題色透明度10%。

二、B端表格交互整理

1. 固定表頭，一目了然

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

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

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

可以讓無序信息內容進行有序排列，排序分為升序和降序，一般用在數據、時間、數量上。

3. 調整列寬度，查看完整數據

允許調整列的寬度來查看更加完整的縮略數據。被截斷的數據，默認支持鼠標懸停時瀏覽器自帶title顯示完整數據。

4. 水平滾動，固定首尾列

呈現大型數據集時，水平滾動是不可避免的，通過橫向滾動查看其它數據。將首列進行固定（若包含勾選操作，則一起固定），以便用戶將數據與對象進行對應。

5. 分頁固定

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

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

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

本文就來詳細分析下這兩個組件的區(qū)別和聯系，幫助你做好應用。

一、氣泡卡片  Popover

氣泡卡片（Popover）是當用戶點擊 / 鼠標移入元素時，就會彈出氣泡式的卡片浮層。當對于某個元素有更多的解釋性描述和相關操作時，這些內容可以收納到元素的氣泡卡片中，根據用戶的操作行為進行展現。

其用法特征是：

1. 用戶可以在浮層卡片上進行相關操作，也即氣泡卡片可以并需要承載更復雜的內容和交互功能。

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

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

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

二、文字氣泡  Tooltips

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

其用法特征是：

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

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

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

三、使用建議

1. 關于使用場景

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

2. 關于組件樣式

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

其實這兩個組件的背景顏色上的差異并不是重點，因為這兩個組件都可以使用其他顏色（比如帶有透明度的品牌色）做背景底色。顏色并不具備唯一標準。AntD 就提供了多種顏色的文字氣泡樣式：

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

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

面對復雜多樣的業(yè)務需求，我們更應該學會：在理解業(yè)務需求的基礎上，合理調整組件的使用方式和樣式。

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

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

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

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

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

一、內容的載體形式

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

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

不管是哪種，本質上都需要瀏覽器重新加載新的頁面。對于一般的企業(yè)官網、新聞網站來說，這種加載的模式沒有太大的問題，因為操作頻次相對適中，用戶中間會有比較長的時間停頓下來查看頁面的內容信息。

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

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

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

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

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

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

所以，在B端項目中，我們不再是只有重載網頁一個選項，而有了其它的選擇，如下圖所示。

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

二、浮層的使用解析

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

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

浮層并不是由內容的多和少決定的，復雜的浮層可以包含非常多的交互選項和內容信息，導致我們很容易和下方解釋的彈窗搞混。

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

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

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

三、彈窗的使用解析

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

而高級的彈窗，則類似下方案例，約等于打開一個獨立的網頁。

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

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

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

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

因為彈窗主要以模態(tài) （Modal，后方有黑色遮罩）居中顯示，通過深色蒙版進行前后隔斷，凸顯彈窗區(qū)域，意味著我們強制讓用戶關注眼前的信息和任務。

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

四、抽屜的使用解析

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

抽屜本身的特征包含懸浮屬性，覆蓋在原頁面之上。而我們常見的側邊欄、側邊菜單并不能和抽屜畫上等號，因為他們會占用畫布的實際顯示區(qū)域，和原有內容同層。

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

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

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

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

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

所以，如果不想通過新頁面打開的列表詳情內容，且不是強制要求用戶聚焦的任務，就可以使用抽屜的形式展現。

五、結尾

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

如果有關于這部分的實際項目疑問，也可以在下方留言。

我們下篇再見～

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

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

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

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

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

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

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

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

設計思路

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

需求方：我要一個這么大的彈窗！好讓信息呈現更全面！

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

什么是B端產品經理？和C端產品經理有什么區(qū)別？

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

查看詳情 >

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

2.確定彈窗彈窗尺寸

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

當原因個數在30個以下時：

若不同寬度時，都選擇第一個處置原因，根據交互方法論–菲茨定律，指點設備到達目標的與兩個因素有關：（1）設備當前位置和目標位置的距離（D）。距離越長，所用時間越長；（2）目標的大小（S）。目標越大，所用時間越短。

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

另外，當原因個數10個以內時，可見此時彈窗寬度過寬，導致空白區(qū)域過大。

當原因個數在30個以下時，操作效率評分：

1200px ????

800px ??????

600px ??????

當超過100個原因個數時：1200px 一屏內展示完全，不需要滾屏滑動；800px 可在兩屏內展示完全，需要滾屏滑動；600px 超出兩屏展示才可展示完全，需要滾屏滑動。

當原因個數超過100時，操作效率評分：

1200px ??????

800px ??????

600px ????

適配性層面：

根據市面主流屏幕分辨率尺寸調研：

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

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

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

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

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

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

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

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

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

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

01 深入業(yè)務前言，洞見用戶痛點，錨定設計方向

項目伊始，我們即對58招聘B端產品的現有用戶展開了全面且深入的調研行動。

我們深知，唯有精準洞悉用戶需求與痛點，方能打造出契合用戶期望的產品。

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

在調研過程中，一系列影響用戶體驗的關鍵問題浮出水面。

其中，操作繁瑣成為用戶反饋最為突出的問題。眾多用戶抱怨，在使用B端產品時，完成諸如客戶認證、發(fā)布職位、篩選簡歷等簡單任務，往往需歷經多個復雜步驟。

做交互設計10年，我為何轉崗到產品經理？

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

查看詳情 >

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

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

B端產品中的專業(yè)術語和復雜表述，對于非專業(yè)用戶而言，仿若天書，極大地增加了學習成本，甚至可能導致誤解和誤操作，嚴重損害了用戶體驗。

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

基于此，我們決定從這三個層面入手，重塑設計思路，以提升用戶體驗。

02 解構問題根源，重構設計理念之維

在扎實調研的基礎上，我們對問題進行了抽絲剝繭般的分析。

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

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

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

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

03 以用戶為中心，雕琢極致體驗之境

基于對問題的深度剖析，我們開啟了具體的設計工作。

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

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

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

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

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

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

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

設計完成后，項目進入實施階段。

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

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

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

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

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

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

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

四、愉悅

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

這種轉變就像從”需要一臺電腦處理工作”到”渴望一個能提供陪伴的機器人助手”——本質是從單純的功能需求升級為情感連接。

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

愉悅-人機工學

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

愉悅-情感化設計

讓冰冷的工具性產品因為材質的改變而富有溫度，讓設備的立桿因為角度的改變而變得有儀式感和尊重感，以人為本的情感的設計賦予產品價值，形成用戶對品牌的認知性與認可度。

愉悅-價值認同

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

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

五、隱私

在隱私性設計上應考量如下維度：

如何定義B端產品及B端產品經理方法論

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

查看詳情 >

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

策略-隱私保護不是成本負擔，而是產品核心競爭力。

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

六、多感官

多感官-光響應

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

多感官-聲音識別

聲音的反饋能夠在恰當的場景給予用戶明確的指向和好的用戶體驗，同時也能很好得傳達出品牌和價值主張，汽車關車門的聲音是感官設計方法中最著名和最常用的例子，許多頂級汽車品牌都有獨立的車門開發(fā)團隊，例如梅賽德斯 SUV 的車門被調教得聽起來更重，以傳達它們的堅固性。

七、產品細節(jié)

色彩（Color）

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

材質（Material）

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

工藝處理&圖案（Finish）

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

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

2.肌理圖案應選擇低調克制的圖形，以功能性為導向，例如在關鍵物理交互點上給予適當的觸感引導或輔助。

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

小結

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

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

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

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

很長一段時間我都覺得做B端的中臺時間沒什么技術含量，不就是第三方的組件，拼積木一樣，拼接就好，甚至很多團隊也是這么想的，早期很多的中臺都沒有設計師；

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

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

下面我就來總結一下我調研的這些側邊的設計分類及設計規(guī)則。

一、B端側邊欄的設計分類

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

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

B端產品經理的能力模型與學習提升

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

查看詳情 >

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

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

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

按結構層級分類

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

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

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

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

按交互模式分類

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

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

二、B端側邊欄的設計規(guī)則

側邊欄設計需平衡功能性與視覺體驗，核心規(guī)則如下：

視覺對比與層級劃分

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

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

圖標與交互細節(jié)

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

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

拓展性與一致性

響應式適配：窄屏下自動切換為圖標模式，確保移動端可用性（如飛書后臺的側邊欄收縮功能）

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

業(yè)務導向的優(yōu)先級

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

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

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

三、典型案例解析

飛書：平鋪式動態(tài)導航

設計亮點：頂部導航進行功能入口切換，左側平鋪核心功能，圖標與文字比例均衡；通過級分類提升信息層級

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

小鵝通：混合式寬欄導航

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

適用場景：復雜業(yè)務，需支持多業(yè)務線交叉跳轉

千牛商家后臺：多層級側邊欄

設計亮點：分兩欄導航，窄屏下收縮為圖標或者圖標+簡短文字；第二欄按照層級排列，客一級或者多級。

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

微贊直播：可自定義導航

設計亮點：可自定義導航，包含排版、顏色。相對來說體驗感更加，不過對應屏幕自適應要求更高。

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

老版設計

新版設計

Ant Design Pro：規(guī)范驅動的側邊欄

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

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

四、總結

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

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

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

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

對于 B 端產品而言，我們經常會和顏色進行斗爭。

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

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

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

不知道各位同學是否遇到這種情況，當你在調整顏色時，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個顏色時，也茫然無措，這時候的你作何感想？

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

B端究竟需要什么樣的產品經理？

B端產品經理都是以提升供應側的工作效率為目的，所以B端需求主要是以業(yè)務問題為導向。 這個是B端產品比較重要的一點，B端產品是服務于一個主體 ...

查看詳情 >

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

一、什么是色彩空間？

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

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

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

色彩空間其實很簡單。因為我們需要使用顏色，且不同人群對顏色的需求不同，所以顏色的排列方式會存在差異。

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

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

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

• 設計軟件當中的色彩空間：以 RGB、HSB、HCT 為主，主要是計算機識別顏色顏色，調整顏色的重要方式，在電腦軟件當中起到重要作用。
• 屏幕顯示當中的色彩空間：以 Adobe RGB、Display P3、sRGB 為主，主要是能準確展示屏幕當中的各種顏色。

在我們細致講解色彩空間的部分時，我們先來了解三個重要的概念。

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

二、色彩空間的類型

1. RGB  色彩空間

RGB是顯示器當中的顏色基礎。

比如在現實世界當中，我們將手機屏幕進行放大，你會發(fā)現屏幕都是由紅綠藍三個燈管所組成的。

而 RGB 的色彩模式就是模擬現實世界當中的屏幕顯示原理，將燈光照射的邏輯在設計軟件當中進行復現，因此在 RGB 的調色盤中，就會分別包含三個輸入框，這便是 紅綠藍。

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

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

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

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

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

因為它嫌棄每個輸入框都會出現 255（255,255,255 白色）實在太長，不利于我們在日常工作當中進行記錄。

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

因為 Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個字符所對應的就是 紅、綠、藍。

比如我們剛才提到的這個藍色，在 RGB 空間當中為(0,86,255) ，Hex 則是#0056FF，也是一一對應關系。

RGB 聽上去似乎很美好，但問題在于兩點：

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

比如我目前是紅色，那我要調整到紫色，應該輸入多少值呢？其實我們很難進行一個準確的判斷。

2.顏色信息與亮度信息的數據混合：導致我們很難對于有一個準確的判斷，比如在 RGB 相同的數值當中，明顯會感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調色時，顏色一致性偏差較大。

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

2. HSB 色彩空間

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

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

同時飽和度與亮度都是以百分比的形式進行呈現，飽和度越低，相對應就會給顏色增加白色，使其更灰；亮度越低，就會增加對應的黑色，讓其更深。

由于 HSB 的色彩空間的分類模式非常有利于我們進行顏色的調整，因此我們在日常調色時其實會經常用到。

比如日常工作當中，假設我們需要設計一組圖標，根據 HSB 顏色的基本原理，我們其實只需要調整不同的色相，就能夠得到不同的圖標顏色。

但… 顏色上依舊會存在問題。

你會發(fā)現當我們調整了色相過后，整體的顏色并沒有形成統(tǒng)一。原因在于我們人眼對于 黃綠色的感知 會和紅色、藍色有所不同，我們通常在看黃綠色時會更為刺眼，因此在設計層面上需要單獨調整。

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

3. HCT 色彩空間

HCT 首先會將顏色當中的 感知度、亮度 進行結合，對之前的 HSB 重新調整。

在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調

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

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

那為什么 Google 想要做 HCT？

其實因為 Material Design 當中會強調設計的一致性和靈活性，在功能設計上，需要增加一個根據屏幕當中的圖標生成與其風格一致的壁紙。

但在之前無論什么樣的色彩空間都不能準確的還原顏色。現在就提供了一個可靠的色彩基礎，能夠讓我們在不同的設備、平臺和應用場景下，都能夠生成具有一致性的色彩方案，同時也能更好地適應各種主題和風格的變化，如亮色模式和暗色模式的切換。

比如，還是以上面這個案例，我們使用 HSB 與 HCT 對顏色進行的色相的調整，那得到的結果明顯會發(fā)現 HCT 會更加準確。

那 HCT 就真那么完美無瑕？

其實也不然，因為 HCT 色彩空間出現時間較晚，所以在使用上也會有很多問題。

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

三、色彩空間如何應用？

這么深奧的色彩空間，到底要如何使用？

1. 以 HSB 的為主

因為 HSB 是設計師最容易理解的色彩空間，因此我們在調色時需要根據數值來進行顏色的調教。

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

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

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

2. 色彩更具數據化

因為每一個屏幕所顯示的顏色其實都不太相同，因此色彩調整時要多看數據，觀察數據之間的對比變化。

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

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

緊接著確定飽和度，因為要偏藍色，但不宜過多，因此整體的數值只會在 1-5 之前浮動；

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

3. HCT 輔助顏色判斷

其次在判斷顏色時，也會更具章法。

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

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

4. 引入 HCT 完善工作流

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

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

四、屏幕顯示的色彩空間

對于屏幕顯示的色彩空間而言，有部分內容我們也是要重點關注。比如在 B 端設計當中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進行判斷。

1. sRGB 色彩空間

sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發(fā)的一種標準色彩空間，目的是提供一種通用的色彩標準，使得在不同的設備（如顯示器、打印機等）之間能夠實現相對一致的色彩顯示。

對于 sRGB 來說，它是我們作為設計師最為重要的屏幕顯示色彩空間，因為它通用性強，所以大多數普通的電腦顯示器、網頁瀏覽器等都默認采用 sRGB 色彩空間，這樣在瀏覽網頁、查看普通的數碼照片時，可以獲得比較穩(wěn)定的色彩效果。

所以我們在做設計時，通常都會將屏幕與軟件，都調整的 sRGB 的空間當中，這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費級顯示器設備。它在 DCI – P3 的基礎上進行了一些調整，以適應顯示器的特性。

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

最后，我們總結一下：

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