表格設計(上篇):18種樣式,與你分享

JYC
55 評論 59928 瀏覽 269 收藏 9 分鐘

最近在做一款工具類軟件,主要涉及表格的設計,邊工作邊整理了一些表格的設計樣式和原型圖,拿出來與需要的人分享。歡迎與我交流,有需要原型的小伙伴也歡迎在下方留言。

表格樣式一

表格樣式主要分為兩大類,第一類表格中通常以一行為組,操作均是以組為單位進行。此類表格優點是簡單直觀,操作感強,可提前設定好計算公式;缺點是對于某一數據的批量操作較為復雜,不方便自定義復雜計算。

常用于信息展示,無需復雜計算的網頁和C端界面中。

表格樣式一:縫隙

第一類表格以行為一組,表頭通常固定在最上端不參與滑動,現代設計為了美觀通常也沒有單元格的線框,設計時為了更直觀的體現一條數據,可以在每條數據之間留一個縫隙。

表格樣式一:斑馬線

或者用斑馬線形式更直觀的展示數據,避免用戶可能看串行的對不齊數據的情況。

表格樣式一:按鈕

為了頁面的簡潔可以將上端按鈕盡可能減少,整個表格上端原則上保留批量操作功能按鈕,對于單行的操作按鈕可以放置在單行中懸浮展示。

表格樣式一:拖拽

因為單行是一個模塊,當有需要調整順序時可以支持整行的拖拽操作。

表格樣式一:分頁1

當內容較多需要除了無限滾動外,還可以選用分頁的方式,目前較為常見的可以選擇如下方式。

表格樣式一:分頁2

若不需要突出頁碼,主要查看都在第一頁上時可以考慮將放在角落里,到達首頁和到達尾頁根據產品需求決定是否使用。

表格樣式一:搜索

搜索功能考慮到用戶需要手動輸入,很難保證精準搜索,原則上所有搜索均為模糊搜索,必要精準搜索的地方使用篩選功能,給用戶提供篩選選項。通常上端搜索欄不被限定搜索范圍,可以全部搜索。

表格樣式一:分項搜索

對比必要的分項搜索功能可以對應到各個列中,同時輸入時可以給出聯想結果,仍然應該設計為模糊搜索。

表格樣式一:篩選

對于各個列中必須精準搜索的數據可以設計為篩選功能,可為用戶提供可勾選的篩選信息。

表格樣式一:高級篩選

對于部分列有篩選需求的情況,可以設計彈框輸入篩選條件,也可以在此設計復雜篩選條件,篩選規則在上端展示,可以更直觀的看到已篩選項。

表格樣式一:可編輯單元格提示

表格中存在可編輯單元格和不可編輯單元格時,為了界面的一致性和美觀性,可以考慮鼠標懸浮時給出可編輯單元格的編輯框,區分兩種不同單元格樣式。

表格樣式一:信息預覽(浮窗)

對于匯總表中如有預覽詳情的需要,同時對于數據僅為查看沒有修改需要的時候可以考慮懸浮提示將主要數據進行展示。

表格樣式一:信息預覽(彈窗+蒙板)

對于詳細有部分屬性修改需求,對于細節沒有修改需求的,可以考慮在一側彈出彈框進行展示和修改屬性。(如報價單表格信息,報價單審核狀態的可以在此修改,詳細信息仍在明細表中修改)

表格樣式一:信息預覽(折疊)

折疊模式的使用環境基本等同于彈出模式,可根據設計風格進行選擇。

表格樣式一:信息預覽(彈窗)

單獨彈出窗口在需要有多項數據進行對比查看時可以選用,彈出窗體操作通常只考慮狀態改變,不建議其他數據在此更改。

表格樣式一:信息預覽(變導航)

此種展示方式,對于需要查看和修改較多數據的需求可以選中,匯總表將收為類似于導航欄的模式,數據可以精簡只展示關鍵數據,彈窗可設計復雜操作,可以包含明細的修改等功能。

表格樣式一:信息預覽(變窗體結構)

通過減少列表高度流出信息展示空間,建議兩部分在一屏內展示可分別滑動或翻頁,匯總表信息完整,彈出窗體也可進行復雜操作設計。

表格樣式一:信息預覽(自定義表頭)

自定義表頭設計可以將此操作藏在較明顯的位置同時可以保證界面的簡潔。

后續

上篇中主要展示了一些表格樣式一的一些操作習慣,除此之外還會在很多專業工具的設計中用到另一種展現形式類似于EXCEL表格。

歡迎各位做過類似項目的產品經理與我多多交流,如有需要原型的小伙伴可以在下方留言,我再將下載地址放出。如果大家喜歡這篇文章我會繼續完成下篇的內容。

 

本文由 @JYC 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash ,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 全面實用

    回復
  2. 好棒,求原型,學習下,1014105139@qq.com

    來自北京 回復
  3. 網盤已經沒有了,求原型,1719911899@qq.com

    來自廣東 回復
  4. 您好,想學習下原型,934051899@qq.com,感謝分享~

    來自北京 回復
  5. 你好,想學習你的原型,可不可以分享給我,568030953@qq.com

    來自江蘇 回復
  6. 老哥求原型!網盤沒有啦!403124863@qq.com

    回復
  7. 求分享,網盤已經沒有了,Wenyu.yang@healscitich.com 感謝分享!

    來自北京 回復
  8. 厲害了我的哥

    來自四川 回復
  9. 好贊好贊?。。。。。。。。?!

    來自北京 回復
  10. 求分享。1029713569@qq.com

    回復
  11. 感謝

    來自四川 回復
  12. 求原型!謝謝分享??!511564507@qq.com

    來自江蘇 回復
  13. 期望下次分享移動端表格如何設計

    回復
  14. 分享學習下 ..蟹蟹啦~~10988206@qq.com

    來自廣東 回復
  15. 真的對于小白來說很有幫助,,不過原型到期了,可不可以在分享下。

    來自天津 回復
  16. 百度云盤沒有了 能不能再share下~

    來自廣東 回復
  17. 功能上得交互不錯,我現在得后臺也做成沒有線框得限制,現在傳統得布局就這幾種,大佬,能不能分析更多得表格樣式,求教

    來自北京 回復
  18. 好厲害!

    來自江蘇 回復
  19. 相當贊!

    來自廣東 回復
  20. 希望下次可以聊一下移動端的表格設計 哈哈

    來自上海 回復
  21. 大神需要原型

    回復
  22. 大神

    回復
  23. 求原型

    來自江蘇 回復
  24. 回復一下各位小伙伴的問題:
    1、原型主要是展示用的功能并不全面,想做復雜仿真的小伙伴可以自己研究也可以跟我交流。
    原型地址:https://pan.baidu.com/s/1Zq40dUqrP2cXqvuNnc1o0A 密碼:y6pd
    2、動圖的話使用錄屏工具做錄制屏幕后保存為GIF格式即可,目前市面上大部分錄屏軟件都可以做我就不在這里推薦了。

    來自北京 回復
    1. 百度云盤沒有了 能不能再share下~

      來自江蘇 回復
    2. 已經過期了呢,能不能在share下~ ??

      來自北京 回復
    3. 求原型,多蟹了,41641445@qq.com

      來自山東 回復
  25. 老哥 來個原型噻

    來自北京 回復
  26. 好用心的總結,能否問一下這個動態圖使用什么做的嗎

    來自湖北 回復
  27. 總結的很不錯~

    來自北京 回復
    1. 是的

      來自北京 回復
  28. 感覺實用性不強

    來自江蘇 回復
  29. 使用啥工具做的啊

    來自上海 回復
  30. 厲害了

    來自黑龍江 回復