Android那些事儿Android那些事儿WSD 交互设计师 M hWSD 交互设计师 Maczheng

您将了解到：

背景 发展 交互特征 最近动态背景，发展，交互特征，最近动态

HistoryHistory

• 机器人，Andy Rubin。

• 2003年Andy Rubin成立Android公司。

• 2005年被Google收购。

• 2007 11 5 Google对外宣布基于Linux平2007.11.5.Google对外宣布基于Linux平台开源手机操作系统叫android，号称是首个为移动终端打造的真正开放和完整首个为移动终端打造的真正开放和完整的移动软件。

2008 9 22 第 款Android手机• 2008.9.22，第一款Android手机——

T-Mobile G1。

Why Android？Why Android？

• 变革：PC – Web – wireless变革

• 盈利

A marcket 22.5w马上30w的量了App store Ipad 6 5w• 盈利 App store Ipad 6.5w

• 谷歌 “云” 带到移动互联网。• 自由：让移动通讯不依赖于设备甚至平台。自由：让移动通讯不依赖于设备甚至平台。• 整合：e体验生态系统。

How Android?How Android?

发布应用6问题 Google 的移动用户体验战略 by user experience designer Leland Rechis

• 1. 理解用户，who&  when& where。– 重复型：easy come easy go。– 无聊型：打发碎片时间；浏览多于撰写，减少输入。– 紧急型：检查航班、找旅馆等。Google强化本地信息的应用。

2 装在 袋里 有限屏幕 减少输入 有用信息放在屏幕上• 2. 装在口袋里：有限屏幕，减少输入，有用信息放在屏幕上。• 3. 比PC更要隐私保密。

4 致性 幕 的 致性 bil 和t 等• 4. 一致性：不同屏幕下的一致性，pc mobile 和tv等• 5. 强化本地化。地图，社区,资讯,购物……• 6. 整合设备，模式，产品。是谷歌“云”的一个终端。

Tips：android ue leader Matias Duarte

1.5 1.6 2.0/2.0.1/2.1 2.2/2.2.1 2 1 31 4%Cupcake纸杯蛋糕 Donut 甜甜圈

0/ 0 /Éclair 闪电泡芙 Froyo 冻酸奶

2.1    31.4%2.2    57.6%2.3      0.8%

2.3 3.0Gingerbread 姜饼 Honeycomb

2.4I 冰激凌Ice cream 冰激凌

? For  tablet?多版本 2011.05多版本

2 3 特性2.3 特性

精细简洁快(绿色 )•精细,简洁,快(绿色 )•快而直观的文本编辑•电量管理。•任务管理器网络电话 账号•网络电话 sip账号

•浏览器添加标签•近场通信NFC•下载管理•相机

多屏幕多屏幕

Android pad800x4801200x600

• 屏幕尺寸:small, normal, large, and xlarge• 密度: ldpi (low),mdpi (medium), hdpi (high), and xhdpi (extra high)• 长宽比.

Dots per inch

45.9% 51.2%3

5

77

10

适配多屏幕1DP=160密度屏幕上的一个像素

pixels = dps * (density / 160)适配多屏幕

用 单位( )

pixels = dps * (density / 160).例如 240 dpi 屏幕上, 1 dp =1.5 物理像素.

• 用dp单位(Density‐independent pixel )。• 利用 9patches技术，生成能透明的可拉伸的PNG图片。

个应用制作多分辨率的图标集• 一个应用制作多分辨率的图标集。

图标类别 指定屏幕属性上的标准件尺寸（像素）

低分辨率屏 (ldpi) 中分辨率屏 (mdpi) 高分辨率屏 (hdpi)

Launcher 36 x 36 px 48 x 48 px 72 x 72 px

Menu 36 x 36 px 48 x 48 px 72 x 72 px

Status Bar 24 x 24 px 32 x 32 px 48 x 48 px

T b 24 24 32 32 48 48Tab 24 x 24 px 32 x 32 px 48 x 48 px

Dialog 24 x 24 px 32 x 32 px 48 x 48 px

List View 24 x 24 px 32 x 32 px 48 x 48 pxp p p

http://developer.android.com/guide/practices/screens_support.html

BlurMoto  BlurHTC   SenseSony Ericsson  Time scapeS Touchwiz

多变种

Samsung   Touchwiz

魅族M9多变种魅族M9点心 UI

Kite UI

MIUIMIUILePhoneOPhone

