表单按钮 - UCD大社区

Icon设计几个要点

gulu — 2010-11-01 13:15:57

来阿里五个月不到，接触最多的是web端的产品设计，主要偏向快速应用型，比如会员线的注册流程，搜索list，这种类型的页面要求简洁、信息清晰、不需要过多的图形化设计，让用户快速坚定的走完这个过程是最主要的，跟终端的gui设计有点区别，终端的界面设计更多关注图形本身的细节，其实做任何设计本质都是为用户而设计，产品整体的风格符合用户的心理，产品的信息结构导向符合用户的习惯。

这里总结几个做icon的要点吧，也是对自己的总结。

形的把握

Icon最重要，最难的是形的把握，所以建议多画草图，在画草图的同时要考虑形的表现形式，在08——09年，icon的设计趋势3维，从iphone面市后终端的icon都跟iphone差不多，以二维形式展现。不管三维、二维、像素，形要简洁易懂，一目了然，icon的元素都会取自生活中的某个物体，想要简单易懂，要抓住物体最主要的特征来展现，如果在高分辨率屏幕下可以具象一些，可展现更多的细节，也可用两个元素来组合。

这个软件是800*480的屏幕，可以展现更多细节

一套icon需要有个统一的外形，下面的图标都是在一个方形的容器里面去做的，icon的四面要顶到容器。如果你的容器定位是三角，正三角，梯形都是如此，一般我会做2-4px的浮动空间.

外框是控制整个icon的容器，内框线控制左右浮动的像素，最好浮动不要过大，否则没有意义，我一般会控制在2-4像素。

组合

图标的组合元素不易过多，最好是1-2个组合，元素过多导致识别混乱，即使两个元素的组合也要有主次，大小区分或者颜色轻重区分。

如果一套图标里面有共同的元素，那么就没必要重新设计，只要元素之间组合就可。

也有一个特例假如一个元素在同一界面上应用很多，会导致的识别性不高，建议元素可以做一下小的调整。

这套图标“文本”元素应用的比较多，所以最好有应用到文本的元素做一些小调整

颜色

1．一个icon的颜色最好控制在三个颜色以内，最好控制在0——2之间（黑白灰不算在内），如果超出三个icon会很花不稳，这一点跟界面的设计原理一样。

2．整套icon的颜色灰度保持一致，基调一致，这里的一致不是说完全一致，有左右浮动的空间，设计师会凭着感觉取色。

3．控制好Icon与背景明暗距离，icon的明暗反差。

透视角度和光源角度

一套icon的透视角度和光源角度要一致，否则会很凌乱，说一下光源角度，如果从45度角照射，要考虑icon的高光、反光、阴影（这里的阴影不是指整个icon的阴影，3D icon会产生阴影2D icon元素之间会产生阴影）

质感

金属质感、水晶玻璃、纸质、亚光质感等等，这是大的分类，比如水晶质感还有好几种体现剔透的、只体现高光的。

质感的表现，一套图标在草稿纸上画好，再用其中最好表现的一个图标做质感的尝试，一般脑子里有几种质感的表现方式，只要做完一个icon，其它icon的做法都一样。

相关话题：表单按钮源地址：http://www.aliued.cn/?p=3177

互联网表单设计之额外输入（4）循序渐进

yummy — 2009-06-24 00:54:33

循序渐进

额外输入有时可用来显示一组选项，比显示典型输入框好。例如，如果需要客户从一打或者更多潜在类别选项选择一个，常见解决办法是以下拉菜单或者几栏单选按钮方式显示选项。事实上，视频网站YouTube采用了这两种办法，供人们选择视频类别（图11.9）。

图11.9
http://www.flickr.com/photos/rosenfeldmedia/2366435751
http://www.flickr.com/photos/rosenfeldmedia/2367271976
YouTube网站采用了两种方式分类视频。

将这两种解决办法与Renkoo网站挑选事件类型的过程进行比较，图11.10。输入框初始状态很简单：只有一个标记为“select a category”操作要求。点击链接，显示一组彩色选项。选择其中一个，显示下一级选项。经过几次点击，用户浏览了30多个类别选项，整个过程似乎充满乐趣。

图11.10
http://www.flickr.com/photos/rosenfeldmedia/2367271246
http://www.flickr.com/photos/rosenfeldmedia/2366435115
http://www.flickr.com/photos/rosenfeldmedia/2367271374
Renkoo网站采用了一种有趣的类别选择方式。

但这个办法有缺点，30个选项并不是一次全部显示，不点击类别，用户就无法看到所有选项，这是效率和参与之间的平衡问题。另一个是效率问题，选择目录的点击次数多于从一组单选按钮的单一点击。当然，如果接触风格独特比纯效率重要，Renkoo网站的解决方案是个好办法。

相关话题：表单按钮源地址：http://www.yummyux.com/?p=479

互联网表单设计-第四章标签(3) 右对齐标签

yummy — 2009-03-23 05:46:52

右对齐标签

右对齐标签同样具有输入框与标签相邻的优点，因此也能快速填完（图4.6）。但右对齐布局造成左侧不齐，降低快速扫描表单问题的效率。西方人习惯从左往右阅读，他们的眼睛喜欢沿左侧移动。

图4.6 http://www.flickr.com/photos/rosenfeldmedia/2366428975
右对齐标签的优缺点。

如果标签文字宽度变化，右对齐标签会产生灵活性问题。如果标签需要两行文字，扫描表单会更加困难，这种现象相当普遍。

如果要尽量减少表单使用的垂直屏幕空间，右对齐标签能提供快速完成。Matteo Penzo眼动研究发现（图4.7），专家用户和新手扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别为170毫秒和240毫秒，而填完时间比左对齐标签多两倍。图4.8，右对齐标签布局例子。

图4.7 http://www.flickr.com/photos/rosenfeldmedia/2367264946
Matteo Penzo右对齐标签眼动数据。

图4.8 http://www.flickr.com/photos/rosenfeldmedia/2366429101
LinkedIn网站注册表单采用右对齐标签布局。

相关话题：表单按钮源地址：http://www.yummyux.com/?p=350

设计评论表单

明月星光 — 2009-03-02 17:50:05

译者：明月星光 @ UCD翻译小组

原文：http://www.usabilitypost.com/2009/01/06/comment-form-design/

设计评论表单

Usability Post的读者Vadim提出一个关于评论表单设计的有趣问题。他发现网页中两个文本框被标为必填项——姓名和邮件地址。而评论表单通常还有另外两个输入项：网站地址和评论内容。就像这样：

Vadim提到，他在一个有数百个评论的热门帖子中发现一个有趣的现象。那个帖子页面有如上所示的评论表单。他发现一些人回复帖子时将网站地址一项填为“none”或“n/a”。

网站地址不是必填项，不过这明显是被曲解了。上边的两项：姓名和邮件地址为标为必填，而其它项目并没有。一点让人困惑的是，评论内容也是必填的，而表单的设计则暗示你应该足够聪明能理解这一点。

优秀的评论表单设计

理想的表单设计是什么样的？

UX Matters发表过一篇名为《表单中的标签位置》的优秀文章。其发表的发现基于眼球追踪研究，所以文中建议非常真实权威。

总结一下的话……结论是文字标签应该放在文本框上方，可以使文字与文本框之间的视线距离最短。如果将文字放在文本框左侧，至少也要右对齐，同样，为了减少视线移动距离。而粗体字表现不佳，尽管此现象的原因尚存疑惑。（译注：《表》文中提到粗体字会让用户识别文字标签的时间延长60%。）

所以理想的评论表单是文字标签与文本框的距离很近，最好是在其上方。那表单项的顺序呢？大多数是由昵称开始，然后是邮件地址、网站地址，最后是评论内容。很多Blog和网站都是这样设计的。我想质疑这是否是最好的顺序。

我的一个朋友如下布局他的评论表单：

