移动互联⺴⽹网 从Idea到卓越应⽤用

包季真 2013.10

包季真 !

《触动⼈人⼼心》译者

包季真 !

脉可寻产品总监 曾供于职⼤大众点评、淘宝、Diigo

Workshop #1

• 组队 • 互相认识⼀一下 • 选出队⻓长 • 队⻓长陈述队员都是做哪款应⽤用的 • 15”

Idea

1.随时在线

2.感应器

1.定位

2.⻨麦克⻛风

3.摄像头

4.加速度/陀螺仪

摇⼀一摇

赛⻋车游戏

S.M.T.H.

3.考虑多个设备

回归PC

vs.

穿戴设备

4.要⽤用、常⽤用、会⽤用

Idea

• 随时在线 • 感应器 • 考虑其他设备 • 要⽤用、常⽤用、会⽤用

Workshop #2

• 你们的Idea？

• 15”

个⼈人计算机

CLICommand-Line Interface

键盘

GUIGraphic User Interface

图标、滚动条、按钮

NUINatural User Interface

⼿手指

Text TouchGraphical

User Interface

Keyboard FingersMouse

Input Device

Content Creation Content ConsumptionCommunication

Device Usage

User Interface + Device Usage Evolution Over Past 30 Years

19

CLI GUI NUI

⽤用户界⾯面

输⼊入设备

键盘 ⿏鼠标 ⼿手指

Text TouchGraphical

User Interface

Keyboard FingersMouse

Input Device

Content Creation Content ConsumptionCommunication

Device Usage

User Interface + Device Usage Evolution Over Past 30 Years

19

⽤用户界⾯面

输⼊入设备

⽤用户

新设计师群体

新记者群体

Cat Toy

为⽤用户设计⽽而不是专家

⽤用户？

每⽉月下载10款应⽤用。

很少能打开20次。

1/3不过⼀一周。

< 1 周/次

您不是您的⽤用户

Workshop #3

• ⽤用户如何使⽤用你们的应⽤用？ • 他们在什么样的环境下使⽤用你们的应⽤用？

• 15“

Workshop #4

• 头脑⻛风暴 • 说出你所有的想法。

• 20“

Nothing is impossible, the word itself says

“I’m possible”

Less is more

尽快搞定

移动环境使用户不能集中精神，用户在这样的环境中使用iPhone，使用的

过程会被切成一段一段的，见缝插针于其他活动中。当一个朋友邀你周六

去溜旱冰的时候，你停下话语，将相约好的地点输入到日历中，然后立刻

继续交谈。当你正在邮局排号，叫到号之前的几分钟，你查了查邮件，看

了看Twitter，还有你喜欢的网站。就是这样开开关关。

优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效

你准备搞个控制飞机的应用。

你搞出来的可能是这样：

……但用户其实想的是这样：

第1章：一切从点击开始8

尽快搞定

移动环境使用户不能集中精神，用户在这样的环境中使用iPhone，使用的

过程会被切成一段一段的，见缝插针于其他活动中。当一个朋友邀你周六

去溜旱冰的时候，你停下话语，将相约好的地点输入到日历中，然后立刻

继续交谈。当你正在邮局排号，叫到号之前的几分钟，你查了查邮件，看

了看Twitter，还有你喜欢的网站。就是这样开开关关。

优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效

你准备搞个控制飞机的应用。

你搞出来的可能是这样：

……但用户其实想的是这样：

第1章：一切从点击开始8

⼤大部分功能是可以砍掉的

• 点评：>80%的⼈人使⽤用附近。

• 你家应⽤用中有什么功能是没⼈人使⽤用的？

成本低成本⾼高

收益⾼高

收益低

Workshop #5

• 定位你的每个功能点 • 15“

成本低成本⾼高

收益⾼高

收益低

保持成本 低⻛风险

追求收益 ⾼高⻛风险

导航

多任务、层叠窗⼝口

单任务、平铺

导航结构

1.平铺⻚页⾯面 导航

• +

• 简单、重复且平等的⻚页⾯面 • 占⽤用空间少；

• -

• ⽆无法快速进⾏行跳转翻⻚页； • ⼀一般 < 5个⻚页⾯面； • ⼀一般不适⽤用滚屏。

2.层级列表导航

• +

• 平等的、⼤大量的类别、功能； • 直接对内容进⾏行交互，占⽤用屏幕空间⼩小； • 适合⽤用户⾃自定义分类；

• -

• ⼿手机上的⾯面包屑只有上级； • 切换主要分类、功能⽐比较⿇麻烦； • 主功能只有在⾸首屏才会显⽰示。

3.标签⻚页 导航

• +

• 展⽰示主要功能 • 快速访问主要功能； • 指⽰示当前位置；

• -

• ⾄至多5个标签； • 占⽤用屏幕空间。

4.Springboard 导航

• +

• 展⽰示主要功能 • 快速访问主要功能； • 指⽰示当前位置；

• -

• ⾄至多5个标签； • 占⽤用屏幕空间。

5.抽屉式导航

• +

• 展⽰示主要功能 • 快速访问主要功能； • 指⽰示当前位置；

• -

• ⾄至多5个标签； • 占⽤用屏幕空间。

导航结构

• 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard

• 抽屉式导航

Workshop #6

• 你的应⽤用该使⽤用什么样的导航？ • 5“

动画

• 动画的作⽤用 • 动画设计

动画的作⽤用

1.状态、内容变更

这是⽂文字

这是也⽂文字

这是⽂文字

这是也⽂文字

2.吸引注意

3.创造空间感

4.拟物

三种动画利器

• 渐变 • 移动 • 缩放

渐变

移动

传统的线性移动(Linear)

平滑移动(Ease In Out)

弹跳(Bounce)

⽪皮筋(Elastic)

缩放

不快、不慢、不多

• 全屏性质的切换 150ms ~ 350ms

• 保持⼀一致性 • 时⻓长 • 动画⽅方式 • 与系统保持⼀一致

三种动画利器

• 渐变 • 移动 • 缩放

Q A“我所说的都是错的。”

— 张⼩小⻰龙