表格是B端產(chǎn)品中出現(xiàn)最高頻的模塊之一，我們認(rèn)為良好呈現(xiàn)信息的表格應(yīng)當(dāng)做到疏密適度、高效掃視、精簡克制。

前言

表格作為組織整理數(shù)據(jù)的手段，可以有效的向用戶展示數(shù)據(jù)信息，是B端產(chǎn)品中出現(xiàn)最高頻的模塊之一。

下圖為典型的B端表格示例：

1、定義合理的表格行高

a、行高模數(shù)設(shè)定

在具體設(shè)定表格行高時，由于表格中以文字信息為主，我認(rèn)為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設(shè)定為字號的1.2~1.8倍，文字與分割線間距離可以設(shè)定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發(fā)同學(xué)寫代碼時的習(xí)慣（多行行高同理去設(shè)定）。

b、橫向『偷取』屏幕外空間、行高模數(shù)設(shè)定

當(dāng)壓縮列寬也無法在有限空間內(nèi)展示大量的數(shù)據(jù)指標(biāo)列時，我們可以借助橫向滾動來『偷取』屏幕外更多空間。橫向滾動需用戶拖動滾動條進(jìn)行瀏覽，有一定操作成本，所以要結(jié)合業(yè)務(wù)實(shí)際情況選用是否利用屏幕外橫向空間。

隨著行和列的增加，用戶的瞬時記憶會達(dá)到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內(nèi)的數(shù)據(jù)，防止遺忘某列數(shù)據(jù)的意義。因而當(dāng)表格數(shù)據(jù)列較多橫向滾動時，建議為用戶固定重要信息列，如標(biāo)題列、操作列。同時用戶瀏覽表格時是符合F型掃視原則的，建議固定列顯示在表格左側(cè)，方便用戶從左至右瀏覽數(shù)據(jù)、從上至下對比數(shù)據(jù)時能夠清晰定位當(dāng)前所瀏覽數(shù)據(jù)的主體是什么，同時可根據(jù)需要快速發(fā)起操作。

同理，用戶拖拽縱向滾動條來閱讀數(shù)據(jù)時，可固定表格的表頭，幫助用戶在閱讀過程中清晰知曉單元格數(shù)據(jù)的意義。

c、用戶自定義展示信息

針對需展示大量數(shù)據(jù)的情景，我們除了【偷取】屏幕外空間外，可以根據(jù)B端產(chǎn)品提供的數(shù)據(jù)表格是覆蓋全部用戶角色的全量數(shù)據(jù)的特點(diǎn)，讓不同用戶角色來自定義想要瀏覽的信息，從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能，用戶可根據(jù)需要選擇展示的數(shù)據(jù)列，系統(tǒng)將在用戶完成選擇后，主動幫用戶保存自定義內(nèi)容，下次登錄后，表格依然按照用戶定義的數(shù)據(jù)來展示。

2、去除視覺雜音，強(qiáng)調(diào)對比關(guān)系

a、正確使用分割線，實(shí)現(xiàn)對表格行與列的強(qiáng)調(diào)

橫向分割線可強(qiáng)調(diào)行內(nèi)信息的連續(xù)性。垂直分割線在縮減元素之間的距離后也能區(qū)分不同元素，更好的強(qiáng)調(diào)縱向數(shù)據(jù)對比。但只要遵循良好的對齊方式，通常不展示縱向分割線，避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割，提升表格閱讀效率。

b、斑馬線作用有限

斑馬線即隔行（列）變色。它能讓行（列）間界限更為明顯，但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如針對不同類型的數(shù)據(jù)（如總和、平均值）使用不同底色來區(qū)分，可以更突出強(qiáng)調(diào)該數(shù)據(jù)。要注意的是，隔行（列）換色的兩種顏色不能反差過大，否則看來太“跳躍”。

對同一類數(shù)據(jù)而言，分割線就已經(jīng)能夠明顯區(qū)隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態(tài)，強(qiáng)化橫向?qū)б?，避免出現(xiàn)列數(shù)過多引起數(shù)據(jù)錯行的問題。

3、突顯重要內(nèi)容的視覺重量

前面我們提到表格呈現(xiàn)的數(shù)據(jù)信息除文本外，還有其它一些可視化數(shù)據(jù)?？梢暬环矫嫣嵘肆斜硪曈X表現(xiàn)力，增加差異化，另一方面讓內(nèi)容更加突出，提升閱讀效率。例如：數(shù)據(jù)列中數(shù)據(jù)異常時，最好可以醒目的形式突顯，讓用戶一進(jìn)入頁面就能快速注意到異常狀況。