这一挑战惯例的表单以评论内容开始，随后才是评论者信息。这样你可以先说出你的评论，最后对你的评论签名。人们写信时是这个顺序。你首先写出信件内容，然后签上你的名字。我觉得评论表单这样设计更有意义。

当然，这个表单并不完美，因为访客需要观察右侧填入名字和邮箱地址，再返回左侧寻找提交按钮。下面是我觉而更好的设计。应用在了Particletree Blog：

非常棒。我们以评论内容开头，接着下边是评论者信息。文字标签和文本框很近，并且在其上方，就像UX Matters推荐的那样。提交按钮在整个流程的最下方，并在所有文本框的下方中央。必填项由红色星号标出。

我也会在Usability Post上试试。

你怎么认为？普遍使用的评论表单就工作的不错？还是更喜欢我的改变表单顺序设计？我想知道你们的想法。

互联网表单设计 - 第二章表单组织 (4)

yummy — 2009-02-25 08:51:05

组织内容

为保证对话流畅，可将问题分成有意义的组。根据不同大小和情境，将组分到多个网页或单个网页的不同部分。

例如，Yahoo！注册表单将个人信息、正在创建的账号、访问账号的方式及若干信任及安全项目（服务条款和垃圾邮件）问题分成四个不同部分，如图2.2。这些部分用标题区别于网页其余元素。紫色粗体标题比其他表单标签承载更多视觉份量，用户能快速扫描表单，明白需要提供何种信息。

图2.2 http://www.flickr.com/photos/rosenfeldmedia/2367260580

Yahoo新的注册表单采用对话语气，吸引新会员。

如果表单较长或较复杂，需要将内容组分到多页，就象房地产网站Redfin在线购房表单。在线购房过程过于复杂，并不是Redfin网站的错，允许人们可以轻松扫描必填部分的组织方式也有助于这个过程。如果有人不知道如何在线购房，Redfin网站的八页表单足够生动清晰（图2.3）！值得指出的是，这么长的表单得益于额外反馈和互动，后面的章节会讨论这个问题。

图2.3 http://www.flickr.com/photos/rosenfeldmedia/2366424765

Redfin网站将购房大量所需步骤分成一系列可管理内容组。每组都有名称和小段说明文字。

设计师组织表单时，往往不知道将内容分到一页还是多页。如果分到多页，多少页会太多？答案当然是要看情况。理解每张表单的情境能得到更佳答案。谁要填表？为什么要填？回答之前，将表单当成是与特定的人在对话，而不是与一堆数据输入框在对话。

以对话形式看待表单，主题之间就会自然出现间断。首先谈谈你是谁，然后讨论你住哪里。主题鲜明，简短，适合组成若干部分，一个网页就够了。如果每部分都变长，会需要多个页面将对话变成若干有意义的、可以理解的主题。

一定情况下，很多问题需要按顺序回答，否则回答就没意义。为了回答每个问题，人们要看到所有问题。此时，一个较长网页是最佳方案。

其他情况下，如果某些问题出现在表单填完之后，表现最好。比如，非必填的营销问题，例如”如何知道我们？”或”想更多了解服务吗？”，表单填完之后再问这些问题，实际回答率会更高。我碰到过一个表单重新设计，注册表单之后提出这些问题，回答率增加了近40％！背后的原因可能是人们觉得，非必填问题以跟进形式出现在填完表单之后，侵略性较弱。

表格并非单独存在于网络，采用网络惯例调查看看能否得出设计模式是决定表单架构的另一种办法。网络惯例调查比较相似网站的设计方案，通常有助于观察特定领域（如电子商务）中表现最佳的网站，确保进行对比的网站采用了共同成功措施。

网络惯例调查有助于发现网上已经形成的常见表单组织结构。比如，电子商务购物车表单问题（图2.4）揭示了一些有趣见解。第一页往往是登录页（Sign In）；第二页，个人信息；第三页，通常是发货方式偏好。等等。

图 2.4 http://www.flickr.com/photos/rosenfeldmedia/2367260748

网络惯例调查询问了15家电子商务网站的付款表单，表单问题分布在网页1，网页2等。

惯例为思考组织购物车表单对话形式提供了良好出发点。如果人们熟悉这些模式，这些模式对你的电子商务网站也会发挥作用。不过，应从网络惯例调查发现的模式开始工作，而不是仅仅复制竞争对手网站的做法。直接翻版别人的表单组织形式通常不会适合你的具体情况。

相关话题：表单按钮源地址：http://www.yummyux.com/?p=236

互联网表单设计 - 第二章表单组织(3)

yummy — 2009-02-24 13:08:39

构建对话

表单减少人与公司或组织之间的对话困难，以对话结构组织表单有助于思考。考虑以下情节。

有位陌生人问你“你叫什么名字？”，“地址是什么？”，“电子邮件是什么？”，“哪天出生？”。时间不用太长，你就会问你自己：“这人是谁？”，“为什么他（她）需要这些资料？”，“为什么我要回答他（或她）？”。你很快会感到不安，并希望陌生人能说说他（她）的情况，而不只是问你问题。当然，问题就是我们的朋友———表单。

考虑如何以对话形式、而不是盘问形式组织表单，让新客户感到受欢迎有很长的路要走。我仍然清晰记得，实地测试接受访谈时，有位女士对一家主要网络零售商说：“网站要知道这么多我的情况，而我对网站却一无所知。”

让人们有信心填完表单，要从我们要求他们回答的问题开始考虑。输入框作为表单元素，负责收集人们回答的答案。标签负责提出问题。任何时候这两种元素成为有意义对话的一部分，人们就能轻松容易做出回答。

图2.1，Yahoo!注册表单两种版本，看看两者所提问题差别。

http://www.flickr.com/photos/rosenfeldmedia/2366424557

http://www.flickr.com/photos/rosenfeldmedia/2366424481

http://www.flickr.com/photos/rosenfeldmedia/2367260500

http://www.flickr.com/photos/rosenfeldmedia/2367260436

图2.1

两种对话语言能解释清楚问题。“Day”、“Year”对“dd”、“yyyy”；“Preferred content” 对“I prefer content from.”

哪种版本更平易近人？你更愿意填写哪张表单？将输入框看成是问题（标签）的一部分反映了现实世界回答问题的方式。人们在面对复杂或者不熟悉的问题时，这种方式更加重要。

标签“Issuing Bank”（发卡行）。这是什么问题？如果改为“哪家银行签发此文件？”，会更快得到答案。当然，周围情境能更明确说明这两个标签的意思。比如，是不是填写失踪财务文件表单，或者是填写开设在线账户的表单？

标签采用的术语还会对人们能多快提供答案发挥举足轻重的作用。仍以上述银行表单为例，人们能理解“issuing”（签发）吗？“签发”是普通人使用的词汇，还是银行使用的术语？人们会这么理解：“哪家银行给的这份文件？” 使用客户描述动作的术语有助于问题更容易理解。

这并不是说，表单所有标签都要变成句子。很多实例都说明，简洁、单个词的标签远远胜于较长、描述更多的标签。但是，如果问题有模糊之处，对话语言明确往往有助于解释清楚问题。

相关话题：表单按钮源地址：http://www.yummyux.com/?p=232

互联网表单设计 - 第一章表单设计(3)

yummy — 2009-02-19 11:17:00

请勿用于任何商业目的。

原著Web Form Design: Filling in the Blanks，作者Luke Wroblewski ，amazon购买。

———————————–

视角：Jared Spool

创始人，用户界面工程公司

按钮变化，网站年利润增长3亿美元

两个输入框，两个按钮和一个链接，很难想象还有比这更简单的表单。但正是这张表单阻碍顾客从一家主要电子商务网站购物，阻碍网站获得3亿美元年销售额。更糟糕的是，网站设计者根本不知道问题出在哪里。

表单很简单。输入框：Email
Address（电子邮件地址）和Password（密码）。按钮：Login(登录)和Register(注册)。链接：Forgot
Password（忘记密码)。网站登录表单，用户总是碰到的表单。怎么会有问题？

