PM的自我修养——关于AndroidDesign的一些基础知识

这篇日志来自于一个问题：独立 Android 开发者如何零基础学习 UI 设计并设计出符合 Android Design 的作品？

以下是我的回复。

最初看到这个问题，我是觉得这个问题和我上周末分享的内容契合度比较高，所以一直等到周末分享结束来写这个答案，本来是想直接把PPT和讲稿复制粘贴啪啪啪，但是后来想想，觉得这样还是不太合适，我还是提炼一下答案吧。

首先，我不能赞同Van Bruce的答案的前半部分，但是赞同他最后说的“请对UI设计师怀揣敬畏。”

因为题主已经提到了问题的前提

具有一般水平的审美能力，对 Android Design 有初步的理解。

具有一般的审美能力，这样已经足够了。

不要强求大师级的UI设计或者让人眼前一亮的UI。作为一个在拥有3K+软件工程学生的学院读了三年的伪·程序猿，我认为一般的审美能力已经足够做出普普通通不会亮瞎人眼的UI了。题主的情况恐怕是没有专业的设计师甚至没有具有一定美术基础的队友，只能一切靠自己，这种情况下，学习AndroidDesign就是最好的选择。理解了AndroidDesign的核心元素，至少能够让你的应用达到普通的水平，这样目前来说真的足够了。

然后进入正题，我在这里说说我理解的AndroidDesign。

如果打开AndroidDesign的官方网，一页页的看下去，快的小半天，慢的话看上一两天也该看完了，看完以后，大概心里有个印象，知道AndroidDesign有那些东西，并且对原生控件的样式有个大概的印象。这时候，就可以从AndroidDesign里面一些具有标志性的东西下手了。我在这里放上几页我分享时的PPT。

我这里提到了四个关键字，实际上在我的初稿里面有七个。

除去Holo，ActionBar，Drawer，NavigationBar以外，在初稿里我还提到了DP，Up&Back已经Fragment。

这里Fragment与代码实现关系最近，我略去不谈，Up&Back则是学习成本高，使用场景虽多但是大多数场景没有让人感到困扰，二者在很多情况下没有太大区别。所以也不谈Up&Back。

首先很有必要谈谈Holo：

这一页PPT里面，我放上了三张图。Holo Dark，Holo Light以及我个人命名为HoloStyle的风格。Holo Dark以深色为背景，明亮色用来作为文字和图标的主色，而Holo Light与之相反，使用浅色作为背景，深色作为文字和图标的主色。且不说这两者风格是否漂亮美观，一个设计能力一般的人如果能合理的在应用中使用这两种简单的风格，世界上就不会有那么多值得诟病的UI设计了。

在正在开发的过程中，我建议尽量少的使用Holo Dark风格，这种黑色的背景其实并不够友好。之前我看到NovaDNG在Android Design in Action — 以知乎为例中提到将背景色从白色换为#eeeeee（一种淡灰色），然后我尝试了很多次以#eeeeee为背景做不同的应用，这个真是个百搭色，视觉冲击小，看起来也柔和，建议新手在设计UI中多使用类似的颜色。而Holo Light常常被我使用在设置界面，建议使用#eeeeee，不要使用纯白色背景，太过刺眼。

我再PPT里还提到了Holo Style，在我看来这是当下符合AndroidDesign应用的主流。他在核心概念上遵循Holo Light和Holo Dark，但是引入了更多的色彩来提升应用的美感与设计感，这张图的UI整体和谐，没有亮瞎人眼的配色与融入背景的文字，如果对AndroidDesign的理解达到普通水平，应该是可以独立的构建出类似的UI的。

然后来说说关键字2的ActionBar，对于Android应用来说，ActionBar几乎就是一种标志性的元素。这里我也做一些简单的科普：

这张图中的1便是所谓的ActionBar，应用的很多操作都位于这一操作栏上。图中的2名为TabHost，也是Android应用中常见元素，用于切换多个Tab。一般来说是在同一个Activity中切换不同的Fragment时被用到。图中的3名为SplitActionBar，可以理解为把顶部ActionBar上的按钮转移到下方，在我看来优点是便于单手操作，缺点是双层底部操作栏会牺牲美感，但是SplitActionBar在Google系应用里昙花一现，对此我一直很费解，Google是为了美感雪藏了SplitActionBar么？

右边的图是所谓的ContextualActionBar，即与内容相关的ActionBar。当我们在应用中选择了某一段文字或者改变了CheckBox的状态，如果有针对这些文字或CheckBox的操作，那么这些操作就应该从隐藏状态出现在ActionBar上，所以称其为ContextualActionBar。

然后，是ActionBar具体的模样。

我觉得题主要学习AndroidDesign并做出符合AndroidDesign的应用，那么请一定不要试图去掉ActionBar，就算是仿iOS的风格，也至少留下一个不标准的ActionBar。去掉了ActionBar的应用，失去了Logo与标题，无论如何都给人一种极大地违和感，更何况ActionBar的配色应该是能够体现应用内涵或者契合应用主题的颜色，就如同微信的绿色，知乎的蓝色，饭本的红色。这也是为什么现在iOS7上的应用整体水平变得平庸的原因（如果你也觉得iOS应用的白色被滥用了）。

