本文將深入探討B(tài)端產(chǎn)品經(jīng)理如何通過精細(xì)化的管理方法和實(shí)戰(zhàn)策略，實(shí)現(xiàn)功能從無到有、從有到優(yōu)的全過程把控，助力企業(yè)在復(fù)雜的業(yè)務(wù)環(huán)境中脫穎而出。

提升用戶體驗(yàn)，打造便捷交互流程

增強(qiáng)視覺吸引力，塑造獨(dú)特品牌形象

引導(dǎo)用戶行為，促進(jìn)業(yè)務(wù)目標(biāo)達(dá)成

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

這陣子想了想關(guān)于交互知識(shí)的分享，還是應(yīng)該要拓展成一整個(gè)系列的內(nèi)容，包含各類組件、控件和行為的解析。

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

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

交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過程，賬號(hào)怎么填寫，表單怎么導(dǎo)出，數(shù)據(jù)怎么篩選，列表怎么排序等等……針對(duì)每個(gè)功能的使用方式，都可以花很長(zhǎng)的時(shí)間去考慮其合理性。一個(gè)項(xiàng)目的交互，就是這個(gè)項(xiàng)目所有功能使用方式的總和。

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

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

所以，理解項(xiàng)目交互設(shè)計(jì)的正確思路，就要知道在項(xiàng)目中有哪些交互內(nèi)容，它們對(duì)應(yīng)的層級(jí)和設(shè)計(jì)對(duì)象是什么。

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

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

我們先圍繞在全局框架這個(gè)類型進(jìn)行解釋，什么是項(xiàng)目的主要模塊排版和布局，以及為什么全局框架可以決定產(chǎn)品的主要使用依據(jù)和步驟。

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

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

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

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

而在 Affinity 中，軟件首選項(xiàng)設(shè)置就沒有使用左側(cè)導(dǎo)航，而是類似 Mac 通用設(shè)置的快速入口分層模式，用慣了 Adobe 再換這個(gè)就會(huì)有股說不出的別扭。

可能有同學(xué)有疑問，Photoshop 并不是只有這幾種窗口，其它窗口不就樣式和上面這類不一樣嘛？那是因?yàn)榇翱诘目蚣芸隙ㄊ且紤]功能和場(chǎng)景的，即使使用了多種窗口類型，那也是有規(guī)律的應(yīng)用在操作方式相近的場(chǎng)景中。

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

PhotoShop 作為平面領(lǐng)域中的獨(dú)角獸，直接影響了絕大多數(shù)同類設(shè)計(jì)軟件的框架結(jié)構(gòu)和布局方法。因?yàn)榻^大多數(shù)設(shè)計(jì)師學(xué)習(xí)設(shè)計(jì)的入門軟件都是 PS，想要讓用戶更快上手自己的軟件，那就應(yīng)該順著他們已經(jīng)習(xí)慣的方式來。

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

而當(dāng)實(shí)際功能和 UI 設(shè)計(jì)軟件高度相似的其它幾個(gè) “辦公應(yīng)用” 結(jié)構(gòu)框架不同時(shí)，上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint，先學(xué)了設(shè)計(jì)軟件再去學(xué)這幾個(gè)軟件的同學(xué)一定深有感觸。

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

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

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

二、B端產(chǎn)品的全局框架拆解

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

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

所以，交互的全局框架到底怎么設(shè)計(jì)？

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

1. 全局框架中的組件

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

全局組件是指在項(xiàng)目多數(shù)頁(yè)面中都會(huì)存在并進(jìn)行交互的組件，功能往往和當(dāng)前頁(yè)面沒有直接聯(lián)系，比如路徑跳轉(zhuǎn)、色彩切換、快捷操作等。

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

下面就針對(duì)這個(gè)兩種類型的組件一一展開解釋。

（1）全局組件

a. 導(dǎo)航欄

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

導(dǎo)航欄主要使用上方、左側(cè)、混合型三種布局形式：

