当前位置：文档之家› 无线客户端统一登录注册设计指导原则 v1.0

无线客户端统一登录注册设计指导原则 v1.0

百度帐号体系-无线客户端

统一登录注册设计指导原则

百度移动云计算事业部移动产品部用户体验部

陈莹

版本号：1.0.1 版本

日期：2012-03-30

版本更新说明

版本号更新日期起草人修改内容备注0.1 2012-3-26 陈莹增加逻辑交互流程

0.2 2012-3-26 陈莹、李孟冉增加界面交互流程

0.3 2012-3-28 韩福红增加视觉设计元素规范化说明

0.4 2012-3-29 陈莹增加设计原则

0.5 2012-3-30 何欣修正部分内容

1.0 2012-3-30 陈莹整合内容，确定指导原则细节

1.0.1 2012-5-30 陈莹、韩福红修正用户名补填视觉效果图

制定：百度帐号体系无线客户端统一的登录注册体验设计指导原则

目标

形成：Passport方案作为指导原则的载体

建立：持续验证持续沉淀的账号体系体验设计机制及队伍

短期目标

完成Passport交互视觉设计方案

大时间规划：2012年主要产品完成改版上线

1．Passport体验设计目标

1.1 体验设计目标2．Passport设计原则

2.1 清晰的视觉纵线

2.2 极致的减法

2.3 利用选择代替输入

2.4 节约纵向空间

2.5 即时的反馈

2.6 给于适当的限制

3 ．Passport设计模式

3.1 登录

3.1.1 普通登录

3.1.2 手机登录

3.2 注册

3.2.1 方案一：有UserName注册

3.2.2 方案二：无UserName注册

3.2.3 方案三：手机注册

3.3 用户名补填

3.4 入口

3.4.1 三种入口样式4．Passport视觉方案

4.1 质感与颜色

4.2 主要界面

4.3 产品差异化设计效果举例5．Passport控件元素规范

5.1 一致性和差异化

5.2 标题栏

5.3 按钮

5.4 标签

5.5 输入框

5.6 密码显示/隐藏控件

5.7 单选按钮和提示层

5.8 验证码

5.9 进度圈

5.10 文字样式

5.11 元素间距

6 ．Passport文案规范

6.1 文案类型

6.2 登录提示文案

6.3 注册提示文案

6.4 网络提示文案7．Passport输入法调用规范

7.1 iPhone键盘类型

7.2 iPhone键盘操作

7.3 iPhone键盘工具栏

7.4 Android键盘类型8．Android平台硬件规范

8.1 Android平台硬件类型

8.2 登录Back逻辑

8.3 注册Back逻辑

9．附录

9.1 项目时间安排

9.2 后续计划

1. Passport体验设计目标

Passport体验设计目标

1.1 体验设计目标

品牌

安全

效率

品牌——建立百度品牌形象

安全——保证帐号安全

效率——登录注册时间减少，效率提升

2. Passport体验设计原则

2.1 清晰的视觉纵线

Web端是一个“F”型视线，移动端更经常是“L”型

视线

两次密码？

一次密码？点击切换暗文显示 1.预防误操作 2.减少操作步骤

2.2 极致的减法

——移动端输入成本高，尽量利用选择来代替输入，可以节约操作步骤，提高操作准确率，提升效率2.3 利用选择代替输入

用户名重叠率70%

给出用户名建议，可以快速选择

邮箱输入成本很高

给出邮箱建议，可以快速选择

帐号密码用户名/邮箱

密码

用户名/邮箱

密码

优点：

快速处理

缺点：

占用宝贵的

垂直空间

说明文字说明文字说明文字说明文字说明文字说明文字

说明文字说明文字

帐号密码说明文字说明文字

说明文字说明文字

用户名/邮箱

密码

用户名/邮箱

密码

优点：

视觉纵线

不遮挡说明

文字

缺点：

占用宝贵的

垂直空间

优点：

节约纵向空间

缺点：

横向视觉不稳

优点：

无

缺点：

元素混乱

视觉不稳优点：

视觉纵线

不遮挡说明文

字

缺点：

浪费纵向空间

输入后无法识

别框的类型

优点：

视觉纵线

节约空间

元素稳定

缺点：

输入后说明文

字不可见

2.4 节约纵向空间

2.5 纵向的校验顺序

1. 要按照表单项从上到下的顺序校验

2. 这样能保证错误提醒是可找到的，有规律可循的

帐号密码

用户名/密码

帐号密码

elya 登录

帐号密码

elya 登录

帐号密码

elya 登录

正确？

Yes

1.Twitter 和Evernote 的手机客户端已经采用了即时校验的方式来反馈问题

2.这是一个理想化的流程，但受限于网速，如果网络不好，会导致校验很慢，影响应用

流畅度，现阶段还无法支持

是否需要即时校验？

2.6 即时校验反馈

3. Passport设计模式

点击登录按钮用户名格式是

否正确？

否是

用户名用户名是否存

在？

否

密码是否正

确？

是

否

是

是提示用户“用户

名格式错误，请

重新输入”

提示用户“用户

不存在”

提示“密码错

误，请重新输

入”

登录成功

触发反作弊？

否

是

出现验证码

否

连续输错密码n次

手机客户端n=5

验证码输入是

否正确？

提示“请输入验

证码”

提示“验证码输

入错误”

是用户名还是

邮箱？

是

邮箱格式是否

正确？

否

提示用户“用户名格式错误，请重新输入”

是否有网？

否

提示“网络不

通，请稍后再

试”

邮箱是否存

在？

否

提示“用户不存

在”

是是

邮箱是否激

活？

否

提示“帐号未激

活，请查收验证

邮件”

是

邮箱是

是否有网？

否

提示“网络不

通，请稍后再

试”

3.1.1 普通登录——Task Flow

滚动区域

●当用户激活用户名输入框的时候，该输入框锚点跳转，置顶显示；用户激活密码输入框时则不做处理。

●当用户未输入用户名和密码的时候，登录按钮置灰，不可点。●Android

-Back ：退出登录

●输入密码过程，密码先显示明文，停留3秒后显示为暗码

●当用户名和密码都不为空时，登录按钮可点●滑动滚动区域不收起键盘●Android

-Back ：收起键盘，再back 退出登录●iPhone

-键盘：当焦点处于密码输入框时，键盘右下角功能键为“登录”

网络异常？

否

用户名或密码错

误？

否

●登录过程中不可以取消，界面上的帐号、密码、注册均不可点击●登录过程中收起键盘

●界面上的返回可点击，点击取消登录，回到登录前界面●Android

-Back ：取消登录，回到登录前界面

是

返回帐号密码

用户名/邮箱

普通登录手机登录

忘记密码？

返回密码

普通登录手机登录

5 帐号密码异常