安卓UI设计系列知识(二)

(以下内容是个人心得,若有表达不准确的地方,望同行赐教)

刚刚涉足andoridUI的朋友们总在询问关于andoridUI的规范一类的资料,其实最有效的规范资料应该是安卓官网提供的规范http://www.apkbus.com/design/index.html,打开这个网站,一看,内容相当多,再加上一些专业术语,大部分人就没有耐心往下读了,从某种意义上来说,设计本是视觉的游戏,只关心“好看不好看”,但是毕竟UI设计是处于移动互联网这一“理性”行业,再加上GUI的前身是工业设计专业,多多少少还是得熟悉一些数据,逻辑上的知识。当然,我们不能被规范束缚,我一直认为,这里的规范可以看作为一个“设计建议”。

和每个andoridUI设计师一样,我也是从这个网站开始学习的,在上一章节中,我们分享了如何学习andoridUI设计,搭配着这个网站上关于“设备和显示”的这一章节,讲解了如何划分一台设备是属于哪一种分辨率,以及关注了一下最近一段时间市面上各种机型的比例。

这一章节,我们还是再一次回归安卓官网提供的规范网站,带着大家一起研究一下官方提供的这些知识,分享一下安卓设计中的风格和主题问题,Holo风格到底是什么?如何做Holo风格?

 

 

在官网的“风格-主题”一栏中,官网简单的描述了两个内容:浅色的holo主题,深色的holo主题。我们还看到了一些对于设计师来说有效的关键字:“统一”“个性化”。其他的内容呢,说实话,真的让设计师一头雾水,有效的信息获取量的确很少,那到底什么是浅色/深色holo主题呢,怎样做才是“达标”的呢?要搞清楚这个问题,我们得讨论一下什么是“风格/主题”。

其实这两个词对于我们设计师来说是相当熟悉的,设计风格/主题的把握这个阶段应该是一个非常重要的阶段,因为这个阶段的步骤是合理的,优秀的,必然会造成其结果是“好看”的。那么我们又如何看待官方对于andoridUI设计中的风格和主题的解释呢?

我们浏览规范网站,看到“风格-自我标识”这一栏。

 

配色:风格/主题表现中的一个重要步骤,在规范里说到了三点:

 

1.默认使用蓝色。

为什么要默认使用蓝色的?没有为什么,“默认”的东西都没有为什么,好比要用“√”来代表“正确”。

说到这里,我们必须下载一个安卓提供的开放资源Android_Design_Stencils_Sources。

下载地址http://developer.android.com/downloads/design/Android_Design_Stencils_Sources_20131106.zip

 

它是一个psd格式的文件(用ai设计的小伙伴们可以在网路上搜索AI格式的),如下图:

 

看起来,这个psd的源文件(14.5M)貌似很有用。是的,它的确很有用,以后的章节里,我们会经常拿出它来说明问题。在这一章的知识里,我们要关心的是以下几点:

a.我们看到在这个Android_Design_Stencils_Sources.psd的源文件里,所有的控件都用上了统一的蓝色,是的,没错,如果你觉得好看,我们也可以用这种蓝色,比如一个科技行业的APP,那蓝色一定是不错的选择,蓝色色值请参考下图:

 

b.如果你觉得蓝色不合适,你可以选择其他的颜色,比如紫色,绿色,黄色,红色,各个颜色的色值都在上图中有描述。如果你已经爱上这些颜色,你可以将他们调色板下载下来直接使用,下载地址http://developer.android.com/design/downloads/index.html

 


 

 

c.蓝色是 Android 调色板中的标准颜色。每一种颜色都有相应的深色版本以供使用。工作经验而言,我们常常这样使用它们:

 

如果你也想走走现在流行的“扁平化路线”,再来点“阴影”,那么以上这样的表现方式是不错的选择。将标准色用于按钮背景颜色,将深色版用于按钮的投影颜色。(PS,如果这个按钮按下去,背景怎样表现是最好的呢?)

 

d.当然,我们知道,官网上的规范,我们都可以将其看作一个“设计建议”,以上的这些颜色都是官方给我们的推荐颜色,如果你真的不能接受,完全没有问题,你可以挑选其他颜色。但一定要记住,无论你是挑选推荐颜色,还是自己去选择其他颜色,无论是选择一种,还是多种,你都必须从设计对象出发考虑颜色的选择。比如,如果你要做一个幼儿教育方面的应用,你如果选择黑色的风格,那么是万万不合适的。

 

2. 适时使用高对比度的配色来表示强调。

用于操作栏或主要按钮的背景色。避免滥用,不是所有操作都同样重要,只在最重要的一到两个操作上使用这样的配色。

 

Google Play Music 应用使用一种橙色主题来强调操作栏、当前标签页选项卡、滚动指示和超链接。

当然,你如果觉得蓝色色系更适合这款音乐播放APP,你完全可以将图中的橙色更换为推荐颜色中的蓝色,或者你自己挑选别的颜色,但仍然要注意风格的统一。

 

 

 

3.定制配色时,别忘了通过视觉上微小变动给予 触摸反馈 。