1. 上方導(dǎo)航：適合選項(xiàng)內(nèi)容較少，預(yù)留更多橫向空間內(nèi)容區(qū)域。
2. 左側(cè)導(dǎo)航：適合選項(xiàng)、層級(jí)較多的情況，方便折疊和上下滾動(dòng)。
3. 混合導(dǎo)航：適合需要有效區(qū)分不同功能區(qū)塊的場(chǎng)景。

確定導(dǎo)航欄的類型，還需要確定導(dǎo)航的操作邏輯，包含幾級(jí)菜單，默認(rèn)、展開、選中、關(guān)閉的交互。

b. 頂部欄

除了導(dǎo)航外，另一個(gè)基本必備的組件，就是頂部欄，除了放最基礎(chǔ)的用戶和設(shè)置選項(xiàng)外，它的角色定位要根據(jù)需求決定，最常見的包含下方幾種：

• 標(biāo)題欄：主要用來展示頁(yè)面標(biāo)題、副標(biāo)題，或者面包屑控件。
• 工具欄：包含比較多的操作要素，如搜索、新增、邀請(qǐng)、消息管理等。
• 菜單欄：包含較多針對(duì)當(dāng)前頁(yè)面/模塊的菜單選項(xiàng)和內(nèi)容切換操作。

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

c. 頁(yè)面標(biāo)簽欄

頁(yè)面標(biāo)簽欄是一個(gè)類似瀏覽器標(biāo)簽欄的組件，用來展示和關(guān)閉當(dāng)前項(xiàng)目?jī)?nèi)打開的頁(yè)面。

標(biāo)簽欄的使用在遠(yuǎn)古時(shí)期的 B 端項(xiàng)目應(yīng)用非常普遍，因?yàn)橐呀?jīng)入土的 IE 瀏覽在那個(gè)年代是沒有頁(yè)面標(biāo)簽功能的，導(dǎo)致開啟多個(gè)頁(yè)面的切換非常麻煩。

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

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

d. 內(nèi)容模塊

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

一個(gè)成熟的 B 端項(xiàng)目會(huì)統(tǒng)一制定內(nèi)容模塊的組件結(jié)構(gòu)，保證大量頁(yè)面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。

如果只是簡(jiǎn)單做個(gè)標(biāo)題再統(tǒng)一間距參數(shù)，那么這個(gè)組件也就沒必要在這里提了，因?yàn)檫@僅僅是設(shè)計(jì)問題而不是交互問題。內(nèi)容模塊的制定是為了盡可能考慮各種內(nèi)容場(chǎng)景，并進(jìn)行統(tǒng)一處理。

例如要應(yīng)用一級(jí)分頁(yè)標(biāo)簽、多層級(jí)分頁(yè)標(biāo)簽、操作按鈕、內(nèi)容折疊等?？紤]的越全，后面處理起來越工整，否則就像下方淘寶賣家端千牛的案例一樣，損害用戶的體驗(yàn)和操作效率。

內(nèi)容模塊是很難在初期一口氣全部定完，不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型，還依賴設(shè)計(jì)師自身的經(jīng)驗(yàn)判斷。

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

作者：酸梅干超人；

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

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

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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è)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

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

本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想–設(shè)計(jì)原則，后續(xù)文章再展開講一下常見各種組件的設(shè)計(jì)規(guī)范。

一、設(shè)計(jì)規(guī)范作用

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

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

二、設(shè)計(jì)原則

通過前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對(duì)于產(chǎn)品設(shè)計(jì)意義重大，那么制定設(shè)計(jì)規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計(jì)原則這個(gè)話題，設(shè)計(jì)原則是設(shè)計(jì)規(guī)范的總綱領(lǐng)，所有的設(shè)計(jì)規(guī)范都應(yīng)當(dāng)以設(shè)計(jì)原則為基準(zhǔn)。設(shè)計(jì)原則主要包含以下內(nèi)容：

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

(一) 清晰

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

1.對(duì)比

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

2.親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺單元；反之，距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然。

3.對(duì)齊

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

4.重復(fù)

