藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)

好的網(wǎng)頁設(shè)計(jì)具有很強(qiáng)的適應(yīng)性并且對用戶來說始終是友好的。

遵循網(wǎng)頁布局的最佳實(shí)踐，能夠帶來全新的數(shù)字體驗(yàn)，靈活地調(diào)整不斷變化的技術(shù)和設(shè)計(jì)趨勢，進(jìn)一步實(shí)現(xiàn)品牌目標(biāo)。

編者按：這篇趨勢分析的文章出自資深設(shè)計(jì)師 Lyudmil Enchev 之手，匯總了 2021 年在網(wǎng)頁設(shè)計(jì)領(lǐng)域值得注意的 10 個(gè)重要趨勢。

雖然移動端設(shè)計(jì)在持續(xù)地繁榮發(fā)展，但是網(wǎng)頁設(shè)計(jì)依然是當(dāng)下硬性的設(shè)計(jì)需求。相比于以往，網(wǎng)頁設(shè)計(jì)所面對的要求，其實(shí)越來越高，不僅要細(xì)致到位，要功能全面，要能夠貼合趨勢，還要能兼顧桌面和移動端。

從網(wǎng)絡(luò)上找到靈感并不是一件復(fù)雜的事情，不過要將新的樣式應(yīng)用到網(wǎng)頁中，給舊有的樣式翻新，都需要配合技術(shù)的進(jìn)步和新的工具。

在網(wǎng)頁設(shè)計(jì)領(lǐng)域中，設(shè)計(jì)趨勢從來都不是為了設(shè)計(jì)而誕生的，相反它更像是視覺、品牌、技術(shù)、先鋒探索綜合作用下，落地到網(wǎng)頁作品中的一種綜合表現(xiàn)。越來越多的技術(shù)和設(shè)計(jì)人員將聰明才智和天才想法融入到網(wǎng)頁當(dāng)中，才催生了如今我們看到的這些「趨勢」，而這個(gè)，就是我們今天要聊的東西。

1、卡通插畫

其實(shí)嚴(yán)格意義上來說，卡通插畫一直在流行，流行了很多年。從卡通插畫在電視上成為一代又一代人的視覺和設(shè)計(jì)啟蒙開始，它就從來沒有離開過網(wǎng)頁設(shè)計(jì)的主流領(lǐng)域。

也正是因此，直到今天，當(dāng)我們談及網(wǎng)頁設(shè)計(jì)趨勢的時(shí)候，卡通插畫也會是我們最容易想到的一個(gè)趨勢發(fā)展方向。插畫，是一位設(shè)計(jì)師自由創(chuàng)作發(fā)揮的通行證，而卡通插畫，是最容易帶著設(shè)計(jì)飛翔的一個(gè)設(shè)計(jì)技術(shù)。

卡通插畫足夠靈活，裝飾性非常強(qiáng)，在題材和風(fēng)格足夠切合的情況下，能夠更快和用戶構(gòu)成情緒上的紐帶，可以說是非常強(qiáng)大了。

2、3D 和景深效果

當(dāng)然，不止是在這一篇文章里面強(qiáng)調(diào)過，3D 的重要性和作為趨勢的流行程度。從文字排版到視覺圖像，3D 在視覺領(lǐng)域的快速增長和市場需求是大家有目共睹的。

值得一提的是，在網(wǎng)頁這個(gè)領(lǐng)域，除了諸多視覺元素的視覺設(shè)計(jì)之外，有一個(gè)非常突出的趨勢，就是運(yùn)用 3D 來構(gòu)建視覺景深，渲染出層次，這非常強(qiáng)大。

這種景深和 3D 元素所構(gòu)建出來的沉浸感使得整個(gè)網(wǎng)頁充滿了吸引力，結(jié)合色彩，陰影、高光，在高清晰度的屏幕上，這些都成為了將用戶留下來的理由?？纯聪旅娴陌咐?，你就明白我說的意思。

3、失真和故障效果

失真和故障效果則是另外一個(gè)重要的趨勢。視覺噪音，隨機(jī)的元素，缺陷，故障，模糊，低保真的元素，粗野主義式的設(shè)計(jì)，這些在這個(gè)以精致細(xì)膩為上的時(shí)代，制造出了一種反主流的聲音。

并非它們必須這樣，但是這樣的視覺風(fēng)格確實(shí)更容易在成堆的精致細(xì)膩設(shè)計(jì)當(dāng)中脫穎而出——當(dāng)然前提是你的故障和失真效果能夠做的足夠「好」。

奇怪的配色，反直覺的排版，明顯的錯位，看起來怪誕但是有趣的設(shè)計(jì)，這樣的設(shè)計(jì)通常需要設(shè)計(jì)師更好地在對錯好壞之間拿捏平衡。

感覺，感覺很重要，你明白嘛？這不是反邏輯也不是反設(shè)計(jì)，是特立獨(dú)行?？纯聪旅娴陌咐?。

4、90年代復(fù)古風(fēng)

懷舊也一直在流行，你知道的。但是如何懷舊？90年代，數(shù)字化設(shè)計(jì)剛剛從像素開始向著更加細(xì)致的未來前進(jìn)，這個(gè)階段，有大膽的嘗試，有快速更迭，這些介乎新舊之間的數(shù)字設(shè)計(jì)，是我們對于 90 年代設(shè)計(jì)的美好回憶。

相比于 80 年代的粗陋（圖形化界面還在艱難普及中），90年代是騰飛的階段，從界面到游戲，在擬物化走到之前，那種介乎精致和復(fù)古之間的微妙感覺，是非常有趣的。

對于新世紀(jì)才出生的 Z 世代而言，90年代是陌生的，但是這個(gè)時(shí)代又是很容易可以被追溯到的，這也是使得 90 年代的數(shù)字風(fēng)情有著能夠打通不同年齡段用戶的奇妙氣場，它的逐步流行，并不令人意外。

你總能在這些設(shè)計(jì)當(dāng)中，get 到到某些東西，然后微微一笑。

5、微交互和微動效

嚴(yán)格意義上來說，微動效和微交互并不是趨勢那么簡單，在如今的 UI 和 UX 設(shè)計(jì)當(dāng)中，它是必不可少的組成部分，它已經(jīng)從過去的「加分項(xiàng)」變成了如今的「基本要求」。

微交互和微動效通常不會做得特別的顯著，但是它們會深入到 UI 界面的各個(gè)地方，按鈕，小圖標(biāo)，行為召喚式的文本，翻頁按鈕，光標(biāo)，產(chǎn)品圖，彈出框，等等等。

微交互和微動效從最初的只需要確?？捎眯裕饺缃裥枰每匆子糜钟腥?，可以說要求是比以往有明顯提高了。在接下來的 2021 年可以預(yù)測的是，微動效會更加強(qiáng)調(diào)趣味性和交互性。

如果你正在考慮這部分的設(shè)計(jì)，看看下方的設(shè)計(jì)參考吧。

6、實(shí)驗(yàn)性配色

在關(guān)于網(wǎng)頁設(shè)計(jì)趨勢的文章當(dāng)中，不探討配色是不完整的。2021年的年度流行色是什么？不妨等等潘通下個(gè)月月初公布的2021年年度色。那 2021 年的在配色方法上的趨勢是什么？是實(shí)驗(yàn)性配色。

在以往追求協(xié)調(diào)配色的時(shí)代，和諧的搭配是最主要訴求。不過現(xiàn)如今，用戶、品牌乃至于設(shè)計(jì)師都在尋求一些更加新鮮獨(dú)特的東西，實(shí)驗(yàn)性的配色就是在這樣的訴求之下，逐漸流行起來。

這些實(shí)驗(yàn)性的配色通常會帶有一些漸變的特質(zhì)，一些反習(xí)慣和反邏輯的搭配方式，飽和度較高的藍(lán)色、紫色和紅色的融合，一些更為黯淡或者更為刺眼的搭配方式，強(qiáng)烈的視覺實(shí)驗(yàn)仿佛是在探索用戶的接受極限在哪里。對于如何落地，多看看那些優(yōu)秀而微妙的已有的范例吧。

7、超粗字體樣式

如果說有什么趨勢在 2021 年是非常明顯的話，我只能說，是更為大膽的排版和更為粗壯的字體筆觸。當(dāng)然，這些設(shè)計(jì)本身是要具備相當(dāng)?shù)囊曈X美感和愉悅性的。懟到出血位乃至于版面之外的文本，快速切換的字體效果是「注意力經(jīng)濟(jì)」催生的一種設(shè)計(jì)策略。所有的一切——尤其是文本——仿佛在大聲地吼叫著：看我看我看我！

這大概就是這種設(shè)計(jì)趨勢誕生的本質(zhì)。不過如果你設(shè)計(jì)的足夠炫酷、炸裂或者優(yōu)雅，誰又會去責(zé)怪你呢？

8、手作的質(zhì)感和風(fēng)格

我們似乎開始厭倦橫平豎直均分的網(wǎng)格，那些并不那么精準(zhǔn)，帶著手工制作的「不夠」的元素，對于越來越多的用戶而言，似乎是更好、更加易于親近的東西。因?yàn)檫@樣看起來更加個(gè)性，似乎給網(wǎng)頁賦予了某種真實(shí)質(zhì)感，甚至可以腦補(bǔ)出這些手寫、手繪、手撕的視覺元素背后，站著一個(gè)有血有肉真實(shí)存在的人。

這大概才是手作感真正讓人開始沉迷的重要原因。你可以開始嘗試一下這種這些自由的、非正規(guī)的、甚至有錯漏但是顯得非常友好的視覺元素，字體，插畫，排版方式，裝飾元素，等等等等。

9、3D插畫和動畫

其實(shí)我們在前面已經(jīng)反復(fù)提及了3D的部分，不過現(xiàn)在再做一個(gè)匯總：走出平面2D的領(lǐng)域，來試試有趣的 3D 設(shè)計(jì)，無論是好玩逼真的建模和陰影、有趣的材質(zhì)和細(xì)節(jié)、腦洞大開的動畫、充滿縱深的轉(zhuǎn)場和強(qiáng)化的交互，都能夠讓網(wǎng)頁的設(shè)計(jì)，在2021 年更加吸引人。

因?yàn)殪趴岜旧砭妥銐蛭肆瞬皇菃幔?

10、極簡主義風(fēng)格

極簡主義最后還是要提及一下。雖然總體來說是老生常談，但是它依然是很多設(shè)計(jì)師熱衷、很多用戶喜歡的一種主流的風(fēng)格，也是值得追隨的趨勢。

必須說的是，還有很多厭倦了各種流行樣式的用戶可能會擁抱極簡主義，它會作為一種持續(xù)的「趨勢」而存在。這也是極簡主義最讓人著迷的地方：將你需要的必要的部分呈現(xiàn)出來，且只呈現(xiàn)這部分東西，沒有過度裝飾，沒有無效信息，簡單直接。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)

節(jié)能環(huán)保是符合可持續(xù)發(fā)展戰(zhàn)略的一個(gè)課題。在節(jié)能環(huán)保方面界面設(shè)計(jì)都有哪些風(fēng)格呢？

下面給您展示兩種風(fēng)格界面：清新明快和深色沉穩(wěn)。

綠色和黃色為主的色調(diào)給人一種清新自然，富有生機(jī)與活力的印象。圖形以圓形為主，比較有親和力，同時(shí)圓形也是今年UI設(shè)計(jì)的流行趨勢。

紫色和粉紅色漸變?yōu)楸尘?，明快有活力，容易吸引人眼球。綠色、黃色、藍(lán)色作為輔助色，增加頁面的靈動感。圖標(biāo)簡潔清晰，辨識度高。

黑白色調(diào)是一種低調(diào)雅致的配色，配以簡潔的線條，更符合節(jié)能環(huán)保的主題。

這款A(yù)PP界面采用深灰色底色，沉穩(wěn)大氣，有現(xiàn)代科技感，界面采用卡片式布局。配以粉紅和橘黃作為點(diǎn)綴，讓界面不因深色而顯得呆板。

界面采用深藍(lán)和灰色為主的配色，大面積留白?？ㄆ讲季?，配以曲線圖表，扁平風(fēng)格圖標(biāo)。簡潔清晰，表意明確。讓人對節(jié)能的理念一目了然。

（圖片均來源于網(wǎng)絡(luò)）

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)

更多精彩文章：

   大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（一）

   大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（二）

   大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（三）

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（四）

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（五）

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（六）

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（七）

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（八）

設(shè)計(jì)行業(yè)里幾乎沒有什么是保持不變的，如果有，那就應(yīng)該是“堅(jiān)持創(chuàng)新”這四個(gè)字，很多設(shè)計(jì)師覺得自己沒有亮眼的作品，或者老被客戶說設(shè)計(jì)沒新意，就是因?yàn)槿狈?chuàng)造力，缺乏堅(jiān)持創(chuàng)新的態(tài)度。所以，蔥爺今天給大家分享一波作品，看看人家是怎么打破常規(guī)、做出新意的。

01 

奶茶海報(bào)海報(bào)通常都會用實(shí)拍產(chǎn)品圖片來勾起消費(fèi)者的食欲，設(shè)計(jì)風(fēng)格也多為清新、甜美的感覺，而下圖的奶茶海報(bào)卻采用了扁平、抽象的波普風(fēng)格，顏色搭配也很時(shí)尚，讓人眼前一亮。

 

02 

關(guān)于導(dǎo)師介紹類的海報(bào)通常都是以人物為主，而且風(fēng)格多追求簡約、高大上，而下圖這張海報(bào)只是把人物當(dāng)成一個(gè)元素融入在畫面中，跟整體的風(fēng)格融合得更自然，扁平的幾何風(fēng)格和純色搭配，也讓這張海報(bào)看起來很新穎。

 

03 

用表格的形式來設(shè)計(jì)服裝的單張也是比較少見的做法，規(guī)則的表格與自由擺放的產(chǎn)品形成鮮明的對比。

 

04 

運(yùn)用水墨素材做設(shè)計(jì)的作品很多，然而把水墨3D化，搭配上科技感十足的運(yùn)動鞋，既大氣又很酷。

 

