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

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

 

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

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

 

 

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

 

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

 

 

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

 

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

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

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

 

我们再来看一款UI界面,

 

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

 

安卓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例子中看到的那些单选按钮或是输入文本框,它门都是直接拿用这个源文件上的控件或者设计为一样的效果,这些应用在 UI 方面没有任何的亮点,但是如果你这样做,就非常“安卓”,就好比你看到它:

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

 

 

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

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

 

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

 

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

关注大神微博加入>>

网友求助,请回答!