当前位置:首页 >  站长 >  网站运营 >  正文

网站交互设计:非一般的“取消”按钮

 2012-07-30 17:04  来源: 腾讯GDC   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

 

“取消”这个按钮不属于操作的必要流程,在设计上也不作为主要元素出现。但在实际的弹框或一些操作应用中经常出现,那么这个小小的取消按钮又有哪些玄机呢?

首先我们要先来了解一下取消的概念。

取消:我们在提交问题、选择、进度、信息时需要要求执行一个确认动作,这时候往往给出两个按钮,“确定”和“取消”。“取消”按钮一般不会单独出现,通常是与“确定”,“保存”之类的操作同时出现。

 

(在操作系统中常见这样的对话框,包含两个键,确认和取消)

第二,设计和使用“取消”键

“取消”在页面中的位置

设计“取消”键(或操作确认页面)时,常会将“确认”,“保存”按钮放在左边,并使用醒目的格式标识出来,或者默认选中该项。“取消”按钮则往往放在右边。“确认”和“取消”不宜离得太远。图a中两个按钮距离太远增加了视觉移动的距离,给阅读造成负担。而图b的阅读效率要比a高得多。

 

(a)

 

(b)

“取消”与其他按钮的区分及弱化方式

出于产品运营的考虑,会一些鼓励用户去进行的操作,淡化“取消”的操作。比如下图的几个方案,确定和取消按钮做了不同程度的区分。

 

这样做的好处是,减少次要操作在视觉表现上的突出性,最大限度的减少误操作引导用户完成目标。使两个按钮能够较清晰的区分开来,突出表现确认一方。让用户更容易做出判断。

按钮在设计时可根据实际表达的内容,突出主次关系。适当的引导用户,尽量规避误操作,让操作更加便捷清晰。也可使用人性化的描述性的词语强调按钮,弱化“取消”“取消”的作用是能允许用户回到前面的操作。但不能过度的影响界面要表达的主要意图。人性化的描述性词语能够引起用户足够的关注度,让其感觉贴心亲切。下图豆瓣上这个发表电影评论的页面,使用蓝灰色和小字,在格式上也与其他的按钮不一样,整个页面只突出一个“好了,添加评论”按钮。

 

这个页面是需要用户填写内容的,“取消”操作会产生消极结果。特别是用户在不经意的情况下点了取消,将会导致填写的内容不复存在。在这个页面的设计上,弱化了“取消”采用链接的形式代替按钮,突出了确认操作按钮“好了,添加评论”。起到了很好的视觉突出作用。但切记,文字要简洁精炼,立意明确。

“确定”加“取消”在对话框中的使用。

对于主标题文本内容为“您确定要……吗”的句式的问题对话框,可使用“确定”“取消”组合。但不要使用“确定”和“取消”来回答是否判断问题。如图a为错误例子。除了上述情况外,“确定”“取消”组合时,“确定”的含义等同于“提交”,如图b,中的选项实际上“确定”为提交的意思。

图c,不要为错误或警告信息使用过重的警示图标,容易让用户感觉鸭梨很大。在设计错误类或是警示类的提示可采用黄色“!”

;按钮可采用“确定”或者“辅助推荐动作”+“我知道了”

 

当提问“是否…?”可直接使用“是”“否”组合。如图d

 

“取消”是否作为按钮默认项

通常的对话框当有多个按钮的时候,会设定其中一个按钮为默认项。“取消”键总是在动作执行后立即出现,这时候满脑子都是前一个动作,自然毫不思考地选了“确定”(通常还都是默认项),然后才后悔莫及。所以,往往由于弹框出现地太快,用户甚至没有意识到“自己操作可能失误了”。因此,默认项应该在对用户有益无损的按钮上。

比如下图当关闭未保存的文档时,该提示的默认项在“保存”按钮上。因为保存相对其他两个按钮来说更无损。

 

下图为提示玩家升级游戏版本的提示框,在这里我们是需要推荐玩家去更新游戏版本的,因此默认项应该在“确定”按钮上。

 

