Material Design是Google在2014年开发者大会上首次提出的设计语言，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”；在2018年，Material Design已经升级到第二个版本。当前在国外，Material Design（以下简称“MD”）已经被非常广泛地应用到主流app，如facebook的安卓端等。但是在国内，我们在安卓端很少看到完全MD风格的app，大部分都是在延用ios设计稿做一稿适配；只有少数的app，如网易云音乐、印象笔记的安卓应用以MD风格进行独立设计。

那么到底什么原因使得这几年MD设计语言没有在国内流行起来呢？在网上搜索分析文章，了解到原因有很多；总结来说，主要原因有两点。

第一点，MD设计语言出来的时间点有些晚。MD出来之前，由于安卓系统的开放性，导致安卓手机屏幕尺寸五花八门，同时由于按照安卓设计指南做出来的界面视觉效果比不上ios设计指南，所以开发者基本上以ios设计稿为基准进行一稿适配。 这样使得国内长期UI设计风格是被ios设计所主导。而MD出来之后，在国内，谷歌的影响力还是很有限，同时国内大厂也没有带头对安卓端用MD风格单独设计。总之，MD语言出现较晚是其流行不起来的一个原因。

第二点，对于大部分开发者来说，主要因为投入产出比低，即安卓端单独设计一份设计稿会导致设计资源和研发资源投入过大，却无明显收益。更具体来讲，我们ios和安卓各自都做设计稿，带来设计成本的增加；而开发同学重构已有安卓代码也会花费大量时间。而ios设计稿一稿适配到安卓，也不见得丑，用户不会仅仅安卓端app变得更好看而去使用app，所以还是一稿适配省事。

既然如此，那么MD语言我们是否应该彻底放弃？答案否，尽管我们从商业价值角度，对于在安卓端完全使用MD语言存在顾虑，但是从用户体验角度考量，在安卓端按照MD语言进行设计更加友好。另外，哪怕我们是用ios设计稿进行一稿适配，MD语言依旧有很多值得借鉴的地方，即借鉴到我们日常ios app界面设计中，如里面的文字规范、布局规范、颜色规范、图标规范、交互动效以及部分组件等。为什么可以借鉴呢，因为MD本身就是考虑了跨平台、多终端的一套设计语言。

正好最近经常使用网易云课堂，认为还有一些页面在布局和视觉呈现上可以做得更好，所以试着在优化的同时结合应用MD语言进行一次改版。这里重点不做app范围层和结构层优化，主要做框架层和表现层的优化尝试。

文章内容分为三大章节，第一个章节是“界面整体及局部展示”，详细解构本次改版的设计细节。第二个章节是“设计规范”，从文字规范、颜色规范、布局规范、图标规范制定基本规范；第三个章节是“MD语言与ios app设计 ”，讲述MD语言如何应用到ios app 设计稿当中。

在看下面内容之前，请对网易云课堂有初步的了解，以减少您的阅读障碍。如果没用过，最好去下载app简单使用下，至于是ios还是安卓系统的app关系不大；当然体验安卓客户端更好，因为本次改版是针对网易云课堂安卓端6.9.3的改版尝试。 同时在文章底下的附件里，有本次改版的源文件，在源文件里面也放了改版前的页面截图，所以可以把它作为文章补充；如果觉得文章哪里表述不清楚，可查阅对照。 

先来预览下改版后的整体效果。

这里，做了网易云课堂安卓客户端V6.9.3一级页面的MD改版，即“首页、发现、我的学习、账号”四个页面。

由于本次探讨的是用MD语言来优化安卓客户端V6.9.3，重点是用MD设计语言来改善界面视觉表现，提升页面精细程度；所以不深挖用户体验，即不通过对产品定位、业务需求、用户需求以及竞品层面的分析来对页面进行交互层面和视觉层面同时优化。以下对这“四个页面”分别展示改版细节。

一、首页

先来总览网易云课堂安卓V6.9.3首页页面（改版前），以下截取首页的不同区块。

从旧版本首页的页面布局和视觉层面分析，发现存在一些问题，下面列出部分。

先看下改版后的整体效果

下面对首页各模块进行拆解展示用MD语言改版后的视觉细节，他们分别是：

1、应用栏和底部导航栏

1）旧版本问题分析

改版前，如下图所示，应用栏的样式是直接由ios一稿适配的；并且有底部标签栏。

2）改版思路和细节展示

按照MD规范对应用栏进行重设计，把原来“底部导航栏”的四个入口全部放到顶部，其中“首页、发现、我的学习”作为标签可以直接切换，“账号”直接放入左侧侧边栏（绿色遮罩区域）。

