Table with many columns: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
如何設計許多欄位的表格 | 如何設計許多欄位的表格 | ||
== | == Consideration == | ||
* 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table</ref>。 | * 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊<ref>What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table</ref>。 | ||
* 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 <ref>UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns</ref>。 | * 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 <ref>UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns</ref>。 | ||
| Line 7: | Line 7: | ||
</ref><ref>Tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/117550/tables-with-many-columns?newreg=fdf5edeeca6a4cfba3f056107cbbed17 "Don’t make it responsive, make it adaptive!"</ref>。 | </ref><ref>Tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/117550/tables-with-many-columns?newreg=fdf5edeeca6a4cfba3f056107cbbed17 "Don’t make it responsive, make it adaptive!"</ref>。 | ||
== Design ideas == | |||
* [https://codepen.io/search/pens?q=Responsive+Tables CodePen Search: Responsive Tables] | |||
== References == | == References == | ||
Latest revision as of 00:36, 30 June 2022
如何設計許多欄位的表格
Consideration[edit]
- 使用者是否需要這麼多的欄位？只顯示主要欄位，點選該列資料才顯示完整細節資訊[1]。
- 如果是複雜的資料，則建議將資料切割成多個檢視 (view) 可以查看子集合的資料 [2]。
- 設計細節，(1) 顯示主要欄位，次要欄位可以勾選或隱藏、(2) 可以使用橫向捲軸、(3) 將表格轉換成 list 等等 [3][4]。
Design ideas[edit]
References[edit]
- ↑ What to do with too many columns in a table? - User Experience Stack Exchange https://ux.stackexchange.com/questions/95855/what-to-do-with-too-many-columns-in-a-table
- ↑ UI Patterns for tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/28090/ui-patterns-for-tables-with-many-columns
- ↑ How should large table columns be handled on a responsive design? - User Experience Stack Exchange https://ux.stackexchange.com/questions/15463/how-should-large-table-columns-be-handled-on-a-responsive-design
- ↑ Tables with many columns - User Experience Stack Exchange https://ux.stackexchange.com/questions/117550/tables-with-many-columns?newreg=fdf5edeeca6a4cfba3f056107cbbed17 "Don’t make it responsive, make it adaptive!"