View
650
Download
3
Category
Preview:
DESCRIPTION
1.靠谱的移动应用的想法 2.NUI、目标用户和用户目标 3.功能肥大症 4.移动应用的导航结构 5.移动应用的动画设计 by Jason Bao 包季真
Citation preview
指尖上的设计 从Idea到卓越应用包季真 2014.6
移动互联⺴⽹网 从Idea到卓越应⽤用
包季真 2014.6
包季真 !
《触动⼈人⼼心》译者
包季真 !
脉可寻产品总监 曾供于职⼤大众点评、淘宝
Workshop #1
• 组队 • 互相认识⼀一下 • 选出队⻓长 • 队⻓长陈述队员都是做哪款应⽤用的 • 15”
Chapter 1 Idea
随时在线
感应器
1.定位
2.⻨麦克⻛风
唱吧
SoundCurtain
Square
3.摄像头
⼼心跳和脉搏监测仪软件
微信街景
脉可寻
4.加速度/陀螺仪
S.M.T.H.
摇⼀一摇
赛⻋车游戏
5.近场
6.云
• ⽆无限存储 • ⽆无限运算能⼒力 • ⽆无限续航能⼒力
脉可寻 2.0 唤醒沉睡⼈人脉
7.物联⺴⽹网
链接⼿手机
Nest
CubeSensors
Nike +
Ugle
增强物件
天⽓气预报伞
CalypsoKey
LG G
新⾏行为新习惯
Little Printer
要⽤用、常⽤用、会⽤用
你的Idea？
• 随时在线 • 感应器 • 云计算 • 物联⺴⽹网 • 要⽤用、常⽤用、会⽤用
Workshop #2
• 你们的Idea？
• 15”
Chapter 2 NUI
⺫⽬目标⽤用户.⽤用户⺫⽬目标
个⼈人计算机
WPS
CLICommand-Line Interface
键盘
GUIGraphic User Interface
图标、滚动条、按钮
⿏鼠标
NUINatural User Interface
⼿手指
Magic Trackpad
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 周/次
您不是您的⽤用户
从⽤用户出发，绕开固有观念
⺫⽬目标⽤用户与⽤用户⺫⽬目标
• CLI
• GUI
• NUI
• 为⽤用户设计⽽而不是专家设计 • “您不是您的⽤用户”
Workshop #3
• ⽤用户如何使⽤用你们的应⽤用？ • 他们在什么样的环境下使⽤用你们的应⽤用？
• 15“
Workshop #4
• 头脑⻛风暴 • 说出你所有的想法。
• 20“
Chapter 3 功能肥⼤大症
⼤大屏幕（有时还不⽌止⼀一个），⽆无干扰，环境舒适，99.99%的时间在线，光纤⼊入户，1000MB有线⺴⽹网络，百兆⽆无线⺴⽹网络，⼏几乎没有流量费⽤用，有键盘输⼊入，还有像素级精确度的⿏鼠标，⼏几乎没有电源和存储空间
的顾虑。
被溺爱的PC
近1000个链接
700+个链接
Less is more
尽快搞定
移动环境使用户不能集中精神，用户在这样的环境中使用iPhone，使用的
过程会被切成一段一段的，见缝插针于其他活动中。当一个朋友邀你周六
去溜旱冰的时候，你停下话语，将相约好的地点输入到日历中，然后立刻
继续交谈。当你正在邮局排号，叫到号之前的几分钟，你查了查邮件，看
了看Twitter，还有你喜欢的网站。就是这样开开关关。
优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样：
……但用户其实想的是这样：
第1章：一切从点击开始8
功能设计师
尽快搞定
移动环境使用户不能集中精神，用户在这样的环境中使用iPhone，使用的
过程会被切成一段一段的，见缝插针于其他活动中。当一个朋友邀你周六
去溜旱冰的时候，你停下话语，将相约好的地点输入到日历中，然后立刻
继续交谈。当你正在邮局排号，叫到号之前的几分钟，你查了查邮件，看
了看Twitter，还有你喜欢的网站。就是这样开开关关。
优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效
你准备搞个控制飞机的应用。
你搞出来的可能是这样：
……但用户其实想的是这样：
第1章：一切从点击开始8
产品设计师
⼤大部分功能是可以砍掉的
• 点评：>80%的⼈人使⽤用附近。
⼤大部分功能是可以砍掉的
• 你的应⽤用中有什么功能是没⼈人使⽤用的？
使⽤用感应器， 考虑场景下的⽤用户⺫⽬目标， 提供合适的内容
功能肥⼤大症
• 被溺爱的PC
• ⼤大部分功能是可以砍掉的 • 考虑场景下的⽤用户⺫⽬目标，提供合适内容
Workshop #5
• 围绕场景，找到最重要的功能。 • 10“
成本低成本⾼高
收益⾼高
收益低
Workshop #6
• 定位你的每个功能点 • 15“
成本低成本⾼高
收益⾼高
收益低
保持成本 低⻛风险
最求收益 ⾼高⻛风险
Chapter 4 导航
多任务、层叠窗⼝口
单任务、平铺
导航结构
• 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard
• 抽屉式导航
平铺⻚页⾯面 导航
• +
• 简单、重复且平等的⻚页⾯面 • 占⽤用空间少；
• -
• ⽆无法快速进⾏行跳转翻⻚页； • ⼀一般 < 5个⻚页⾯面； • ⼀一般不适⽤用滚屏。
层级列表导航
• +
• 平等的、⼤大量的类别、功能； • 直接对内容进⾏行交互，占⽤用屏幕空间⼩小； • 适合⽤用户⾃自定义分类；
• -
• ⼿手机上的⾯面包屑只有上级； • 切换主要分类、功能⽐比较⿇麻烦； • 主功能只有在⾸首屏才会显⽰示。
标签⻚页 导航
• +
• 展⽰示主要功能 • 快速访问主要功能； • 指⽰示当前位置；
• -
• ⾄至多5个标签； • 占⽤用屏幕空间。
Springboard 导航
• +
• 展⽰示主要功能 • 快速访问主要功能； • 指⽰示当前位置；
• -
• ⾄至多5个标签； • 占⽤用屏幕空间。
• +
• 展⽰示主要功能 • 快速访问主要功能； • 指⽰示当前位置；
• -
• ⾄至多5个标签； • 占⽤用屏幕空间。
导航结构
• 平铺⻚页⾯面 • 层级列表 • 标签⻚页 • Springboard
• 抽屉式导航
Workshop #7
• 你的应⽤用该使⽤用什么样的导航？ • 5“
Chapter 5 动画
动画的作⽤用
• 状态变更 • 吸引注意 • 创造空间 • 拟物
状态、内容变更(转场)
吸引注意
创造空间感
拟物
不快、不慢、不多
• 全屏性质的切换 150ms ~ 350ms
• 保持⼀一致性 • 时⻓长 • 动画⽅方式 • 与系统保持⼀一致
视觉线
视觉线
动画
• 动画的作⽤用 • 不快、不慢、不多 • 视觉线
总结
• Idea
• NUI - ⺫⽬目标⽤用户与⽤用户⺫⽬目标
• 功能肥⼤大症 • 导航 • 动画
渐变
移动
传统的线性移动(Linear)
平滑移动(Ease In Out)
弹跳(Bounce)
⽪皮筋(Elastic)
缩放
Q&A“我所说的都是错的。”
— 张⼩小⻰龙
Recommended