旗下產業(yè): A產業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > 后臺列表設計避坑指南_下

后臺列表設計避坑指南_下

時間:2020-09-21來源:m.lb577.com點擊量:作者:Gella
時間:2020-09-21點擊量:作者:Gella

  列表頁是構成后臺使用界面的重要組成之一,聚合了眾多信息并提供操作入口。區(qū)別于小而美的C端產品列表,后臺系統(tǒng)的用戶希望列表的內容又多又全面(表格),但在操作時又能支持快速定位(搜索,包含 篩選)、準確處理(操作)。這需求貌似有些矛盾,但在很多場景下,例如客服在接待客戶時窗口時間極其短暫,既要全面獲取相關信息,又要快速應對解決客戶問題。因此這需求不僅合理而且是剛需。
 

  列表頁由「搜索」、「表格」和「操作項」三大基本塊組成。剛才提到的矛盾點也是由這三個模塊之前的互相影響和制約(后面會詳細闡述)。我們當初由于在設計時忽視了特定場景細節(jié),以及生搬硬套了一些看起來很美很簡約的交互樣式,沒有處理好這三個模塊內部以及之間的關系,被用戶抱怨說不好用。今天AAA教育郭老師就將這篇文章中「搜索」、「列表」、「操作」三塊問題進行分析和定位,盤點一下那些被淘汰掉的解決方案,給大家提供一份避坑指南
 

  注意,不存在「最好」的通用方案,只有應對具體需求「最合適」的解決方案。
 

  列表
 

  列表的主要問題依舊是內容太多帶來的:
 

  表頭字段太多,超出屏幕之外,左右滑動才能完整查看條目內容,導致眼動頻繁,增加認知負擔。
 

  條目太多,批量操作可能要多次翻頁。
 

  另外,其他潛在問題也會增加列表展示的復雜性,例如條目之間存在一定相關性——基于某份主合同后續(xù)簽訂幾份補充合同(這里不討論業(yè)務邏輯合理性),那么簡單按照簽訂時間點排序,就無法體現(xiàn)合同之間的關聯(lián)關系。
 

  在設計時,應著眼于避免內容太多導致的認知負擔和操作成本。我們嘗試了一些方法來減少信息噪音,抽象來說方法歸為兩個字——「藏」和「換」?!覆亍?,就是隱藏低優(yōu)先級信息,需要的時候才允許他們出現(xiàn)?!笓Q」就是轉換信息呈現(xiàn)的形式。下面我們一一展開。
 

  方法一:藏
 

  用戶來配置展示哪些表頭項
 

  和之前提到的搜索區(qū)域配置功能類似,允許用戶配置表頭項,隱藏暫不需要的內容。

 

后臺列表設計避坑指南

 

  設計者 Ashmita Bhattacharyya
 

  使用展開行
 

  適合主次層級對比強烈的列表。將重要度低的內容放入展開行內,這樣可以避免橫向滑動。
 

  但如果同時查看多條展開行,需要多次點擊展開。

 

后臺列表設計避坑指南

 

  圖片來自Element UI
 

  樹形數(shù)據
 

  使用樹形數(shù)據可以將一組有父子關系的數(shù)據聚合呈現(xiàn),類似文章一開始提到的主合同+補充合同的場景。

 

后臺列表設計避坑指南

 

  圖片來自Element UI
 

  方法二:換
 

  使用圖像代替文字
 

  圖像比文字在信息傳遞上更直觀。原因是人們對圖像的處理效率遠高于閱讀和理解。利用清晰易懂的圖像可以將信息檢索效率提升一個數(shù)量級。

 

