按钮体验设计:最佳的感受,形式和状态

 

按钮体验设计:最佳的感受,形式和状态

02e08f56ed47746ac7257d20f14b43

按钮是一个普通的,几乎我们每天都要接触的设计元素.除了这个,由于按钮是一个在网页或者app上创造流畅的会话流体验的必不可少的元素,所以它值得我们为按钮这样最基本的元素提供最佳的体验做出努力.

为按钮做些最佳实践

让按钮看起来像按钮

想想如何达到设计沟通的可供性吧.用户是怎么理解一个按钮的呢?用形状和颜色是界面上的元素看起来像一个按钮.

02fdcb56ed403d32f875a9447f9d50

Groupon 的登录页面关注于最主要的动作.

另外,手指点击的尺寸也是要在设计时仔细考虑的事情.按钮的大小在帮助用户分辨这些元素的过程中起到了决定性的作用.不同的平台提供了热区的最小尺寸的不同设计规范.MIT Touch Lab的研究结果表明手指接触面积平均为10-14mm之间,指尖平均为8-10mm,所以最佳的热区尺寸应设定为10mmX10mm.

02793756ed40736ac7257d20c45da4

位置和命令

按钮应放置在用户能够直接找到或者他有预期能看到的地方.例如,iOS UI 设计规范给明了按钮的合理位置.

02bbd056ed408d32f875a944e82679

按钮要执行的命令和位置的关系.按钮要执行的命令非常重要,特别是在出现成对的选项时(就像”上一个”和”下一个”).确保设计强调了最主要或者最重要的动作.

在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作.并且,主要动作不但可以通过颜色和对比度去引起注意,还可以看它是否置于对话段落的右边。

02305956ed40b432f875a94473c6fe

删除按钮比取消按钮更加显眼

标签

按钮上的标签告诉给人们这个按钮能做什么。清楚的说明点击之后将会发生的事情。

我们讲上面的图片去掉文字。你能发现什么区别么?

 

0287b256ed40db6ac7257d20914da8

没有文字标签

唤起行动(Call to action)

让最重要的按钮(特别在你想要用他们唤起行动时)看起来它是最重要的。

02f70256ed40f36ac7257d20857e1c

Create Resume 就是一个很明显唤起行动按钮

按钮形状

通常,根据网站或者APP的风格,我们会把按钮设计成矩形或者圆角矩形。一些研究建议圆角能够加强信息的传递并且能够将人的实现集中在元素的中心位置。

02015556ed411532f875a944c1138a

圆角矩形按钮

 

我们有时也会根据自己的创意使用其他的形状例如圆形,三角形或者自定义形状,但是你要知道这样的尝试其实是有风险的。

020b0f56ed413e6ac7257d2050bb5d

Floating Action Bar 是一个自定义按钮形状的好的例子

一定要确保统一性能够把控你的界面设计,以便用户能够识别出你的界面元素。

按钮样式和行为

1.突出按钮

突出的按钮样式特别是突出的长方形按钮。(投影表现出按钮是可以点击的)。突出的按钮样式相较于扁平的设计增加了一维空间。在复杂或宽裕的空间中强调功能。

028f2256ed415d32f875a944f6e319

使用

成直线的排列(在布局上根据诸多不同的内容使用更显著的引导)。

行为

让按钮凸起并在点击是填充颜色。

021adf56ed417d6ac7257d20d6ab9e

例子

突出按钮比扁平按钮更加显眼。例如安卓的应用

022b9156ed41906ac7257d206f868a

 

2.扁平按钮

扁平样式的按钮不会突出出来,但是在点击时会改变颜色。主要的优势在于界面的简洁——最不容易被内容打扰。

0258f656ed41b36ac7257d20abc0a6

使用

在会话中(统一按钮行为和会话内容)

02408156ed41e332f875a944b18b0c

安卓会话当中的扁平按钮

在工具条上

020d5556ed42026ac7257d20fdaace

在工具条上的扁平按钮

于留白对齐,一遍用户能够轻易找到它们。

02d73d56ed421832f875a944336553

扁平按钮

行为

02bed956ed423c32f875a944920a67

例子

安卓应用上的扁平按钮

02bbff56ed42526ac7257d203c41e2

3.切换按钮

切换按钮能够允许用户从两种状态中改变设置。

02684456ed428f6ac7257d205e4deb

切换按钮

使用

多数的切换按钮都是以开或关的形式使用。

还有就是切换按钮可以在成组相关的选项中使用。但是你的布局应当是将切换按钮作为一组选项中的组成部分。所以切换按钮要求:

1.一组中有至少3个切换按钮

2按钮上使用文字,icon或者两者结合作为标签。

 