表单布局并无大问题。用户看到表单，根据要买的产品填写购物车，点击Checkout按钮。此时，登录表单出现了，用户实际应输入资料，进行支付，而不是登录。

网站团队认为，表单推动老客户更快购物。首次购物者不会介意注册，因为他们还会购买，他们会感激注册对以后购物的方便。每个人都受益，对不对？

我们对从网站购物的人进行了可用性测试。我们请他们带上购物清单，给他们钱。他们要做的就是完成购买。

我们对首次购物者判断错误。他们真的介意注册。看到注册页面时，他们表现出厌恶。有位购物者告诉我们：“我不要发展关系。我只想买东西。”

有些首次购物者记不得他们是不是第一次来，尝试每组常用电子邮件和密码组合登录都失败了，他们就变得沮丧。用户如此抵制注册，我们非常惊讶。

用户甚至都不知道注册涉及什么内容，就点击注册按钮，他们都感到失望。许多用户认为零售商只想获取资料，发送他们不想要的广告信息。一些用户还想到了其他不可告人的目的，例如侵犯隐私的明显企图。（实际上，网站在注册过程中没有询问任何完成购买需要的信息：姓名，送货地址，账单地址和付款资料）。

老顾客也不高兴。除了少数用户能记得登录信息，大部分用户都呆了。他们记不得以前用过的电子邮件或密码。记住注册时的电子邮件也有问题，许多用户使用多个电子邮件，或者已经改变了地址。

如果用户记不得电子邮件地址和密码，他们会猜测多次。猜测很少成功。一些用户最后让网站发送密码到电子邮件地址，如果用户不记得最初注册时的电子邮件，这种办法会成问题。（我们后来分析了零售商数据库，发现只有45%的客户多次注册，有些多达10次。我们还分析了有多少人找回密码，每天约有160000人，其中75%从未完成一次购买）。

表单原本要使购物更容易，结果只帮助了很小一部分顾客。（许多客户都没得到帮助，因为更新不正确信息要花费很长时间，例如地址改变或新信用卡。）这张表单反而阻碍了销售——大量销售。

设计师很轻松解决了这个问题。去掉注册按钮，在原先位置上放上Continue（继续）按钮，加上条简短消息：“You do not need to create an account to make purchases on our site.
Simply click Continue to proceed to checkout.To make your future purchases even
faster, you can create an account during checkout.”（无需要创建账户就可以购物。点击继续付款即可。为了日后购物更快，付款同时可创建账户）。

结果：购买客户数量上升45%。增加的购买量第一个月销售额150万美元。第一年销售额增加三亿美元。

表单重新设计后第一周，他们看到了销售数字，公司CEO给我的电话答录机留了条消息。消息很简单：“Spool！好样的！”没必要复杂。我们所做的只是改变了一个按钮。

相关话题：表单按钮源地址：http://www.yummyux.com/?p=208

互联网表单设计 - 第一章表单设计

yummy — 2009-02-17 06:41:53

原著Web Form Design: Filling in the Blanks，作者Luke Wroblewski ，amazon购买。

———————————–

第一章表单设计

表单很讨厌。要是不相信，就看看有没有喜欢填表的人。也许有会计师给客户匆忙填退税单，或者有接待员喜欢收拾工资单。但对大多数人而言，表单是件麻烦事。我们想做的是投票、申请工作、在线买书、加入小组或是从近期购物中拿到折扣。而表单妨碍了我们。

大多数表单是“由内而外”、而不是“由外而内”设计出来的，这起不了作用[1]。组织内部或计算机数据库通常采用特定信息方式定义人、地点、过程或东西的有效记录。如果需要更新或者创建记录，组织或者计算机程序直接请求“给我需要的信息”，请求就以表单形式出现在人们眼前。

举个例子，网站数据库将“会员”定义为姓、名、电子邮箱和密码的独特组合。因此，如果有人想成为会员，会跳出表单询问名、姓、电子邮箱和密码。这就是“由内而外”。多数人不会认为填写一组数据库输入框是成为组织会员或者享受服务的方式。

“由外而内”意味着从组织或者网站外部的人的角度看待事物。他们如何定义会员？他们和数据库描绘的方法会不一样。他们会讨论表单的另一面，比如，他们会获得或者能做什么。

图1.1 http://www.flickr.com/photos/rosenfeldmedia/2366423465

流行社交网站Facebook的注册表单，这张表单几乎一半都用于显示安全检查！

这些都说明，为什么表单设计的首要目标是让人们迅速轻松完成填写。如果表单以无形方式存在，组织和用户能同时获得想要的东西，那就更好。表单很讨厌，应根据情况而设计。

表单设计重要性

多数人不喜欢填写表单，这个事实已足以说明应关注优秀表单设计，但还有其他很多原因能说明表单设计重要性，尤其对在线情况。表单在网上是电子商务、社交互动和大多数基于生产力应用类型网站的关键。

电子商务

现实世界中，典型购物体验会经过以下步骤：货架、广告琳琅满目，浏览商品，选定商品，收银台付款，有位（希望是）友好店员接待，清点所买商品，付款，装袋，解决价格标签不见或物品损坏赔偿问题，最后道别（图1.2）。

照片：Andrew Walsh

http://www.flickr.com/photos/radiofree/150535853

图1.2

在当地商场购物，微笑伴随着付款。

网上购物（图1.3）会经过：在线商店虚拟货架，搜索浏览商品和营销广告，要买的东西放入“购物车”，然后结账。但是没有面带微笑、乐于帮助的店员，你看到的是张表单。

图1.3

上：http://www.flickr.com/photos/rosenfeldmedia/2366423729

下：http://www.flickr.com/photos/rosenfeldmedia/2366423541

在电子商务网站eBay Express浏览物品充满乐趣，而付款则是表单。

表单偏偏在这个时候出现了。你要买找到的东西，店铺要完成交易赚钱。阻碍两者目标的就是表单，我们都知道———没人喜欢表单。

社交互动

与人、服务和产品的日常互动通过视觉，触觉和听觉线索得到加强。和人对话，能看到对方反应，听到对方声音。和一组人接触，相同类型互动会让我们感到是否受欢迎。

即使实体产品经验也同样具有潜在接触。例如，想想最初接触新苹果笔记本的情景（图1.4）。打开包装，接触到反映笔记本实际质量的各种材料和质地：所有细节都经过深思熟虑。如果计算机用个人照片来表示账户，也许是最个人的时刻。

图1.4 http://www.flickr.com/photos/rosenfeldmedia/2366424337

打开Apple MacBook Pro笔记本包装的经历可感觉、迷人，这种经历反映了包装内的产品质量。

但上网时，上面每种体验都变成了表单。想参加新型趣味社会网络？请填表（图1.5）。和好友分享视频？请填表。回应博客作者的有趣文章？你都猜到了———请填表。基本上，只要想参与网上社交互动，表单就会出现。大部分社交应用网站根据参与成员、活动完成数量等判断其发展情况，运营这些网站的公司也就依赖这些表单取得商业成功。

图1.5

上：http://www.flickr.com/photos/rosenfeldmedia/2367262662

下：http://www.flickr.com/photos/rosenfeldmedia/2366424417

Vox是个有趣的社交网站，但想加入时，必须要填写创建新账号表单，这就不有趣了。

生产力网站

除电子商务和社交互动网站外，网络越来越成为人们完成事情的地方。从网上银行到基于网络的文字处理，为生产力而设计的应用网站数量倍增。对于基于生产力的应用网站，网上与网下并无太多不同。如果真实世界调查需要填表，虚拟世界的调查不会有很大不同（图1.6）。

图 1.6

上：http://www.flickr.com/photos/rosenfeldmedia/2367263846

下：http://www.flickr.com/photos/rosenfeldmedia/2366428127

加州选民线下和线上注册都使用表单。

