网页按钮交互设计中的确定和取消设计原则

     “确定”与“取消”按钮应该可以算是Web应用里最无敌的组合了,你可以随处看到他们以及他们的姊妹组合“完成”/“取消”、“是”/“否”….当然,他们也不是每次都表述的是同一个交互动作,但是我们总会遇到。
    
       为什么会有“确定”与“取消”的组合?
      这个问题似乎是个废话。因为,Web应用中几乎你所有的动作都是可以取消的,这也是为什么每个浏览器都会有“后退”按钮的原因。
      当然,有的时候我们也会只看到“确定”在单飞。比如,波希米亚同学收集了国内30个著名网站的注册表单,我们看到只有雅虎中国、MSN中国、TOM和优酷的注册表单中有“取消”/“重置”按钮。
      也许是处于商业因素的考虑,他们只给用户单一方向的指引,系统限制用户回头;也许是产品人员认为用户完全可以在一页长的表单里手动清除掉填写错误的信息或者借助浏览器的“后退”按钮来解决自己遇到的麻烦。
      但是,在基本都是一页长的表单里没有“取消”或“重置”按钮显然是不够友好的。用户有权利结束自己的操作同时也有权利被允许重新开始自己的操作。一个“取消”按钮显然会比使用浏览器的“后退”按钮或者是“F5”刷新浏览器成本小的多。
     所以,从这点来看这30个表单中给我体验最好的无疑是优酷的注册表单。虽然雅虎中国提供了取消按钮,但是在点击取消的时候出现了下面尴尬的一幕….    

 
   

      什么时候才会同时出现 确定、取消
      确实,有的时候我们不需要取消按钮。比如评论框的表单里,我们只需要一个“提交评论”就足够了,因为我们没有可以取消的东西,你可以选择关闭页面停止浏览,你也可以选择点击链接进入下一篇文章的阅读。
      取消,主要用在对用户进行警示、询问用户操作这2个场景中。比如用户选择了进行了某项不可逆的操作的时候,我们需要警示用户是否确定要进行这项操作;用户选择了我们其实并不想让他进行的操作,比如删除帐户,我们希望用户三思。
   
      确定与取消不是万能的,需要更完美
      “确定”与“取消”按钮在大多数情况下都可以正常工作,但是意义更明显的按钮标记能更好的帮助用户建立对点击结果的期望
      比如QQ邮箱的注册表单,单击这个“确定”按钮会发生什么呢?保存了我填写的信息还是把我注册为新的QQ邮箱用户?很明显,对于用户而言这个期望是模糊的。
      当然,我们很高兴的看到大多数网站的注册表单上都把“确定”按钮换成了一个更加明显的提示了,比如“注册”、“现在就加入”、….不过在软件领域里似乎这种令人生厌的做法已经持续了很久且一直没有改观,典型代表就是我们的浏览器弹窗提示…..
      直接使用“确定”与“取消”,是一个懒惰的设计师的表现与设计手法。这是一个值得注意与琢磨的细节,因为你的一个错误的提示可能会诱发N多用户错误的点击。

      没法确定的确定按钮
      比如下面的这个界面提示,我是点确定呢还是取消呢?我没法确定…..

        比如,某博客网站在发布文章的时候可以选择全屏编辑器,他们会在屏幕的右下角设置一个“取消”按钮,这个取消是怎么个意思呢?取消本次的编辑退回到我的博客首页还是退出本次的全屏编辑进入到普通的编辑状态?我没法确定……

        关于确定与取消的按钮摆放
      目前流行的做法是遵照“费茨法则”,一个人在使用鼠标移动指针时,屏幕上目标的某些特征会使得点击变得轻松或者困难。目标离得越远,到达就越费劲;目标越小,就越难点中。设计成一个大的“确定”与一个小的“取消”组合或者一个大的“确定”按钮与一个超链接的“取消”组合。
      另外,关于是“确定”在左还是“取消”在左,mac系统与Win系统是个相反的做法,这是另外一个话题,有兴趣的同学可以研究一下。
      这里,UCDchina翻译小组的一篇文章中说到了这个问题:“确定”与“取消”按钮如何正确排序?
   
      最后,在寻找本文的例证的时候浏览几个网站后编的一个小段子
      问:一个网站如果弹出“是”、“否”、“取消”,你该选哪个?答:右上角的×。因为,他才懒的管你选的是哪个,他判断有鼠标点击动作就给你强奸了,所以先×它才是正确的!

时间: 2024-12-03 23:20:41

网页按钮交互设计中的确定和取消设计原则的相关文章

视觉设计:页面设计中整体运用极简设计手段

文章描述:视觉设计:页面设计中整体运用极简设计手段. "从有到无,从无到有,这是我们这一代在消费爆炸.名牌泛滥当中出生入死挣扎升华的集体私家体会.定一定神,我们才知道其实真正简单的干净是何等的美好."这是设计师欧阳应霁曾说过的一句话.每个设计师都可能经历过这么一个过程,当被眼前多元化的图形和繁杂的颜色搅乱到找不到北的时候,重新回到最原始的画面,也许它像一张白纸,从最本质最原生的状态出发,足以让它生根发芽,甚至开花.在这个浮躁的城市,周围越来越多的事物被简化包装.摒弃华丽的外衣,以它特有

