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

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

 

 

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

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


 

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

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

 

 

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

 

 

 

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

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

 

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

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

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

 

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

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

 

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

 

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

 

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

 

 

图标

 

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

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

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

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

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

 

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

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

 

 

字体问题

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

 

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

 

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

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

 

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

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

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

 

 

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

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

 

学习 · 提示

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

关注大神微博加入>>

网友求助,请回答!