我们又一次发现，表单位于用户需求和商业目标之间。人们要管理信息或创建物品。而提供这些服务的企业对增长和优化数据或客户行为感兴趣。阻碍双方的自然是表单。

所有这些例子都清楚表明，网络表单阻碍了用户需求（人们想从产品或服务得到东西）和商业目标（运营这些服务的公司希望事业常青）。

人们从电子商务网站购买所需物品，企业希望销售最大化。支付表单阻碍双方。
人们在社交网站加入社区，与朋友聊天或共享内容。从商业角度看，网站要发展，增加人们之间的接触。阻碍双方的是注册和联系表单。
人们希望利用基于网络的生产力工具，完成事情，创造或协同工作。公司要增加内容，提高人们花费在网站上的时间。表单再次阻碍了两者。

表单推动商业，社区和生产力在网上蓬勃发展。表单设计重要性不言而喻。

—————————————————–
[1] Lou Carbone在MIX07大会上向我介绍了“由内而外”和“由外而内”的概念，用来描述公司应如何考虑其服务，网址：http://www.lukew.com/ff/entry.asp?532

相关话题：表单按钮源地址：http://www.yummyux.com/?p=196

什么时候需要有“取消”按钮？

西贝 — 2009-02-16 03:29:51

在浏览web的时候，我们往往发现这样的一些组合：“确定”“确定取消”“确定关闭”“关闭”“取消”。到底哪个组合是对的呢？什么时候需要有“取消”按钮呢？

————————————————————实例使用篇————————————————————-

先来看实例：

这是写一篇新日志的页面。整个页面主要的内容就是写一篇新日志所涉及到的各种操作。有提交按钮、提交所输入的信息。有取消按钮，表示不要写日志了，要撤销刚才点击“写日志”按钮的这个操作。点击取消按钮，页面跳转至日志列表页。

发表评论功能是跟在一篇日志的最下面，整个页面上发表评论功能并不是主要内容（主要内容是日志正文），这里的取消按钮如果也像上面写日志页面上的取消按钮一样，页面跳转到日志列表页，显然就不对了。而如果和写日志中的取消按钮功能不同也不好，因为这两处实在太像了，两处相同样子的按钮功能却不同，显然也不对。
这里实际上不需要取消，因为没什么可取消的。之前的操作是“打开这篇日志的详情页”，而不是“发表评论”，“打开…”这个操作不需要取消按钮撤销。
“发表评论”这里的“取消”按钮实际功能是清空评论内容。那么这个按钮不应该叫“取消”，应该叫“清空”之类的。而在这个地方有这样一个清空功能似乎更多时候会使用户误操作，所以，这个按钮就该去掉了。这是另外的错误引发的另外的分析，不是这回主要要说的，到此为止。

对比这两个页面，写日志是需要撤销的，而发表评论是不需要的。

写日志页面有这样几个特点：
1. 用户主动点击了一个叫做“写日志”按钮后引出来的；
2. 按钮“写日志”表述为一种操作的；
3. 页面上充满表单元素，需要用户填写、提交。
那么，在写日志页面上，要为 “写日志”按钮提供相应的撤销操作的功能——取消按钮。

当然写日志页面上的取消按钮细研究起来还是有些问题的。在整个网站中，“写日志”按钮不止在日志列表页一个页面上出现过。那么点取消按钮返回日志列表页就不是很严谨了。如果取消按钮换做“返回日志列表页”这样一个链接，似乎就更准确了。类似下面这样：

“返回你的相片页面”——这种表现也可以理解为取消按钮的一种变型。

另外一种变型——页面右上角的叉子按钮：

————————————————————提示使用篇————————————————————-

还有就是一些标准信息提示页面用到的“取消”按钮！

! 警告性信息
界面元素：警告信息图标一定少不了，还有”是”、”否”、”取消”按钮，及相应的询问文字。
应用场景：用户由于误操作产生不可逆转的影响。对用户可能因为疏忽而没有进行的一些重要操作进行提示。所以需要采取提供提示的功能保护用户操作。警告icon表示将来会引起问题的情况。“警告不等于被弱化的错误”——对这句话的理解是，警告不能使用到不严重的错误。这里的“取消”按钮是不可缺少的！

? 询问性信息
界面元素：包含询问的信息图标、确认、取消按钮，及相应的询问文字。
应用场景：为避免用户做出误操作，请用户对其行为进行确认。随之要伴有相关的询问文字，一般来说，说明性和解释性语句不能超过2行，不能超过50个文字。提示性语句不能够太过于专业，尽量使用委婉的语句来表达相关的意思。当然简洁和不能重复也是一个关键的方面，同时记住语气一定要“温和/积极”。这里的“取消”按钮也是不可缺少的！

互联网表单设计 — 常见问题

yummy — 2009-02-14 03:16:14

网络表单设计为什么重要？

表单推动网上商业、社区和生产力蓬勃发展。如果从事网上零售，目标是卖出东西，但支付表单阻碍了产品和顾客。如果开发社会化软件，目标是发展社区，而表单阻碍了你和社区成员。如果建立生产力用网络应用工具，表单能推动创建和管理内容的关键互动。阅读第12页了解更多内容。

如何组织网络表单 —- 单页还是多页？

谁要填写表单，为什么要填写？一开始就回答这个问题能让我们以对话方式看待表单，而不是数据库输入。把表单看成对话，主题之间就会形成自然间断。如果主题都很短，可以分成几部分，单页就足以组织这张表单。如果每部分很长，可采用多个网页将对话分割成有意义的、能理解的主题。见第27页。

如果表单跨越多个网页，需要告诉用户所在页面吗？

如果网络表单所提问题分布在多个网页，会需要说明网页数量（范围）、当前页面，同时提供保存并返回进程（状态）的方式。三项进度指标虽紧密相连，但执行不同功能。见第70页。

输入框标签顶对齐，右对齐还是左对齐？

如果要减少完成时间，或因为本地化需要采用灵活的标签长度，考虑采用顶对齐标签。如果目标相似，但受到屏幕垂直面积限制，考虑采用右对齐标签。如果希望人们填表时扫描标签，了解必填内容，或希望人们回答诸多问题中的特定问题，考虑采用左对齐标签。见第87页。

网络表单如何使用智能默认？

合理设置默认选项，满足多数人需要，智能默认有助于回答问题。网络表单有很多地方可以利用智能默认，减少选择次数，加快完成填表。见第239页。

表单何时使用帮助文字？

下列情况应考虑使用帮助文字：人们不熟悉表单要求的数据；人们疑问为什么要填入特定数据；人们关心数据安全或隐私；系统对数据提供建议方式；某些输入框是必填或非必填。见第164页。

如何表示必填项？

如果表单大部分输入框是必填项，把非必填项表示出来即可。如果大部分输入框是非必填项，把必填项表示出来即可。表示输入框是必填或非必填时，文字最清晰的方式。不过，用户比较容易理解“*”代表必填项。见119页。

主动作和次动作有什么区别？

提交（Submit）、保存（Save）、或继续（Continue）等为了完成填表的动作，对于任何表单填写者都是主要目标。因此，这些动作被称为主动作。另一方面，次动作往往较少用到。见139页。

相关话题：表单按钮源地址：http://www.yummyux.com/?p=182&nucrss=1

单线流程(2) - 流程中KEY

mooqii — 2009-02-08 16:00:00

在单线流程1这篇文章里，我引出了单线流程这个概念，并没有深入去分析单线流程，相当于HELLO WORLD!在接下来单线流程这个系列的文章里，我会继续深入分析单线流程相关的内容，希望有一天单线流程的设计思想能深入人心，成为一个主流的并且基础的流程设计思想。也希望有兴趣的朋友一起来讨论这个话题。

继续解释什么是单线流程？
尽管我们可以把一个复杂的流程分成多个步骤，多个页面，使每个页面的流程都符合纯粹单线流程，但显然在实际应用中纯粹的单线流程是不够用的。