02938656ed42ab32f875a944771421

一个被选中的切换按钮

在切换按钮上使用icon是最好的方法,因为它只接受一个选择,比如添加或者转移一个星星到另一个项目上。最好在APP的bar,toolbar,动作按钮或者切换按钮上使用它们。

0214ac56ed42c832f875a944ee521aTwitter的”LIKE”上的切换按钮

为一个按钮上选择一个正确的icon是非常重要的。我将会在另外一篇文章上讲解icon 扮演着完美用户体验的重要角色。

例子

iOS上使用切换按钮作为设置选项。

02ff7556ed43e06ac7257d2016cccf

4.幽灵按钮

幽灵按钮就是一种透明的或者空按钮的使用基本形状的形式。当内部的内容为简单的文字形式时,通常使用非常细的描边作为幽灵按钮的轮廓。

02b72d56ed44176ac7257d2061b1bb

不同的幽灵按钮

使用

使用幽灵按钮做为一个主要的唤起动作其实并不是一个好主意。你能看到下面的例子就是幽灵按钮上Download Bootstrap的样子看起来和他们产品的logo很相似容易引起用户的困惑。

026ead56ed44a56ac7257d2045cad5

Download Bootstrap是一个按钮,你看出来了么?颗颗。。。。

幽灵按钮最好是用在第二或第三层级的内容上,哪怕他最终无法完全传达你想要唤起行动的目的。你当然想用户能够返现你主要想要传达的唤起行动的内容,然后再跳过它看到第二级的按钮。

积极动作会有更高的反差以便用户能看到清晰的动作。

023c5f56ed448132f875a944149563

主要动作(CTA)是Purchase Now,幽灵按钮是第二级按钮

行为

正常状态(左)和高亮态(右)

02597856ed44d46ac7257d20f46404

例子

Airbnb的网站有一个幽灵按钮“Become a Host”

029db656ed44e56ac7257d20cadf93

5.FAB浮动按钮是谷歌设计的重要部分。它是一个圆形的材质按钮,点按之后按钮浮起并表现墨水晕开的效果。

使用

浮动按钮用于驱动动作时使用。

行为

悬浮按钮利用本身的圆形形状悬浮于界面之上与其他元素进行区分,加上运动动作,包括渐变,展开和转化为单一定点。

02639b56ed45046ac7257d208f08d9

选择按钮样式

选择一个按钮样式其实是取决于按钮的权重,屏幕上的容器个数和视觉布局。

 

02ffec56ed451f32f875a9446c8c36

谷歌设计中的按钮类型的选择

02dadd56ed454832f875a9447253d4

Z-depth

功能:

这个按钮的重要程度和普遍程度到了要使用浮动按钮的地步了么?

维度

选择按钮样式取决于容器和多少个Z轴空间的布局。

布局:

每个容器使用一个最主要的按钮样式。除非你有很好的理由才可以混用,比如为了强调一个重要的功能。

按钮状态

这一点跟这个按钮给用户的第一印象是没有太大关系,但是跟犹豫是否去点击一个按钮和发现没有改变有关。用户会感到迷惑:“这是不是一个按钮呢?现在我是不是得点它去验证一下它是不是一个按钮呢。额……”

按钮不是单一—状态目标。它是多状态的。并且可以为用户提供一个可视的反馈去表明当前的状态应该是优先级最高的任务。

正常状态

这一状态的主要规则就是—按钮应当在正常态时就能被识别出是一个按钮。Windows 8是一个很好的反例—用户很难看出上面的元素在设置菜单中是否是可点的。

021d3b56ed45676ac7257d20a55235

Windows8中按钮的正常态

关注状态(高亮状态)

为用户营造一个具有很好的视觉反馈效果的按钮非常具有实践意义。用户能够立即明白按钮的含义从而接受并且视觉上的反馈也起到了相应的作用。

02bfa456ed458e6ac7257d206f5284

点击态

将不同的元素设计成有创意和有驱动性的动效能为用户带来兴奋和愉悦的体验。

02fad656ed45c232f875a94452294e

不活跃状态

显示方式有两种可能—隐藏按钮或者不可用状态。

隐藏按钮的争议:

明确性。只需在旁边显示任务的需求。

  • 保存草稿。允许用户改变设置,不同的命令使用同一个位置。这样很方便。Gmail就是是这样做的。

02472356ed460732f875a944999560Gmail隐藏了不可用的按钮

021c5156ed46216ac7257d20ce4a48只有在用户进行了启用操作时才会让它可见

不可用状态的争议:

表明动作的可执行性。虽然按钮不可用,用户有机会去得知动作是可以执行的。甚至要提供一个提示去解释按钮如何使用。

