为移动端特性而设计

夏文超

用户研究员 交互设计师 交互设计师

移动端产品的特性是什么？

移动端特性

Nokia,  A comparison between laboratory and field testing, 2005

绕着桌子做可用性测试

手机电视用户研究 , 2006

移动端特性研究数据如何成设计信息？

移动端特性环境是塑造信息的模具

手机电视用户研究 , 2006

移动端特性

Google mobile traffic pattern 2011

碎片化的行为不是桌面端的缩小版

移动端产品的特性是什么？

为触按而设计信息有效传递最小的输入，最少点击

设计移动端产品要注意什么？

不同目标尺寸对出错率的影响 http://bit.ly/yJ3N2d

44 Points

44 Points

为触按而设计注意可按大小

为触按而设计注意可按大小

为触按而设计单手操作范围

http://bit.ly/yJ3N2d

为触按而设计如何增加点击区域

滑动手势 增大相应区域

信息有效传递导航信息和理解信息

信息有效传递 – 导航信息

工具型 直击内容 综合体

信息有效传递 – 导航信息

全景 中心枢纽

信息有效传递 – 导航信息暗示主流程

主流程被信息和物理尺寸干扰

3:2

16:9

信息有效传递 – 导航信息暗示主流程

3:2

16:9

信息有效传递 – 导航信息暗示主流程

该收紧的空间要收紧

重要信息不要隐藏

与主流程的控件混用造成主流程不清晰

3:2

16:9

信息有效传递 – 理解信息

为什么卡片形态的设计那么流行？

信息有效传递 – 理解信息为什么卡片形态的设计那么流行？

信息有效传递 – 理解信息信息要整齐，层次，留白

分辨关键信息3+-2

图片尺寸

阅读 - 理解的成本

信息有效传递 – 理解信息信息要整齐，层次，留白

最小输入最少点击是否有必要打字

最小输入最少点击如要打字，打有必要的字

是否需要记住我

是否要遮住密码

《 Mobile First 》 Luke W ， 2011

最小输入最少点击如要打字，打有必要的字

合适的默认值

控件要高效必选项不要有 *

选填放一起

操作外置就外置

最小输入最少点击可预期的联动

出错后自己定位

自动键盘

请填写联系人

最小输入最少点击可预期的联动

最小输入最少点击可预期的联动

Q&A