對于表格行內(nèi)的操作我們也應(yīng)當(dāng)進(jìn)行優(yōu)先級排序，為用戶專門設(shè)置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關(guān)數(shù)據(jù)單元格中，用戶有訴求時hover對應(yīng)單元格即可快速發(fā)起操作。

b、隱藏輔助信息

表格中的有些數(shù)據(jù)指標(biāo)是綜合緯度的，當(dāng)用戶關(guān)注點(diǎn)定位于該指標(biāo)時，需要通過細(xì)分?jǐn)?shù)據(jù)來理解、分析。指標(biāo)的細(xì)分緯度信息雖能起到輔助用戶更好理解數(shù)據(jù)指標(biāo)的作用，但如果全部拿出來在表格列展示，會讓表格變得臃腫不易讀，此時可以考慮采取一定設(shè)計(jì)手段去隱藏這些信息，把觸發(fā)展示的自由度交給用戶，也更符合用戶逐級查看的場景。例如，百度搜索推廣平臺中關(guān)鍵詞列表中，質(zhì)量度指標(biāo)是由多條數(shù)據(jù)共同決定的，我們采用了將細(xì)分指標(biāo)聚合在氣泡卡片中，當(dāng)用戶HOVER質(zhì)量度得分?jǐn)?shù)據(jù)時展示出來。

再比如，有父子層級關(guān)系的數(shù)據(jù)，可以通過父子折疊表格將子信息默認(rèn)隱藏，用戶根據(jù)需要，去展開查看詳細(xì)的子信息。

2、設(shè)定折行與截?cái)嘁?guī)則

B 端業(yè)務(wù)的數(shù)據(jù)信息復(fù)雜多樣，信息內(nèi)容的長度高度是多樣不可控的，很多內(nèi)容會超出我們限定的最大列寬，最大列高，我們應(yīng)當(dāng)給出折行與截?cái)嘣瓌t去約束內(nèi)容的展示，而非總是為具體情況而做特殊設(shè)計(jì)，破壞體驗(yàn)的一致性。

截?cái)嗾坌性瓌t設(shè)定時要細(xì)分，不能簡單粗暴的一刀切，比如一行截?cái)噙@種，如日期、時間等固定格式內(nèi)容，拖動列寬后文字應(yīng)折行而非截?cái)嗾故?，避免影響用戶誤讀。再比如很多業(yè)務(wù)實(shí)體標(biāo)題字段是格式化的，即標(biāo)題前面部分可能都是一致的，這時候如果簡單的截?cái)?，用戶就需要逐一Hover才能找到定位到要找的數(shù)據(jù)。因而折行與截?cái)嘣瓌t，我們建議是給出三種：單行截?cái)?、雙行截?cái)嘁约白赃m應(yīng)截?cái)啵鶕?jù)具體業(yè)務(wù)情景選擇。

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

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

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

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

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

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

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

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

總的來說，所謂的感知性模式就是物體或者物件的一種外在的呈現(xiàn)而給人的感覺或者感受。例如同樣的一個電腦桌上都有電腦、鼠標(biāo)、或者其他的物件擺設(shè)，但根據(jù)不同人的使用給人的感覺是完全不同的，或是凌亂、或是整潔、或是簡約，而更直觀的差異可能來源于這些物件的樣式、材料、顏色、紋理的不同而傳遞出來的視覺感知，

如果沿用到互聯(lián)網(wǎng)方面的設(shè)計(jì)，那么感知性模式的例子可能包括：文字信息、版式、配色、布局、插圖、圖標(biāo)、形狀紋理、間距、交互或者動畫等等，這些都作為具體方式來表達(dá)感知性設(shè)計(jì)。

說到這里，你可能會認(rèn)為感知性設(shè)計(jì)是一個純粹的外在視覺表現(xiàn)，但想要完全的得到一些成效，更多需要把這個事情融入到品牌的核心中，隨著產(chǎn)品的發(fā)展而發(fā)展，進(jìn)而在眾多的同類此產(chǎn)品中脫穎而出。

感知性模式較強(qiáng)的產(chǎn)品例子

案例一：微信

