web頁面中的表格設(shè)計(jì)，遠(yuǎn)沒那么簡單!

《web頁面中的表格設(shè)計(jì)，遠(yuǎn)沒那么簡單!》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、Web頁面中的表格設(shè)計(jì)，遠(yuǎn)沒那么簡單!　　表格的設(shè)計(jì)遠(yuǎn)遠(yuǎn)沒有想象的那么簡單，除了純粹的數(shù)據(jù)展示，現(xiàn)在的表格越來越兼顧到一些導(dǎo)航的功能在里面，不僅僅縱向展示數(shù)據(jù)，在橫向方面也做了相應(yīng)的擴(kuò)展。本文作者將來詳細(xì)聊一聊表格?！　　　∽鳛轫撁娌季值闹匾M成部分，表格的身影隨處可見。了解與熟知ToB業(yè)務(wù)平臺(tái)軟件設(shè)計(jì)的工作人員都應(yīng)該知道，表格在平臺(tái)應(yīng)用中的重要性。表格出現(xiàn)的概率不是一般的多，內(nèi)容信息的排列布局、大量數(shù)據(jù)的展示、眾多功能操作的按鈕擺放，一般都會(huì)用到相應(yīng)的表格，而且表格的樣式類別也是多種多樣。表格的設(shè)計(jì)也遠(yuǎn)遠(yuǎn)沒你想象中的那沒簡單，可以說要

2、想設(shè)計(jì)出滿足業(yè)務(wù)需求、符合用戶心智模型的表格不是那么的輕而易舉?！　　　”疚木蛠碓敿?xì)聊一聊表格。聊之前，我們應(yīng)該明確三個(gè)詞的概念：列表、表格、表單?！　×斜?，英文釋義為List。百度釋義為：以表格為容器，裝載著文字或圖表的一種形式，叫列表。如，班主任點(diǎn)名的花名冊，就是一個(gè)列表；QQ軟件的好友列表等等?！　”砀瘢⑽尼屃x為Table，又稱為表，即是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段，主要承載數(shù)據(jù)的歸納、展示與對比的功能，是列表的一種?！　”韱?，英文釋義為Form。表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能。如當(dāng)我們注冊某個(gè)網(wǎng)站的賬號時(shí)，

3、填寫個(gè)人信息的頁面，就是一個(gè)表單。　　表格經(jīng)常和其他界面元素一起協(xié)同使用，用于展示和操作結(jié)構(gòu)化數(shù)據(jù)，并經(jīng)常用于詳情信息的入口。通常表格的組成元素以及相關(guān)元素會(huì)有多個(gè)部分，筆者根據(jù)自己設(shè)計(jì)表格的工作經(jīng)驗(yàn)將表格概括為篩選區(qū)、表頭、正文以及底欄等四個(gè)部分，其各個(gè)部分包含的相關(guān)元素如圖所示?！　　　〗酉聛恚覀儗Ρ砀竦拿恳粋€(gè)部分進(jìn)行講解?！　∫?、篩選區(qū)　　篩選區(qū)可以看作表格的導(dǎo)航。篩選區(qū)主要包括兩部分，一是篩選，二是搜索。其目的相同，都是將操作者所關(guān)注的數(shù)據(jù)展示到前面，便于查看?！　?、篩選　　篩選是將一類數(shù)據(jù)展示出來，而將其他類型的數(shù)據(jù)隱藏。

4、當(dāng)表格數(shù)據(jù)的類型多于兩種時(shí)，則考慮采用篩選條件?！　。?）篩選案例1　　篩選條件在頂部，共七個(gè)。因?yàn)楹Y選條件存在交叉，所以都展示在頂部。選擇條件以后，需點(diǎn)擊才能觸發(fā)篩選。　　　?。?）篩選案例2　　篩選條件在頂部，因?yàn)楹Y選條件不存在交叉，所以實(shí)時(shí)篩選?！　　　。?）篩選設(shè)計(jì)建議　　對于篩選條件沒有交叉的場景，當(dāng)條件少于五個(gè)，制作成table切換；超過五個(gè)少于二十個(gè)，采用下拉選擇；多與二十五個(gè)，為下拉選擇添加模糊匹配設(shè)置，并配備實(shí)時(shí)刷新；　　對于篩選條件有交叉的場景，建議采用展開形式，并配備手動(dòng)加載刷新?！　τ谛栎斎牒Y選條件的場景，如日

