Android 设计指南 – 风格

1 评论 28158 浏览 6 收藏 8 分钟

构建在任何设备上都引人注目的应用。

设备和显示 Original Version

Android 驱动了数百万计的手机、平板和其他设备,囊括了各种不同的屏幕尺寸和比例。利用 Android 灵活的布局系统,你可以创造出在各种设备上看起来都很优雅的应用。

灵活

对应用布局进行放大、缩小或者裁减以适应不同的高度和宽度。

优化布局

在较大的设备上,利用大屏幕的优势。通过定制视图显示更多的内容,提供更便利的导航。

适用于各种设备

为不同的像素密度 (DPI) 提供资源使应用在各种设备上都看起来很棒。

策略

那么应当如何开始为多种屏幕设计呢?一种方法是以一个基本的标准 (中等尺寸,MDPI) 开始,之后将其缩放到不同的尺寸。另一种方法是从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。

开发者提示

关于构建弹性布局的更多信息,参见 Designing for Multiple Screens 和 Building a Dynamic UI with Fragments.

主题 Original Version

主题是一种使得 Android 应用保持统一风格的机制。风格样式定义了各种构建用户界面所需要的视觉元素,包括颜色、高度、边界填充和字体大小。为了提升各种应用的统一性,Android 为你的应用提供了两种系统主题:

      • 浅色 Holo 主题
      • 深色 Holo 主题

将这些主题应用于设计中将使得应用更好的和 Android 设计语言融合起来。

为应用选择一款适合其功能和设计美学的系统主题是一个良好的开端。如果希望让应用看起来更加与众不同,不妨从某一款系统主题开始打造自己的设计。系统主题为实现个性化的视觉效果提供了坚实的基础。

开发者提示

关于应用系统主题和自己构建主题的更多信息,参见 Styles and Themes.

浅色 Holo 主题的 Gmail 界面。

深色 Holo 主题的设置界面。

触摸反馈 Original Version

使用颜色和光晕效果来反馈触摸,强调手势的效果以及表明哪些操作是可用的。

用优雅的方式进行触摸反馈。任何时候,用户触摸应用中的可操作区域,都应当给予视觉上的响应。微小的反馈就能取得良好的效果。这样做有两个好处:

      • 给予鼓励 总是比给予惊吓要好。
      • 更好的融合 自我标识 ,因为无论与何种色调配合,默认的触摸反馈都能很好的工作。

状态

大多数的 Android UI 元素都有内置的触摸反馈效果,包括可以表明元素是否可以操作的视觉效果。

交流

当控件需要对复杂的手势做出响应时,它应当能够帮助用户了解该操作的结果。

在“最近的应用”中,当用户开始左右滑动缩略图的时候,它会变得暗淡。这样做使得用户明白滑动可以移除该应用。

边界

当用户试图将可滑动的区域滑动出上下边界时,应当在边界提供视觉的反馈。许多 Android 的可滑动控件 (例如列表 lists 和网格列表 grid lists) 都已经内置了边界反馈。如果需要使用自定义控件,记住要提供边界反馈哦。

当用户试图从主屏幕的最后一屏向右滑动时,屏幕就会向右倾斜表明不能再往这边移动了。

度量单位和网格 Original Version

设备之间除了屏幕尺寸不同,屏幕的像素密度 (DPI) 也不尽相同。为了简化为不同的屏幕设计应用的复杂度,可以将不同的设备按照大小和像素密度分类。按设备大小的两个类别分别是手持设备 (小于 600 dp) 和 平板 (大于等于 600 dp)。按像素密度分类的类别有 LDPI、MDPI、HDPI 和 XHDPI。为不同的设备优化你的应用界面,为不同的像素密度提供不同的位图。

为了空间而考虑

不同的设备可显示的 dp (density-independent pixels) 数量也不相同。

48 dp 的设计韵律

一般来说,可触摸控件以 48 dp 为基础单位。

为什么是 48 dp?

一般情况下,48 dp 在设备上的物理大小是 9 mm (会有一些变化)。这刚好在触摸控件推荐的大小范围 (7-10 mm) 内,而且这样的大小,用户用手指触摸起来也比较准确、容易。

如果你设计的元素都至少有 48 dp 的高度和宽度,那么可以保证:

      • 你设计的元素在任何屏幕上显示时,都不会小于最低推荐值 7 mm。
      • 你可以在信息密度和界面元素的可操控性之间得到较好的平衡。

注意留白

界面元素之间的留白应当是 8 dp。

例子

 

原文地址:http://www.ui.cn/project.php?id=17906

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!