MOTO blurMOTO  blur

索爱 Timescape • 一个界面里同时看到电话联系人、Facebook、twitter和短信内容，索爱 Timescape • 主界面的四个角落里分别可以放置一个快捷方式，用户可以进行自定义。

HTC SenseHTC  Sense

Samsung TouchwizSamsung Touchwiz

MEIZU M9• Title和status bar的整合• 取消桌面和程序抽屉的概念• 框的统一设计MEIZU M9 框的统 设计• 文件夹

LePhone• Title上的返回键

LePhone • Status 上的返回主屏

MI UIMI UI

video

点心 UI点心 UI

• Title 功能区

OPhoneOPhone

交互设计结构交互设计结构

布局布局

长按

单击

返回键

框内按钮

boxScreen

框内按钮

boxScreen

应用的构成应用的构成

从开发的角度来说，应用由一系列的activity构成，最终打包为.apk文件从设计的角度来说，应用由一系列的screen和box组成的，S 和b 是应用中信息和操作的载体Screen和box是应用中信息和操作的载体。

推荐：•Title 不放操作，干涉状态栏操作放下面 单手操作更方便

http://azero.tsang.blog.163.com/blog/static/4700520106275197904/

•操作放下面，单手操作更方便

Tool bar Menu bottom Tab head Tab

boxbox

Why box？Title

内容 y1. 减少内容层级，让应用结构扁平。2. 更醒目，更清楚。3 功能复用

内容

3. 功能复用按钮

注意注意•文本：简约，一致没有标点，内容中的前后文本一致•取消方式：放个取消按钮呢？还是用返回键•按钮,1，2，3？

意图动作

– 长按屏幕中某item，调出对象的上下文菜单。

– 长按桌面调出widget长按桌面调出widget

– 长按关机键 关机

– 长按主屏键 出现最近使用程序和任务管理器。

长按有欣喜，不可预知很窘迫。

原大小和适应屏幕大小切换

shake 一些功能的快捷方式

物理对象 | 屏幕对象意图对象 物理对象 | 屏幕对象意图对象

1 返回键

物理键是android系统手机的经典标志。

1. 返回键展现了android系统活动栈的概念

2. 主屏键保证了导航的起点 在失去方向的时候能快捷的回保证了导航的起点，在失去方向的时候能快捷的回

到原点。

3. 菜单键为呼出和收纳功能命令 目的是保留更多的空间给为呼出和收纳功能命令。目的是保留更多的空间给

内容展示

4. 搜索键：推销 l 搜索业务的推销google搜索业务的

5. 关机键：和其它手机一样，关机和锁屏。

6 轨迹球 触摸板6. 轨迹球 触摸板7. 音量键（- +）及拍照键

全局的返回键全局的返回键

– 从一个应用到另一个应用

– 返回的最终是主屏；

– Android用户是习惯用返回键的。

轨迹球 or 触摸板轨迹球 or 触摸板

• 引入焦点，但没鼠标悬停菜单

• 好处，确实能很好的实现单手操作，摆脱必须好处，确实能很好的实现单手操作，摆脱必须点触屏幕的束缚。

物理对象 | 屏幕对象意图对象>

Menu

• 优点：节约屏幕空间，

• 缺点：不可预见性 ，所以要猜。大多猜错。缺点 不可预见性 ，所以要猜 大多猜错

自绘Menu排布方案

•不推荐 排满第一行再排第二行，且从左到右不对称排列。不推荐 排满第 行再排第二行，且从左到右不对称排列。•“退出”一般到右边最后一个位置

上下文菜单的异变上下文菜单的异变

启发：Item 可以被分割区域来赋予不同操作

Quick contact

需要置于屏幕上的意图对象需要置于屏幕上的意图对象

• 频繁操作的图标按钮– 图标按钮

– 文字链接

文字加图标– 文字加图标

注意层次和传达效果• 注意层次和传达效果

状态栏 Status里面的通知机制是android最具特性的 面状态栏 Status 里面的通知机制是android最具特性的一面。

• 借力状态栏的通知系统

• 拖拽承载了任务管理，下载进度等功理，下载进度等功能切换。

• 不可遮挡• 不可遮挡

返回键

利用通知系统 省略下载管理利用通知系统 省略下载管理

桌面和应用抽屉桌面和应用抽屉

放 应 捷方• 重复放置应用快捷方式到桌面

