SlideShare une entreprise Scribd logo
1  sur  58
Télécharger pour lire hors ligne
Android那些事儿
WSD 交互设计师 M h
          Maczheng
您将了解到:



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

•   机器人,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?
发布应用6问题 Google 的移动用户体验战略 by user experience designer Leland Rechis
• 1. 理解用户,who&  when& where。
    – 重复型:easy come easy go。
    – 无聊型:打发碎片时间;浏览多于撰写,减少输入。
    – 紧急型:检查航班、找旅馆等。Google强化本地信息的应用。
•   2. 装在口袋里:有限屏幕,减少输入,有用信息放在屏幕上。
    2 装在 袋里 有限屏幕 减少输入 有用信息放在屏幕上
•   3. 比PC更要隐私保密。
•   4. 致性
    4 一致性:不同屏幕下的一致性,pc mobile 和t 等
               幕 的 致性     bil 和tv等
•   5. 强化本地化。地图,社区,资讯,购物……
•   6. 整合设备,模式,产品。是谷歌“云”的一个终端。

                                  Tips:android ue leader Matias Duarte
1.5              1.6           2.0/2.0.1/2.1
                                  0/ 0 /        2.2/2.2.1         2.1    31.4%
                                                                  2 1 31 4%
 Cupcake纸杯蛋糕      Donut 甜甜圈     Éclair 闪电泡芙     Froyo 冻酸奶
                                                                  2.2    57.6%
                                                                  2.3      0.8%




 2.3                                              3.0
 Gingerbread 姜饼                                   Honeycomb

                        2.4
                        I cream 冰激凌
                        Ice




多版本
                               ?
                              2011.05
                                                              For  tablet