05 

該海報(bào)也是采用了混搭的手法，復(fù)古風(fēng)的背景、矢量風(fēng)格的眼睛、攝影素材（女模特）搭在一起，給人一種不尋常的視覺感受，另外，看似沒什么關(guān)聯(lián)的三個(gè)元素其實(shí)也是有關(guān)系的，從人到眼睛，再到背景其實(shí)是一個(gè)遞進(jìn)的關(guān)系，因?yàn)檠劬碜杂谇懊娴娜?，而發(fā)散的背景來自于眼睛。 

 

06 

日本京都水族館的地鐵廣告，遠(yuǎn)看是頗具爭議的詞語，走近一看文字是由大量海底生物組成的，細(xì)膩而獨(dú)特的畫風(fēng)，以及巧妙的創(chuàng)意，共同成就了這組經(jīng)典的作品。

 

07 

潘虎包裝設(shè)計(jì)實(shí)驗(yàn)室為莫小仙設(shè)計(jì)的這套方便面包裝設(shè)計(jì)也很特別，市面上大部分方便面包裝都是大大地展示產(chǎn)品圖片，而該包裝卻以抽象的花紋作為主視覺，用不同的圖案和顏色來代表不同的品類，在貨架上非常亮眼。

 

08 

上圖為國外防疫宣傳海報(bào)，白底黑字加簡單、扁平的插畫，雖然很簡單，但是很吸睛、很有趣，且清晰明了，與國內(nèi)的防疫宣傳海報(bào)還是很不一樣的。

 

09

在上圖中，設(shè)計(jì)師把直播的元素全部從手機(jī)中分離出來，然后與正在做直播的主播組合在一起，將旅游直播有趣地視覺化，背景沒有使用實(shí)景，而是用了純色塊，形式很新穎，也很時(shí)尚。

 

10

用文字與人物做穿插組合的海報(bào)很多，但大部分海報(bào)的文字效果都是扁平的，而上圖為了體現(xiàn)動作片硬朗的風(fēng)格，使用了立體字，效果也是不錯的。

注:文中圖片整理于網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系刪除。 

 

原文地址：蔥爺（公眾號）

作者：蔥爺

今天跟大家分享的是深色背景的網(wǎng)站界面，深色背景穩(wěn)重大氣，體現(xiàn)科技感。在界面布局方面簡潔清晰，同時(shí)界面中的表格、按鈕、標(biāo)簽、圖表等控件精致美觀，不管是做web端網(wǎng)頁、大屏界面，還是手機(jī)app，都可以借鑒。

（圖片均來源于網(wǎng)絡(luò)）

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)

更多精彩文章：

ui界面設(shè)計(jì)之網(wǎng)站設(shè)計(jì)案例欣賞（一）

為大家梳理一個(gè)web表格設(shè)計(jì)框架，希望能夠給大家?guī)硗暾牟灰粯拥膬?nèi)容。全文12,598字 ，預(yù)計(jì)閱讀30分鐘，建議收藏。

在網(wǎng)頁或桌面端為載體的B端產(chǎn)品和生產(chǎn)力工具中，越來越多的設(shè)計(jì)師需要和數(shù)據(jù)打交道，查詢和處理數(shù)據(jù)的能力是當(dāng)前正在設(shè)計(jì)的大多數(shù)產(chǎn)品的關(guān)鍵要求之一，表格被公認(rèn)為是展現(xiàn)數(shù)據(jù)最為清晰、的形式之一，也是世界上最常用的用戶界面工具，其重要性不言而喻。

表格，展示行列數(shù)據(jù)，既是一種可視化交流模式，又是一種整理數(shù)據(jù)的手段。表格幫助我們組織和展示信息，同時(shí)保證信息的可讀性，從大量信息中找到所需內(nèi)容；通過合理布局，感知不同信息間的關(guān)聯(lián)與區(qū)別，進(jìn)行分析和比較；對數(shù)據(jù)進(jìn)行排序、搜索、分頁、自定義操作等復(fù)雜行為。

1.1 表格的布局

表格的行元素和列元素行和相交就會形成一個(gè)簡單的二維表，行，列元素的空間組合就確定了一個(gè)個(gè)單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強(qiáng)調(diào)行、列、單元格。

水平型會弱化列的存在，強(qiáng)調(diào)行信息的連貫性，適用于用戶閱讀信息時(shí)是從左到右，然后自上而下逐條掃描。垂直型是通過強(qiáng)化列的視覺特征來突出不同列信息的對比。矩陣型的表格有均勻統(tǒng)一的分割線，單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時(shí)我認(rèn)為單元格合并的情況也屬于矩陣型。

還有比較常用的表格類型層級型：

層級表

是表達(dá)結(jié)構(gòu)性關(guān)系的表格，表現(xiàn)得如同樹的分支，所以又叫樹列表。每一個(gè)條目可展開或折疊包含的更詳細(xì)的行信息，也包含嵌套子表格。

層級表并不如矩陣表直觀，但通過結(jié)構(gòu)化的組織方式逐級展示表的數(shù)據(jù)內(nèi)容，讓整體信息架構(gòu)一目了然，非常適合大型數(shù)據(jù)表。

結(jié)合層級表的使用場景，多以查看為主，編輯需求較少。

同時(shí)還有特殊的表格類型，圖表型與卡片型：

圖表型

除了在單元格中引用圖表之外，很多時(shí)候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時(shí)也會有“圖表+表格”的形式，這時(shí)候，表格往往只作為明細(xì)放在頁面底部。大量的表格也會導(dǎo)致視覺的單調(diào)。

卡片型

可以用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進(jìn)行排列。此外，卡片彼此之間又形成一個(gè)整體。

卡片是一種承載信息的容器，對可承載的內(nèi)容類型無過多限制，它讓一類信息集中化，增強(qiáng)區(qū)塊感的同時(shí)更易于操作；卡片通常以網(wǎng)格或矩陣的方式排列，傳達(dá)相互之間的層級關(guān)系。適合較為輕量級和個(gè)性化較強(qiáng)的信息區(qū)塊展示。

注：在有限的表格空間內(nèi)需注意卡片信息之間的間距，若卡片信息過長可做截?cái)嗵幚怼?

在實(shí)際工作中，上述表格類型還有可能互相結(jié)合，以更好的達(dá)到相應(yīng)的分析目的。

比如垂直–層級，矩陣–數(shù)據(jù)立體表等。

1.2 表格的構(gòu)成

從視覺結(jié)構(gòu)的表現(xiàn)角度，個(gè)人將“表格”的構(gòu)成分為：標(biāo)題、表上方篩選操作區(qū)、表頭、表體、底欄。由表頭、表體構(gòu)成內(nèi)部區(qū)域，由標(biāo)題、篩選操作、底欄構(gòu)成外部區(qū)域。

標(biāo)題

標(biāo)題是對表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等)，以便用戶對表格內(nèi)容有整體認(rèn)知。給數(shù)據(jù)表格起一個(gè)清晰簡明的標(biāo)題，與其他的設(shè)計(jì)同等重要。有了好的標(biāo)題，表格就可以獨(dú)立使用，如果導(dǎo)航菜單層級清晰，同樣能起到標(biāo)題的作用。標(biāo)題作為最重要的識別元素，默認(rèn)展示在左上角。

篩選操作區(qū)域

這里特指位于表頭的上方的操作區(qū)域，包含篩選，操作按鈕等其他操作。篩選區(qū)包含模糊搜索和條件篩選，按鈕分為增刪改和其它業(yè)務(wù)處理操作，合理設(shè)計(jì)篩選區(qū)可以大大提高用戶的效率。

表頭

表頭對數(shù)據(jù)性質(zhì)的歸類。表頭按慣例要對數(shù)據(jù)的簡況做出反映，如被調(diào)查者的性別、年齡、學(xué)歷、收入、家庭成員組成、政治背景、經(jīng)濟(jì)狀況等。表頭的字段名稱應(yīng)當(dāng)符合人們的思維習(xí)慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(biāo)(小問號)。表頭在這里也能指列行標(biāo)簽，是對所屬行或列數(shù)據(jù)的描述。

除了容納行/列標(biāo)簽之外，表頭也可以進(jìn)行排序、搜索、篩選等。

表體

表體是表格的主體內(nèi)容，具體信息數(shù)據(jù)內(nèi)容的填充區(qū)域，由一個(gè)個(gè)基礎(chǔ)的單元格組成，單元格是表格呈現(xiàn)數(shù)據(jù)信息的基本單位，可以是計(jì)數(shù)、百分比、均值、"-"等任何數(shù)據(jù)。表體包含數(shù)據(jù)，分割線，背景，單元格數(shù)據(jù)可進(jìn)行點(diǎn)擊操作，如鏈接跳轉(zhuǎn)(項(xiàng)目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。

表尾一般是統(tǒng)計(jì)類數(shù)據(jù)，例如合計(jì)、平均數(shù)等。表尾使用頻率較少，且重要性明顯不如表頭，我就把它歸到表體這類。

底欄

底欄在表格最下方，主要展示正文中的數(shù)據(jù)量或單頁數(shù)據(jù)的概覽信息，也常提供統(tǒng)計(jì)功能，供用戶了解總體進(jìn)展。底欄一般放統(tǒng)計(jì)信息、分頁控件、備注說明、操作按鈕(加載更多)等內(nèi)容。

底欄最常見的元素就是分頁，分頁可以放在頭部或底部，常見的還是放到底部，分頁固定能省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據(jù)不同的場景選擇最優(yōu)的設(shè)計(jì)方案，比如有的時(shí)候并不需要定點(diǎn)跳轉(zhuǎn)。

無限滾動可以替代分頁，但對于功能優(yōu)先的應(yīng)用未必適用。下圖為查看更多按鈕，比較少見：

同時(shí)，在選中操作的下，操作按鈕也可以位于底欄，在未選中時(shí)操作置灰。

采用格式一致外觀，突出有利于對象識別的關(guān)鍵信息。

2.1 視覺標(biāo)準(zhǔn)

填充與邊距

合適的填充和邊距對于視覺設(shè)計(jì)至關(guān)重要，既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部留白，以保證易讀性，當(dāng)創(chuàng)建表格設(shè)計(jì)規(guī)范并嚴(yán)格遵循后，就可以創(chuàng)建視覺一致的表。表格本身應(yīng)具有最小寬度，在不同畫面中寬度應(yīng)可以增長到整個(gè)空間，所以每個(gè)列也需具備最小寬度。如果頁面寬度小于表格，那么表格應(yīng)水平可拖拽。

對齊方式

數(shù)據(jù)合適的位置排列能夠提升數(shù)據(jù)的瀏覽效率和準(zhǔn)確度。對齊能夠很好的形成視覺引導(dǎo)線，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。

正如連續(xù)律所描述的，人們傾向于把那些經(jīng)歷最小變化或阻斷的直線或圓滑曲線知覺為一個(gè)整體，傾向于使知覺對象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線。在界面設(shè)計(jì)中，將元素進(jìn)行對齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。

數(shù)字應(yīng)該右對齊

在表格中，諸如金額、數(shù)量等數(shù)值排列時(shí)，通常采用“右對齊”方式，既方便用戶快捷讀取數(shù)據(jù)，還可以使用戶進(jìn)行縱向數(shù)據(jù)對比。數(shù)字是從右向左讀的，是因?yàn)槲覀儗Ρ葦?shù)字時(shí)，首先看個(gè)位，然后十位、百位。當(dāng)個(gè)位數(shù)值對齊時(shí)，我們就可以快速查看前面的數(shù)值，比較多個(gè)數(shù)據(jù)的大小。因此，表格的數(shù)字應(yīng)當(dāng)右對齊。

當(dāng)我們常用的字體如果不同數(shù)字寬度不一致時(shí)，會導(dǎo)致千位分隔符不在一條直線上，所以要選擇數(shù)字等寬的字體，等寬的數(shù)字在同一豎線時(shí)更容易對比。

文字信息左對齊

因?yàn)槲覀冮喿x文字信息是從左向右讀，如果不采用左對齊，會降低瀏覽文字的效率。

混合型文本左對齊

當(dāng)數(shù)字、文字、字母組成混合數(shù)據(jù)時(shí)，標(biāo)題和正文左對齊，使用了一個(gè)視覺起點(diǎn)。

在實(shí)際工作中，主流框架組件，表格列數(shù)據(jù)對齊同時(shí)針對分割線，雖不是完美中的對齊，但開發(fā)成本低。

不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。如：普通文本若過長，可在鼠標(biāo)懸停狀態(tài)時(shí)單元格展開列出全部字段信息。

色彩

一般表格具有的顏色盡可能少。顏色和可讀性是密切相關(guān)的，要合理的使用顏色，普通表盡量使用簡單的背景色和點(diǎn)綴色。背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線)、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法，還可以對表頭表尾進(jìn)行視覺區(qū)分。但不能增加過多顏色以引起混亂。

分割線顏色盡量不要與背景色相差太大。當(dāng)字體選擇深灰色，背景為淺白色時(shí)，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。

2.2 表頭的優(yōu)化

表頭標(biāo)簽應(yīng)該簡煉準(zhǔn)確，以達(dá)到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身。當(dāng)然對于產(chǎn)品而言，先能把事情說清楚，再考慮文字的簡潔性。

當(dāng)數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時(shí)候，使用多級表頭來體現(xiàn)表頭與數(shù)據(jù)的層次關(guān)系，如下圖：

當(dāng)數(shù)據(jù)有看不懂或生僻的信息時(shí)，用戶期望有人告訴他為什么會這樣，就需要在表頭標(biāo)簽后加上小問號，鼠標(biāo)懸停彈出說明文字的提示框。

不需要表頭

如果表格數(shù)據(jù)可以自我解釋，表頭就可以不需要。電子郵件的表格是一個(gè)好例子，郵件主題，發(fā)送者，發(fā)送日期都區(qū)別度高不會混淆的。當(dāng)然有的情況表頭是不能去掉的，例如有兩個(gè)不明確的日期，這時(shí)候你就需要定義一個(gè)表頭。