我们可以把广义的单线流程理解为“易用的，明晰的并且不容易误操作的流程”

如何定义流程中KEY？
我总是用KEY来表示流程，而不是用流程中涉及的所有交互控件来描述流程。到目前为止我还不能用很概况和精确的定义来描述什么是KEY，那么什么样的交互控件可以被定义为KEY。

1.流程中第一个（组）交互控件。
2.流程中最后一个（组）交互控件。
3.流程中有启下功能（或者说是作为流程内其它KEY的前提条件）的交互控件（如“下一步”）
4.流程中起岔道功能的交互控件（如支付宝注册页面中的 “个人”or“企业”的单选框）
5.能触发数据流动的交互控件
暂时就列这么多

下面举实例：

如果放在某个表单中间，一般来说上面的browse不会是KEY，但upload一定是一个KEY。

一般来说male和female的单选组不会是一个KEY
而individual和corporation的单选组往往会是一个KEY

淘宝搜索框上面的宝贝/店铺/商场/拍卖/全球购/打听每一个卡片都是流程中的KEY，因为整个搜索区域就是一个流程域。

而百度搜索框上的 “新闻/网页/贴吧” 不是流程中的key（之前我范了错误），如上图百度这个搜索区域，包含了一个流程域+6个其它流程的入口。单纯从概念上来是如此怪异的组合，实际上的效果却还是可以让人接受，因为百度把链接（其它流程入口）伪装成流程KEY了。在这方面，google做得要地道得多。

为了让问题变得简单，请只考虑白色区域的部分

相对来说，google更遵守某些规则。在google的搜索区域里，每一个交互控件都属于“网页搜索”这一流程，并且在这个流程里，每一个交互控件都是KEY。

类别：产品设计查看评论

单线流程

mooqii — 2009-02-07 14:22:17

单线流程这个系列的文章，是本blog09年最重要的一个主题，因为我觉得单线流程的设计思想非常接近WEB产品设计的基本原理之一。在web设计领域，似乎目前还没有单线流程这个说法，所以本系列文章会比较山寨。

什么是单线流程
我所理解的单线流程是指，当用户进入某个流程时（按钮的出现往往是流程的标志），只能“前进” “后退” 或者“退出”，而没有多余的干扰流程。当然纯粹的遵守单线流程在实际的产品设计中没有任何意义，我们在做得更多的是让产品流程更接近单线流程。接下来我会举一些实际的例子。

A到B的流程(这里的“A” “B”是指流程中的关键组合)

这是最基础的流程，它永远符合单线流程，比如百度搜索，输入关键字------->百度一下

A到BC,或者AB到C
这是另两种非常基础的流程，无论哪种对用户来讲都是非常直观的。

接下来讲讲由以上基础流程组合成的复合流程。

A到B到C的流程

只有经过B才能到达C，在实际过程中我们常常会设计成如下这样：

举一个手机验证码的流程设置：

比较糟糕的设计，用户的视觉从A直接跳到C，在用户发现此路不通后，才返回B，所幸这个流程比较简单，一来一回的用户成本并不高。

google获取手机验证码的这个设计应该说是一个够用的，也符合用户心智的设计。也许可以更好的优化这类流程。

把A->B->C的流程分拆成 A->B,B->C。好处是把该流程变分成了2个纯粹的单线流程，坏处是用户只看到AB没看到C之前，用户会迷茫。

可能更好的做法是，ABC流程可见，但是在用户没有操作B之前，C不能被操作。

A经BC到D的流程

这类流程需要根据实际的情况来优化。下面以目前支付宝的手机注册和邮箱注册页面为例。

支付宝的手机注册（获取第二次手机验证码后的页面）

因为这是第二次获取手机验证码后出现的页面，key D先于ABC出现在用户视野里，这里暂时不去讨论这里key的顺序。

问题出在哪里，当用户完成A之后，有B和C这两个并列的入口供用户选择，而对“语音获取”这个不怎么常见的功能支付宝并没有做任何解释。这里支付宝给了用户两个并列的入口，并且没有对用户比较陌生的入口做好标识。也许我们可以把流程优化成如下这样：

我设计的并不是特别好，这里的C应该被近一步弱化，只有当手机短信延迟相当厉害而影响用户继续注册，才让用户采用比较高成本和陌生的语音获取验证码。

使用Email注册支付宝页面

不像上面这个例子的手机校验码获取，这里B和C都是不能互相替代的KEY，B与C也不存在谁主谁辅的关系，只是B会使用比较频繁。

这个页面似乎没多大问题，但为了说明我想说明的问题，我觉得这里的流程可以变成如下：

为什么这么做，因为B和C是两个不同类型的KEY，分解后的流程是 (B-->A-->D) (C-->A-->D)，应该说这两个是相对独立的流程。而且在用户选择B或者C之后，很可能会影响用户A区域的行为。组合成 A-->(B/C)--->D,不如组合成(B/C)--->A---->D更清晰。

你们的资料不准确

yummy — 2009-02-04 02:34:22

今天在joyo又碰到问题，以前也碰到过，不过今天这次没办法进行下去。

公司在高新区，高新区位于浦口，有独立邮政210061，浦口区的其他很多地方使用另一个邮编211800。

在joyo填写配送地址碰到了麻烦。如下图。

“根据我们的资料，江苏浦口区的邮编为211800”。

抱歉，你们的资料不准确。

不修改，继续下去。下图。

有点摸不着头脑。

我填的邮编明明准确，为什么非说你的才准确？

既然那么坚持你的才正确，那就修改一下吧，可是为什么还要我手工修改呢？

继续配送，到底了改了还是没改？

要命的情况出现了，点击了继续配送，出现下图。

我就在这三个页面不停转悠，最后愤然退出。再次登录时，惊奇的发现，要添加的配送地址已经悄悄出现在地址簿里了。

相关话题：表单按钮源地址：http://www.yummyux.com/?p=156&nucrss=1

按钮的反馈

木头 — 2009-01-13 22:17:09

在我们的生活中，需要接触大量的带有机械按键的物品。当你用手指按下按键的时候。都会或强或弱的感受一股（嗯，也有可能是一丝丝）反作用力传递到你手指的神经末梢。这是一个完整的反馈过程。

我们把从开始按到按下的过程关键帧分解模拟下。

图1：

在软件中，M$公司在windows系统的按钮模拟了这种反馈方式，不光增加用户的满足感，也让用户更清楚的感知他的操作过程。

图2：

在很多做软件公司在GUI基本规范都要求做多态（三态居多一些）的按钮，硬件厂商也相应推出了一些力反馈游戏设备。而在触摸屏系统方面。也有很多应用，比如专门研究触摸屏和触觉回馈技术的Immersion公司的技术也应用在很多触摸屏手机上面。

图3 Immersion技术展示：

我们在生活中评价一个键盘手感不好的时候，通常我们把它称作手感很硬
而在我们互联网产品当中，有些沿用了windows按钮。当然更多的按钮出于视觉美观度考虑就行了美化。是这样滴。基本上属于很“硬“的按钮，按上去不会发生变化。

图4，一些按钮截图。

回到图1。我们如果这时候通过按钮的视觉变化告诉他。是的，你按了这个按钮。是不是会更好一些呢。

虽然没有说一定要在网页按钮中一定这样做。但有更加清晰和详细的反馈是一件更好的事情。

延展阅读：反作用力 Immersion 公司触摸回馈技术

相关话题：表单按钮源地址：http://ued.koubei.com/?p=756

最小化按钮

douis — 2009-01-06 21:46:19

在桌面应用程序中，窗体通常带有最小化最大化和关闭按钮。其中，关闭按钮和最大化按钮很明显，不需要多说。但是这个最小化按钮，什么时候该要，什么时候不该要？

我们的讨论焦点在于一个程序登录窗口上。样子貌似左边这个窗口，只不过比它大一些，有些图片和文字。