一定要让用户知道他“点到”了,这种就是触摸反馈。作为设计师的你,一定要从视觉上给与微小的变化,让他们知道他们“做到了!”

Android KitKat 之前的版本中,默认触摸反馈是一种充满活力的蓝色。而且所有的触摸反馈都有明显的色彩对比,所以有可能和你的标识色相冲突。Android KitKat 开始,触摸反馈变得比较微妙,触摸仅仅带来控件背景色的微小变化。这样做有两个好处: (1) 符合 设计原则 - 给予鼓励 的原则(将复杂的任务分割成简单的步骤,这样更容易完成。对操作要给予反馈,哪怕仅仅是个微小的光晕。);(2) 更加容易突出你品牌的形象,不会与系统的设计风格混淆。如图:

 

就工作经验而言,我也赞同官方所描述的“微小的变动”来表达触摸反馈。比如上图中,就用一个更深的橙色作为“搜索icon”点下去时候的背景颜色,这样的变动就是微小的。如果你要这样做:

变动太大,的确不怎么好看。

 

 

谈到“触摸反馈”我们不得了解“控件的几种状态”,在我们下载的Android_Design_Stencils_Sources.psd中可以看到:


 

对于一个控件,andoridUI规范了有5中状态,从上往下通俗的说:常规状态,按下状态,获得焦点状态,不可用状态,不可用状态下获取焦点状态。其中说明了:“不可用”状态即为“常规”状态的30%不透明度;“不可用状态下获取焦点”状态即为“获得焦点”状态的30%不透明度。对于一个严格的项目来说,这5中状态都是得设计的,有一种状态是大家不太熟悉的,即focused状态(获得焦点状态),这种状态针对一种比较古老的设备,如下图:

 

 

在这种设备中,会有一个控制方向的滑轮,像我们学生时代用的滚轮鼠标一样,手指控制这个小球,滑动到需要控制的控件上,但不按下。那么这个时候,控件就有一个focused状态(获得焦点状态)

 

 

 

Logo:andoridUI的一个细小的独特的风格

 

图中的g+和Howz都是应用的logo,将它们放在操作栏的左边,就是一个非常好的展示场所。

值得一提的是在这种情况下的触摸反馈,通俗的说就是将操作图标连同logo看作一个整体,进行触摸反馈的表达,如下图:

 

当然,你不一定非得像上面这样做,如果你不打算放上你的APP logo,你还可以用以下的方式表达:

 

将 标题 直接置于 返回图标 后面,在这一点上,ios的表达方式大多数是将 标题文字 放在操作栏的中间。这种情况下的触摸反馈应该是:

 

 

这两种方式是andoridUI的一种很特别有的表达方式,算是一种“个性”,大家参考视情况使用吧。

 

 

图标

 

如图中所描述的。图标的使用也要做到风格的统一,你可以直接使用安卓自带的图标,下载地址:http://developer.android.com/design/downloads/index.html

当然。你会发现,有可能你需要的图标,并不在这些御用图标里,或者说你觉得这些图标真的太丑,比如它们:

 

真心觉得这是要吃人的节奏吗?

那么,你自己有自己画啦~~

 

 

字体问题

在官网的“字体”一栏,是针对英文版本下的UI设计所用字体的说明。个人的看法是:你在设计稿中的字体并不会使用在程序里,你做的仅仅是“效果图”,所以你用什么字体完全没有限制。我们设计的效果图是应该和最终的程序在效果上高度相同的,所以我们建议选择一些类似于安卓系统字体的字体作为一个替代,你甚至可以用“黑体”“微软雅黑”,当然,还是专业点儿吧,我才开始使用“文泉驿微米黑”,后来一直用DroidSansFallback.ttf,下载地址:http://www.zcool.com.cn/gfx/ZMjk0MjUy.html

 

-------------------------------------------------------------------------------------------------------------

 

我们一起阅读并理解了官网上对于andoridUI风格一模块的描述,也分享了我的一些工作经验给大家。我们常常听到或者被自己的领导要求“这个界面要做成Holo风格”。Holo风格是什么呢,到底怎样做holo风格呢?在解开这个问题之前,我们先看几个优秀的App,它们的界面设计。

上周非常幸运得抢到了红米手机一台,撒花并得瑟一下~~作为一名UI设计师,如果你还没有玩过MIUI,那你是时候去了解一下了。以下是我截取的界面并在图片上做了适当的描述:

 

第一:我们是不是可以在我们的设计中参考MIUI的表达方式,将操作栏设计为圆角,这样一来,比起用直角,会更加亲切一些,柔和一些。

第二:如果一个保守的交互设计师,或者说一个保守的GUI设计师,他会老老实实的保留操作栏,并在操作栏上描述这一个页面的名字叫做“设置”,然后将这个页面中的内容分类,分出的类别在正文中用tab切换显示,从交互上来说,用户是通过“设置”图标进入这一个页面的,那么这里的所有操作都与设置相关,用不着再在操作栏上总述一下当前页面的名字,从视觉上来说,将操作栏直接用于tab切换,在高度上也节省了不少,以至于一页上能显示下面更多的列表项。

 

 