2.3 行的優(yōu)化

默認(rèn)排序

所有行按邏輯排序，比如按風(fēng)險(xiǎn)由小到大，將最安全的操作放最前面；或按照信息時(shí)間排序，由新到舊，以創(chuàng)建時(shí)間進(jìn)行排序，即創(chuàng)建的排在最前面。

合適的行高

行高是非常重要的參數(shù)，直接影響著閱讀體驗(yàn)。較小的行高承載更多信息，讓用戶無需滾動鼠標(biāo)即可看到更多數(shù)據(jù)，但會降低掃描效果，導(dǎo)致視覺解析錯誤。適宜的行高使得數(shù)據(jù)更易于被閱讀，但這不代表行高越大越利于閱讀。

設(shè)置行高的原則：

A.單行數(shù)據(jù)顯示時(shí)，數(shù)據(jù)顯示緊湊、有序。

B.多行數(shù)據(jù)顯示時(shí)，弱化表格形式，提供豐富的視覺展現(xiàn)。

因此，對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。當(dāng)然，也可以提供切換按鈕讓用戶自己控制顯示密度。

橫向斑馬線

斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯，同時(shí)加強(qiáng)視覺流的橫向引導(dǎo)，避免在閱讀表格時(shí)出現(xiàn)迷失情況，要注意兩種顏色不能反差過大。另外，可以根據(jù)實(shí)際情況選擇是否與邊框同時(shí)使用。

行的強(qiáng)調(diào)

有時(shí)為了強(qiáng)調(diào)行內(nèi)信息的連續(xù)性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續(xù)通暢，以提升閱讀效率。

表格還可以通過顏色來指示狀態(tài)，顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數(shù)據(jù)。

同時(shí)可以對行內(nèi)信息進(jìn)行擴(kuò)充，進(jìn)一步弱化表格形式，豐富各類信息的視覺呈現(xiàn)，同時(shí)兼顧行與行之間的關(guān)鍵信息的對比，如上文表格布局提到的圖表的使用。

2.4 列的優(yōu)化

減少列的數(shù)量

盡量減少列的數(shù)量，關(guān)注用戶需要的必要信息。當(dāng)數(shù)據(jù)列過多時(shí)，要分清主次列，非重點(diǎn)、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區(qū)域左右拖動。

合適的列寬

列寬嚴(yán)謹(jǐn)?shù)奶幚矸绞接腥N。第一，通過柵格，由列的數(shù)量決定列寬，主流框架組件一般是這種；第二，可以固定部分列的寬度，其余列則按百分比處理；第三，在固定寬度的基礎(chǔ)上，允許用戶自由拖動調(diào)整列寬的大小。（當(dāng)然我覺得不要太拘泥這個(gè)，合適就好）

列的強(qiáng)調(diào)

為便于用戶對數(shù)據(jù)進(jìn)行對比分析，可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化等數(shù)據(jù)處理結(jié)果，減少用戶數(shù)據(jù)加工的過程，直達(dá)用戶獲取信息的目標(biāo)(需要明確用戶目標(biāo))，提高用戶的閱讀速度。

一般列的強(qiáng)調(diào)是配合列排序功能使用的，如點(diǎn)擊率、訪問量的排序。有時(shí)會使用不同粗細(xì)的縱向分割線或不同底色對列信息進(jìn)行區(qū)隔，增加同類信息的對比性。

2.5 單元格數(shù)據(jù)展示

度量單位的使用

其中的關(guān)鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無需重復(fù)，一般在表頭標(biāo)識清楚即可。

空白單元格處理

一般指空數(shù)據(jù)或零數(shù)據(jù)的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是數(shù)值為零？正確做法是，對于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下數(shù)據(jù)格式保持一致；對于沒有數(shù)據(jù)的單元格，通常是用“－”表示。

B端后臺數(shù)據(jù)類型較多，最好能為空數(shù)據(jù)做出釋義，可以在“列標(biāo)簽”或底欄給出解釋文案。

數(shù)據(jù)過多

單元格的寬度根據(jù)列中字符的長短自動變化寬度，超過該列寬可以省略顯示，末尾以"..."顯示，鼠標(biāo)懸停時(shí)出現(xiàn)氣泡顯示完整內(nèi)容。

關(guān)鍵屬性標(biāo)識

比如用戶重點(diǎn)關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可用符號進(jìn)行標(biāo)識，幫助用戶快速定位到目標(biāo)信息。

2.6 分隔線

水平分隔線，能顯著減輕表格在垂直方向的視覺重量，內(nèi)容更加條理清晰，便于用戶對比查看數(shù)據(jù)。

垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數(shù)據(jù)量級比較大的表格，列之間過于緊密時(shí)建議保留，可以使用較淡的分隔線，將不同列數(shù)據(jù)區(qū)分開來，提升瀏覽速度。

下圖采用了同時(shí)使用水平和垂直分隔線：

如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于表格數(shù)據(jù)量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。

2.7 分頁及翻頁

在web端，表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時(shí)需要提供翻頁功能，這個(gè)“數(shù)量”由表頭的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來決定，原則是不要超過一屏，考慮到每個(gè)用戶的使用習(xí)慣，可以讓用戶自定義每頁的顯示的數(shù)量。相比于跨屏翻頁而言，向下滾屏?xí)憷?，在下?strong style="outline:0px;margin:0px;padding:0px;">控制表內(nèi)容中展開比較了無線滾動與分頁。

分頁控件內(nèi)容 ：用戶自定義每頁顯示的數(shù)量，當(dāng)前頁碼(行數(shù))，全部數(shù)據(jù)的頁數(shù)(行數(shù))，向前翻頁，向后翻頁，到達(dá)第一頁，到達(dá)最后一頁等。

當(dāng)用戶的數(shù)據(jù)未超過一頁時(shí)，可以隱藏翻頁控件。翻頁按鈕不可用時(shí)，須給出置灰態(tài)或不可點(diǎn)擊。

分頁控件做為篩選數(shù)據(jù)的一種方式，通?？梢越Y(jié)合排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網(wǎng)易的郵箱，翻頁與日歷結(jié)合使用，對于有大量郵件數(shù)據(jù)的用戶來說，查閱郵件的效率更高。

除了無限滾動，還有第三種翻頁方式，鼠標(biāo)點(diǎn)擊“加載更多”按鈕以查看更多數(shù)據(jù)。

2.8 簡化表格

干凈的表格使人愉悅。特別是在處理大量數(shù)據(jù)時(shí)，巨大的數(shù)據(jù)量會增加用戶的壓力，因此要減少視覺干擾。刪除不必要的分隔符與背景，去除陰影等。信息內(nèi)容的有效傳達(dá)是表格設(shè)計(jì)的本質(zhì)，讓用戶注意力聚焦在核心內(nèi)容上。所以，做減法設(shè)計(jì)就顯得可貴了。

實(shí)現(xiàn)簡化的方法是適當(dāng)刪減。如果畫面視覺很糟糕，請刪除輔助信息、不常用的控件和分散注意力的樣式，但要小心刪除必要內(nèi)容。“簡單并不意味著沒有雜亂，這是簡單的結(jié)果。簡單性在某種程度上基本上描述了對象和產(chǎn)品的目的和位置。想設(shè)計(jì)出一個(gè)井然有序的產(chǎn)品。這并不簡單。“ - Jonathan Ive

減少分隔線

這必須是在數(shù)據(jù)允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快數(shù)值的對比效率。但如果在表格中使用適合的對齊方式，豎直分隔線就是多余的。它們最大的貢獻(xiàn)就是縮減元素之間的距離，明確了單元格范圍。即使要用垂直分割線，也要淡，不能妨礙快速瀏覽。

不使用斑馬線，使用不同底色區(qū)分指示不同類型的數(shù)據(jù)是有必要的，但是用來區(qū)分同一類數(shù)據(jù)，斑馬線在很多時(shí)候又是沒有必要的，因?yàn)樗椒指罹€已經(jīng)明顯區(qū)隔了。

省去分隔線，對于較小的，動態(tài)性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當(dāng)然，這更多是數(shù)據(jù)量不大且易分辨的情況。

盡量以黑白為主

運(yùn)用彩色表達(dá)組織或含義可能會增加誤解，并且引發(fā)視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態(tài)或進(jìn)度。

克制圖形元素的使用

其他圖形元素，如星號、三角、圓點(diǎn)、對勾、叉等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息，但要注意數(shù)量，物極必反，要注意克制這些元素的使用。

優(yōu)秀的表格交互給予用戶操控感，不讓其迷失在數(shù)據(jù)中。提供便捷的過濾篩選組件，配合鼠標(biāo)懸停、點(diǎn)擊、框選等操作，方便用戶查看更多數(shù)據(jù)信息，快速定位目標(biāo)數(shù)據(jù)，或根據(jù)特定規(guī)律對數(shù)據(jù)進(jìn)行排序、突出、降維等處理。當(dāng)我們將這些組件與交互動作結(jié)合，用一些習(xí)以為常的交互去操縱表格時(shí)，用戶將更清晰、有信心、提效率。

3.1 篩選與搜索

篩選和搜索是用戶目標(biāo)數(shù)據(jù)的好方法，這是一項(xiàng)基本功能，可讓用戶從默認(rèn)的表格數(shù)據(jù)輕松獲取要查找的內(nèi)容，在數(shù)據(jù)量較大的表中特別有用，一般位于表上方的操作區(qū)域或表頭區(qū)域。

表上方

當(dāng)表格的數(shù)據(jù)量較大時(shí)，可在表上方操作區(qū)域增加對象搜索或數(shù)據(jù)分類來提升用戶查找效率，且能同時(shí)使用。提供多維的篩選和排序，是增加用戶效率的有效方式。

輸入搜索框輸入用戶關(guān)心的內(nèi)容，既可以實(shí)時(shí)篩選，也可以點(diǎn)擊觸發(fā)，一般須支持模糊查詢，否則用戶必須記住所有內(nèi)容，才能查出要找的目標(biāo)項(xiàng)，成本過高。也有特殊情況，如保密性較高的賬號密碼列表查詢需輸入。

無論手動查詢還是自動查詢，如果查詢條件是組合的幾個(gè)，那么一般是填好全部篩選條件再讓用戶點(diǎn)擊查詢按鈕。因?yàn)槿绻脩粢樵兊谋砀駭?shù)據(jù)具有多個(gè)屬性且相互聯(lián)系時(shí)，組合條件的查詢顯然是更合理的。

如果篩選操作是單個(gè)條件獨(dú)立查詢，各個(gè)篩選條件都是相互獨(dú)立的，那么最好填好一個(gè)條件便自動查詢。

篩選條件有時(shí)候既需要匯總數(shù)據(jù)的，又需看單一條件下的數(shù)據(jù)，比如狀態(tài)包含“待付款、待發(fā)貨和待收貨等”，此時(shí)則是做成Tab單選較好，如下圖所示。

表頭

放置在表頭標(biāo)簽上的篩選，受列內(nèi)容的影響，一般做單次篩選。通過對表頭標(biāo)簽旁按鈕的點(diǎn)擊，使用戶更快捷進(jìn)入到自己的篩選條件中。通常，表單越左的列數(shù)據(jù)越重要的，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足。

3.2 滾動與固定

垂直滾動固定表頭

垂直滾動時(shí)，固定表頭可以讓用戶明白當(dāng)前單元格數(shù)據(jù)信息的屬性和含義，體現(xiàn)界面友好性。當(dāng)數(shù)據(jù)列差異不大，用戶不能直接根據(jù)表格數(shù)據(jù)分辨類型時(shí)，尤其需要固定表頭。當(dāng)表頭有操作時(shí)，固定表頭更能提升使用效率。

數(shù)據(jù)列表相當(dāng)龐大而復(fù)雜的時(shí)候，使用固定表頭可以幫助用戶區(qū)分列與屬性。

水平滾動列固定

當(dāng)呈現(xiàn)大量數(shù)據(jù)時(shí)，表包含的列數(shù)超出了該表的最大寬度，水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作?；谖覀冏x取信息的方式，從左到右放置關(guān)鍵列。最左側(cè)的列會引起最多的關(guān)注，當(dāng)我們感興趣時(shí)，才會查看其他列，它會影響用戶閱讀所需時(shí)間與精力。

在大型表格中，我們才可以水平滾動，最好是尋找可替代方案。表格中文本為什么這么長？能減少字?jǐn)?shù)嘛？可以將文本換至第二行以減少水平寬度嗎？能否為過長的文字選擇別名嗎？可否用圖形條目取代？是否可以采取工具提醒？是否可以安排在窗口或?qū)υ捒蚶铮?

一般有兩個(gè)解決辦法：文本換行，對它縮排；在單元格區(qū)域截?cái)辔谋荆谔崾局酗@示完整文本。方法一意味著我們要增加表格高度，且每行高度可能不同；方法二，如果不同文本內(nèi)容的頭幾個(gè)字一樣就存在問題了。但這兩種方法都比水平滾動好。

3.3 排序

表格初始有一個(gè)默認(rèn)排序，也叫初始排序。但有時(shí)，用戶希望將表格中某一行位置換到另一位置。

拖曳排序

拖放似乎很簡單。就是抓住某個(gè)元素把它放到另一個(gè)地方而已?？墒?，事實(shí)上，拖放過程涉及到了大量細(xì)節(jié)，在拖放期間，需要處理許多特定的狀態(tài)。

用戶在拖動模塊時(shí)，頁面整體布局基本保持不變。因?yàn)橐苿拥牟皇悄K，而是插入條。插入條指明了放置模塊時(shí)的目標(biāo)位置。常用于數(shù)據(jù)量較小，有拖曳排序需求的場景。又可以運(yùn)用在多個(gè)表一起的情況。

穿梭表格

就是多表格拖拽的情況。比如左側(cè)的表格內(nèi)容可拖拽至右側(cè)列表框，同時(shí)支持表內(nèi)上下拖拽更換位置順序，也可直接選中對象在兩欄中按鈕移動，完成拖拽行為。