一半人认为这个窗口应当设置最小化按钮，一半认为相反。对最大化按钮的意见很一致：不要。

赞成放置最小化按钮的人认为：

普通窗口都有最小化按钮，登录窗口不应例外
窗口可能遮住后面的屏幕，所以提供最小化窗口在不关闭的情况下利用屏幕空间

反对意见包括：

这个登录窗口面积很小，对后面屏幕的影响很小
登录窗口没有最小化的需求

事实上，我认为这个面积大约为600*400象素的登录窗口，有没有这个最小化按钮都不太影响。但是这个问题本身很有趣。据我所知，还没有在哪里见到过关于最小化按钮的放置标准。虽然windows用户体验中对窗体按钮的功能做了具体说明，但却没有表明最小化按钮的具体取舍条件。

我的意见是不放。我从两个角度解释这个问题：

是否有最小化的需求。以该窗口能多大程度的影响屏幕为判断依据。如果窗尺寸很小，只要移动就不会妨碍后面的屏幕，那么就不需要最小化。
窗口任务是否即时触发的。比如登录窗口，通常用户不会过久停留，登录事件通常在短时间内完成，也就是说不需要切换多个窗口完成这个登录任务，最小化功能显得多余。

虽然赞成者的意见看上去也蛮有道理，但是却没有迫在眉睫的最小化窗口的需求。

如果上述理由仍然无法说服你，那再看下面的理由：

最小化按钮与最大化是成对出现的。也就是说，有最小化，就必须出现最大化按钮，没有最大化按钮也就不能有最小化。

也即，这种情形下，此种组合是违法的：

下面是几个标准的按钮组合：

从”发布”button看主要与次要行为设计

dindant — 2008-10-20 21:38:06

前几天在UCDCN里写一篇关于如何让UX走进战略决策层的文章时,不小心按到了取消按钮，于是乎,所有东西都没了。痛哭-_-。竟然没有“确认”取消。不可撤销的操作不都是应该进行“确认”吗？

另外，这里的BUTTON设计明显针对主要行为与次要行为，但仍有不足。加入字体大小改变、颜色对比，这样会帮助用户会更快、更准确地完成发布日志的任务。

看看原先的设计，“发布”与“取消”之间最多5PX的宽度，相隔太近，在刚刚“写完东西心急火燎地想发布日志与大家分享”的场景下，鼠标一滑往往容易发生误操作。在这个页面，用户的主要行为就是发布他所写的东西，因为发布按钮应该更大，UCDCN已经在面积上做到了这个，但实际上可以更好，比如这样

将发布的字体调大一号。这样可以更突出主要行为，避免发生不小心“取消”文章的惨剧。

或者这样

颜色的不同，可以让用户停下来，选择正确的选项。

实际上，LUKEW对主要行为与次要行为已经有了充分的论述。在对下图ABC的测试中，用户都能很好地完成表单的填写。一部分用户说A的设计在逻辑上对“cancel”不公平，而C的则可以让用户做出正确的选择。

LUKEW最后说道，A其实更多的用于让用户快速完成任务的情况下，而C则用在更需要仔细考虑的地方。因此，在UCDCN这里，选择A应该更为恰当。

表单设计的最佳体验

吾凡 — 2009-01-05 20:34:59

原文：http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

为什么表单设计非常重要？

- 表单是用户与网站之间进行“对话”的方式
- 从商业上
   - 使用户能够实现购买行为
   - 使商家实现销售利润最大化
- 从交互的角度
   - 使用户能够参与
   - 使商家能够增加用户并形成社区
- 从参与角度
   - 使用户能够操作和贡献内容
   - 使商家可以积累内容和数据

设计原则
   - 使痛苦减少到最小
       - 没有人喜欢填写表单
       - 聪明的默认值，在线校验，输入的容错性
   - 清晰的完成路径
   - 考虑用户的背景和使用情景
       - 用户的熟练程度
       - 用户使用的频繁度
   - 确保交流的连续性
       - 错误，帮助和成功
       - 单一声音，减少噪音

对效果的分析
   - 易用性测试
       - 错误，提示，帮助，完成率，每次任务花费时间，满意度分值
   - 眼球跟踪
       - 完成时间，关注点,扫视路径
   - 用户帮助
       - 最重要的问题，事故次数
   - 最好的体验
       - 常用解决方案，独特的方法
   - 在线跟踪
       - 完成率，进入点，退出点，页面元素的使用,输入的数据

设计模式
   信息+互动+反馈

信息
    - 布局
        - 标签位置
        - 内容分组
    - 输入
        - 格式，必填项目
    - 动作
        - 首要动作和次要动作
    - 帮助和提示
    - 视觉层级

标签顶端对齐方式
    - 当被收集的数据是熟悉的
    - 最少的完成时间
    - 需要更大的垂直空间
    - 间距和对比对于有效的视觉扫描很关键
    - 对于本地化和复杂的输入有更高的灵活性

标签右对齐方式
    - 标签和输入框有清晰的联系
    - 需要较少的垂直空间
    - 由于左侧的不对齐，快速扫描所有标签变得比较困难
    - 很快的完成时间

标签左对齐方式
    - 当需要的数据不熟悉时
    - 标签的扫描比较容易
    - 标签与输入框的联系不紧密
    - 改变标签长度可能对布局产生破坏和削弱

眼球跟踪
    - 2006年7月matteo panzo的研究
    - 左对齐
        - 容易将标签与输入框联系起来
        - 标签和输入框之间的距离让用户花费更多时间
    - 右对齐
        - 减少了将近一半的注视次数
        - 表单完成时间减少了一半
    - 顶端对齐
        - 让用户一眼捕捉到标签和输入框
        - 最少的完成时间

最好的体验
    - 减少完成时间以及熟悉的数据输入：上对齐
    - 如果希望节省垂直空间：右对齐
    - 对于用户不熟悉或者高级的数据项：左对齐

必填项目
    - 必填项的指示在以下情况下最有用：
        - 输入项很多
        - 很少是必填项目
        - 使用户能够通过扫描表单知道什么需要填写
    - 选填项指示在以下情况下最有用：
        - 很少的项目是选填项
    - 当所有项目都是必填项时指示就没有用处

最好的体验
    - 尽量避免选填项
    - 必填项多，则标明选填项目
    - 选填项多，则标明必填项
    - 文字最好，但*经常被用于必填项目
    - 将标识和标签连在一起

输入域长度
    - 输入域长度可以提供有价值的affordances
    - 适当的域长度为输入提供足够的空间
    - 混乱的域长度可能给表单增加视觉噪音

最好的体验
    - 如果可能，use field length as an affordance
    - 否则，考虑一个一致的长度提供足够的输入空间

内容分组
    - 内容关系提供了结构化组织表单的方式
    - 分组提供了
        - 一种在高层次上扫描必需信息的方式
        - 表单内信息关系的联系

太多的内容分组会导致额外的视觉噪音，降低可读性
最小化分组的好处：减少视觉噪音，更直接的完成路径

最好的体验
    - 将表单内关联的内容进行分组
    - 使用最少数量的视觉元素来表达关系

动作
    - 不是所有的表单动作是平等的
        - 重置、取消、返回一般来说是次要的操作，很多时候不是必须的
        - 保存、下一步、提交是首要的操作：对于表单的完成起直接作用
    - 动作的视觉呈现需要与他们的重要性相匹配

最好的体验
    - 如果可能，避免次要动作
    - 否则，用清晰的视觉识别来区分主要和次要动作

帮助和提示
    - 在下面的情况下，帮助提示是有用的：
        - 要求用户输入不熟悉的数据时
        - 用户对于为什么数据被要求填写可能有疑问
        - 推荐用户使用某种提供数据的方式
        - 某些数据是选填的
    - 然而，过度使用帮助和提示会很快overwhelm表单
    - 在下面的情况下，你也许需要考虑动态提示
        - 自动的内文提醒
        - 用户触发的内文提醒
        - 用户触发的段落提醒

