web表单设计.pptVIP

WEB表单设计 表单概述 用户不喜欢提交表单。然我们的目的是让用户愿意提交表单。 无论是使用社交网站，还是电子商务网络购物，都离不开表单。电子商务网站常会遇到用户在付款的最后一步放弃购买商品，也就是常说的“购物车丢弃”。面对网络上越来越多的注册、登录信息的输入，用户常常因为厌烦填表，而放弃对网站的使用。 如果想最大化你的服务所带来的效益，你就必须最大化你网站表单的成功率。 表单设计虽然看似简单，却是“见证”用户体验“功力”的地方。 目录 表单的用途 表单的布局 标签对齐 帮助，支持，操作提示的位置 错误信息的设计 表单按钮的使用 注册完成后的提示 总结 表单的用途与要素 总体来说，Web表单主宰着结算、注册和数据输入 表单三要素：标题、数据、动作。它们是组成表单的基本元素 表单布局 表单的页面设计应尽可能的简洁。去掉不必要的因素，减少对用户的干扰。使用“最小化”的布局来构建注册表单。根据调查，61%的web表单和普遍的页面相比更简单 表单布局 去掉与表单填写无直接关系的界面元素，有助于保持人们完成任务，并消除放弃路径。 表单布局 表单布局 表单的排列，有垂直排列与水平排列。 表单布局 表单的排列，有垂直排列与水平排列。 标签对齐 标签与输入框垂直对齐 标签对齐 标签与输入框水平对齐 标签对齐 标签右对齐 标签对齐 借助可视化元素 标签对齐 借助可视化元素 标签对齐 总结 帮助，支持，操作提示的位置 当在为用户提供帮助时，一定要确定帮助是简单地提示，并且可以方便地被找到和理解。这是确保用户通过帮助提示不犯错误地完成表单的决定性因素。为了达到这个目标，我们需要知道用户希望这些帮助在什么地方出现。 错误信息的设计 14%的表单仍旧使用Javascript错误窗口来传达问题 错误信息的设计 通常设计师试图报告错误的使用方法。 a、在点击提交按钮之后显示错误信息； b、在视觉上高光“不正确”的输入框； c、在输入框右侧即时显示错误信息。 错误信息的设计 有时候设计师合并两种技术并且利用输入区域高光错误信息的方法。 表单按钮的使用 考虑到表单的样式，把提交按钮左对齐、右对齐或者放在中间是有实际意义的。有56%的设计师把提交按钮左对齐，第二位是26%的把按钮居中对齐。 右对齐的提交按钮依然比较流行（17%），但是一般都是起到需要进行下一步操作时的指示作用。在这些情况中提交按钮经常是以“继续”或者“下一步”为标题的。理由是：通常桌面软件中的“下一步”按钮就是放在右侧的。 表单按钮的使用 一个表单的主要操作（通常是“提交”或“保存”）需要一个比较强的视觉比重（在上面的例子里用了亮色调、粗字体、背景色等等）。这相当于给用户一个提示：您已/即将完成填写表单。 当一个表单有多个操作，比如“取消”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。 表单按钮的使用 当我们在思考设计表单时一些认为会碰到的问题时，我们期望注册表单没有取消按钮，因为毕竟所有选项都已经填写好了，对于用户来讲就没有太大的意义去退出这个表单。然而我们在一定程度上错了。 注册完成后的提示 通常，红色被用于标示错误。当表单完成时，和使用黄色来表示遇到的问题。 注册完成后的提示 如果有任意一种色彩来表示注册成功的话，它应该就是绿色，97%的网站表示成功的视觉就是用绿色的。 国内网站注册表单分析 国内网站注册表单分析 国内网站注册表单分析 国内网站注册表单分析 国内网站注册表单分析 总结 93%的注册表单是单页表单。 41%的注册表单通过解释注册的优势来吸引用户注册。 62%的输入框标题是通过加粗高亮的。 设计师试图不用必填项和可选项。 86%的注册表单更喜欢用垂直布局的表单。 注册表单没有任何hover,active或者focus的特效（84%）。 提示和帮助不管是静态（57%）或者动态（33%）都是出现在输入框下方（57%）或者右侧(26%)。 82%不需要email确认 72%需要密码确认 校验码可用（48%）可不用（52%） 92%不用取消按钮 提交按钮是左对齐（56%）或者居中对齐（26%）  * 垂直无阻碍延伸的垂直布局区域是注册表单表现出强大趋势。86%的网站把输入框垂直布局。除此以外，15%的布局更强调利用漂亮且吸引人的视觉设计来让访问者在填写表单时感到更舒适。 当用户输入数据的时候，他们的眼睛固定在纵轴输入框左侧的交叉点上。 一个横向布局的注册表单。当用户输入数据的时候，他们的眼睛需要跳来跳出。 考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的（比如姓名、地址、付费信息等），垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两