包季真 - 移动应用从想法到卓越设计 IxDC 2013

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

包季真 2013.10

包季真 !

《触动⼈人⼼心》译者

包季真 !

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

Workshop #1

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

1.随时在线

2.感应器

1.定位

2.⻨麦克⻛风

3.摄像头

4.加速度/陀螺仪

摇⼀一摇

赛⻋车游戏

S.M.T.H.

3.考虑多个设备

回归PC

穿戴设备

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

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

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

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

成本低成本⾼高

收益⾼高

收益低

Workshop #5

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

成本低成本⾼高

收益⾼高

收益低

保持成本低⻛风险

追求收益⾼高⻛风险

导航

多任务、层叠窗⼝口

单任务、平铺

导航结构

1.平铺⻚页⾯面导航

• +

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

• -

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

2.层级列表导航

• +

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

• -

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

3.标签⻚页导航

• +

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

• -

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

4.Springboard 导航

• +


• -


5.抽屉式导航

• +


• -


导航结构

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

• 抽屉式导航

Workshop #6

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

动画

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

动画的作⽤用

1.状态、内容变更

这是⽂文字

这是也⽂文字

这是⽂文字

这是也⽂文字

2.吸引注意

3.创造空间感

4.拟物

三种动画利器

• 渐变 • 移动 • 缩放

渐变

移动

传统的线性移动(Linear)

平滑移动(Ease In Out)

弹跳(Bounce)

⽪皮筋(Elastic)

缩放

不快、不慢、不多

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

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

三种动画利器

• 渐变 • 移动 • 缩放

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

— 张⼩小⻰龙

包季真 - 移动应用从想法到卓越设计 IxDC 2013

Design

Transcript of 包季真 - 移动应用从想法到卓越设计 IxDC 2013