微信作為一個超過十億用戶的產(chǎn)品，隨著版本的不斷迭代，功能也越來越強(qiáng)大，因此從產(chǎn)品體驗(yàn)上來說也可能會給人一種臃腫的感受。但微信整體的感知性模式的設(shè)計(jì)是非常清晰的，從桌面 APP 的 logo，再到內(nèi)頁呈現(xiàn)的圖標(biāo)、顏色、按鈕樣式、交互反饋等等的設(shè)計(jì)都是統(tǒng)一性很好的設(shè)計(jì)。

案例二：Instagram

Instagram 作為全球熱度最高的圖片分享社區(qū)，自始自終都有著非常明顯的感知性，整體 APP 的簡潔性設(shè)計(jì)讓用戶更加專注于內(nèi)容本身，似有似無的品牌藍(lán)色似乎已經(jīng)牢牢融入了用戶的大腦中，這種感知性無需被刻意放大，但就在潛移默化中用戶就能感受到。

案例三：抖音

作為目前國內(nèi)最熱的短視頻平臺，抖音的感知性模式已經(jīng)深入的印在用戶的腦里，我認(rèn)為抖音主要在以下三個方面讓用戶記住了 TA：1.品牌屬性，抖音的品牌屬性就是用最簡單的方式讓用戶記住了 ta，通過 APP圖標(biāo)、閃屏、發(fā)起按鈕的圖形及品牌色的串聯(lián)；2.內(nèi)容屬性，具有自己平臺氣質(zhì)的內(nèi)容特性，抖音在最早期主打的“潮酷”類的視頻讓它跟快手做了明確的區(qū)分；3.體驗(yàn)屬性，大膽的全屏滑動視頻交互很好的結(jié)合了手機(jī)的體驗(yàn)方式。

感知性模式的作用

1. 有助于品牌形象傳遞

在同一個領(lǐng)域中的產(chǎn)品，在功能上大多會具有一定的趨同性，而由于這幾年的扁平化風(fēng)格盛行，更把產(chǎn)品之間的類同性推向極致。因此更需要通過感知性模式的設(shè)計(jì)來進(jìn)行區(qū)分，這種區(qū)分不僅僅只是視覺上的差異，更多是來自于產(chǎn)品者對于自己產(chǎn)品方向的把控。

書中提到 Spotify 的例子，Spotify 給人感覺是溫暖的、私人的，雖然月活躍量已經(jīng)超過一億，但給用戶的感受仍然是獨(dú)特的，除了功能之外，主要在于整體的圖形樣式、顏色搭配（黑綠的品牌色比例把控）、交互中微妙而平靜的感覺，以及排版上傳遞出來的感受。

從上面這個案例來說，基礎(chǔ)體驗(yàn)是用戶值得參與的一個重要環(huán)節(jié)，但感知性模式的設(shè)計(jì)更多是來源于產(chǎn)品者想要給用戶傳遞什么樣的品牌性格或品牌核心，Spotify 的靜謐性及沉浸式體驗(yàn)，這是 Spotify 設(shè)計(jì)師想要傳遞出來的品牌核心

2. 感知性模式通過界面?zhèn)鬟f品牌

感性性模式的品牌傳遞主要是通過界面或者運(yùn)營調(diào)性來讓用戶得到感知，并且讓人記住。在界面上想要讓用戶記住我們的產(chǎn)品，更多的是需要思考三個關(guān)鍵點(diǎn)：設(shè)計(jì)的獨(dú)特性；設(shè)計(jì)的辨識性；設(shè)計(jì)的區(qū)分度。

設(shè)計(jì)的獨(dú)特性

設(shè)計(jì)的獨(dú)特性往往是通過我們界面的排版、圖標(biāo)、圖像、交互體驗(yàn)方式、交互措辭等等一系列的內(nèi)容來奠定。這些內(nèi)容我們常?？梢栽趪獾能浖锌吹胶芏嗖诲e的案例。

還是以 Instagram 作為案例來說，ins 風(fēng)的極簡設(shè)計(jì)是一種貫徹始終的獨(dú)特性存在，除了設(shè)計(jì)界面本身的研究之外，還在內(nèi)容上下足了功夫。以照片瀏覽來說，始終堅(jiān)持大圖的體驗(yàn)方式，保證一屏內(nèi)的沉浸度，而非為了效率，這與 Instagram 一直具有較高的照片質(zhì)量密不可分。

設(shè)計(jì)的辨識性

