2022-7-27 資深UI設(shè)計(jì)者
表格已經(jīng)是現(xiàn)代電子計(jì)算機(jī)系統(tǒng)中重要的組成部分之一,從小學(xué)開(kāi)始,我們就已經(jīng)在電腦課上學(xué)習(xí)如何使用 Office Excel 來(lái)制作電子表格。
那么我們?yōu)槭裁葱枰褂帽砀衲兀恳驗(yàn)槲覀冇杏涗浐筒樵償?shù)據(jù)的需求。
在任何商業(yè)活動(dòng)中,都會(huì)產(chǎn)生大量的數(shù)據(jù)信息,雖然我們發(fā)明了 SQL、Mysql 等數(shù)據(jù)庫(kù)語(yǔ)言記錄數(shù)據(jù),但最原始的數(shù)據(jù)記錄是沒(méi)有可讀性的。
所以,為了讓數(shù)據(jù)可以更好的展示,我們就必須借助可視性更強(qiáng)的圖形工具,即電子表格。通過(guò) X、Y 軸構(gòu)建的網(wǎng)格系統(tǒng),將數(shù)據(jù)有序、清晰得羅列出來(lái)。
表格的重要性就體現(xiàn)在企業(yè)日常工作中對(duì)這些數(shù)據(jù)進(jìn)行管理的需求和頻次上。
例如為電商 APP 開(kāi)發(fā)了一套管理系統(tǒng),那么電商運(yùn)營(yíng)每天的工作,都要繞著其中銷售、物流、流水等重要模塊的數(shù)據(jù)打轉(zhuǎn),也就是圍繞著表格展開(kāi)工作。
對(duì)于多數(shù)管理系統(tǒng)而言,數(shù)據(jù)查詢、管理都是非常重要且高頻使用的功能,所以常規(guī)項(xiàng)目中會(huì)包含大量的表格頁(yè)面。
甚至,有的中小型項(xiàng)目的所有導(dǎo)航一級(jí)頁(yè)面,只有表格,而不存在其它頁(yè)面形式。所以,表格的優(yōu)劣對(duì)用戶工作效率和平臺(tái)體驗(yàn)可以產(chǎn)生決定性的影響。
而優(yōu)秀的 B 端項(xiàng)目表格又不能只像 Excel 一樣可以使用固定的模版,不同項(xiàng)目、頁(yè)面、模塊對(duì)表格的可視需求天差地別,需要根據(jù)具體情況具體分析。
所以,這也是 B 端設(shè)計(jì)師的價(jià)值之一。一個(gè)優(yōu)秀的 B 端設(shè)計(jì)師勢(shì)必投入大量精力來(lái)提升對(duì)表格的認(rèn)識(shí)和表格設(shè)計(jì)能力。
表格雖然細(xì)節(jié)設(shè)計(jì)上千差萬(wàn)別,但在表現(xiàn)形式和閱讀順序上卻是基本一致的。
常規(guī)的表格必然包含表頭欄、列表、翻頁(yè)器三個(gè)部分,根據(jù)需求的不同,可能還會(huì)增加搜索欄、多選欄、操作欄等常見(jiàn)模塊。
主要是用來(lái)進(jìn)行簡(jiǎn)單的數(shù)據(jù)搜索和篩選的,當(dāng)搜索項(xiàng)較少的時(shí)候,就可以將搜索結(jié)合到表格組件內(nèi)。而搜索項(xiàng)較多時(shí),則會(huì)把它們獨(dú)立成一個(gè)篩選模塊到表格組件的上方。
每個(gè)表頭代表一個(gè)對(duì)象的屬性,決定了下方每行對(duì)象要顯示的數(shù)據(jù)類型數(shù)量。
通常,表頭的設(shè)計(jì)會(huì)和下方列表設(shè)計(jì)有一定的區(qū)分,表頭文字有一定的標(biāo)題屬性,所以會(huì)通過(guò)背景色、分割線、文字加粗來(lái)增強(qiáng)對(duì)比。
列表則是縱向排列數(shù)據(jù)對(duì)象的模塊。每個(gè)數(shù)據(jù)對(duì)象占一行,行的高度根據(jù)內(nèi)容來(lái)制定。橫向列表高度和縱向表頭寬度重疊的區(qū)域稱為單元格,每個(gè)單元格展示表頭對(duì)應(yīng)的數(shù)據(jù)明細(xì)。
常規(guī) B 端項(xiàng)目表格都會(huì)限制列表一次展示的行數(shù),極少使用無(wú)限滾動(dòng)加載的模式。因?yàn)楫?dāng)數(shù)據(jù)包含成千上萬(wàn)條時(shí)會(huì)對(duì)本地、服務(wù)器性能和交互方式帶來(lái)一系列的負(fù)面影響。
如果數(shù)據(jù)對(duì)象支持多選和批量操作,則我們會(huì)在第一列中添加選框,并將選中后的可操作選項(xiàng)放進(jìn)操作欄中。
翻頁(yè)器是切換列表頁(yè)面的控件。通常大數(shù)據(jù)量的列表包含上千頁(yè),所以翻頁(yè)器只會(huì)顯示開(kāi)頭幾頁(yè)和最后一頁(yè),省略中間的,并增加適合快速跳轉(zhuǎn)的功能。
除了表頭和列表內(nèi)容外,其它模塊內(nèi)容都根據(jù)實(shí)際需求應(yīng)用。任何表格設(shè)計(jì)的第一步都是制定大框架,即包含的模塊和對(duì)應(yīng)分布位置,再展開(kāi)后續(xù)的細(xì)節(jié)設(shè)計(jì)。
B 端項(xiàng)目支持響應(yīng)式是今天行業(yè)的普遍需求,也就是頁(yè)面內(nèi)容隨著瀏覽器視圖寬度變更而變更。
不同頁(yè)面類型的響應(yīng)式邏輯各不相同,而表格是其中邏輯最復(fù)雜,也最難理解的一種。
表格響應(yīng)式規(guī)則通常在確定好框架以后制定,優(yōu)于視覺(jué)、交互設(shè)計(jì),因?yàn)樗鼘?duì)視覺(jué)和交互產(chǎn)生的影響非常大,是前置條件而不是通過(guò)設(shè)計(jì)稿逆推出來(lái)的。
- 表格的總寬響應(yīng)
- 表格的最小寬度
- 單元格的響應(yīng)邏輯
- 內(nèi)容的響應(yīng)邏輯
上方邏輯中表格可以無(wú)限延長(zhǎng),但它卻不能無(wú)限的縮短,因?yàn)槟悴豢赡茏鲆粋€(gè)只有 10px,20px 寬的表格。
過(guò)窄的表格不僅支持不了內(nèi)容的正常顯示,也毫無(wú)任何使用體驗(yàn),所以我們要為表格確定一個(gè)最小的寬度。即瀏覽器視圖即使比這個(gè)寬度更小,表格也不會(huì)再縮小了。
如果不了解柵格的段落規(guī)則,也可以 “憑感覺(jué)” 定,最小表格寬度通常在 560-640px,當(dāng)然,不管怎么定一定要提前和前端溝通,確定尺寸方案。
當(dāng)表格內(nèi)容少的時(shí)候,最小寬度只是相對(duì)較大寬度窄了一點(diǎn)而已。而當(dāng)表格內(nèi)容過(guò)多,最小寬度無(wú)論如何也不夠放的情況,那么就會(huì)使用橫向滾動(dòng)的交互形式來(lái)隱藏超出內(nèi)容。
單元格響應(yīng)這是整個(gè)表格最復(fù)雜的一環(huán),橫向內(nèi)容會(huì)超出最小寬度的情況,就是由單元格規(guī)則決定的。
首先,單元格本身也有最小寬度,原因和前面一樣,1px、10px 寬的單元格沒(méi)有存在的意義。所以可以根據(jù)需要,制定多個(gè)等級(jí)的最小單元格寬度,應(yīng)用在不同的數(shù)據(jù)類型中。
假設(shè)表格中包含了 20 個(gè)表頭,分別使用了 10 個(gè)最小 24px 和 10 個(gè)最小 80 px 的,那么單元格的總寬最小就是 240+800 = 1040px。
所以當(dāng)父級(jí)整個(gè)表格視圖小于 1040px 的時(shí)候,內(nèi)容就會(huì)不夠顯示從而觸發(fā)左右滾動(dòng)的條件。
當(dāng)上級(jí)表格寬度大于單元格最小總和時(shí),那么單元格也就會(huì)隨之變寬。最簡(jiǎn)單的響應(yīng)邏輯,就是為單元格寬設(shè)置百分比。比如 5 個(gè)單元格分別是父級(jí)寬度的 10%、10%、10%、20%、30%、20% ,那么在父級(jí) 1000px 的時(shí)候它們分別是 100px、100px、100px、200px、300px、200px。
只要確保百分比的總和是 100%,不管你單元格是比例均分(5個(gè)單元格等分各20%寬),還是獨(dú)立制定(上面案例),單元格寬都是等比縮放的狀態(tài)。
雖然好理解,但這種初級(jí)的做法帶來(lái)的問(wèn)題也很多,那就是部分單元格沒(méi)有被 ”放大“ 的需求。比如常出現(xiàn)在第一列的多選框,或者部分標(biāo)簽單元格、固定操作按鈕單元格。
于是,為了預(yù)留給有需要的單元格更多的空間,提升體驗(yàn),就會(huì)對(duì)這些單元格實(shí)施定寬的方式,剩下的單元格繼續(xù)使用等比,只是計(jì)算的方法要減去定寬元素。
比如還是一個(gè)占比 20% 的單元格,在包含 2 個(gè) 48px 定寬單元格的 1000px 表格中,實(shí)際寬為:
(1000px - 2*48) * 20% = 180px
作為單元格的子級(jí),內(nèi)容也可以獨(dú)立定義響應(yīng)的規(guī)則。主要包含 3 種情況:
- 無(wú)響應(yīng)
- 隱藏多余
- 換行顯示
無(wú)響應(yīng)就是顯示的內(nèi)容是固定的,比如多選框、縮略圖、單按鈕等單元格內(nèi)容,它們沒(méi)有大小變動(dòng)的必要。
隱藏多余,則是主要應(yīng)用在文本內(nèi)容上,當(dāng)單元格寬度小于當(dāng)前文本所需寬度時(shí),就會(huì)把多余的文字進(jìn)行省略,這種做法適合應(yīng)用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“,之后再通過(guò)鼠標(biāo)懸浮彈出文字氣泡框的方式顯示所有文本。
而換行顯示,則是文本或多標(biāo)簽狀態(tài)下,一行不夠顯示就換行的做法。除非一開(kāi)始單行行高預(yù)留了多行顯示的高度,否則多行內(nèi)容就會(huì)撐高單元格。
以上就是表格在響應(yīng)式模式下相關(guān)知識(shí)點(diǎn)。
隨著經(jīng)驗(yàn)的積累,實(shí)戰(zhàn)經(jīng)驗(yàn)豐富的 B 端設(shè)計(jì)師,就會(huì)在前期的規(guī)范環(huán)節(jié)制定出完整的表格響應(yīng)邏輯,應(yīng)用到前端框架開(kāi)發(fā)和后續(xù)的設(shè)計(jì),而不是做到哪定到哪。
表格首先是一個(gè)展示信息的組件,而單純依靠布局和排版技巧,并不能解決所有的信息展示問(wèn)題。所以,針對(duì)網(wǎng)頁(yè)表格的局限性,我們要添加一些交互的細(xì)節(jié)來(lái)提升使用體驗(yàn)。
例如,單頁(yè)表格數(shù)據(jù)量較大,有好幾屏高,往下滾動(dòng)后看不見(jiàn)表頭,不能很好的識(shí)別單元格內(nèi)容。
或者,表頭屬性數(shù)量較多,需要左右滾動(dòng),但是每行數(shù)據(jù)要不然操作欄目看不見(jiàn),要不然對(duì)應(yīng) ID 被滑走了等等。
所以,表格的框架就可以做懸浮固定的模式,將需要被持續(xù)露出的欄目懸浮固定。
當(dāng)然,除了單獨(dú)欄目的懸浮,也可以使用混合模式,比如表頭吸頂?shù)耐瑫r(shí)固定右側(cè)的操作欄。盡量將固定元素控制在 3 個(gè)以內(nèi),以免懸浮要素太多影響內(nèi)容的瀏覽。
還要注意,除了筆記本觸摸板和少數(shù)鼠標(biāo),一般用戶是沒(méi)有頁(yè)面左右滾動(dòng)滾輪的,所以當(dāng)表格出現(xiàn)左右滾動(dòng)情況以后,就一定要默認(rèn)展示進(jìn)度條,方便用戶操作。
我們先對(duì)這兩者做一個(gè)明確的定義:
篩選 Filter:對(duì)要顯示的內(nèi)容設(shè)置篩選條件,不符合條件的將會(huì)被過(guò)濾隱藏
排序 Sort:對(duì)已有內(nèi)容的顯示順序進(jìn)行條件設(shè)置,不會(huì)有內(nèi)容被過(guò)濾或隱藏
這看起來(lái)好像很容易理解,但會(huì)搞混的地方就在排序的應(yīng)用上。我們常規(guī)以為的排序,就像電腦文件夾列表一樣,通過(guò)點(diǎn)擊表頭來(lái)決定內(nèi)容通過(guò)哪個(gè)屬性來(lái)進(jìn)行升序或者降序。
在這種 “樸素” 的設(shè)定中,篩選是以單個(gè)表頭屬性為標(biāo)準(zhǔn)的,有唯一性。比如在學(xué)生數(shù)據(jù)表格中,可以以 ID、姓名、年級(jí)、年齡或成績(jī)單個(gè)屬性進(jìn)行列表排序,選中其中一個(gè)屬性其它屬性的排序就被取消了。
但是復(fù)雜的排序并不是 “唯一屬性” 的,而是多個(gè)屬性的并集,以及具備優(yōu)先級(jí)和排序模式。還用學(xué)生數(shù)據(jù)表格舉例:
優(yōu)先根據(jù)年齡降序排列,同年齡下根據(jù)班級(jí)升序排列,同班級(jí)再根據(jù)成績(jī)降序排列。
這里面疊加了三個(gè)屬性,年齡優(yōu)先級(jí)最好,然后班級(jí)次要,成績(jī)最后,我們用圖表的展示可以實(shí)現(xiàn)出下面這樣的形式:
再進(jìn)一步,這是我們條件已經(jīng)確定才做出來(lái)的組件,要是要制定的屬性不確定,要制定的屬性數(shù)量也不確定,順序不確定,排序模式也不確定……
這種情況就肯定要應(yīng)用排序自定義條件的邏輯了,而表頭自定義一加,那邏輯就立馬復(fù)雜了,它的操作面板可能就長(zhǎng)下圖這樣。
排序復(fù)雜了,并不代表篩選就不要了。部分項(xiàng)目的篩選除了在表格外的獨(dú)立篩選區(qū)域,還可能應(yīng)用表頭篩選模式。即以單個(gè)表頭緯度設(shè)置篩選條件,比如點(diǎn)擊 “年份” 表頭,設(shè)置起始和結(jié)束時(shí)間。
所以,只包含篩選的情況下,表頭的圖標(biāo)就不是排序而是漏斗,點(diǎn)擊后就要展開(kāi)篩選設(shè)置面板進(jìn)行操作。
而當(dāng)多表頭篩選和多表頭排序需求并存的時(shí)候,怎么解決?
這里只建議在表頭中留存篩選選項(xiàng),因?yàn)楹Y選可以實(shí)現(xiàn)并集關(guān)系,即前后任何表頭添加篩選項(xiàng)都可以組成完整的篩選條件。但是,這種交互難以完成篩選優(yōu)先級(jí)排序。
所以,我們要將排序獨(dú)立成一個(gè)按鈕到表頭之外的地方,而不是強(qiáng)行讓兩者并存。尤其是不要設(shè)計(jì)出有的表頭是排序,有的表頭是篩選,甚至表頭的按鈕展開(kāi)面板里又會(huì)有篩選又有排序……
表頭是針對(duì)列的操作,而針對(duì)行的操作,就是對(duì)單行列表的選擇、展開(kāi)和進(jìn)入了。
前面我們有說(shuō)過(guò),表格第一列往往放多選框,通過(guò)點(diǎn)擊選擇當(dāng)前列表行。它本身的交互并沒(méi)有太多需要注意的,只要針對(duì)行的交互如果不止選擇應(yīng)該如何平衡。
部分復(fù)雜項(xiàng)目喜歡在表格中添加 “套娃” 的需求。即單行數(shù)據(jù)可以向下展開(kāi)二級(jí)數(shù)據(jù),或者更進(jìn)一步到三級(jí)、四級(jí)。
所以當(dāng)多種操作需求混合出現(xiàn)的時(shí)候,我們就要具體分析這些需求的優(yōu)先級(jí)了。到底是多選操作頻率最高,還是查看下級(jí)行,打開(kāi)詳情頁(yè)。
這是為讓點(diǎn)擊整個(gè)數(shù)據(jù)行這個(gè)最便捷的交互可以關(guān)聯(lián)到最高頻的操作上。而其它低頻操作的交互則只限定在對(duì)應(yīng)的按鈕或圖標(biāo)上即可。
因?yàn)槎噙x需求往往需要我們?cè)谝幌盗袛?shù)據(jù)中選擇很多條數(shù)據(jù),一個(gè)小小的復(fù)選框不僅選擇起來(lái)麻煩,且通過(guò)查看右側(cè)的內(nèi)容篩選數(shù)據(jù)行,再用右手握鼠標(biāo)按需點(diǎn)擊最左側(cè)的多選框,是非常別扭的體驗(yàn)。
還有一個(gè)需要注意的細(xì)節(jié),就是當(dāng)多選和展開(kāi)下級(jí)列表共同出現(xiàn)的時(shí)候,選框和展開(kāi)圖標(biāo)的排列。
通常一個(gè)數(shù)據(jù)行第一列的內(nèi)容,應(yīng)該是整行邏輯層級(jí)最高的元素。如果子數(shù)據(jù)行是被獨(dú)立出來(lái)需要單選,那么展開(kāi)圖標(biāo)就要放到選擇前面。如果選擇數(shù)據(jù)包含了該行和所有子行,那么選擇就應(yīng)該在展開(kāi)圖標(biāo)前面。
最后,就是解決單元格的交互了。常見(jiàn)的單元格交互可以總結(jié)成下面這幾類:
- 點(diǎn)擊打開(kāi)頁(yè)面
- 點(diǎn)擊復(fù)制內(nèi)容
- 點(diǎn)擊修改內(nèi)容
- 懸浮提示說(shuō)明
點(diǎn)擊打開(kāi)頁(yè)面很好理解,比如單元格內(nèi)的數(shù)據(jù)是鏈接、圖片、按鈕然后實(shí)現(xiàn)跳轉(zhuǎn)或彈窗。
而復(fù)制內(nèi)容,則有一些需要注意的細(xì)節(jié)。表格中有一些數(shù)據(jù)是沒(méi)有實(shí)際閱讀意義的,它的存在就是用來(lái)做特定的校對(duì)或者是復(fù)制出去,比如 ID 號(hào)、哈希值、訂單號(hào)等。
常規(guī)的做法是直接在右側(cè)添加一個(gè)復(fù)制圖標(biāo),但對(duì)于一些偏復(fù)雜的表格來(lái)說(shuō),所有可復(fù)制的單元格都加復(fù)制圖標(biāo)是非常影響瀏覽體驗(yàn)的。
所以,我的建議是都是默認(rèn)隱藏復(fù)制圖標(biāo),只有當(dāng)鼠標(biāo)移動(dòng)到對(duì)應(yīng)單元格的時(shí)候會(huì)顯示。同時(shí),這個(gè)圖標(biāo)可以覆蓋到數(shù)據(jù)上層,因?yàn)榧热皇髽?biāo)移動(dòng)過(guò)來(lái)為了復(fù)制,那么數(shù)據(jù)被遮擋在這階段自然無(wú)關(guān)緊要,為整體頁(yè)面預(yù)留空間
這樣的操作按鈕隱藏浮現(xiàn)方式,也適用于單元格修改的操作。但是,和復(fù)制不同,單元格信息編輯通常是編輯文本信息,還有后續(xù)的操作步驟。
如果點(diǎn)擊進(jìn)行文本編輯,那么建議在該表格打開(kāi)一個(gè)新的輸入浮窗,且浮窗內(nèi)輸入框文本和原來(lái)文本位置持平實(shí)現(xiàn)順暢的步驟轉(zhuǎn)換。
同時(shí)建議,為了防止誤操作,盡量增加確定、取消按鈕,防止誤操作覆蓋原有數(shù)據(jù)且無(wú)法撤銷。
最后就是單元格的懸浮提示了。B 端控件中的氣泡框就是用來(lái)做提示的控件,但它只是手段。為什么需要懸浮提示,提示什么內(nèi)容是我們需要考慮的。
對(duì)于及其復(fù)雜的表格來(lái)說(shuō),往往是沒(méi)辦法支持所有數(shù)據(jù)都完整展示的,我們會(huì)在使用省略號(hào)對(duì)它進(jìn)行截?cái)?。但截?cái)嗖灰馕吨脩敉耆恍枰诒砀癫榭吹酵暾男畔ⅰ?
所以,就可以通過(guò)氣泡的做法,將信息呈現(xiàn)給用戶。而呈現(xiàn)過(guò)程中,盡量確保鼠標(biāo)可以移動(dòng)到氣泡上復(fù)制里面的文字內(nèi)容(和全部復(fù)制不一樣),而不是鼠標(biāo)移走就直接關(guān)閉消失。
以上就是關(guān)于表格設(shè)計(jì)的全部說(shuō)明了,作為 B 端設(shè)計(jì)最重要的模塊之一,希望大家可以學(xué)以致用。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
作者:酸梅干超人 來(lái)源:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com