Android 人机界面设计规范

机界面设计指导手册 目录 一、 二、 三、手机交互设计评估标准 一、 一、 用 果是文本，使用 分辨率屏幕 创建（缩小总比放大好） 准则 字导航键 /轨迹球 ） 6. 要正确管理活动（ 7. 要正确处理屏幕方向变化 8. 要使用主题 /样式、尺寸和颜色资源来减少界面冗余 9. 要和视觉与交互设计师合作 九要 （设计理念） 设计理念 3. 一致，吸引人，少量简洁的变化 4. 使用云端服务来加强用户体验 （更早、更频繁的由真实用户来测试） 用户通常是任务导向 （多给予用户进度提示，但是不要干扰他们当前的操作） 如果用户完成一项任务需要复杂的操作，重新思考你的设计 ! （行为模式遵循用户的期望） （使用合适的方式来加强功能可见性） （允许回退（ 使用确定对话框更好） （只允许有意义的操作） （尽量减少不可回退的操作） 设计上的考虑因素 1. 屏幕的物理尺寸 2. 屏幕密度 3. 屏幕的方向（竖向和横向） 4. 主要的 屏还是使用 5. 软键盘还是物理键盘 设计上的考虑因素 6. 了解不同设备之间的相异之处是非常重要的 ! 7. 阅读 容性定义文档），了解设备可能的差异 8. 了解屏幕尺寸和密度分类（网络资料） 良好的界面设计原则 1. 隐喻 2. 反映用户的心智模型 3. 直接操作 4. 动画效果（ 5. 看和点击 6. 用户控制 7. 反馈和交流 8. 容错性（ 10. 控制你程序的复杂性 使用相对布局管理界面元素。 相对布局和线性布局是 性布局比较简单，而相对布局可以做出比较复杂的布局管理，所以仅仅了解线性布局，很多时候是不够的。 过这可能是跟移动平台的性能考量有关系。 使用资源修饰符来修饰同一套资源的多个不同版本。 1，一个 2，系统在运行时会根据软硬件环境来自动选择相应修饰符版本的资源。 最常用的修饰符可能是 作多语文本）， 不同密度的屏幕制作不同尺寸的图标和皮肤）， 横屏和竖屏提供不同的 如果系统找不到对应的修饰符版本，它就会选择无修饰符的版本，这个版本通常也是所谓的默认选择。 使用 9 1， 9语法跟 似 2，根据边缘的像素宽度切割出不同的拉伸区域 3，最好同时提供 版本 ” 点九 ”详解 智能手机中有自动横屏的功能 ,同一幅界面会在随着手机 (或平板电脑 )中的方向传感器的参数不同而改变显示的方向 ,在界面改变方向后 ,界面上的图形会因为长宽的变化而产生拉伸 ,造成图形的失真变形。 【 普通拉伸和点九拉伸效果对比 】 1. 安装工具 方法 1 方法 2：直接使用 程图如下 如流程图所示，相对与 方法 1，只需 2个步骤就可得到 .体步骤为： 1. 确定切图后直接改变图片的画布大小， 2. 手动将上下左右各增加 1. 使用铅笔工具，手动绘制拉伸区域，色值必须为黑色（ #000000）。 4. 存储为 择 存时手动将后缀名改为 .过这种方法的缺点是不能实时预览，判断并测试拉伸区域的准确性。 二、 焦点和菜单 在触摸模式里没有鼠标焦点，只有轨迹球。 台里没有鼠标焦点。轨迹球滑过显示选择状态 。 主菜单应该包括全部功能；它们与活动联系一起形成整体。 菜单上的图标按重要性排序 。如果有 多于 5 个图标，使用点击 单 来查看那些不太重要的菜单项。 上下文菜单（长按）集中在一个特定对象 。 总是把那些与所选项最相关的行为放在长按菜单的顶部。 需要记住的几点： 设计时要考虑 速度和简洁 尽量分层来分等级 屏幕上的 活动尽量最小 使用下载进度条，下载数据时，而不是让用户等待去看一个加载完全的页面。 考虑活动流而不是线性行为 屏幕上的行为 计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持为的标准，避免混淆用户。 表达 细节使得产品集中在细节。要遵循程序的美学将注意在那些 应用体验核心的关键任务上。 行为与任务 程序 一个 些行为是相关的，但没有严格的界限。 行为 行为是 序主要组块，可以从创造的行为和其它 S 可用行为中装配一个应用程序。 每个行为都应该被设计成只有一个用途 ， 例如照相，查找通讯录，或读邮件。 显示用户界面的程序包括一个或多个行为。当使用 备时，随着用户在用户界面移动，就会一个接一个的触发这些行为，对他们来说应该是一个 无缝的体验、一个行为接一个行为，一个任务接一个任务 。这就像前面提过的行为流一样。 要记住到任应该连在一起来形成一个整体并且是联系的用户界面。如果你的行为不遵循基本的交互设计原则，与系统行为流关联时，那么用户可能会因为缺少连续性而感到困惑和沮丧。 一个行为处理一个特定的内容（数据）类型，并且接受一系列相关的用户行为。 行为流 用户从一个行为到另一个行为，通过程序， 统会以线性导航历史的形式记录用户已经访问过的行为 。 这就是行为流，也叫做返回流（ 。 总的来说，当用户开始一个新行为时，它就被加在行为流上，所以按返回键就会显示以前的行为 户使用返回键只能返回到上一次行为直至首页，到首页后不能继续返回。 行为只是可以加到行为流上的那些行为， 但 些都不能添加到行为流。 任务 一个任务是一系列行为组成，使用这些行为来实现用户的使用目标，不论这些行为属于哪个应用程序的。 直到一个新任务被明确的定义，所有的用户开始的行为都被认为是目前任务的一部分。 启动任务的行为称之为根行为（ ，一般来说，任务通常从应用程序启动、桌面快捷方式或切换到“最近的任务” 用户可以和启动任务时一样，通过从 返回到任务。 中断任务 任务的一个很重要的功能是用户可以中断他们正在进行的任务，来进行另一个任务，同时，可以返回原来的任务，继续完成它。这就说，用户可以相继进行多个任务，然后在他们之间转换。 隐喻 隐喻是构建一个基于 操作任务心智模型 的模块；用它们来传递应用程序的概念和功能。 基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时，要注意 存在的 隐喻，不要重新定义 它们。 同时，检查应用程序执行的任务，看是否有些自然隐喻可以使用。 反映用户的心智模型 尊重用户已经养成的行为习惯和操作流 比如说，用户在真实世界里有写字、寄信的经验，也会产生特定的期待，像写一封新的信，选一个接受者，然后寄出信。 一个忽略用户心智模型的电子邮件程序用起来会很困难和不舒服。 这是因为程序 强加给用户一个不熟悉的概念模型，而不是建立一个用户已有的知识经验模式 。 在设计程序用户界面之前，试着去发现你的用户的心智模型 ,这样帮助用户去执行任务。 心智模型中内在的隐喻，它代表了任务的概念组成。 在写信这个例子中，隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中，隐喻包括照片、照相机和专辑。 我们要努力地发现用户的期望，包括 任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。 要努力把个下面的特征与用户心智模型相融合： 用户的心智模型主要是建立在经验的基础上 一项任务的心智模型通常是流线型，关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节，但是基本的组成部分占大部分，并且不会占用用户的注意。 免 子菜单中过深的隐藏或者只在上下文菜单中可用。 通过提供怎样使用用户界面控件的线索来鼓励你的用户区发现一些功能。 直接操作 直接操作意味着人们感觉他们正在 控制 一些可触的事情而不是抽象的。 直接操作的好处是当用户可以直接操作对象时，他们能 更好的明白自己操作的结果 。用多点触控来提供给用户一种深刻的直接操作的感觉。 以通过合理的使用单点触控来提供给用户大部分直接操作的体验。 为了在你的程序里加强直接操作的感觉，要确保： 当用户在屏幕上操作对象时，那些对象仍是可见的。 用户操作的结果要立即可见 动画效果（ 动画会增加用户与设备的使用感。 通过使用 “狗耳朵”原则 ，可以给用户一种“突然感”。 当一个狗停止跑动时会发生什么呢？它的耳朵会继续运行然后被反弹回来。要使你的用户界面有这种生动的感觉。比如说，当 换到另一个程序或者接一个电话时，会停止播放音乐。 另一个例子是 不同。 当用户使用滚动条到达列表的底端时，滚动条会突然停在 ，但是， 在，如果这时继续向下拖动滚动条，滚动条会有反弹的效果。 供真实世界的感受，但 有，只是撞到墙上并立即停止。看起来是一件很小的事情，但在联系用户方面，却有很大不同。严肃的讲，使用 会，你就会喜欢上动画效果。 看和点击 用程序比人优胜的地方在于，它能更好的记住列表选项、命令、数据等等。使用列表格式中陈现选项，可以充分利用它的优势，使得用户可以很容易的浏览这些选项并进行选择。 尽量减少文本输入。 用户控制 让用户（而不是程序）来触发和控制动作 . 要使动作简单直接，使用户可以容易的理解和记住。 使用用户已经熟悉的标准控制和行为。 它们的关键在于提供给用户他们需要的功能， 同时帮助他们避免危险和不可逆转的动作 . 比如说，如果用户可能会突然损坏数据，那么你就要提示一个警告，但是如果用户他们选择继续，那他们就可以继续操作。 反馈和交流 在长时操作中，当用户操作时，他们需要 及时的反馈和状态报告 。你的程序应该提供一些 可见的变化 ，这些变化根据每个用户的动作而变化。比如说，在列表中，当用户按下时，应该要高亮显示这个选项，使用户知道他们的触摸已被触发。 动画效果是提供用户反馈的一种很好的方式。 容错性（ 要通过建立容错性来鼓励用户探索你的应用程序，就是说， 使每个动作很容易可逆。 当用户操作一项任务，当一项任务会引起不可逆操作而丢失数据时，要出现一个警告来提示用户 。要能预期常规的问题，然后警告用户那些潜在的负面影响。 整体审美效果 整体美观是指 信息被很好的组织 ，要根据视觉设计原则保持一致。也是关于整合了功能的应用程序的外观。外观对功能有很大影响 。一个混乱或不合理的程序很难理解和使用 。 整体布局和用户界面元素 _的设计 都应该反映了用户使用应用程序任务时的 心智模型 。 控制你程序的复杂性 开发易用软件的最好的方法就是使设计尽量简单。你的程序任务越复杂，保持用户界面简单和被注意到就越重要 种布局形式 大布局 有五种布局方式，分别是： 帧布局） 线性布局） 对布局） 对布局） 格布局） 标签布局（ 线性布局） 线性布局框架图 表格布局示例 表格布局 然也可以是普通的 隐藏的列 ) 伸展的列） 收缩的列） 表格布局框架图 相对布局（ 子控件会根据它们所设置的参照控件和参数进行相对布局。参照控件可以是父控件，也可以是其他子控件，但被参照的控件必须要在参照它的控件之前定 相对布局 意 前时间 )的定义位置 相对布局框架图 单帧布局 用 当用 帧布局示例 标签布局（ 是一个 素，就像在 绝对布局 （ （ 子控件需要指定相对于此坐标布局的横、纵坐标值，否则将会像 标布局示例 从高层到低层分别是 应用程序层、应用程序框架层、系统运行库层和 尽可能的使用 供的标准界面元素，并且遵循建议的用法。 用户习惯了标准视图和控制的外观和行为。如果你使用标准界面元素，当用户学习使用你的程序时，他们就可以依靠他们以前的经验来帮助他们学习 状态栏 包括电池状态、时间、网络和信号强弱等 . 它也会对用户显示提示图标。 建议 ：除非有充分的理由，否则不要隐藏状态栏。 利用提示系统，并在状态栏里显示提示的图标。 会提供一个界面来导航不同视图。 在程序里， 可用的。它们可以作为应用程序除了菜单之外的另一种导航方式。 建议 在你的 要用容易理解的 灰阶图片 。比如， 通讯录 要文本结合图片，使得 功能更容易理解。要确保文本很小，可以合适于 量最好是 4 个 ，多于 4 个会使得读和点击变得不容易。如果程序只是在横屏下使用，那么就要多加几个 如果你使用 么它们最大程度上对用户是可用的。如果在你的程序里移动它们，那么就会使界面变得不连续，用户会感到困惑。 例子 通讯录 分利用了 每个 有一个简单的灰阶图片 和 t 文字 , 使得用户可以很快理解它们的功能。 这些 用 拨号器 , 记录 ,联系人 ,收藏 这些暗喻与用户心智模型连接非常匹配 除非这个程序只在横屏模式里用，否则 多了。 用户很难点击 明白 作用。 列表视图 一个列表视图以单列多行的方式显示数据。 每一列都包含了 文本、 图像和 列表视图可以组织大量的数据。当用户选择了一个项目时，就会提供反馈。 列表中的选项以短暂的高亮显示来显示已被选中， 然后所选中的功能被触发 . 建议 当选中信息时，用标识图片（ 表示，而不是把整列都强调 。 记住在竖屏模式下， 在触摸模式里，没有当前选中的项目（ 如果每一列都需要显示综合信息项，就要考虑用三栏布局。 示例 第一栏中可以 激活一个多任务模型，会弹出一个三个按钮的工具栏 。 这个工具栏只有当列表视图里一个或多个选项背选中时才会出现。它可以允许用户在邮件箱里很快执行一个动作。用户也会发现 （ 单按钮会提供跟多邮件相关的选项。 对于那些通过点击 发现它的用户来说，这些功能是很好的。 第二栏显示标题和邮件的发送者。你会注意到已读和未读的信息，它们的颜色是不一样的。颜色是一种很好的方式来显示更多的信息，而不用使用任何屏幕的硬件 也会显示邮件信息收到的时间。 览器中的历史标签时有可能的历史数量非常多。 以注意到他们使用和 序里相同的三栏布局。 网格视图（ 浮）控件 用法和行为 支持下拉列表的 用户点击界面中下拉表项，列表视图格式里就会显示列表值。 在屏幕上显示列表， 悬浮在 顶端 。 用户可以通过点击列中的任意位置来选中他们想要的值， 点击后回到原来页面 ，被选中的值就会在 不要多于 16 个值 ，这个用户就可以只用手指来 滚动三次或少于三次 单选框控件 对其内的单选框控件做分组 指定组内被选中的单选框的 对话框 对话框示例 日期选择对话框 进度条对话框 当需要在后台做很耗时的工作时，给用户显示一个进度条是一个很友好的选择。因为其他线程是无法更新用户界面的，所以一般我们在 更新我们的进度条。 菜单设计 指南 设计指南 正确选择菜单的呈现方式 ,保持菜单的一致性 ,是设计优秀程序的关键因素 . 优先安放最频繁使用的操作 屏幕高度有限 ,一些菜单会滚动 重安放重要的指令在首项 选项菜单 ,在 图标选项菜单 上 优先排列最频繁使用的操作 不要仅在 关联菜单 上安放指令 如果用户无需使用 关联菜单 就能够完全使用你的程序 ,那么你设计得非常好 ! 关联菜单 不是特别容易发现 . 关 联菜单 的首项指令应是最直观的 弱化 或隐藏当前内容的不可用菜单项 选项菜单 内 禁用无效的菜单项 ,让其变灰 . 关联菜单 内 隐藏无效的菜单项 而用户也仅能看见可使用的选项 关联菜单 首项指令的功能最好与直接点击时所产生的功能一致 选项图标菜单多使用短名称 图标选项菜单 里某个文本标签过长 ,系统会将它拦腰截断 ,最佳的方法是保持名称简洁 . 关联菜单 和被选中项须有所联系 用户长按某个项 ,弹出的 关联菜单 应包含被选中项的名称 ,这样用户才清晰地知道关联了什么 . 把一些指令放入菜单里 ,就能让屏幕 空出位置而显示更多内容 仅将最重要的指令固定在屏幕上 对话框不该有 选项菜单 显示对话框后就不能有 选项菜单 显示对话框的 )过程中无法启动另一个全局任务 (而这也是对 选项菜单 的规定 ). 分离全局指令的特定选项 选项菜单 内 ,适合安放全局性控制 当前 进程 的指令 ,或者将指令固定显示在屏幕上 ; 关联菜单 内 ,适合安放针对当前被选中项的指令 .(无论如何 ,指令也可以作为 进程的一部分来运行或启动另一个 进程 .) 图标选项菜单 扩展选项菜单 上下文菜单、关联菜单 选项菜单 在选项菜单中包含了应用于当前活动的全局性主要功能或开启相关活动。 通常是通过用户按下“ 的硬按钮来调用。 在大部分的手机上 ,用户按下 ”键就会在屏幕下方显示选项菜单 键或 ” 返回 ” 键就会关闭选项菜单 . 想要关闭任何菜单都可统一使用 ” 返回 ”键 .(重复按 ”键或者点击屏幕空白处也能实现同样效果 .) 并需要注意在不同手机上的操作方法 . 选项菜单示例 选项菜单示例 图标选项菜单 初次按下 屏幕底部会显示几个带图标且不可滚动的网格 .(个典型按钮 .) 扩展选项菜单 如果这个进程的菜单项很多 (超过 6个 ),选项菜单的最后一个图标会标记 ” 更多 ” 选中后会弹出一个包含多个菜单项目的列表 ,此列表有时还可以滚动 . 上下文菜单、 关联菜单 上下文菜单包含了当前选定项目的次要功能。它通常是通过用户 长按一个 元件 来调用的。 上下文菜单的每个元素依然是菜单项，但它 并不支持显示图标和设置快捷键 。 上下文菜单 还可设置顶部标题 关联菜单其实是 被选中内容的一些可操作指令的列表 . 指令也可以成为当前进程的一部分 ,系统也能通过被选中内容去启动另一个进程进行操作 . 使用 关联菜单 被认为是快速执行常规操作的一种捷径 起某些常显式的按钮或 选项菜单 ,出现的机会更 少 联菜单 关联菜单 上的每个指令也应该在界面上利用多种形式直观地显示 “选择文字 ” 这种操作指令也许只在 关联菜单 出现 比如浏览器之类的富互联网应用 ,或某些包含联网的应用 ,关联菜单 上的一些些指令在其它地方也无法使用 . (慎用 关联菜单 这种隐性操作 ,因为在交互设计里面 ,操作分两种 :显性与隐性 ;隐性操作无法明确被操作对象的关系和产生的结果 ,所以大家就明白了为何手机上的左右软键在屏幕上面有软键功能名称 ) 关联菜单 上的文本指令 任何内容的 文字链接 与 文字区域 ,系统都统一提供一些操作选项 ,并且适用于所有程序 : 比如 “选择全部” ,”选择文字” ,”复制全部” ,和 “添加至字典”这几个指令 则会有另外的操作 ,比如 “剪切全部” 与 “切换输入法” 则会显示”粘贴” 字链接 与 文字区域 中的 关联菜单 自动插入适当的菜单项 ,就如下图所示 . (不同场景中 ,菜单上的项目也有相应的变化 ,以便于使用 ) 选项菜单 与 关联菜单 的区别 选项菜单 适用于 全局性的控制 ,而 关联菜单 适用于 内容项 用户通过操控菜单 ,然后点击菜单项来执行一个动作或打开一个对话框 . 合理安放菜单 ,需要细心思考菜单的 : 详见（ 五、手机交互设计的评估标准 1、产品架构是否清晰 用户进入产品，就可以一目了然的知道产品是 干什么 的，有 几个功能模块 ， 模块之间怎么切换 。 产品层级较深的，设计师要清楚的了解有 产品有多少个二级页面，多少个三级页面 。这些 二级页面和三级页面的架构 ，是 复用一级页面的，还是有自己的架构 。 架构 评估标准 产品 结构清晰 ，没有不必要的层级 能 快速了解 产品有几个 主要页面 所有 主要部分 都能够 通过首页访问 清晰的 指示当前的位置 2、产品流程是否清晰 要想表现层越简单，背后的逻辑层可能就越复杂。 评估流程的时候，不以背后的逻辑层复杂度来评估，而是以 表现层的简洁度来评估 的。 如一个发布帖子的流程，总共需要几个步骤，涉及到几个层级（一级页面到二级页面到三级页面 ）。 不是步骤越少、层级越浅就是好的设计。而是 要简单、明确、