继续说ActionBar，上面两张图都是我从AndroidDesign官网扒下来的，上图左侧三条线，就是官方建议的DrawerToggle的样式，用于打开和关闭抽屉。下面ActionBar中的1号图标表示的意思是Up，请不要用于打开&关闭抽屉。2号图标表示Spinner，即点击后出现一个可选择的列表，个人感觉不够美观，拉入黑名单弃之不用，建议有类似需求的可以考虑TabHost或Drawer。3号图标是两个ActionBar Items，Google提供了142个图标用来用于不同的场景，但是在实际开发过程中，你会发现两个问题：1.有些图标太丑 2.图标根本不够用。当你遇到这种尴尬的情况时，我的建议是要么自己画（找人画），要么放弃整个AndroidDesign的图标，采用很多优秀设计师为iOS或Android设计的一整套图标。

最后一个Overflow，当你的ActionBar不足以存放那么多item的时候，Overflow就会出现。我个人建议操作小于等于五个的时候，都放到Overflow里面，用户在使用的过程中，就会在需要各式操作的时候去右上角寻找。这样可以培养用户的使用习惯，对整个Android应用的生态圈都是有益的。当一个节目存在太多的操作需要放到右上角的时候，我只能说，极大可能是在交互设计时出现了重大问题，建议回炉重做。=_=

第三个关键字，是Navigation Drawer，我们可以称之为Drawer，中文的话就是抽屉。在我看来，Navigation Drawer是移动开发历史上的一个创举。毕竟手机永远是手机，怎么都不能大到一只手握不住。如何在界面上提供更多的信息就是一个非常值得探讨的问题。事实上我们可以把很多操作项和导航入口直观的排列在屏幕上，但是这对于当前进行的操作，真是一种灾难性的体验，所以能够隐藏&出现的Drawer大行其道就不是什么令人奇怪的问题了。在我看来，Drawer中应该存放的是相互独立的最高级的导航层级,在下文中我会以QQ为例做相关的论述。

在这里，我顺便提到了48DP的概念。

我这里引用另外一位设计师在一个问题中的回答：

系统只认px，不认识厘米，设定160dp的长度，相当于告诉手机在160dpi屏幕上显示160px，在240dpi屏幕上显示240px 。如果根据屏幕密度换算像素让系统去用，你这台手机是方便了，"在Xdpi下绘制Xpx长度，实际的物理距离都是1英寸" 屏幕升级了呢？代码重写一遍再调一次UI？

也就是说，实际上，同样的DP在不同的手机上，物理长度都是一样的。

关于48DP有人讲的很好了，我就不赘述了。这里我说一下个人的一点经验。一个界面有多个文本项目需要一一列出来的时候，请不要使用48DP，是视觉上太窄了，非常不舒服，建议使用64DP。另外，无论出于什么原因，一个存放有操作事件的Layout的高度不要低于48DP（其中的ImageButton可以小于48DP，我个人比较喜欢36DP的ImageButton）。

我在这张PPT的第三张图，其实就是为了提到饭本的SplitActionBar。这条SplitActionBar高度是48DP，而且完全符合AndroidDesign，但是事实上，这并不是原生的SplitActionBar，而是作者自制的。这样的作法给我们提供一个新的思路：设计标准与实现标准的分离。无论是SplitActionBar还是DrawerLayout甚至ActionBar，我们都可以使用这样的思路。随之而来的是更灵活的实现方法和更便捷的开发，唯一需要考虑的问题大概就是需要忍受SmartBar的双层低栏。

这张PPT，我当时主要讲的便是NavigationBar，然后身为一个魅族用户，我顺便夹杂了些私货，说了一下SmartBar。我想如果基本理解了AndroidDesign的话，应该是会认同SmartBar在兼容状态下确实让用户体验和UI变得更好。前提是在兼容状态。

然后回顾一下，其实AndroidDesign的标志性元素就是这些。远远没有题主想的那么复杂。

但是知道这些，想设计出符合AndroidDesign的应用，还是要亲自动手，真正尝试的时候往往才会发现很多时候，设计是为产品服务的，不能仅仅坚持设计而忽略了产品的设计的思路。

我这里来举个栗子，抛砖引玉。

这里的标题是对NovaDNG的致敬，他为AndroidDesign的推广做出的贡献大家有目共睹。

此外，个人水平有限，本人并非设计师亦无美术功底，大三在读生，会一些Android开发，不想写代码准备找份产品的实习，顺便求各种内推。其实说这些，目的就是三个字：求轻喷。

事实上，我选择QQ作为分享时的例子，导致自己进入了一个非常纠结的状态。在我看来，虽然QQ for Android使用了iOS7的设计，但是在设计美感上，并没有太多值得诟病的地方，整体水平比中规中矩还要强上一些。而遵循AndroidDesign出产的绝大多数APP，在UI上都只能达到中规中矩的水平，这就是我的纠结之处。