后臺列表設計避坑指南

 

  圖片來自設計者Dwinawan
 

  合理的默認排序規(guī)則
 

  常見的排序規(guī)則包含時間的正、倒序等。合理的排序規(guī)則,決定了首屏是否能呈現(xiàn)對用戶重要度更高的內容,以及操作反饋是否可見。舉個例子,用戶新創(chuàng)建完成一個新條目后,列表按照創(chuàng)建時間正序排列,刷新后沒有任何變化,需要用戶翻到最后才能看見,那么這個反饋體驗就不太好。
 

  我們也可以根據信息的狀態(tài)設置權重參數(shù),綜合計算權重值后,重要度高的信息排在前面。舉個微信的例子,大家是否發(fā)現(xiàn)訂閱號消息的排序并不是按照更新時間排序?微信的解釋是,訂閱號消息排列順序會根據訂閱號的優(yōu)質程度、用戶對訂閱號的喜愛程度以及群發(fā)文章的內容質量等綜合因素動態(tài)變化。也就是有多個權重參數(shù)值疊加,綜合排序。
 

  另外還可以允許用戶將任意條目置頂?shù)?,例如微信可以將某人或某群組的消息置頂。
 

  注意
 

  橫向滾動條。橫向滾動條在底部的話,可能因為列表條目太多(例如一頁展示50條),導致用戶未將列表拉到底就看不到滾動條。如果設備是觸屏,無法支持左右滑動會非常不便,因此列表頂部也需要展示橫向滾動條。
 

  固定列。如果列表支持橫向滾動,那么選擇列、名稱等標識列、操作列等建議固定,便于定位和操作。

 

后臺列表設計避坑指南

 

  頂部橫向滾動條、固定列
 

  數(shù)字右對齊。在小數(shù)位保持一致的情況下,數(shù)字右對齊,更容易對比數(shù)字大小。
 

  空數(shù)據。沒有的數(shù)據不要為空,可以用符號「-」代替。

 

后臺列表設計避坑指南

 

  數(shù)字右對齊、空數(shù)據
 

  操作
 

  操作我們大致分成兩類來分析
 

  批量操作,例如添加/導入、設置/分配、刪除、導出等。
 

  針對單條內容的操作,例如編輯、刪除、查看等。
 

  1. 批量操作
 

  批量操作相對復雜度高,出錯的概率也更大,以下幾條內容是我們設計摸索過程中總結出來的防錯策略:
 

  不建議支持跨頁選擇
 

  跨頁選擇首先會增加開發(fā)難度及測試復雜度,用戶操作也容易出錯。比如,在選擇過程中,已選擇數(shù)據的狀態(tài)可能在外部發(fā)生了變化,不再符合批量操作的條件,從而導致任務處理失敗。
 

  設置處理數(shù)目上限
 

  如果數(shù)據量太大,系統(tǒng)負擔過重,也會增加超時等任務失敗的頻率。
 

  協(xié)助計算
 

  在用戶選擇過程中動態(tài)計算合計值并實時反饋,防止用戶提交后才發(fā)現(xiàn)無法通過系統(tǒng)的校驗條件。例如用戶在批量還清多筆賬單時,可以在選擇頁面就提醒用戶所選金額超出賬戶余額限制,而不是在提交后才給用戶報錯。
 

  異步反饋
 

  有些操作數(shù)據量大,處理耗時較長,例如導出全量內容等,可采用異步的反饋方式,以避免耽誤用戶處理其他任務。依據場景,異步反饋還可采用多種通道保證信息傳達給客戶,例如系統(tǒng)內提示+短信+郵箱提示等。
 

  2. 單條操作
 

  列表的信息展示,我們會嘗試取舍和隱藏。
 

  但關于操作,在很多場景下,盡量全部展示,避免用戶需額外點擊才能將操作項喚出。原因有二:降低學習成本、提升操作效率。

 

后臺列表設計避坑指南

 

  圖片來自設計者Asish Sunny,設計方案將部分操作隱藏,不過在很多場景下并不適用。
 

  在展示上,可以使用圖標按鈕代替文字按鈕,但要注意語義一定要準確
 

  不要過于追求創(chuàng)新導致語義和用戶心理模型產生偏差。圖標除了具有按鈕功能,還能提示信息狀態(tài),一舉兩得。

 

后臺列表設計避坑指南

 

  圖片來自設計者Aaron Iker
 

  在交互上,如果操作可以在彈窗內解決,盡量不要新開頁面。
 

  尤其是連續(xù)逐條處理的任務,如果頻繁切換頁面,用戶還要耗費時間重新定位任務條目。
 

  因此,您現(xiàn)在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關在該領域工作的更多相關文章。



 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網安備 11010802035704號

網站地圖