按钮设计超详细解读 | 交互组件
一、按钮尺寸设计规范
1. 移动端
2. web端
👆以上基本是目前最常用的几个按钮尺寸啦～
在实际界面设计中，该选什么尺寸的按钮捏？
【大尺寸】登录按钮；结尾的主提交按钮，比如结算、完成；企业官网CTA按钮【中尺寸】最常用的尺寸，不知道选哪个尺寸就选它准没错【小尺寸】常用语一些小组件、小卡片中，比如气泡窗。
二、「链接」和「按钮」的区别
1. 链接 link
链接起到了导航的作用，一般点击后都是打开一个新网页，链接的样式一般都是纯文字形式。
2. 按钮 button
按钮用于发起动作，点击后触发相应的业务。
现在很多按钮采用纯文字的样式，和链接几乎一样。所以为了做出区分，当hover或者点击纯文字按钮后，背后会出现浅色背景色块。
三、如何排布按钮的位置？
按钮在页面中位置的摆放，主要遵循两个原则：雅各布尼尔森的F模式布局。
1. F模式布局 —— 雅各布尼尔森
Jacob Nielsen根据眼动追踪研究结果提出了这种F模式。
眼睛浏览顺序一般是从左往右，然后从上往下
2. Z模式布局 —— 古腾堡
Gutenberg diagramm认为人的阅读方式应该是遵循某种习惯进行的，从左到右，从上往下。从左上角开始，经过一系列的来回移动，最终扫描至右下角的终点区。
这也就解释了，为什么很多界面把最终的【结算】、【确认】、【提交】按钮放在最右边。
四、B端页面中按钮位置
根据上面两个原理，可以得出在B端表单界面中按钮摆放的通用原则规律。
PS：通用规律仅做参考，不是规则和束缚，实际在界面中如何摆放，还是要根据具体的使用场景思考放置哦~
五、按钮的类型和使用场景
六、按钮的排列顺序——按照对话习惯排列
七、两种下拉按钮的区别
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