辨識性的可打磨方式有很多種，以圖標(biāo)作為一個基礎(chǔ)的案例來說，我們在設(shè)計(jì)圖標(biāo)的時候是否有結(jié)合整體產(chǎn)品的性格去思考并且設(shè)計(jì)，并且深入打磨。簡單的區(qū)分，我們可以從風(fēng)格（例如：簡潔的、有趣的、硬朗的、柔軟的等等），更深入的內(nèi)容就是需要思考如何傳遞品牌感，以及將圖形與品牌理念、產(chǎn)品性格進(jìn)行結(jié)合，通過設(shè)計(jì)貫徹品牌辨識性。

以 YouTube 這個 APP 的圖標(biāo)作為案例，設(shè)計(jì)師在設(shè)計(jì)時更多是希望表達(dá)整體 APP 設(shè)計(jì)的簡潔性，弱化圖形對于內(nèi)容的影響，因此在整體堅(jiān)持了三個核心關(guān)鍵點(diǎn)：簡約、細(xì)線、普識。

設(shè)計(jì)的區(qū)分度

在目前趨同性的主潮流之下，如何把握好產(chǎn)品設(shè)計(jì)的區(qū)分度變得尤為關(guān)鍵，也就是說，當(dāng)用戶在看我們產(chǎn)品的時候會不會乍一眼認(rèn)為是另一個產(chǎn)品。區(qū)分度的把握往往來源于品牌對于顏色的選擇，我們在定義色調(diào)之前需要對主流競品做一個分析，從中找出屬于我們的區(qū)分度，并且盡量避免重合性。

以現(xiàn)在流行的電商 APP 為案例，很大電商平臺的設(shè)計(jì)大多類似，在品牌色的選擇上則尤為重要，因此需要盡量避免具有耦合性。

讓設(shè)計(jì)系統(tǒng)更加連貫

我們在產(chǎn)品設(shè)計(jì)中想要把所有的模塊或者組件做得一模一樣幾乎是不可能的，但我們可以利用感知性模式的設(shè)計(jì)進(jìn)行內(nèi)容模塊的滲透，讓用戶對于整體的感受感知是一致的。

以 material design 的設(shè)計(jì)系統(tǒng)為案例，他所確定的是一個規(guī)則，而并不是任何的模塊或者任何的圖標(biāo)都是一樣的、無差別的，如果都完全長得一樣會讓設(shè)計(jì)變得單調(diào)、無差異性，通過設(shè)計(jì)準(zhǔn)則來限定整體的圖形風(fēng)格，應(yīng)用在不同的位置讓用戶從視覺角度感知到風(fēng)格的一致性，這樣也可以讓整體的體驗(yàn)更連貫。

Material design 的設(shè)計(jì)準(zhǔn)則

富有表現(xiàn)力

為了突出 Material Theming 必須提供的功能，每個 Material 研究都表達(dá)了一個不同的品牌。

各種各樣的

為確保 material 主題化和組件滿足盡可能多的產(chǎn)品需求，material 研究代表了不同類型的產(chǎn)品。

基于現(xiàn)實(shí)

為了盡可能地復(fù)制真實(shí)產(chǎn)品，每項(xiàng)研究都會識別用戶、顯示功能用戶流并應(yīng)用現(xiàn)實(shí)世界的限制。

感知性模式的探索與思考

我們在日常設(shè)計(jì)功能性模塊更多的是考慮到用戶對于產(chǎn)品的體驗(yàn)感受，而感知性模塊則是我們想要用戶在這里獲得什么品牌感知，通過品牌結(jié)合視覺設(shè)計(jì)系統(tǒng)給用戶帶來產(chǎn)品獨(dú)特的性格及個性化氛圍。

對于探索感知性設(shè)計(jì)的方法也有很多，目前比較流行的技巧主要有：情緒板、樣式疊片、元素拼貼。無論是哪種方式，都沒有唯一的答案，更多是利用這些方法在不斷的嘗試中探索到屬于自我品牌的感知。

情緒板

情緒板是一種較為輕量的風(fēng)格探索方法，在這個過程中往往不需要花費(fèi)過多的精力，我們需要做的就是把統(tǒng)一或者接近類型的圖片進(jìn)行重新整合，得出我們想要表達(dá)的視覺感受即可。

情緒版屬于比較前期的視覺品牌調(diào)性探索，在整體的顏色、排版上也都可以利用情緒板來獲得初步的答案，如果想要再往深一步，可能則需要樣式疊片的方式。