正文的背景,我们往往使用纯色,而MIUI则将正文背景用渐变色处理,这样一来更加有层次感,不是吗?所以,如果你觉得不错,也可以在你的设计中参考着这样做。

 

 

操作栏还可以直接用于输入文本哦~

 

 

 

操作栏中甚至可以直接放置一个输入框,输入框里甚至可以放置一些按钮,或者标签~~

 

 

 

操作栏还可以放置超链接哦~

这些都是值得我们学习的地方。

类似这些从交互和视觉都很优秀的地方还有很多,就不一一举例了,总得来说,MIUI的确是一款好看的UI界面。

 

我们再来看一款UI界面,

 

 

这些输入的文本框似乎有点不好看,但是又好像在哪儿见到过。

 

 

 

好了。如果你要将以上两款UI做个比较,相信大部分人都觉得MIUI要好看得多。事实上MIUI并不是Holo风格的UI。

 

什么是Holo?

Holo Theme 是 Android Design 的最基础的呈现方式。因为是最为基础的 Android Design 呈现形式,每一台 Android 4.X 的手机系统内部都有集成 Holo Theme 需要的控件,即开发者不需要自己设计控件,而是直接从系统里调用相应的控件。如果完全使用 Holo Theme,那么做出来的效果大致是上面举的第二款UI界面那样的。

也就是说,作为设计师的你,可以直接将Android_Design_Stencils_Sources.psd中的控件用于你的设计界面中,比如你需要一个多选按钮,或者单选按钮,或者是需要一个控制音量的控件,你都可以直接在Android_Design_Stencils_Sources.psd上取得。

如果有必要,你甚至可以直接使用官方建议的色板,或者直接拿用前面下载下来的安卓自带的图标。比如我们在上面举的第二款UI例子中看到的那些单选按钮或是输入文本框,它门都是直接拿用这个源文件上的控件或者设计为一样的效果,这些应用在 UI 方面没有任何的亮点,但是如果你这样做,就非常“安卓”,就好比你看到它:

 

 

大面积的色块加上简洁的文字表达,你就一定知道“嗯,这是win8风格”,或者“没错,它是metro风格”。

不过,调用系统控件在天朝是风险十足的行为,因为 MIUI 和很多国产ROM 私自替换了 ROM 中 Google 原本规定保留的 Holo 控件,这样直接导致了一个原本在原生系统上运行时是 Holo Theme 的应用在 MIUI 之流上运行时变成不伦不类的样子。

 

 

原本完全符合 Android Design 但因为 MIUI 而变得不伦不类的两个应用:Dropbox 和 Press在这里我必须再埋汰一下 MIUI,这丧心病狂的东西不但篡改系统自带的 Holo 控件,还擅自更改开发者嵌入应用的 Holo 风格控件,简直罪大恶极。不过,三星和 HTC 也对一些系统的 Holo 控件做了修改(当然没有像 MIUI 这么丧心病狂)。在这方面做得最好的反而是魅族,魅族修改的控件都依然符合 Android Design。而 Holo Theme 最大的特点是什么?简单,质朴。Google 提供的 Holo 控件是不可能违背 Android Design 的,而这些控件的样式和配色也非常保守,不会影响用户的操作或者分散用户的注意力,Holo Theme 的布局也是最为普通的列表。而 Android 系统对这些默认元素的优化已经很到位了,所以就算是默认的 Holo 主题也能带来不错的阅读/操作体验。但是,就如同在 Windows Phone 上的 Metro UI 引起的一个问题一样,如果开发者全盘在照搬Holo Theme,那么最后的结果就是做出来的应用除了图标之外都长得一个样。这个时候,开发者就需要跳出 Holo Theme 这个框架,进入更高

的境界了。

 

总结起来说,如果你打算做一款Holo风格的UI。那么有几点是你可以参考使用的:

 

1.出色的光影效果清晰的层次关系。这种层次关系一方面提现在视觉上,非常重要的一点同样也要求做交互的人员这么做。所以,Holo不是视觉的Holo,还应该包括交互的“Holo”。

 

2.像上面介绍的第二款UI这些应用大多数都使用了自制控件和自定义布局。自制控件的好处有很多,其中之一就是可以保证在大多数机器上看起来都是一个样子(当然遇上 MIUI 这样的恶棍就没办法了,道高一尺魔高一丈)。

 

3.可以使用建议的色板,或者自己选择更加丰富的颜色,虽然配色的使用变得丰富,这些配色依然都是低饱和度,不是很鲜艳,搭配起来比较容易的中性色。比如你常常会看到正文的背景用了浅灰底色配上白色卡片。

 

4.参考Android_Design_Stencils_Sources.psd上的布局方式,当然。如果你有更好的,也可以不用被规范束缚。

 

下期预告:andoridUI的入手方法和画图方法。

我们下期见。

 

全教程完,学完记得交作业。如果本教程对您有所帮助,请推荐给你的朋友。

【原创教程 投稿邮箱: ps@16xx8.com】

长按二维码关注我们

关注我们微博:@photoshop教程论坛

推荐教程