移动应用 从想法到卓越设计 ctrip 2014
DESCRIPTION
1.靠谱的移动应用的想法 2.NUI、目标用户和用户目标 3.功能肥大症 4.移动应用的导航结构 5.移动应用的动画设计 by Jason Bao 包季真TRANSCRIPT
![Page 1: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/1.jpg)
指尖上的设计 从Idea到卓越应用包季真 2014.6
![Page 2: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/2.jpg)
移动互联⺴⽹网 从Idea到卓越应⽤用
包季真 2014.6
![Page 3: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/3.jpg)
包季真 !
《触动⼈人⼼心》译者
![Page 4: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/4.jpg)
包季真 !
脉可寻产品总监 曾供于职⼤大众点评、淘宝
![Page 5: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/5.jpg)
Workshop #1
• 组队 • 互相认识⼀一下 • 选出队⻓长 • 队⻓长陈述队员都是做哪款应⽤用的 • 15”
![Page 6: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/6.jpg)
Chapter 1 Idea
![Page 7: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/7.jpg)
随时在线
![Page 8: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/8.jpg)
感应器
![Page 9: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/9.jpg)
1.定位
![Page 10: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/10.jpg)
![Page 11: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/11.jpg)
![Page 12: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/12.jpg)
![Page 13: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/13.jpg)
2.⻨麦克⻛风
![Page 14: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/14.jpg)
![Page 15: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/15.jpg)
![Page 16: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/16.jpg)
唱吧
SoundCurtain
Square
![Page 17: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/17.jpg)
3.摄像头
![Page 18: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/18.jpg)
⼼心跳和脉搏监测仪软件
微信街景
脉可寻
![Page 19: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/19.jpg)
4.加速度/陀螺仪
![Page 20: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/20.jpg)
S.M.T.H.
摇⼀一摇
赛⻋车游戏
![Page 21: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/21.jpg)
5.近场
![Page 22: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/22.jpg)
![Page 23: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/23.jpg)
6.云
![Page 24: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/24.jpg)
• ⽆无限存储 • ⽆无限运算能⼒力 • ⽆无限续航能⼒力
![Page 25: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/25.jpg)
脉可寻 2.0 唤醒沉睡⼈人脉
![Page 26: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/26.jpg)
7.物联⺴⽹网
![Page 27: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/27.jpg)
链接⼿手机
![Page 28: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/28.jpg)
Nest
![Page 29: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/29.jpg)
CubeSensors
![Page 30: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/30.jpg)
Nike +
![Page 31: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/31.jpg)
Ugle
![Page 32: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/32.jpg)
增强物件
![Page 33: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/33.jpg)
天⽓气预报伞
![Page 34: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/34.jpg)
CalypsoKey
![Page 35: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/35.jpg)
LG G
![Page 36: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/36.jpg)
新⾏行为新习惯
![Page 37: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/37.jpg)
![Page 38: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/38.jpg)
![Page 39: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/39.jpg)
Little Printer
![Page 40: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/40.jpg)
要⽤用、常⽤用、会⽤用
![Page 41: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/41.jpg)
![Page 42: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/42.jpg)
![Page 43: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/43.jpg)
![Page 44: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/44.jpg)
![Page 45: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/45.jpg)
![Page 46: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/46.jpg)
![Page 47: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/47.jpg)
![Page 48: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/48.jpg)
你的Idea?
• 随时在线 • 感应器 • 云计算 • 物联⺴⽹网 • 要⽤用、常⽤用、会⽤用
![Page 49: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/49.jpg)
Workshop #2
• 你们的Idea?
• 15”
![Page 50: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/50.jpg)
Chapter 2 NUI
⺫⽬目标⽤用户.⽤用户⺫⽬目标
![Page 51: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/51.jpg)
![Page 52: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/52.jpg)
个⼈人计算机
![Page 53: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/53.jpg)
![Page 54: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/54.jpg)
WPS
![Page 55: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/55.jpg)
CLICommand-Line Interface
![Page 56: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/56.jpg)
键盘
![Page 57: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/57.jpg)
GUIGraphic User Interface
![Page 58: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/58.jpg)
图标、滚动条、按钮
![Page 59: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/59.jpg)
⿏鼠标
![Page 60: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/60.jpg)
![Page 61: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/61.jpg)
NUINatural User Interface
![Page 62: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/62.jpg)
⼿手指
![Page 63: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/63.jpg)
![Page 64: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/64.jpg)
![Page 65: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/65.jpg)
![Page 66: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/66.jpg)
Magic Trackpad
![Page 67: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/67.jpg)
![Page 68: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/68.jpg)
![Page 69: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/69.jpg)
![Page 70: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/70.jpg)
![Page 71: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/71.jpg)
![Page 72: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/72.jpg)
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
⽤用户界⾯面
输⼊入设备
键盘 ⿏鼠标 ⼿手指
![Page 73: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/73.jpg)
Text TouchGraphical
User Interface
Keyboard FingersMouse
Input Device
Content Creation Content ConsumptionCommunication
Device Usage
User Interface + Device Usage Evolution Over Past 30 Years
19
⽤用户界⾯面
输⼊入设备
⽤用户
![Page 74: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/74.jpg)
设计师能做
![Page 75: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/75.jpg)
![Page 76: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/76.jpg)
新记者群体
![Page 77: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/77.jpg)
![Page 78: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/78.jpg)
Cat Toy
新⽤用户群体
![Page 79: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/79.jpg)
为⽤用户设计⽽而不是专家
![Page 80: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/80.jpg)
⽤用户?
![Page 81: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/81.jpg)
每⽉月下载10款应⽤用。
很少能打开20次。
1/3不过⼀一周。
![Page 82: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/82.jpg)
< 1 周/次
![Page 83: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/83.jpg)
![Page 84: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/84.jpg)
您不是您的⽤用户
![Page 85: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/85.jpg)
![Page 86: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/86.jpg)
从⽤用户出发,绕开固有观念
![Page 87: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/87.jpg)
⺫⽬目标⽤用户与⽤用户⺫⽬目标
• CLI
• GUI
• NUI
• 为⽤用户设计⽽而不是专家设计 • “您不是您的⽤用户”
![Page 88: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/88.jpg)
Workshop #3
• ⽤用户如何使⽤用你们的应⽤用? • 他们在什么样的环境下使⽤用你们的应⽤用?
• 15“
![Page 89: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/89.jpg)
Workshop #4
• 头脑⻛风暴 • 说出你所有的想法。
• 20“
![Page 90: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/90.jpg)
Chapter 3 功能肥⼤大症
![Page 91: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/91.jpg)
⼤大屏幕(有时还不⽌止⼀一个),⽆无干扰,环境舒适,99.99%的时间在线,光纤⼊入户,1000MB有线⺴⽹网络,百兆⽆无线⺴⽹网络,⼏几乎没有流量费⽤用,有键盘输⼊入,还有像素级精确度的⿏鼠标,⼏几乎没有电源和存储空间
的顾虑。
![Page 92: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/92.jpg)
被溺爱的PC
![Page 93: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/93.jpg)
近1000个链接
![Page 94: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/94.jpg)
![Page 95: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/95.jpg)
![Page 96: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/96.jpg)
700+个链接
![Page 97: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/97.jpg)
![Page 98: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/98.jpg)
![Page 99: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/99.jpg)
![Page 100: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/100.jpg)
![Page 101: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/101.jpg)
Less is more
![Page 102: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/102.jpg)
![Page 103: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/103.jpg)
![Page 104: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/104.jpg)
尽快搞定
移动环境使用户不能集中精神,用户在这样的环境中使用iPhone,使用的
过程会被切成一段一段的,见缝插针于其他活动中。当一个朋友邀你周六
去溜旱冰的时候,你停下话语,将相约好的地点输入到日历中,然后立刻
继续交谈。当你正在邮局排号,叫到号之前的几分钟,你查了查邮件,看
了看Twitter,还有你喜欢的网站。就是这样开开关关。
优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样:
……但用户其实想的是这样:
第1章:一切从点击开始8
功能设计师
![Page 105: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/105.jpg)
尽快搞定
移动环境使用户不能集中精神,用户在这样的环境中使用iPhone,使用的
过程会被切成一段一段的,见缝插针于其他活动中。当一个朋友邀你周六
去溜旱冰的时候,你停下话语,将相约好的地点输入到日历中,然后立刻
继续交谈。当你正在邮局排号,叫到号之前的几分钟,你查了查邮件,看
了看Twitter,还有你喜欢的网站。就是这样开开关关。
优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样:
……但用户其实想的是这样:
第1章:一切从点击开始8
产品设计师
![Page 106: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/106.jpg)
⼤大部分功能是可以砍掉的
• 点评:>80%的⼈人使⽤用附近。
![Page 107: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/107.jpg)
⼤大部分功能是可以砍掉的
• 你的应⽤用中有什么功能是没⼈人使⽤用的?
![Page 108: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/108.jpg)
使⽤用感应器, 考虑场景下的⽤用户⺫⽬目标, 提供合适的内容
![Page 109: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/109.jpg)
![Page 110: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/110.jpg)
![Page 111: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/111.jpg)
![Page 112: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/112.jpg)
![Page 113: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/113.jpg)
功能肥⼤大症
• 被溺爱的PC
• ⼤大部分功能是可以砍掉的 • 考虑场景下的⽤用户⺫⽬目标,提供合适内容
![Page 114: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/114.jpg)
Workshop #5
• 围绕场景,找到最重要的功能。 • 10“
![Page 115: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/115.jpg)
成本低成本⾼高
收益⾼高
收益低
![Page 116: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/116.jpg)
Workshop #6
• 定位你的每个功能点 • 15“
![Page 117: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/117.jpg)
成本低成本⾼高
收益⾼高
收益低
保持成本 低⻛风险
最求收益 ⾼高⻛风险
![Page 118: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/118.jpg)
Chapter 4 导航
![Page 119: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/119.jpg)
多任务、层叠窗⼝口
![Page 120: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/120.jpg)
单任务、平铺
![Page 121: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/121.jpg)
导航结构
• 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard
• 抽屉式导航
![Page 122: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/122.jpg)
平铺⻚页⾯面 导航
![Page 123: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/123.jpg)
![Page 124: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/124.jpg)
![Page 125: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/125.jpg)
• +
• 简单、重复且平等的⻚页⾯面 • 占⽤用空间少;
• -
• ⽆无法快速进⾏行跳转翻⻚页; • ⼀一般 < 5个⻚页⾯面; • ⼀一般不适⽤用滚屏。
![Page 126: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/126.jpg)
层级列表导航
![Page 127: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/127.jpg)
![Page 128: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/128.jpg)
![Page 129: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/129.jpg)
• +
• 平等的、⼤大量的类别、功能; • 直接对内容进⾏行交互,占⽤用屏幕空间⼩小; • 适合⽤用户⾃自定义分类;
• -
• ⼿手机上的⾯面包屑只有上级; • 切换主要分类、功能⽐比较⿇麻烦; • 主功能只有在⾸首屏才会显⽰示。
![Page 130: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/130.jpg)
标签⻚页 导航
![Page 131: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/131.jpg)
• +
• 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置;
• -
• ⾄至多5个标签; • 占⽤用屏幕空间。
![Page 132: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/132.jpg)
Springboard 导航
![Page 133: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/133.jpg)
• +
• 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置;
• -
• ⾄至多5个标签; • 占⽤用屏幕空间。
![Page 134: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/134.jpg)
![Page 135: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/135.jpg)
• +
• 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置;
• -
• ⾄至多5个标签; • 占⽤用屏幕空间。
![Page 136: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/136.jpg)
导航结构
• 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard
• 抽屉式导航
![Page 137: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/137.jpg)
Workshop #7
• 你的应⽤用该使⽤用什么样的导航? • 5“
![Page 138: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/138.jpg)
Chapter 5 动画
![Page 139: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/139.jpg)
动画的作⽤用
• 状态变更 • 吸引注意 • 创造空间 • 拟物
![Page 140: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/140.jpg)
状态、内容变更(转场)
![Page 141: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/141.jpg)
![Page 142: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/142.jpg)
![Page 143: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/143.jpg)
![Page 144: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/144.jpg)
![Page 145: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/145.jpg)
![Page 146: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/146.jpg)
吸引注意
![Page 147: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/147.jpg)
![Page 148: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/148.jpg)
![Page 149: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/149.jpg)
创造空间感
![Page 150: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/150.jpg)
![Page 151: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/151.jpg)
![Page 152: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/152.jpg)
拟物
![Page 153: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/153.jpg)
![Page 154: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/154.jpg)
不快、不慢、不多
• 全屏性质的切换 150ms ~ 350ms
• 保持⼀一致性 • 时⻓长 • 动画⽅方式 • 与系统保持⼀一致
![Page 155: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/155.jpg)
视觉线
![Page 156: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/156.jpg)
视觉线
![Page 157: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/157.jpg)
动画
• 动画的作⽤用 • 不快、不慢、不多 • 视觉线
![Page 158: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/158.jpg)
总结
• Idea
• NUI - ⺫⽬目标⽤用户与⽤用户⺫⽬目标
• 功能肥⼤大症 • 导航 • 动画
![Page 159: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/159.jpg)
渐变
![Page 160: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/160.jpg)
移动
![Page 161: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/161.jpg)
![Page 162: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/162.jpg)
传统的线性移动(Linear)
![Page 163: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/163.jpg)
平滑移动(Ease In Out)
![Page 164: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/164.jpg)
弹跳(Bounce)
![Page 165: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/165.jpg)
⽪皮筋(Elastic)
![Page 166: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/166.jpg)
![Page 167: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/167.jpg)
![Page 168: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/168.jpg)
缩放
![Page 169: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/169.jpg)
![Page 170: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/170.jpg)
![Page 171: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/171.jpg)
Q&A“我所说的都是错的。”
— 张⼩小⻰龙
![Page 172: 移动应用 从想法到卓越设计 Ctrip 2014](https://reader038.vdocuments.pub/reader038/viewer/2022102410/55797943d8b42a5f438b47d9/html5/thumbnails/172.jpg)