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

 

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

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

相关推荐

  • 为什么用户会无视网站首页的轮播图?

    数据显示:在三百万个网站中只有大约1%的网站首页上的轮播图会被点击。一个在首页上如此之醒目的元素竟然只有这么低的点击率……到底怎么回事?个中原因相比会让你大吃一惊。

    2017-05-19
  • 回顾交互设计的过去,并展望其未来

    你好,这是2017年的第13篇文章。除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和视觉设计师该何去何从?人机交互的未来在哪?这些问题都值得我们去思考……

    2017-05-04
  • 【招聘】阿里、腾讯、网易、百度、亚马逊、德勤、滴滴、京东、华兴资本、去哪儿、蚂蚁金服、特斯拉等

    上海|携程+实习携程运营实习生工作内容 一周内入职1、携程app微领队社交功能“结伴”、“旅友圈”运营(删违规帖+内容运营)2、旅途聚会物料负责、寄送、整理3、旅途聚会新产品冷启动4、聚会产品上货至其他平台(搬砖+运营)5、公用区图片库等内容整理6、大型活动报名信息收集+统计(不定期,非日常)7、临时日常行政工作协助加分项1、熟练excel、ppt、word,书面表达佳2、足够耐心、细心,强责任心3、有办公室实习经验4、可来携程坐班至少...

    2018-04-08
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 平庸的产品和伟大的产品中间只隔了一个:微交互

    微交互,听起来很生疏的这个词,实际上却出现在我们每天的日常生活中,甚至可能早上起床后我们做的第一件事就是一次微交互操作的典型案例。

    2017-05-20
  • 用户体验十大原则

    李达康1分钟前谁给你的权利,一天啥正事不干就想着玩手机。什么是用户体验?Spring有人说是有用性,就是说需求是真实的可用性,功能可以满足用户的需求满意度,情感方面,向产品整个的一个品牌评价可找到性,用户能找到他们需求的东西可获得,用户能够方便地完成操作、达到目的可靠性,让用户产生信任价值性,产品要为投资人产生价值,转化为金钱有人说是Steve Krug 在《点石成金》这本书里,提到的用户体验包括几个方面:有用性:能否帮助人们完成一些必...

    2018-02-27
  • 用户体验设计过程方法论的演变

    “用户体验设计”这一概念,是由唐纳德·诺曼(Donald A. Norman)创造出来的。我之所以会发明这个术语,是因为我认为人机界面和可用性太窄了。我想涵盖人们体验系统的所有方面,包括工业设计图形,界面,物理交互和手册。从那个时候开始,这个术语开始广泛传播,以至于它失去了意义。——唐纳德·诺曼但到了 2016 年,唐纳德·诺曼开始对这一术语的滥用大肆批判,他在这段简短的YouTube视频中谈到了这一点。这些天,他说他是一个人民设计师(...

    2018-04-06
  • 产品设计之行为学研究,四步打造影响力超高的产品!

    我们每天都感叹“改变”有多难——落空的新年计划、从未使用的健身卡、东西少吃点、存款留多点,可惜都止步在了yy。

    2016-08-29
  • 交互设计四策略在音乐播放条上的运用

    追求简单易用是人类的本性,《简约至上》中提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约的终极策略。对于功能性单一的产品做到简洁化比较容易,但对于功能性较强的产品如要做到简洁就是一个复杂的课题。

    2017-05-23
  • 智能窗帘:场景化智能应用 让用户体验“懒”生活

    科技总是带给我们惊喜。智能家居不再是一个研发层面的概念,在日常生活中已经越来越普及。智能窗帘是智能家居系统中常常被忽视,却又见微知著的家装部分。智能窗帘无需手动,一键掌控家居空间的透光度,智能防紫外线、隔音隔热和保温环保,给用户细致的关怀。智能窗帘的场景化智能应用,让用户体验懒惰带来的享受。冬天清晨,想打开窗帘让阳光温暖房间,却又懒得起身离开暖被窝,使用智能窗帘,应时自动打开,敞开度适宜,光线强弱刚刚好,惬意的在阳光中醒来。炎热夏日,离...

    2018-02-25