那如何讓用戶知道可拖拽呢？

增加意向符號；改變光標(biāo)樣式；增加被拖拽對象臨時(shí)性底色，突出顯示。

如何讓用戶知道怎么拖拽到哪里？

被拖入?yún)^(qū)域應(yīng)增加插入位置符號，可以明確指出放置模塊的目標(biāo)位置，減少用戶困惑，也可以對放置操作發(fā)生后的頁面外觀提前給出預(yù)覽。同時(shí)設(shè)計(jì)時(shí)考慮上下左右兩個(gè)方向的拖拽運(yùn)動分別可以觸發(fā)什么結(jié)果，超出表格范圍拖拽對象消失。

被拖動對象應(yīng)呈現(xiàn)為輕微透明的樣式？應(yīng)該顯示為完全不透明？或者改為使用縮略圖表示？我認(rèn)為這三種方法都可以。透明效果也會讓更多表格內(nèi)容對用戶可見，有助于用戶預(yù)覽最終放置后的結(jié)果。從而方便用戶查看頁面，也會表明該模塊處于一種特殊模式中。透明可以表明相應(yīng)被拖拽對象尚未定位，或者說正處于過渡狀態(tài)。

表頭排序

排序又分為降序和升序，比如，事件相關(guān)的表格，默認(rèn)時(shí)間降序排列；風(fēng)險(xiǎn)相關(guān)的表格，默認(rèn)安全降序排序。

表頭排序可以輔助用戶快速挖掘出需要關(guān)注的信息，發(fā)現(xiàn)數(shù)據(jù)信息之間的關(guān)系，一般可按數(shù)字大小、文字拼音順序、字母順序等其它數(shù)據(jù)特征進(jìn)行排序。如果表格中不是所有數(shù)據(jù)都能排序時(shí)，則需要標(biāo)識出可排序操作的列，一般采用三角箭頭做為標(biāo)識，實(shí)時(shí)反饋當(dāng)前操作狀態(tài)。

3.4 控制表內(nèi)容

控制列

可伸縮列

由于存在多個(gè)數(shù)據(jù)標(biāo)題和列，我們只能根據(jù)表格的寬度來展示數(shù)據(jù)。在某些情況下，表格可允許用戶選擇他們關(guān)注的列，在其固定寬度基礎(chǔ)上，讓用戶可以自由拖動列寬邊緣以調(diào)整列寬。

自定義選擇列

由于數(shù)據(jù)報(bào)表，往往需要滿足各種不同的角色在不同場景下的需求，因而在表格數(shù)據(jù)顯示上，一般采取寧多勿少的原則，即盡可能提供詳細(xì)的數(shù)據(jù)，由此會數(shù)據(jù)指標(biāo)過多，難以在表內(nèi)完整展示，導(dǎo)致需要水平拉伸，降低了表格的可讀性。

針對上面這個(gè)問題上，可將所有的指標(biāo)名稱羅列在表格上方，并提供多選操作，在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)（如下圖）。這樣能讓用戶在表格上方看到所有指標(biāo)名稱，避免了原來需要水平拖拽而導(dǎo)致指標(biāo)瀏覽不全的情況。其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。

B端后臺通常會對應(yīng)不同的角色及不同的需求，可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序。同時(shí)系統(tǒng)應(yīng)記住用戶上一次自定義列的設(shè)置。

控制行

控制行高

較小的行高讓用戶無需滾動頁面就能查看到更多的數(shù)據(jù)，但可掃描性的效果易導(dǎo)致視覺迷失。這就是為什么許多成功的數(shù)據(jù)表設(shè)計(jì)包含了控制行高(顯示密度)的功能。

樹形表

行也可以結(jié)構(gòu)化分為不同的類別，前面提到了層級表/樹形表，可以嵌套子表格，展開和折疊?？刹僮靼粹o一般位于各級行標(biāo)題左側(cè)，具有獨(dú)特的視覺效果并具有擴(kuò)展或折疊的功能。單擊表中的類別標(biāo)題會在類別的展開或折疊狀態(tài)之間切換。展開與折疊也將極大的影響行內(nèi)容顯示。

分頁

分頁可以將表內(nèi)容信息劃分成獨(dú)立的頁面來顯示。

優(yōu)點(diǎn)：

1.良好轉(zhuǎn)換：當(dāng)用戶是在結(jié)果列表中查找特定信息而不僅僅瀏覽信息流時(shí)，分頁就是好的選擇。你會知道表格總量與當(dāng)前頁的準(zhǔn)確數(shù)量，能夠決定在哪里停下或者去哪里。

再次尋找特定數(shù)據(jù)時(shí)，分頁方案讓我們能夠大概定向到目標(biāo)數(shù)據(jù)位置。用戶可能難以記錄目標(biāo)數(shù)據(jù)頁數(shù)字，但一般能記錄大概范圍，而頁碼鏈接能讓用戶更容易到達(dá)那里。

2.掌控感：無限滾動就像個(gè)無止境空間——無論你滾動多久，你會感覺永遠(yuǎn)結(jié)束不了。當(dāng)用戶知道可用行數(shù)量時(shí)，他們可以自己主觀做出決定而不是被動滾動。同樣的，當(dāng)用戶能夠看到結(jié)果的數(shù)量時(shí)，他們將能夠預(yù)估他們查看表數(shù)據(jù)大概要花費(fèi)多長時(shí)間。

缺點(diǎn)：

額外的動作：在分頁方案中，用戶要到達(dá)下一頁表內(nèi)容，就必須點(diǎn)擊分頁控件上的按鈕跳轉(zhuǎn)，等待表格新內(nèi)容的加載。

無限滾動

表格無限下拉加載使用戶在數(shù)據(jù)內(nèi)容面前一直滾動查看。向下滾動的時(shí)候不斷加載新內(nèi)容，雖然十分方便與誘人，但不是什么場景都適用。

優(yōu)點(diǎn)：

1.瀏覽：無線滾動提供了一個(gè)的方法讓用戶瀏覽表數(shù)據(jù)信息，而不必等待表格新內(nèi)容的加載。當(dāng)用戶并不特意尋找特定的內(nèi)容時(shí)，他們需要通過查看大量內(nèi)容找到自己中意的信息。

2.體驗(yàn)更好：用戶使用滾動能獲得比點(diǎn)擊分頁有更好的體驗(yàn)。滾動行為要比點(diǎn)擊更快更容易，對于那些連續(xù)且冗長的內(nèi)容，無限滾動要比把分頁的有更好的易用性。尤其在表格區(qū)域狹小時(shí)，使用無線滾動更能節(jié)省空間。

缺點(diǎn)：

1.受限性能：頁面加載速度是良好體驗(yàn)的一切。尤其是表格計(jì)算數(shù)據(jù)時(shí)需注意使用無限滾動，緩慢的加載速度會造成用戶的不耐煩與離開。用戶在一個(gè)表格頁面中越向下滾動，就會加載更多的內(nèi)容，當(dāng)數(shù)據(jù)量過大時(shí)，結(jié)果就是頁面性能越來越低。

2.位置丟失：無線滾動同分頁相比，沒法標(biāo)記當(dāng)前位置且不能再隨意回到之前位置。一旦離開，就會丟失當(dāng)前的瀏覽記錄，如果要回到上次的位置，必須得重新滾動去尋找。當(dāng)用戶有這種行為的話，無線滾動就會讓用戶產(chǎn)生困擾厭煩。尤其當(dāng)你刷新頁面時(shí)發(fā)現(xiàn)自己又回到表格頂部，不得不重新滾動等待結(jié)果的加載以繼續(xù)查看。

3.信息缺失：滾動條并沒有反映出實(shí)際數(shù)據(jù)量。假設(shè)快要接近底部了，當(dāng)受到引誘滾動條再滾動一點(diǎn)點(diǎn)時(shí)，結(jié)果卻會發(fā)現(xiàn)表格數(shù)據(jù)量又刷新了。從一個(gè)可用性的角度來說，打破滾動條的正常使用規(guī)則對用戶來講是糟糕的。

一般來說，無限滾動適用于在數(shù)據(jù)有限且信息重復(fù)的表格，有利于內(nèi)容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。

3.5 查看次要信息

表格內(nèi)容的取舍要建立在對業(yè)務(wù)的了解之上，盡量精簡指標(biāo)，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量，建議默認(rèn)只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。

展開行

展開行允許用戶無需打開新頁面在表格內(nèi)即可查看附加信息，防止用戶迷失。

子表格

表格中打開表格，表格組節(jié)把相關(guān)的行組合在一起，并且能夠收縮和展開，各組節(jié)層級要有樣式區(qū)別。如有需要，在每個(gè)組節(jié)里可以顯示數(shù)據(jù)概要信息。

彈窗

包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗是僅支持打開一個(gè)彈窗進(jìn)行詳細(xì)查看，非模態(tài)彈窗是可以同時(shí)打開多個(gè)，并允許拖動彈窗位置進(jìn)行信息對比。

模態(tài)允許用戶留在表格視圖中，且更多地關(guān)注附加信息和操作：

非模態(tài)彈窗對于主動使用的用戶來說可能很有用，可以通過一系列操作，比較不同行數(shù)據(jù)的細(xì)節(jié)：

視圖切換

可以通過視圖切換查看更多細(xì)節(jié)，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目和右側(cè)的其他詳細(xì)信息，這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到多個(gè)項(xiàng)目時(shí)不會丟失位置。

3.6 數(shù)據(jù)的編輯操作

編輯表格數(shù)據(jù)在大眾化的Web應(yīng)用程序中并不常見。不過，在企業(yè)級Web應(yīng)用程序中，表格則占據(jù)統(tǒng)治地位。此時(shí)，最常見的用戶需求，就是想要像使用Excel一樣實(shí)現(xiàn)表格編輯。畢竟Excel早已成為編輯網(wǎng)格數(shù)據(jù)的一種標(biāo)準(zhǔn)。

表格數(shù)據(jù)的操作大體可分為顯性與隱性。顯性操作，指操作選項(xiàng)顯示在行內(nèi)，直觀明了；隱性操作，當(dāng)鼠標(biāo)懸停時(shí)或勾選才顯示操作選項(xiàng)，界面簡潔明快，可減輕空間壓力，減少干擾。

單行操作和批量操作

操作項(xiàng)一般存在于行數(shù)據(jù)最后，為固定列，或表上方位置，兩者對應(yīng)多種操作場景。

單行數(shù)據(jù)操作

文字按鈕操作項(xiàng)一般不多于三個(gè)時(shí)，圖標(biāo)按鈕不多于四個(gè)時(shí)，操作項(xiàng)跟在行條目后面；當(dāng)超過時(shí)，建議將操作折疊收起，點(diǎn)擊更多彈出多個(gè)操作選項(xiàng)。當(dāng)操作按鈕致灰時(shí)，鼠標(biāo)選中可顯示原因。

如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時(shí)，可使用隱形操作，鼠標(biāo)在行區(qū)域懸停時(shí)，可對當(dāng)前行背景作出區(qū)分，或放大懸停區(qū)域，同時(shí)行尾出現(xiàn)可操作按鈕，進(jìn)行行操作。如谷歌郵箱：

批處理操作

對于數(shù)據(jù)批量操作的場景，建議將操作放到表格上方，與復(fù)選框操作配合使用。批處理操作模式允許用戶對一行或多行對象執(zhí)行操作，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準(zhǔn)、拒絕、復(fù)制之類的操作，這將節(jié)省用戶時(shí)間，避免重復(fù)對多行進(jìn)行相同操作。

表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現(xiàn)過多而暫時(shí)隱藏，如果空間限制導(dǎo)致操作按鈕排列不下，則使用“更多操作”按鈕。

二次確認(rèn)提示：對于用戶操作結(jié)果給出提示窗反饋，用戶點(diǎn)擊「刪除」后，直接操作；出現(xiàn)提示框告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進(jìn)行下一個(gè)操作或者15s內(nèi)不進(jìn)行任何操作，提示框消失，用戶無法再「撤銷」。

在執(zhí)行某些無法撤銷的操作時(shí)，點(diǎn)擊刪除后，出現(xiàn)模態(tài)彈窗進(jìn)行二次確認(rèn)，在當(dāng)前頁面完成任務(wù)。同時(shí)禁止濫用模態(tài)彈窗進(jìn)行二次確認(rèn)，就既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發(fā)生。

單選、多選和全選

數(shù)據(jù)較多時(shí)，單個(gè)選擇數(shù)據(jù)費(fèi)時(shí)費(fèi)力。單選框是只能單選，而復(fù)選框是能選擇單個(gè)、多個(gè)或全部選擇項(xiàng)，而實(shí)際上純粹的單選很少見，所以建議一般場景下在表格最左側(cè)加上復(fù)選框，如前面說到的批量操作，多選后，就可以批量操作。點(diǎn)擊選框所在行的局部能讓整行被選中，每個(gè)選定的行都接受突出顯示處理，這種做法可增大點(diǎn)擊區(qū)域減少界面的混亂。

具體設(shè)計(jì)時(shí)，可以按照數(shù)據(jù)類型進(jìn)行選擇，如郵件已讀、未讀等。

可進(jìn)行選擇的表格需告知用戶已選數(shù)據(jù)量，在翻頁時(shí)是否允許跨頁選擇；全選是當(dāng)前頁視圖中的所有項(xiàng)目還是選擇表格中的所有項(xiàng)目。

單元格編輯、行編輯與表格編輯

針對于需要進(jìn)行數(shù)據(jù)編輯的表格。表內(nèi)編輯能使數(shù)據(jù)更具可操作性，表內(nèi)編輯一般優(yōu)于彈窗。要啟動編輯功能，必須通過鼠標(biāo)單擊，而非鼠標(biāo)懸停。這樣就能確保整潔的網(wǎng)格顯示效果。假如是通過鼠標(biāo)懸停來觸發(fā)，鼠標(biāo)每經(jīng)過一個(gè)單元格就得顯示一個(gè)編輯框，那這種編輯模式就會干擾到不同單元格間的切換，會有多么煩人。

