從基礎講起,教你多種B端表格設計方式
一、表格的元素設計要點
表格雖然長得都挺像,但并不是完全一樣的,不同的需求會設計出功能、交互不一的細節(jié),下面我們就直接開始解釋對于表格最重要的幾個細節(jié)的樣式設計思路。
1. 表格外框樣式
表格作為組件就有邊緣的表現(xiàn)形式,一種是有邊框,另一種是無邊框。
有邊框就是把表格主體區(qū)域被框起來進行突出,可以使用有色的描邊,也可以是和背景色不同的卡片。
無邊框則是表格沒有明顯的外邊框進行突出,僅靠元素的組合來形成視覺的區(qū)塊。
這是表格在樣式上最基礎也是最優(yōu)先的決定的細節(jié),雖然很簡單,但對表格的影響卻非常大。因為表格作為一個組件,需要和其它組件的樣式配合,尤其在表格被嵌入到其它模塊內(nèi)作為二級模塊時,有框的設計就會讓界面看起來“套娃”感嚴重。
所以表格必須先確定置入的環(huán)境和所處層級,來判斷具體應用使用哪種模式。
2. 表格選項卡設計
部分表格會應用選項卡控件來切換不同的數(shù)據(jù)類型,比如一個采購任務表格,應用進行中、歸檔、中止三個選項。
這時候在表格設計中就先要把選項卡控件設計出來,而它可以有很多種做法,主流的一種是做成類似頁簽的切換,另一種是使用橫線加文字選項按鈕。
使用一級選項卡的案例很常見,但還有不少場景使用的選項不止一級,還包含二級、三級,而多級選項設計中最容易出現(xiàn)的問題就是使用了相同或完全無法表現(xiàn)包含關系的樣式。
表格如果要應用多級選項卡,設計的要點就是保證不同級之間樣式的差異,如果一級用頁簽的樣式,二級就可以用文字按鈕或矩形標簽。
3. 表格的篩選表單
表格頁面通常都會有篩選表格數(shù)據(jù)的表單,如果篩選項太多,那么篩選控件就會單獨聚合成一個表單組件。如果篩選項很少,那么往往就可以直接和表格組件進行結(jié)合。
和表格結(jié)合的篩選表單通常出現(xiàn)在表格主體的上方,可以整體左對齊排列也可以右對齊。通??赐恍兄惺欠襁€要包含其它元素,比如左側(cè)要放選項卡控件,那么篩選內(nèi)容就右對齊,如果右邊要放一些操作按鈕,那么就左對齊。
除了對齊外,這種篩選表單通常就包含三種操作類型,輸入、下拉菜單、開關,而不會應用滑塊、多選項等很占空間的類型。
既然省空間,自然使用的矩形邊框也要使用較小的規(guī)格。項目中的輸入框通常會包含 2-4 種高度,常規(guī)高度通常在 36-44 之間,而在表格上方的篩選輸入框高度要使用 32 及以下的規(guī)格。同時,下拉菜單不是必須要使用矩形框框起來的,可以使用無框的設計來增加層次感和進一步節(jié)省空間。
4. 表頭的設計
再往下,就到了表頭的設計。表頭設計主要關注表頭的高度、背景色、屬性列的寬、單元格內(nèi)的布局邏輯四個要素。
表頭內(nèi)的信息可以理解成是 “標題”,在常規(guī)設計邏輯下標題尺寸是較大的,但表格中它們的尺寸是反過來的。即表頭高度會較小,而且文字字號也可能更小,不對下方更重要的數(shù)據(jù)信息形成干擾,且提供更多的顯示空間。表頭區(qū)域的高度通常在 28-36 之間。
整個表頭是否要加背景色則由設計風格和場景決定,如果需要比較好的和上下內(nèi)容形成區(qū)分就使用淺灰的背景色,如果使用無背景色的設計,那么表頭下方和數(shù)據(jù)行之間使用的分割線就會更粗、更黑。
表格內(nèi)每個單元格的寬度設置就復雜了,主要由內(nèi)容決定,可以參考前文對單元格寬度設置的詳細說明。
然后就是單元格內(nèi)的布局設計了,表格的單元格通常都是滿足自動布局規(guī)則的,即定義單元格左右內(nèi)間距,然后里面的元素左或右對齊,正常內(nèi)容文本都是左對齊,而表現(xiàn)數(shù)值尤其是價格的通常右對齊。
單元格的設計中除了文本,還可能包含排序或篩選圖標,這兩個功能通常只能包含一個,因為它們有互斥屬性。如果是添加了這兩個操作,那么就要提供不同狀態(tài)的設計,即默認和激活狀態(tài)。狀態(tài)的區(qū)分可以使用字重和灰度對比,但不建議加入太突出的色相。
表頭還有一些極端的情況,就是類似真實表格制作一樣使用了多級表頭,用樹狀的結(jié)構(gòu)拆分不同子類成列。這類需求中要重點區(qū)分不同的大類的信息,所以建議要在不同大類之間增加縱向或更深的分割線。
5. 表格主體列表設計
表格主體列表的設計就是最核心的內(nèi)容了,主要關注點包括列表形式、行高、單元格內(nèi)排版。
列表形式指的就是展示列表的主要樣式,包括基礎的網(wǎng)格型、分割線型、斑馬紋型,還有比較特殊的每行做成獨立卡片的卡片型。
第二個就是行高的設置,行高和寬度類似由上下間距加內(nèi)容高度決定,而單行的行高是由行內(nèi)最高的元素決定,比如行內(nèi)放了商品圖,或是多行文本、標簽,就要先完成這些單元格的設計,來確定整行的高度。
常規(guī)的表格內(nèi)行高應該是統(tǒng)一的,但不排除一些極端的情況,就是行內(nèi)有元素的高度不統(tǒng)一,且不同數(shù)據(jù)之間差異極大,不能被省略掉。比如一個展示用戶反饋的表格,反饋可能有一行也可能十行,肯定不能全部默認十行高,所以就應用自適應行高排列。
最后單元格內(nèi)的排版設計,對齊的模式在表頭設計的過程就已經(jīng)確定,如果內(nèi)容只是簡單的文本、標簽、圖片、數(shù)值,直接填充就行。而復雜、設計感更強的表格,就會在單元格內(nèi)做比較多的突破。比如合并關聯(lián)度極高的數(shù)據(jù),增加裝飾型圖標,引入簡易圖表類型等。
內(nèi)容布局和設計的核心目標不是就為了視覺效果,而是要提升信息的識別效率,因為統(tǒng)一的單元格內(nèi)樣式內(nèi)容辨識度太差,會形成負面的效果。
6. 表格的多選和操作
表格除了展示數(shù)據(jù)外,往往也會包含對數(shù)據(jù)進行多選并批量操作的需求。支持操作的表格在第一列就會放一個多選框用于選擇,而選擇完成后還要有提供操作選項的地方。
常規(guī)的做法,是在表格上方或底部有批量操作的選項,但通常表格頭部會放其它內(nèi)容所以操作經(jīng)常放在下方,默認置灰或是不顯示。
部分表格因為單頁展示的數(shù)據(jù)量很多,放頂部底部都容易夠不著,所以會使用懸浮面板來放置批量操作的選項。但這種懸浮層不會直接顯示在當前選擇的行上方或下方,因為會影響觀看數(shù)據(jù),所以它們通常是吸頂或吸底的設計。
但也有特例,就是有一些批量操作的權(quán)重非常高,比如審批列表中批量通過或者不通過,還是一些財務數(shù)據(jù)要導出下載到本地。很多設計會把這些權(quán)重高的操作按鈕化,然后開始胡亂擺放和其它操作湊在一起……
表格數(shù)據(jù)操作的選項首先要獨立放置不能和其它操作混合,并且多選通常在左側(cè),如果操作按鈕在右側(cè)那么鼠標移動的距離其實非常長,批量操作頻次越高的表格中,這種設計帶來的負面影響越大。最后,就是如果操作選項多,那么權(quán)重就肯定是要分配的,不可能每個按鈕都很重要全用不同的顏色去呈現(xiàn),只能以一到兩個按鈕作為最高權(quán)重,其它按鈕使用弱化樣式進行組合,否則會嚴重影響用戶的使用體驗。
7. 頁碼控件
完成了主體以后,就是底部的頁碼控件。這個控件的設計就沒有太多的知識點能說。但從以往經(jīng)驗來看,如果換頁操作較頻繁的話,那么使用帶框按鈕的設計會遠比文字按鈕體驗好的多。
可以到 Ant 里體驗無框的頁碼操作再用一用百度下方的頁碼操作進行對比,確定哪種操作體驗更好,再進行后續(xù)的設計。
在有框的設計中,每個頁碼即一個獨立按鈕,那么這個按鈕的高就可以使用和上方篩選輸入框相同的尺寸,而不要單獨定義它。
表格的設計,就是對上面 7 個元素設計的規(guī)劃和定義。而優(yōu)秀的表格設計并不是有完全標準的設計,而是根據(jù)不同場景和思路會組合不同的細節(jié)類型成為新的、獨立的樣式。
想要具備這種獨立設計它的能力,既要先了解完它們的做法,才能更細致的去分析線上成熟/優(yōu)秀案例的設計手法,獲得有效的積累。
最后,就是表格只是一個組件,表格的設計不代表整個表格頁面的設計。如果一個項目表格頁面多,感覺項目做出來的東西完全一樣,作品集根本沒法輸出,就要積累表格頁面設計的樣式,有目的性的去做調(diào)整實現(xiàn)更好的視覺效果。
所以在我們自己課程內(nèi)會專門準備不同樣式的表格頁讓學員臨摹,有對不同樣式的認知以后才能在自己的設計中輸出。
結(jié)尾
下一篇可能會繼續(xù)找表格有關的案例做改版,有目前項目真實案例的可以給我們私發(fā)~
我們下篇再賤!
超人的電話亭
想了解更多網(wǎng)站技術的內(nèi)容,請訪問:網(wǎng)站技術