这里强调一下小图标设计细节。小图标设计大小为24dp*24dp，这里有“侧边栏”和“搜索图标”。用“搜索图标”说明细节，它距离右侧是16dp，但提供给开发的是一个48dp*48dp的切片(绿色边框），相当于在小图标周围填充12dp；为方便标注，可以在小图标下面建一个透明的48dp*48dp正方形，最后开发同学看到的标注是如下图绿色标注所示的4dp，而不是16dp（另外一点补充说明，MD语言也允许“底部导航栏”的存在，但由于安卓机子底部通常有系统自带的三个功能键，容易误操作，所以在安卓端放置“底部导航栏”不是第一选择）

2、首焦

1）旧版本问题分析

改版前两边露出局部的轮播图，不够美观，并不需要靠这个提醒首焦是轮播图 。

2）改版思路和细节展示

针对以上问题，采取的方案就是两边不展示局部的轮播图。其次，因为页边距由12dp改成16dp，所以banner也同时微调，由原来的336dp*154dp改成328dp*160dp；改版后长宽比约2:1。为什么不刚好2:1呢，328dp的二分之一不是164dp吗？因为高度微调4dp后，banner长度和高就都能被8整除（这也符合MD里面规定，控件尺寸第一选择控制在8dp的倍数；次要选择是4dp的倍数）。

说到比例，那么MD对于比例有什么规范？如何应用？下面从“MD语言比例规范”和“主流app首焦比例研究”分别说明MD比例规范是什么以及如何应用MD语言比例规范。

a、MD语言比例规范 

MD语言建议元素宽高比是16:9，3:2，4:3，1:1，3:4，2:3，这些常见的比例让我们的设计拥有简单的规则，不必费力去记忆，如下图所示；关于MD比例规范，在文章第二个章节设计规范里面的布局规范有详细的说明。

b、主流app首焦比例研究

有一个问题，就是这里网易云课堂首焦为什么不按照MD建议的比例？因为首焦宽高比采用哪怕是MD建议的比例最窄的16：9，对于如电商类平台等信息密集型app，占用的高度也太高了。我们需要在首屏展示更多的内容，以便提高除搜索、首焦、“主功能区”之外其他的模块的UV，所以首焦高度都尽可能压缩。对主流app进行截图，发现几乎都不采用一个有规律的比例。当前主流app首焦，比例大多都在2倍到3.5倍之间（如下图）。

这里美团的轮播banner可以说极限窄了，宽高比快接近4倍了，文字阅读体验已经不是最佳了；其实这就是一种妥协，即用户体验妥协于业务需要；更具体来讲，就是作为用户体验一部分的“视觉表现”妥协了UV提升这个“实用性”需要。妥协意味着打破设计规则，所以这里没有遵循MD比例规范，用了其他比例，同时美团banner文字也用得比常规小。

这样一来，我们对如何应用MD比例规范就有清晰的策略：先尝试遵循它，无法满足实用性，就去打破它。具体来说，就是对于设置元素的比例，如头像、列表图片、商品详情页等等，我们可以采取策略是优先考虑MD推荐的比例，但是当这些比例不能满足特定页面排版布局时，我们可以用其他比例，比如2：1或者3：1等好记的自定义比例。如果在这些比例还不能满足需求，可以在这个基础上做调整。

有一点需要强调，MD的比例规范在ios app设计中完全适用。

3、主要功能区

首焦下面是主要功能区，当用户进来时是有目的的寻找课程；除了搜索功能可以提供帮助，就是这个主要功能入口了。也就是说主要功能区是为了满足这一类带着目的来寻找课程的用户而设计的功能入口。

1）旧版本问题分析

改版前“系统化学习路径”的分类和应用栏里面的“分类”入口内容有交叉重叠。

2）改版思路和细节展示

可以对功能进行合并整理,避免用户困惑。同时把入口做成图形化的图标，更容易形成记忆点，这里的图标用统一的圆角矩形底板，内部反白，通过微渐变、轻投影塑造轻质感的折纸风格（细节见第二章节的图标规范）。

在介绍主功能区细节前，先了解下MD的网格。MD规定，组件尺寸和间距都建议对齐在8dp网格上（如应用栏和悬浮按钮等），而小组件如图标、字体和组件内的元素的尺寸以及间距允许对齐在4dp网格上。

接下来展示主功能区细节上如何应用8dp网格和4dp基线网格。这里的主功能，作为整个组件是对齐8dp网格的，它的高度是184dp刚好被8整除（下图所示）。而主功能图标和文字都对齐4dp基线网格，图标大小44dp*44dp（绿色遮罩区域），文字字号是设置12sp，行高16dp。以文字行高为边界线，如图所示“设计创意”文字上下间距分别是有6dp和14dp；为什么间距这么没有规律呢？原理是基线网格对齐。

下图展示基线网格下的间距，看到图标和文字底端均对齐4dp基线，“设计创意”上间距就是约8，下间距为16dp，这是以文字的字高而不是行高来计算上下间距。问题来了，既然用基线对齐，为什么要设置行高？因为在多行文本就需要行高。

MD并没有对文字的行高有严格数值规定，但规定行高必须是4dp的倍数，这样能保证多行文本文字能全部对齐4dp基线网格上；而安卓开发同学通常习惯一个字号对应一个行高，或采用系统默认行高，或统一对每个字号的行高自定义设置。一个字号设置太多行距，对于开发同学并不友好；通常建议一个字号定义一个行高，特殊情况可以是两个行高，如MD提供的文字样式sketch文件显示16sp应用在标题和正文是行高分别是24dp和28dp；（注：文字字号单位是sp，通常1sp=1dp，另外底部附件含有MD官方文字样式sketch文件）

4、课堂直播

1）旧版本问题分析

如下左图，表头标题过大，20dp的bold字重，在这里并不美观。这里时间轴断掉，可能是bug； “查看更多”放在表尾，比较占用高度。

2）改版思路和细节展示

改版过程分为三个步骤，第一步，表头优化，表头采用图标加文字的形式，即方便用户快速定位，也增加美观度；图标采用非常简约的带底板的面型图标。第二步，另外把“查看等多”的入口移到表头，节省空间。第三步，最后用MD规范的文字字号、颜色，以及间距规范对整体进行微调。下面分别介绍表头和表内容的细节。

a、表头的细节

先看下表头的整体细节，表头总高度48dp，标题文字是16dp，次要文字14dp，这里的文字规范直接采用MD文字规范。页边距是16dp，文字和图标的间距大多是8dp，除了绿色标注的间距是4dp。

这里的“直播图标”和“小箭头”都是小图标（真实宽高都不超过20dp的图标），按照MD规定的小图标规范，小图标需要用24dp*24dp的“图标盒子”作为图标绘制参考，下图展示这两个图标在图标盒子下的真实尺寸和切图尺寸（图标盒子在第二章节设计规范的图标规范里会详细介绍）。

为什么“课堂直播”图标切图尺寸是20dp*24dp，而不是和应用栏一样采用48dp*48dp， 因为它不可点击，不需要考虑点击热区。既然不考虑点击热区，那切图的尺寸满足两点就可以了，一是尽量靠近真实尺寸，以方便左右间距计算，如上右图“小箭头”的切图宽度设为8dp；二是宽高要是4dp的倍数（MD对组件尺寸的规范必须是4dp的倍数）。 “小箭头”这里也不需要考虑点击热区，因为这里局部区域都可以点击（下图绿色遮罩区域）。

另外，如果小图标都在sketch做成组件，都应该是24dp和24dp的，为方便切图，可以给组件加上蒙版，比如这里的小箭头图标下面画一个8dp*24dp的正方形，建立蒙版。这和应用栏图标为切图48dp*48dp的处理一样，symbol里每个小图标都是24dp*24dp，但是最终开发同学看到的标注就是如下图两个图标的尺寸和距离。（这里细节表述可能不够清楚，底部附件有源文件对照）

关于课堂直播的表头，还有一个细节，就是把表头当做一个组件（下图所示），把它设置成48dp的高度，而里面包含的图标和文字无需对齐4dp基线，只要居中对齐即可。这是MD对无需对齐基线的特殊情景，即一个组件里面只有一行且需要居中对齐的情景。

b、表内容的细节

上面分析了表头的细节，下面分析表内容，我们从文字属性、距离、组件尺寸分别拆解展示。

先看下文字属性，这里文字样式也是用MD的语言设置，包括文字字号、字重、行高以及颜色的用法。表内容只有两个层级，一个是标题文字，一个是正文3。下图的日期、时间、“讲师”都是正文3,只不过时间“20：00”因为是纯数字，字体用robot。（这里出现的“正文3”，在第二章节设计规范下的文字规范里面有详细介绍）

下方左图展示表内容的水平间距，都是4dp的倍数。尺寸也是按照MD建议小组件最少要4dp的倍数。

但是这里“小三角”并没有完全按照规范（见下图绿色线框），因为尝试用宽高4dp*8dp，8dp*16dp，视觉感受上要不太小，要不太大，并不美观，最后采取了宽度是6dp*12dp，同时为了和小圆点（橙色线框）水平对齐，“小三角”与色块上边界距离设置14dp。尽管“小三角”没有遵循MD规范，但是小三角和圆角矩形色块是一体的，它的宽高260*60都是4dp的倍数。这里的“小三角”是因为考虑审美，适当打破了MD关于尺寸规范的规则。

在前面主功能区已经展示了基线网格的用法，与其不一样的是课堂直播表内容出现了多行文本和文字组。下图展示文字对齐基线的间距，这里也采用MD的规范让文字底部贴齐4dp基线。

用基线网格对齐，文字与元素之间的真实间距可能不是4dp的倍数，下图所示，文字与文字之间的的真实上下间距4dp和10dp。

隐藏基线网格，开发同学看到效果图，是文字带有行高属性的标注（见下图），因为开发同学定义上下间距，是以文字行高的边界为基准的。这里还有一个细节，就是这里的讲师头像和讲师介绍构成了一个小组件（绿色遮罩），所以这里只要头像对齐基线网格即可，文字和头像居中对齐，这里同上面表头内元素居中对齐的情景一样。

5、微专业

微专业是网易云课堂最具体系的课程，采用录播+直播的模式，这里面的课程大多是网易在职大咖授课。

1）旧版本问题分析

如下左图所示，标题文字过大，20dp的文字，用在这个场景并不美观，且标题内容主次安排不合理；另外表尾的“了解更多微专业”的样式，也和其他首页模块不一致。

2）改版思路和细节展示

a、表头

表头的形式和上一个模块“课堂直播”保持统一，这里对细节不再赘述。区别仅在这里的表头多了副标题，同时也增加了分割线，分割线左右间距各8dp。

b、表内容

在上一个模块“课堂直播”的表内容，对基线网格的应用进行了详细阐述，这里重点说明间距的设置思路。这里的间距关系是，间距4≥间距3≥间距2≥间距1，间距5≥间距2。为什么设置这样的间距关系？因为我们要用间距体现这些内容亲密关系程度。这利用了格式塔原理的邻近性原则，即我们的眼睛会把互相靠近的元素当做一组。这里表内容的标题文字和正文形成了最小组，所以他们之间的间距1应该设置最小，这个最小组和上方的图片形成复合组，他们的间距就是图中的间距2，它一定不能比间距1小，依次类推。

那么理清这个对我们有什么用？当然有用，我们可以设置元素之间最小间距作为基准间距，在这里就是间距1。根据经验，如果元素基准间距是上下间距的话，通常它的值是8dp比较合适，也就是说大概占用两个4dp的基线格子；有了基准间距，就很好办了，间距2要大于等于间距1。而增量梯度最高是一个基线格子，即间距2可以设置约2个或3个基线格子的距离，可能是8dp、9dp、10dp、11dp或12dp。在这个模块里面，间距1=8dp，间距2=11dp，间距3=12dp，间距4=间距5=16dp。全局范围内我高频使用8dp、12dp、16dp的三个间距，利用4dp基线网格，那么我就可以通过数格子计算间距，即只要看2个格子，3个格子，4个格子来控制上下间距。

总之，我们设置间距首先要梳理元素之间的亲密关系来确定间距大小关系，然后从设置最小间距开始，依次设置其他元素之间的间距，当然这里要用基线网格辅助对齐。

6、限时秒杀

1）旧版本问题分析

限时秒杀模块，个人认为有几个问题；一是颜色用得过于单一，有点单调；二是价格和剩余席数的间距有些混乱；另外“马上抢”和“倒计时”看起来有点大。

2）改版思路和细节展示

时间轴

时间轴单个模块尺寸按照4dp的倍数调整（见下图）。

倒计时

调小尺寸，调整成16dp*16dp，并且颜色改成主色，里面文字改成10sp的极限文字（见下图）。

列表图片

这里的图片比例也是3：2，和旧版一样，只是高度略微调大以便匹配右侧信息高度。具体是根据右侧的信息量进行排版（绿色遮罩显示右侧信息量占用高度），继而确定了图片的高度，再用3：2比例计算出图片宽度。

列表间距

这里的最小是4dp，用于两个价格数字之间。

列表文字

用MD文字规范重新调整了字号、颜色，这里强调一点，列表中的“限量席数”改成了主色绿色，用了12号字体。

小按钮

“即将开抢”按钮改成64dp*24dp，字号12sp。

7、个性化推荐

1）旧版本问题分析

如下方左图所示，旧版本的“个性化推荐”大标题下的背景过于抢眼，在整个页面很突兀。另外，表内容中的样式1虽然很有区块分割明显，但是灰色的背景上用灰色字识别度低，且不美观。而表内容的样式2和上个模块“限时秒杀”的表内容形式一样，这样给人感觉比较单调。

2）改版思路和细节展示

基于以上列出的问题，那解决方案分别是弱化“个人推荐”大标题模块，背景直接换成灰色背景；样式1去掉灰色背景重新排版；样式2视觉呈现彻底改变。这里着重说明下图片尺寸和标签的细节。

下面的大图片16：9，为什么说接近呢？大图尺寸是328dp*184dp，实际是这么来的，328dp是两边减去全局边距16dp得到的，那高度=328*9/16=184.5,把值微调成184就能被8整除了，尺寸就这么来的。标签“微专业”与小标题之间的间距用了组件之间最小间距4dp，标签高度用了16dp。

那小图呢，如下方左图所示，比例也是16：9， 具体的思路是先定宽度，再定高度。那么它的宽度怎么确定呢？根据排版需要决定大致宽度，下面详细说明思路。

“零基础 ipad Q版插画手绘”这一行标题最多字数在15个字左右（即下方右图的红色遮罩区域），因为限定字数太少的话，标题很难让人理解说得是什么。根据文字量，决定屏幕宽度2：1的位置作为构图比例正合适。（这也是对MD比例规范的应用，即下方右图所示的“2a”与整个屏幕宽度“3a”的比例是2：3）。 比例确定了，我们是完全按照比例定位位置吗？不是的，如果完全按照比例，下方右图标注的红色虚线，正好是2：1的位置上，而实际上分割点放在了绿色虚线 。因为MD的组件尺寸要尽量被8dp整除， 所以微调下卡片宽度选择好记又能被8整除的宽度200dp，所以第二张卡片的左边界就偏移到了绿色虚线位置。

既然宽度定了好，那高度=200*9/16=112.5，最后选用112dp作为高度。另外，上一个模块“限时秒杀”的表内容是根据排版内容先定高度，但思路是一样的。

二、发现

先来总览网易云课堂安卓V6.9.3“发现”页面（改版前），以下截取“发现”页面的不同区块。

从上方“发现”页面的布局和视觉层面分析，发现有以下这些问题存在。

先来看下改版后的效果

下面对“发现”各个区块进行拆解展示用MD语言改版后视觉细节，他们分别是：

1、应用栏和标签栏

2、样式一（feed流）

3、样式二（feed流）

4、样式三（feed流）

1、应用栏和标签栏

这里仅仅是根据MD语言调整样式，如下图

2、样式一

1）旧版本问题分析

改版前，默认头像和“加关注”样式不美观，“更多”图标横向并不符合安卓系统的样式。

2）改版思路和细节展示

a、表头

头像做成图标，更美观；“加关注”做成描边小按钮，强化可点击。“更多操作”图标大小8dp*24dp，如下图中首图所示，距离页边16dp；但切图是在其边缘周围填充12dp，即最后切图32dp*48dp，所以开发同学的代码实现是左边距0dp，右边距4dp。

b、表内容

图片改成4dp圆角，尺寸微调，标题文字改成regular，并且文字都按照基线网格对齐。

3、样式二

1）旧版本问题分析

表头“更多”图标不匹配安卓的规范，表内容重要文字颜色过于弱了。

2）改版思路和细节展示

a、表头

调整“更多”图标样式，改成安卓端常用的竖向，同样式1的表头。

b、表内容

图片改成4dp圆角。直播图标填充改成更深的半透明遮罩，这里设置整个尺寸56dp，是8dp的倍数。填充#000000 38%， 内描边1dp厚度，色值#ffffff；另外里面的图标大小24dp*24dp。

4、样式三

1）旧版本问题分析

表头问题同上，所以不做赘述。

2）改版思路和细节展示

表头细节同其他模块，这里不再重复。这里对整体字号、行距、距离、图片尺寸都进行微调，对齐了4dp基线网格；图片的宽高是84dp*56dp，比例是3:2，也是MD推荐的常用比例。

三、我的学习

先来总览网易云课堂安卓V6.9.3“我的学习”页面（改版前），以下截取“我的学习”页面的不同区块。

从上方“我的学习”的页面布局和视觉层面分析，发现有以下这些问题存在。

看下改版后的效果

应用栏和标签栏细节同“发现”页面，同时前面的“首页”和“发现”大篇幅解析尺寸的设定和4dp基线网格的应用，接下来就不对这些进行详细说明了。下面分别展示其他区块用MD语言改版后视觉效果，他们分别是：

1、可视化视图和“学习时间”

2、最近在学

3、报名记录

1、可视化视图和“学习时间”

1）旧版本问题分析

大面积灰色块背景给人感觉比较压抑；另外“学习时间”卡片的排版美观度不佳。

2）改版思路和细节展示

这里把背景统一改成白色，同时时间轴进行了微调；另外调整“学习状态”卡片，去掉底板，并且调整版式。

2、最近在学

1）旧版本问题分析

表头问题同前面首页“限时秒杀”等模块同样的问题，标题文字对比过于极端，所以看起来不美观。

2）改版思路和细节展示

a、表头

同首页的 列表形式一样，配上图标；

b、表内容

图片宽高调整为4dp的倍数，调整比例同首页的“微专业”和“限时秒杀”的表内容图片一样都是3:2；

3、报名记录

1）旧版本问题分析

下面左图所示，我们看到存在文字量少的情况，这时候左文右图形式文字和图片之间的留白显得非常不舒服（淡红色的色块）

2）改版思路和细节展示

改成左图右文，减少不规整的留白；另外调整图片尺寸，最终确定和首页的“限时秒杀”表内容图片一样大小，以尽量减少图片尺寸种类。

四、账号中心

我们先来看下改版前后视觉效果。

从上方改版前的页面观察，发现一些问题，罗列如下

这里改版的主要思路是，把较为不常用的账号管理功能做成抽屉式导航；在视觉层面上，利用8dp网格和4dp基线网格重新设置尺寸和距离，并遵循MD的列表规范；另外通过配色、重绘图标优化界面视觉呈现。

下面对改版后的抽屉式导航的账号页面进行整体和局部拆解展示用MD语言改版后的视觉细节，他们分别是： 

1、页面布局

2、应用栏和个人信息

3、常用功能区

4、功能列表。

1、页面布局

1）旧版本问题分析

带投影白底板的底下也是白色，显得多余。列表色块分割频繁，页面不透气；

2）改版思路和细节展示

如下面右图所示， 改成抽屉式导航页面，主页面宽为304dp，右边缘留56dp，页面下方是38%不透明度黑色遮罩层；主功能区和功能列表之间通过大留白间隔；带图标的功能列表采取MD推荐高度56dp，用分割线分类，这带来了透气感；底部“退出功能”列表项，采用了48dp高度。

2、应用栏和个人信息

1）旧版本问题分析

改版前，应用栏图标没有按照MD图标规范，如图标尺寸；同时默认头像缺乏细节，“我的主页”外边框多余。

2）改版思路和细节展示

把默认头像做成图标。

3、常用功能区

1）旧版本问题分析

这里主要是配色单一的问题，另外这里带阴影的白色底板多余了；

2）改版思路和细节展示

去掉带投影的底板，同时图标重新设计，选择的图标颜色要匹配功能入口所传递的心理印象，如“我的卡券”，可选择有促销、热闹色彩感受的暖色色相。这里的图标参考MD的24dp*24dp的图标盒子重新定义了36dp*36dp的图标盒子。如图所示，内部主要绘制区是30dp*30dp，对于四种不同的形状的图标给出长宽参考。周围3dp（下方绿色标注）是为了应付极端情况,只有为了平衡重量才允许在此区域绘制，但不能超出36dp*36dp的区域。

4、功能列表

1）旧版本问题分析

灰色分割块过多，显得不透气。

2）改版思路和细节展示

背景统一白色，列表项组用1px实线分割；另外，列表加上图标能让用户快速识别功能，同时更美观；这里图标采用MD图标规范，也就是24dp*24dp，由于图标细节比应用栏图标更多，设置线条粗细为1.5dp。

上面的第一个章节介绍改版前后页面整体视觉表现和局部细节；接下来展示改版后的规范总结，仅包含基础规范，下面分别展示：

1、文字规范

2、颜色规范

3、布局规范

4、图标规范

一、文字规范

这里总共有三块内容，分别是概览、场景举例、文字基线对齐

1、概览

下面展示的文字规范采用MD规定的字号系统，MD还规定了H1到H3,主要在PC端可能会用到，而移动端用不到，所以这里不展示了。中文字体，使用 Noto Sans CJK SC字体， 英文和数字字体使用Robot字体。另外文字颜色常用#000000 87%、#000000 60%、#000000 38%（暗色背景上的文字相对是#ffffff 87%、#ffffff  60%、#ffffff 38%）。其中所有标题色值均为#000000 87%，所有辅助说明色值均为#000000 38%；正文包含常规三种色值，与标题搭配时常为#000000 60%；独立使用（没有标题）时通常为#000000 87%；特殊情况，需要刻意弱化时则使用#000000 38%；所有字号有34sp、24sp、20sp、16sp、14sp、12sp、10sp；其中16sp、14sp和12sp为常用字号，16sp、14sp可用于标题和正文，12sp可用于正文和辅助说明，根据排版需要选择合适字号。下面表格对文字的使用进行细致的规范。

中文：NotoSansCJKsc   英文/数字：Robot

上面说了标题、正文、辅助说明的用法，那怎么才算标题、正文和辅助说明呢？用文字层级去判断。当一个组合只有一个层级时，只有正文，比如首页主功能区图标下文字。当一个组合只有两个层级，会用到标题和正文；当出现三个层级时，除了有标题、正文外，把第三个层级的内容作为辅助说明，如时间等；这里组合指的是一个组件，可能是完整的组件如应用栏， 或“账号”的功能列表等；也可能是大组件内小组件，如首页多个模块的“表内容”等。

2、场景举例说明

因为本次针对网易云课堂的安卓端V6.9.3的改版仅改动一级页面，暂时未用到“H4大标题、按钮文字”，所以这里不做举例了。下面对所有标题、正文、辅助说明、极端文字进行场景举例。

1）H5 大标题

大标题，用于图文排版场景,信息量少的页面或数字凸显（如金额、时间等）；目前的四个页面中仅有“数字凸显”的场景使用，使用字号24SP，字重regular，行高32dp，文字颜色#000000 87%（如下图）

2）H6 大标题

用于应用栏、对话框标题，结果页、空状态等信息单一页面标题，或需要强对比的其他场景下的标题。使用字号20SP，字重Medium，行高28dp，文字颜色#000000 87%（背景暗色系时用#ffffff 87%）；

3）标题1

标题，使用字号16sp、字重regular、行高24dp、文字色#000000 87%，用于表头标题、功能列表标题、feed流标题、表内容标题，常与14sp的字体搭配使用。

4）标题二

小标题，使用字号14sp、字重Medium、行高20dp、文字色#000000 87%。与12sp的字重regular正文搭配使用，常用于表内容标题，如首页的微专业和限时秒杀模块表内容标题（如下图所示）。

5）正文一

使用字号16sp、字重regular、行高28dp。作为正文和H6大标题（20sp）搭配使用时，色值为#000000 60%，如下图的应用栏里非当前状态的文字；而用于无标题的段落文字时，色值为#000000 87%（下方第二张图红色遮罩区域）

6）正文二

使用字号14sp、字重regular、行高20dp。作为正文主要和标题1（16sp）形成对比，也允许和标题2（14sp）搭配，色值常为 #000000 60%。

7）正文三

使用字号12sp、字重regular、行高16dp、文字色通常为#000000 60%和#000000 87%。搭配标题时，文字色使用#000000 60%；通常与标题二（14sp）形成对比，如下图区域1的正文；也允许与字号更大的标题进行强对比，如下面左下图的区域2的个人头像的“我的主页”。当正文使用的情景无标题时，即单独使用，使用色值#000000 87%，区域3的场景。

特殊情况，需要刻意弱化的正文内容，使用色值 #000000 38% ；如下图限时秒杀 “未开始”的时间点，这里用“灰掉”的颜色表示“现在不可抢”；另外“没有更多了”不想吸引用户注意，也是刻意弱化。（下图红色遮罩区域）

8）辅助说明

使用字号12sp、行高16dp、文字色为#000000 38%，通常情况使用字重regular，常规用于一个模块里面文字组三个层级及以上，重要性相对弱的一个层级。（下图红色遮罩区域）

9）极端文字

极端情况用到，用于小组件，如提醒圆点数字。下图“倒计时”内的文字就是一个应用场景。

3、文字基线对齐

中文和英文对齐的基线不一样， 这里以16dp字号的中文和英文对比一下。因为汉字是方块字，所以可以直接用文字底部对齐基线；而英文却不是，它有四个基准线，需要用第三条线对齐。

二、颜色规范

颜色的使用场景有文字、背景、分割线、蒙层、按钮、图标，下面分别说明。

1、颜色_文字 

文字色、链接色、标签色

2、颜色_背景

3、颜色_分割线

4、颜色_蒙层

5、颜色_按钮

每组按钮三种状态，从上至下为常态/点击态/禁用态。其中作为主色的绿色按钮用于主操作，结果页的确定等。亮橘色的按钮用于局部，表现促销的色彩情绪。而红色的按钮用于传递警示操作的情景。

6、颜色-图标

图标颜色分两种情景，灰色系功能图标和有彩色功能图标

1）灰色系功能图标

有两种颜色。其一是#000000 60%是图标常用色，用于首页导航栏图标，账号功能列表图标等，见下图红色遮罩标记；另外用颜色 #000000 38%，用于刻意弱化的情景，目前仅用于箭头，见下图绿色遮罩标记。

2）彩色系功能图标

彩色图标主要用于面性图标，因为使用微渐变，所有使用两个色值，一个深色、一个浅色，当然深浅变化是轻微的，下面就以深色和浅色来称呼他们。已经设定6个渐变色复用在多个场景中（如下图所示）。

使用的场景有三处，分别是首页主要功能区，账号主要功能区，列表表头。

当然，如果前面提到的6个配色方案不适用，可以增加其他方案。那“其他方案”怎么配色呢？关于图标微渐变的配色方案的细节，可以分为四个步骤:

第1步，选择“深色”色相；

第2步，选择“深色”色调；

第3步，选择“浅色”色相；

第4步，选择“浅色”色调；

第1步，选择“深色”色相

根据内容匹配正确的色彩印象选择色相，如“职场提升、语言学习”字面上的“提升”和“学习”都可以理解成长，这里可以采用绿色。当然，“职场提升”也可以用蓝色，因为“职场人士”通常给人商务、严谨的印象，所以也合适。

第2步，选择“深色”色调

通常使用明色调，因为明色调既能准确表现色相具有的色彩印象，同时没有纯色过于刺激眼球等负面印象。建议大致区域如下图矩形框内，在sketch拾色器下面左图标记的这个位置选一个靠近距离B的色值（即饱和度更高，明度更低）代表渐变色里面的深色。

第3步，选择“浅色”色相

上面两步完成深色的选择,为形成微渐变的效果，色相不宜差太大，建议以“深色”色相处于色相环的位置为基准点，在前后15°内选择，确定色相。可是sketch的拾色器没有HSB模式可以用来精确调整色相，怎么办？可以用其他工具，比如ps，把“深色”HEX从sketch复制到ps当中，然后精确调整好HSB，然后拷贝HEX颜色参数到sketch里面；也可以粗略调整，15°/360°=1/24，也就是说，下图的色相滚轮只要总长度左右移动不超过1/24就好，我们目测微调下。

第4步，选择“浅色”色调

也同样选择明色调，和“深色”不同，“浅色”的色调尽量靠近上图的A点，即选用更亮，饱和度更低的颜色。

三、布局规范

本次改版页面只严格采用MD的所规定的4dp基线网格，并没有严格按照8dp网格控制间距和组件。而MD规定出除图标和文字的尺寸以及距离只要求对准4dp网格外，通常组件的大小和距离都要严格使用8dp。本次改版的四个页面在组件和距离尽量是8dp的倍数，但还是有少数情况使用仅仅是4dp的倍数组件大小和间距（如部分图片的宽度或者高也仅仅是4dp的倍数，首页各模块表内容和表头的距离是4dp。）。为什么要这么设置呢，因为如果完全按照MD的规定，在平台类app的首页等信息密集型的页面留白空间是很大的，这使得一屏展示内容很有限，不利于各个模块UV数据表现，所以综合考虑采用的策略是：只用4dp基线网格，但是在间距和组件尺寸上还是优先使用8dp的倍数，如全局边距定为16dp。

1、基线网格

界面中任何元素都要对齐4dp基线网格。

当排版内容在一个组件中居中时，可以将排版内容放置在4dp网格之外，如下面的图标和文字仅仅在列表项里面居中对齐。

2、比例

在展示首焦的时候，提到了MD语言建议元素宽高比是16:9，3:2，4:3，1:1，3:4，2:3，并且这些常见的比例可以让我们的设计拥有简单的规则（如下图所示）；

本次改版大量使用其中的16:9，3:2，1:1的比例。这里更深入的说明比例的使用场景。概括来说，有两种场景，其一是以屏幕宽度为参照的构图比例；其二是局部元素的比例；下面引用MD官方的配图说明。

1）场景一：界面整体布局构图比例

2）场景二：局部元素的比例

四、图标规范

下图是本次改版页面图标的出现场景，那么这些图标如何保持统一呢？我们看到除了首页主功能区和个人中心的图标大小尺寸是大于24dp*24dp，其他都是小于24dp*24dp的。而MD对常用功能图标有一套完整的解决方案。这里图标大小在24dp*24dp以下的图标均使用MD图标盒子的规范，也就是说在sketch里给他们统一建立24dp*24dp的symbol，他们包括应用栏图标、账号功能列表、列表表头、其他小图标，见下图的红色标注。而下面绿色标注的图标并不按照MD推荐的图标盒子绘制图标，大小自定义。

所以这里我暂时把图标分为两类，24dp图标和自定义图标，下面详细说明细节。

1、24dp*24dp图标

在介绍如何使用24dp*24dp的MD图标盒子细节前，先来了解下MD的图标盒子是什么样的。所以这里有两部分内容，一个是MD图标盒子介绍，一个是MD图标盒子的应用细节。

1）MD图标盒子

图标大小为24dp×24dp，图标内容仅限于20dp x 20dp的实时区域，周边有2dp的填充， 特殊情景下，为了平衡重量，可以在周边填充区域绘制图标。

MD也给了关键参考线（如下图最左边），包括正方形，圆形，矩形，正交和对角线；我先来看下正方形、圆形、矩形1、矩形2四个参考线，下图我们看到四个形状的宽高不一致，为什么要这么设置呢？这是因为宽高都是20dp的正方形看起来比直径20dp的圆形要大，而为了平衡视觉大小，所以给出了四个基本形的参考线。比如我们要绘制竖长的图标，那就可以直接采用宽高16dp*20dp。

图标盒子其他参考线，即3条垂直线、3条水平线、对角线、内圆，它们有什么作用呢？上面的基本形参考线帮助我们定义整体大小，其他参考线可以帮助我们进一步定义细节，下面用MD官网文档里面两张图解释。我们看到，下面两张图分别采用正方形和矩形两个基本形参考线。此外，下面左图，用了水平参考线来定义镂空直线的位置；而下面右图用内圆参考线定义了镂空圆的大小和位置；另外也看到，它们都在基本形的基础上增加其他形状（红色线框标注），一个增加半圆，一个增加等腰梯形。同时，这两张图，也体现了MD对于方形的圆角是2dp，镂空也是2dp厚度的规定。

2）应用细节

上面我们介绍了MD图标规范，接下来说明有哪些场景应用它来指导图标设计，他们分别是应用栏图标、账号功能列表、列表表头、其他小图标，它们的设计画布尺寸都是24dp*24dp，即在sketch搭建的symbol都是24dp*24dp，下面一一说明。

a、应用栏

下面左图我们看到图标设计尺寸就是24dp*24dp，而图标点击热区采用48dp*48dp，这是MD规定的最小点击区域，即应用栏的图标切图尺寸就是48dp*48dp。下方右图展示目前已在应用栏用到的图标，线条粗2dp，角半径默认为2dp，内角笔直，不用圆角。当然也有不用外部角的时候，对于2dp宽或更小的形状，笔划角不用圆角的，如下面“消息”图标左下角是尖的。

b、功能列表

下面左图的功能列表图标设计尺寸也是24dp*24dp，但由于整个列表范围可点击（红色虚线框标注），所以切图尺寸和设计尺寸一样。下方右图展示目前已在应用栏用到的图标，图标圆角的规定同应用栏，但是线条粗细1.5dp，因为功能列表的图标有部分细节稍微复杂，用2dp会影响识别度。为什么是1.5dp呢，而不是1.4dp或1.6dp,因为1.5dp的线条可以让2倍图线条粗为3px，这正好对齐整像素。那3倍图呢，三倍图的机子，大多是视网膜屏幕以上PPi，哪怕没对齐整像素，也并不会那么模糊。当然也可以做得更好，3倍图不用sketch默认导出功能，而是把1倍图图标在sketch放大3倍，把线条粗细4.5dp设置4px，对齐整像素，然后1x导出，当然这个比较费时（网易云音乐安卓端3倍图就是这么做的）。。

c、列表表头图标

下面左图的列表表头图标也是设计尺寸就是24dp*24dp，由于这里无需点击操作，所以图标切图尺寸是20dp*24dp（为方便计算间距，图标下方放一个透明20dp*24dp的正方形，一起做成蒙版即可）。下方右图展示目前已在列表表头用到的图标，只定义两种基本形，一个圆形，一个水平长方形。（至于小箭头， 下面会说明）

d、小图标

下面左图的“更多操作”图标 ，真实设计尺寸是3dp*14dp，为什么用这个高度呢，主要和文字高度等元素保持高度接近，这样视觉更美观， 这里是和“加关注”放在一起。为了水平距离精确控制，在其下面建一个8dp*24dp长方形。这里有两种切图方式，其中第一种在前面第一章节的“发现”的样式一已经介绍过了，即热区可以设置成周围填充12dp（绿色填充），那切图尺寸32dp*48dp（整个绿色外框范围），开发同学右边距设置就是4dp；另外一个切图方式，就是直接切成8dp*24dp，点击热区为下图黄色虚线框内，这样一来，开发同学设置左边距12dp，右边距16dp。下方右图展示目前已在列表表头用到的图标，一个是列表表头出现的小箭头图标，一个下图feed流表头出现的“更多操作”图标。有一点需要强调，虽然小图标尺寸远小于图标盒子24dp*24dp，基本也用不到图标盒子来对齐，但是为方便管理图标，建议在symbol里面建立的组件大小同样是24dp*24dp。

2、自定义图标

上面大篇幅说明了24dp图标盒子和其具体应用方式。接下来说明首页主功能区图标和账号主功能区图标细节。

1）首页主功能区图标

主功能图标是有底板和里面的反白图标组成，底板的渐变色在颜色规范里面已经说明了，这里进一步说明里面反白图标的细节。

这里以“语言学习”图标为例来说明。

a、大小：

里面反白图标设置基准大小24dp*24dp，在这个基础宽高微调；

b、镂空：

里面镂空厚度固定2dp；

c、渐变：

从从上到下垂直渐变，从白色到靠近白色淡色调绿形成微渐变，淡绿色的色相用颜色规范图标篇说的“深色”或“浅色”或他们之间的色相。

d、投影：

投影位置参数是（x=0,y=1,模糊=3，扩展=0），颜色色相采用颜色规范图标篇说的“深色”或“浅色”或他们之间的色相。然后在在图中标记的区域的浊色调选择一个色值，透明度38%。（至于投影不用纯灰色，而是带色相的偏暗颜色，是因为这符合现实环境光的感觉，看起来更自然美观）

这里汇总目前已有底板渐变色、反白图标渐变色，以及投影色值。

2）账号主功能图标

a、大小规范

这里的图标采用正形图标，借鉴MD24dp的图标盒子，做了针对账号主功能的图标盒子，图标设计大小36dp*36dp，绘制区30dp*30dp，外部填充3dp。

b、图标细节

这里以“我的订单”为例说明图标设计细节

以上规范涵盖了文字规范、颜色规范、布局规范、图标规范，是不是还差组件规范呢？第一个篇章已经展示了各个模块的细节，它们包含了组件规范，所以不做重复说明。接下来我们看下第三个篇章，MD语言与Ios App设计。

在文章开头的时候，提到了MD语言对于以Ios设计稿为标准进行一稿适配也是值得借鉴的。除了一些ios系统控件不建议改动，如ios的导航栏、底部标签栏、对话框样式等，还有系统默认手势、交互动效等不去改动。其他大部分地方，都可以从MD语言去借鉴，如以8dp网格为参照的自定义组件尺寸、距离，颜色规范、文字规范、布局规范，至于MD强调的“海拔”概念相关的“投影”效果，在ios环境下视觉差异有点大，不建议使用。在本次应用MD语言进行实践过程中，个人认为其布局规范中的网格规范最值得借鉴IOS 设计稿中。

在第一个篇章，在首页模块“主功能区”提到了网格，在安卓端完全通用，因为安卓端设计稿尺寸360dp*640dp宽高都能被8整除；那网格能应用到ios设计当中吗，毕竟ios的设计稿尺寸是375pt×667pt？虽然不能绘制8pt的网格，但是还是可以用基线网格辅助，我们也可以设置组件和间距尽可能是8pt的倍数，其次是4pt的倍数。既然通栏组件宽度定死了是375pt，但我们组件的高度完全可以设置成8pt倍数，另外小组件宽高都可以设计成采用8pt或4pt的倍数。还有，用基线网格对齐组件和文字完全适用（如下首图）。另外补充一点，基线网格可以用sketch的“视图>画布>布局设置”来绘制（如下第二张图）。

这里对比下ios12最新组件，发现间距也以4的倍数为主要间距，但是还有其他间距。与MD语言对比，组件的尺寸和间距规则性并不强，下面看下截图分析。先看下ios系统模态对话框，我们测量边界以行高为基准，咋一看，发现除了两边的边距16pt还有下面操作按钮44pt是4pt的倍数（绿色标注），其他的间距好像并没有什么规律。

换个测量方式，如下左图所示，从英文字母基线的位置对齐，就有些规律了，但标题和正文内容字母基线的距离是21pt（下面左图橙色标注），可能是官方文件小失误。下面右图所示，另外一个带有搜索功能的对话框，这里标题和内容正文字母基线的距离是20pt（下面右图橙色标注），但是搜索框上下间距还是有点让人不解。

再来看下ios系统自带的分享弹窗，除了橙色标出来的是缺乏规律的组件尺寸和间距数值，其他的模块和组件的尺寸以及所用到的间距都是4的倍数。

以上分析了ios的组件尺寸和间距。相对来说，MD语言对于设计细节的精细度更高，哪怕是以ios设计稿来适配安卓，也建议自定义组件宽高用MD语言里面规定以8pt倍数为最佳选择，小组件允许用4pt；同时间距也建议以8pt的倍数为主要选择，小组件之间间距以4的倍数设置，上下间距的处理可以用基线网格辅助。当然，ios一些能直接应用app当中组件尺寸，我们不需要改，如44pt的导航栏，49pt底部标签栏等少数组件。另外，关于中文和英文如何对齐基线网格，在前面的文字规范已做说明。

结语

最后，发表一下个人对于设计理论、设计语言等各种设计规则的小小看法。我的观点是，对于经典的理论（不仅限于UI，指设计相关领域）应该先吸收掌握，在深刻理解规则的基础上再根据具体情景打破规则。所以对于UI设计师，不管MD语言、ios大留白、圆角卡片风格，我们都可以研究，但要结合app具体使用场景应用适当变通。

那么“具体情景”指的到底是什么情景呢？

个人总结，在界面设计中，打破规则的场景可以概括为两种情况；一是，以审美衡量，按照设计规则来做却不美的时候。遵循设计规则让我们设计有迹可循，我们可以用来参照，但美不美不是因为它的比例是黄金比还是白银比，最终要用我们的审美去衡量设计，如果遵循规则不美，这时候可以适当打破规则。比如在第一个章节首页第4个模块“直播课堂”里表内容的“小三角”的尺寸设置就是这种情况。另外首页的轮播点尺寸也是这么考虑，采用5dp大小（细节见附件源文件）。至于审美怎么培养那是一个大课题，其中重要方式就是看大量作品，至于看什么作品、怎么看作品才能有效吸收，由于实力不允许，不在本次讨论范围。二是，以实用性为衡量，按照规则满足不了实用性需求的时候。比如在第一个章节首页的首焦比例设置，不采用MD建议的比例，考虑到业务；再比如对于年纪大的人群开发app，字号会设计的比平时更大，这样体验更好。

文章到结尾了，感谢有耐心看到这里，本次文章说的是对网易云课堂V6.9.3安卓端进行MD语言重设计为切入口，对MD设计语言进行了一次探索，如果阅读过程有疑问，欢迎在评论区提出来一起讨论。另外说明，附件里有本次改版设计的源文件、设计规范、文字样式以及图标盒子，作为文章的补充内容，一些设计细节文章表述不清晰的地方，可以查阅对照。附件里还有Material design 2016的组件和2018版文字样式，文字样式是最新的，但是组件里面的有些细节如文字色值、圆角等细节已经在最新的MD官方设计指南里更新了。最后想说， 我对写文章是既不擅长也不喜欢的，但是这次我是花了300%的努力才出锅的，觉得文章不错，给点个赞呗。

参考：

https://www.material.io/ 

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/