首先是登陆界面，我将EditText的样式改为了标准的Android原生控件，按钮使用的是无边框按钮，配色选择了比较平顺的浅黑色，整体乏善可陈。

然后，当我们试图改造QQ的时候，首先需要脑海里有一个大致的改造方案，在我看来，第一步就是要确定导航层级。

两张图放在一起看。QQ没有抽屉，所以最高级的导航放在底部的TabHost上。分别是消息、联系人、动态、设置。消息顾名思义，就是最近联系人与消息记录，联系人这里只有好友分组，群与讨论组在上方提供了单独的入口，生活服务类似于公告号，通讯录属于历史遗物，我也不是它的目标用户，不能完全理解其设计意图。

在我看来，QQ的核心业务始终是通讯，所以我选择强化联系人与消息之间的关联，并且优化群&讨论组的导航方式，将其整体整合为“消息”。

动态里面，囊括了QQ空间、游戏、会员、阅读等等的入口，但是在我看来，类似于游戏、会员、阅读等等都应该是针对用户的一种服务。至于附近的人，扫一扫等等的操作性较强的功能，则是用于获取信息&交换信息，所以应该属于发现类。最后一个Tab是设置，除去个人资料我认为需要被剥离外，其他保持现状。这样一来，整体思路就比较清晰了。在新的设计里面，我们使用Drawer作为导航方式，将个人相关纳入Drawer中，而Drawer中的item分别是“消息”、“服务”、“发现”、“设置”。

确认了抽屉中的内容，然后别忘了ActionBar的Logo。我本意是做一个纯色的QQ图标（类似微信）放在左上角，但是由于个人渣美工，完全无能……所以就只好用一只彩色的企鹅作为Logo了。于是抽屉就应该是这样的：

之后的过程，在我看来就是改造了。在往后的内容和今天的问题脱节，所以我就放一些图吧，效果图如下：

大概就是这样，最后我说说我对于AndroidDesign的一点个人看法，希望大家不要走弯路_(:з」∠)_大概就是以下三点：

第一是警惕原教旨主义，AndroidDesign从来都不是完全正确完全合适的，不要迷信AndroidDesign。

第二就是不要满足于平庸水平，大多数AndroidDesign的应用都只是在向谷歌看齐，Google的应用已经很平庸了，而他们的所谓百花齐放，不过是对平庸的趋之若鹜。

第三是不要动不动就想超越规则创建规则，请先掌握规范，然后在考虑超越AndroidDesign的局限。

PM的自我修养——关于AndroidDesign的一些基础知识相关推荐

PM的自我修养——QQ2014forAndroid客户端简要分析（一）
总的来说,QQ2014继续秉承一贯的iOS风格,并且丝毫看不出其团队有考虑过使用AndroidDesign.无论是惨白的色调还是Switch的绿色底色,都是彻头彻尾的iOS风格. 还是从导航层级来说. ...
PM的自我修养——QQ2014forAndroid客户端简要分析（二）
上一篇简单的说了一下QQ2014的导航层级,除此之外,QQ2014也没有什么导航相关问题需要探讨. 这次说说功能亮点. 其实所谓的QQ2014,真正的称呼应该是QQ for Android 4.6. ...
论运维职业发展中的自我修养
作者介绍温峥峰,百田信息运维技术专家,DevOps Team Leader,超过8年互联网运维经验,曾就职于网易游戏,经受过各类海量规模互联网业务模式的历练,专注于运维自动化.DevOps实践.运维 ...
《程序员的自我修养》
<程序员的自我修养>这本书偏底层,来来回回读了有三四遍了,每一次都有新的收获,不过很快又会忘记,所以写下了这本书从17年12月份至今的全书的笔记,留作以后自己复习. 第二章:编译和链接源 ...
kdj python实现_一颗韭菜的自我修养：用Python分析下股市，练练手
一颗韭菜的自我修养. 机器之心报道,编辑:魔王.陈萍. 股市跌宕起伏.7 月初 A 股飙升,股票瞬间成为大家的热门讨论话题,「现在入场还来得及吗?」几乎成为新的问候语. 然而,经历了连续近 10 个交 ...
【读书笔记】程序员的自我修养总结（七）
[读书笔记]程序员的自我修养总结(七) 标签: [编程开发] 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:这是程序员的自我修养一书的读书总结,随着阅 ...
腾讯朋友力荐书籍：程序员的自我修养：链接、装载与库
后台开发需要学习底层知识,只有底层知识掌握了,学一些中间件是信手捏来,中间件也是跑在底层的操作系统上.<<程序员的自我修养:链接.装载与库>>对学习底层知识非常有帮助,腾讯的朋 ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
免费下载！《阿里工程师的自我修养》公开10位阿里大牛解决问题的思维方式
简介: 今天,阿里技术公布一波阿里P8.P9技术大牛的思维模型,将他们的思维模式呈现出来.你可以在阿里资深专家职业生涯的真切感悟中,找到应对危机的最佳方法.<阿里工程师的自我修养>现已正式 ...

PM的自我修养——关于AndroidDesign的一些基础知识

PM的自我修养——关于AndroidDesign的一些基础知识相关推荐

最新文章

热门文章