單元格編輯：針對單個(gè)，不連續(xù)的可編輯的單元格，為了讓功能更容易被發(fā)現(xiàn)，可以在單元格數(shù)據(jù)旁放置編輯圖標(biāo)，這樣可編輯和不可編輯的單元格視覺對比就十分明顯。單擊該圖標(biāo)即可觸發(fā)編輯，單元格內(nèi)出現(xiàn)輸入框，保存數(shù)據(jù)并退出。有了這個(gè)隨時(shí)可見的鏈接后，編輯功能就更容易被注意到了。

單元格編輯時(shí)，也可以設(shè)置整個(gè)單元格為熱區(qū)，以便用戶觸發(fā)。

覆蓋層編輯：點(diǎn)擊編輯圖標(biāo)觸發(fā)；通過在頁面上方添加一層來放置編輯數(shù)據(jù)。雖然編輯期間也不會離開當(dāng)前頁面，但卻不是在頁面中直接實(shí)現(xiàn)編輯。而是把一個(gè)輕量級的彈出式覆蓋層（如對話框）作為編輯窗口。

選擇覆蓋層編輯而非行內(nèi)編輯的原因也很多。有時(shí)候，不可能把某個(gè)復(fù)雜的編輯任務(wù)安排在同一個(gè)頁面中完成，如果嵌入頁面的編輯區(qū)域太大，會因?yàn)榘褍?nèi)容過多地推向下方而損害頁面的整體感。

而其他情況下，也可以選擇中斷當(dāng)前頁面流，尤其是被編輯的信息本身非常重要時(shí)。覆蓋層能夠?yàn)橛脩籼峁┟鞔_的編輯空間。提示如果有必要占用專門的屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務(wù)也不重要，就可以考慮使用覆蓋層編輯。

行編輯：針對同一行標(biāo)簽下的數(shù)據(jù)編輯。新增數(shù)據(jù)行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。幾秒后高亮消失，以免過度干擾用戶。

不過，表內(nèi)編輯圖標(biāo)會涉及平衡頁面中視覺干擾的問題，如果功能及其提示在頁面中的數(shù)量過多，很可能造成功能的利用率下降。如果一行有多個(gè)編輯選項(xiàng)，則可以適當(dāng)使用彈窗編輯數(shù)據(jù)；如果表格有大部分單元格數(shù)據(jù)需要編輯，則可以全局編輯。 

全局表格編輯：點(diǎn)擊表格編輯按鈕，當(dāng)前表格所有可編輯的數(shù)據(jù)單元格內(nèi)顯示文本修改框或類似XLSX的角標(biāo)，進(jìn)入一種特殊得編輯狀態(tài)，不會給人直覺造成混亂。這一功能基本用于大面積需要填寫和修改時(shí)，如大型填寫報(bào)表。

大型數(shù)據(jù)表由于支持編輯數(shù)據(jù)處多，這種方法的另一個(gè)問題是容易填錯單元格，想象單元格的密集，用戶意外編輯錯誤也時(shí)有發(fā)生，這樣的話需要編輯/暫存/提交三個(gè)操作。如果發(fā)現(xiàn)編輯的內(nèi)容報(bào)錯可被更正，應(yīng)直接引導(dǎo)用戶更正；如果報(bào)錯內(nèi)容不可被更正，則告知用戶原因。

大型數(shù)據(jù)表如需減少與表格無關(guān)的視覺干擾，提供表格的沉浸式閱讀體驗(yàn)，可提供全屏查看的入口，但應(yīng)注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁面其它內(nèi)容，只留下表格區(qū)域，用戶通過ESC鍵或按鈕隨時(shí)退出全屏模式，學(xué)習(xí)成本較低。

當(dāng)表格數(shù)據(jù)為空時(shí)，在表格的空白內(nèi)容處加入可創(chuàng)建的快捷入口，引導(dǎo)用戶新建表格數(shù)據(jù)，或者導(dǎo)入數(shù)據(jù)。如下圖郵箱已發(fā)送郵箱為空時(shí)：

當(dāng)沒有創(chuàng)建訴求的，直接告之暫無數(shù)據(jù)。如數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)，話術(shù)的表述則需與后臺文案的整體風(fēng)格保持一致。

后記

個(gè)人關(guān)于web表格設(shè)計(jì)的看法基本寫完了，在總結(jié)歸納中也發(fā)現(xiàn)了自己平常設(shè)計(jì)表格中的其他問題。大多表格設(shè)計(jì)在不同場景中需要隨機(jī)應(yīng)變，沒有絕對的規(guī)范，只有相對的規(guī)范。我們要理解規(guī)范背后的原則，推導(dǎo)出適應(yīng)其他場景的規(guī)范。

文章來源：站酷    作者：小龍哈

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)

編輯導(dǎo)語：你有沒有設(shè)計(jì)過結(jié)構(gòu)復(fù)雜、內(nèi)容繁多的表單？在設(shè)計(jì)時(shí)有沒有什么技巧可以化繁為簡、提升填寫者的體驗(yàn)感呢？本文作者為我們羅列出了表單設(shè)計(jì)中可能遇到的一些問題，并且提供了解決方案，讓我們一起來學(xué)習(xí)吧。

距離上次發(fā)文已經(jīng)快半年多了，實(shí)在是慚愧，好久沒有輸出內(nèi)容了，看著每周增加的零星關(guān)注人數(shù)，內(nèi)心更加焦灼難安。

這半年來我換了工作，也適應(yīng)了新的環(huán)境，同時(shí)也在思考新的方向，估計(jì)和大多數(shù)的設(shè)計(jì)師一樣，迷茫時(shí)常伴隨著我。前段時(shí)間寫了幾周的產(chǎn)品體驗(yàn)日記，但覺得缺乏深度就沒發(fā)上來，后續(xù)我將會繼續(xù)寫產(chǎn)品體驗(yàn)日記，完善后分享給大家。

2020所剩無多了，我也會將積攢下的一些內(nèi)容陸陸續(xù)續(xù)發(fā)上來與大家分享，感謝關(guān)注，感謝閱讀。哈哈哈哈

一、導(dǎo)語

你平時(shí)填寫過的最復(fù)雜的表單是什么？調(diào)查問卷還是文檔信息錄入？如果一個(gè)表單字段內(nèi)容巨多、結(jié)構(gòu)多變、填寫耗時(shí)耗力，那你將如何設(shè)計(jì)你的表單使之體驗(yàn)更佳？

面臨的問題:

1. 業(yè)務(wù)復(fù)雜，功能較多

不知道大家是否看過法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊；類似的文檔如果進(jìn)行線上結(jié)構(gòu)化，勢必要同樣要花費(fèi)巨大的人力去填寫表單，完成基礎(chǔ)信息的錄入工作。

同時(shí)，由于錄入的時(shí)間不確定，流程不明確等問題，也制約著表單的填寫。

2. 流程較長，操作繁瑣

多個(gè)不同表單之間的互有關(guān)聯(lián)又相互區(qū)別，填寫的時(shí)候需要來回查看以確認(rèn)信息，查閱和填寫相互并行，操作繁瑣。

3. 字段較多，關(guān)聯(lián)項(xiàng)較多

幾乎每一個(gè)字段都有對應(yīng)的關(guān)聯(lián)項(xiàng)，每個(gè)單選字段的不同項(xiàng)決定不同的內(nèi)容。同時(shí)，由于字段數(shù)量，層級劃分不明確，會使填寫的人失去定位，產(chǎn)生迷惑。

二、解決方案

1. 內(nèi)容分組，分步填寫

根據(jù)業(yè)務(wù)內(nèi)容分級，合理運(yùn)用顏色、間距、字體大小、卡片層級等進(jìn)行信息分級。

2. 實(shí)時(shí)保存，避免數(shù)據(jù)丟失，提供草稿功能，避免任務(wù)中斷

3.字段分組，示意結(jié)構(gòu)，聯(lián)動項(xiàng)隱喻

4. 信息自動帶入，節(jié)省時(shí)間

一般表單是與某項(xiàng)功能掛鉤的，信息會在多個(gè)入口錄入。因此在填寫長表單的時(shí)候，如果能從系統(tǒng)中自動獲取到數(shù)據(jù)，就可以自動為其填充，可根據(jù)業(yè)務(wù)場景，判斷是否讓其修改和更新。

5. 提供二次編輯功能，防止信息輸入有誤

一般的長表單在涉及非審批流的時(shí)候，可以讓其無限二次編輯；如果是處于審批流，則需要根據(jù)業(yè)務(wù)場景限制其編輯次數(shù)或者限定其編輯規(guī)則（草稿可編輯，一旦提交則不可編輯）。

6.提供多人協(xié)作編輯功能

如果一個(gè)長表單，需要多個(gè)不同的業(yè)務(wù)域的人來填寫，那么需要協(xié)同編輯，并實(shí)時(shí)顯示編輯的人員信息。

同時(shí)，為了避免信息丟失和編輯錯亂，在同一個(gè)表單下，同一時(shí)間應(yīng)該限制只允許一個(gè)人進(jìn)行編輯，等其提交完后，可允許其他人進(jìn)行編輯。

7. 實(shí)時(shí)檢驗(yàn)

前端實(shí)時(shí)校驗(yàn)字段輸入規(guī)則，后端統(tǒng)一校驗(yàn)信息交換規(guī)則。

比如對于數(shù)字輸入框的校驗(yàn)、電話號碼的校驗(yàn)、身份證號的校驗(yàn)，應(yīng)該在前端實(shí)時(shí)完成。

在鼠標(biāo)離開焦點(diǎn)區(qū)域或定位到下一個(gè)字段的時(shí)候，提示其填寫有誤；這樣做的目的是減少后續(xù)修改的次數(shù)，在長表單下，統(tǒng)一提示其填寫錯誤會是一場災(zāi)難。

在點(diǎn)擊保存并填寫下一步或點(diǎn)擊提交信息的時(shí)候，就需要跟后端交換數(shù)據(jù)，驗(yàn)證錄入的信息；如果不匹配，則提示錯誤，并從上至下定位至相應(yīng)的錯誤字段。

8.做好填寫引導(dǎo)功能

要通過多種方式，引導(dǎo)表單的填寫。

1）在開始填寫之前，簡要說明該表單的業(yè)務(wù)目標(biāo)，大概需要花費(fèi)的時(shí)間等；

2）開始填寫后，關(guān)于每個(gè)字段的特殊說明，都需要標(biāo)注出來。重要的要顯示在頁面上，不重要的就收起在注釋符號中；

3）填寫的過程中，切記不要到最后才告訴用戶哪里出錯了，重要的信息一定要提示到位，否則一旦出錯，前功盡棄；

4）填寫完成后，引導(dǎo)其下一步的操作，或者返回至列表。

9. 詳情頁也需要注意信息分級

表單填寫完畢后的產(chǎn)出物就是詳情頁，詳情頁是需要瀏覽的。因此在設(shè)計(jì)詳情頁的時(shí)候，應(yīng)該本著讓用戶瀏覽方便的原則去設(shè)計(jì)，需要注意以下幾個(gè)點(diǎn)：

1）結(jié)構(gòu)清晰

結(jié)構(gòu)清晰是指不要講內(nèi)容一股腦的全堆在頁面上，要做好信息的分類；同時(shí)，注意規(guī)劃頁面的層級。

2）設(shè)置快捷導(dǎo)航

如果一個(gè)表單是長且復(fù)雜的，那么其對應(yīng)的詳情頁也會變得復(fù)雜和冗長，因此在頁面的右側(cè)或者頂部設(shè)置合理的快捷導(dǎo)航是很有必要的。

三、小細(xì)節(jié)，大體驗(yàn)

1. 提供快速返回頂部的按鈕

快速返回頂部按鈕的使用要注意場景，如果你的頁面比較長，且沒有分組瀏覽的導(dǎo)航，那就需要設(shè)置快速返回頂部的按鈕。

但是在存在分組瀏覽導(dǎo)航和頂部懸浮標(biāo)簽的情況下，不建議使用快速返回頂部的按鈕，因?yàn)樵谔顚懕韱蔚臅r(shí)候，使用快速置頂?shù)膱鼍氨容^少。

2. 提供分組模塊收起展開功能

當(dāng)一個(gè)模塊混雜著各種信息的時(shí)候，單純的模塊分組已經(jīng)無法處理它的復(fù)雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁面的復(fù)雜度。

3. 步驟提供信息填寫完成度提示

步驟條可以單純的作為步驟指示器使用，也可以作為一個(gè)表單完成度的提示區(qū)域。

4. 重要說明性文字盡量顯示而非收起

在填寫大量字段的表單時(shí)，閱讀表單內(nèi)容和填寫表單同樣耗時(shí)耗力。

如果我們將所有的提示信息隱藏在提示符中，一般情況下用戶不會去查看；但是如果去挨個(gè)查看提示信息，則會多花費(fèi)一個(gè)步驟去點(diǎn)擊或者懸停來查看提示信息，浪費(fèi)了大量的時(shí)間。

因此如果涉及到重要的提示信息，請直接展示在字段的后面，不要隱藏起來。

5. 產(chǎn)品內(nèi)組件應(yīng)該規(guī)范統(tǒng)一

在后臺產(chǎn)品上，關(guān)于組件的規(guī)范統(tǒng)一，想必是人盡皆知的設(shè)計(jì)原則。

無論是各類平臺型設(shè)計(jì)組件，還是各個(gè)公司自造的設(shè)計(jì)組件，保持統(tǒng)一和規(guī)范對產(chǎn)品設(shè)計(jì)有著重要的作用，在這里不贅述組件應(yīng)該怎樣規(guī)范統(tǒng)一。

因?yàn)闊o論是Ant Design還是其他設(shè)計(jì)語言，都有詳盡的關(guān)于組件的定義方法，我在這里講述一個(gè)產(chǎn)品設(shè)計(jì)更高層面或者更深層面的原因：

組件的規(guī)范統(tǒng)一并不僅僅是為了省時(shí)省力，而是為了使用戶在使用的過程中達(dá)到認(rèn)知上的統(tǒng)一和行為上的統(tǒng)一，在進(jìn)行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。

