网页中的表单设计.pptVIP

Don’t make users abandon  in the first step! ——谈谈网页中的表单设计 表单的目的为何？ 对于用户来说：意味可以参与其中 对于商业来说：增加用户数量，并且增进联系 表单设计原则 1 表格布局 2 使用视觉要素 3 首要次要行为 《Web Form Design：Filling In the Blanks》一书中写到：研究发现：眼球跟踪仪成像热点地图主要位于左侧。 表格布局 1 标签放在上面 2 标签放在左侧 左对齐 1 右对齐 2 优点： 在标签与输入框相邻， 用户快速进行填表。 缺点： 在于增加垂直空间。 标签在上面 标签放在左侧 优点： 在标签与输入框相邻， 减小垂直空间。 缺点： 在于表格可读性降低。 右对齐 优点： 标签栏和 输入框 的关系 相对清晰。 缺点： 但降低了扫描表格相关信息的效率。 标签放在左侧 左对齐 优点： 容易扫描输入标签 减少纵向屏幕空间 缺陷 ： 输入框和相关标签看上去不连贯 使用视觉要素 增添背景色和线条 ★ 1.中线，背景还是水平线都会分散用户的线， 使他们不容易专注重要的信息：标签和输入框。 2.当你扫视左侧一栏的时候，眼睛要不断被水平线和背景色所打断。 1.细线和淡淡的背景色可以有效地区分相关 信息。 2.线条、背景色都可以强调重要性并引导用 户产生交互行为。 首要次要行为 首要行为按钮： 启发引导用户完成表单。 次要行为按钮： 减少用户发生潜在操作错误的风险， 也可以更好地导航用户完成操作。 提交 保存 返回 继续 标签的位置，可以得出以下结论： 1.为了缩短时间或用户对所需内容输入比较熟悉的时候，采用标签顶部对齐的形式 2.当垂直空间有限制时，采用标签右侧对齐方式 3.对不不熟悉的内容输入或者需要强化的进 入信息的时候，采用标签左侧对齐方式