最好的体验
    - 除非必要，尽量少的使用帮助、提示
    - 明显和与数据输入区最相邻的帮助是最有效的
    - 当收集很多用户不熟悉的数据时，考虑使用动态提示系统

交互
    - 用户完成的路径
    - 使用键盘的tab键进行控制
    - 逐步出现
    - 依赖性出现

完成路径
    - 每个表单的首要目标都是希望用户填完
    - 每一个输入项目需要考虑和操作
        - 去掉所有不必要的数据输入要求
        - 提供灵活的数据输入
    - 提供清晰的路径
    - 提供聪明的默认值

最好的体验
    - 去掉所有不必要的数据请求
    - 使用聪明的默认值
    - 给用户提供灵活的数据输入选择
    - 清晰的完成路径
    - 对于长表单，提供进度和保存功能

tabbing
    - 许多用户通过tab在表单项目之间跳转
    - 合理的html将保证跳转正确工作
    - 多列式的表单结构可能与tabbing顺序相冲突

最好的体验
    - 记得考虑tabbing
    - 使用tabindex属性来控制tabbing顺序
    - 当设计表单布局时考虑tabbing预期

阶段性提醒
    - 不是所有用户一次需要所有可选项
    - 合理使用的阶段性提醒提供了额外的选项
        - 高级选项
        - 进阶操作

最好的体验
    - 根据用户需求的优先级来安排阶段性提醒
    - 最有效的方法是让用户来触发
    - 使用一致的提醒方式

依赖性选择输入
    - 有时候一个数据需要与其他的数据输入相关联
        - 某项输入触发更多的选项
        - 某项输入触发更清楚的需求

依赖型显现输入
    - 页面级别
        - 需要额外的步骤
    - 区块标签
        - 通常容易被忽略
        - 默认值很重要
    - 手指区块标签
        - 需要遵循完成路径
    - 区块选择项
        - 有效将信息分组
        - 隐藏了额外的选项
    - 下方暴露和行间暴露
        - 有让用户迷惑的潜在危险
    - 当选择/选中时激活
        - 次要选择的关联性被削弱

最好的体验
    - 在首选项之间保持清晰的关系
    - 将额外输入项与他们的触发器之间保持清晰的关联
    - 避免“跳跃”造成首选项之间关联的减弱

反馈
    - 文中校验
        - 一致性
    - 错误
        - 提示形式和解决方案
    - 进度
        - 提示形式
    - 成功
        - 校验

文中校验
    - 当数据输入时提供直接的反馈
        - 输入校验
        - 建议正确的输入
        - 帮助用户不超出限制
    - 如：
        - 密码提示
        - 用户名选取
        - 正确输入下拉提示
        - 最大允许字符计算

最佳体验
    - 当输入项的出错率很高时考虑文中校验
    - 使用建议输入来减少歧义
    - 沟通界限

报错
    - 错误被用来保证所有数据项被正确提供
        - 清晰的标签，affordances，帮助提示和校验可以帮助减少错误
    - 但一些错误仍然会出现
    - 用尽量少的步骤提供清晰的解决方案

最佳体验
    - 当错误发生时提供清楚地交流：优先的位置和视觉反差
    - 提供修正错误的方法
    - 将错误信息与相关输入项关联起来
    - 当错误发生时用视觉语言来double

进度
    - 一些时候动作需要有执行的时间
        - 表单提交
        - 数据计算
        - 上传
    - 当动作进行中时提供反馈
        - 例如：将提交按钮disable

最佳体验
    - 提供任务的进度提示
    - 当用户点击提交后，将其disable以避免重复的提交

成功
    - 当成功完成表单时，在上下文中确认数据输入
        - 在一个新页面中
        - 在一个更新的表单中
    - 通过以下形式提供反馈
        - 消息（可移除）
        - 动画的形式

最佳体验
    - 当数据提交成功后给与清晰的交流
    - 在数据提交的情境中提供反馈。

额外补充
    - 避免改变用户提供的输入
        - 用后来的输入
        - 当错误发生时
    - 如果获取信息是困难的，那么让用户知道比直接给用户一个表单更优先

可用性和标签形式
    - 使用label标签将数据与标签关联
        - 能够被screen reader正确识别
        - 多数浏览器将带标签的文字处理为可点击：更大的动作
    - 使用tabindex属性提供tabbing路径
        - 提供tabbing顺序的控制
        - 使表单可以通过键盘来导航
    - 考虑为支持键盘输入提供accesskey属性
        - 直接到达相关的输入项
    - 考虑fieldset属性将内容分组

表单创建工具
    - wufoo
    - www.formassembly.com
    - www.icebrrg.com

更多信息
    - 功能性表单设计
        - www.lukew.com/ff/
    - site-seeing：A Visual Approach to Web Usability
        - Wiley & Sons
    - luke@lukew.com

相关话题：表单按钮源地址：http://www.yeeyan.com/articles/view/8217/3893

奇怪的关闭按钮

无酬 — 2009-01-04 20:17:12

我们在浏览网页的时候偶尔会遇到一些陌生的网页交互行为，通常情况下它们并不会影响你的正常使用，之所以出现情况往往是因为，设计师在设计某个交互方式的时候，遇到了常用的交互模式无法解决的问题，因此会采用一种创新的交互模式来解决问题。通常情况下这些创新的交互方式将会是我们学习的绝佳案例。对设计师拓宽思路很有好处，今天我们介绍的是一个来自google的sns社区orkut 的对关闭按钮的创新应用。

应用场景：orkut组件是默认展示在profile页面的，可以通过执行两种操作隐藏和移除来关闭该组件在profile里的显示状态，区别是隐藏后该组件还可以在组建库中找回，移除后组件无法找回只能重新添加。

通常我们会采取的方案：
如图，通常遇到这种情况我们会设计两个按钮一个隐藏一个移除。好处：两个任务直接展现，操作也很直接。只需一次点击即可。弊端：用户不理解隐藏和移除代表什么意思，无法预知操作结果，两个动作的操作结果在此页面的表现是一样的，而且操作在当前页面不可逆。

挑战：怎样以一种清晰的方式告诉用户隐藏和移除的区别，两个动作行为结果是一样的，即此组件从当前页面消失，区别是隐藏的组件还可以在组件列表被找到而移除的组件则不能。

解决思路：对动作进行相对详细的文字解释是表现这种区别的最直接的方法，但页面空间非常有限，因此不可能在页面中直接添加动作解释。这时候选择弹出窗成了一个很自然的选择（就是在点关闭按钮后弹出窗口，在弹出窗中我们可以对隐藏和移除两个行为做出更清晰的解释，用户就可一作出更明确的选择）。最终，设计师选择的是，类似于下拉菜单的，小面积的浮出层。

最终方案：把两种操作整合为一个关闭按钮（关闭按钮恰好可以概括两个操作在当前页面的相同结果，是这两个操作的交集，因此语义上非常恰当），在点关闭后用户会看到两个有详细注释的按钮，“hide from my profile（在当前页面隐藏）”和“remove this application（移除此组件）”这时候用户就可以作出相对准确的选择了。

设计师之所以没有选择弹出窗的形式，是因为这样做会增加用户的认知负担，并且从可逆性角度考虑即使用户勿删了组件仍然可以用添加组件的方式找回，所以线上的这种方式是最佳的选择。

谷歌用户资料修改的一些问题

露露.周 — 2008-12-31 15:34:22

上周末，开始浮出水面。学习做一名勤奋的互联网观察员。

正巧，申请加入的白鸦他们的UCDCHINA讨论组。

挂着个真名好没意思。还是改成我喜欢的露露.周(lulu.zhou)比较好。

不过一看那个资料修改页面，就有点晕晕。

姓名：_______

位置：_______

名称：_______

姓名，这个选项很明显，是填我自己的名字。位置？大概是所在地吧。接下来，就到了很奇怪的地方了。

名称？what？是昵称吗，还是其它什么的。