5、期篩選條件，單獨(dú)處理，展示出來。　　2、搜索　　搜索是目的在于定點(diǎn)查看。搜索的使用場景是操作者要查看某一特定數(shù)據(jù)，輸入相應(yīng)的條件，進(jìn)行搜索，頁面對所搜索的數(shù)據(jù)進(jìn)行展示?！　。?）搜索案例1　　搜索框緊跟篩選條件，并配有確定搜索按鈕?！　　　。?）搜索案例2　　當(dāng)存在多個(gè)搜索輸入框時(shí)，用高級搜索打包收起，點(diǎn)擊展開，同時(shí)，配備搜索與重置按鈕。點(diǎn)擊右上角的漏斗可以設(shè)置高級搜索條件的顯示與隱藏。　　　?。?）搜索設(shè)計(jì)建議　　搜索輸入框盡量采用模糊搜索，不要讓用戶去辨認(rèn)、識別要輸入的內(nèi)容；　　對于多個(gè)搜索條件交叉搜索的場景，建議采用高級搜索按鈕，

6、將其打包收起，并配置重置按鈕，便于一鍵清空所有搜索條件，便于接下來的搜索?！　《?、表頭　　表頭是對表格數(shù)據(jù)的操作，包括行標(biāo)簽、操作工具等。有些簡單表格，將表頭與篩選區(qū)合并，將篩選條件、搜索雜糅在一起?！　?、固定　　表頭固定，目的在于向下滾動(dòng)表格時(shí)，表頭出現(xiàn)在頁面頂部，時(shí)刻指示出該列數(shù)據(jù)的類別屬性。　?。?）固定案例1　　該案例中每列數(shù)據(jù)具有明顯的差異，數(shù)據(jù)本身體現(xiàn)出了類型，在不需要表頭情況下，用戶能夠清楚的知道數(shù)據(jù)類型及意義，不會(huì)出現(xiàn)混淆，故沒有采用固定表頭的設(shè)計(jì)。　　　?。?）固定案例2　　表格中的數(shù)據(jù)列差異不大，用戶不能直觀的根據(jù)

7、表格中的數(shù)據(jù)分辨出數(shù)據(jù)類型，因此采用固定頂部表頭，指示出數(shù)據(jù)類型?！　　　。?）固定表頭設(shè)計(jì)建議　　在數(shù)據(jù)顯示超過40條時(shí)（電腦屏幕一屏無法完全顯示，需要滾動(dòng)查看時(shí)），且表格中的數(shù)據(jù)不能直觀的展示出數(shù)據(jù)類型，建議采用固定表頭的形式，時(shí)刻顯示數(shù)據(jù)類型；　　當(dāng)字段數(shù)量過多，需要橫向滾動(dòng)表格，且需要對比數(shù)據(jù)時(shí)，采用固定屬性列字段?！　?、字段數(shù)量　?。?）字段數(shù)量案例1　　表格的字段過多，且數(shù)據(jù)分類不明顯，因此采用橫向滾動(dòng)形式，將重要數(shù)據(jù)放在表格左側(cè)，次要數(shù)據(jù)放到表格右側(cè)。　　　　（2）字段數(shù)量案例2　　與案例1相同，字段過多，采用橫向滾動(dòng)形

8、式。但相比案例一，在向右滾動(dòng)數(shù)據(jù)時(shí)，縱標(biāo)簽固定，指示數(shù)據(jù)類型。第一列是時(shí)間需要進(jìn)行對比，固定了第一列使得閱讀起來存在一個(gè)基礎(chǔ)。　　　?。?）字段數(shù)量案例3　　對數(shù)據(jù)進(jìn)行分類顯示，做成下拉選擇切換形式。將重點(diǎn)