主要观点总结
本文围绕B端表格页设计中的按钮处理进行了详细分享,包括按钮的功能定位、分布区域、操作便捷性、色彩应用等方面。文章强调了按钮设计在B端表格页中的重要性,并给出了多个设计原则和实际操作案例。
关键观点总结
关键观点1: 按钮的功能定位
按钮作为最基础的UI控件,实现的功能是点击触发某个系统服务。设计时需关注按钮实现的功能、在当前界面中的权重,以及背后关联的内容。
关键观点2: 按钮的分布区域
按钮通常分布于模块的边缘,在常规表格页面中可分布的区域有标题栏、筛选模块、表格组件的周围。设计时需考虑按钮的布局和视觉呈现,以及操作便捷性。
关键观点3: 按钮的操作便捷性
按钮要尽可能靠近前置操作内容的距离,且保持可见。并排的按钮需要具有相关性,遵循亲密性原则。
关键观点4: 按钮的色彩应用
按钮的色彩应用需要谨慎,避免使用过多的颜色和主色填充。建议使用主色的按钮数量控制在1-2个,其他按钮使用线框按钮、浅色背景或与主色同色相的浅色背景。
关键观点5: 按钮设计的实践案例
文章给出了多个设计案例,包括按钮的排列、间距、合并、状态表示等实际操作方式,以及设计时需要结合实际场景和全局框架的影响进行考虑。
文章预览
在B端的表格页设计中,除了筛选模块和表格组件以外,最麻烦的东西就是怎么处理页面内的——按钮。 这在B端学员提问中一直是一个很高频出现的问题,所以就围绕它来做个简单的分享。 按钮的功能定位认识 按钮作为最基础的UI控件,实现的功能非常基础,就是点击触发某个系统服务(程序)。所以关注按钮本身并不重要,重要的是按钮实现的功能是什么,在当前界面中的权重,以及背后关联的内容是什么。 想要合理的处理按钮就需要先了解表格页本身,想要进一步丰富相关知识可以看我之前做的分享: 年前最后一篇长干货,B端表格规范最终集奉上 案例解析 | 10个表格加分项设计(加了亿点点细节 最基础的表格页框架中通常就包含三个模块,标题栏、筛选、表格组件,用原型表示的话如下所示。 而按钮通常分布于模块的边缘(不会居中放)
………………………………