我们在设置提示框按钮的默认项时,应考虑到设为默认后,当用户误操作时是否对其有益无损。还有要考虑到推荐和鼓励用户的操作,给用户适当的引导。

三、案例分析

原有的设计玩家点击游戏道具栏的道具弹出对话框,提供“购买”和“取消”两个按钮。

 

(英雄杀的道具购买对话框)

问题点:

按钮看起来没有主次

从运营的角度来说不能突出我们需要鼓励玩家的购买的意图

玩家也无法区分已购买与未购买道具的差别

根据需求我们要建立按钮的主次在表现上有所区分,这个时候应当弱化“取消”按钮,提高购买按钮的关注度,鼓励玩家进行购买。

优化后的效果,去掉了“取消”按钮,并做了购买和未购买按钮的效果上做了区分,进行差异化设计。下图为修改后的设计,是不是比之前的内容看起来更清晰明了呢?

 

总结,使用“取消”键的方案

在PC“取消”按钮则往往放在右边。但在ios上会把强调的按钮放在右边。

区分按钮主次要表达明确,突出主题,根据表达的内容可适当的弱化取消按钮。

使用一些描述操作结果的词语,强迫用户去阅读一下。

不要使用“确定”和“取消”来回答是否判断问题。

可将“取消”作为默认项,有时也选择有益无损的按钮上。

综上所述,虽然“取消”并不是一个主要的按钮元素,但也不是放上去就是对的,还是要根据实际情况将其设计得合理规范。不要因为这个按钮不起眼而不在意,交互设计往往是细节决定成败!

(转载请注明出处GDC),

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关文章

  • 邮件营销提高转化率的诀窍和按钮设计

    当群发邮件发送过去后,公司为促成转化,在邮件中:1、营造紧迫感:公司推出的系列产品让利于消费者,比方说8.3、在产品介绍完后便附上下单链接:在某产品图文并茂的介绍后面,迅速附上下单的链接,消费者只需轻轻点击一下,便可进去网站特定栏目,下单购买,几乎都是一键式操作,非常简单。

  • CTA实例教学:怎样设计一个访客看了就想点的行为引导按钮?

    CTA即CalltoAction,又叫行为引导按钮,是一个网站的核心组成元素之一。大部分站长做网站不仅仅是为了给访客提供一个学习、交流、互动的平台,更重要的是将访客转化为用户,达成某项他们想要的行为,比如注册、登录、订阅、预约、购买等。好的行为引导按钮在这一点上很有帮助,它有助于提高用户的转化率,增

    标签:
    按钮设计
  • 浅析在网页设计中如何让按钮激发用户点击欲望

    现在建设网站一个重要的核心要素就是能够对用户产生良好的吸引力,能够引导用户逐层深入的点击网站,这样才能够有效提升用户在网站上的停留时间,这样就能够有效的为网站培养忠诚用户打下坚实基础。对此很多站长开始在网页设计上下功夫,可是有时候对于一些细节掌握不当,或者忽略了一些细节,导致网站的吸引力出现了明显的

  • 移动应用设计:谈导航栏返回按钮的替代方案

    呼,又要夜间上新了。其实自己偶尔还会进去关于BeForWeb里面看看将近两年前写的博客开篇语。当时的动力现在仍在,当时爱的那个世界现在仍在爱,并且越来越让我觉得自豪;这让我开心了些。周六晚上有在喝冰啤酒的兄弟姐妹吗,有的话我们虚拟碰个杯吧先,周末愉快=)前

  • 超链接和按钮 设计中默认样式的强大威力

    默认样式,就是最原生态的样式。就像大家经常用的按钮或者蓝色有下划线的超链接。本文,潜行者m将从两个元素来讨论默认样式在设计中的应用。超链接的默认样式超链接的默认样式超链接是网页中最常用最基础的元素,可以说是必不可少的。我们设置超链接,也是希望人们

    标签:
    按钮设计

热门排行

信息推荐