如果是昵称的话，那为什么又要放在位置下面呢。

如果不是昵称，那上面2个选项是不是要重新考虑下要填的内容了。

这一番疑惑让我在填这个表单上犹豫了差不多有几分钟。

真不希望看到这种类似汉化过来的语言。

网页表单中的主、次要动作

Douis — 2008-11-19 21:10:13

网页表单中的主、次要动作

作者：Luke Wroblewski & Etre
译者：UCD翻译小组，Li Douis
原文地址： http://www.lukew.com/resources/articles/PSactions.asp

近几个月来，我一直忙于我的新书《网页表单设计最佳实践》，使用大量的真实案例数据对一些设计规范进行提炼。接近尾声的时候，我有幸参加了Etre设立于伦敦的可用性团队组织的一些研究工作。这些研究主要是针对网页表单设计的特定元素，进行了一些眼动追踪和可用性测试。其中一项测试，重点考察了网页表单中主次要动作的差异。

主要动作与次要动作

一个典型的网页表单，通常带有一些“结束性”动作－比如【提交】、【保存】或者【继续】－用于完成表单任务。因为这些动作会触发表单的最重要的行为（结束表单），所以它们通常属于主要动作。

相反，次要动作相对用的较少，而且通常允许用户撤销已经输入的数据。比如【取消】、【重置】或【返回】，与用户完成表单的主要目标相对而言，它们处于次要地位。

由于次要按钮有可能引发负面后果，特别是无意中被触发时，我过去经常主张把它们从表单中去掉。试想一下，你填写了一个超长的表单后，只是误点了一下【重置】按钮，所有的数据都不见了。

有人说有时候次要动作也是合理的（【另存为】、【导出】等）。在这种情况下，我的经验是把主次要按钮从视觉上区分开，这样用户就不至于混淆主要目的：完成表单。

弱化次要动作的视觉表现，可以将潜在错误的风险降到最低，同时把用户引导向正确的结果。但是，区别主次动作的最佳方案是什么呢？主要动作与次要动作应当有多大差异？他们应该怎样放置？为了解答这些问题，我和Erte进行了一些测试。

为了研究主次动作的最佳显示方案，我们使用6种方案测试了23名用户，使用了眼动追踪法和可用性度量法。测试用户按随机顺序查看6种设计方案（以便克服熟悉度偏误），他们都被要求“完整而正确的填完表单”。

视觉差异

6个方案中，有5个方案完美的完成了任务。A/B/C/D/F方案的正确率为100％，没有引发任何一个错误。它们完成任务的时间大致相当，并且满意度评价也一样高。

其中，B方案的效果最佳。用户注视的时间最短，而且注视量最少。与其他方案相比，用户能更快更有效的完成任务。

但是评论A方案的时候，一些用户认为把【取消】按钮显示成链接形式比较有效。一名用户提到，虽然这种隐性显示法会让他找不到按钮，但却有效避免了意外的（也是灾难性的）取消操作。另一名用户认为，【提交】按钮是用户界面里最重要的按钮，【取消】按钮理所当然的不配享用前者般的同等待遇。

还有一些用户对C方案把【取消】按钮“灰掉”的做法表示反对。此外，有一人说颜色可以让人更容易找到“正确的按钮”（比如【提交】），而另一人却说不同颜色的按钮“影响速度（并且）让你回头检查你是否点击了正确的东西”。

有趣的是，处理C方案的用户和处理B方案（使用了几乎相同的绿色左对齐按钮）的相比，平均多了8个以上的注视。这似乎说明，虽然用户的确认可C方案这种灰色【取消】按钮更容易识别，但是在处理速度方面，C方案的确效率不佳。据称，使用B方案时，一部分用户感觉到有点担心他们“也可能很容易点击了错误的按钮”。

总的来说，似乎人们更喜欢那种【取消】按钮靠边站的设计，即便这些设计会拖一点后腿。这证明用户更加关心数据的安全，而不是更快的提交。

布局

整个测试中，E方案表现的最差。有6名用户错误的点击了【取消】按钮，而更多的人则在按钮前徘徊，直到他们发现差点犯错为止。整体上看，使用E方案的用户比B方案的平均慢了6秒（当认为按钮的布局是两种方案唯一的不同时，这个6秒的差距还是相当大的）。完成任务需要作出的注视也大大高于平均值（高于平均注视总时长平和均注视时长）。

根据我们收集的数据显示，A、B、C方案是最有效的三个。这三个原型有着一个共同特点：【提交】【取消】按钮全部放置在页面左侧。这说明这两个操作的最佳设计选择是左对齐－特别当表单控件也同样左对齐时。把这两个按钮放在左侧也使得用户眼睛移动的距离最少。

从眼动的情况来说，F方案效率最差。虽然所有的用户都成功的完成了任务，但我们的眼动跟踪设备数据还是证明了其他方案更加高效。使用F方案时，用户的注视时间最久，相对于其他方案来说，他们注视的也更加频繁了。我们认为这是由于用户本来以为按钮会在左侧（比如直接显示在表单最后一个控件下方），结果却发现并非如此，不仅这样，他们还得到处搜索去寻找按钮。

这一发现很好的符合了一个表单设计方面的长久以来的原则：引导用户正确完成。按一个明显的垂直方向排列输入框和动作按钮，可以清晰的告诉用户如何按顺序完成表单。这一点，可以从下面的热区图中看到：用户的注视路径形成了非常显著的垂直形状。

（注意：心理预期因素可能影响了测试结果。因为在我们测试的所有方案中，【提交】按钮都是摆在【取消】按钮左侧的。）

总结

虽然，大部分网页表单的设计目标都是让用户能够快速准确的完成表单，但是在某种情况下的确有必要减慢用户的速度。需要帮助用户对主、次要动作进行选择的时候，视觉上的区分会是一个有效途径。

这种区分应做到何种程度？象A方案一样做成按钮vs链接，还是象C方案一样仅改变不同的颜色？A方案在完成时间、平均注视量和平均注视总时长方面更优，这表面用户完成的更快，但并没有快很多。

当然，如果没有次要动作的时候，这种区分显然是多余的。应当确定你是否有必要在表单中放置次要动作，并且不要乱用一气。把动作按钮与表单的输入域对齐，可以给用户照亮前进的路途，帮助他们更快的完成表单。要记住，直接把主要动作按钮与输入域对齐能够提高工作效率并且减少耗费的时间，用户也将更加开心。

表单按钮 - UCD大社区

Icon设计几个要点

互联网表单设计之额外输入（4）循序渐进

互联网表单设计-第四章 标签(3) 右对齐标签

设计评论表单

互联网表单设计 - 第二章 表单组织 (4)

互联网表单设计 - 第二章 表单组织(3)

互联网表单设计 - 第一章 表单设计(3)

互联网表单设计 - 第一章 表单设计

第一章 表单设计

表单设计重要性

什么时候需要有“取消”按钮？

互联网表单设计 — 常见问题

网络表单设计为什么重要？

如何组织网络表单 —- 单页还是多页？

如果表单跨越多个网页，需要告诉用户所在页面吗？

输入框标签顶对齐，右对齐还是左对齐？

网络表单如何使用智能默认？

表单何时使用帮助文字？

如何表示必填项？

主动作和次动作有什么区别？

单线流程(2) - 流程中KEY

单线流程

你们的资料不准确

按钮的反馈

最小化按钮

从”发布”button看主要与次要行为设计

表单设计的最佳体验

奇怪的关闭按钮

谷歌用户资料修改的一些问题

网页表单中的主、次要动作

网页表单中的主、次要动作

主要动作与次要动作

视觉差异

总结

互联网表单设计-第四章标签(3) 右对齐标签

互联网表单设计 - 第二章表单组织 (4)

互联网表单设计 - 第二章表单组织(3)

互联网表单设计 - 第一章表单设计(3)

互联网表单设计 - 第一章表单设计

第一章表单设计