樣式疊片

給予情緒板獲得的大致品牌方向之后，便可以利用樣式疊片的方式來進(jìn)行更精細(xì)化的探究，我們可以用一種或多種不同的樣式疊片來表達(dá)，但是希望在截取這些內(nèi)容的時候要記得保持控件、組件、顏色、字體等等內(nèi)容的一致性，避免差別性較大，形成不了統(tǒng)一的視覺系統(tǒng)。

元素拼貼

從書中講到的大體概念是：將界面元素等內(nèi)容拼貼在一起，從而達(dá)到設(shè)計(jì)稿初稿的雛形感受。這個方法可以比較敏捷的對需求方進(jìn)行試探，但相比上面 2 種方法需要花費(fèi)更多的時間及精力，同時這個方法出來的內(nèi)容也比較偏向高保真。

從表面上來看，這三種方法似乎都可以幫助我們更好的進(jìn)行設(shè)計(jì)，沒有太大的差異化，不過從本質(zhì)上來看，這三個方法影響的是我們設(shè)計(jì)初期輸出的保真程度，從情緒版到樣式疊片再到元素拼貼似乎是一個越來越保真的方式，我們可以選擇其中一種，或者 2 種結(jié)合來進(jìn)行表現(xiàn)。

平衡品牌性與一致性

過多的個性化設(shè)計(jì)，會削弱整體的品牌感，同樣，如果設(shè)計(jì)的內(nèi)容需要全部都一模一樣的規(guī)范，也會扼殺設(shè)計(jì)的品牌感的創(chuàng)造性。因此，在感知性設(shè)計(jì)的概念下，一致性設(shè)計(jì)不是一味的復(fù)用，不求變通，而是通過整體統(tǒng)一的理念，允許個性化設(shè)計(jì)的存在，這樣既滿足部分模塊的獨(dú)特視覺表現(xiàn)又并不影響品牌傳遞。

舉個例子

例如外面在設(shè)計(jì)一個完整的 APP 時，我們已經(jīng)規(guī)范好了大體的基礎(chǔ)視覺規(guī)范，在不影響這個規(guī)范的前提下，我們針對部分模塊，例如福利類、游戲類，這種比較偏運(yùn)營的設(shè)計(jì)界面，我們可以考慮有更豐富的顏色、圖形等視覺表現(xiàn)，但前提在于是否符合基礎(chǔ)規(guī)范的設(shè)定，如果符合那我們完全可以對這些類型進(jìn)行個性化設(shè)計(jì)。

如果沒有打破常規(guī)的設(shè)計(jì)方式，固化的追求一致性的設(shè)計(jì)，那么它就會變得普通、僵化，感知性設(shè)計(jì)的存在就是讓我們在允許的范圍內(nèi)追求更不一樣的設(shè)計(jì)，鼓勵設(shè)計(jì)師積極探索更多的可能性，好的設(shè)計(jì)體系既能體現(xiàn)品牌的一致性也能表達(dá)出創(chuàng)造性。

由于感知性模式的相關(guān)設(shè)計(jì)，容易被當(dāng)作只是樣式或者主題化皮膚設(shè)計(jì)，很多人會認(rèn)為這方面的設(shè)計(jì)比優(yōu)化交互流程更容易些。在這種狀況下，臨時的業(yè)務(wù)經(jīng)常會去挑戰(zhàn)產(chǎn)品的品牌性和規(guī)范性，綜合這 2 方面的原因，我們需要隨時調(diào)整我們對于感知性模式的策略。

好數(shù)據(jù)不代表感知性設(shè)計(jì)的好壞

數(shù)據(jù)的好壞往往來自各種原因，優(yōu)化設(shè)計(jì)后得到好的數(shù)據(jù)，但并不能說我們的感知性設(shè)計(jì)是好的，首先刺激數(shù)據(jù)的手段有很多，例如加重內(nèi)容的表現(xiàn)、利用顏色對比突出想要突出的模塊，這些方式都是與感知性設(shè)計(jì)背道而馳的。

基于上面這個問題，我們在日常設(shè)計(jì)中有幾個基本原則是需要我們?nèi)プ袷氐?，盡量避免為了滿足短時間的產(chǎn)品需求而影響整體的設(shè)計(jì)感知性。

1. 不挑戰(zhàn)基礎(chǔ)規(guī)范原則

