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

来源:站酷 作者:chan奕迅 学习:11951人次

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

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

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

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

 

 

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

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

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

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

 

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

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

 

1.默认使用蓝色。

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

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

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

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

 

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

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

 

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

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

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

 

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

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

 


 

 

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

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

 

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

 

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

 

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

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

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

 

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

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

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

 

 

 

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

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

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

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

 

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

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

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

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!