Android 3.0交互设计.ppt

1、中文版 for 昆仑UED / 1mobile,翻译: 严峻 / 周全,设计与实施 安卓系统的手机与平板电脑的用户界面 Matias Duarte Rich Fulcher Roman Nurik Adam Powell Christian Robertson,#io2011 #Android,询问问题 http:/goo.gl/mod/zdyR,给予反馈 http:/goo.gl/4dTQp,备注：两个连接都可以在Google I/O安卓的软件里使用,议事日程,4,1.平板电脑的介绍,2.蜂巢的视觉设计,3.蜂巢的用户界面模式与框架特点,交互设计 实现,4. Google I/O 案例研究,

2、平板电脑介绍,设计目标：蜂巢,6,设计目标：蜂巢,7,设计目标：蜂巢,开始体验,9,蜂巢的视觉设计,介绍：触控流畅的用户界面,主题：设计目标,1 实现可伸缩的动态用户界面 2 简洁及开放的设计 3 具备扩展性,12,1 /实现可伸缩的动态用户界面：早期测试,1 / 实现可伸缩的动态用户界面,1 / 实现可伸缩的动态用户界面,1 / 实现可伸缩的动态用户界面,1 / 实现可伸缩的动态用户界面,18,主题：设计目标,1 实现可伸缩的动态用户界面 2 简洁及开放的设计 3 具备扩展性,2 / 简化：去除文本框,2 / 简化：去除文本框,2 / 简化：拓宽间距及框体尺寸,2 / 简化：拓宽间距及框体尺

3、寸,主题：设计目标,1 实现可伸缩的动态用户界面 2 简洁的设计展示 3 具备扩展性,24,3 /具备扩展性：设计技巧 根据用户需求选择明或暗的界面, 通过调整颜色和背景来突出重点 如果特别在意风格和主题时，可以忽略其他, 开放式的设计, 在适当的地方去除框体, 间隔和度量, 在平板上，很多界面元素无法通过拉伸来填充, 多花时间设计软件图标及宣传图片,25,应用程序品牌化,26,不同精度的,应用图标,高分辨率的Market图标,应用程序品牌化,27,宣传图片,宣传Banner,蜂巢的用户界面模式与框架特点,用户界面模式 它就像软件的设计模式,一个界面设计模式可以解决反复出现的问题 框架支持 这

4、只是一个指导方针，但并不做任何限制,1. 2. 3. 4.,Action Bar 多栏布局 应用程序导航 列表之外的东西,29,介绍,Action Bar, 它不是一个全新的模式, 和去年I/O大会所说的手机用户界面设计模式相似 用户可以通过Android Market获得很多软件 蜂巢系统可以在很大程度上增强它的使用性, 固定于每个屏幕的顶端, 通常始终贯穿于整个应用程序, 使它成为一个常规的操作 支持导航, 可以很方便的操作菜单和搜索功能,30,一般结构,工具栏, 应用图标, 查看详情, 操作按钮,31,一般结构,工具栏, 应用图标, 它可以替换成其他的LOGO或者品牌, 在应用中也通常可

5、以支持返回上一级的导航,32,一般结构,工具栏, 查看详情, 简单: 标题栏和交互位置的更换 丰富: 标签、下拉菜单、面包屑导航,33,一般结构,工具栏, 操作按钮, 很多重要的、要经常操作的按钮应集中在左侧 按钮可以是单独的图标, 单独的文字, 或者文字加图标 浮动菜单,34,Contextual actions,工具栏, 工具栏被选中时会有外观上的改变, 用于一个或多个选项 典型操作是通过触摸和长按来进行, 像一般工具栏，分为3部分, Done按钮（用于释放选中的详情） 被选中的详情 Action 按钮, 实现的时候使用ActionMode,35,实现,工具栏, 基础的Action Bar

6、, Theme.Holo or targetSdkVersion 11. Action项是从res/menu/, 定制化的Action Bar, ActionBar class, showAsAction 用于菜单选项,36,http:/j.mp/customizing-action-bar,兼容性,工具栏,1. 制作定制工具栏给蜂巢之前版本的系统,2. 另外, 按照标准来设计菜单,37,电话和小屏幕,工具栏, 在原有的空间间隔基础上做改变, 图标+文本改变为只有图标, 隐藏多余的图标，通过菜单键调用, 把单独的工具栏分为二个, 详情部分可以设置到屏幕上方的第二排，在Action Bar的下面

7、 Action可以放到下方的Action Bar, 2-3 个主要操作按钮, 其他的放到浮动菜单（Overflow）, 坚决从showAsAction = “ifRoom” or “always”,38,电话和小屏幕,Action Bar,39,介绍,多栏布局, 利用更大更多面积的优势, 给予更多的空间, 把多个单独手机屏幕的内容融合到一个大屏幕去显示 避免过长的线, 屏幕右侧部分通常应该呈现更多的内容，屏幕左侧部分展示已选中条目的详情.,40,多栏布局 横竖屏切换 功能完整性与横竖屏使用无关 用户无需旋转设备来完成某一任务,Strategies,Stretch (e.g. Settings)

8、 Expand/collapse (e.g. Google Talk),Stack (e.g. Calendar) Show/hide (e.g. Gmail), 应针对每一个屏幕而设计，而不是每一个应用 在横竖屏切换时，可使用头部导航来隐藏或显示主体栏 e.g. Gmail conversation view41,实现 Fragments,多栏布局, Feagments 类, 在布局XML中, 可选择使用标签,42,Fragments简介,多栏布局, “Fragments” 就是一个Activity, 在一个Activity中可重复使用Fragments Fragments之间相互不影响，独

9、立运行, Fragments 不一定是可见的, Fragments 有自己的生命周期，不一定非要有视觉架构, .但这只是在说用户界面,43,兼容性,多栏布局, 可以在Android支持中心里通过SDK管理器来获得Fragment, 使用 getSupportFragmentManager 所有的activities都可扩展为FragmentActivity,44,http:/j.mp/fragments-for-all,多窗口布局,使用资源 你也许已经见过: drawable-ldpi/ drawable-mdpi/ drawable-hdpi/ 但你也可以: layout-normal/ l

10、ayout-large/ layout-xlarge/ layout-xlarge-port/,使用资源,多栏布局, Activities可以通过不同的Fragment配置来改变布局,46,使用资源,多窗口布局, Activities可以通过不同的Fragment配置来改变布局,47,Stack,(e.g. Calendar), ,48,多窗口布局 使用资源 Activities可以通过不同的Fragment配置来改变布局 layout-xlarge-land/my_layout.xml ”,Stack (e.g. Calendar), ,49,多窗口布局 使用资源 Activities可以通

11、过不同的Fragment设定来改变布 layout-xlarge-port/my_layout.xml,Stack (e.g. Calendar),资源利用,多窗口布局, 其他的快捷应用:, Fragments可用于不同的页面布局 列表中的内容可根据需要展示或去掉细节 integer 和 boolean可以赋不同的值,50,介绍,应用导航, 蜂巢系统中最出色的改动之一, 增加了更多的途径和方式，让用户可以更直接的进入一个应用，甚至直接进入应用的深层页面,51,亮点,应用导航,52,Richer notifications,Richer home screen widgets,Recents,应

12、用导航 导航和用户习惯 Android 从传统上来讲，更依赖短时间记忆:, 用户容易记住刚刚做过什么 可以快速便捷的返回上一个应用 更好的对近一段时间发生的事件进行排序 更多潜在的错误和意外, 用户有强大的结构性记忆 可以记忆单个应用中每一屏之间的关系 在使用Web App的时候更习惯于返回桌面 更清晰的行为预测 53,Back导航 与 UP导航,应用导航, 系统的BACK 导航用于记录屏幕之间的相互切换 应用的头部导航用于控制单个软件的层级结构,54,例子,应用导航,55,联系人,联系人,56,联系人,联系人 详细资料,例子,应用导航,联系人,57,联系人,联系人 详细资料,BACK,例子,

13、应用导航,联系人,58,联系人,联系人 详细资料,UP,例子,应用导航,联系人,例子,应用导航,59,联系人,联系人,60,联系人,联系人 详细资料,例子,应用导航,联系人,61,联系人,联系人 详细资料,写电子邮件,例子,应用导航,联系人,62,联系人,联系人 详细资料,写电子邮件,例子,应用导航,联系人,UP,联系人,联系人 详细资料,写电子邮件,例子,应用导航,电子邮件,联系人,BACK,你需要做的,应用导航, 如果你有一个带多层级结构的应用, 那么应该在Action Bar中支持UP导航, 如果你的应用程序支持系统的深链接进入你的深层页面, 那么在堆栈中，将当前屏幕置于目标程序之上,

14、E.g. Widget中的深链接, E.g. 通知中的深链接,64,介绍,超越传统列表, 富媒体应用视图, “Hero moments” 打破了单调的列表视图, 鼓励像翻阅一本杂志一样进行更深入的探索,65,实例,超越传统列表,66,实现,超越传统列表, CarouselView, 脚本渲染, 用于定制服务, FragmentPager, Workspace,用于同时展示一个内容或者一页内容, 不要使用Gallery widget,67,http:/j.mp/io2011-carousel-sample,个案研究 Google I/O 2011 App,下载这个应用. 我们等你.,69,htt

15、p:/goo.gl/UhnLT,基础,原理, 单一的 .APK包，同时支持平板和手机, 给-xlarge-v11定制 的布局, 绘制, 风格, 和尺寸资源,Gingerbread（Android OS 2.3及之前版本）平板电脑将只能使用普通的手机布局, Fragment 兼容库,73,原理 活动, 通用: 手机专属: 平板专属: 不同类型的Activities: HomeActivity SessionsActivity (single fragment) SessionsMultiPaneActivity Activity helpers ActivityHelper ActivityHe

16、lperHoneycomb BaseSinglePaneActivity BaseMultiPaneActivity,工具栏,原理, 为手机定制Action Bar(ActionBarCompat), 使用res/menu/, Action Bar和按钮只是体现风格的区别,75,public void onPostCreate(Bundle savedInstanceState) ,SimpleMenu menu = new SimpleMenu(mActivity);,onCreatePanelMenu(Window.FEATURE_OPTIONS_PANEL, menu); for (int i = 0; i menu.size(); i+) ,MenuItem item = menu.getItem(i);,addActionButtonCompatFromMenuItem(item);, ,绘制标签 手机和平板, .9.png, drawable-hdpi, drawable-xlarge-mdpi-v11,76,主体内容尺寸 手机和平板, 20dp 32sp 64dp 77,values/di