2.3
2 3 特性




          精细 简洁 快(绿色
         •精细,简洁,快(绿色 )
         •快而直观的文本编辑
         •电量管理。
         •任务管理器
          网络电话 账号
         •网络电话 sip账号
         •浏览器添加标签
         •近场通信NFC
         •下载管理
         •相机
多屏幕
                                                     Android pad
                                                             800x480
                                                             1200x600

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



3                                                       45.9%                      51.2%
5

7
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
    Tab
    T b                        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
                                       p                   32 x 32 px
                                                                   p      48 x 48 px
                                                                                  p


     http://developer.android.com/guide/practices/screens_support.html
Moto  Blur
      HTC   Sense

      Sony Ericsson  Time scape

      Samsung   
      S            Touchwiz
多变种   魅族   M9
      点心 UI
      Kite UI
      MIUI
      LePhone
      OPhone
MOTO  blur
MOTO blur
索爱 Timescape   •
               •
                   一个界面里同时看到电话联系人、Facebook、twitter和短信内容,
                   主界面的四个角落里分别可以放置一个快捷方式,用户可以进行自定义。
HTC  Sense
HTC Sense
Samsung Touchwiz
Samsung Touchwiz
•   Title和status bar的整合
           •   取消桌面和程序抽屉的概念
MEIZU M9
MEIZU M9   •
           •
               框的统 设计
               框的统一设计
               文件夹
•   Title上的返回键
LePhone   •   Status 上的返回主屏
MI UI
MI UI




        video
点心 UI

• Title 功能区
OPhone
交互设计结构
布局


              长按

              单击




              返回键

              框内按钮



     Screen          box
应用的构成




从开发的角度来说,应用由一系列的activity构成,最终打包为.apk文件
从设计的角度来说,应用由一系列的screen和box组成的,
Screen和box是应用中信息和操作的载体。
S     和b 是应用中信息和操作的载体
推荐:
•Title 不放操作,干涉状态栏
 操作放下面 单手操作更方便
•操作放下面,单手操作更方便
http://azero.tsang.blog.163.com/blog/static/4700520106275197904/
Tool bar   Menu   bottom Tab   head Tab
box



      Title

      内容      Why box?
                y
              1. 减少内容层级,让应用结构扁平。
              2. 更醒目,更清楚。
      按钮      3.
              3 功能复用
注意
•文本:简约,一致没有标点,内容中的前后文本一致
•取消方式:放个取消按钮呢?还是用返回键
•按钮,1,2,3?
意图动作


                    –   长按屏幕中某item,调出对象的上下文菜单。
                    –   长按桌面调出widget
                    –   长按关机键 关机
                    –   长按主屏键 出现最近使用程序和任务管理器。


               长按有欣喜,
               不可预知很窘迫。
               原大小和适应屏幕大小切换


shake   一些功能的快捷方式
意图对象     物理对象     | 屏幕对象


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

1.
1 返回键
  展现了android系统活动栈的概念
2. 主屏键
  保证了导航的起点,在失去方向的时候能快捷的回
  保证了导航的起点 在失去方向的时候能快捷的回
    到原点。
3. 菜单键
  为呼出和收纳功能命令。目的是保留更多的空间给
  为呼出和收纳功能命令 目的是保留更多的空间给
    内容展示
4. 搜索键:
  推销google搜索业务的
  推销    l 搜索业务的
5. 关机键:
  和其它手机一样,关机和锁屏。
6.
6 轨迹球 触摸板
7. 音量键(- +)及拍照键
全局的返回键

 – 从一个应用到另一个应用
 – 返回的最终是主屏;
 – Android用户是习惯用返回键的。
轨迹球 or 触摸板

• 引入焦点,但没鼠标悬停菜单
• 好处,确实能很好的实现单手操作,摆脱必须
  点触屏幕的束缚。
意图对象>   物理对象   |   屏幕对象


    Menu
•    优点:节约屏幕空间,
•    缺点 不可预见性 ,所以要猜 大多猜错
     缺点:不可预见性 ,所以要猜。大多猜错。
自绘Menu排布方案




   •不推荐 排满第一行再排第二行,且从左到右不对称排列。
    不推荐 排满第 行再排第二行,且从左到右不对称排列。
   •“退出”一般到右边最后一个位置
上下文菜单的异变




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

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

• 频繁操作的
 – 图标按钮
 – 文字链接
 – 文字加图标


• 注意层次和传达效果
状态栏   Status 里面的通知机制是android最具特性的 面
      Status 里面的通知机制是android最具特性的一面。


• 借力状态栏的通知
  系统
• 拖拽承载了任务管
  理,下载进度等功
  能切换。
• 不可遮挡



                         返回键
利用通知系统 省略下载管理
桌面和应用抽屉

•   重复放置应用快捷方式到
       放 应 捷方
    桌面
•   在应用抽屉不好找想要用
    的应用,无法确定位置
•   桌面应用快捷方式横向翻
    屏和应用抽屉的下拉方式
    没有统一的交互方向。
SD card
SD card

• 分离的SD卡,每
  次开启要加载,
  应用少了SD卡出
  现不能正常使用
  的情况。
为节电和流量的设计

•   锁屏
•   夜间
•   离线浏览
•   普通版和简版(视网络情况而自主选择)
系统总结
1. 成长ing,不成熟。
   成长 g,不成熟
2. 自由与统一
    • “我们并不是限制您必须如此开发,只是这样方法仅作参考,提
      高您的效率。
      高您的效率 ”
    • 规范宽松适合创新。
    • 一致的体验是产品最重要的因素之一。
       • 应用和系统应用有一致的交互和视觉一致,
       • 同个产品在不同平台有产品理念的一致;
       • 同公司的产品有公司形象的一致。
          同公司的产品有公司形象的 致。
3. 更Android还是更iPhone
    • 避免直接照搬iPhone的交互形式,尊重Android特性,更好的发挥
      Android的优势。
      A d id的优势
About pad
About pad
        pad                  phone
   尺寸   5寸-10寸               2寸-5寸
 应用场景   家,办公环境中用于娱乐,演示       放在口袋中,随身携带
        有连续长时间沉浸式的流畅体验       时间 更碎片化
                             时间上更碎片化。
 交互方式   点击,拖拽。               点击,拖拽。
 手持方式   双手握持,双手操作            单手操作的情况较多。
        左手握持,右手操作较多          可以说就是在手掌中的。
        食指                   拇指
 操作时间   长,半小时以上              短,大多在3分钟以下,但频率高。
 显示方向   大多兼顾水平和竖直方向          大多是竖直方向
信息展示层   较少的全页面切换,局部信息切换
        较少的全页面切换 局部信息切换      Screen to screen
                                       screen,
    级   Screen + popup box
   内容   足够的空间展示更多的内容和功能。     空间有限,一些功能,内容巧妙的隐藏,
        内容和功能的外显更多。


   大屏幕,多方向,要双手,长时间,不隐藏
1 Android pad
            d   as a  phone 




   5寸                      7寸   10寸
1   android pad的特征:
      d id d的特征
• 尺寸多
  尺寸多:                           phone还是pad?
    – 5寸(dell streak),7寸(多),10寸(多)。
• 屏幕多:
    800x480和1024x600的居多。         难适配
• 多宽屏:
  多宽屏
    – 16:10多   4:3少,这和ipad比较大的区别。 竖屏很奇怪
• 物理按键多,位置各不同
    – 单主屏键位于窄侧的正中                方向受制约
    – 多按钮位于窄侧靠上位置
    – 按钮分别放置在窄的两侧(aigo pad e700)
    总的趋势是,数量有1个的,3个的,4个的,但绝大多数都放置在屏幕
      窄的一侧,很少把物理按键分散放置的。
• 水平方向多 竖直方向很少(三星
  水平方向多,竖直方向很少(三星galaxy)。
                       )
• 宽屏
• 水平方向
• 双手持双手操作和单右手持右手操作
QQ阅读 for android pad  visual design by tinahou 
QQ阅读 for android pad  visual design by tinahou 
2 Android 3 0
          3.0   mainly for    tablet  




 video
           Say   goodbye to  physical keys
                    db        h i lk
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 未来


              1.6‐2.X
                6
  Android
              3.0
              30        Android  X
                        Android X
                         Fragment API
  Chrome OS
video
博客

wsd.tencent.com
Thanks

Contenu connexe

Similaire à Android那些事儿

Android workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phoneAndroid workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phoneJohnny Sung
 
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹Johnny Sung
 
Html5移动网站开发实践
Html5移动网站开发实践Html5移动网站开发实践
Html5移动网站开发实践Web Zhao
 
新浪微博WP客户端的开发经验分享
新浪微博WP客户端的开发经验分享 新浪微博WP客户端的开发经验分享
新浪微博WP客户端的开发经验分享 geekparknet
 
一起移动吧 交互篇
一起移动吧 交互篇一起移动吧 交互篇
一起移动吧 交互篇time zhong
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123oemgame
 
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline20120516 axure rp prototype design outline
20120516 axure rp prototype design outlineturtleknight
 
The Importance of User experience
The Importance of User experience The Importance of User experience
The Importance of User experience NTUST
 
多媒体互动手段
多媒体互动手段多媒体互动手段
多媒体互动手段yybbyyy
 
Android ui design tips
Android ui design tipsAndroid ui design tips
Android ui design tipswyh0416
 
Android event retrospect
Android event retrospectAndroid event retrospect
Android event retrospectrogeryi
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010Baidu
 
人人能編程是可能的嗎?
人人能編程是可能的嗎?人人能編程是可能的嗎?
人人能編程是可能的嗎?Fred Lin
 
Pleasantuser 3 d互动增强现实
Pleasantuser 3 d互动增强现实Pleasantuser 3 d互动增强现实
Pleasantuser 3 d互动增强现实Steve Xing
 
移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来 移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来 Alite Yu
 
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 drewz lin
 
2011最流行的ppt模版
2011最流行的ppt模版2011最流行的ppt模版
2011最流行的ppt模版alanyuan123
 
IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计
IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计
IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计IxDC
 

Similaire à Android那些事儿 (20)

Android workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phoneAndroid workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phone
 
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
 
Html5移动网站开发实践
Html5移动网站开发实践Html5移动网站开发实践
Html5移动网站开发实践
 
新浪微博WP客户端的开发经验分享
新浪微博WP客户端的开发经验分享 新浪微博WP客户端的开发经验分享
新浪微博WP客户端的开发经验分享
 
一起移动吧 交互篇
一起移动吧 交互篇一起移动吧 交互篇
一起移动吧 交互篇
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123
 
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
 
The Importance of User experience
The Importance of User experience The Importance of User experience
The Importance of User experience
 
多媒体互动手段
多媒体互动手段多媒体互动手段
多媒体互动手段
 
Android ui design tips
Android ui design tipsAndroid ui design tips
Android ui design tips
 
Android event retrospect
Android event retrospectAndroid event retrospect
Android event retrospect
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010
 
人人能編程是可能的嗎?
人人能編程是可能的嗎?人人能編程是可能的嗎?
人人能編程是可能的嗎?
 
20120912 windows 8 開發概論
20120912 windows 8 開發概論20120912 windows 8 開發概論
20120912 windows 8 開發概論
 
Pleasantuser 3 d互动增强现实
Pleasantuser 3 d互动增强现实Pleasantuser 3 d互动增强现实
Pleasantuser 3 d互动增强现实
 
Web與mobile標準UI口徑
Web與mobile標準UI口徑Web與mobile標準UI口徑
Web與mobile標準UI口徑
 
移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来 移动端网页——发现视频内容的未来
移动端网页——发现视频内容的未来
 
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
 
2011最流行的ppt模版
2011最流行的ppt模版2011最流行的ppt模版
2011最流行的ppt模版
 
IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计
IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计
IxDC 中国交互设计体验日-A5_吴晓丹_软硬件一体化设计
 

Plus de 麦哥UE

从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验麦哥UE
 
塑造产品核心亮点的设计
塑造产品核心亮点的设计塑造产品核心亮点的设计
塑造产品核心亮点的设计麦哥UE
 
最终 大屏手机上的设计策略
最终 大屏手机上的设计策略最终 大屏手机上的设计策略
最终 大屏手机上的设计策略麦哥UE
 
手机助手Phone端竞品分析
手机助手Phone端竞品分析手机助手Phone端竞品分析
手机助手Phone端竞品分析麦哥UE
 
手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714麦哥UE
 
Material design分享
Material design分享Material design分享
Material design分享麦哥UE
 
Axure高级技巧和文档礼仪
Axure高级技巧和文档礼仪Axure高级技巧和文档礼仪
Axure高级技巧和文档礼仪麦哥UE
 
设计好的用户体验 郑磊
设计好的用户体验 郑磊设计好的用户体验 郑磊
设计好的用户体验 郑磊麦哥UE
 
格子里的设计
格子里的设计格子里的设计
格子里的设计麦哥UE
 

Plus de 麦哥UE (9)

从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验从钢铁侠与美国队长看用户体验
从钢铁侠与美国队长看用户体验
 
塑造产品核心亮点的设计
塑造产品核心亮点的设计塑造产品核心亮点的设计
塑造产品核心亮点的设计
 
最终 大屏手机上的设计策略
最终 大屏手机上的设计策略最终 大屏手机上的设计策略
最终 大屏手机上的设计策略
 
手机助手Phone端竞品分析
手机助手Phone端竞品分析手机助手Phone端竞品分析
手机助手Phone端竞品分析
 
手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714手机浏览器竞品分析(Home页诉求)0714
手机浏览器竞品分析(Home页诉求)0714
 
Material design分享
Material design分享Material design分享
Material design分享
 
Axure高级技巧和文档礼仪
Axure高级技巧和文档礼仪Axure高级技巧和文档礼仪
Axure高级技巧和文档礼仪
 
设计好的用户体验 郑磊
设计好的用户体验 郑磊设计好的用户体验 郑磊
设计好的用户体验 郑磊
 
格子里的设计
格子里的设计格子里的设计
格子里的设计
 

Android那些事儿

  • 3. History • 机器人,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。
  • 4. Why Android? Why Android? • 变革:PC – Web – wireless 变革 A marcket 22.5w 马上30w的量了 • 盈利 App store Ipad 6.5w App store Ipad 6 5w • 谷歌 “云” 带到移动互联网。 • 自由:让移动通讯不依赖于设备甚至平台。 • 整合:e体验生态系统。
  • 5. How Android? 发布应用6问题 Google 的移动用户体验战略 by user experience designer Leland Rechis • 1. 理解用户,who&  when& where。 – 重复型:easy come easy go。 – 无聊型:打发碎片时间;浏览多于撰写,减少输入。 – 紧急型:检查航班、找旅馆等。Google强化本地信息的应用。 • 2. 装在口袋里:有限屏幕,减少输入,有用信息放在屏幕上。 2 装在 袋里 有限屏幕 减少输入 有用信息放在屏幕上 • 3. 比PC更要隐私保密。 • 4. 致性 4 一致性:不同屏幕下的一致性,pc mobile 和t 等 幕 的 致性 bil 和tv等 • 5. 强化本地化。地图,社区,资讯,购物…… • 6. 整合设备,模式,产品。是谷歌“云”的一个终端。 Tips:android ue leader Matias Duarte
  • 6. 1.5 1.6 2.0/2.0.1/2.1 0/ 0 / 2.2/2.2.1 2.1    31.4% 2 1 31 4% Cupcake纸杯蛋糕 Donut 甜甜圈 Éclair 闪电泡芙 Froyo 冻酸奶 2.2    57.6% 2.3      0.8% 2.3 3.0 Gingerbread 姜饼 Honeycomb 2.4 I cream 冰激凌 Ice 多版本 ? 2011.05 For  tablet
  • 7. 2.3 2 3 特性 精细 简洁 快(绿色 •精细,简洁,快(绿色 ) •快而直观的文本编辑 •电量管理。 •任务管理器 网络电话 账号 •网络电话 sip账号 •浏览器添加标签 •近场通信NFC •下载管理 •相机
  • 8. 多屏幕 Android pad 800x480 1200x600 • 屏幕尺寸:small, normal, large, and xlarge • 密度: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high) Dots per inch • 长宽比. 3 45.9% 51.2% 5 7 10
  • 9. 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 Tab T b 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 p 32 x 32 px p 48 x 48 px p http://developer.android.com/guide/practices/screens_support.html
  • 10. Moto  Blur HTC   Sense Sony Ericsson  Time scape Samsung    S Touchwiz 多变种 魅族 M9 点心 UI Kite UI MIUI LePhone OPhone
  • 12. 索爱 Timescape • • 一个界面里同时看到电话联系人、Facebook、twitter和短信内容, 主界面的四个角落里分别可以放置一个快捷方式,用户可以进行自定义。
  • 15. Title和status bar的整合 • 取消桌面和程序抽屉的概念 MEIZU M9 MEIZU M9 • • 框的统 设计 框的统一设计 文件夹
  • 16. Title上的返回键 LePhone • Status 上的返回主屏
  • 17. MI UI MI UI video
  • 18. 点心 UI • Title 功能区
  • 21. 布局 长按 单击 返回键 框内按钮 Screen box
  • 24. Tool bar Menu bottom Tab head Tab
  • 25. box Title 内容 Why box? y 1. 减少内容层级,让应用结构扁平。 2. 更醒目,更清楚。 按钮 3. 3 功能复用
  • 26.
  • 28.
  • 29. 意图动作 – 长按屏幕中某item,调出对象的上下文菜单。 – 长按桌面调出widget – 长按关机键 关机 – 长按主屏键 出现最近使用程序和任务管理器。 长按有欣喜, 不可预知很窘迫。 原大小和适应屏幕大小切换 shake 一些功能的快捷方式
  • 30. 意图对象 物理对象 | 屏幕对象 物理键是android系统手机的经典标志。 1. 1 返回键 展现了android系统活动栈的概念 2. 主屏键 保证了导航的起点,在失去方向的时候能快捷的回 保证了导航的起点 在失去方向的时候能快捷的回 到原点。 3. 菜单键 为呼出和收纳功能命令。目的是保留更多的空间给 为呼出和收纳功能命令 目的是保留更多的空间给 内容展示 4. 搜索键: 推销google搜索业务的 推销 l 搜索业务的 5. 关机键: 和其它手机一样,关机和锁屏。 6. 6 轨迹球 触摸板 7. 音量键(- +)及拍照键
  • 31. 全局的返回键 – 从一个应用到另一个应用 – 返回的最终是主屏; – Android用户是习惯用返回键的。
  • 32. 轨迹球 or 触摸板 • 引入焦点,但没鼠标悬停菜单 • 好处,确实能很好的实现单手操作,摆脱必须 点触屏幕的束缚。
  • 33. 意图对象> 物理对象 | 屏幕对象 Menu • 优点:节约屏幕空间, • 缺点 不可预见性 ,所以要猜 大多猜错 缺点:不可预见性 ,所以要猜。大多猜错。
  • 34. 自绘Menu排布方案 •不推荐 排满第一行再排第二行,且从左到右不对称排列。 不推荐 排满第 行再排第二行,且从左到右不对称排列。 •“退出”一般到右边最后一个位置
  • 35. 上下文菜单的异变 启发:Item 可以被分割区域来赋予不同操作 Quick contact
  • 36. 需要置于屏幕上的意图对象 • 频繁操作的 – 图标按钮 – 文字链接 – 文字加图标 • 注意层次和传达效果
  • 37. 状态栏 Status 里面的通知机制是android最具特性的 面 Status 里面的通知机制是android最具特性的一面。 • 借力状态栏的通知 系统 • 拖拽承载了任务管 理,下载进度等功 能切换。 • 不可遮挡 返回键
  • 39. 桌面和应用抽屉 • 重复放置应用快捷方式到 放 应 捷方 桌面 • 在应用抽屉不好找想要用 的应用,无法确定位置 • 桌面应用快捷方式横向翻 屏和应用抽屉的下拉方式 没有统一的交互方向。
  • 40. SD card SD card • 分离的SD卡,每 次开启要加载, 应用少了SD卡出 现不能正常使用 的情况。
  • 41. 为节电和流量的设计 • 锁屏 • 夜间 • 离线浏览 • 普通版和简版(视网络情况而自主选择)
  • 42. 系统总结 1. 成长ing,不成熟。 成长 g,不成熟 2. 自由与统一 • “我们并不是限制您必须如此开发,只是这样方法仅作参考,提 高您的效率。 高您的效率 ” • 规范宽松适合创新。 • 一致的体验是产品最重要的因素之一。 • 应用和系统应用有一致的交互和视觉一致, • 同个产品在不同平台有产品理念的一致; • 同公司的产品有公司形象的一致。 同公司的产品有公司形象的 致。 3. 更Android还是更iPhone • 避免直接照搬iPhone的交互形式,尊重Android特性,更好的发挥 Android的优势。 A d id的优势
  • 43. About pad About pad pad phone 尺寸 5寸-10寸 2寸-5寸 应用场景 家,办公环境中用于娱乐,演示 放在口袋中,随身携带 有连续长时间沉浸式的流畅体验 时间 更碎片化 时间上更碎片化。 交互方式 点击,拖拽。 点击,拖拽。 手持方式 双手握持,双手操作 单手操作的情况较多。 左手握持,右手操作较多 可以说就是在手掌中的。 食指 拇指 操作时间 长,半小时以上 短,大多在3分钟以下,但频率高。 显示方向 大多兼顾水平和竖直方向 大多是竖直方向 信息展示层 较少的全页面切换,局部信息切换 较少的全页面切换 局部信息切换 Screen to screen screen, 级 Screen + popup box 内容 足够的空间展示更多的内容和功能。 空间有限,一些功能,内容巧妙的隐藏, 内容和功能的外显更多。 大屏幕,多方向,要双手,长时间,不隐藏
  • 44. 1 Android pad d as a  phone  5寸 7寸 10寸
  • 45. 1 android pad的特征: d id d的特征 • 尺寸多 尺寸多: phone还是pad? – 5寸(dell streak),7寸(多),10寸(多)。 • 屏幕多: 800x480和1024x600的居多。 难适配 • 多宽屏: 多宽屏 – 16:10多 4:3少,这和ipad比较大的区别。 竖屏很奇怪 • 物理按键多,位置各不同 – 单主屏键位于窄侧的正中 方向受制约 – 多按钮位于窄侧靠上位置 – 按钮分别放置在窄的两侧(aigo pad e700) 总的趋势是,数量有1个的,3个的,4个的,但绝大多数都放置在屏幕 窄的一侧,很少把物理按键分散放置的。 • 水平方向多 竖直方向很少(三星 水平方向多,竖直方向很少(三星galaxy)。 )
  • 46. • 宽屏 • 水平方向 • 双手持双手操作和单右手持右手操作
  • 47.
  • 50. 2 Android 3 0 3.0 mainly for  tablet   video Say   goodbye to  physical keys db h i lk
  • 51. 3.0特征 3 0特征 1. 1 为平板电脑而生。 为平板电脑而生 2. 真实,立体的界面设计, 3. 3 优雅的,关注内容的交互。 优雅的 关注内容的交互。 4. 继承了多任务,通知机制,自定义主屏,widget,并贯穿3D体验中 Benefits: • 4个方向随意支持,不受按键制约; • 应用的展现方式更加灵活 应用的展现方式更加灵活; • 全触摸操作,不再依赖物理按键.
  • 56. Android 未来 1.6‐2.X 6 Android 3.0 30 Android  X Android X Fragment API Chrome OS
  • 57. video