• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 表格的UI交互模式指南	共有1284人瀏覽過本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈鮮花：182

發(fā)表時間：2019/7/22 16:53:00 樓　主 表格的UI交互模式指南 　　許多人都認同這樣一個現(xiàn)象：表格雖然是用戶界面設(shè)計中的一個重要部分，但是它們卻經(jīng)常會被忽視。表格應該顯示讓用戶更易讀，更易掃視，更易比較的結(jié)構(gòu)化數(shù)據(jù)，但在很多情況下，表格數(shù)據(jù)卻顯得模糊不清。這就是很多人不喜歡表格的原因。 　　用戶的日常工作經(jīng)常使用表格，但是誰會需要讓他們崩潰的東西呢。要改變這樣的現(xiàn)狀，下面給出一些使表格易用的指南。 　　行交替樣式Alternatingrowsstyling 　　這是很明顯的，但是事實如此嗎？看看今天的WEB應用，你就會發(fā)現(xiàn)很多并不適用。因此，行交替樣式并不明顯，這就是把他列為第一個來闡述的原因。 　　在數(shù)據(jù)較多的多行多列表格里用不同樣式交替顯示不同的行，這會提高用戶區(qū)分數(shù)據(jù)的能力?？梢圆捎帽尘吧蛘弑尘皥D片，如果采用背景色，背景顏色應該比頁面顏色淺或者深一點。圖像背景應該選擇和符合整體配色方案的圖片。也可以把背景色和背景圖組合應用于表格邊框。表格的header和footer部分應該易于識別，可以采用比表格行深或者淺的顏色。 　　BlinkCampaign的表格行采用了淺一點的亮綠色，header采用了稍微暗一點的綠色。 　　整行選擇Fullrowselection 　　如果需要對某一行的局部做操作，讓整行都可被單擊選中。這種做法增大了點擊區(qū)域減少了界面的混亂。一個應用的實例是，每一行只有“查看詳情”可操作，鼠標懸停到這一行的時候整行樣式都應該不同。有好幾種方法可以實現(xiàn)這個效果，推薦jQuery插件的RowSelect。 　　CrazyEgg應用了整行選擇的方法展開當前選中行的詳情（稍后我們會談及該模式），鼠標懸停的行會高亮顯示。我很喜歡他們對這塊區(qū)域以及其他的應用的設(shè)計。 　　表格組節(jié)Tablesections 　　當你想把相關(guān)的行組合在一起的時候可以考慮使用表格組節(jié)，組節(jié)把相關(guān)數(shù)據(jù)組合在一起，是表格的一部分。所有組節(jié)應用同樣的列設(shè)置。舉個例子，在一個顯示國家列表的表格里，地區(qū)就是行組合的自然方式。所有的表格組節(jié)樣式要有差別，并且能夠收縮和展開。如果有需要，在每個組節(jié)里可以顯示數(shù)據(jù)概要。 　　PulseApp用表格組節(jié)顯示一級和二級的收支詳情，每一級都可以再展開。 　　排序Sorting 　　如果不知道關(guān)鍵字，用戶需要從大數(shù)據(jù)量的表格里查詢某行時會很困難。用戶在比較相近信息的時候通常會對表格列進行升降序排列。 　　對表格排序常用的是讓表格標題可點擊。排序的列應該有標記，通常是在列標題文字邊放置一個三角箭頭，指明當前列的順序（升序或降序）。每次單擊順序會相反。 　　排序的列和不排序的列應該有明顯區(qū)分。對某個重要列進行默認的排序。 　　TableSorter是個簡單易用的插件。該插件可以對多種類型數(shù)據(jù)進行分類，你也可以自定義。該插件還支持多列排序，不過我對此不是很感冒。 　　OneHub應用清晰地標明了排序的列和順序。我喜歡這個設(shè)計的原因是，即使是在如此小的區(qū)域，細節(jié)部分也做得很具體。 　　過濾Filtering 　　當有大量數(shù)據(jù)要處理的時候過濾就很有用。使用下拉列表，單選按鈕或者復選框進行過濾選擇。在下面的例子里，builditwith.me使用下拉列表來對用戶的職業(yè)興趣和當前狀態(tài)進行過濾。 　　然而這種過濾只能事先定義好過濾值。例如，你可以對工作類型按全職/兼職，設(shè)計/開發(fā)分類，你就不能按照姓/名來分類，因為這個值有無限多。在這種情況下可以應用關(guān)鍵字對數(shù)據(jù)進行過濾。輸入任意關(guān)鍵字會得到按照關(guān)鍵字進行過濾的結(jié)果。 　　Builditwith.me提供了好幾種過濾方式，每一種過濾方式有對應的列表顯示。 奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個回貼   分0頁

上一頁 / 下一頁   當前第頁

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