恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【译】小按钮,大学问
0.0°
2016-12-19 自译外文 经验/观点 原作者: Nick Babich 举报 2528 20 23 0

按钮是交互设计中一个很普遍的元素,尽管很简单,但是这里面却有着很大的学问。在这篇文章中,我将和大家一起来探讨按钮设计中一些原则。

1 让你的按钮长得像按钮

按钮的唯一作用就是供用户点击,按钮和其他元素所不同的地方也在于它们能够被点击。所以用户能否意识到你设计的这个“东西”是按钮,就在于其本身的可点击性(clickability)。

形状

目前app和网页中按钮主要的形状是矩形和圆角矩形。其中矩形式按钮很早就应用了,用户对此已经习以为常了。下图的Windows95系统中界面采用的就是矩形按钮。

Image title


当然我们也可以尝试使用其他的形状。比如,圆形,三角形,甚至其他自定义形状。我们要把握设计的度,有的时候过于追求设计感,为了创新而创新,做的按钮用户都认不出来,这就有点本末倒置了。

Image title


无论我们最终选用哪种形状做按钮,我们首要考虑的是要保持整体设计风格的一致性(consistency)。那么为什么保持整体风格的一致性如此重要呢?因为用户远比我们想象中要细心得多。他们会注意到页面中的一些小细节。当他们发现这个地方的按钮采用一些特定的设计风格时,那么其他地方带有相同风格的元素用户就会理所应当的认为也是按钮。比如,你在这里按钮采用的是圆角矩形。那么在其他地方也应该是圆角矩形,不能这里是圆形,那里是矩形。这样会给用户带来极大的困惑。

Image title


阴影与高光

随着扁平化设计的兴起,人们觉得按钮只需要一个矩形上面写几个文字就行了。按钮没有必要做的太过于写实,阴影与高光也没有使用的必要了。然而事实并非如此,阴影与高光依然有着极大的作用。我们通过阴影与高光的搭配使用来使按钮从页面整体背景中凸显出来,帮助用户更加容易的找到按钮。当然也可以使用阴影增加按钮的可操作性,也就是让按钮看起来更容易点击。

Image title


标签

按钮上我们应该通过添加标签来告诉用户这个按钮的具体用途,标签可以是文字也可以是图标。

比如下方的亚马逊账号注册页面,底部的按钮上写着“创建新账号”。用户就会知道填写了以上的基本信息后,点击这个按钮就是创建了一个新的亚马逊账号了。用户只有了解了点击这个按钮是干什么的,他们才会安心的点下去。标签上文字尽量使用动词和名词。

Image title


2 提升按钮的用户体验

按钮的尺寸和视觉反馈是提升用户体验的重要因素。

按钮大小与间距

在设计中我们应该确定按钮的大小,按钮过小会影响用户操作。按钮过大也会影响页面中其他的内容。无论是app还是网页,点击都是最主要的一个交互事件。根据麻省理工学院的一项研究表明,人类手指指垫的平均尺寸是10-14mm,而指尖的平均尺寸是8-10mm。所以当用户要完成点击操作时,最小的尺寸应该为10mm*10mm。

Image title


当然,网页中按钮用户是采用鼠标完成点击操作的,所需尺寸应该适当的缩小点。

除了按钮的自身的尺寸大小,我们也要注意按钮之间的间距。间距过小会发生误操作,从审美角度上来说也会使页面感觉很拥挤。

Image title


提供视觉反馈

按钮不会总是处于一种状态不变的,一般来说,按钮会有四种状态:Normal(正常),Focused(选中),Pressed(按下)和Disabled(不可用)。给用户提供相应的视觉反馈来告诉他们按钮当前处于的状态是很重要的。比如我们通过网银转账,如果“确认转账”按钮没有Pressed的这个状态,在转账结果返回之前用户就不会知道自己刚才的操作有没有成功。甚至还会发生重复操作的现象,给用户带来极大的损失。

Image title


3 突出重点

页面中不同元素的重要性是不同的,有的元素你希望用户一眼就可以看到,有的元素在页面中却是鸡肋,可有可无。这就需要我们在设计要突出重点。

行为召唤按钮

行为召唤按钮是我们期望用户可以很快很容易就可以发现的按钮。一个行为召唤按钮是否成功就在于看它能否抓住用户的视线,并且可以诱导用户完成点击。

比如底下这个Gmail的UI设计就很好的体现了这一特点。当用户完成邮件内容编辑之后,他们立马就会想到将这份邮件发送出去。这时候用户需要一眼就能找到“发送”按钮在哪里。整个页面设计的很简洁,在背景色很浅这一前提下,我们给“发送”按钮加一个蓝色的配色,让用户很容易的找到。

Image title


相同的手法同样适用于网站设计。比如下面的behance网站,整个页面的视觉焦点就是注册按钮。

Image title


主要按钮与次要按钮

同一页面的按钮也会根据其重要性不同分为主要按钮和次要按钮。按钮的唯一用途就是供用户点击完成交互,主要按钮就意味着让用户更加愿意点击这个按钮。比如当你进入淘宝的一个商品详情页面,店家肯定希望用户点击的是“立即购买”或“加入购物车”,而不是“返回”按钮。那么如何诱导用户点击主要按钮呢?

我们可以给主要按钮加以更高的视觉权重。下面的这个清倒废纸篓页面中,我们可以看出“安全清倒废纸篓”(secure empty trash)按钮拥有更高的视觉权重。因为它使用与背景色相差较大的蓝色,这种配色设置使这个按钮很容易就被用户注意到。当然影响按钮视觉权重的因素有很多,除了配色也可以将通过位置来实现视觉权重的修改。

Image title


4 总结

按钮可以帮助我们创建一个流畅的用户体验。在我们的按钮整个设计过程我们都要问自己以下这些问题:

1 用户能意识到你设计的是按钮吗?你有通过尺寸,形状,阴影效果和配色来让你设计的按钮看起来像是一个按钮吗?你保持了当前页面乃至整个系统按钮设计风格的一致性吗?

2 你按钮上的标签提供的信息表达清楚了吗?用户知道这个按钮是干什么的吗?用户知道点击后会出现什么吗?

3用户可以很容易的发现你的按钮吗?你知道用户习惯的视觉焦点在哪里吗?不要让用户去寻找按钮,而是在用户需要的时候,按钮自然的出现在用户的眼前。你有做到这一点吗?

4 如果当前页面里有两个按钮,更重要的那个按钮有着更高的视觉权重吗?你是通过哪些方面来实现不同的视觉权重的呢?


微信公众号:王M争

更新:2016-12-19

收藏

20人已收藏

王M争

微信公众号:王M争

  • 63

    作品

  • 9257

    粉丝

  • 78

    关注

  • 苹果 or 谷歌,到底谁的设计更好?
  • 盘点那些容易让用户上瘾的产品设计
  • iPhone如何改变手机的交互方式
  • 为什么甲方不喜欢极简主义
相关标签
经验用户体验GUI

    猜你喜欢

      2016-12-19 自译外文 经验/观点 原作者: Nick Babich 举报 2528 20 23 0

      【译】小按钮,大学问

      0.0°

      你确定要举报【译】小按钮,大学问

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      23
      20
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录