学习按钮设计,看这篇就够了! - 优设-UISDC

学习按钮设计,看这篇就够了!

2018/03/26 12408评论区

最近在做迭代改版设计,在这期间遇到了很多问题,其中一个就是我在上篇文章《「瞬间之美」读书笔记:Web界面设计如何让用户心动?》提到的按钮的设计,在讲述得出的结论之前,我想跟大家分享我是怎么解决这个问题的。主要可以概括为以下三个步骤:

1. 范式——从书中寻找解决方案

目前得到普遍认可的原理,就是范式。对于设计理论,不同的人会有不同的见解。什么是普遍认可的理论呢?专业的书籍是我们获取设计范式的最主要途径,对年轻的设计师而言,我觉得这一点尤为重要。

2. 广博——看线上优秀产品是如何处理这个问题的

任何知识都是不断迭代和完善的,只有广博,才能不断验证和更新从书中得到的设计范式。而分析优秀的产品是广博的主要途径。

3. 输出——结论与应用

根据从上面两个步骤得出的结论,总结分析是否能应用到自己的设计中。

这是我目前学习的主要方法,如果你有更好的方法,可以留言交流。

下面分享通过这三个步骤我得出的关于按钮设计的结论。

一、按钮的种类

按钮属于命令控件,包括普通按钮,图标按钮,文字按钮。

1. 普通按钮

2. 图标按钮

3. 文字按钮

二、如何保证按钮的识别性与易学性

1. 用视觉样式告诉人们此处可以点击

在扁平化设计之前,按钮都具有三维凸起的特征,这一特征我们仍可以学习。给按钮添加适当的阴影,阴影可以使元素突出于背景,这样更容易使用户识别它的可点击性。

2. 保持一致性

一个网站的按钮形状尽量保持一致,用矩形就都用矩形,用圆角矩形就都用圆角矩形,用户会将特定形状的元素识别为「按钮」,一致性会为用户提供更加熟悉的体验,减少用户学习成本。

一致的

不一致的

3. 使用高效率,易懂的文案

按钮上的文字「确定、取消」用更加生动确切的文字替换。

这里引用上篇文章的例子:

4. 使用合适的图标

箭头朝右,可能意味着离开此页;箭头朝下,可能意味着打开下面的内容,或者打开下面的菜单。

网易邮箱里的「发送」按钮用了图标纸飞机,不仅提高了按钮的易读性,同时也和其他按钮做了很好的区分,提高了发送按钮的优先级。

三、按钮的反馈状态

按钮在操作中一定要有反馈,来让用户明白自己的操作发生了什么。

按钮的状态有默认状态、悬停状态、点击状态、禁用状态、忙碌状态。

四、禁用状态又有以下几点要注意

1. 明显区分

禁用状态和可用状态的样式要有明显的区别,让用户清晰的知道这个按钮不可点击。

2. 禁用状态下要给用户相应的反馈

当鼠标移动到禁用状态下的按钮时,用提示工具向用户解释禁用的原因。

如百度里某图片不能下载,当鼠标移动到下载按钮上时,提示工具会解释按钮不可用的原因。

3. 禁用状态的按钮是可见还是隐藏

禁用状态下的按钮的可见性取决于它在界面中的位置与功能属性。

如:谷歌浏览器禁用状态的按钮是可见的。

safari 浏览器也是可见的。

这是因为这两个浏览器都有三个按钮,如果禁用状态下不可见,那右侧的按钮的位置就会不固定,这违反了设计的一致性原则。用户想要在固定的位置看到固定的功能,如果每次登录进来按钮的位置都会变化,会让用户非常困惑,按钮时有时无,在点击页面的时候工具栏会有明显的变化,体验也不好。

而 firfox 浏览器在改版之前前进按钮在禁用状态下是不可见的

因为火狐浏览器这里只有两个按钮,不会出现明显的跳动。

上面是以前的版本,改版后的火狐如下:

所以禁用状态下的按钮的可见性,要根据按钮的功能和在界面中的位置进行具体分析。

五、确定放左还是右?

对于这一问题,不同的平台,不同的软件都不太一样。

windows 是确定在左,取消在右。

而 mac 系统是确定在右,取消在左。

为了使用户有一致的体验,最好的方式是不同的平台使用不同平台的规范,但是当我们的设计是基于网页的时候,该如何安排确定和取消的位置呢?

我本人更倾向于「确定」在右,「取消」在左,「确定」意味着进入到下一步,「取消」意思是返回到上一步,基于用户对「上一步」和「下一步」的使用习惯,也应该是确定在右,取消在左。

六、不同优先级按钮的设计

当我们的界面功能比较多时,就会出现比较多的功能按钮,这些功能按钮肯定会有优先级,这个时候我们就需要设计一套一级按钮,二级按钮和三级按钮,甚至更多。

拿我做的设计改版里的按钮组分享给大家:

以上就是今天的分享,你有更好的想法吗?如果有可以在评论区留言给我,我会很仔细看哒。希望此文对你有一点帮助。

欢迎关注作者公众号:「设宴」

「按钮设计好文合集」

  1. 按钮设计规范:《高手帮你学规范!iOS和Android规范解析之按钮》
  2. 提高按钮点击率:《学会CTA 设计方法后,按钮的点击率高了49%!》
  3. 按钮的反馈设计:《在按钮置灰时,该如何提供给用户反馈?》
  4. 按钮位置的影响:《高手课堂!「按钮系列」之按钮位置与用户体验的关系》
  5. 按钮的使用场景:《想设计按钮?先来看这份超全面的按钮使用场景总结》
  6. 按钮设计的趋势:《从2009年到2017年,按钮设计发生了哪些变化?》

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/learn-button-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 设计师专访 视觉设计 素材下载 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里