专栏名称: 超人的电话亭
只分享有价值的设计经验。
今天看啥  ›  专栏  ›  超人的电话亭

B端表格页怎么处理那些乱七八糟的按钮

超人的电话亭  · 公众号  · 设计  · 2024-09-24 22:24

主要观点总结

本文围绕B端表格页设计中的按钮处理进行了详细分享,包括按钮的功能定位、分布区域、操作便捷性、色彩应用等方面。文章强调了按钮设计在B端表格页中的重要性,并给出了多个设计原则和实际操作案例。

关键观点总结

关键观点1: 按钮的功能定位

按钮作为最基础的UI控件,实现的功能是点击触发某个系统服务。设计时需关注按钮实现的功能、在当前界面中的权重,以及背后关联的内容。

关键观点2: 按钮的分布区域

按钮通常分布于模块的边缘,在常规表格页面中可分布的区域有标题栏、筛选模块、表格组件的周围。设计时需考虑按钮的布局和视觉呈现,以及操作便捷性。

关键观点3: 按钮的操作便捷性

按钮要尽可能靠近前置操作内容的距离,且保持可见。并排的按钮需要具有相关性,遵循亲密性原则。

关键观点4: 按钮的色彩应用

按钮的色彩应用需要谨慎,避免使用过多的颜色和主色填充。建议使用主色的按钮数量控制在1-2个,其他按钮使用线框按钮、浅色背景或与主色同色相的浅色背景。

关键观点5: 按钮设计的实践案例

文章给出了多个设计案例,包括按钮的排列、间距、合并、状态表示等实际操作方式,以及设计时需要结合实际场景和全局框架的影响进行考虑。


文章预览

在B端的表格页设计中,除了筛选模块和表格组件以外,最麻烦的东西就是怎么处理页面内的——按钮。 这在B端学员提问中一直是一个很高频出现的问题,所以就围绕它来做个简单的分享。 按钮的功能定位认识 按钮作为最基础的UI控件,实现的功能非常基础,就是点击触发某个系统服务(程序)。所以关注按钮本身并不重要,重要的是按钮实现的功能是什么,在当前界面中的权重,以及背后关联的内容是什么。 想要合理的处理按钮就需要先了解表格页本身,想要进一步丰富相关知识可以看我之前做的分享: 年前最后一篇长干货,B端表格规范最终集奉上 案例解析 | 10个表格加分项设计(加了亿点点细节 最基础的表格页框架中通常就包含三个模块,标题栏、筛选、表格组件,用原型表示的话如下所示。 而按钮通常分布于模块的边缘(不会居中放) ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览