因此在操作相同類的流程時(shí)，用戶會有更多的掌控感，試想一下：如果你在操作人事相關(guān)的流程后，去填寫績效部分的內(nèi)容時(shí)，發(fā)現(xiàn)一個(gè)迥異的界面或者彈窗，你肯定覺得這是不是哪里出錯了，甚至?xí)岩蛇@是否是同一個(gè)系統(tǒng)。

目前大多數(shù)公司的管理系統(tǒng)經(jīng)過多次縫縫補(bǔ)補(bǔ)，內(nèi)部的跳轉(zhuǎn)邏輯已經(jīng)異常感人，界面風(fēng)格也大放異彩，但是使用起來卻無從下手，深感迷茫。

因此大到界面樣式，小到間距大小，產(chǎn)品設(shè)計(jì)的規(guī)范和統(tǒng)一應(yīng)該是最基礎(chǔ)又不可缺少的原則。

6.龐大的信息錄入，表單內(nèi)部要分步填寫，外部可拆分成不同的表單分別填寫

對付復(fù)雜的表單，你需要解決的主要問題并不是填寫方式或者頁面設(shè)計(jì)，而是信息分級和結(jié)構(gòu)拆分。解決了這個(gè)問題，基本上就解決了業(yè)務(wù)問題，其余部分就跟我們常用的表單一致。

將復(fù)雜度降低并不意味著減少頁面的信息，而是通過設(shè)計(jì)師合理的信息劃分，降低視覺上的復(fù)雜度和流程上的復(fù)雜度，這樣才會達(dá)到當(dāng)前場景下的“最佳解決方案”。

四、結(jié)語

隨著互聯(lián)網(wǎng)信息化的深入發(fā)展，復(fù)雜是避免不了的。

我知道大家都推崇簡潔的設(shè)計(jì)，但那只是對視覺和樣式的定義，而非對信息的定義。

我們所處的世界是復(fù)雜的，行業(yè)更是復(fù)雜的。信息的復(fù)雜度與日俱增，想要處理復(fù)雜的信息，就需要從復(fù)雜中尋求規(guī)律，這規(guī)律與業(yè)務(wù)息息相關(guān)。

B端360行，行行深如海，小伙伴們，我們一起慢慢修煉吧~

 

文章來源：人人都是產(chǎn)品經(jīng)理           作者：米蘭小鐵匠

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)

目前我主要深耕于B端設(shè)計(jì)中，深知B端表格設(shè)計(jì)與C端有很大的不同，無論是表格的展示形式以及承載內(nèi)容上都有非常大的差異。而現(xiàn)在網(wǎng)上有不少關(guān)于表格如何設(shè)計(jì)的文章，但要真正落到實(shí)處的少之又少，因此今天我們就來聊聊表格，探討一下B端表格究竟應(yīng)該如何設(shè)計(jì)。

由于表格組件類型復(fù)雜，因此分為上下兩篇，上篇主要講基礎(chǔ)知識點(diǎn)，下篇主要針對交流群中的20個(gè)問題進(jìn)行解答，歡迎持續(xù)關(guān)注～

在我們B端表格頁中，由導(dǎo)航、篩選、表格幾大模塊構(gòu)成，因?yàn)楸砀?strong style="outline:0px;margin:0px;padding:0px;">面積占比最大，頁面呈現(xiàn)最為重要，會直接影響用戶的使用體驗(yàn)。

在我們對表格的設(shè)計(jì)思考過程中，需要注意兩項(xiàng)原則：易讀與易用

前者是提升使用者在表格瀏覽時(shí)的體驗(yàn)，主要是從信息密度、色彩分隔、以及視覺節(jié)奏三個(gè)方面去理解；后者是使用表格時(shí)的操作感受，比如快捷操作、多數(shù)據(jù)編輯等方面去理解。無論是B端的任何頁面，表格都是必不可少的部分。

想要把這三種形式講透，需要將數(shù)據(jù)的形式結(jié)合起來說，我會從展示形式、數(shù)據(jù)結(jié)構(gòu)、前端標(biāo)簽 三個(gè)方面去解釋三者的區(qū)別。

1) 數(shù)據(jù)采集 - 表單

表單擁有一對一的數(shù)據(jù)結(jié)構(gòu)，能夠讓用戶明白數(shù)據(jù)間的對應(yīng)關(guān)系。同時(shí)使用表單的門檻，擁有更合理的錄入形式，比如在常見的問卷調(diào)查、登陸注冊都是采取表單的形式。

在前端展示方面，表單采用的標(biāo)簽一般會包含：text、password、radio、checkbox、button、submit、reset、image、file等屬性，我們也要針對不同的屬性進(jìn)行相應(yīng)的設(shè)計(jì)區(qū)分。

2) 單唯獨(dú)數(shù)據(jù)整理 - 列表

列表能夠?qū)?shù)據(jù)在一列中井然有序的展示，保持?jǐn)?shù)據(jù)的有序與整潔。列表擁有一對多的數(shù)據(jù)結(jié)構(gòu)，能夠讓用戶理清一條數(shù)據(jù)下的多個(gè)對應(yīng)關(guān)系，并且多個(gè)對應(yīng)關(guān)系是相互并列。比如在常見地待辦事項(xiàng)、走查清單中里，就是使用單維度數(shù)據(jù)進(jìn)行排列。

在前端展示上，列表中的標(biāo)簽分為有序與無序。

? 有序列表：即有順序的列表，其各個(gè)列表項(xiàng)按照一定的規(guī)則排列定義，前端標(biāo)簽上采取<ol><li>的結(jié)構(gòu)。

通常有序列表一般為數(shù)字序號（1、2、3、4...）或者字母序號（a、b、c、d）

? 無序列表：無序列表的各個(gè)列表項(xiàng)之間沒有順序級別之分，為并列關(guān)系。前端標(biāo)簽上采取<ul><li>的結(jié)構(gòu)。

3) 多緯度數(shù)據(jù)整理、數(shù)據(jù)分析 - 表格

在多維度的數(shù)據(jù)分析中，你是永遠(yuǎn)的逃離不了表格，使用多維度數(shù)據(jù)進(jìn)行統(tǒng)一的結(jié)構(gòu)化展示，讓用戶清晰的看到在同一主題下的多條數(shù)據(jù)的對比，使數(shù)據(jù)能夠進(jìn)行多維度的展示，保證數(shù)據(jù)的完整性。

在前端的方面，表格中都是采取 <table> 標(biāo)簽進(jìn)行展示，同時(shí)表格中的行與列分別用 <tr> 與 <td> 標(biāo)簽，我們通常說的表頭，則為 <th> 標(biāo)簽。但要注意，在前端眼中表格永遠(yuǎn)沒有列的概念，列都是每行拼接而成。

正式開始之前，我們先定義一下表格～

表格是一種常見的信息展現(xiàn)形式，它是所有B端組件中信息展示密度最高，同時(shí)涵蓋了B端的所有場景，因此是B端設(shè)計(jì)中的一個(gè)重要的組件。

在我們常見的B端產(chǎn)品改版中，除了對頁面流程調(diào)整以外，更多就是圍繞表格而展開的一系列優(yōu)化。因此表格的設(shè)計(jì)，做為B端設(shè)計(jì)師的基礎(chǔ)能力之一，也是檢驗(yàn)一個(gè)B端設(shè)計(jì)師是否合格的關(guān)鍵因素。

1) 表格痛點(diǎn)

? 形式單一

表格屬于形式十分單一的組件，對于沒有經(jīng)驗(yàn)的設(shè)計(jì)師來說，會認(rèn)為能夠調(diào)整的地方實(shí)在太少，往往在思考層面就會有所不足。對于一個(gè)B端表格來說，它需要具備數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計(jì)，因此功能多而全，很難思考解決問題思路。

? 組件聯(lián)動多

通常設(shè)計(jì)師設(shè)計(jì)單個(gè)組件，都會有較好的全量意識。而到了多組件的聯(lián)動時(shí)，就會出現(xiàn)問題。

比如在表格中，除了表格本身，還會有搜索、篩選、視圖、分頁等操作，如果不對多組件的交叉使用進(jìn)行思考，也會缺少對于這些場景的設(shè)計(jì)。

? 數(shù)據(jù)形式多

在表格中，會承載多種多樣的字段類型，而每一個(gè)字段類型都會有相應(yīng)的差異。形式的不同落到表格上就會有不同的呈現(xiàn)形式，在關(guān)鍵數(shù)值的處理上，也會差強(qiáng)人意。因此看上去簡單的一個(gè)表格，其實(shí)會有很多需要設(shè)計(jì)的點(diǎn)。

而深入到表格的內(nèi)部中，你會發(fā)現(xiàn)能做的遠(yuǎn)遠(yuǎn)不止于此，如果剛開始沒有對表格進(jìn)行梳理，那么你在設(shè)計(jì)的過程中，對于反復(fù)出現(xiàn)的表格將束手無策，為了讓大家能夠?qū)Ρ砀裼懈畹睦斫?，我將表格進(jìn)行系統(tǒng)的拆解，結(jié)合實(shí)際案例，能夠讓表格更淺顯易懂。

2) 表格拆解

首先問大家一個(gè)問題，你覺得表格一共有幾個(gè)部分組成，分別是什么？給大家五秒鐘時(shí)間思考～

5

4

3

2

1

～

在我看來，表格一共分為五部分：

a.標(biāo)題

概括整個(gè)表格的內(nèi)容信息，讓用戶一眼就知道該表格的用途是否符合自己心中的預(yù)期。

在實(shí)際場景中，除了通過標(biāo)題文字去的形式之外，你還可以為每一個(gè)表格去設(shè)計(jì)不同類型的圖標(biāo)，這樣能夠讓用戶看到圖標(biāo)就能聯(lián)想到內(nèi)容，這也是現(xiàn)在無代碼開發(fā)平臺常見的處理方式。

b.工具欄

但在工具欄的排列方式會有非常多的講究，在市面上的操作區(qū)域一般可分為單行與雙行的狀態(tài)，可根據(jù)自身產(chǎn)品要求的特點(diǎn)進(jìn)行隨意的變化，會在文章后半部分具體講到工具欄的設(shè)計(jì)思路，這里就不再過多贅述。

c.表頭

概括每列的主要信息，在用戶使用表格中，起到數(shù)據(jù)解釋作用，讓數(shù)據(jù)能與之進(jìn)行匹配，使用戶能夠看懂?dāng)?shù)據(jù)。同時(shí)在表頭處會擁有一些操作，比如凍結(jié)、篩選、排序都會放置于此，因此需要進(jìn)行留意。

d.單元格

承載用戶的每一條數(shù)據(jù)，也是整個(gè)表格的核心。單元格的大小行高都會直接影響用戶使用表格的體驗(yàn)，單元格的設(shè)計(jì)上也會有很多設(shè)計(jì)思路，在后半部分也給他家提供了我自己的看法，與大家進(jìn)行探討，在這個(gè)就先按下不表。

e.分頁

嚴(yán)格意義上講，分頁是不屬于表格當(dāng)中，但當(dāng)數(shù)據(jù)超過用戶所設(shè)定的閾值時(shí)，就需要使用分頁拆解數(shù)據(jù)，所以分頁和表格是經(jīng)常聯(lián)系在一起的。分頁一共有：基礎(chǔ)型、迷你型、完整型三種類型。

而如何進(jìn)行跨頁的操作，一直都是分頁在B端中的難點(diǎn)，需要有好的思路與邏輯，在分頁模塊中與大家聊聊。

你知道表格類型的多少決定你了設(shè)計(jì)表格的下限。

雖然在大多數(shù)業(yè)務(wù)場景中都是使用基礎(chǔ)表格，但在B端產(chǎn)品中業(yè)務(wù)的多樣性使得很多特殊的表格有它獨(dú)特發(fā)揮的空間。

我發(fā)現(xiàn)在我的B端交流群都有著類似的問題，他們不知道表格還存在這么多的類型，這時(shí)候你與別人之間的認(rèn)知的差距就是你設(shè)計(jì)優(yōu)勢所在。

1) 基礎(chǔ)表格

基礎(chǔ)表格是根基，是由行與列的單元格組成。在使用層面上能滿足用戶多維度查看數(shù)據(jù)的需求。因?yàn)榇蠹叶己苁熘?，在這一章節(jié)并不是主角，我們就不做過多贅述。

2) 樹形表格 - 包含關(guān)系

當(dāng)表格中的數(shù)據(jù)為包含與被包含的結(jié)構(gòu)時(shí)，可采取樹形表格。

通過逐級大綱的形式來展現(xiàn)數(shù)據(jù)間的層級關(guān)系，讓整個(gè)信息結(jié)構(gòu)變得一目了然。這一表格形式常出現(xiàn)于項(xiàng)目管理工具中，比如 Teambition、Tapd、飛蛾都有這樣的設(shè)計(jì)。

Tapd

作為騰訊最重要的項(xiàng)目管理工具，在產(chǎn)品設(shè)計(jì)之初，就考慮到類似情況，你能夠在Tpad單列數(shù)據(jù)編輯點(diǎn)擊入口，創(chuàng)建子數(shù)據(jù)，這樣在項(xiàng)目管理的場景下，有著較為友好的交互體驗(yàn)。

Teambition

前段時(shí)間，Teambition正式成為阿里旗下的辦公套件，而釘釘?shù)脑漆斠惑w化，或許證明這樣龐大的市場仍然還要等待時(shí)間的挖掘。期待資本對于B端行業(yè)的更多動作

我們回到設(shè)計(jì)上，Teambition在9月份經(jīng)歷的改版，變化很多，有機(jī)會可以總結(jié)一個(gè)改版分析分享給大家，作為一個(gè)項(xiàng)目管理軟件，Teambition也擁有樹形表格的這樣一共功能，它的添加入口出現(xiàn)在每個(gè)數(shù)據(jù)詳情頁的最下方，同時(shí)在視圖層面，也可以篩選展示為：所有任務(wù)、僅父任務(wù)、僅子任務(wù)四種場景，更能滿足用戶的需求～

3) 子表格 - 嵌套關(guān)系

當(dāng)一條主數(shù)據(jù)下有多條數(shù)據(jù)結(jié)構(gòu)不同的關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套時(shí)，這時(shí)候就可以用子表格進(jìn)行創(chuàng)建。它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋，詳細(xì)的了解主數(shù)據(jù)中數(shù)據(jù)的含義。從表象上看，就是在一個(gè)表格中還能嵌套另一個(gè)表格。

比如在對某集團(tuán)對旗下子公司的銷售表格中，它能夠通過嵌套子表格的形式，將每一個(gè)子公司下的銷售人員的銷售記錄進(jìn)行記錄，從而能夠更加細(xì)的了解到每一個(gè)公司、每一個(gè)人員的具體情況。

在國外報(bào)表中，這類表格很少出現(xiàn)，而在中國的報(bào)表中，嵌套子表格算是一種不折不扣的中國式報(bào)表。

當(dāng)然這里我們依舊可以深入理解，比如在兩個(gè)表格之間，用戶是通過什么樣的方式建立一個(gè)父子的關(guān)系？表格中當(dāng)父數(shù)據(jù)刪除時(shí)，子數(shù)據(jù)如何處理？設(shè)計(jì)上對父子之間的關(guān)聯(lián)有著何種限制，這都是我們需要思考的，因?yàn)檫@里牽涉到業(yè)務(wù)實(shí)在太多，我也無法抽象出一個(gè)規(guī)律供大家學(xué)習(xí)，因此只有具體問題具體分析。

4) 交叉表格/表頭分組 - 兩條數(shù)據(jù)在形式上有交叉

當(dāng)一個(gè)表格里面有多條數(shù)據(jù)在同一個(gè)小范圍的維度進(jìn)行展示時(shí)，它就是交叉表格。從表象上看，就是表頭有很多分組進(jìn)行區(qū)分，因此它也叫做表頭分組。

它能夠通過硬拆分將數(shù)據(jù)進(jìn)行切割，但是這樣數(shù)據(jù)的易讀性就是有很大的差距，比如在2010-2020公司年度收支表格中，需要同時(shí)展示每一年份的收入、支出與利潤，使用交叉報(bào)表能夠讓用戶一眼就是看清數(shù)據(jù)，而基礎(chǔ)表格卻不行。交叉表格也算是中國式表格中的一種，能夠滿足具體業(yè)務(wù)上的需求。

5) 圖表表格 表格數(shù)據(jù)的另一種展現(xiàn)形式

當(dāng)一個(gè)表格里面有多種圖表數(shù)據(jù)進(jìn)行展示時(shí)，他就是圖表表格。

在對一些項(xiàng)目做定制化開發(fā)時(shí)，這是十分常見的場景。用戶點(diǎn)擊某一數(shù)據(jù)后，直接跳出數(shù)據(jù)的統(tǒng)計(jì)圖，方便用戶進(jìn)行對比。同時(shí)這一功能也可以通過儀表盤這樣的功能去解決，也就說到國內(nèi)最愛做的數(shù)據(jù)可視化。

1) 表格尺寸

這是很多人都會忽略的一個(gè)點(diǎn)，主要是大家對于表格的理解各不相同，也沒有具體的文章對于表格尺寸有個(gè)非常明確的限制，在這里分享一個(gè)我常用的數(shù)據(jù)點(diǎn)，用于判斷表格設(shè)計(jì)的優(yōu)劣：表占比。

表占比：表占比是指在1920x1080的屏幕大小下，表格占整個(gè)頁面的比例 即：表格面積 / 頁面面積 = 表占比

這里需要指出，這里的表格面積是指，表頭+單元格+分頁（不包含工具欄）

在我對十幾款主流B端軟件的總結(jié)分析中，驚奇的發(fā)現(xiàn)大多數(shù)產(chǎn)品「表占比」都是在65-70%之間，而一些不注重交互設(shè)計(jì)上的產(chǎn)品則會有所偏差。

那為何65-70%是一個(gè)更為合理的數(shù)據(jù)？

因?yàn)橹灰陧撁嬷谐霈F(xiàn)表格，就代表這個(gè)頁面一定是以表格作為核心。而表占比低于65%，代表頁面中的表格不處于內(nèi)容的核心，你需要重新審視這個(gè)頁面所需要傳達(dá)的功能。

如果表占比高于80 %，則代表表格出現(xiàn)面積過大，要考慮用戶是否能夠接受如此大的占比。

因此，設(shè)計(jì)的合理性來說，占比在65-70%之間能夠保證數(shù)據(jù)展示的合理性，同時(shí)這主要是針對CRM產(chǎn)品，大家可以使用這個(gè)占比去衡量自己設(shè)計(jì)的B端產(chǎn)品～

當(dāng)然這樣的情況并不是一塵不變的，B端最大的魅力便是業(yè)務(wù)邏輯，我們來看一個(gè)看起來像是反面的例子：在銷幫幫中，表占比為：61.2% ，看似是一個(gè)并不合格的成績，而且數(shù)據(jù)十分異常，讓我想要深挖，為何會如此的低。

通過進(jìn)一步的分析，發(fā)現(xiàn)銷幫幫是一款與釘釘生態(tài)深度綁定的產(chǎn)品，其產(chǎn)品只能通過釘釘軟件進(jìn)行使用，而釘釘本身默認(rèn)并不是1080px的寬度，用戶打開并且全屏的尺寸偏小。默認(rèn)尺寸大小的不同，最終讓銷幫幫選擇去滿足業(yè)務(wù)而犧牲表占比去換取更多的功能。

2) 工具欄設(shè)計(jì)

因?yàn)樵贐端的工具欄的設(shè)計(jì)中，市面上缺少思路與方法的指導(dǎo)，會出現(xiàn)非常多的問題，因此我展開講講工具欄的設(shè)計(jì)，就不出單獨(dú)系列進(jìn)行講解～

首先，對于工具欄，不同的產(chǎn)品，會對它有著不同的定義。比如在Apple MacOS 系統(tǒng)當(dāng)中經(jīng)常提到的Toolbars和Toolbar Items；又或者是Microsoft 產(chǎn)品中采取的Ribbon設(shè)計(jì)模式。在設(shè)計(jì)底層思路上截然不同，平臺級產(chǎn)品思路與定制化產(chǎn)品思路存在很多截然不同的做法，我們今天簡單聊聊大家遇到過多的表格工具欄設(shè)計(jì)，不做深挖～

在表格工具欄的設(shè)計(jì)中，信息分區(qū)與頁面透氣是非常重要的兩個(gè)設(shè)計(jì)核心。

信息分區(qū)：

因?yàn)楣ぞ邫谑怯蓸?biāo)題、篩選、搜索、視圖、新建等操作組成，而功能間的區(qū)分是工具欄設(shè)計(jì)的一個(gè)關(guān)鍵。

當(dāng)一個(gè)工具欄中，需要將如此多的元素進(jìn)行組合排列時(shí)，必然會有其排序的規(guī)則，這時(shí)我們就可以通過親密性原則，對工具欄中的信息進(jìn)行相應(yīng)區(qū)分

在設(shè)計(jì)的親密性原則中，我們可以將功能相近的工具放在一起，比如：搜索與篩選都是數(shù)據(jù)過濾的操作，應(yīng)該放在同一分區(qū)；

同樣，工具欄也會存在一些功能點(diǎn)不太相近操作，我們就應(yīng)該通過分區(qū)將其間隔開，比如在下圖中，每個(gè)功能都將其用線條區(qū)分。

當(dāng)然，在信息的去區(qū)分上，也有強(qiáng)弱兩種不同的方式，一種是通過線條直接分割；另一種是將工具欄進(jìn)行空間上的區(qū)分。因此可以通過信息區(qū)分去檢查你的工具欄設(shè)計(jì)是否合理。

內(nèi)容呼吸：

在一個(gè)定制化項(xiàng)目中，設(shè)計(jì)師一定要讓自己的頁面具有呼吸感。在B端業(yè)務(wù)中，信息量本身就已經(jīng)足夠龐大，而頁面的中的疏密關(guān)系就顯得尤為重要。

通常列表都承載著繁雜、冗余的數(shù)據(jù)，是一個(gè)信息集中的密；工具欄作為與表格關(guān)聯(lián)的上部分，呼吸感便成為表格的重要因素。通常在表頭處要將空間盡量分散開，這樣才能滿足整體的疏密關(guān)系。

3) 表格設(shè)計(jì)

經(jīng)?？吹揭恍┦秩唠s的表頭，甚至它喪失了表頭的真正含義。在實(shí)際情況下，盡可能明確、簡單的講出表頭的內(nèi)容，以免造成表格的宣兵奪主。當(dāng)然也會存在一些專業(yè)術(shù)語，這時(shí)候，給一個(gè)Tooltips再合適不過。

4) 單元格設(shè)計(jì)

在表格中，單元格的行高是一直都是一個(gè)難以控制的變量，因?yàn)樾懈邥苯涌刂票砀裰械男畔⒚芏?，而信息密度永遠(yuǎn)是一個(gè)無法量化的元素。而在我們設(shè)計(jì)過程中，需要采取盒子模型的方式，讓你的設(shè)計(jì)更加落地。

知識點(diǎn)補(bǔ)充：盒子模型

從前端開發(fā)而言，單元格是一個(gè)最為基礎(chǔ)的盒子模型。而HTML中的所有元素都可以看作是一個(gè)盒子。而我們所設(shè)計(jì)的頁面也正是由這個(gè)樣的原理去還原出來。

Margin(外邊距)：清除邊框外的區(qū)域，外邊距是透明的。

Border(邊框)：圍繞在內(nèi)邊距和內(nèi)容外的邊框。

Padding(內(nèi)邊距)：清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。

Content(內(nèi)容)：盒子的內(nèi)容，顯示文本和圖像。

a.單元格內(nèi)容

內(nèi)容一般為文字、圖標(biāo)、頭像等等，而對于數(shù)據(jù)中你想要格外突出的內(nèi)容，這里稱為關(guān)鍵數(shù)據(jù)標(biāo)識別。從盒子模型的角度來看，它就是當(dāng)中的Connect，但單元格內(nèi)容中，一般會有一些處理技巧：

關(guān)鍵數(shù)據(jù)標(biāo)識：

用戶在使用表格時(shí)，會經(jīng)常去留意一些關(guān)鍵的數(shù)據(jù)。比如數(shù)據(jù)的狀態(tài)、變化的多少…

如果在系統(tǒng)中，你能夠很明確知道用戶想要了解的數(shù)據(jù)時(shí)，便可在關(guān)鍵數(shù)據(jù)上進(jìn)行標(biāo)識。這樣能夠幫助用戶快速定位到自己想要的信息，減少數(shù)據(jù)尋找所化的時(shí)間。但如果你對關(guān)鍵數(shù)據(jù)標(biāo)識出現(xiàn)誤判，這條數(shù)據(jù)便是一條十分干擾的數(shù)據(jù)，因此在這里的設(shè)計(jì)，需要慎重考慮。

比如在飛書的成員與部門中，對于賬號狀態(tài)就是一個(gè)關(guān)鍵數(shù)據(jù)的標(biāo)識，一方面用戶可以快速了解到已經(jīng)激活的成員，另一方面對于未激活狀態(tài)的進(jìn)行突出展示，同時(shí)給予用戶未激活后的再次發(fā)送提醒的操作，是對用戶使用的優(yōu)化提升。但，如果將不重要的數(shù)據(jù)進(jìn)行標(biāo)識，例如手機(jī)號，那么這將會是一個(gè)令人痛苦的設(shè)計(jì)。

人員角色展示

人員角色展示在表格中十分常見，通常會是以用戶名稱+頭像的形式展示。

但在真實(shí)場景的表格中，頭像需要給予默認(rèn)的形式，比如釘釘、飛書就是以用戶“姓”作為頭像的默認(rèn)值，而在多個(gè)人員角色展示時(shí)，就需要考慮特殊情況，無論是極值省略展示與獲取全量數(shù)據(jù)中，都需要我們進(jìn)行設(shè)計(jì)上的處理。

進(jìn)度條

進(jìn)度條是屬于關(guān)鍵數(shù)據(jù)的一種，它所涉及到的功能與圖表表格類似，能夠更直觀展示數(shù)據(jù)的占比，方便用戶對于多條數(shù)據(jù)間的值進(jìn)行判斷。進(jìn)度條常見于“容量、使用量”的數(shù)據(jù)中。

表格空白處理

表格中經(jīng)常出現(xiàn)空數(shù)據(jù)的情況，而表格的留白對于用戶而言會造成一些困擾，特別存在與頁面中的大面積留白，感覺像是數(shù)據(jù)沒有加載出。因此在表格空白數(shù)據(jù)處理上，可以使用“-”來進(jìn)行默認(rèn)展示。

b.單元格行高

單元格行高一般由：文字大小、文字行高、左右上下邊距共同組成。

從盒子模型的角度來看，它就是其中的Padding。因此行高的確定，是由上方四個(gè)條件共同組成。

文字大?。?/strong>一般出現(xiàn)在表格中的文字大小都在12-16px之間，通常13、14px最為常見，建議大家設(shè)計(jì)也在此范疇內(nèi)。

文字行高： 行高是一行文本垂直方向的高度，這個(gè)高度和字高無關(guān)，文字內(nèi)容水平居中?？稍O(shè)置為字號的1.2-1.8倍，文字與分割線間距離可以設(shè)定為字號的1-1.5倍。

邊距（Padding）：表格中的邊距分為左上右下四個(gè)方向，而左上右下恰好就是對應(yīng)前端去編寫Padding代碼的順序，在對頁面驗(yàn)收時(shí)，便可采取這樣的形式。

單元格行高可配置：單元格行高直接影響著信息排列的密度，而在實(shí)際業(yè)務(wù)中，真正落地也有著不同的做法。

