都挺好?都不好!这个按钮设计没人点!

www.jswusn.com 网站设计 2019-03-27 21:47:30 1805次浏览

现代人越来越离不开智能设备

面对屏幕上无数的按钮

点还是不点是个问题

像是我加班的按钮从来关闭不了

1553693472332079.png

  不知道大家有没有发现,按钮越多,我们点击得越慢。这是因为只要有按钮,我们的下意识就会“检查”它们,直到确认无误后才会”决定”点击。

1553693544566059.gif

  让用户在繁多的按钮当中找到需要点击的那一个,其实是有技巧的,以下5个point,只要运用恰当,点击率一定会直线上升。

1553693648677544.jpg

按阅读顺序放置按钮

  不少app都会有这样的错误:把最重要的按钮放在第一位,想要吸引用户的注意力。这其实是违反人眼的阅读习惯的,在划动屏幕阅读的时代里,用户反而会注意到这些按钮的样式,而不是顺序。

1553693786470756.jpg

  按钮的顺序不是为了被看到,而是为了更快的被点击。将最重要的按钮放在第一位,而不是根据阅读顺序从上往下放置,是十分反人类的。

1553693831132375.jpg

  将最重要的按钮设置为高亮,并且顺着阅读顺序放置,避免了要用户重新检查按钮,让他们能够从上往下看清选项,用最快的时间做出决定。

  这种做法除了符合人眼视觉流程,也符合我们使用智能设备的习惯,按钮在下方更方便我们的手指头点击。


用形状区分按钮

  还有一个经常出现的错误就是只用文本来表示按钮,设计师仅仅用文本来表达次选项,这种设计非常不利于“引导”用户点击,也容易让用户只看到首选项。

1553693948282202.jpg

  文本按钮还会让用户产生困惑,分不清这是按钮还是信息,这种不确定性会让他们直接跳过这些按钮。

  除了文本按钮,点击区域太小也会让人感到不知所措。所以把文字放在按钮形状里面能够有效让人觉得这是一个按钮,并引导人点击。


用颜色推进点击

  通常首选项的按钮都是很容易被识别的,因为它要引导用户达到目的。如果你不确定到底要怎么要设置,可以想想用户使用app时的需求是什么,他们想要达到什么目标。

1553693986440943.jpg

  像是购物app,用户的最终目标是买东西,所以高亮的首选项应该是付款。以上这个例子,“keep shopping”和“购物车”都是次选项。

  “keep shopping”让用户返回继续看详情或者浏览其他商品,“购物车”则是查看已经选了哪些东西。相比之下,这两个选项,“购物车”的优先级要比“keep shopping”高,因为查看购物车后,还有一次引导用户付款的“机会”。

1553694116104273.jpg

  颜色能够为推进用户点击做出贡献,尤其是当颜色和按钮文本不一样颜色的时候,更容易引导用户点进去。

1553694153605791.jpg

  如果用同色系的不同明度的颜色来区分按钮,效果就更加明显了!


文本的粗细

  不要以为掌握了以上技巧就可以放松了,我们可以做更多,来优化细节。

  跟用不同明度的颜色一样,不同优先级的文本也应该有相应的变化。

1553694224389267.jpg

  不同选项的文本,用不同粗细来表示。这个例子中,“checkout”用了粗体来强调自己的优先级。

  从视觉上来看,三种不同的粗细度,反应了它们之间的关系,但不会造成视觉效果的突兀,又能引导用户点击。


加个图标

  最后一个技巧,是为让你的按钮更加“人性化”。前面我们强调了用颜色来区分优先级,不过有一类人群,这个技巧不起作用,那就是眼盲的人。所以,需要用别的方式来提醒他们。

1553694306403609.jpg

  没错!就是加图标!用图形来强调,如此一来就能确保所有用户都能注意到这个按钮了,即使是没有颜色,它还是整个页面中最闪亮的星!

  今天的分享就到这啦,如果以上错误例子你都做过的话,看完文章赶紧改正过来!千万不要做完自我感觉都挺好!今天的反面例子,经过层层优化,变成了正面例子!

1553694375548802.jpg

1553694397161829.png

苏南名片

  • 联系人:吴经理
  • 电话:152-1887-1916
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

Copyright © 2018-2025 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号