UI进阶知识-按钮设计,看这篇文章就够了( 三 )


小圆角的含义:稳定、中性 。适用于用户跨度较大的常规类产品中,例如微信 。

UI进阶知识-按钮设计,看这篇文章就够了

文章插图
 
 
以寺库、微信、土豆为例,寺库是奢侈品类电商,因此在设计时需要提现高端,因此在按钮设计时采用直角设计 。而微信的用户群体上到七八十岁,下到几岁其年龄范围广,因此采用稳重的小圆角较为稳妥 。土豆短视频其用户群体较为年轻活泼,因此采用全圆角较为适合 。
2.使用合适的状态
在部分界面设计中需要考虑按钮的不同状态的设计,从而提高用户操作流畅度 。移动端完整的系统按钮可以分为正常状态、按压状态、禁用状态 。
UI进阶知识-按钮设计,看这篇文章就够了

文章插图
 
其中,正常状态和加载状态展示的是APP的主色;按压状态在正常态的基础上叠加不透明度15%的黑色#000;禁用状态是设置灰色或者将正常态设置不透明度45%,该状态适用于提交界面中使用,比如登陆注册、转账等 。如下图所示:
UI进阶知识-按钮设计,看这篇文章就够了

文章插图
 
以京东金融为例,当未输入转账金额时,按钮禁用为灰色,当输入金额时按钮为正常状态 。不过随着互联网的发展,宽带速度不断的提高,按压状态慢慢被抛弃,他存在的意义不像以前网络不发达的时候,点击还需要时间反应 。
3.提供恰当的反馈
当用户点击按钮时,他们希望界面可以给些恰当的反馈 。如果没有任何反馈,用户会以为系统没有收到他们的操作,然后就会重复点击 。这种行为常常导致多个不必要的操作 。如下图所示:
UI进阶知识-按钮设计,看这篇文章就够了

文章插图
 
以土豆短视频为例,当点击关注时为了避免用户点击没有反应的情况,可在按钮上添加加载状态,当关注成功后图标状态改为禁用状态,同时文字变为已关注 。
总结【UI进阶知识-按钮设计,看这篇文章就够了】按钮设计看似简单,但是如果想要更好的交互体验,引导用户进行相应的操作,提升产品的转化率这仍是我们需要研究的问题 。本篇主要将从按钮功能类型和设计要点两个方面进行归纳总结 。
按钮功能类型:主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型 。在使用我们需要根据对应的功能和重要程度选择适合的设计 。
按钮设计要点:主要有根据产品为按钮选择适合的形状;使用适合的状态;提供恰当的反馈这三大注意要点 。




推荐阅读