Android Design 摘录

终于静下心来花了前后两天,累计四五个小时的时间将 Android Design 仔细读了一遍,并细细琢磨琢磨。下面将「不知」、「易错」和「疑惑」的部分摘录下来,其他本身理解正确的部分就全部忽略掉。

英文原本完整版本:http://developer.android.com/design
中文翻译完整版本:http://adchs.github.io

最最重要的:导航

篇幅太长,通过摘录实在无法表述清楚,还是直接看原文来的直接:
英文原版:http://developer.android.com/design/patterns/navigation.html
中文翻译版:http://adchs.github.io/patterns/navigation.html

48 dp 的设计韵律

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

为什么是 48 dp?

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

如果你设计的元素都至少有 48 dp 的高度和宽度,那么可以保证:
– 你设计的元素在任何屏幕上显示时,都不会小于最低推荐值 7 mm。
– 你可以在信息密度和界面元素的可操控性之间得到较好的平衡。

注意留白

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

图标

在设计图标时,对于五种主流的像素密度(MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI)应按照 2:3:4:6:8 的比例进行缩放。例如,一个启动图标的尺寸为48×48 dp,这表示在 MDPI 的屏幕上其实际尺寸应为 48×48 px,在 HDPI 的屏幕上其实际大小是 MDPI 的 1.5 倍 (72×72 px),在 XDPI 的屏幕上其实际大小是 MDPI 的 2 倍 (96×96 px),依此类推。

启动图标

启动图标在“主屏幕”和“所有应用”中代表你的应用。因为用户可以设置“主屏幕”的壁纸,所以要确保你的启动图标在任何背景上都清晰可见。

整体大小是 48×48 dp

操作栏

操作栏图标是一个图像按钮,用来表示用户在应用中可以执行的重要操作。每一个图标都使用一个简单的隐喻来代表将要执行的操作,用户应当一目了然。

整体大小是 32×32 dp,图形区域 24×24 dp

小图标和上下文图标

在应用的主体区域中,使用小图标表示操作或者特定的状态。例如在 Gmail 应用中,每条信息都有一个星型图标用来标记“重要”。

整体大小是 16×16 dp,图形区域 12×12 dp

通知栏图标

整体大小是 24×24 dp,图形区域 22×22 dp

图标命名约定

写作风格

简短

– 只告知用户最必要的信息
– 避免冗余的表述
– 尽可能的缩短文本长度

简明

– 使用短词语、主动词和简单名词
– 先说重要的事。一句话的开头两个词 (一共大约 11 个字母,包括空格) 应当表达出重要的信息
– 仅说明必要的信息。不要费力解释细枝末节。大部分用户不关心那些

Words to avoid

在顶层屏幕使用视图控件

顶层屏幕向用户展示了应用的主要功能。所以有时顶层屏幕会包含多个不同的视图,请确保用户可以轻松的在多个视图之间切换。Android 提供了多种视图控件帮助你完成设计,下面将一一介绍:

固定标签

固定标签可以同时显示多个顶层视图,并且能够提供很方便的切换。固定的标签总是显示在屏幕上,不像滚动标签会被滑出屏幕。请保证用户可以通过左右滑动在不同视图间切换。

适合使用固定标签的情景

– 你的应用需要频繁的切换视图
– 你的应用只有最多三个顶层视图
– 你希望用户清楚的了解还有其它功能视图

下拉菜单 (Spinners)

下拉菜单 (Spinners) 通过弹出的菜单让用户选择不同的视图。

适合使用下拉菜单 (Spinners) 的情景:
– 你不希望标签栏占用过多的垂直空间
– 用户切换视图时,数据集不发生变化,或者数据集的类型一样

导航抽屉

导航抽屉从屏幕旁边滑入,为用户提供不同视图的选择。它可以放置很多项目,并且可以从屏幕的任何位置调用滑入。导航抽屉可以显示应用的多个顶层视图,还可以显示下一级视图,所比较适合复杂的应用。

适合使用导航抽屉的情景:
– 你不希望标签栏占用过多的垂直空间
– 你的应用有很多顶层视图
– 你的应用需要从低层视图直接切换到其它顶层视图
– 你的应用需要在多个没有直接联系的视图之间切换
– 你的应用可能会有较深的导航路径

不要混合使用多种模式

请仔细斟酌应用的顶层视图设计,不要混合使用多种不同的模式。例如使用了固定标签,就不要为应用添加导航抽屉,否则用户可能会觉得复杂且混乱。

不需要确认和提示

这里不需要确认。如果用户一不小心按到 +1 按钮,也没有关系,他们可以再按一下取消 +1。

这里也不需要提示。用户能看到 +1 按钮变成红色,这是很清楚的标志。

纯粹的 Android

不要模仿其它平台的 UI 元素

不要使用专为其它平台设计的图标

不要使用底部的标签栏

不要在操作栏中使用带有标题的返回按钮

不要在列表中使用向右箭头

按钮

按钮的背景色如何设置

对于仅包含图标的按钮,不需要使用背景色。

对于包含文本的按钮,也不需要背景色。为了提示用户点击,可以使用清晰的文本说明和不同的颜色、格式。

如果一定要选择带有背景色的按钮,请仔细斟酌。因为这种按钮看起来比较沉重,一个屏幕上最好就放一到两个。它们比较适合一下情况:
– 用户一定需要使用的操作 (例如: 注册)
– 非常重要的操作 (例如: 接受/拒绝)
– 对用户有很大影响的操作 (例如: 清除所有数据、立即购买)

活动指示器

活动进度条

例子中,活动进度条 (Holo Dark 主题) 在用户开始下载时出现。因为连接服务器打开时下载的时间不确定。当下在开始后,则使用有明确百分比的进度条。

旋转圆圈

例子中,Gmail 应用在载入消息时使用旋转圆圈 (Holo Light 主题),因为下载邮件的时间难以确定。

当使用旋转圆圈时,不要配以文字标签。旋转的圆圈已经表明了正在进行后台操作。

Author: 四勾 4J

via 4jplus.com

Leave a Reply

Your email address will not be published. Required fields are marked *