赞助商
立即赞助

如果你不熟悉Material Design,请一口吃下这篇干货

UI设计3年前 (2021)更新 流光
2.2K 0 0

您准备了新的 Material Design设计规范,请伴随笔记一口吃掉。

一、安卓是什么?

想象一,过年同聚会上,大把手机都放在饭桌前,除了各种号的 iPhone 之外,你还看到么牌的手机呢?我猜一定会有 OPPO、VIVO、魅族、小米、华为、星对吗?许还有一、锤子、联想等手机牌。这些手机全都是使了 Android层构架的设备,就是我们说的卓手机。它们和苹果手机似乎没么共同点:硬件的外观、桌面系统设计、格都一样,怎么可是一种系统呢?这个要从卓的诞生说起了。有一个极客名叫迪·鲁宾(Andy Rubin),他曾经在苹果工作过,后来他离开苹果开始了漫长的创之路,可他的项目似乎从来都怎么顺利。直到2003年,他创立了卓公司,卓是一个基于 Linux 的开放源代码的操作系统,他当时的计划是免把卓系统供给手机生产商,然后在预了卓系统的手机上供增值务。由于免开源上性众,在2014年搭载卓系统的设备就超过了100亿。当时诺基亚的塞班系统和很多他的手机操作系统称霸着手机操作系统场,而卓像一匹黑马一样杀了个突然袭击。后来大都知道了,诺基亚销声匿迹,连微软的 windowsphone 操作系统现在很听到了。再后来,谷歌收购了卓,有了谷歌母公司的资源,卓的发展就更顺顺水,在2017年全球智手机场有85%的设备都使了卓系统。可说当今世界除了苹果的 iOS操作系统之外,几乎全都是卓的天。就连我们周围的一些智设备、行的手写签名系统、ATM机等都大量采了卓操作系统。需要注意的是卓是一套像 Windows 的操作系统而并非像苹果一样的软硬件打包产。

1. 在我国的飞速发展

由于卓是一套性非好的层框架,但是户体验和设计上都是白纸,于是很多开发商会基于卓系统的层系统开发交互良好、视觉设计更佳的表现层分,这种开发被叫做卓rom开发。在中国,很多公司抓住了卓的免午发展了自己的手机牌,如小米就是通过优卓层框架,上自身研发的、户体验非好的交互和视觉,成了 MIUI—— 一款基于卓的手机操作系统包。没错,最早小米并是靠硬件取,而是靠 MIUI 创的。当时手机场上的操作系统都太注重户体验,MIUI 无疑大打开了世界的大门,于是很多人开始把自己的星或者他手机刷成 MIUI系统,由于刷机会手机发烫,他们自嘲是「发烧友」,就产生了发烧友。后来小米自己开始生产手机就更有粉丝基础了。与此同时国MP3大厂魅族开始了自己的手机研发,搭载了优性和体验的flyme,同样基于卓层框架开发。几乎每一个国手机牌都会有一套自身的 rom系统,如小米有MIUI,魅族有flyme,锤子有Smartisan,联想有联想乐OS,华为有华为rom等。基于免的卓层框架要自己开发操作系统节省巨大的经和资源,这些公司可迅速崛起。我们中很多人都是卓手机的户。

如果你不熟悉Material Design,请一口吃下这篇干货

二、安卓的尺寸

由安卓是一个野蛮生长的市场,没有苹果一样严的硬件生产规范,造成安卓屏幕尺寸非常乱。从下图我们就以看到,市场上的安卓屏幕尺寸简直是一场噩梦。大小不一的屏幕中,但使用率最高的是720P和1080P。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 主流安卓设备分辨率占比 数据图表来自盟

要想我们的 APP 同时在这么多种屏幕都显示美,在上图中我们可看到,户量目前最的是720P和1080P。我们建图时一般使1080P的分辨率来进行设计。在五个尺寸中我们使切图进行适配:

如果你不熟悉Material Design,请一口吃下这篇干货

△ 卓流分辨率表

