js一个按钮弹出两个按钮_一个UI按钮的自我修养（一）

【后台回复“002”，领取6本原研哉设计书籍福利】

一位合格的UI按钮究竟需要具备什么样的素质？我们在设计UI按钮的过程中，细节处理不当的情况经常发生，我们这次详细拆解一下UI按钮，应该具有哪些“自我修养”。

UI按钮的设计尺寸

在着手设计APP界面时，最突出的问题就是元素尺寸如何设置的问题，这里我们分别从高度和宽度两个方向来讨论

1. 按钮高度

当我们在设计UI按钮时，应优先从高度入手，然后再去定义宽度(别问，问就是前辈总结的经验参数)，我们将高度分：高权重、中权重、低权重三类

• 高权重：80px~112px
• 中权重：48px~80px
• 低权重：24px~48px

高权重的按钮，是推荐操作按钮，是页面里推荐使用的关键操作，一般在页面中的配色、占的面积都比较突出，便于用户分辨，能够提高用户的使用效率，降低用户的学习成本

如登录页的登录，流程页的下一步，购买确认页的立即付款等，这一类的按钮高度应不低于80px

中权重的按钮，是次要操作按钮，对页面全局控制的，但重要程度较差，一般是新页面的入口，页面中对某个区域进行影响的操作，

如登录注册页的注册，编辑页面的保存草稿，发现页的点赞、关注等，这类高度应不低于48px

低权重按钮，是局部操作按钮一般对页面中的几个相同的板块或某个固定的板块造成影响，点击后，按钮的状态会改变，或跳转到新的页面

如搜索页的历史记录，订单页的评价，个人中心的开关按钮，这一类按钮高度应不高于48px

2.按钮宽度

按钮的宽度一般与按钮内容的相关，内容越多，按钮也相应越宽，但高权重按钮，可以无视内容的长度，因为高权重按钮通常横跨屏幕或撑满屏幕内容区域，可以例外

对于普通按钮，当左右边界与内容的距离过大时，会使按钮看起来十分不协调，所以我们要根据内容的长度来设置宽度，左右间距的大小，要小于或等于上下间距的两倍，在保证紧凑的同时，也要注意按钮的呼吸感

喜欢这篇文章可以关注我！

【后台回复“002”，领取6本原研哉设计书籍福利】