• Save
表单设计
Upcoming SlideShare
Loading in...5
×
 

表单设计

on

  • 494 views

关于表单设计的一些内容

关于表单设计的一些内容

Statistics

Views

Total Views
494
Views on SlideShare
494
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

表单设计 表单设计 Presentation Transcript

  • 表单 那些事 @ICOjump 饿了么UED 13年7月3⽇日星期三
  • ico.li 编写于 2012.11 元素 帮助信息 输入反馈 输入框标签 动作 13年7月3⽇日星期三
  • 5大元素 帮助信息 输入反馈 输入框 标签 动作 这5个元素是构成表单体验的基础 13年7月3⽇日星期三
  • 1 输入框 13年7月3⽇日星期三
  • 输入框 ⽂文本输⼊入框 单选框 13年7月3⽇日星期三
  • 输入框 下拉框 ⽂文本区域 13年7月3⽇日星期三
  • 输入框 复选框 时间选择&其他更多控件 13年7月3⽇日星期三
  • 选择合适的输入框 输入框 Facebook的表单采⽤用下拉式,⽤用 户通过2次操作完成性别的选择, 虽然2步操作,但是更准确 美丽说的⺫⽬目标群体是⼥女性,默 认选中了⼥女的性别。和其定位相 符合 13年7月3⽇日星期三
  • 标签 2 13年7月3⽇日星期三
  • 顶部对齐 标签 标签是与输⼊入框紧密结合的表单构成要素。 2个的对⻬齐⽅方式决定了⽤用户在浏览表单时,视 线路径的差异,不同的对⻬齐⽅方式所导致⽤用户不 同的体验。 这个是设计师在设计时不得不考虑的问题。 现在⽐比较常⻅见的对⻬齐⽅方式主要有: 顶部对⻬齐 , 左对⻬齐,右对⻬齐,居内对⻬齐 •  易视觉扫描 •  易理解 •  综合优势明显 13年7月3⽇日星期三
  • 右对齐 标签 •  易视觉扫描 •  易理解 •  节约表单长度 •  反馈等信息易显示 •  综合优势明显 13年7月3⽇日星期三
  • 左对齐 标签 •  不易眼睛扫描 •  为陌生表单增加安全性 左对⻬齐由于标签和输⼊入框之间有⼤大段的参差 不⻬齐的区域,让⽤用户感受并不舒服。 眼动仪的结果也有⼒力的证明了这点,⽤用户视 觉的落点需要在标签和输⼊入框之间来回切 换,增加了⽤用户的认知成本。 但这个并不是完全没有⽤用处的,因为重复的 跳转,恰恰加深了标签的阅读⼒力度。 这种对⻬齐⽅方式⾮非常适合在信息较重要的表 单,增加安全性 13年7月3⽇日星期三
  • 居内对齐 标签 •  最大限度节约空间 •  时间成本低 •  支持input单一 •  无法处理复杂内容 居内对⻬齐⽅方式是近期出现频率较⾼高的对⻬齐 ⽅方式,他可以最⼤大程度的节省表单空间, ⽤用户视线也是最短的。时间成本降到最 低。 但这种对⻬齐⽅方式也有⾃自⼰己的限制,标签内 容必须容易理解,逻辑不能复杂。 否则会让⽤用户迷茫 13年7月3⽇日星期三
  • 动作 3 13年7月3⽇日星期三
  • 动作 表单⺫⽬目的: 获取⽤用户信息 表单的⺫⽬目的是为了获取⽤用户信 息,动作负责完成这⼀一最终⺫⽬目 的。 表单中的最后⼀一关 13年7月3⽇日星期三
  • 一个好的动作 快速 高效 准确 13年7月3⽇日星期三
  • 快速  准确  高效 通常动作和输⼊入框左对⻬齐后,视线更顺畅 完成表单时间相对更少 13年7月3⽇日星期三
  • 快速  准确  高效 在微博中,右侧的动作更符合⽤用户⼼心智 13年7月3⽇日星期三
  • 快速  准确  高效 主要动作 次要动作 13年7月3⽇日星期三
  • 快速  准确  高效 减少⽤用户潜在的出错率,需要对 主动作 和 次动作 进⾏行视觉的差 异区分。 主要动作 次要动作 13年7月3⽇日星期三
  • 快速  准确  高效 在表单使⽤用频率很⾼高的情况下,动作的⾼高效 更为重要,主次动作区分明显,可以让⽤用户 短时间内完成表单动作。 Amazon Google Offer 主 次 主 次 13年7月3⽇日星期三
  • 帮助 4 为了帮助⽤用户完成表单,提⾼高 体验,在表单中会结合实际输 ⼊入框或场景给予⽤用户适当的帮助 信息。 帮助信息分2类:静态帮助和动 态帮助信息 13年7月3⽇日星期三
  • 静态帮助 根据⼀一些眼动仪的测量数据,⼤大多数⼈人填 写表单的时候会直接跳到第⼀一⾏行输⼊入框这 ⾥里。⽤用户有⼀一种⼀一开始就填写表单的倾 向,忽略帮助信息 所以静态帮助的使⽤用需要好好规划 •  优点:  简单,一目了然 •  缺点:  可读性不强,容易被忽略 13年7月3⽇日星期三
  • 动态帮助 动态帮助会利⽤用⼀一些视 觉元素与⽤用户产⽣生互 动,吸引⽤用户 •  优点:    信息可读性强,关注度高 •  缺点:    只有在填表或者触发时才出现 13年7月3⽇日星期三
  • 输入反馈 5 输⼊入反馈与动态帮助信息本质 的区别在与触发响应时间的不 同,前者发⽣生在输⼊入时,后者发 ⽣生在输⼊入内容后。 通常分成功和失败 13年7月3⽇日星期三
  • 输入反馈 动态 帮助 输⼊入 反馈 验证 or 提交 13年7月3⽇日星期三
  • 成功&失败反馈 输⼊入反馈,按内容分通常 有2类,成功和失败类型 成功反馈 失败反馈 成功可以引导⽤用户进⼊入 下⼀一步 失败通常是因为输⼊入了不符合表单或要求 的内容。应当及时告诉⽤用户如何修复及正 确的操作⽅方法 13年7月3⽇日星期三
  • 你的名字很酷 你取的名字很热门,已经被抢掉了 用户名可以使用,等会你也可以修改他 ...... 情感 13年7月3⽇日星期三
  • 表单的目的是获取用户信息,但过程不是单方面的索取,这样的表单是用户不愿意 填写甚至可能放弃的。好的表单是在和用户平等交流,我们把表单设计的粗暴难于 操作,是因为我们把表单变成了一个简单的信息收集器,而不是交流。 情感 单方面索取 信息收集器 平等交流 13年7月3⽇日星期三
  • 1.6  文案 蘑菇街 当昵称被抢注后,各大网站给的提示 大众点评 美丽说 新浪微博 情感 13年7月3⽇日星期三
  • 简洁表单 忘记表单 设计 13年7月3⽇日星期三
  • 『淘宝对100个著名注册表单统计分析』 38% 62% 选填项 没有选填项 少于5个选填项 12% 34% 54% 必填项 5个输入框 6-8个输入框 超过9个输入框 简洁表单 13年7月3⽇日星期三
  • 1.7.1  简洁表单 表单信息简化是的一个愈发重要的趋势 Keep  保留 Cut  砍 Explain  解释 Postpone  延时 简洁表单 13年7月3⽇日星期三
  • 让用户忘记自己在填表单 弱化形式,忘记表单 简洁自然 保留功能 不强主题 画面融合整体感强 忘记表单 13年7月3⽇日星期三
  • 理解表单,知道每个元素的作用 表单是传递信息的桥梁,我们需要进行平等的交 流,而不是把用户当成信息收集的工具 表单设计制作的KCEP(保留,砍,解释,延时) 表单设计的关键点 13年7月3⽇日星期三
  • 谢谢 @ICOjump http://icojump.in http://jumpui.com 交互案例分享站 13年7月3⽇日星期三