2020-11-20 資深UI設計者
為大家梳理一個web表格設計框架,希望能夠給大家?guī)硗暾牟灰粯拥膬?nèi)容。全文12,598字 ,預計閱讀30分鐘,建議收藏。
在網(wǎng)頁或桌面端為載體的B端產(chǎn)品和生產(chǎn)力工具中,越來越多的設計師需要和數(shù)據(jù)打交道,查詢和處理數(shù)據(jù)的能力是當前正在設計的大多數(shù)產(chǎn)品的關鍵要求之一,表格被公認為是展現(xiàn)數(shù)據(jù)最為清晰、的形式之一,也是世界上最常用的用戶界面工具,其重要性不言而喻。
表格,展示行列數(shù)據(jù),既是一種可視化交流模式,又是一種整理數(shù)據(jù)的手段。表格幫助我們組織和展示信息,同時保證信息的可讀性,從大量信息中找到所需內(nèi)容;通過合理布局,感知不同信息間的關聯(lián)與區(qū)別,進行分析和比較;對數(shù)據(jù)進行排序、搜索、分頁、自定義操作等復雜行為。
表格的行元素和列元素行和相交就會形成一個簡單的二維表,行,列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局,分別強調行、列、單元格。
水平型會弱化列的存在,強調行信息的連貫性,適用于用戶閱讀信息時是從左到右,然后自上而下逐條掃描。垂直型是通過強化列的視覺特征來突出不同列信息的對比。矩陣型的表格有均勻統(tǒng)一的分割線,單元格比較明顯,適用于列信息較多而沒有足夠空間用留白來分割信息的表格,同時我認為單元格合并的情況也屬于矩陣型。
還有比較常用的表格類型層級型:
層級表
是表達結構性關系的表格,表現(xiàn)得如同樹的分支,所以又叫樹列表。每一個條目可展開或折疊包含的更詳細的行信息,也包含嵌套子表格。
層級表并不如矩陣表直觀,但通過結構化的組織方式逐級展示表的數(shù)據(jù)內(nèi)容,讓整體信息架構一目了然,非常適合大型數(shù)據(jù)表。
結合層級表的使用場景,多以查看為主,編輯需求較少。
同時還有特殊的表格類型,圖表型與卡片型:
圖表型
除了在單元格中引用圖表之外,很多時候都會提供圖表/表格視圖切換,便于用戶從圖形角度查看、分析自己關注的數(shù)據(jù)。有時也會有“圖表+表格”的形式,這時候,表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調。
卡片型
可以用卡片的形式來展示信息,將信息以組的概念呈現(xiàn),單張卡片內(nèi)的信息按優(yōu)先級進行排列。此外,卡片彼此之間又形成一個整體。
卡片是一種承載信息的容器,對可承載的內(nèi)容類型無過多限制,它讓一類信息集中化,增強區(qū)塊感的同時更易于操作;卡片通常以網(wǎng)格或矩陣的方式排列,傳達相互之間的層級關系。適合較為輕量級和個性化較強的信息區(qū)塊展示。
注:在有限的表格空間內(nèi)需注意卡片信息之間的間距,若卡片信息過長可做截斷處理。
在實際工作中,上述表格類型還有可能互相結合,以更好的達到相應的分析目的。
比如垂直–層級,矩陣–數(shù)據(jù)立體表等。
從視覺結構的表現(xiàn)角度,個人將“表格”的構成分為:標題、表上方篩選操作區(qū)、表頭、表體、底欄。由表頭、表體構成內(nèi)部區(qū)域,由標題、篩選操作、底欄構成外部區(qū)域。
標題是對表格信息內(nèi)容的整體概括,可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等),以便用戶對表格內(nèi)容有整體認知。給數(shù)據(jù)表格起一個清晰簡明的標題,與其他的設計同等重要。有了好的標題,表格就可以獨立使用,如果導航菜單層級清晰,同樣能起到標題的作用。標題作為最重要的識別元素,默認展示在左上角。
這里特指位于表頭的上方的操作區(qū)域,包含篩選,操作按鈕等其他操作。篩選區(qū)包含模糊搜索和條件篩選,按鈕分為增刪改和其它業(yè)務處理操作,合理設計篩選區(qū)可以大大提高用戶的效率。
表頭對數(shù)據(jù)性質的歸類。表頭按慣例要對數(shù)據(jù)的簡況做出反映,如被調查者的性別、年齡、學歷、收入、家庭成員組成、政治背景、經(jīng)濟狀況等。表頭的字段名稱應當符合人們的思維習慣,保證用戶理解。如果有需要解釋,則在字段名稱旁邊加說明小圖標(小問號)。表頭在這里也能指列行標簽,是對所屬行或列數(shù)據(jù)的描述。
除了容納行/列標簽之外,表頭也可以進行排序、搜索、篩選等。
表體是表格的主體內(nèi)容,具體信息數(shù)據(jù)內(nèi)容的填充區(qū)域,由一個個基礎的單元格組成,單元格是表格呈現(xiàn)數(shù)據(jù)信息的基本單位,可以是計數(shù)、百分比、均值、"-"等任何數(shù)據(jù)。表體包含數(shù)據(jù),分割線,背景,單元格數(shù)據(jù)可進行點擊操作,如鏈接跳轉(項目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。
表尾一般是統(tǒng)計類數(shù)據(jù),例如合計、平均數(shù)等。表尾使用頻率較少,且重要性明顯不如表頭,我就把它歸到表體這類。
底欄在表格最下方,主要展示正文中的數(shù)據(jù)量或單頁數(shù)據(jù)的概覽信息,也常提供統(tǒng)計功能,供用戶了解總體進展。底欄一般放統(tǒng)計信息、分頁控件、備注說明、操作按鈕(加載更多)等內(nèi)容。
底欄最常見的元素就是分頁,分頁可以放在頭部或底部,常見的還是放到底部,分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等,需要根據(jù)不同的場景選擇最優(yōu)的設計方案,比如有的時候并不需要定點跳轉。
無限滾動可以替代分頁,但對于功能優(yōu)先的應用未必適用。下圖為查看更多按鈕,比較少見:
同時,在選中操作的下,操作按鈕也可以位于底欄,在未選中時操作置灰。
采用格式一致外觀,突出有利于對象識別的關鍵信息。
合適的填充和邊距對于視覺設計至關重要,既包括保證數(shù)據(jù)單元格之間的留白,又包括單元格內(nèi)部留白,以保證易讀性,當創(chuàng)建表格設計規(guī)范并嚴格遵循后,就可以創(chuàng)建視覺一致的表。表格本身應具有最小寬度,在不同畫面中寬度應可以增長到整個空間,所以每個列也需具備最小寬度。如果頁面寬度小于表格,那么表格應水平可拖拽。
數(shù)據(jù)合適的位置排列能夠提升數(shù)據(jù)的瀏覽效率和準確度。對齊能夠很好的形成視覺引導線,會讓表格更加規(guī)范易理解,給用戶視覺上的統(tǒng)一感,視線流動更順暢,讓用戶快速的捕捉到所需內(nèi)容。
正如連續(xù)律所描述的,人們傾向于把那些經(jīng)歷最小變化或阻斷的直線或圓滑曲線知覺為一個整體,傾向于使知覺對象的直線繼續(xù)成為直線,使曲線繼續(xù)成為曲線。在界面設計中,將元素進行對齊,既符合用戶的認知特性,也能引導視覺流向,讓用戶更流暢地接收信息。
數(shù)字應該右對齊
在表格中,諸如金額、數(shù)量等數(shù)值排列時,通常采用“右對齊”方式,既方便用戶快捷讀取數(shù)據(jù),還可以使用戶進行縱向數(shù)據(jù)對比。數(shù)字是從右向左讀的,是因為我們對比數(shù)字時,首先看個位,然后十位、百位。當個位數(shù)值對齊時,我們就可以快速查看前面的數(shù)值,比較多個數(shù)據(jù)的大小。因此,表格的數(shù)字應當右對齊。
當我們常用的字體如果不同數(shù)字寬度不一致時,會導致千位分隔符不在一條直線上,所以要選擇數(shù)字等寬的字體,等寬的數(shù)字在同一豎線時更容易對比。
文字信息左對齊
因為我們閱讀文字信息是從左向右讀,如果不采用左對齊,會降低瀏覽文字的效率。
混合型文本左對齊
當數(shù)字、文字、字母組成混合數(shù)據(jù)時,標題和正文左對齊,使用了一個視覺起點。
在實際工作中,主流框架組件,表格列數(shù)據(jù)對齊同時針對分割線,雖不是完美中的對齊,但開發(fā)成本低。
不論何種對齊方式,都需要考慮到該字段可能存在的極端情況。如:普通文本若過長,可在鼠標懸停狀態(tài)時單元格展開列出全部字段信息。
一般表格具有的顏色盡可能少。顏色和可讀性是密切相關的,要合理的使用顏色,普通表盡量使用簡單的背景色和點綴色。背景色方面,除了行/列交替顏色(可以區(qū)隔內(nèi)容,引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法,還可以對表頭表尾進行視覺區(qū)分。但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色,背景為淺白色時,邊框選擇淺灰色,這樣可以減少我們視覺疲勞,不會使表格看起來令人生畏。
表頭標簽應該簡煉準確,以達到節(jié)省表頭空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數(shù)據(jù)本身。當然對于產(chǎn)品而言,先能把事情說清楚,再考慮文字的簡潔性。
當數(shù)據(jù)結構比較復雜的時候,使用多級表頭來體現(xiàn)表頭與數(shù)據(jù)的層次關系,如下圖:
當數(shù)據(jù)有看不懂或生僻的信息時,用戶期望有人告訴他為什么會這樣,就需要在表頭標簽后加上小問號,鼠標懸停彈出說明文字的提示框。
不需要表頭
如果表格數(shù)據(jù)可以自我解釋,表頭就可以不需要。電子郵件的表格是一個好例子,郵件主題,發(fā)送者,發(fā)送日期都區(qū)別度高不會混淆的。當然有的情況表頭是不能去掉的,例如有兩個不明確的日期,這時候你就需要定義一個表頭。
所有行按邏輯排序,比如按風險由小到大,將最安全的操作放最前面;或按照信息時間排序,由新到舊,以創(chuàng)建時間進行排序,即創(chuàng)建的排在最前面。
行高是非常重要的參數(shù),直接影響著閱讀體驗。較小的行高承載更多信息,讓用戶無需滾動鼠標即可看到更多數(shù)據(jù),但會降低掃描效果,導致視覺解析錯誤。適宜的行高使得數(shù)據(jù)更易于被閱讀,但這不代表行高越大越利于閱讀。
設置行高的原則:
A.單行數(shù)據(jù)顯示時,數(shù)據(jù)顯示緊湊、有序。
B.多行數(shù)據(jù)顯示時,弱化表格形式,提供豐富的視覺展現(xiàn)。
因此,對于單行顯示的表格,建議行高為字體高度的2.5倍到3倍;對于多行顯示的表格,建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。當然,也可以提供切換按鈕讓用戶自己控制顯示密度。
斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯,同時加強視覺流的橫向引導,避免在閱讀表格時出現(xiàn)迷失情況,要注意兩種顏色不能反差過大。另外,可以根據(jù)實際情況選擇是否與邊框同時使用。
有時為了強調行內(nèi)信息的連續(xù)性,可去掉單元格的縱向分割線,僅使用橫向分割線和底色分割,使橫向信息更加連續(xù)通暢,以提升閱讀效率。
表格還可以通過顏色來指示狀態(tài),顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數(shù)據(jù)。
同時可以對行內(nèi)信息進行擴充,進一步弱化表格形式,豐富各類信息的視覺呈現(xiàn),同時兼顧行與行之間的關鍵信息的對比,如上文表格布局提到的圖表的使用。
盡量減少列的數(shù)量,關注用戶需要的必要信息。當數(shù)據(jù)列過多時,要分清主次列,非重點、輔助性信息可以通過次級入口來解決,如固定重要列(主體名稱/操作列),次級列在表格中間區(qū)域左右拖動。
列寬嚴謹?shù)奶幚矸绞接腥N。第一,通過柵格,由列的數(shù)量決定列寬,主流框架組件一般是這種;第二,可以固定部分列的寬度,其余列則按百分比處理;第三,在固定寬度的基礎上,允許用戶自由拖動調整列寬的大小。(當然我覺得不要太拘泥這個,合適就好)
為便于用戶對數(shù)據(jù)進行對比分析,可以在原始數(shù)據(jù)的基礎上給出差值、升降變化等數(shù)據(jù)處理結果,減少用戶數(shù)據(jù)加工的過程,直達用戶獲取信息的目標(需要明確用戶目標),提高用戶的閱讀速度。
一般列的強調是配合列排序功能使用的,如點擊率、訪問量的排序。有時會使用不同粗細的縱向分割線或不同底色對列信息進行區(qū)隔,增加同類信息的對比性。
其中的關鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無需重復,一般在表頭標識清楚即可。
一般指空數(shù)據(jù)或零數(shù)據(jù)的情況,空白單元格容易造成用戶困惑甚至誤解,用戶會搞不清楚到底是沒有數(shù)據(jù),還是數(shù)值為零?正確做法是,對于數(shù)據(jù)為零的單元格,要填上0,且小數(shù)點后位數(shù)、單位,都要與上下數(shù)據(jù)格式保持一致;對于沒有數(shù)據(jù)的單元格,通常是用“-”表示。
B端后臺數(shù)據(jù)類型較多,最好能為空數(shù)據(jù)做出釋義,可以在“列標簽”或底欄給出解釋文案。
單元格的寬度根據(jù)列中字符的長短自動變化寬度,超過該列寬可以省略顯示,末尾以"..."顯示,鼠標懸停時出現(xiàn)氣泡顯示完整內(nèi)容。
比如用戶重點關注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等,可用符號進行標識,幫助用戶快速定位到目標信息。
水平分隔線,能顯著減輕表格在垂直方向的視覺重量,內(nèi)容更加條理清晰,便于用戶對比查看數(shù)據(jù)。
垂直分隔線,在表格中使用適合的對齊方式后,那么就可以省略;數(shù)據(jù)量級比較大的表格,列之間過于緊密時建議保留,可以使用較淡的分隔線,將不同列數(shù)據(jù)區(qū)分開來,提升瀏覽速度。
下圖采用了同時使用水平和垂直分隔線:
如果在表格中使用適合的對齊方式,分隔線就是多余的。但由于表格數(shù)據(jù)量級不同,即使要用,分隔線也要淡,不能妨礙快速瀏覽。
在web端,表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時需要提供翻頁功能,這個“數(shù)量”由表頭的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定,原則是不要超過一屏,考慮到每個用戶的使用習慣,可以讓用戶自定義每頁的顯示的數(shù)量。相比于跨屏翻頁而言,向下滾屏會更便利,在下文控制表內(nèi)容中展開比較了無線滾動與分頁。
分頁控件內(nèi)容 :用戶自定義每頁顯示的數(shù)量,當前頁碼(行數(shù)),全部數(shù)據(jù)的頁數(shù)(行數(shù)),向前翻頁,向后翻頁,到達第一頁,到達最后一頁等。
當用戶的數(shù)據(jù)未超過一頁時,可以隱藏翻頁控件。翻頁按鈕不可用時,須給出置灰態(tài)或不可點擊。
分頁控件做為篩選數(shù)據(jù)的一種方式,通??梢越Y合排序、篩選等其它控件一起使用,來提升用戶的操作效率,如網(wǎng)易的郵箱,翻頁與日歷結合使用,對于有大量郵件數(shù)據(jù)的用戶來說,查閱郵件的效率更高。
除了無限滾動,還有第三種翻頁方式,鼠標點擊“加載更多”按鈕以查看更多數(shù)據(jù)。
干凈的表格使人愉悅。特別是在處理大量數(shù)據(jù)時,巨大的數(shù)據(jù)量會增加用戶的壓力,因此要減少視覺干擾。刪除不必要的分隔符與背景,去除陰影等。信息內(nèi)容的有效傳達是表格設計的本質,讓用戶注意力聚焦在核心內(nèi)容上。所以,做減法設計就顯得可貴了。
實現(xiàn)簡化的方法是適當刪減。如果畫面視覺很糟糕,請刪除輔助信息、不常用的控件和分散注意力的樣式,但要小心刪除必要內(nèi)容。“簡單并不意味著沒有雜亂,這是簡單的結果。簡單性在某種程度上基本上描述了對象和產(chǎn)品的目的和位置。想設計出一個井然有序的產(chǎn)品。這并不簡單。“ - Jonathan Ive
這必須是在數(shù)據(jù)允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量,加快數(shù)值的對比效率。但如果在表格中使用適合的對齊方式,豎直分隔線就是多余的。它們最大的貢獻就是縮減元素之間的距離,明確了單元格范圍。即使要用垂直分割線,也要淡,不能妨礙快速瀏覽。
不使用斑馬線,使用不同底色區(qū)分指示不同類型的數(shù)據(jù)是有必要的,但是用來區(qū)分同一類數(shù)據(jù),斑馬線在很多時候又是沒有必要的,因為水平分割線已經(jīng)明顯區(qū)隔了。
省去分隔線,對于較小的,動態(tài)性較小的表,可以省去所有分隔線,并獲得醒目的外觀。當然,這更多是數(shù)據(jù)量不大且易分辨的情況。
運用彩色表達組織或含義可能會增加誤解,并且引發(fā)視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態(tài)或進度。
其他圖形元素,如星號、三角、圓點、對勾、叉等,雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達信息,但要注意數(shù)量,物極必反,要注意克制這些元素的使用。
優(yōu)秀的表格交互給予用戶操控感,不讓其迷失在數(shù)據(jù)中。提供便捷的過濾篩選組件,配合鼠標懸停、點擊、框選等操作,方便用戶查看更多數(shù)據(jù)信息,快速定位目標數(shù)據(jù),或根據(jù)特定規(guī)律對數(shù)據(jù)進行排序、突出、降維等處理。當我們將這些組件與交互動作結合,用一些習以為常的交互去操縱表格時,用戶將更清晰、有信心、提效率。
篩選和搜索是用戶目標數(shù)據(jù)的好方法,這是一項基本功能,可讓用戶從默認的表格數(shù)據(jù)輕松獲取要查找的內(nèi)容,在數(shù)據(jù)量較大的表中特別有用,一般位于表上方的操作區(qū)域或表頭區(qū)域。
當表格的數(shù)據(jù)量較大時,可在表上方操作區(qū)域增加對象搜索或數(shù)據(jù)分類來提升用戶查找效率,且能同時使用。提供多維的篩選和排序,是增加用戶效率的有效方式。
輸入搜索框輸入用戶關心的內(nèi)容,既可以實時篩選,也可以點擊觸發(fā),一般須支持模糊查詢,否則用戶必須記住所有內(nèi)容,才能查出要找的目標項,成本過高。也有特殊情況,如保密性較高的賬號密碼列表查詢需輸入。
無論手動查詢還是自動查詢,如果查詢條件是組合的幾個,那么一般是填好全部篩選條件再讓用戶點擊查詢按鈕。因為如果用戶要查詢的表格數(shù)據(jù)具有多個屬性且相互聯(lián)系時,組合條件的查詢顯然是更合理的。
如果篩選操作是單個條件獨立查詢,各個篩選條件都是相互獨立的,那么最好填好一個條件便自動查詢。
篩選條件有時候既需要匯總數(shù)據(jù)的,又需看單一條件下的數(shù)據(jù),比如狀態(tài)包含“待付款、待發(fā)貨和待收貨等”,此時則是做成Tab單選較好,如下圖所示。
放置在表頭標簽上的篩選,受列內(nèi)容的影響,一般做單次篩選。通過對表頭標簽旁按鈕的點擊,使用戶更快捷進入到自己的篩選條件中。通常,表單越左的列數(shù)據(jù)越重要的,也是篩選頻率與需求最高的,因此高頻的篩選場景基本可以得到滿足。
垂直滾動時,固定表頭可以讓用戶明白當前單元格數(shù)據(jù)信息的屬性和含義,體現(xiàn)界面友好性。當數(shù)據(jù)列差異不大,用戶不能直接根據(jù)表格數(shù)據(jù)分辨類型時,尤其需要固定表頭。當表頭有操作時,固定表頭更能提升使用效率。
數(shù)據(jù)列表相當龐大而復雜的時候,使用固定表頭可以幫助用戶區(qū)分列與屬性。
當呈現(xiàn)大量數(shù)據(jù)時,表包含的列數(shù)超出了該表的最大寬度,水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作。基于我們讀取信息的方式,從左到右放置關鍵列。最左側的列會引起最多的關注,當我們感興趣時,才會查看其他列,它會影響用戶閱讀所需時間與精力。
在大型表格中,我們才可以水平滾動,最好是尋找可替代方案。表格中文本為什么這么長?能減少字數(shù)嘛?可以將文本換至第二行以減少水平寬度嗎?能否為過長的文字選擇別名嗎?可否用圖形條目取代?是否可以采取工具提醒?是否可以安排在窗口或對話框里?
一般有兩個解決辦法:文本換行,對它縮排;在單元格區(qū)域截斷文本,在提示中顯示完整文本。方法一意味著我們要增加表格高度,且每行高度可能不同;方法二,如果不同文本內(nèi)容的頭幾個字一樣就存在問題了。但這兩種方法都比水平滾動好。
表格初始有一個默認排序,也叫初始排序。但有時,用戶希望將表格中某一行位置換到另一位置。
拖放似乎很簡單。就是抓住某個元素把它放到另一個地方而已??墒牵聦嵣?,拖放過程涉及到了大量細節(jié),在拖放期間,需要處理許多特定的狀態(tài)。
用戶在拖動模塊時,頁面整體布局基本保持不變。因為移動的不是模塊,而是插入條。插入條指明了放置模塊時的目標位置。常用于數(shù)據(jù)量較小,有拖曳排序需求的場景。又可以運用在多個表一起的情況。
穿梭表格
就是多表格拖拽的情況。比如左側的表格內(nèi)容可拖拽至右側列表框,同時支持表內(nèi)上下拖拽更換位置順序,也可直接選中對象在兩欄中按鈕移動,完成拖拽行為。
那如何讓用戶知道可拖拽呢?
增加意向符號;改變光標樣式;增加被拖拽對象臨時性底色,突出顯示。
如何讓用戶知道怎么拖拽到哪里?
被拖入?yún)^(qū)域應增加插入位置符號,可以明確指出放置模塊的目標位置,減少用戶困惑,也可以對放置操作發(fā)生后的頁面外觀提前給出預覽。同時設計時考慮上下左右兩個方向的拖拽運動分別可以觸發(fā)什么結果,超出表格范圍拖拽對象消失。
被拖動對象應呈現(xiàn)為輕微透明的樣式?應該顯示為完全不透明?或者改為使用縮略圖表示?我認為這三種方法都可以。透明效果也會讓更多表格內(nèi)容對用戶可見,有助于用戶預覽最終放置后的結果。從而方便用戶查看頁面,也會表明該模塊處于一種特殊模式中。透明可以表明相應被拖拽對象尚未定位,或者說正處于過渡狀態(tài)。
排序又分為降序和升序,比如,事件相關的表格,默認時間降序排列;風險相關的表格,默認安全降序排序。
表頭排序可以輔助用戶快速挖掘出需要關注的信息,發(fā)現(xiàn)數(shù)據(jù)信息之間的關系,一般可按數(shù)字大小、文字拼音順序、字母順序等其它數(shù)據(jù)特征進行排序。如果表格中不是所有數(shù)據(jù)都能排序時,則需要標識出可排序操作的列,一般采用三角箭頭做為標識,實時反饋當前操作狀態(tài)。
可伸縮列
由于存在多個數(shù)據(jù)標題和列,我們只能根據(jù)表格的寬度來展示數(shù)據(jù)。在某些情況下,表格可允許用戶選擇他們關注的列,在其固定寬度基礎上,讓用戶可以自由拖動列寬邊緣以調整列寬。
自定義選擇列
由于數(shù)據(jù)報表,往往需要滿足各種不同的角色在不同場景下的需求,因而在表格數(shù)據(jù)顯示上,一般采取寧多勿少的原則,即盡可能提供詳細的數(shù)據(jù),由此會數(shù)據(jù)指標過多,難以在表內(nèi)完整展示,導致需要水平拉伸,降低了表格的可讀性。
針對上面這個問題上,可將所有的指標名稱羅列在表格上方,并提供多選操作,在默認情況下僅展示最常用、最重要的幾個指標(如下圖)。這樣能讓用戶在表格上方看到所有指標名稱,避免了原來需要水平拖拽而導致指標瀏覽不全的情況。其次,用戶可以根據(jù)自己的需要,自由的選擇顯示所需指標,隱藏不必要指標,減少干擾。
B端后臺通常會對應不同的角色及不同的需求,可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序。同時系統(tǒng)應記住用戶上一次自定義列的設置。
控制行高
較小的行高讓用戶無需滾動頁面就能查看到更多的數(shù)據(jù),但可掃描性的效果易導致視覺迷失。這就是為什么許多成功的數(shù)據(jù)表設計包含了控制行高(顯示密度)的功能。
樹形表
行也可以結構化分為不同的類別,前面提到了層級表/樹形表,可以嵌套子表格,展開和折疊??刹僮靼粹o一般位于各級行標題左側,具有獨特的視覺效果并具有擴展或折疊的功能。單擊表中的類別標題會在類別的展開或折疊狀態(tài)之間切換。展開與折疊也將極大的影響行內(nèi)容顯示。
分頁可以將表內(nèi)容信息劃分成獨立的頁面來顯示。
優(yōu)點:
1.良好轉換:當用戶是在結果列表中查找特定信息而不僅僅瀏覽信息流時,分頁就是好的選擇。你會知道表格總量與當前頁的準確數(shù)量,能夠決定在哪里停下或者去哪里。
再次尋找特定數(shù)據(jù)時,分頁方案讓我們能夠大概定向到目標數(shù)據(jù)位置。用戶可能難以記錄目標數(shù)據(jù)頁數(shù)字,但一般能記錄大概范圍,而頁碼鏈接能讓用戶更容易到達那里。
2.掌控感:無限滾動就像個無止境空間——無論你滾動多久,你會感覺永遠結束不了。當用戶知道可用行數(shù)量時,他們可以自己主觀做出決定而不是被動滾動。同樣的,當用戶能夠看到結果的數(shù)量時,他們將能夠預估他們查看表數(shù)據(jù)大概要花費多長時間。
缺點:
額外的動作:在分頁方案中,用戶要到達下一頁表內(nèi)容,就必須點擊分頁控件上的按鈕跳轉,等待表格新內(nèi)容的加載。
表格無限下拉加載使用戶在數(shù)據(jù)內(nèi)容面前一直滾動查看。向下滾動的時候不斷加載新內(nèi)容,雖然十分方便與誘人,但不是什么場景都適用。
優(yōu)點:
1.瀏覽:無線滾動提供了一個的方法讓用戶瀏覽表數(shù)據(jù)信息,而不必等待表格新內(nèi)容的加載。當用戶并不特意尋找特定的內(nèi)容時,他們需要通過查看大量內(nèi)容找到自己中意的信息。
2.體驗更好:用戶使用滾動能獲得比點擊分頁有更好的體驗。滾動行為要比點擊更快更容易,對于那些連續(xù)且冗長的內(nèi)容,無限滾動要比把分頁的有更好的易用性。尤其在表格區(qū)域狹小時,使用無線滾動更能節(jié)省空間。
缺點:
1.受限性能:頁面加載速度是良好體驗的一切。尤其是表格計算數(shù)據(jù)時需注意使用無限滾動,緩慢的加載速度會造成用戶的不耐煩與離開。用戶在一個表格頁面中越向下滾動,就會加載更多的內(nèi)容,當數(shù)據(jù)量過大時,結果就是頁面性能越來越低。
2.位置丟失:無線滾動同分頁相比,沒法標記當前位置且不能再隨意回到之前位置。一旦離開,就會丟失當前的瀏覽記錄,如果要回到上次的位置,必須得重新滾動去尋找。當用戶有這種行為的話,無線滾動就會讓用戶產(chǎn)生困擾厭煩。尤其當你刷新頁面時發(fā)現(xiàn)自己又回到表格頂部,不得不重新滾動等待結果的加載以繼續(xù)查看。
3.信息缺失:滾動條并沒有反映出實際數(shù)據(jù)量。假設快要接近底部了,當受到引誘滾動條再滾動一點點時,結果卻會發(fā)現(xiàn)表格數(shù)據(jù)量又刷新了。從一個可用性的角度來說,打破滾動條的正常使用規(guī)則對用戶來講是糟糕的。
一般來說,無限滾動適用于在數(shù)據(jù)有限且信息重復的表格,有利于內(nèi)容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄,易快速訪問。
表格內(nèi)容的取舍要建立在對業(yè)務的了解之上,盡量精簡指標,隱藏不必要信息,減少干擾,避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量,建議默認只展示用戶所必須的信息,其他次要信息通過展開下拉等方式展示,為輔助信息提供深層入口。
展開行允許用戶無需打開新頁面在表格內(nèi)即可查看附加信息,防止用戶迷失。
表格中打開表格,表格組節(jié)把相關的行組合在一起,并且能夠收縮和展開,各組節(jié)層級要有樣式區(qū)別。如有需要,在每個組節(jié)里可以顯示數(shù)據(jù)概要信息。
包括模態(tài)彈窗和非模態(tài)彈窗,模態(tài)彈窗是僅支持打開一個彈窗進行詳細查看,非模態(tài)彈窗是可以同時打開多個,并允許拖動彈窗位置進行信息對比。
模態(tài)允許用戶留在表格視圖中,且更多地關注附加信息和操作:
非模態(tài)彈窗對于主動使用的用戶來說可能很有用,可以通過一系列操作,比較不同行數(shù)據(jù)的細節(jié):
可以通過視圖切換查看更多細節(jié),比如在“表格”和“左列表+右詳情”之間切換,或者提供“只看文本,看文本和縮略圖,只看縮略圖”幾種查看方式。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息,這讓用戶能夠解析大型數(shù)據(jù)集,而且在涉及到多個項目時不會丟失位置。
編輯表格數(shù)據(jù)在大眾化的Web應用程序中并不常見。不過,在企業(yè)級Web應用程序中,表格則占據(jù)統(tǒng)治地位。此時,最常見的用戶需求,就是想要像使用Excel一樣實現(xiàn)表格編輯。畢竟Excel早已成為編輯網(wǎng)格數(shù)據(jù)的一種標準。
表格數(shù)據(jù)的操作大體可分為顯性與隱性。顯性操作,指操作選項顯示在行內(nèi),直觀明了;隱性操作,當鼠標懸停時或勾選才顯示操作選項,界面簡潔明快,可減輕空間壓力,減少干擾。
操作項一般存在于行數(shù)據(jù)最后,為固定列,或表上方位置,兩者對應多種操作場景。
單行數(shù)據(jù)操作
文字按鈕操作項一般不多于三個時,圖標按鈕不多于四個時,操作項跟在行條目后面;當超過時,建議將操作折疊收起,點擊更多彈出多個操作選項。當操作按鈕致灰時,鼠標選中可顯示原因。
如果行操作不那么重要,或者說行操作過于啰嗦影響用戶閱讀時,可使用隱形操作,鼠標在行區(qū)域懸停時,可對當前行背景作出區(qū)分,或放大懸停區(qū)域,同時行尾出現(xiàn)可操作按鈕,進行行操作。如谷歌郵箱:
批處理操作
對于數(shù)據(jù)批量操作的場景,建議將操作放到表格上方,與復選框操作配合使用。批處理操作模式允許用戶對一行或多行對象執(zhí)行操作,并在選中復選框后激活表上方操作按鈕,如刪除、批準、拒絕、復制之類的操作,這將節(jié)省用戶時間,避免重復對多行進行相同操作。
表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現(xiàn)過多而暫時隱藏,如果空間限制導致操作按鈕排列不下,則使用“更多操作”按鈕。
二次確認提示:對于用戶操作結果給出提示窗反饋,用戶點擊「刪除」后,直接操作;出現(xiàn)提示框告知用戶操作成功,并提供用戶「撤銷」的按鈕;用戶進行下一個操作或者15s內(nèi)不進行任何操作,提示框消失,用戶無法再「撤銷」。
在執(zhí)行某些無法撤銷的操作時,點擊刪除后,出現(xiàn)模態(tài)彈窗進行二次確認,在當前頁面完成任務。同時禁止濫用模態(tài)彈窗進行二次確認,就既打斷用戶心流(無法將上下文帶到彈出框中),也無法避免失誤的發(fā)生。
數(shù)據(jù)較多時,單個選擇數(shù)據(jù)費時費力。單選框是只能單選,而復選框是能選擇單個、多個或全部選擇項,而實際上純粹的單選很少見,所以建議一般場景下在表格最左側加上復選框,如前面說到的批量操作,多選后,就可以批量操作。點擊選框所在行的局部能讓整行被選中,每個選定的行都接受突出顯示處理,這種做法可增大點擊區(qū)域減少界面的混亂。
具體設計時,可以按照數(shù)據(jù)類型進行選擇,如郵件已讀、未讀等。
可進行選擇的表格需告知用戶已選數(shù)據(jù)量,在翻頁時是否允許跨頁選擇;全選是當前頁視圖中的所有項目還是選擇表格中的所有項目。
針對于需要進行數(shù)據(jù)編輯的表格。表內(nèi)編輯能使數(shù)據(jù)更具可操作性,表內(nèi)編輯一般優(yōu)于彈窗。要啟動編輯功能,必須通過鼠標單擊,而非鼠標懸停。這樣就能確保整潔的網(wǎng)格顯示效果。假如是通過鼠標懸停來觸發(fā),鼠標每經(jīng)過一個單元格就得顯示一個編輯框,那這種編輯模式就會干擾到不同單元格間的切換,會有多么煩人。
單元格編輯:針對單個,不連續(xù)的可編輯的單元格,為了讓功能更容易被發(fā)現(xiàn),可以在單元格數(shù)據(jù)旁放置編輯圖標,這樣可編輯和不可編輯的單元格視覺對比就十分明顯。單擊該圖標即可觸發(fā)編輯,單元格內(nèi)出現(xiàn)輸入框,保存數(shù)據(jù)并退出。有了這個隨時可見的鏈接后,編輯功能就更容易被注意到了。
單元格編輯時,也可以設置整個單元格為熱區(qū),以便用戶觸發(fā)。
覆蓋層編輯:點擊編輯圖標觸發(fā);通過在頁面上方添加一層來放置編輯數(shù)據(jù)。雖然編輯期間也不會離開當前頁面,但卻不是在頁面中直接實現(xiàn)編輯。而是把一個輕量級的彈出式覆蓋層(如對話框)作為編輯窗口。
選擇覆蓋層編輯而非行內(nèi)編輯的原因也很多。有時候,不可能把某個復雜的編輯任務安排在同一個頁面中完成,如果嵌入頁面的編輯區(qū)域太大,會因為把內(nèi)容過多地推向下方而損害頁面的整體感。
而其他情況下,也可以選擇中斷當前頁面流,尤其是被編輯的信息本身非常重要時。覆蓋層能夠為用戶提供明確的編輯空間。提示如果有必要占用專門的屏幕空間放置編輯窗格,而且頁面的上下文對編輯任務也不重要,就可以考慮使用覆蓋層編輯。
行編輯:針對同一行標簽下的數(shù)據(jù)編輯。新增數(shù)據(jù)行后,視圖定位到新增的行并高亮顯示,讓用戶快速聚焦。幾秒后高亮消失,以免過度干擾用戶。
不過,表內(nèi)編輯圖標會涉及平衡頁面中視覺干擾的問題,如果功能及其提示在頁面中的數(shù)量過多,很可能造成功能的利用率下降。如果一行有多個編輯選項,則可以適當使用彈窗編輯數(shù)據(jù);如果表格有大部分單元格數(shù)據(jù)需要編輯,則可以全局編輯。
全局表格編輯:點擊表格編輯按鈕,當前表格所有可編輯的數(shù)據(jù)單元格內(nèi)顯示文本修改框或類似XLSX的角標,進入一種特殊得編輯狀態(tài),不會給人直覺造成混亂。這一功能基本用于大面積需要填寫和修改時,如大型填寫報表。
大型數(shù)據(jù)表由于支持編輯數(shù)據(jù)處多,這種方法的另一個問題是容易填錯單元格,想象單元格的密集,用戶意外編輯錯誤也時有發(fā)生,這樣的話需要編輯/暫存/提交三個操作。如果發(fā)現(xiàn)編輯的內(nèi)容報錯可被更正,應直接引導用戶更正;如果報錯內(nèi)容不可被更正,則告知用戶原因。
大型數(shù)據(jù)表如需減少與表格無關的視覺干擾,提供表格的沉浸式閱讀體驗,可提供全屏查看的入口,但應注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁面其它內(nèi)容,只留下表格區(qū)域,用戶通過ESC鍵或按鈕隨時退出全屏模式,學習成本較低。
當表格數(shù)據(jù)為空時,在表格的空白內(nèi)容處加入可創(chuàng)建的快捷入口,引導用戶新建表格數(shù)據(jù),或者導入數(shù)據(jù)。如下圖郵箱已發(fā)送郵箱為空時:
當沒有創(chuàng)建訴求的,直接告之暫無數(shù)據(jù)。如數(shù)據(jù)是系統(tǒng)產(chǎn)生的,不是由用戶創(chuàng)建的,直接告之暫無數(shù)據(jù),話術的表述則需與后臺文案的整體風格保持一致。
個人關于web表格設計的看法基本寫完了,在總結歸納中也發(fā)現(xiàn)了自己平常設計表格中的其他問題。大多表格設計在不同場景中需要隨機應變,沒有絕對的規(guī)范,只有相對的規(guī)范。我們要理解規(guī)范背后的原則,推導出適應其他場景的規(guī)范。
文章來源:站酷 作者:小龍哈
藍藍設計( www.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務