控制面板的位置。用户能够学习到控制面板和按钮在界面上的具体位置。

02216e56ed463432f875a944c14258

不可用按钮状态

总结

按钮意味着用户能够直接执行我们希望他们去执行的任务。一个平滑的转场能够保持会话流畅性,小差错比如找不到正确的按钮,最好的情况是是打断进程,最差是程序崩溃。

按钮体验设计总是关乎于识别性和明确性。想想一个很忙碌的用户开启网页或者APP展开会话的情况。按钮起到相当重要的作用。

译者:Blackbird

原文链接:https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.rhppbpkr3

原译文链接:http://www.zcool.com.cn/article/ZMzk0ODA0.html

 

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/12463/

(0)
iouedioued
上一篇 2016-03-24
下一篇 2016-03-24

相关推荐

  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14
  • 在设计功能时,怎样的交互才是合理的?

    或许在本文中,你不会得到所谓的干货。但小编相信,一旦你读完了,你的思想认知会更上一层的。具体想了解关于《从这四个点,正确完善地拆解一款 App》的,可以看下这篇文章,要从多角度去看文章去分析。

    2017-05-07
  • Sketch导入图片丢色、变白解决方案

    周五晚上回家作图遇到点状况,折腾了半天才好。整理一下发出来,估计有人用得上。以下内容为磨磨叽叽的瞎逼逼顺序,着急解决问题的同志可以快速下滑,会有提示周五到家日常打开电脑作图,做的做的发现不对劲,之前导入进来的图片好像不正常了。如下图一开始还以为是不小心降低了透明度,cmd+左键,发现没降。再想可能是加了纯色,看了一眼属性,也没有叠加颜色。醉了,这什么鬼。我一看既然不成那就算了。重新再导入一张图片,这张后入的是好的。没当回事,接着做图。过...

    2018-04-25
  • 五一福利大放送,再不收藏就没有了哦

    老板阿西太抠,说了好久才同意五一送福利,今天小编就放血,给大家送点福利,机会不是天天有该出手时就出手。 图标和字体想怎么用就怎么就,让设计不再孤单,要的就是这个范儿。 字体下载地址:http://pan.baidu.co…

    2015-05-01
  • 产品经理|交互设计专场

    产品经理走上交互之路3月31日深圳线下分享会2018PMTalk春节后带来的第一场深圳线下产品经理活动,一场以交互设计主题的产品经理线下深圳交流会,PMTalk产品经理社区将带头又一次与大家见面!01一场值得产品经理学习成长的分享会本次分享会,在经历Pmtalk发起人几位小伙伴利用业余时间,在深圳成立这个产品组织后,我们将首次也推出PMTalk社区会员、产品经理合作周边等服务!具体的就在倒计时7天更新!本次沙龙我们邀请的深圳产品大咖(持...

    2018-03-15
  • 眼球追踪到底是肿么回事?和VR有啥子不"正当"关系!

    虫虫是科技虫,更是虫博士,今天,好为人师的虫博士给伙伴们普及一下,眼球追踪到底是肿么回事?和VR有啥子不"正当"关系! 名词:眼球追踪 是一项用途颇广的科学应用技术,广泛运用于实验心理学、应用心理学、工程…

    2016-04-11
  • 近五年新起的十大热门职业,交互设计5年增长了22倍!

    6,交互设计师/用户体验师
    5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了。

    交互专题 2016-10-25
  • 译文|在设计项目中,如何合理地使用色彩叠加效果

    色彩几乎是所有设计中都至关重要的组成部分,无论是明亮大胆的配色方案,还是简约的黑白色调,你的用色将会直接影响整个设计的实际效果。

    2017-05-17
  • 一个更适合产品迭代的卡片创意法

    本文是由58UXD的交互小组的工作总结文章,交互设计师常常需要进行迭代设计,为此,他们琢磨试验出一个更适合产品迭代的卡片创意法。收到消息通知→打开消息通知→查看消息→回复/其它操作接收(告知用户有消息需要了解)→阅读(了解更多消息详情)→反应行为

    2017-05-01
  • 交互设计师在未来的5种转型方式

    每个设计师在工作的不同阶段或多或少都会有一些迷茫:如何提升设计的专业度?如何提高设计师在公司里的话语权?是否需要转型?如何转型?甚至怀疑自已不适合做设计等其它困惑和问题,下面就给大家简单说明下设计师在不同阶段该如何自我成长及转型。注:本篇关于PMD及架构型设计师的内容相对多些,其余更加偏向于方向性,后面会对其再进行针对性的研究和分析,同时也欢迎大家一起参与讨论。

    2017-05-04