Download - 包季真 - 移动应用从想法到卓越设计 IxDC 2013
![Page 1: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/1.jpg)
移动互联⺴⽹网 从Idea到卓越应⽤用
包季真 2013.10
![Page 2: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/2.jpg)
包季真 !
《触动⼈人⼼心》译者
![Page 3: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/3.jpg)
包季真 !
脉可寻产品总监 曾供于职⼤大众点评、淘宝、Diigo
![Page 4: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/4.jpg)
Workshop #1
• 组队 • 互相认识⼀一下 • 选出队⻓长 • 队⻓长陈述队员都是做哪款应⽤用的 • 15”
![Page 5: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/5.jpg)
Idea
![Page 6: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/6.jpg)
1.随时在线
![Page 7: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/7.jpg)
2.感应器
![Page 8: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/8.jpg)
1.定位
![Page 9: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/9.jpg)
![Page 10: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/10.jpg)
2.⻨麦克⻛风
![Page 11: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/11.jpg)
![Page 12: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/12.jpg)
![Page 13: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/13.jpg)
3.摄像头
![Page 14: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/14.jpg)
4.加速度/陀螺仪
![Page 15: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/15.jpg)
摇⼀一摇
赛⻋车游戏
S.M.T.H.
![Page 16: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/16.jpg)
3.考虑多个设备
![Page 17: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/17.jpg)
回归PC
![Page 18: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/18.jpg)
vs.
![Page 19: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/19.jpg)
穿戴设备
![Page 20: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/20.jpg)
![Page 21: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/21.jpg)
![Page 22: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/22.jpg)
4.要⽤用、常⽤用、会⽤用
![Page 23: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/23.jpg)
![Page 24: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/24.jpg)
![Page 25: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/25.jpg)
![Page 26: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/26.jpg)
![Page 27: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/27.jpg)
![Page 28: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/28.jpg)
Idea
• 随时在线 • 感应器 • 考虑其他设备 • 要⽤用、常⽤用、会⽤用
![Page 29: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/29.jpg)
Workshop #2
• 你们的Idea?
• 15”
![Page 30: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/30.jpg)
![Page 31: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/31.jpg)
个⼈人计算机
![Page 32: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/32.jpg)
CLICommand-Line Interface
![Page 33: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/33.jpg)
键盘
![Page 34: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/34.jpg)
![Page 35: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/35.jpg)
GUIGraphic User Interface
![Page 36: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/36.jpg)
图标、滚动条、按钮
![Page 37: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/37.jpg)
![Page 38: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/38.jpg)
NUINatural User Interface
![Page 39: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/39.jpg)
⼿手指
![Page 40: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/40.jpg)
![Page 41: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/41.jpg)
![Page 42: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/42.jpg)
![Page 43: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/43.jpg)
![Page 44: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/44.jpg)
![Page 45: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/45.jpg)
![Page 46: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/46.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 47: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/47.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 48: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/48.jpg)
新设计师群体
![Page 49: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/49.jpg)
新记者群体
![Page 50: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/50.jpg)
![Page 51: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/51.jpg)
Cat Toy
![Page 52: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/52.jpg)
为⽤用户设计⽽而不是专家
![Page 53: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/53.jpg)
⽤用户?
![Page 54: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/54.jpg)
每⽉月下载10款应⽤用。
很少能打开20次。
1/3不过⼀一周。
![Page 55: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/55.jpg)
< 1 周/次
![Page 56: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/56.jpg)
您不是您的⽤用户
![Page 57: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/57.jpg)
![Page 58: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/58.jpg)
Workshop #3
• ⽤用户如何使⽤用你们的应⽤用? • 他们在什么样的环境下使⽤用你们的应⽤用?
• 15“
![Page 59: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/59.jpg)
Workshop #4
• 头脑⻛风暴 • 说出你所有的想法。
• 20“
![Page 60: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/60.jpg)
Nothing is impossible, the word itself says
“I’m possible”
![Page 61: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/61.jpg)
![Page 62: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/62.jpg)
![Page 63: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/63.jpg)
Less is more
![Page 64: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/64.jpg)
![Page 65: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/65.jpg)
![Page 66: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/66.jpg)
![Page 67: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/67.jpg)
![Page 68: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/68.jpg)
![Page 69: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/69.jpg)
![Page 70: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/70.jpg)
尽快搞定
移动环境使用户不能集中精神,用户在这样的环境中使用iPhone,使用的
过程会被切成一段一段的,见缝插针于其他活动中。当一个朋友邀你周六
去溜旱冰的时候,你停下话语,将相约好的地点输入到日历中,然后立刻
继续交谈。当你正在邮局排号,叫到号之前的几分钟,你查了查邮件,看
了看Twitter,还有你喜欢的网站。就是这样开开关关。
优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样:
……但用户其实想的是这样:
第1章:一切从点击开始8
![Page 71: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/71.jpg)
尽快搞定
移动环境使用户不能集中精神,用户在这样的环境中使用iPhone,使用的
过程会被切成一段一段的,见缝插针于其他活动中。当一个朋友邀你周六
去溜旱冰的时候,你停下话语,将相约好的地点输入到日历中,然后立刻
继续交谈。当你正在邮局排号,叫到号之前的几分钟,你查了查邮件,看
了看Twitter,还有你喜欢的网站。就是这样开开关关。
优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样:
……但用户其实想的是这样:
第1章:一切从点击开始8
![Page 72: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/72.jpg)
⼤大部分功能是可以砍掉的
• 点评:>80%的⼈人使⽤用附近。
![Page 73: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/73.jpg)
• 你家应⽤用中有什么功能是没⼈人使⽤用的?
![Page 74: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/74.jpg)
成本低成本⾼高
收益⾼高
收益低
![Page 75: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/75.jpg)
Workshop #5
• 定位你的每个功能点 • 15“
![Page 76: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/76.jpg)
成本低成本⾼高
收益⾼高
收益低
保持成本 低⻛风险
追求收益 ⾼高⻛风险
![Page 77: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/77.jpg)
导航
![Page 78: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/78.jpg)
![Page 79: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/79.jpg)
多任务、层叠窗⼝口
![Page 80: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/80.jpg)
单任务、平铺
![Page 81: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/81.jpg)
导航结构
![Page 82: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/82.jpg)
1.平铺⻚页⾯面 导航
![Page 83: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/83.jpg)
![Page 84: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/84.jpg)
![Page 85: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/85.jpg)
• +
• 简单、重复且平等的⻚页⾯面 • 占⽤用空间少;
• -
• ⽆无法快速进⾏行跳转翻⻚页; • ⼀一般 < 5个⻚页⾯面; • ⼀一般不适⽤用滚屏。
![Page 86: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/86.jpg)
2.层级列表导航
![Page 87: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/87.jpg)
![Page 88: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/88.jpg)
![Page 89: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/89.jpg)
• +
• 平等的、⼤大量的类别、功能; • 直接对内容进⾏行交互,占⽤用屏幕空间⼩小; • 适合⽤用户⾃自定义分类;
• -
• ⼿手机上的⾯面包屑只有上级; • 切换主要分类、功能⽐比较⿇麻烦; • 主功能只有在⾸首屏才会显⽰示。
![Page 90: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/90.jpg)
3.标签⻚页 导航
![Page 91: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/91.jpg)
![Page 92: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/92.jpg)
![Page 93: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/93.jpg)
• +
• 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置;
• -
• ⾄至多5个标签; • 占⽤用屏幕空间。
![Page 94: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/94.jpg)
4.Springboard 导航
![Page 95: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/95.jpg)
• +
• 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置;
• -
• ⾄至多5个标签; • 占⽤用屏幕空间。
![Page 96: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/96.jpg)
5.抽屉式导航
![Page 97: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/97.jpg)
• +
• 展⽰示主要功能 • 快速访问主要功能; • 指⽰示当前位置;
• -
• ⾄至多5个标签; • 占⽤用屏幕空间。
![Page 98: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/98.jpg)
导航结构
• 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard
• 抽屉式导航
![Page 99: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/99.jpg)
Workshop #6
• 你的应⽤用该使⽤用什么样的导航? • 5“
![Page 100: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/100.jpg)
动画
• 动画的作⽤用 • 动画设计
![Page 101: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/101.jpg)
动画的作⽤用
![Page 102: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/102.jpg)
1.状态、内容变更
![Page 103: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/103.jpg)
这是⽂文字
![Page 104: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/104.jpg)
这是也⽂文字
![Page 105: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/105.jpg)
这是⽂文字
![Page 106: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/106.jpg)
这是也⽂文字
![Page 107: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/107.jpg)
![Page 108: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/108.jpg)
![Page 109: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/109.jpg)
2.吸引注意
![Page 110: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/110.jpg)
![Page 111: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/111.jpg)
3.创造空间感
![Page 112: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/112.jpg)
![Page 113: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/113.jpg)
![Page 114: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/114.jpg)
![Page 115: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/115.jpg)
![Page 116: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/116.jpg)
4.拟物
![Page 117: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/117.jpg)
![Page 118: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/118.jpg)
![Page 119: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/119.jpg)
三种动画利器
• 渐变 • 移动 • 缩放
![Page 120: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/120.jpg)
渐变
![Page 121: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/121.jpg)
![Page 122: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/122.jpg)
移动
![Page 123: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/123.jpg)
传统的线性移动(Linear)
![Page 124: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/124.jpg)
平滑移动(Ease In Out)
![Page 125: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/125.jpg)
![Page 126: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/126.jpg)
弹跳(Bounce)
![Page 127: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/127.jpg)
⽪皮筋(Elastic)
![Page 128: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/128.jpg)
![Page 129: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/129.jpg)
![Page 130: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/130.jpg)
![Page 131: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/131.jpg)
缩放
![Page 132: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/132.jpg)
![Page 133: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/133.jpg)
![Page 134: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/134.jpg)
不快、不慢、不多
• 全屏性质的切换 150ms ~ 350ms
• 保持⼀一致性 • 时⻓长 • 动画⽅方式 • 与系统保持⼀一致
![Page 135: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/135.jpg)
三种动画利器
• 渐变 • 移动 • 缩放
![Page 136: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/136.jpg)
![Page 137: 包季真 - 移动应用从想法到卓越设计 IxDC 2013](https://reader035.vdocuments.pub/reader035/viewer/2022081415/558e483b1a28ab5c518b4620/html5/thumbnails/137.jpg)
Q A“我所说的都是错的。”
— 张⼩小⻰龙