网页按钮交互设计:按钮的位置和分组

网页制作Webjx文章简介:网站交互设计中的按钮位置与分组. 按钮分组 按钮的分组可以让一个界面变得具有自我描述能力.在复杂的布局中,组织良好的各组按钮用以选择,而且因为很明显,这样可以很快告诉用户有哪些功能可以使用. 几个按钮放在一起,因为它们可能完成类似的功能.我们可以看范例iTunes的主窗口,四个角分别放置了一组按钮,界面中间的歌曲也有很多的行动点.加上滚动条,该界面只有有14个按钮.确实有很多的功能,不过因为视觉上和语言上的巧妙组合,并不会给用户很乱的感觉. 制定"阿里助手"

交互设计中的5项视觉指导原则

  视觉是人的第一感观,它在影响用户行为方面起着决定性作用,视觉信息对产品的交互产生了深远影响. 来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单.图像等)才是用户实际上操作的东西.虽然有些可用性专家会提及Craigslist甚至Amazon,作为丑陋但可用(而且受欢迎)的网站案例.但毫无疑问,美感总会有所帮助. 情感是用户体验的关键:视觉设计优

网页设计中最常用到的设计细节

前一段时间在企业管理界流行一句格言叫"细节决定成败".企业管理当然不是我们这里要讨论的主题,但是,把这句话放在网页设计当中的确是颠扑不破的 真理.我们的眼睛和感觉总是非常敏锐的,即使是完全不了解网页设计技术的人也能够从一堆拙劣的设计作品当中挑选出那一个优秀的设计作品. 虽然他说不出来为什么这件东西比那些都好,但是直觉会告诉他他自己喜欢哪一个.如果别人向我们问起为什么这件作品要优于其它呢?我们的回答是"很大一部分原因是因为优秀的设计作品总是充满了丰富的细节."在这篇文

版面设计中的一图多用设计技巧

设计技巧:如何在设计中一图多用 [译者的话] 在版面设计中,你有很多地方都需要用到图片,但你手上只有一张图片,怎么办?在本文中,我们用两个实例来说明如何解决这个问题,我们只用一张图片,通过分解剪切,就可以将这张图片用在不同的地方,出来的效果非常漂亮.一张图片,其实已经足够! 原文出处:www.bamagazine.com 在本文中,我们要将你买回来的图片物尽其用:通过从原图中得到几个小图,完全可以配合你的版面设计. 这是我们要利用的原图 在版面设计中,就变成这样 你有注意到其实在大图中隐藏着一些

分析Banner设计中为什么要用图形设计的原因

在Banner设计中,经常会使用一些图形,将文字或一些图片框选起来.为什么这样做,其实是无可奈何的.如果我们看一下除Banner之外的图片,几乎很少用图形的,当然有些Banner也不用图形的,都是有原因的,我们可以具体分析一下. 一:艺术图片为什么一般不用图形. 图形的目的就是引起注意,起到一个提示的作用.但是艺术片有它自己的方法.它们一般会使用色彩的明暗或大小等或一些特效来突出他们的主题.因为图形有分隔的作用,会破坏整体效果.再者艺术图片图是第一位的,文字非常少,可以做的很大,况且也不是主题,

网页设计心得:网页设计中的包容原则

让我们来探索 包含原则 奥妙.它允许我们忘记在我们的社交行为中根深蒂固的那种"他们"和"我们"之间的对立.聚焦包含原则将无障碍/通用设计的争论从上述利益冲突中解放出来,让我们拥抱一种更宽阔.更接近自然的设计哲学.最重要的一点,聚焦包含原则也帮助我们了解到,我们不仅是为了别人才重视可访问性,也是为我们自己好. 设计师的工作一直与"可视性(affordance)"有着密切的利害关系.这个词自唐纳德·诺曼(Donald Norman)的名著<设计

网页设计中的单个色彩:富有感情的红色

译自:The Passionate Color Red 中文原文:设计中的色彩:热情的红色原作者:Jennifer Farley请尊重版权,转载请注明来源! 今天是一个新的系列文章的开始,我们将讨论设计中的单个色彩,包括一个简要的色彩心理学理论和大量可见的实例.色彩是设计中的一个很重要的元素.它被用于影响我们的心情,影响购物选择,以及作为情感的象征.那么让我们从最富有感情的色彩(也是本人最喜欢的)--红色开始吧. 对色彩的看法可能比较主观,但是有一个普遍的认识就是,暖色调聚集在色谱中红色的区域(

从《千鸟志》看网页设计中的功能性

  最近准备装修房子,看了几本家居设计方面的杂志,发现杂志上的很多设计也只能参考参考而已,不能当真.要是真把房子设计成杂志上的那样,可以说根本没法住.比如,把浴缸放在落地窗下面,看着是很爽,在日光或者月光下浸在温暖的洗澡水里,享受诗一般的沐浴过程,但是,一旦你考虑到私密性的问题,想到对面的楼上会不会有个偷窥狂正在拿着望远镜也在享受这个过程,你就会发现这种方案根本不可行.这应该说就是典型的只考虑美观,不考虑功能性的典型案例.另外还有开放式衣柜.开放式厨房等方案,只要一考虑打扫卫生时的劳累.油烟等问