其他的分辨率我们可以使用自应的方法行配。这就目安卓设备的主流配方式。了方便家查询每设备小的 dp px,Material Design 我们准备了一网站查询主流安卓设备的尺寸(网址:https://material.io/tools/devices/)。

1. DP单位

Dp 独立密度素的简称(Density-independent pixels)。安卓设备的基本单,如同苹果设备的 pt 一样,dp 与我们建图时的 px单需通过分析设备的 PPI换算。家还记得 PPI公式吗?

如果你不熟悉Material Design,请一口吃下这篇干货

△ PPI算公式

那如我们有了个设备 ppi值,然后使用公即可知这个设备里1dp等于多少像素了:

dp*ppi/160 = px

比如这个设备 PPI值是320,那么:1dp x 320ppi/160 = 2px。则,这个设备上1dp等于2像素。(也是和iPhone 6类似高屏)。在安卓设计稿做标注时,我们可以在像素大等标注软件选择我们做图分辨率(如:xxhdpi),然后标注单位可以选择 dp单位,这样我们标注单位数值和安卓开发工程师使用单位致了。否则安卓工程师要进换算把我们标注 px单位换算成 dp单位才可以进工作。在下文,我写到大部分设计尺寸单位都是dp,也是说我们要针不屏幕进换算,比如在 hdpi下,1dp经过换算等于1.5px;而在 xhdpi下,1dp=2px。

2. SP单位

SP 是独立缩放像素简称(Scale-independent Pixel)。Android平台允许用户自定义文大小(小、正常、大、大等等),文尺寸是「正常」状态时,1sp=1dp=0.00625英寸,而文尺寸是「大」或「大」时,1sp大于1dp。好比我们在电脑调桌体后,有体大小发生改变,而窗口和图标不会改变样。默认情况下1SP=1DP。所以我们在设计安卓界时,标记体单位选用SP单位。很多标注软件诸如蓝湖和像素大都支持SP单位标记体。

3. 三大金刚键

安卓本来底部应该有三个刚键:「返回」、「HOME」、「任务列表」。这三个刚键是安卓交互部分,安卓平台上应用程序交互基于三大刚键。这三个键般都在底部,便手指击,也是说这三个按键应该是最常用操作。是由于很多用户比较青睐 iPhone 单独 home键设计,所以很多厂商会在硬件上隐藏掉三大刚键或仅仅像 iPhone 样保留 home键。其实安卓可以开启三大刚键虚拟键,也是在底部会常驻半透明三个按键(也此安卓本来不鼓励第三APP设计底部TAB栏,为这样会出现两个底部常驻区域,显很臃肿)可是很多厂商想让品接近 iPhone 样子,不仅手上有 home键,而也不展开虚拟三大刚键。所以本来安卓APP 是不需要自己设计返回键,是由于厂商硬件问题,保险起见在安卓平台上 APP 也都会像在苹平台样在左上加上返回图标。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 三大刚键

4. 切图方法

安卓没有@3x和@2x文件后缀来区分套切图,而是采用文件夹区分。比如我们切出五套不分辨率切图,那么不分辨率应该按照:drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi文件夹来存放各套切图。

5. .9切图

.9是 andriod平台开发里特殊图片形,文件扩展名为:.9.png。比如有个泡bubble,那么它.9切图命名格是:bubble.9.png。这图片能告诉程序这个图片哪部分可以被伸,哪部分不要伸。我们要做是使用 Photoshop 铅笔工具,把铅笔设成1px大小,透明度100%,颜色选择#000000纯黑色,然后在我们切图边缘画出1像素竖线,然后把这张图命名后缀加上.9,和系统打好了暗号了。后续,开发员在开发环境可以设哪些部分可以伸哪些需要保留了。噢了,我们画黑色「暗号」是不会显示用户。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 不固定位切图需要.9来规定伸范围

如果你不熟悉Material Design,请一口吃下这篇干货

△ 画四条线规定内容(比如文)和可伸区域(圆便伸)位

6. 设计方法

由于安卓设备ROM设计不相、屏幕尺寸不相、而三大刚键也不定存在,所以在这情况下做设计让设计师很头大。般来说,目前主流采取设计法有三:

第一,直延续 iOS上的计。直用给iPhone准备的计稿更改切图的大即可最快速地得安卓切图了,这种方法简粗暴,但是目前是最快的。如果在使用 Photoshop 计界面,可以使用 Cutterman 直切出五套安卓切图。计稿尺寸都无需修改。不过如果使用 sketch 或 XD工则需要按照安卓尺寸进行计稿的调整才能输出正确的切图。这种适配方式常用,比如、支付在安卓上的版本都是和苹果端一致的。

二,为安卓提供属的设计稿。种方式花一定的时间,其也是根据 iPhone设计稿以安卓的特点:比尺寸(1920x1080px)、直角、字(中文为思源字)、信息条的样式等进行微,切出相应的切图来即。比网易云音乐等 APP 在 iOS 和安卓平台上有一细微的差距。

第,按照卓最的 Material Design规范来进行单独的卓版界面设计。这个是最时间的,但是是最规范的。Google 为全线产供了一个类似苹果HIG 的设计规范,并且有独特的设计语言。如果公司允许,使 Material Design来设计卓版是最好的。如知乎、印象笔记等产采了 Material Design 的设计方式。面的分我将为您详细介绍 Material Design设计规范和如何使这种设计格构建我们的产界面。

如果你不熟悉Material Design,请一口吃下这篇干货

三、什么是Material Design?

Material Design 不仅仅是安卓阵营产品的设计规范和风,甚至它鼓励设计师和开者把种风用在苹果设备和 windows设备上。为设计规范,它很包容,却有时又非常严。使用 Material Design 的产品给人很强的统一感和秩序感。果从历史来看的,Google 的产品从来没有一个正式严的视规范。甚至每个产品有自己的设计风和自己的品牌。但2011年,拉里佩奇掌握 Google 的控权,他改变种去「程序主导一切」的情况,他召集谷歌最的设计师一重新设计所有产品的语言,终在2014年的 Google I/O 上推出 Material Design,宣告 Google 重视设计的时代来。Google旗下的电脑、穿戴设备、电视等设备以使用 Material Design 为视规范,甚至 Google 鼓励开者在 iOS平台也使用 Material Design。Google 的 Material Design 并不是简单的扁平设计,而是一种注重卡式设计、纸的模拟、使用强烈对比彩的设计风。种风形成独一无二的 Material Design。Material Design 的目标是创建一种优的设计原则和科学技术融合的能(Create)、并给不同平台带来一致的验(Unify)、并且以在规范的基础上突出设计者自己的品牌(Customize)。以下的内容根据 Material Design 最新规范(2018)来进行分析和阐述,果大家感兴趣也以移步到 Material Design官方网站来阅读更内容(网址:https://material.io)。

1. Material Design的隐喻

Material Design 并不是完的抽象扁平风,它从物理现中学习诸质感、投影、加速度、纸的模拟等隐喻方法,让 Material Design 更容易被用户理。其我们道Google一直在尝试不同的设计风,比很早之前的长投影设计风、来的扁平化设计验等。扁平化设计的优势就是信息噪音少,而缺点就是情感传递不,而 Material Design似 乎是一个很的决方案,在最大度证读的基础上有一我们熟悉的物理现的影子。所以一定程度上它既是拟物的也是扁平的。

如果你不熟悉Material Design,请一口吃下这篇干货

四、设计理念

Material Design 的计中有多计理念是需要深度学习的,要学习这套理论的思维模式,其实就算不准备使用 Material Design,对的计思维提高也是一个有益的思考过程。

1. Z轴的概念

都知道什是三维:三维就是X轴(左右)、Y轴(上下)、Z轴(前后)组成的立体界,而二维就是只有X和Y轴的面界。据科学家说宇宙有十一个维度,人类能体验的是四维,除了三维还有一个间的维度。好,扯远了,回 Material Design中,知道机界面是一个面二维的空间,而 Material Design 通过二维的一些表达段,比如投、动效等构建出了Z轴(前后)的概念。

如果你不熟悉Material Design,请一口吃下这篇干货

△ Material Design中的Z轴

2. Z轴的投影

不同投暗示了不同素的高度,可以理解为如同上的张纸层叠在一起,那认为重要的纸在其纸张之前,它的投是最高的。所以在 Material Design 中投最高的代表Z轴最高值,也是最重要的内容。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 2dp、6dp、12dp、24dp的投别

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在正面和侧面来观,1dp和8dp海拔高度产生出阴大的不同

3. 界面中的Z轴应用

不同的功能使用不同的Z轴高度可以表的重要性和逻辑层关系。并且这种投是由编程完成的并非切图,这点需要注一下。Material Design 为第三方开发者提供了动且真实的投和Z轴高度置。

如果你不熟悉Material Design,请一口吃下这篇干货

△ APP中不同的Z轴高度

如果你不熟悉Material Design,请一口吃下这篇干货

△ 顶部应用栏(A)、卡片式计(B)和悬浮球FAB(C)高度的对比

如果你不熟悉Material Design,请一口吃下这篇干货

△ 界面中海拔高度对照

如果你不熟悉Material Design,请一口吃下这篇干货

五、组件

组件是 Material Design 区于 iOS 等其他设计要标识,我们看到 FAB 时我们知这是 Material Design;我们看到底部栏独特设计时我们也能知这是 Material Design。想做款原汁原味 Material Design 要了解组件特征。让我们开始吧!

1. 悬浮球 FAB(Buttons: floating action button)

悬浮球可能是 Material Design 最明显标志了。个圆圆小球固定在屏幕某个位,它特显眼,让你法忽视它。时它也是前页最要主线操作,比如在邮箱页,FAB 很可能是发邮件按钮。并个页有个 FAB,这让这个小球更加显眼了。

如果你不熟悉Material Design,请一口吃下这篇干货

△ FAB在APP右下位并常驻屏幕

如果你不熟悉Material Design,请一口吃下这篇干货

△ FAB是个页最显眼设计,并不是个页都需要FAB

如果你不熟悉Material Design,请一口吃下这篇干货

FAB的尺寸

FAB 默认尺寸 (56 x 56dp)  Mini尺寸 (40 x 40dp)都可以选择,不同的页面不同的况下我们可以使用不同小的FAB。

可交互的FAB

FAB 可以一跳转走的功能,也可以一展子单。这趣的交互从Path应用中学到的:点击某图标的样式,点击后 FAB本身变了关闭按钮,且会弹出2以的子单图标矩阵。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 可交互的FAB

扩展形FAB

错,这种悬浮按钮我们好已很熟悉了,可您可能不知道它也 FAB!这种文字异形并且不随屏幕滚动的按钮属于扩展形的 FAB。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 扩展形FAB

如果你不熟悉Material Design,请一口吃下这篇干货

△ Reply的自义FAB设

2. 底部应用栏(App bars: bottom)

底部应用栏用于显示屏幕底部的导航按键操作。底部应用栏比较类似 iOS设中的 Tab栏,但不同于Tab栏的底部应用栏通常不会分几份,置一些 FAB、导航的功能性图标,并且讲究排版的节奏感。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 底部应用栏

如果你不熟悉Material Design,请一口吃下这篇干货

△ 底部应用栏的图标必须2以(不算FAB)

底部应用栏的组

底部应用栏由以下部分组:①器;②导航抽屉控制;③浮动操作按钮(FAB);④动作图标;⑤多单控件。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 底部应用栏的组

如果你不熟悉Material Design,请一口吃下这篇干货

△ 以FAB中的底部应用栏版式

如果你不熟悉Material Design,请一口吃下这篇干货

△ FAB侧对齐的底部应用栏版式

如果你不熟悉Material Design,请一口吃下这篇干货

△ FAB的底部应用栏版式

如果你不熟悉Material Design,请一口吃下这篇干货

△ FAB底部应用栏重叠的版式

如果你不熟悉Material Design,请一口吃下这篇干货

△ FAB插入设的底部应用栏版式

如果你不熟悉Material Design,请一口吃下这篇干货

△ 错误的版式:FAB脱离底部应用栏并且占了多余的空间

底部应用栏的层级

底部应用栏的层级分:①器(0dp);②底部信息栏(6dp);③底部应用栏(8dp);④浮动按钮(12dp)‘⑤页卡(16dp)。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 底部应用栏的层级

3. 顶部应用栏(App bars: top)

顶部应用栏我们 iOS 中所使用的导航栏很类似,但不完全一样。顶部应用栏中标题并非居中报纸一样左对齐的,这因 Material Design 认阅读应该如报纸一样按照从左到右的顺序排列。并且图标左侧多可置一系统图标,右侧可置多系统图标。

如果你不熟悉Material Design,请一口吃下这篇干货

△ Material Design中的顶部应用栏

如果你不熟悉Material Design,请一口吃下这篇干货

△ 顶部栏可变选择状态时的具栏

顶部应用栏的组

顶部应用栏所包含的组部分:①顶部栏器;②抽屉式导航图标(可选);③ 标题(可选);④系统图标(可选) ;⑤多按钮(可选)。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 顶部应用栏的组

突出标题

顶部应用栏可改变高度以凸显标题(类似苹果的标题设)。同时这么也可以让标题纳多的文字,比如新闻APP 就需这特性。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 突出标题的设

顶部应用栏可以嵌入图片

了减少视觉层级,顶部应用栏中也可以嵌入图片增强界面的整体感。图一使用了嵌入图片顶部栏的照片应用。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 顶部应用栏嵌入图片的样式

4. 背板设计(Backdrop)

应用引发的某操作中,可设背板承载某些选项辅信息。背板的设 iOS 中比较类似 Action Sheet 但又加性化。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 背板设示例

背板设的辅控件

①背板设隐藏时,后层控件可以提供关层的辅信息。②背板设激活时,后层会显示与层相关的控件。这样可变的设可以让用户加方便找到需的功能。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 背板设的辅控件

如果你不熟悉Material Design,请一口吃下这篇干货

△ Crane APP所使用的背板设

如果你不熟悉Material Design,请一口吃下这篇干货

△ SHRINE所使用的背板设使用了增强品牌感的直角

5. 横幅(Banner)

横幅可不光广告哦,横幅顶部栏下面的第一凸显区域,显示突出的消息相关的可选操作。它可以一对话,也可以一提示或者包含图形的设。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 横幅形式的对话框

如果你不熟悉Material Design,请一口吃下这篇干货

△ 如果搭配底部导航设,那么横幅可以直接置顶显示

6. 底部导航(Bottom navigation)

底部导航的设 iOS 类似,它也将底部宽度分多图标的点击区域,并且配以辅文字信息方便用户理解图标背后的功能。底部导航底部应用栏的一力补充。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 底部导航的设如同iOS中的Tab栏

如果你不熟悉Material Design,请一口吃下这篇干货

△ OWL APP中的性化底部导航栏

7. 按钮(Buttons)

按钮常见的元素,这里 Material Design 我们提供了多种多样的按钮设风格。由于不同的功能环境,按钮可以使用:①纯文字按钮(这种按钮只加粗色彩的文字,可以理解可点击的链接);②线性按钮(这种按钮一线框明点击区域,比较不显眼);③填充按钮(这种按钮较明显);④切换按钮(这种按钮使用率低于其他按钮形式)。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 按钮的四种样式

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图结合非常好的文字按钮

如果你不熟悉Material Design,请一口吃下这篇干货

△ 权重不会抢戏的线性按钮

如果你不熟悉Material Design,请一口吃下这篇干货

△ 使人点击欲望的按钮

如果你不熟悉Material Design,请一口吃下这篇干货

△ 突出功能的切换按钮

如果你不熟悉Material Design,请一口吃下这篇干货

△ 按钮文字应该清晰简洁,不应该让人困惑

8. 卡片式设计(Cards)

卡片式设同样 Material Design 的显著标志。其实卡片式设我们可以理解一小的单元,这单元里的信息逻辑关系加紧密。如果一单元的信息过多很易让用户阅读时发行象,卡片式设就能效规避这问题。

卡片式设计的组成

卡片式设包含以下组部分:①器卡器。它纳所卡元素,器的尺寸由元素占据的空间决。②缩略图(可选)。缩略图可以置、图标logo。③标题文字(可选)。标题文字通常卡片中重的标题,一般文字较。④小标题(可选)。小标题可以置文章署或标记置信息。⑤多媒体(可选)。卡片可以包括各种媒体,包括照片视频。⑥辅文字(可选)。通常对于多媒体的描述信息。⑦按钮(可选)。8.图标(可选)。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 卡片设的组

卡片设的分割线

如果卡片中的内元素不属于一逻辑,那么可以使用一条分割线分隔两区域。但注意,分割线需使用非常轻的颜色,并且左右不通过去,以保证卡片的完整性。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 卡片设的分割线

如果你不熟悉Material Design,请一口吃下这篇干货

△ Owl的页卡设

9. 纸片(chips)

纸片通常输入框中多元素的组合,纸片选中态交互态丰富的交互。比如邮件添加邮件人的操作就一输入框内添加一纸片的操作,这样的纸片可以承载文字重信息。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 纸片的应用

如果你不熟悉Material Design,请一口吃下这篇干货

△ 纸片的交互态

如果你不熟悉Material Design,请一口吃下这篇干货

△ Reply的纸片设

10. 对话框(Dialogs)

对话框移动端交互中很重的一环。Material Design 提供了丰富的对话框形式供我们使用。我们知道对话框可以分模态对话框非模态对话框,主区别模态对话框需人交互,非模态多显示提示信息。我们目介绍的对话框属于模态对话框,稍后介绍的 snackbar 则属于非模态对话框。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 左图警告对话框,右侧简单对话框

如果你不熟悉Material Design,请一口吃下这篇干货

△ 左侧确认对话框,右侧全屏对话框

如果你不熟悉Material Design,请一口吃下这篇干货

△ 用户选择,禁掉确认功能防止用户点击

11. 分割线(Dividers)

分割线我们设界面中非常常见。信息的分割按照轻重依次:面的分割、线的分割、留白的分割。用以区分一面中不同功能或者不同逻辑的分割线非常常用。那分割线哪些呢?

全出血分割线插入式分割线

左图全出血分割线,右图插入式分割线。全出血分割线给人的感受信息完全独立,插入式分割线方便我们阅读并准确找到当阅读的置。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 全出血分割线插入式分割线

居中分割线标题分割线

如果信息阅读曲线沿中行,那我们可以给用户提供居中分割线保证阅读顺序。如果信息需标题行区分,同样可以使用小标题的标题分割线。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 居中分割线标题分割线

如果你不熟悉Material Design,请一口吃下这篇干货

△ Owl界面中的分割线

12. 抽屉式导航(Navigation drawer)

抽屉式导航我早苹果平台的应用Path 看到的,那时概2011。Path 不仅设出了抽屉式导航,甚至还 FAB。很多产品理都很青睐这款产品,但遗憾的2018 Path 关闭了服务。虽然 Path 的火爆使得很多 iOS应用使用了抽屉式导航的交互,但苹果并不建议发者使用这种交互形式。因抽屉式导航 Tab栏比较言 Tab栏的用户触发率高,抽屉式导航需点击两次能触发某功能,层级较深。但 Material Design 很青睐这种交互形式,并鼓励设师底部应用栏增加一导航图标,点击激活抽屉式导航。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 抽屉式导航

抽屉式导航的组

①器(可选);②部(可选),通常用户人信息;③分割线(可选);④选中态;⑤选中态的文本;⑥激活的文本;⑦小标题;⑧ 底层界面(不可操作)。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 抽屉式导航的组

13. 页卡(Tabs)

页卡常见于顶部应用栏,作应用栏的一部分存。一般由2-3页卡组。当我们点击其中一页卡时,应用栏下方跳转对应内。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 页卡

如果你不熟悉Material Design,请一口吃下这篇干货

△ 当页卡过多时可以使用滚动形页卡

14. 文字输入框(Text fields)

用户需输入文本信息时会使用到文字输入框。文字输入框的样式 Material Design 也了漂亮的样式供我们参考。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 文本输入框

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图1填充形输入框 图2线框输入框

如果你不熟悉Material Design,请一口吃下这篇干货

△ Rally的填充形输入框

15. 图片组(Image lists)

如果我们构建一如朋友圈或者相册的界面,那么我们应该如何排列一组图片呢?怎么样排列能够让用户感觉秩序感并且友好呢?

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图片组

如果你不熟悉Material Design,请一口吃下这篇干货

图片组的种形式

  • 正常图片组:正常图片组的每张图片大一,间距统一并且通常会窄一些,给人秩序和统一。这种图片组的形式要求图片源显示出来是统一大的。
  • 排版图组:有一点像微软Metro的排版,图按照栅分割,最大尺寸的图等四个小图拼的高宽,宽尺寸的图宽度等两个小的宽度相加。
  • 照片墙图片组:照片墙图片组结构较松散,适合图像尺寸均等的容展示,效果如同中的照片墙。
  • 瀑布流图片组:这家应该比较熟悉了,点内的花瓣瀑布流,图片宽度全部相,由于高度不会展出如同瀑布一样的形式。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 排版图组示例

如果你不熟悉Material Design,请一口吃下这篇干货

△ 瀑流图组示例

16. 滑块(Sliders)

果我们在设计某个音乐类的 APP 或者视频APP 的时,音量或者其他设置需要一个滑块方便用户进行节。么节的功能就以使用滑块来隐喻。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 音量滑块

17. 选择器(Selection controls)

选择器在网页和移动端程序中很常见。在苹果设备中我们很少看到单选框、复选框等选择器,转而使用按钮和 Action Sheet 来代替不太点击的选择器。但是 Material Design 仍认为选择器在移动端也是行的,并给出相应的规范。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 选择器

18. 底部提示栏(Snackbars)

我们在一不希望被打扰的界面中(比游戏、视频、阅读类应用等)经常出现一提示信息,信息果用警告对框弹在游戏前并必须我们点击确认,我们怎么样?骂人对不对。所以我们需要一个对用户不么打搅、并且信息无需确认操的信息提示工具栏,么就是底部提示栏。

如果你不熟悉Material Design,请一口吃下这篇干货

△ Snackbars

19. 状态指引(Progress indicators)

某个进程加载内容时,需要让用户感到个状态。Material Design 给我们提供一个类似跑马灯的动画。样不仅以传递状态,并且不占用余的空间。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 状态指引

如果你不熟悉Material Design,请一口吃下这篇干货

六、排版

Material Design 支持了不同屏幕的辨率,主流的可以使用不同的切图来,而多不是主流的机型就不能靠切图来一一适配了,只能使用诸如响应式布局等形式。在前面的文章介绍过栅格系统(Grid Design),在安卓适配中因为响应式布局需要缩放内容的缘故,所以需要在排版中考虑栅格系统。

1. 响应式布局

Material Design 也识了安卓屏幕辨率多的这种情况,它的解决思路是使用如网页中响应式布局的做法,根据屏幕进行等比例的缩或放大。为了保证缩放的显示效果,Material Design 要求在计之初就使用栅格系统(Grid Design),这可以更有效地进行响应式布局。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 栅格系统三要素:①列(Columns)②水槽(Gutters)③边距(Margins)

列(Columns)

列建立的候要考虑整体的宽度,然后进行整除。然后做界面的候可以和列对齐,就达了所有宽度都是倍数或有系的效果了。在面计中,栅格系统是为了让界面更有秩序,而在UI计中,除了视觉的要求还有来适应需要整除素的要求。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在360dp宽度的机备中,使用4个列

如果你不熟悉Material Design,请一口吃下这篇干货

△ 而在600dp宽度的板脑中,通过响应式使用8个列

水槽(Gutters)

水槽是用来别内容的,被作为列之间的留使用的。在响应式布局中,列的宽度是不变的,然而水槽的宽度是可变的。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在宽度为360dp的机界面中使用16dp的水槽

如果你不熟悉Material Design,请一口吃下这篇干货

△ 而在600dp宽度的板备中使用26dp的水槽

边距

边距是栅格和屏幕之间的距离,在不同的屏幕上可以根据指点击方便程度给予不同的边距当做安全距离,同也可以解决列和水槽无法被整除的一些情况。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在360dp的机备上使用了16dp的边距

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在600dp的板脑备上使用了24dp的边距

2. 可自定义栅格系统

计的界面由于内在的逻辑关系需要,不能直套用多固定的栅格系统版式。那可以根据需求进行定义栅格系统。比如息间的水槽就要考虑息之间的逻辑关系。所以不要死板地使用栅格系统,根据的需要去定义才是好的计。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 为了让用户知图像是紧密相关的,这个案例中网格使用了8dp水槽

如果你不熟悉Material Design,请一口吃下这篇干货

△ 为了让用户认为专辑是各个独立的,这使用了较大的32dp水槽来创建列之间的隔

如果你不熟悉Material Design,请一口吃下这篇干货

△ 错误案例:这使用了大的水槽,使界面显得裂

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在不同备中的栅格系统建议

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在苹果产品中的栅格系统建议

如果你不熟悉Material Design,请一口吃下这篇干货

七、色彩

Material Design 配色灵感来于现代主义设计和路标等标识,所以它色选择都常鲜亮,颜色在明度和纯度上都较为适,在我们设计 APP 时这些颜色能够突出信息并使愉悦。Material Design 常视背景和文色比,需要最大化地保证文可读性。在配色时候注意三个原则:

  • 分级:我们可以使用不同的颜色告诉用户哪些可交互的,哪些装饰;并且色彩与信息的逻辑关系应该相关的,重的元素应该使用突出的颜色。
  • 晰:文本和背景定要有色反,也是常说「黑纸白」和「白纸黑」。
  • 品牌:一个产品的品牌调性体现在移动端应用程序上就是主色调了,比如网易系的红色、QQ音的绿色等,能让人刻都在什产品上。

如果你不熟悉Material Design,请一口吃下这篇干货

△ Material Design配色

如果你不熟悉Material Design,请一口吃下这篇干货

△ 主色辅色使用同色系的样式

1. 色表参考

Material Design 提供给我们一堆建议的色可供参考,如果配色时您选择恐惧症,可以试使用官方提供的配色色表作参考。如果自选颜色的话,一注意颜色不可以选比较「脏」的颜色。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 色表参考

2. 界面中的色彩

界面中我们需考虑状态栏、顶部导航栏、底部应用栏 FAB 色彩的关系。状态栏顶部导航栏一般采用邻近色设,类似 iOS导航栏状态栏的一体化设。底部应用栏 FAB 颜色一般使用对比色,用以强调 FAB 的重性。

顶部导航栏色彩

顶部的状态栏使用了深色,然后导航栏使用了稍浅一点的色,保持顶部色彩统一令用户感知这部分同属一逻辑关系。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 顶部应用栏的色彩

底部应用栏

这案例中底部栏使用了辅色藏蓝, FAB 使用了很明显的橙色。这样可以强调 FAB功能的重性,并且底部应用栏藏蓝向后退让出用户关注焦点。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 底部应用栏色彩

界面整体配色

这应用程序的主色调粉色(100)。因粉色与黑色搭配会显得脏,所以深色使用了黑色的变体(粉色900)。另外,二级颜色(粉色50)用于按钮交互态。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 界面整体配色

强烈的对比色

这案例中,选择中的状态使用了背景对比强烈的粉色,并且让面的角行弯曲提醒用户这选项被选择中了。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 强烈的对比色

如果你不熟悉Material Design,请一口吃下这篇干货

八、文字

于 Material Design 在卓设备上使的字体,我想大都应该了解了:中使思源字体,英使 Roboto字体。他 Google 免字体全都可在卓Material Design 中使(载址:Fonts.google.com)。

1. 字体单位

在卓设备上有一个特别需要大注意的单位,叫做 sp。dp 是我们测量卓间距、图片尺寸、按钮控件和宽的单位,而字体却有一个单独的单位sp。那这个 SP单位和 iOS 的字体、页中的字体转换率是怎样的呢?请看图。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 字体单位对

2. 字体大小

在卓设备上字体大小同 iOS设备一样,我们可自由地使合适的字号。同时 Material Design 给了我们一个参考表。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 字体大小参考

如果你不熟悉Material Design,请一口吃下这篇干货

△ 标题中使H6字号的效果

如果你不熟悉Material Design,请一口吃下这篇干货

△ 解释字使了Subtitle 1 字号效果

如果你不熟悉Material Design,请一口吃下这篇干货

△ 正仅仅可使无衬线字体,可根据需求使衬线字体

九、语言支持

Material Design 对世界众多语言和字体进行了思考,这一点非值得我们习。除了我们使的中字体「思源」之外,还有对阿拉伯语、韩语、日语等非西体系的支持。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 同中诞生的字

如果你不熟悉Material Design,请一口吃下这篇干货

△ 「同样语义同语言的长同」问题

如果你不熟悉Material Design,请一口吃下这篇干货

△ 希伯来语言是从右到左显示

如果你不熟悉Material Design,请一口吃下这篇干货

△ 同字的同,在设计界面时需要给同字留空间

如果你不熟悉Material Design,请一口吃下这篇干货

△ 水平和垂直字显示的设计

如果你不熟悉Material Design,请一口吃下这篇干货

十、产品图标

产品图标是我们在设计界面的时现品牌和功能的图标。图标以简单、大胆、的方式传达产品的核心理念和意图。虽每个图标在视上是不同的,但品牌的所有产品图标应该通设计方式来进行表现面的统一。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 能够现品牌感的产品图标

1. 图标的网格和参考线

果我们想设计一个48dp的图标,么我们以把画放大到400%(192 x 192 dp)来设计,时以显示4dp的边缘。通持个比例,任何变化将按比例放大或缩小,样以在画面恢复到100%(48dp)时持锋的边缘和正确的对齐。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 网和参考

如果你不熟悉Material Design,请一口吃下这篇干货

△ 不同形状的网局

网

网尽量使用4的倍数构建,比4dp。网对我们设计图标有很的参考用,有我们现横纵上没有对齐的细节。而参考是由黄金比例和不同形状但面积相等的几何形模板组合而来,同样就有很的参考用。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 放大四倍进行图标设计

如果你不熟悉Material Design,请一口吃下这篇干货

△ 在网的辅助下以设计出大小均衡的图标

2. 图标的处理

图标的设计在 Material Design 中是比自由的,但是由自由也能出现一表现手法上的问题。里有一建议以帮助我们更地图标设计中能遇到的问题。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 颜身是没有Z轴的,所以不要因为颜的关系增加余的阴影

如果你不熟悉Material Design,请一口吃下这篇干货

△ 重叠的表面数要注意,因为太的图能使图标复

如果你不熟悉Material Design,请一口吃下这篇干货

△ 不要在图标上使用的级和分割

如果你不熟悉Material Design,请一口吃下这篇干货

△ 手风琴是指图标扁平阴影的处理。里不要使用的手风琴次,显得臃肿

如果你不熟悉Material Design,请一口吃下这篇干货

△ 不要用奇怪的透视扭曲产品图标

如果你不熟悉Material Design,请一口吃下这篇干货

十一、系统图标

系统图标是在构建界面负责表功能和息的图标。通常系统图标尺寸不如产品图标那大,但是需要让用户第一间理解它所表达的内容并不简。系统图标计简,现代,友好,每个图标都尽可能简化以表达最基本的征。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 系统图标

1. 字体图标

如果需要,也可以把图标变成字体格式来节空间。同这做对于放大缩都是非常方便的。同 Material Design 提供了一些可供下载的现成免费图标供参考(下载地址:https://material.io/tools/icons)。

如果你不熟悉Material Design,请一口吃下这篇干货

△ Material Design系统图标

2. 图标的分类

谢谢地,终于有计规范愿把图标做一个正式的类了。Material Design把图标为填充图标(Filled)、线性图标(Outlined)、圆角图标(Rounded)、双调图标(Two-Tone)、尖角图标(Sharp)。那系统图标可以使用任何适产品的风格。

3. 造型接近几何形

尽量使用何形的造型,不要使用过散的造型。散的造型会引起用户不必要的关注。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 造型近何形

4. 图标留出边距

图标应该留出一定的边距,保证不同面积的图标视觉显示一大。如果多个图标有类似的逻辑层,且同在界面出现,注它的大应尽量相等。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图标需要间距

如果你不熟悉Material Design,请一口吃下这篇干货

△ 使用网格构建图标

如果你不熟悉Material Design,请一口吃下这篇干货

△ 计图标记得对齐像素网格

5. 图标的组成

图标由以下部组成:①描边末端;②圆角;③反域;④描边;⑤反边缘;⑥留。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图标的组成

6. 边角

边角半径默认为2dp,内角应该是方形而不要使用圆形。圆角建议使用2dp的位。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 边角

7. 描边粗细统一

图中的图标使用了2dp的描边以保持图标的一致性。如果没有殊因,不要使用一种以上的描边粗细,保证图标视觉上的统一。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 描边粗细统一

8. 图标末端的处理

描边末端应该是直线并有角度的,留域的描边粗细也应该是2dp。描边如果是斜度45度,那末端应该也是斜度45度为结束。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图标末端的理

9. 图标点击区域

图标应该提供充的留和操作域便于用户指的点击,比较类似 iOS 的理方式,图标大近指点击域7mm-9mm,如果不够的话就增加透的点击热。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图标点击域

10. 图标点击状态

未点击图标颜色为#000000,透度为87%。点击图标颜色为#000000,透度为38%。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图标的点击状

11. 图标的品牌感

下面这个案例中图标和界面内容的直角相互呼应,体现了身的品牌。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图标的品牌

如果你不熟悉Material Design,请一口吃下这篇干货

△ ①品牌图标 ②锋利角度的图标 ③应用中的直角图标

如果你不熟悉Material Design,请一口吃下这篇干货

十二、形状

Material Design 过去版本形状规定较为死板,最新 Material Design 在形状上可谓是常自由了。菱形、半圆形、圆都可以使用,这些充满个性形状可以帮助我们构更酷界。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 可自定义形状

如果你不熟悉Material Design,请一口吃下这篇干货

△ 独特形状可以引起用户关注

如果你不熟悉Material Design,请一口吃下这篇干货

△ 形状也可以表示内容被选

1. 品牌感

我们可以在个应用程序使用体现品感视觉语言,以致将形状、颜色、弧度等特征设计界不元素。这样有助于提升品体印象。用户看到某颜色或者形状时,会想到我们品。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 界使用了统形状增强品感

十三、交互

1. 空状态Empty states

空状态应该品牌一致,可以使用幽默可的感化设用户产亲感,但不应该体可操作性。不使用口可点击的暗示。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 空状态

2. 警告对话框Alert dialog

警告对话框可以让用户预知下一会发什么,并提供选择取消这行。比如删除操作通常都会提示用户否确删除。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 警告对话框

3. 闪屏launch screens

闪屏可以使用苹果平台 APP 那样的图形,比如微信的闪屏页或眼的动态闪屏。除了闪屏页的图形动态设之外,我们也可以使用内的占符作启动页,这样用户会预知我们即将载入概什么样的内。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 闪屏

4. 图像 images

我们设的 APP 中一图可能会被裁切多尺寸,比如1:1、3:4、16:9,甚至圆形或方形。这时需保持图的核区域任何尺寸中都显示到。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 图的设

5. 新手引导Onboarding

Material Design 建议产品设新手引导界面,以此帮用户了解该程序如何操作什么样的独特功能。通常新手引导会由插图、功能描述、注释文本、启动图标、焦点组。这里 iOS 的设比较一致,但家注意功能描述文本注释文本的小比例。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 新手引导的设

6. 离线功能Offline states

些功能会因无网络无法完全使用。这时同样需我们设一些状态表示无网络的,让用户感知这状态。当然,无网络不表什么也不了,我们同样可以无网络的状态下提供给用户一些操作的选择,比如离线功能或者重新连接网络的按钮。

如果你不熟悉Material Design,请一口吃下这篇干货

△ 离线功能

十四、Material Theme Editor

如果您使用 Sketch,那么接下一福利了。Material Design 发布了针对 sketch 的主题编辑器,这主题编辑器可谓产力的杀器了,比如改某样式即可应用到全局、图标的不同风格随意行切换、字体样式随意调整。

(下载地址:https://material.io/tools/theme-editor/)

如果你不熟悉Material Design,请一口吃下这篇干货

△ 主题编辑

总结

我们可以使用 iOS平台 APP设计稿(大部分采用750x1334px)改成安卓尺寸(大部分采用1920x1080px),然后将状态栏改为安卓样,体改为思和 Roboto,并使用切图工具(比如Cutterman)切出安卓所需各套切图(般为XHDPI、XXHDPI、XXXHDI三套或更多)即可完成粗略地安卓适配。然我们也可以更适应安卓平台生态环境:将返回图标换为箭头、更多图标改为竖排列三个圆、图片改为等,做这些微调。第三是我们将 iOS平台和 Android平台设计完全区开来:使用 Material Design 来为安卓设计独有设计。Material Design 将 APP 从头到尾各个细节都做了指引,了参考,做了规范。并这个规范在根据生态环境更新。而学习 Material Design设计规范于位设计师都是个学习过程,在翻译本文关于 Material Design 部分时,我也发现很多我前忽视掉设计上细节,真是受益匪浅。安卓设计和 iOS 相比,需要注意问题更多,遇到可能坑我们地也更多。样更大挑战也会锻炼我们设计能力,希望您设计出更好安卓APP来。

参考资料:

  • Material Design规范:https://material.io
  • 设备分辨率一览:https://material.io/tools/devices
  • Material Design色网址:https://material.io/tools/color
  • Vr等其备计规范:https://material.io/collections/additional-google-specs
  • Material Design图标库:https://material.io/tools/icons
  • Material Design 的Sketch插件:https://material.io/tools/theme-editor
  • 安卓发指引:https://material.io/develop/android
  • 扁平色样:https://www.materialui.co
  • MD色盘:https://www.materialpalette.com

欢迎关注作者微信公众号:「西见」

如果你不熟悉Material Design,请一口吃下这篇干货

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

研究背景 本文基于目前两大设计体系:安卓端的谷歌设计规范和iOS人机交互指南对颜色的定义和规范,参考了部分 Ant Design 的...
设计系统
今天这篇文章,讲的又是大家感兴趣的动效知识。现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相...
UI动效
在有一次面试的时候,我问候选人一个问题:你觉得你作为设计师,最擅长的是什么?候选人回答我说他最擅长的是移动端的设计。 ...
方法论
Eugen Eşanu 编者按:小时候我们很多经验都是来自于寓言故事,故事总能帮你更好地理解一些事情和道理。关于设计,这个道理同...
Eugen Eşanu
网易UEDC – 姜永超 :习惯了浅色界面的设计?本文将带你了解深色界面的设计,聊聊深色界面下的设计细节,使你设计的深色界面...
UI 设计
一、使用栅格 界面上的 icon 一般都能近似成一个基本形式,比如各个方向的长方形、圆、三角形、正方形。如果你把他们进行模糊...
ICON
为什么会有语音交互?它适用于什么场景?不适用于哪些?文章为你解读。 一. 什么是语音交互 在没有机器之前,人类最早的交互...
界面设计
网易UEDC – 朱子健、蒋蕊遥 :良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。 一. 规范很重要 规范和秩序...
交互规范