你真的了解按钮吗 按钮样式有那些( 二 )


你真的了解按钮吗 按钮样式有那些

文章插图
2. 圆角值根据业务风味 。三种圆角值的设定:
1)圆角值为 0
这个适合用在比较严谨 / 企业级业务中 。例如:阿里云;
你真的了解按钮吗 按钮样式有那些

文章插图
2)小圆角值
这个是经常在用的形式 。在不失严谨的同一时间还有有的细节 。如果可以的话 。尽量选这个的;
你真的了解按钮吗 按钮样式有那些

文章插图
3)超大圆角值
这个往往一般需要有特别的业务风味才可使用 。样式不好把控全局效果 。所以使用频率较低 。慎重使用 。
你真的了解按钮吗 按钮样式有那些

文章插图
较大圆角值 。此类一定不要用 。不要问 。问就是太丑 。
你真的了解按钮吗 按钮样式有那些

文章插图
3. 精简文字按钮里面的文字一定是精简的 。不要展示过多文字 。更不要折行 。
你真的了解按钮吗 按钮样式有那些

文章插图
4. 文字与按钮比例要适中文字与按钮的比例要适中 。文字不要太大或太小 。都会波及视觉展示 。
你真的了解按钮吗 按钮样式有那些

文章插图
5. 弥散阴影如果你想要用弥散阴影 。阴影的颜色尽量用带按钮本身颜色偏向的 。这样会让按钮更有呼吸感 。需要小心的是:只有主按钮才能用阴影 。很多级其他不要用 。否则查看度会变差 。并且会让按钮的体验变得很差 。
你真的了解按钮吗 按钮样式有那些

文章插图
6. 主次操作按钮样式统一主次操作按钮样式要统一 。不要乱用样式 。
你真的了解按钮吗 按钮样式有那些

文章插图
7. 按钮样式与很多组件要有区别事实使用中 。按钮样式不要与很多组件样式混用 。避免让玩家发生误解 。做有的不必须的操作和思考 。
你真的了解按钮吗 按钮样式有那些

文章插图
8. 不一样场景适配现在暗黑模式也是常用的场景了 。所以黑/白场景下都要思考到查看度的问题 。
你真的了解按钮吗 按钮样式有那些

文章插图
9. 主次按钮的地点主次按钮差不多的问题 。也常常出现在设计研究会中 。这次我直接放个结论吧 。之后不要再为这件事吵架了 。
在提交页面、弹窗中 。主按钮在右;在很多常规页面上 。酌情思考 。
你真的了解按钮吗 按钮样式有那些

文章插图
五、按钮尺寸按钮尺寸详细用多大的 。这里我总结了一个规范(仅代表个体意见) 。
高 = 文字行高 + Xn 。X=大自然数 。n=4宽 = 文字宽度 + Xn 。X=大自然数 。n=4
你真的了解按钮吗 按钮样式有那些

文章插图
在很多地方也完全可以用类似的公式去做规范 。例如卡片的间距 。你可以设置 n 为基本值 。在此基本上用 Xn 去选取适合的值 。
小心:常用的字号为 12px、14px 。尽量不要用太大的字号在按钮上 。
六、总结按钮只是众多组件中的之中一个 。也是经常在用的组件之一 。
对于设计师来说 。无论大小组件 。我们都要精益求精的去思考 。只有把每一个细节做好了 。才能做好业务 。
日积月累的把每一个知识点把握了 。我们也就成长了 。

推荐阅读