• 在应用抽屉不好找想要用• 在应用抽屉不好找想要用的应用，无法确定位置

• 桌面应用快捷方式横向翻屏和应用抽屉的下拉方式没有统一的交互方向。

SD cardSD card

• 分离的SD卡，每次开启要加载，应用少了SD卡出现不能正常使用的情况。

为节电和流量的设计为节电和流量的设计

• 锁屏

• 夜间夜间

• 离线浏览

普通版和简版（视网络情况而自主选择）• 普通版和简版（视网络情况而自主选择）

系统总结系统总结

1. 成长ing，不成熟。成长 g，不成熟2. 自由与统一

• “我们并不是限制您必须如此开发，只是这样方法仅作参考，提高您的效率 ”高您的效率。

• 规范宽松适合创新。• 一致的体验是产品最重要的因素之一。

• 应用和系统应用有一致的交互和视觉一致，• 同个产品在不同平台有产品理念的一致；• 同公司的产品有公司形象的一致。同公司的产品有公司形象的 致。

3. 更Android还是更iPhone• 避免直接照搬iPhone的交互形式，尊重Android特性，更好的发挥

A d id的优势Android的优势。

About padAbout pad

pad phonepad phone尺寸 5寸-10寸 2寸-5寸

应用场景 家，办公环境中用于娱乐，演示有连续长时间沉浸式的流畅体验

放在口袋中，随身携带时间上更碎片化。有连续长时间沉浸式的流畅体验 时间 更碎片化

交互方式 点击，拖拽。 点击，拖拽。手持方式 双手握持，双手操作

左手握持，右手操作较多食指

单手操作的情况较多。可以说就是在手掌中的。拇指食指 拇指

操作时间 长，半小时以上 短，大多在3分钟以下，但频率高。显示方向 大多兼顾水平和竖直方向 大多是竖直方向

信息展示层 较少的全页面切换 局部信息切换 Screen to screen信息展示层级

较少的全页面切换，局部信息切换Screen + popup box

Screen to screen，

内容 足够的空间展示更多的内容和功能。内容和功能的外显更多。

空间有限，一些功能，内容巧妙的隐藏，

大屏幕，多方向，要双手，长时间，不隐藏

d1 Android pad as a  phone 1

5寸 7寸 10寸5寸 7寸 10寸

d id d的特征1 android pad的特征：

尺寸多

1• 尺寸多：

– 5寸（dell streak），7寸（多），10寸（多）。

• 屏幕多：

phone还是pad？

• 屏幕多：800x480和1024x600的居多。

• 多宽屏：难适配

多宽屏– 16:10多 4:3少，这和ipad比较大的区别。

• 物理按键多，位置各不同竖屏很奇怪

– 单主屏键位于窄侧的正中– 多按钮位于窄侧靠上位置– 按钮分别放置在窄的两侧（aigo pad e700）

方向受制约

– 按钮分别放置在窄的两侧（aigo pad e700）总的趋势是，数量有1个的，3个的，4个的，但绝大多数都放置在屏幕

窄的一侧，很少把物理按键分散放置的。

水平方向多 竖直方向很少（三星 ）• 水平方向多，竖直方向很少（三星galaxy）。

• 宽屏• 水平方向• 双手持双手操作和单右手持右手操作

QQ阅读 for android pad  visual design by tinahou 

QQ阅读 for android pad  visual design by tinahou 

3 02 Android 3.0 mainly for tablet  2

db h i l kSay   goodbye to  physical keysvideo

3 0特征3.0特征

1 为平板电脑而生1. 为平板电脑而生。2. 真实，立体的界面设计，3 优雅的 关注内容的交互。3. 优雅的，关注内容的交互。4. 继承了多任务，通知机制，自定义主屏，widget，并贯穿3D体验中

Benefits：• 4个方向随意支持，不受按键制约;

应用的展现方式更加灵活• 应用的展现方式更加灵活;• 全触摸操作，不再依赖物理按键.

contextual options, navigation, widgets, or other types of content

Action Bar

System Bar

两个bar：顶部的action bar和底部的system bar。

更个性的功能菜单更个性的功能菜单

横向双栏布局横向双栏布局

拖拽动作更频繁动作由上到下的转变

Android 未来Android 未来

1.6‐2.X6

3 0Android

Android X3.0 Android  XFragment API

Chrome OS

video

博客

wsd.tencent.com

Thanks