重復(fù)是指相同的元素在項(xiàng)目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時(shí)提高這些元素之間的關(guān)聯(lián)性。

(二) 高效

高效原則體現(xiàn)在便捷、輕量、簡(jiǎn)化、一致幾個(gè)方面，目的是通過合理的方式讓產(chǎn)品操作更加便捷；交互體驗(yàn)與內(nèi)容更加輕量和簡(jiǎn)化；以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合常見案例說明如何應(yīng)用這一原則。

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

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

2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量

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

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

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

4.懸停即現(xiàn)–輕量

利用懸停即現(xiàn)，避免信息過于重復(fù)啰嗦，簡(jiǎn)化頁(yè)面提高閱讀體驗(yàn)。

5.折疊次要功能–簡(jiǎn)化

頁(yè)面功能按鈕過多時(shí)，可將次要按鈕收納到一起，點(diǎn)擊時(shí)再展開，外面只展示高頻操作或重要按鈕，保證頁(yè)面內(nèi)容簡(jiǎn)潔。

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

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

(三) 友好

友好原則應(yīng)貫穿用戶操作前，操作中及操作后三個(gè)階段，給予用戶及時(shí)反饋與幫助。

1.操作前

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

2.操作中

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

3.操作后

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

(四) 可控

可控主要體現(xiàn)在自由和導(dǎo)航兩個(gè)方面。

1.自由

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

2.導(dǎo)航

導(dǎo)航是指用戶隨時(shí)知曉當(dāng)前所在位置，而且可以利用導(dǎo)航隨意到達(dá)目標(biāo)頁(yè)面。

最后

通過本篇內(nèi)容我們大概知道了制作設(shè)計(jì)規(guī)范主要方向，那么具體到每個(gè)組件上，我們?cè)撊绾稳ピO(shè)計(jì)呢？后續(xù)篇章將細(xì)分聊聊如何去設(shè)計(jì)「B端常見組件」。

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

表格作為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. 對(duì)齊，高效的信息獲取方式

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

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

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ù)谝涣惺切蛱?hào)或多選項(xiàng)時(shí)，列寬不需要太寬，這樣視覺不會(huì)顯得空洞。

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

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

5. 長(zhǎng)文本處理

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

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í)，將操作低頻折疊收起，可以幫助頁(yè)面突出更加重要的信息，減輕空間壓力，減少干擾。

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

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

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

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

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

全局和批量都不屬于單個(gè)對(duì)象因此需要放在表格外，操作具體的位置排放根據(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ù)與對(duì)象進(jìn)行對(duì)應(yīng)。

5. 分頁(yè)固定

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

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

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

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

一、氣泡卡片  Popover

氣泡卡片（Popover）是當(dāng)用戶點(diǎn)擊 / 鼠標(biāo)移入元素時(shí)，就會(huì)彈出氣泡式的卡片浮層。當(dāng)對(duì)于某個(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）是相對(duì)簡(jiǎn)單的文字提示氣泡框。用戶使用鼠標(biāo)移入元素后顯示提示，移出后提示消失。

其用法特征是：

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

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

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

三、使用建議

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

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

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

有同學(xué)看過 Ant Design 組件庫(kù)提供的組件樣例，會(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)用場(chǎng)景解釋得再全面，在使用時(shí)也總會(huì)出現(xiàn)一些特殊的業(yè)務(wù)需求和應(yīng)用場(chǎng)景無法嚴(yán)格按照規(guī)范來執(zhí)行。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、浮層的使用解析

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

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

浮層并不是由內(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è)新頁(yè)面展示的地步（如搜索建議面板），且和觸發(fā)它的控件有較強(qiáng)的聯(lián)系，就可以考慮使用浮層來展示。

三、彈窗的使用解析

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

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

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

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

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

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

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

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

四、抽屜的使用解析

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

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

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

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

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

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

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

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

五、結(jié)尾

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

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

我們下篇再見～

作者：酸梅干超人；公眾號(hào)：超人的電話亭

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

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