在對定制化項(xiàng)目的開發(fā)中，通常會設(shè)計(jì)一套設(shè)計(jì)師認(rèn)為更加合理的單元格高度，一般為32px-56px區(qū)間內(nèi)，而在很多通用化產(chǎn)品中，存在多個(gè)設(shè)備屏幕分辨率的差異，為了讓每一個(gè)分辨率下的產(chǎn)品都能夠有較好的展示效果，于是乎將選擇權(quán)交給用戶，在表格左下角會設(shè)置舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足需求，使得表格更加落地合理。

總結(jié)：整個(gè)單元格的行高，就是由這三部分組成，它們的嵌套與組合，所形成了單元格的行高

c.表格分割

在表格設(shè)計(jì)當(dāng)中，每一條線都有著它存在的意義。

當(dāng)表格中展示橫線；隱藏縱線。

用戶的橫向閱讀體驗(yàn)更佳，強(qiáng)調(diào)一條數(shù)據(jù)的完整性，能夠讓用戶進(jìn)行快速的對應(yīng)。

當(dāng)表格中展示縱線；隱藏橫線。

用戶的縱向閱讀體驗(yàn)更佳，強(qiáng)調(diào)數(shù)據(jù)上下間的對比，能夠讓用戶找到同一緯度數(shù)據(jù)下的對比。

比如在一個(gè)組織架構(gòu)的成員列表中，我相信大家都設(shè)計(jì)過類似頁面，同樣的設(shè)計(jì)方式，我一個(gè)采取展示橫線、一個(gè)展示縱線，結(jié)果明顯，我成員需要閱讀完整條數(shù)據(jù)，因此橫線會更加合理。

當(dāng)然，在我們?nèi)粘５脑O(shè)計(jì)中，展示橫線的場景顯然會更多，但我們?nèi)粘Ｊ褂脮r(shí)，數(shù)據(jù)對應(yīng)的場景還會更多這是需要有更強(qiáng)的設(shè)計(jì)形式：

d.行、列凍結(jié)

當(dāng)表格的行與列的數(shù)量過多時(shí)，會導(dǎo)致一屏展示不下，而表格中的關(guān)鍵信息與操作是需要在任何時(shí)候都展示，這是采取行、列凍結(jié)，能讓用戶快速觸達(dá)。

表頭凍結(jié)：通常出現(xiàn)在垂直滾動時(shí)，通過固定表頭的信息，能夠讓用戶閱讀時(shí)對應(yīng)不同的數(shù)據(jù)，使用戶更好理解數(shù)據(jù)。

首尾凍結(jié)：通常出現(xiàn)在水平滾動，通過固定首列的主屬性字段以及尾列的數(shù)據(jù)操作，來滿足用戶對于一列數(shù)據(jù)的認(rèn)知，從而使用戶進(jìn)行快速操作。

5) 分頁設(shè)計(jì)

在對分頁設(shè)計(jì)的分析中，我們需要對分頁中的元素進(jìn)行拆解，才能明白分頁的類型所帶來的不同。

表格信息：會展示表格信息當(dāng)中的數(shù)據(jù)總量、更新時(shí)間、默認(rèn)排序方式等...

數(shù)據(jù)總量主要展示用戶需要瀏覽的內(nèi)容的總量；常見于管理后臺搜索、篩選符合條件的數(shù)據(jù)記錄時(shí)，搜索結(jié)果頁通常會展示這個(gè)信息，這讓銷售人員在操作時(shí)有心理預(yù)期。

更新時(shí)間主要是展示用戶當(dāng)前表格所操作時(shí)的日期時(shí)間；常見于金融類產(chǎn)品中，他們對于表格中數(shù)據(jù)的時(shí)效性尤為關(guān)注，這樣可以方便用戶對表格數(shù)據(jù)中的有效性進(jìn)行判斷

默認(rèn)排序方式主要是展示表格中是按照哪一個(gè)字段進(jìn)行的排序；通常這種做法多出現(xiàn)于表頭直接展示icon，但對于可配置化的產(chǎn)品而言，隨著列數(shù)的增多，你越來越找不到你想要的默認(rèn)排序方式，因此在表格的固定位置展示，就再好不過（記住，只針對特定場景）

頁面展示數(shù)量：結(jié)構(gòu)為「X條/頁」

它能控制每個(gè)頁面展示多少條數(shù)據(jù)；當(dāng)在系統(tǒng)中有很多數(shù)據(jù)時(shí)，你可以直接通過「頁面展示數(shù)據(jù) * 分頁總數(shù)」 直接算出整個(gè)表格的數(shù)據(jù)總和。

上一頁和下一頁翻頁：分頁中基本組成元素通過用戶點(diǎn)擊上一頁、下一頁的按鈕，實(shí)現(xiàn)表格的翻頁功能。翻頁通常會根據(jù)場景不同，去省略翻頁中的不同元素，比如在下面馬上那個(gè)講到的三種翻頁類型，但是上一頁和下一頁是絕對不可省略的。翻頁也如同你翻書一樣，可以進(jìn)行對數(shù)據(jù)的逐頁閱讀，遵從用戶之前的使用習(xí)慣。

當(dāng)前頁碼：當(dāng)前頁碼說明了頁面中數(shù)據(jù)當(dāng)前所處的位置，方便用戶進(jìn)行翻頁的操作。

相鄰頁碼展示：相鄰頁碼通常展示前后兩頁，比如你在第6頁時(shí)，頁面需要展示：4、5、6、7、8；但頁碼在第1頁時(shí)，就需要展示：1、2、3、4、5；頁尾同理。

更多分頁：當(dāng)表格數(shù)據(jù)過多時(shí)，就需要使用分頁，同樣，當(dāng)分頁過多時(shí)，我們需要進(jìn)行處理，就是省略，采用更多分頁，去展示多余的分頁情況，當(dāng)用戶需要查看更多的分頁，點(diǎn)擊更多圖標(biāo)即可。

總頁數(shù)：代表大概會有多少頁此類數(shù)據(jù)，通過使用總頁數(shù)才能讓用戶知道

總頁數(shù)說明了內(nèi)容一共有多少頁，就像一本紙質(zhì)書有總頁數(shù)，一本有聲書有總時(shí)長；通過這個(gè)元素，用戶才能了解內(nèi)容的多少，對整理內(nèi)容有個(gè)把握。

頁碼跳轉(zhuǎn)：頁碼跳轉(zhuǎn)幫助用戶從當(dāng)前頁面跳轉(zhuǎn)到其他某個(gè)頁面；比如用戶在搜索了某件商品，按銷量排序，這時(shí)瀏覽到了第15頁，滿意度越來越低；于是打算從前5頁選一個(gè)，這時(shí)就能通過頁碼跳轉(zhuǎn)快速跳轉(zhuǎn)到第1-5頁了。

簡潔型：

當(dāng)分頁數(shù)量較少時(shí)，通常在7頁以內(nèi)，就只有最基礎(chǔ)的展示：上一頁、分頁數(shù)量、下一頁。

迷你型：

當(dāng)頁面空間不足或者降低分頁的視覺影響時(shí)，可以采用迷你型，主要為當(dāng)前頁/總頁數(shù)，可以直接跳轉(zhuǎn)到某頁面。

完整型：

當(dāng)表格數(shù)據(jù)較多，為了滿足更多的用戶需求，可以根據(jù)需求選擇分頁類型。比較完整的分頁還包括如下功能：顯示總數(shù)、調(diào)整每頁顯示條數(shù)、直接跳轉(zhuǎn)到某頁。完整型的雖然滿足各種功能需求，但是所占空間較大，所以我們要根據(jù)自己的需求合理拆分使用。

分頁固定：

在表格中使用分頁，除了選擇合理的分頁類型外，我們還需要注意當(dāng)數(shù)據(jù)過多的時(shí)候，是否要固定分頁。這個(gè)需要根據(jù)需求來決定，如果用戶翻頁很頻繁，表格數(shù)據(jù)又特別長，就可以考慮分頁固定在底部，免得每次用戶翻頁都要跑到表格的最底部才能分頁，還可以在表頭也放迷你型分頁。但通常在設(shè)計(jì)表格的時(shí)候就沒有固定，也很少使用表頭分頁，所以根據(jù)需求來定。同樣按鈕的設(shè)計(jì)也會存在類似的情況。

另外就是當(dāng)數(shù)量過少時(shí)，只有一頁或者無數(shù)據(jù)的時(shí)候，我們是不需要分頁的，這個(gè)時(shí)候最好去掉分頁，展示在這里沒有什么意義了。但很多時(shí)候我們設(shè)計(jì)沒有做區(qū)分，開發(fā)也就不管了。

老讀者都知道，我會反復(fù)去強(qiáng)調(diào)“場景”這一概念（比如在導(dǎo)航菜單、篩選、彈窗、圖標(biāo)中經(jīng)常提到這一詞），因?yàn)槟阒挥忻靼子脩粽嬲臉I(yè)務(wù)場景，才能夠真正的明白用戶的痛點(diǎn)。我們回到表格中，在表格的場景主要分為五類不同場景：數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計(jì)與通用場景。我會通過不同場景的梳理分析我們在不同場景中存在那些優(yōu)化點(diǎn)，可以進(jìn)行深入探討。

1) 數(shù)據(jù)瀏覽

在數(shù)據(jù)瀏覽的場景中，本質(zhì)上是對大量數(shù)據(jù)進(jìn)行尋找與確認(rèn)。用戶需要在此場景下進(jìn)行準(zhǔn)確的數(shù)據(jù)查找。而伴隨著用戶的尋找，就需要使用表格當(dāng)中的工具進(jìn)行輔助查找，比如篩選、搜索，這些工具的出現(xiàn)，都能夠幫助用戶進(jìn)行數(shù)據(jù)的清洗，使得用戶想要的數(shù)據(jù)能夠快速的被找到。

比如：我們公司的銷售人員在每天早上，都需要去 check in 今天自己所要跟進(jìn)、回訪的客戶，銷售人員就會通過表格中的各種工具，去幫助銷售人員找到自己想要的那部分?jǐn)?shù)據(jù)。

常見行為及設(shè)計(jì)點(diǎn)：

數(shù)據(jù)篩選瀏覽：通過自己對數(shù)據(jù)的一定了解，結(jié)合各種篩選條件，配合得到用戶想要的篩選結(jié)果。

數(shù)據(jù)多選：用戶可以通過多選，為他尋找的數(shù)據(jù)進(jìn)行標(biāo)記，方便之后的操作。

2) 數(shù)據(jù)新增

數(shù)據(jù)新增本質(zhì)上是將復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，通過系統(tǒng)字段類型的相應(yīng)規(guī)則，錄入保存到系統(tǒng)中。這也就我們常說的增刪改查的“增”

比如：銷售人員在對新增的客戶進(jìn)行登記時(shí)，需要登記公司名稱，聯(lián)系人，聯(lián)系方式，跟進(jìn)記錄等等。且需要不斷更新跟進(jìn)記錄，因此銷售人員在表格上的新增是一個(gè)非常高頻操作～

3) 數(shù)據(jù)操作

數(shù)據(jù)操作分為對單個(gè)數(shù)據(jù)的操作、單行數(shù)據(jù)的操作、多行數(shù)據(jù)的操作三種情況

單個(gè)數(shù)據(jù)的操作，就是我們常見的快捷編輯，可以點(diǎn)擊快捷編輯按鈕，對單個(gè)數(shù)據(jù)進(jìn)行錄入，

為何需要快捷編輯，在銷售使用場景中，使用表格去編輯一條信息是一個(gè)循序漸進(jìn)的過程，比如在對客戶進(jìn)行溝通時(shí)，數(shù)據(jù)的不斷更改，跟進(jìn)內(nèi)容也在不停修改，導(dǎo)致用戶需要每次進(jìn)入用戶詳情點(diǎn)擊編輯之后才能進(jìn)行操作，而在表格內(nèi)進(jìn)行快捷編輯直接滿足實(shí)時(shí)編輯的需求，在交互層面上這是一個(gè)非常OK的需求

但落到開發(fā)層面上，就意味著要在用戶進(jìn)入表格中去判斷權(quán)限，才能讓用戶知道是否能夠點(diǎn)，點(diǎn)擊過后需要判斷字段屬性，明確該字段是與哪些字段進(jìn)行聯(lián)動

單條數(shù)據(jù)主要通常會采取兩種路徑進(jìn)行操作：進(jìn)入用戶詳情頁界面，對一整列數(shù)據(jù)進(jìn)行編輯，這種情況通常都需要多個(gè)數(shù)據(jù)進(jìn)行處理，因此進(jìn)入編輯頁面更容易尋找，同時(shí)也是最為正常的一種做法

多行數(shù)據(jù)操作主要采取多選過后的操作方式：當(dāng)用戶想要對多條數(shù)據(jù)進(jìn)行操作時(shí)，就需要對多個(gè)數(shù)據(jù)進(jìn)行checkbox 的勾選，從而滿足多行操作的需求

4) 數(shù)據(jù)統(tǒng)計(jì)

數(shù)據(jù)統(tǒng)計(jì)主要針對用戶需要審查分析。目的是在通過大量的數(shù)據(jù)分析去得出自己的某一些結(jié)論，由于關(guān)注的數(shù)據(jù)會有主次之分，數(shù)據(jù)與數(shù)據(jù)之間也會有內(nèi)在聯(lián)系，用戶會更加跳躍地掃視頁面，而且會更加反復(fù)地審查數(shù)據(jù)。例如，銷售人員需要查閱本月的銷售情況，進(jìn)入到商品銷售明細(xì)表中，分析本月的經(jīng)營狀況，若其中某些商品

了解了表格的使用場景過后，針對不同的場景，在設(shè)計(jì)上它的思路就會有所不同

使用上就會有不同的設(shè)計(jì)思路。由于篇幅原因，我們主要了解了表格的基本形態(tài)，如果對于表格的場景還不太清楚，我會在下篇中與大家通過20個(gè)問題，了解B端表格中究竟應(yīng)該如何設(shè)計(jì)～

文章來源：站酷    作者：CE青年

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)