基礎(chǔ)規(guī)范作為整體設(shè)計(jì)的基本標(biāo)準(zhǔn)，整體的制定肯定經(jīng)過多種嘗試之后的結(jié)果，如果輕易推翻的話，其中產(chǎn)生的設(shè)計(jì)成本是巨大的，往往需要重新輸出、多方對齊、最終輸出、再落地形成開放組件，在我日常的工作中也常遇到。往往是因?yàn)橐粋€極小的模塊而產(chǎn)生了巨大的設(shè)計(jì)成本。

2. 不改變用戶的普識習(xí)慣

這里說的不是不去優(yōu)化或迭代體驗(yàn)設(shè)計(jì)，而是我們應(yīng)該盡量避免因?yàn)橐粋€很小的內(nèi)容而調(diào)整全局的體驗(yàn)方式。

舉個例子：早前很多 APP 在設(shè)計(jì)表單選擇器時都喜歡進(jìn)行 UI 定制，從這個問題分析，用戶在使用這種表單選擇器的時候是用的系統(tǒng)多一點(diǎn)還是我們的 APP 多一點(diǎn)，如果是系統(tǒng)的多一點(diǎn)，我們何不直接調(diào)用系統(tǒng)？因?yàn)榻M件的 UI 改造，往往會帶來一定的開發(fā)成本，但其造成的感知卻并不夠大，反而會讓用戶覺得很奇怪，為啥這些選擇權(quán)在不同 APP 的不一致。

3. 一致性最大化

任何的設(shè)計(jì)都應(yīng)該以一致性作為最大的前提，這樣才能更加完整體現(xiàn)感知性模式，在各個模塊、顏色、圖形等等內(nèi)容都具有完整的呈現(xiàn)，無時無刻影響著用戶，讓用戶對于整體具有潛移默化的感知。

最后

感知性模式不是一個原則，而是一種工作方式、設(shè)計(jì)模式，除了個人的堅(jiān)持之外，還需要有團(tuán)隊(duì)的意識才能讓我們的設(shè)計(jì)更加具有品牌性，自上而下的調(diào)性、方向的確定，在團(tuán)隊(duì)中形成共識，這樣設(shè)計(jì)語言才能形成。

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

文章來源：優(yōu)設(shè)    作者：ID設(shè)計(jì)站

很多受歡迎的產(chǎn)品中都有我們值得學(xué)習(xí)和借鑒的設(shè)計(jì)思考點(diǎn)，通過分析海外主流產(chǎn)品，帶大家掌握底部導(dǎo)航欄（Tab Bar）的基本知識，找到解決問題的方法并開拓創(chuàng)意思維。

在開始之前，請大家先思考下面兩個問題～

問題 1：你的產(chǎn)品真的需要 Tab Bar 嗎？

好像并不是。雖然淘寶、微信、微博、美團(tuán)等大多數(shù)主流的產(chǎn)品都在使用 Tab Bar，但這并不意味著所有產(chǎn)品都需要它。

很多APP沒有Tab Bar，比如日歷、計(jì)算器、滴滴、Uber等。對于是否要在APP中使用Tab Bar，應(yīng)該分不同的情況靈活考慮。

問題 2：為什么產(chǎn)品要有 Tab Bar？

答案是為了易于使用，意味著通過 Tab Bar 這種簡單的設(shè)計(jì)可以輕松幫助用戶導(dǎo)航到頁面。

明白了上面的問題后，接下來就要考慮如何來設(shè)計(jì) Tab Bar，能更好的滿足用戶的需求和體驗(yàn)。

1. 顯示最重要的信息

導(dǎo)航欄應(yīng)該只包含最有用的信息，不能添加過多無用的標(biāo)簽使導(dǎo)航欄混亂。許多 App 在導(dǎo)航欄上添加搜索功能，因?yàn)檫@有助于用戶更快地導(dǎo)航和檢索內(nèi)容。

在Spotify底部導(dǎo)航中，主頁選項(xiàng)用于播放或收聽所有內(nèi)容，搜索選項(xiàng)用于搜索下一首歌曲和播客，音樂庫選項(xiàng)用于播放列表中喜歡和保存的歌曲，單獨(dú)的會員選項(xiàng)方便用戶輕松點(diǎn)擊并快速完成購買操作。

2. 擴(kuò)展導(dǎo)航的功能

