登陆

章鱼彩票电话-根底组件之二:列表组件,细节不容疏忽

admin 2019-05-11 182人围观 ,发现0个评论

在 Web 端后台产品规划中,列表组件是最常见的组件,也是后台产品规划中的根底规划。有时,后台渠道中可高达70%的页面都是由列表页组成。章鱼彩票电话-根底组件之二:列表组件,细节不容疏忽结合以往经历,今日将列表组件相关内容收拾如下。

一、组件含义

在 Web 端后端产品中,列表是一种将存储在数据库中的数据以“拟物化”的方法有序出现的载体,便利用户进行办理、计算。

在数据库中,数据以结构化方法存在。当数据载入列表这个载体中,一行数据则可代表着一个使命、一份公函、一个用户、一个产品等等。用户在了解列表物化后,在操作渠道上直接办理数据。

二、组件内容

列表组件,往往由标题、挑选区域、列表区域、分页,调配组成。

1. 标题

简略明了的标题,给人一眼就得知这表格要代表的事物以及信息。

2. 挑选区域

挑选区域,是辅佐列表做信息挑选定位。列表信息往往数量许多,用户可章鱼彩票电话-根底组件之二:列表组件,细节不容疏忽通过挑选项敏捷定位某一类、某一条信息。关于信息项简略、数据量少的列表,挑选区域并非必要。

3. 列表区域

列表区域,是由表头、单元格、尾部组成,将列表数据规整有序地展现出来。

表头,由事物的特点组成,也是每个数据结构中的信息项组成。

单元格,则是每个事物详细特点的数据与操作。

4. 分页

尾部,常见是分页规划。列表数据量往章鱼彩票电话-根底组件之二:列表组件,细节不容疏忽往过多,在 Web 端规划时很少一页无尽展现究竟,内容冗长且体会感差。而分页规划,既让用户对阅览内容有预期,得知当时方位以及切当的内容数量。

三、组件规划

在解说完组件的内容后,接下来说说列表组件的规划与款式。

1. 挑选区域

挑选区域,由挑选项、操作按钮组成。

挑选项的款式多样,由文本查找、选项(级联选项、标签选项)、时刻控件、日期控件等。

挑选项的信息内容,来历列表数据。列表数据项都可作为挑太孙悍妻选项的信息进行挑选定位。考虑实用性与空间问题,一般会依据需求做取舍。

当然,若事物的特点分类多,不同用户有着不同的挑选需求,则可供给根底挑选项,用户可自定义增加需求挑选项。

挑选区域一般带有“查询”、“重置”的操作。

挑选的交互规划,是在做出挑选项挑选、查找后(多项并查),点击“查询”,对列表数据进行挑选定位;挑选后,点击“重置”可清空挑选内容。

2. 列表区域

列表表头的信息项可按重要性排序。重要特点可参阅阅览习气,由左到右进行排序。

考虑到事物的特点多,用户有着展现不同信息项的需求,可供给自定义表头。列表默许展现根底信息项,一般在表头邻近供给自定义表头,可进行表头信息项的挑选、排序。

若列表有操作列,一般放置于列表最右边。

单元格的列表款式多样,可依据数据结构挑选合适的款式。

(1)一般款式

常见款式,每行数据都代表着独立的一个事物数据。

(2)层级款式

首要用于有从属关系的数据列表展现,但不主张层级过多,一般控制在3层左右。

3. 分页

分页,常见由4种根本元素组成:上页+页码+下页(主页+上页+页码+下页+尾页)、总页码、跳转页、“承认”按钮。依据这些根本元素在不同的场景会有不同的组合。

当挑选区域内容过多时,可展现榜首行的挑选项,其他收起。

2. 列表对齐

列表信息对齐,可带来视觉上的规整与明晰,更便利阅览。

对齐方法可依据产品的规划一致,可为左对齐、居中对齐等。列表信息项类型多样时,还可针对类型调整对齐方法进行区别。

3. 列表操作反应

带操作的列表需考虑操作反应规划。

列表修改数据等操作,在操作后,不管成功与否,都需对应的操作反应(操作提示、跳转页面、弹窗处理等)。

列表挑选操作,选中列表行可采纳高亮或有底色的反应。

4. 列表信息项过多时

事物的特点过多时,因为屏幕宽度约束,无法全屏展现一切信息项。可考虑2种处理方法。

(1)仅展现根底信息项(中心信息项)

依据需求,若事物的特点并非都是中心数据,可考虑只展现中心的、有价值的信息项。

(2)超出屏幕部分,进行翻滚处理

若展现数据超出屏幕宽度,可考虑翻滚条翻滚规划,但因为翻滚条规划躲藏性较深,规划时可按重要性从左排序。

而操作列可固定在屏幕最右侧方位,或提前到表格左边。

5. 单元格信息内容过多时

单元格内容过多时,可针对表格款式进行处理。

若表格款式为固定行高,则信息超出单元格部分以“…”省掉,可在鼠标 hover 时起浮展现完好的信息内容,或进入详情页检查完好信息内容。

若表格款式为最小行高,则规划信息量多的单元格进行换行撑开,但该规划在信息量良莠不齐时,简略影响漂亮。

五、总结

列表组件,看似个简略罗列数据的东西,但实践要做出一个高效的、快捷的列表,需求产品们去考虑许多细节与规划。本文也仅从 Web 端后台产品来聊列表组件,而在移动端、Web 门户等都有着不同规划与细节,期望后续有时机弥补。

个人经历输出,若有主张或问题,欢迎提出,谢谢。

本文由 @Cherie 原创发布于人人都是产品司理。未经许可,制止转载

题图来自 Unsplash,根据 CC0 协议

声明:该文观念仅代表作者自己,搜狐号系信息发布渠道,搜狐仅供给信息存储空间服务。
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP