Android40UI设计规范培训

Android4.0设计标准2021年1月数据中心小组Android4.0设计10大改变设计概述设计风格设计模式控件典型案例目录Android4.0设计10大变化设计概述设计风格设计模式控件Android4.0设计10大改变设计概述设计风格设计模式控件典型案例Android4.0设计10大变化1.导航栏2.操作栏3.多面板布局4.选择5.返回和向上6.主题样式7.Widgets8.兼容性9.强调纯粹的Android应用设计10.其他细节Android4.0设计10大改变设计概述设计风格设计模式控件典型案例1.导航栏由之前的物理按键导航返回、菜单、搜索、主页变成了嵌入屏幕的虚拟按键返回、主页、最近任务。把菜单收起的同时，在软件界面的操作栏上增加了“更多操作，如以下图中的黄色圆点所示。早期版本4.0及以上版本目前为了兼容之前版本及照顾用户之前的操作习惯，多采用隐藏底部导航栏，仍使用实体按键的方式。在很多时候，原菜单键的功能与“更多操作功能接近Android4.0设计10大改变设计概述设计风格设计模式控件典型案例2.操作栏操作栏从之前的app图标操作，变成如以下图所示：1.向上2.Spinner3.重要操作4.更多操作。4.更多操作actionoverflow是集合操作栏中不常用的和非重要操作的地方。1.向上按钮，点击后是去到当前界面的上一个层级，非第一层级界面有此按钮，第一层级界面那么无向上按钮；2.Spinner是用于展示内容的下拉菜单，其内容包括视图的快速切换和显示相关内容的完整信息；Android4.0设计10大改变设计概述设计风格设计模式控件典型案例2.操作栏操作栏可以拆分成如图中1主操作栏2顶部栏3底部栏如果需要，顶部栏可以承载选项卡tabs，底部栏可以承载主要操作和被收起的更多操作actionoverflow。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例2.操作栏在空间足够的横向屏幕展示界面时，被拆分的操作栏，可以灵活合并在一起。如以下图中的端横竖屏操作栏所示。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.多面板布局多面板布局更多的是针对平板电脑，把端的目录视图和详情视图两个层级的界面，甚至更多的页面，复合展示在同一个界面中，有效地利用平板电脑的屏幕空间，扁平化层级结构，简化导航。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.选择长按Android2.3及更早期系统版本的内容项时，出现情境菜单的浮出层。长按Android4.0系统版本的内容项时，情境菜单栏覆盖在操作栏上。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.选择在情境菜单环境下，支持批量操作。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.返回和向上返回按键用在全局的虚拟导航栏中，基于用户最近查看的界面历史，采用时间倒序的方式，连接界面间的关系。向上按钮用在操作栏的左侧，基于层级结构，点击后是去到当前界面的上一个层级，假设当前界面已经是最高一级，那么没有向上按钮。黄色局部为点击向上按钮后的页面路径，红色局部为点击返回按钮后的页面路径Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.主题样式推出三套默认主题：Holo浅色主题、Holo深色主题、Holo浅色底+深色操作栏主题。主推app在这三套默认主题的根底上做设计，以加快app研发效率，但只是建议使用，并没有完全强制。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.widgets在原apps页里，用选项卡tabs的方式增加了widgets内容。一改用隐晦方式添加widget的操作和把widgets零散放在桌面呈现的方式。在app设计中，应该提高对widget设计的重视程度。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例8.兼容性向后兼容，考虑到物理导航按键如何兼容Android4.0系统和虚拟导航如何兼容Android2.3和更早期版本的apps。在物理导航按键上安装android4.0系统，点击物理按键，在屏幕下方出现更多菜单actionoverflow的内容。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例8.兼容性向后兼容，考虑到物理导航按键如何兼容Android4.0系统和虚拟导航如何兼容Android2.3和更早期版本的apps。在新的虚拟导航上安装为android2.3及更早版本系统设计的app，会在屏幕下方的虚拟导航的右侧出现actionoverflow按钮如上图的黄色局部。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例9.强调纯粹的android设计在Android4.0app设计准那么中，特别强调为Android设计纯粹的Androidapp，切勿使用其他平台特定元素的本卷须知，有以下5个方面：1强调视觉元素的样式要符合android系统；2不用其它平台特有的图标；3不在界面的下方使用选项卡tabs；4区分向上和返回，不在操作栏上使用返回样式的按钮；5不在内容列表里使用向右箭头。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例10.其他细节增加许多新的交互细节、信息展示和视觉样式等标准。有几点在此强调下：1新增了横滑移除内容的交互手势。在局部模块中，支持向左或向右横滑移除内容的操作，如最近任务和消息通知抽屉。2视觉的平面化，栅格风正在4.0中上演。3在writingstyle中明确指出写wording时，要直接使用第二人称“你。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例Android4.0设计概述1.创新的视觉2.设计原那么3.UI概览Android4.0设计10大改变设计概述设计风格设计模式控件典型案例创新的视觉1.迷惑我吧漂亮不只是外表上的。Androidapps在多个层次上都漂亮且具有美感。它的转场快速清晰；排版和样式干脆利落及具有意义。App图标本身就是件艺术品。就像一个制造精良的工具，你的app应该追求漂亮、简洁，并创造一种神奇的体验，这些都可以使你所向无敌。2.简化我的生活Androidapps能让生活更简单且容易理解。当人们第一次使用你的app时，他们应该凭直觉就能了解到最重要的功能是什么。但不能只为用户的第一次使用而设计，Androidapps把正在进行的后台杂务如文件管理和同步都隐藏。简单的任务从来不要求复杂的步骤，而复杂的任务会为人量身定做。任何年龄与文化的人都可以感觉到很好的操纵感，不会因过多项选择择和无关紧要的动画而感到不知所措。3.让我感到惊艳只是让App易于使用还缺乏够，Androidapps希望人们能不断尝试新东西和用创意的方式来使用app。Android让人们通过多任务、通知和跨app分享，把apps结合到新的工作流中。同时，你的app还应该是很个人化的，让人们通过清晰和优雅的方式享受到伟大的科技。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计原那么1.迷惑我吧n惊喜n一个漂亮的界面，一个精心准备的动画，或一个适时的声音效果都是体验的乐趣。微妙的效果都可以奉献出强大的力量。n个性化n人们喜欢增加个人的东西，它们让人感觉更有亲切感及控制感。提供实用、漂亮、有趣、可自定义，且不阻碍主要任务的的默认设置。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计原那么1.迷惑我吧n真实对象比按钮和菜单更有趣让人们直接触摸操作你app里的对象。它可以减少执行任务的认知负担，同时可以更多地满足情感需求。n记住人们的习惯学习人们的使用习惯。跟随用户的使用行为，比一遍又一遍的重复问要好。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计原那么2.简化我的生活n尽量表达简洁使用简单词、短句子。人们看到长句会不自觉的跳过。n图片比文字好理解使用图片来解释想法。图片获得人们更多的注意力，比文字更有效率。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计原那么2.简化我的生活n为我作决定，但要让我有决定权n尽最大努力去猜而不是什么都问用户。太多的选择和决定会让人们不爽。为了预防你的猜测是错的，要提供后退。n只在需要的时候显示我需要的内容n人们看到太多项选择择会不知所措。把任务和信息打散成一个个小的、容易操作的内容。隐藏此时不必要的操作选项。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计原那么2.简化我的生活n让我知道我在哪n知道自己在哪可以给人们自信。让你的app每页看上去都有区别，使用转场显示各个屏之间的关系。在任务进程中提供清晰的反响。n永不丧失我的东西n为人们保存他们花时间创立的东西，并在任何地方都可以获取它们。记住设置，个性化触控，及创立、平板电脑和电脑之间的同步。这可以使升级成为世界上最容易的事。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计原那么2.简化我的生活n如果看上去一样，就应该操作也一样n为了更好的分辨功能，让他们视觉上的区别更大一些。防止那些看上去差不多的样式但操作起来却不一样。n真的很重要时才打断我n你要像一位贴心的助理一样，帮用户挡住那些不重要的骚扰。因为打断会令人费心且沮丧，所以人们希望保持专注，除非是非常重要和讲求时效的事情，才愿意被打断。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计风格1.设备和显示2.主题样式3.触摸反响4.标准和网格5.字体6.颜色7.图标8.写作风格Android4.0设计10大改变设计概述设计风格设计模式控件典型案例1.设备和显示Android赋予了成千上万的、平板电脑和其它设备动力，它们包含了各种各样的屏幕大小和构成元素。利用Android灵活的排布系统，你可以创立从大屏幕大到小屏幕优雅转换的apps。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例1.设备和显示n灵活n扩展和缩小你的布局来适应不同的高度和宽度。n优化布局n在大设备上时，利用额外的屏幕版面。创立包含多视图的复合视图，以展示更多的内容和更便捷的导航。n为全部设备做好准备n为不同屏幕分辨率提供资源，保证n你的app在任何设备上都漂漂亮亮。n策略n当你为不同屏幕设计时，从哪开始？一个方法是：在标准根底MDPI上开始，然后放大或缩小，以适应到其它尺寸。另一个方法是从设备的最大尺寸开始，然后缩小，并适应到你需要的小屏幕尺寸。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例2.主题样式主题样式是Android为了保持app或操作行为的视觉风格一致而创造的机制。风格指定了组成用户界面元素的视觉属性，如颜色，高度，空白及字体大小。为了各个app在平台上到达更好的统一效果，这次Android雪糕三明治系统为你的app提供了3套系统主题：Holo浅色主题Holo深色主题Holo浅色底+深色操作栏主题Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.触摸反响状态使用颜色和光作为触摸的反响，加强手势行为的结果，暗示哪些操作能用，哪些操作被禁用。无论何时用户触摸了一个可操作区域，你的app都要提供视觉反响。使用户知道哪些可操作。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.触摸反响沟通当有更复杂的手势时，帮助用户理解操作的结果。例如，在最近任务里，当你开始横划缩略图时，它会变暗淡。这帮助用户理解横划会引起对象的移除。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.触摸反响边界当用户尝试滚动超过内容边界时，要给出一个明确的视觉线索。例如，如果一个用户在第一个home屏继续往左滚动，屏幕的内容就会向右倾斜，让用户知道再往这个方向的导航不可用。很多Android可滚动的UI部件如列表和网格列表都已经内置支持边界反响。如果你要自定义，记得要做边界反响。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.标准和网格设备不仅有屏幕物理大小的不同，还有屏幕密度的不同DPI，dotsperinch。屏幕物理大小是小于600DP或平板电脑大于或等于600dp的物理尺寸。屏幕密度是LDPI，MDPI，HDPI，XHDPI。通过为不同屏幕大小设计不同的布局，为不同屏幕密度提供不同的位图图像，来优化您的app的用户界面。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.标准和网格48dp规律通常把48dp作为可触摸的UI元件的标准。为什么是48dp？一般来说，48dp转化为一个物理尺寸约9毫米。建议的目标大小为7-10毫米的范围，这是一个用户手指能准确并且舒适触摸的区域。如果你设计的元素高和宽至少48dp，你就可以保证：1.触摸目标绝不会比建议的最低目标7mm小，无论在什么屏幕上显示。2.在整体信息密度和触摸目标大小之间取得了一个很好的平衡。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.标准和网格注意空白每个UI元素之间的间距是8pd。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.字体为了更好支持排版，Android冰淇淋三明治介绍一种新的字体：Roboto，专门为高分辨率屏幕下的UI而设。目前TextView的框架默认支持常规，粗体，斜体，粗斜体。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.字体默认文字颜色AndroidUI使用了以下默认颜色样式：textColorPrimary和textColorSecondary。浅色主题使用textColorPrimaryInverse和textColorSecondaryInverse.。框架里的文本颜色样式同样支持使用时不同的触摸反响状态。字体大小使用不同大小字体比照，可以创立有序的，易理解的布局。然而，在相同的用户界面有太多不同大小的字体，会很乱。Android框架使用以下的大小：Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.颜色使用颜色是为了强调内容。选择适合你品牌的颜色，可以为视觉元素提供更好的比照。注意的是红绿颜色对红绿色盲不适用。调色板蓝色是android调色板里的标准颜色。每个颜色都有对应的一系列饱和度，供需要的时候使用。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标图标在屏幕中虽然只占一小块地方，但它为操作、状态和app提供了一个快速且直观的表现形式。启动图标启动图标是放在home或全部app界面上代表你的app的视觉表现。由于用户可以改变home页的壁纸，所以要确保你的启动图标在任意壁纸上都清晰可见。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标启动图标尺寸和缩放在移动设备上的启动图标必须是48x48dp。在应用市场上启动图标必须是512x512dp。启动图标大小整体大小为48x48dp启动图标风格可以使用一个独特的剪影。三维，前视角带有一点点从上往下的透视，让用户可以感觉到有一定深度。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标操作栏图标操作栏图标是平面的按钮，代表用户在你的app中可以使用到的最重要的操作。每一个图标都应该用简单的比喻来传达一个单纯的概念，并让大局部人都能一目了然。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标操作栏图标尺寸和缩放的操作栏图标是32x32dp。焦点区域和大小整体大小32x32dp图形区域24X24dp风格象形，平面，不用过于细节，流畅的曲线或锋利的形状。如果你的图形太长条如、书写笔，向左或向右旋转45，以填补空间的焦点。描边和空白之间的间距应至少2dp。颜色颜色:#333333可用60%透明度禁用:30%透明度颜色:#FFFFFF可用:80%透明度禁用:30%透明度Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标小/场景图标在你的app中，使用小图标提供操作或特定工程的状态。例如，Gmailapp，消息前的星形图标，标记为重要消息。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标小/场景图标尺寸和缩放小图标为16x16dp风格中性，平面，简洁。使用填充形状比细描边更容易看到。使用单一的视觉隐喻，使用户可以很容易地识别和理解它的目的。颜色带目的性的使用颜色。例如，Gmail使用黄色的星形图标表示标记消息。如果图标是可操作的，选择一个与背景比照大的颜色。焦点区域和大小整体大小16x16dp可视区域12X12dpAndroid4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标通知图标如果你的app有通知，要提供一个每当有新通知时显示在状态栏的通知图标。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.图标尺寸和缩放的操作栏图标是24x24dp。焦点区域和大小整体大小24x24dp可视区域22X22dp风格保持风格的平面化和简洁，使用与启动图标相同的视觉隐喻。颜色通知图标必须是完全白色。而且，系统可能会缩小或变暗图标。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例8.写作风格保持简短。简明，简单，准确。从限制使用30个字符包括空格开始，除非必要绝对不增加字符。保持简单。假装你正在与一个精明能干的人说话，但他不懂技术术语、英语不是很好。使用简短的话，主动动词，和普通名词。保持友好。使用缩写。直接使用第二人称“你。如果这不是你休闲对话时会用的句子，那大概它也不适用于此。防止唐突和骚扰，使用户感到平安，愉快，充满活力。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例8.写作风格先讲最重要的事情。前两个单词约11个字符，包括空格至少应包括一个最重要的信息。如果不是这样，重新开始。仅描述必要的。不要试图解释细微的差异。防止重复。如果一个重要的词在一个界面或一段文本内不断重复，想方法只用它一次。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例设计模式1.新的android4.02.手势3.应用结构4.导航5.操作栏6.多面板布局7.横划视图8.选择9.通知10.兼容性11.Android就是androidAndroid4.0设计10大改变设计概述设计风格设计模式控件典型案例1.新的Android4.0导航栏Android4.0去除了传统物理按键的需求，以虚拟按键代替。虚拟按键包括返回，Home和最近任务。通过阅读本章中的“兼容性可以了解操作系统如何适应的物理按键，以及如何支持android3.0以前的旧版本那些导航按键包括menu的apps。操作栏在android的app中，操作栏是最重要的结构元素。它提供了跨整个平台的一致性导航，并展示你的app的重要操作。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例1.新的Android4.0多面板布局设计app时，适配不同设备和屏幕大小对android来说非常重要。多面板布局，允许你将在小屏幕上单独展示的界面，以富态视图的方式一同展示在平板电脑的同一个界面上。选择长按的手势，在传统操作中是用来展示内容项的情境菜单，现在用于内容项的选择。中选择内容项的时候，情境操作栏可以展示你app的重点操作功能。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例2.手势触摸触发指定项的默认功能动作：按下抬起长按进入内容项选择模式。允许你在一个视图中选择一个或更多的项，用情境操作栏对所选资料进行操作。防止使用长按来展示情境菜单。动作：按下等待抬起Android4.0设计10大改变设计概述设计风格设计模式控件典型案例2.手势横划滚动满屏的内容，或者在同一层级中转换导航间的视图。动作：按下移动抬起拖动在视图中重新排布资料的位置，或者移动资料到容器中如，Home界面中的文件夹动作：长按移动抬起Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构app结构app多种多样，以满足各种不同的需求。比方：计算器或照相机，这种在一个屏幕里围绕一个核心功能的app，其主要目的就是在不同的操作中切换，而不是有更深层次导航的appGmail或应用市场，这种结合了一系列深层级内容视图的app你的app的结构，主要取决于你想展示给用户的内容和任务。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构常用结构一个典型的androidapp包括顶级视图和详情/编辑视图。如果导航的层级结构是深而复杂的，那么目录视图可以用于连接顶级视图和详情视图。顶级顶级视图视图App的顶级通常包括其支持的不同视图。视图既可以是展示相同内容的不同呈现方式，又可以是展示你的app的不同功能模块。目录视图目录视图目录视图允许你进入更深层级的内容。详情详情/编辑编辑视图视图详情或编辑视图是你享受或创造内容的地方。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构顶级启动界面的布局需要特别注意。这是用户启动app后看到的第一个界面，所以，首屏应该同时满足老用户和新用户。问问自己，“我的典型用户在app中最想做些什么？，并根据这个来设计首屏的体验结构。市场启动界面首先展示了进入app、音乐、图书和电影的导航入口。同时定制了用户可能感兴趣的丰富的推荐内容。并在操作栏上给出了快速搜索的入口。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构把推荐内容置前许多app把焦点集中在推荐内容的展示上。防止只在界面上出现导航，要让用户在你的首屏中快速获得他们想要的内容。选择具有视觉吸引力，且适当的内容类型和屏幕大小的布局。为导航和操作进行操作栏设置在app所有的界面中，都应该显示操作栏，提供一致的导航和展示重要的操作。层级操作栏应该考虑：使用操作栏展示你的app图标或标题。如果你的第一层级包括多种视图，或在多个账户中切换是一个重要的使用情景，确保用户在增加视图控制的操作栏上操作容易。如果你的app允许用户创立内容，考虑在第一层级就给出创立内容的入口。如果你的内容可以被搜索，就要在操作栏中包含搜索操作。人们可以通过搜索打破导航层级结构，进行全局性搜索。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构让人们一眼就能认出你的app为你的app创造识别性的重要性超越了操作栏。你的app通过它的内容版式和交互方式形成自己的一个识别点。尤其是富媒体应用，尝试创造出独特的布局，展示你的内容和超越单调的列表视图方式。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构分类一般来说，一个层级深的、数据驱动的app的目的是通过有组织的分类，引导用户可以进入查看和管理。扁平化你的app层级可以减轻用户对导航层级的负担。尽管app的层级结构取决于内容，但有几个方式，可以减少繁冗的导航认知。使用选项卡tabs结合分类选择和内容的展示此方法适用于分类熟悉或者分类数量不多的情况。这种方法的优势是减少了一个层级，而且内容仍然在用户关注的中心区域。在丰富的内容分类之间的横向导航如以下图更像是一种随意的浏览，而不是有明确步骤的导航。如果分类是熟悉的、可预见的、或者是密切相关的，使用滚动选项卡scrollingtabs并非所有的项同时展示。控制滚动选项卡数量，减少导航的滚动。经验法那么：不超过5-7个选项卡。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构应用市场用选项卡同时显示类别的选择和内容。用户可以通过在内容上左右横划来选择分类。如果在选项卡中的类别不密切相关，偏向于用固定选项卡，以便同时查看所有类别。YouTube使用固定选项卡来切换不同的、相对无关的功能区域。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构允许穿越层级的操作利用快捷键让用户更快到达目的。允许用户在第一层级调用对二级内容直接进行操作的列表项，如以下图。这让人们直接对内容进行操作，而不必一路遵循导航层级结构。音乐允许用户在分类视图专辑里对歌曲项直接操作，从而去掉了进入歌曲详情页进行操作的导航需求。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构作用于多个内容项尽管目录视图大多为引导人们进入内容详情页效劳，但请记住，它也常常可以用于对内容集进行批量操作。例如，如果允许人们在详情视图中删除工程，那就应该允许他们在目录视图中删除多个工程。详情视图里的操作同样适用于内容集。使用多项选择让app可以多内容项的目录视图中，同时对多个项进行功能操作。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构详情页详情视图允许你查看和操作你的内容。详情视图的布局展示取决于内容的类型，在不同的app之间相差甚远。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构布局考虑人们将在详情视图中执行的操作，并安排相应的布局。针对沉浸式内容，利用关灯模式允许用户全屏专心查看内容。Google图书的详情视图复制人们读书的真实经验。翻页的动画强调了这种读书真实经验的概念。利用app进入关灯模式，即隐藏所有系统界面的方式，营造一种沉浸式的体验。Peopleapp详情页的目的，就是为了展示通讯选项。列表视图利于高效扫视和快速访问 号码、邮件地址和其他信息项。号码呼叫和信息发送被合并到同一行中。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构让详情页之间的导航高效如果你的用户想要查看多个工程，请允许他们在详情视图间切换。使用横划查看或其他技术，如幻灯片模式，来到达这个目的。Gmail使用横划的查看方式，来实现详情页间的切换。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.应用结构清单l在你的首屏中，找到一种方式展示有用的内容。l使用操作栏提供一致的导航。l使用横排导航和快捷方式，扁平化你的层级结构。l使用多项选择来允许用户对内容集进行操作。l允许通过横划查看的方式，在详情页中快速切换。除了支持横划手势让图片由左至右切换外，Gallery还提供幻灯片的控制模式让用户快速跳转到指定图片。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.导航“向上去到上一级和“返回“导航一致的导航是整体用户体验的重要局部。一些与用户行为不一致和出乎用户意料的操作，会让用户感到沮丧。Android3.0介绍了一些全局导航操作的重要变化。遵循以下“返回和“向上去到上一级的设计原那么，让你的app的导航符合用户的预期和操作。Android2.3和更早期的系统依赖于返回按钮去支持app中的导航。在android3.0操作栏的介绍中，第二个导航机制出现：“向上的按钮，包括一个app的图标和向左的符号。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.导航比照“向上和“返回操作app中的向上按钮，用在基于层级结构的界面关系间的导航。例如，如果界面A展示的是一个列表项，选择其中的一个项，会进入到界面B意味着界面B会展示更多的细节，那么在界面B应该提供一个“向上按钮去到界面A。如果此界面是一个app中最高的一个层级如，首页，那就不应该出现“向上按钮。系统“返回按键，是基于用户最近查看的界面历史的导航，采用时间倒叙的方式连接界面间的关系。当上一个视图界面与当前界面有上下层级结构关系时，点击“返回按键和点击“向上按钮会有着同样的结果，这是一个常见的现象。然而，不同的是，“向上按钮可以确保用户停留在同一个app中，而“返回按钮可以让用户回到首屏，或者回到另一个app，具有一个跳跃性。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.导航比照“向上和“返回操作返回按钮也能支持一些无直接联系的界面间的导航：消除浮出窗对话窗口、弹出层消除情境操作栏，以及把选中态从选中项中移除隐藏屏幕上的键盘层级序列时间序列Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.导航app中的导航通过多个入口导航进入到界面有时一个界面在app的层级结构中，不会有一个严格的位置，用户能够从不同的入口进入到这个界面，比方，可以从app的任何一个界面中进入到设置界面。在这种情况下，“向上按钮应该选择去到触发进入设置入口的相关界面，与“返回的动作一致。改变界面视图改变界面视图的选择不会影响“向上和“返回的操作：界面仍然在app层级结构的同一个地方，并且没有创造新的导航历史。改变视图的案例如下：*通过使用选项卡tabs或左右横划切换视图*通过下拉列表又称折叠选项卡切换视图*列表筛选*列表分类*更改显示特性如，放大Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.导航在同一层级的界面间导航当你的app支持从一个列表项目录视图导航到其中一个项的详情视图，它通常需要支持到从列表的其中一个项中去到列表顺序中的另一个项。例如，在Gmail中，通过左右横划手势可以很容易地在同一个邮箱中，查看前后邮件的内容。如同改变屏幕的视图一样，这种导航不会改变向上或返回的动作。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.导航然而，当用户浏览的详情视图没有绑定在一个统一的相关列表中时，会出现一个值得关注的问题，例如，浏览应用市场里同一个开发商的apps，或者同一个歌手的专辑。这种情况下，点击链接会创造历史，导致“返回按钮会逐个贯穿用户所查看过的相关内容界面。使用“向上按钮应该绕过这些相关的界面，直接去到最近查看内容的上一级界面。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例3.导航你完全可以基于你对详情视图的了解，使去到上一级的操作行为更聪明便捷。如果我们从应用市场的案例扩展，假设用户从最后的图书视图去到电影作品的详情视图。这种情况下，向上按钮能够去到电影界面的上一级，一个用户从未到过的界面。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.导航app外的导航有两种类别的导航能通过app的层级结构，从你的app之外到达你的app之内的界面：app间的导航，例如通过有目的的操作来实现。从系统到app的导航，例如通过通知和系统主界面的插件。Gmail提供了一些对应的案例。app间导航的案例是，点击某个app的“分享后直接跳转到Gmail的编写界面。从系统到app导航的案例是，新消息通知和主界面的插件都能够进入到收件箱界面，把用户直接带到对话视图中。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.导航app间的导航当直接通过一些有目的的操作，从另一个app深入到你的app的层级结构中时，“返回键将会返回到触发进入当前视图的界面。例如，在应用市场中选择一本书并分享，用户会被直接引导到Gmail的编写界面。在那里，向上操作是返回到收件箱正好同时是编写界面的上一级和app的首页，返回操作那么是去到应用市场。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例4.导航从系统到app的导航如果是通过系统的通知机制或主界面的插件到达你的app，向上行为在这里的描述与上述的app间导航的一致，都是去到当前所在界面的上一个层级。对于“返回按键，需要给到用户一个心理预期，点击“返回按钮的时候，可以遵循任务返回路径去到app的第一层级界面。这样，在退出之前，忘记如何进入你的app的用户可以平安的去到app的第一层级界面。例如，Gmail在Home界面的小插件有一个按钮可以直接去到他的编辑界面。操作并去到编辑页面后，返回按键首先会返回到收件箱，然后紧接着返回到Home界面。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏操作栏可以说是androidapp中最重要的结构元素。它在每个屏幕的的顶部都有一块专用的区域，通常会贯穿整个app。操作栏的主要目的是：突出重要的操作如搜索并用可预见的方式访问。支持一致的导航和app内视图的切换。通过把少用的操作收起到更多操作里，以减少混乱。为你的app提供一个专用的空间。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏常规的组织结构操作栏被分为适应于大多数app的四个不同的功能区域。1.app图标app图标用app的图标建立起你的app的识别。如果你愿意，它可以被各种logo或品牌图标代替。重要：如果app当前不是在第一层级的界面，需要保证向上一级的符号展示在app图标的左边，让用户能去到上一个层级。更多关于向上一级的导航的讨论，见“导航模块。app图标中没有和有向上一级操作的展示如上图。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏视图控件如果你的app可以用不同的方式展示内容，操作栏里的这个局部可以允许用户切换视图。视图切换控件的样式有下拉菜单或选项卡控件。如果你的app不能支持视图切换，你也可以用这个空间来展示非互动的内容，如一个app的标题或更长的品牌信息。操作按钮在操作栏里，展示出你的app中最重要的操作。不能展示在操作栏里的操作，可以自动移到“更多操作里。更多操作把不常用的操作放到更多操作里。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏适应横竖屏旋转和不同的屏幕尺寸最重要的界面问题之一，是需要在创立app的时候考虑如何在不同的屏幕尺寸下适应方向的旋转。你可以通过使用次操作栏的方式适应这些改变，允许你在主操作栏的下方或屏幕底部的多个栏中拆分操作栏的内容。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏操作栏的布局本卷须知在多操作栏上拆分操作内容时，你通常可能有三个放操作栏内容的位置：1.主操作栏2.顶部栏3.底部栏如果用户能从特定的界面去到层级结构的上一层，主操作栏至少要包括向上的符号。通过使用选项卡tabs或顶部栏中的下拉菜单spinner，来允许用户快速切换你的app中提供的各种视图。如果需要的话，可以在底部栏展示操作和更多操作。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏情境操作栏CAB情境操作栏CAB是一个在操作特定子任务期间，重叠在app操作栏上的临时操作栏。CABs是通常用于涉及内容或文字选择的任务。1.app图标在浏览器和Gmail中的情境操作栏Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏选择一个内容项长按后会出现选择情境操作栏CAB，并触发选择模式。从这里，用户可以：通过触摸内容项，选择添加元素。从情境操作栏触发一个操作，会应用于所有被选择的内容项。然后，情境菜单栏会自动关闭。通过点击导航栏里的返回按钮或者情境操作栏里的复选标记按钮，可以关闭情境操作栏。这将移除情境操作栏中所有的选中态高光。允许你的用户通过长按被选内容来使用情境操作栏。你可以控制一个情境操作栏里的操作内容，以便插入你想要用户执行的操作。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏操作栏的元素选项卡tabs选项卡展示app视图的同时，使其易于浏览和切换。如果你希望用户频繁切换视图，就使用选项卡的样式吧。有两种类型的选项卡：滚动的和固定的。1.app图标固定选项卡滚动选项卡Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏Spinners下拉菜单Spinner是用户切换app视图的下拉菜单。以下情况使用下拉菜单而非主操作栏：l你不想放弃垂直屏幕上专属的选项卡栏。l你期待使用你的app的用户频繁切换视图。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏操作按钮用操作栏中的操作按钮，展示你的app中最重要的功能。思考哪些按钮会最常使用，并相应的排列顺序。由于可用的屏幕大小有限，系统只会显示最重要的操作，把其它放在“更多操作里。1.app图标使用FIT作为优先展示操作按钮的准那么。F-频繁*你的用户是否在访问这个界面的时候，十次中有七次会使用这个操作？*他们通常会连续使用几次吗？*每次使用都会繁复地增加额外操作吗？I-重要*你希望大家都发现这个操作，因为它特别酷或有卖点吗？*是否在某些情况下需要很容易就能操作？T-典型*在相似的apps中是否把这个操作作为典型第一层级操作？*在使用场景中，如果把它收在更多操作里，用户会感到惊讶吗？如果符合F,I或T，就放在操作栏里，否那么，它属于更多操作。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏更多操作actionoverflow操作栏里的更多操作为你的app中不常使用的操作提供入口。更多操作的图标只会出现在没有硬件按键menu的上。主操作栏上可以放多少个操作？操作栏的容量取决于以下规那么：主操作栏上的操作按钮不会占用超过整栏宽度的50。底部栏上的操作按钮可以占用整栏。屏幕宽度决定将有几个操作项可以放在主操作栏上：小于360dp2个图标360499dp3个图标k500599dp4个图标l大于600dp5个图标1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏分享内容每当你的app分享内容如图片或影片，在操作栏上使用一个分享操作接口。设计分享操作接口是为了通过展示最近使用的分享效劳来到达快速分享的目的，这个接口放在下拉菜单spinner按钮的旁边，内容还包括其它的分享选择。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例5.操作栏操作栏清单当你打算拆分你的操作栏，问自己以下问题：a.对于这个任务，查看导航有多重要？如果查看导航对于你的app来说很重要，那么使用选项卡tabs为了快速切换视图或spinners.b.app中哪些操作需要直接放在操作栏上，哪些可以移到更多操作里？使用FIT准那么来决定操作是展示在操作栏的顶层上还是收起放在更多操作里。如果顶层的操作数量超过了主操作栏可以容纳的数量，那么可以把操作放在底部栏里。c.还有哪些足够重要的内容需要长期展示？有时，显示情境信息对于你的app来说也很重要。比方，收件箱中的未读邮件数量，播放器里的正在播放歌曲信息。精心地方案那些你想展示的重要信息，并根据方案调整你的操作栏结构。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.多面板布局在创立Android应用时，要记住Android设备有许多不同的屏幕尺寸和类型。要确保你的应用能通过调整其内容来适应不同的屏幕尺寸和方向，以到达一致的平衡和美观的布局。多面板是一种让你的应用到达这种目标的很好方式。他们允许你在横屏有更多空间时将多个视图结合为一个复合视图，而在空间比较少时那么将他们分开。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.多面板布局将多个视图结合为一个在较少小的设备上你的内容通常被分为一个主表格或列表视图和一个详情视图。触碰主视图的条目会翻开一个显示条目详细信息的界面。1.app图标Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.多面板布局因为平板比有更多的屏幕空间，你能够使用面板来将相关的列表和详细列表融合到一个复合视图中。这就更有效地利用了空间并使得这个应用的导航更为简单。1.app图标通常，使用右边的面板来显示你在左边面板选择的条目的详细信息。为建立面板之间的关系，要保持左边面板条目的选中状态。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.多面板布局复合视图和朝向变换不管朝向如何改变，屏幕应该有相同的功能。如果你在某一个朝向使用了复合视图，当用户旋转屏幕时不要分解它。这里有一些技术帮助你在朝向改变之后调整布局以保持功能不变。1.app图标拉伸/压缩调整左边面板列的宽度让两个朝向保持布局的平衡Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.多面板布局1.app图标堆叠重新排列屏幕上的面板来适应朝向。展开/折叠当设备旋转时，折叠左边的面板视图，使其只显示最重要的信息。提供给用户可以将左边面板内容展开恢复为原有宽度的控件，反之亦然。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例6.多面板布局1.app图标显示/隐藏在旋转视图之后，以全屏视图显示右侧的面板。使用在操作栏上的“向上图标显示左侧面板并可以导航到另一封电子邮件。通过触碰详细面板的内容来隐藏左侧面板。清单提前方案你的应用该如何适应不同的屏幕尺寸和屏幕朝向。在屏幕朝向改变时找到最好的方法重新组织复合视图的面板。寻找时机将你的视图整合到具有多面板的复合视图中。确保你的屏幕在朝向改变后保持相同的功能。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.横滑视图1.app图标有效率的导航是设计良好app的基石之一。虽然app通常以分层方式建立，但横向导航也能够扁平化垂直层次结构，并使得访问相关内容项更便捷。横划视图可使用户通过一个简单的手势高效率地在内容项间切换，并因此带来浏览和享受更流畅的体验。在详情视图间横划一个app的数据通常被组织成“主列表/详情的关系：用户能够看到一列相关内容项，比方说图片，聊天记录或电子邮件，然后选择其中的一个内容项并在另一个界面查看详细内容。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.横滑视图1.app图标在上，因为“主列表和“详情视图虽然在不同的界面，这通常要求用户在列表和详情视图间来回切换，也被称为“pogo-sticking。在用户想要以连续的方式查看多个详情内容项时，要防止使用“pogo-sticking，而是通过横划手势来导航到“下一个/“前一个详情视图。用横划手势在连续的电子邮件消息之间导航Android4.0设计10大改变设计概述设计风格设计模式控件典型案例7.横滑视图1.app图标在选项卡tabs之间横划如果你的app使用了操作栏tabs，请用横划在不同的视图间导航。清单用横划在详情视图或tabs之间快速导航。视图间的过渡要伴随着用户的横划手势。不要等到手势完成才执行视图间的切换。如果你之前用按钮来完成“前一个/“下一个的导航，那么用横划来代替这种方式。考虑在你的详情视图中添加情景信息让用户知道当前可见的内容在列表中的位置关系。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例8.选择1.app图标Android3.0引入了长按手势，即是触碰位置一段时间，作为选择数据的全局手势。这个手势会影响到你在app中如何处理多项选择和情境操作。有什么改变？在之前的Android版本中，长按手势统一被用来调用被选内容项的情境操作。这种模式在Android3.0中发生了改变。通过把情境操作和选择管理集成到一个被称为情境操作栏(contextualactionbar,CAB)的新元素中，长按操作现在被用来选择内容。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例8.选择1.app图标使用情境操作栏(CAB)传统的长按操作用来显示情境操作菜单CAB是当数据被选择时覆盖在你的app的当前操作栏上的一个临时操作栏。它在用户长按某个可被选择的内容项后出现。从这儿用户能够：l通过触碰选择多个数据项。l通过CAB触发一个操作应用到所有高亮的数据项上。之后CAB会自动消失。l通过导航栏上的返回按钮或CAB上的(checkmark)按钮取消CAB。这会移除CAB和所有选择内容的高亮。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例8.选择1.app图标选择CAB操作你可以决定哪些操作和元素在CAB中出现。根据操作栏中的指南来决定哪些操作项要在顶级呈现，而哪些可以移到更多操作中。动态调整CAB的操作项在大多数情况下，当用户添加更多的内容项到选中状态时，你需要动态调整CAB中操作项。应用于单个被选内容项的操作不必适用于多个被选内容项。清单如果你的app支持多个内容项选择，好好利用情境操作栏(CAB)。将长按手势专门保存用于选择操作，而不要用它来显示传统的情境菜单。如果你不支持一个列表中的多项选择操作，长按应该不起任何效果。用安排app的操作栏的操作项的方式来安排在CAB中要呈现的操作项。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例9.通知1.app图标你的app可以通过通知系统将重要事件信息告知用户，例如聊天应用或日历事件的新消息。要创立一个流畅、舒适、友好的app，认真地设计你的通知系统很重要。通知代表着你的app的声音，并且促进了app的个性化。不想要或不重要的通知会烦扰用户，谨记要明智使用。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例9.通知1.app图标何时显示通知要创立一个人们喜爱的应用，很重要的一点是要认识到用户的注意力和焦点必须被小心保护。用一个可能会引起软件开发人员共鸣的例子来说，用户不是一个能被调用返回值的函数。用户的聚焦更像是一种线程的资源，通知会立刻打断用户线程，用户会处理并关闭这个阻碍性的通知。虽然Android的通知系统已被设计成当用户聚焦某个任务时能快速告知用户，但要有负责的态度去决定是否创立一个通知还是很重要的。表现良好的app只在需要它发言时才发言，但确实有一些少量的情况是需要用一个自发的通知来打断用户。通知应主要用于对时间敏感的事件，特别是当这些同步事件涉及其他人。例如，传入的聊天信息是一种实时和同步的交流方式，有另一个用户正在积极地等待你的回应。日历事件又是另一个需要创立通知并抓住用户注意力的好例子，因为事件是紧迫的，并且涉及到其他人。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例9.通知1.app图标何时防止显示通知但仍然有一些不应该使用通知的情况：不要通知用户那些不是直接针对他们或不紧急的信息。例如某个社交网络的异步信息就不应该中断用户。如果相关的新信息目前正显示在屏幕上，就不要创立一个通知，而是通过app本身的UI直接在情境中通知用户有新信息。例如一个聊天应用不应该在用户正在与其他人聊天时创立系统新通知。如果系统可以简单地维护自身而不用涉及用户操作，就不要以一些低级的技术问题去打断用户，比方保存或同步信息，或者是更新app等。如果在发生错误时app可以快速地将自己从错误中恢复而不需要用户执行任何操作，就不要用错误通知去打断用户。不要通知一个用户不能自行启动或停止的效劳。不要只是为了让你的品牌出现在用户面前就创立多余的通知，这样的通知只会阻挠并可能疏远你的用户。提供用户少量的更新信息而又保持他们对你的应用的注意力的最有效方式是开发一种小插件，使用户可以选择放在他们的Home界面上。Android4.0设计10大改变设计概述设计风格设计模式控件典型案例9.通知1.app图标通知设计指南使其私有化对于其他用户发送过来的通知条目比方一条消息或更新状态，请包含用户图片。记住在通知里面要包含app图标作为第二图标，这样用户能够区分出是哪个app发出的通知。导航到正确的地方当用户触碰一个通知时，要把你的app在用户可以使用的地方翻开，并且操作的是通知里反映的内容。在大局部情况下这会是一条单独内容条目的详情视图比方一条消息，但如果通知有多条详见下面的多条通知，那么这可能是一个总结性视图并且引用了多个内容条目。如果是用户被带到了app非顶层级，要使他们可以通过系统导航栏返回键来