主流 App 更喜歡在底部導(dǎo)航欄中使用 4-5 個標(biāo)簽，這樣能保持導(dǎo)航欄的整潔，還避免了標(biāo)簽過多導(dǎo)致用戶難以精確點(diǎn)擊選項(xiàng)的情況。

Pinterest的導(dǎo)航欄上只有四個選項(xiàng)，這有助于用戶輕松點(diǎn)擊。消息選項(xiàng)會實(shí)時更新消息數(shù)量，對用戶來說這樣的提示很直觀。另外搜索功能包含在導(dǎo)航欄中，方便輕松地在主頁和搜索結(jié)果之間來回切換。

3. 容納多種標(biāo)簽形式

多數(shù) App 底部導(dǎo)航欄會使用「圖標(biāo)+文字」的標(biāo)簽形式，這樣能清楚地告知用戶點(diǎn)擊標(biāo)簽之后的結(jié)果。

有時候我們也會看到有些產(chǎn)品的導(dǎo)航欄只有圖標(biāo)沒有文字，但這種形式并不會影響我們的操作，因?yàn)楫?dāng)導(dǎo)航欄的標(biāo)簽使用了用戶特別熟悉的形狀和內(nèi)涵，完全可以省略文字。

宜家App的導(dǎo)航欄使用了大眾都很熟悉的圖標(biāo)，所以即使不加文字，我們也能清楚地知道這3個圖標(biāo)分別代表了主頁、分類、我的。

相對于宜家，Youtube的導(dǎo)航欄就顯得有點(diǎn)復(fù)雜，因?yàn)閅outube的圖標(biāo)含義用戶可能并不是很熟悉，加上文字說明很有必要。

4. 文字標(biāo)簽應(yīng)該簡短

文字標(biāo)簽應(yīng)該簡短而清晰，準(zhǔn)確的文字說明能對用戶使用正確導(dǎo)航起到關(guān)鍵作用。

TikTok導(dǎo)航所有的文字標(biāo)簽都簡短，并且中間的添加圖標(biāo)還隱藏掉了文字，以此來引吸引用戶的注意力。

5. 避免隱藏導(dǎo)航欄

Tab Bar 通常包含了最重要的導(dǎo)航信息，應(yīng)該始終向用戶展示，避免在用戶滾動頁面的情況下被隱藏掉。

Pinterest導(dǎo)航欄的設(shè)計(jì)是個例。當(dāng)滾動頁面時，底部的導(dǎo)航欄會隱藏，這么設(shè)計(jì)的原因可能是為了防止導(dǎo)航欄遮擋圖像，保證用戶看到更多的圖像內(nèi)容。

6. 傳達(dá)位置

Tab Bar 幫助用戶輕松導(dǎo)航，但如果用戶不知道自己的位置，將會影響他們?yōu)g覽和使用產(chǎn)品的體驗(yàn)。

多鄰國App通過改變導(dǎo)航圖標(biāo)的樣式來讓用戶清晰的知道自己所有的板塊。

Headspace在底部導(dǎo)航欄加上了線條裝飾，每次切換選項(xiàng)，線條都會跟著一起切換，確保告知用戶確切的位置。

7. 從反饋中學(xué)習(xí)并不斷改進(jìn)

反饋是關(guān)鍵，如果想改善產(chǎn)品的導(dǎo)航欄設(shè)計(jì)，就要考慮并測試用戶最喜歡哪個導(dǎo)航選項(xiàng)，不使用哪個導(dǎo)航，需要四個還是五個選項(xiàng)等等。

Pinterest通過收集用戶的使用反饋情況來不斷改進(jìn)導(dǎo)航欄的設(shè)計(jì)，幫助用戶更方便地使用產(chǎn)品，這些不斷打磨的改進(jìn)真是產(chǎn)品成功的關(guān)鍵。

8. 在導(dǎo)航欄中顯示更新

Tab Bar 不僅僅起到導(dǎo)航的作用，很多時候還能通過狀態(tài)變化告知用戶更多的信息。

在Twitter主頁導(dǎo)航中，當(dāng)有新內(nèi)容推送時，主頁就會出現(xiàn)更新的狀態(tài)，提示用戶查看新內(nèi)容。這樣的設(shè)計(jì)在Youtube、Pinterest等很多主流產(chǎn)品中都有使用。

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

文章來源：優(yōu)設(shè)    作者：Clip設(shè)計(jì)夾