西湖鱼

“这是安卓UI第三篇文章,主讲Material Design设计规范里的一小部分,建议大家花时间去研读官方设计文档,这样可以系统性掌握知识。”“因为我开始写文章没多久,完全是自我总结的思路,并没有追什么热点写,所以算不上什么新鲜知识,但是既然是总结,我都尽量系统和全面。特别感谢每一位关注我的朋友,比心心~虽然每次只有十几阅读量,但我写作的初心并不在此,而是时间太多打发闲余时间而已,不要太羡慕我。”

 

01. 什么是设计规范

设计规范是对设计过程的规则描述,目的是形成统一的视觉体验。规范的制定者一定是权威性的,即对用户体验、视觉、交互都有深入的研究。

设计规范可以按范围划分,即平台设计规范、某一类产品设计规范、某个产品设计规范。平台设计规范,主要针对公司整体产品制定规范,目的是统一品牌特性,需要有经验的设计主管制定。某一类产品设计规范,比如APP,Web,海报,包装,印刷等,它是一个行业规范,需要很高的权威性,参考价值高,是每一个初级设计师的入门知识。指具体的某个产品,它是公司某个产品设计规范,人员根据开发的产品,自己拟定,不具有扩散性,相对主观,只能供公司内部人员交流使用。

今天这片文章属于“某一类产品设计规范”的范畴。

大多数时候,我们做设计之前,对设计规范并不那么重视,导致设计总是不那么精致,并且找不出原因。设计规范对于初级设计师来说,有非常重要的作用,因为规范也是站在美观的角度制定的,按照规范设计,可能会扼杀你的个人风格,但是必须先学会走才能学会跑,我们需要一颗谦逊的心态看待规范,并超越规范。

 

02. Material Design简介

它是谷歌为了在安卓平台上统一视觉体验,在Android 5.0系统使用的一种新的设计风格。从Material Design发布以来,谷歌先后进行过多次修改,作为设计师,需要时刻关注官方设计文档的变更,但同时,是否采用Material design设计风格,取决于项目本身。

Material Design“材料设计“,所谓“材料设计“,即借助纸张隐喻,将界面用卡片作为信息的载体。这里的纸张隐喻,不是模拟纸张的纹理和质感,而是模拟纸张的叠加、抽拉、翻转等空间关系。但同时也利用了设计的创造性,对纸张性质做了新的描述,包含:阴影和层级(空间深度)、纸张拼贴变形、响应式设计、浮动按钮、触摸波纹。

Material design在交互上充分考虑纸张在现实世界的变化过程,每个操作都有反馈,动画效果流畅自然,是一种可以媲美苹果的优秀设计风格。

在苹果iOS7发布时,苹果同样有空间深度的概念,不过相对远的距离不是用阴影表示,而是采用带有景深效果的毛玻璃处理方式。除了导航栏上微弱的浅景深效果,苹果还在导航栏底边用细线来修饰,这实现了阴影的目的:区隔。页面不滚动的时候它只是分割线,但当页面滚动时,这条线就类似于阴影,区分了上下层。苹果没有采用阴影可能觉得太拟物了。

谷歌的设计规范里,包含的内容很全面,这里只简述常用的设计知识,包含了颜色、文字、布局。

Android design_20

官方文档大纲

 

03. MD色彩规范

MD风格的颜色特点是:大胆的色调、柔和的环境、深度的阴影和明亮的高光并存。

MD文档给出了两个重要工具“颜色工具”“调色板”,前一个用来实时预览配色效果,后一个是配色参考模板,简直是色残党的福音呐。

颜色工具

链接地址:https://material.io/color/

颜色工具里有很多官方建议的颜色可选,包含主色和强调色,以及各自的深色和浅色,并且有模板可以实

时预览效果,还是很有实用性的。

但对于色块上文字透明度的规定,我觉得数值太多,不方便记忆,在实际工作中,我们可以在设计稿中肉眼设置即可,实在拿不准的,可以看看参考值。记住,色块上的文字是有透明度的就可以了。

Android design_01

配色参考

 

Android design_18

文字不透明度参考

 

调色板

调色板里有20种参考颜色,每一种颜色又有12个深浅度不同的颜色。嗯,这些颜色都很谷歌,高亮度高饱和度,颜色都很很漂亮。

Android design_02

接下来就是重点了!

 

来自谷歌的官方建议

  • Google 建议使用 500 色号的颜色作为主色调,你可以在颜色模板里选择一个和品牌颜色类似的。
  • 用不同深浅度的主色在元素之间形成对比度,即选择一个主色系,再搭配不同饱和度和明亮度的颜色形成对比。(这些深色浅色谷歌都有给参考)
  • 辅助色可以是和主色互补的,也可以是和主色类似的。但它不应该只是简单的对主色进行加深或变浅。辅助色应该和它周围的元素形成对比(即只要和周围环境形成对比就ok),并作为强调,且应谨慎使用(主题色不是必须存在的)。
  •  辅助色最适合用于:按钮、浮动操作按钮、按钮文本,文本框、光标、文本选择,进度条,选择控件、按钮、滑块,链接,标题。(这个很有参考价值!)
  • 对于浅色背景中的深色文本,使用以下不透明度(填充纯黑色): 重要文本 87%;辅助文本54%;       文本提示(例如文本框和标签)、禁用状态的文本38%;分割线12%;彩色色块上的文本不能加不透明度。

Android design_17

 

  • 对于暗色背景上的白色文本见下图(填充纯白色):文本不透明度的规定也相当重要,可能你和优秀的设计就是一个透明度的差别。

Android design_19

 

7. 图标不透明度:

Android design_21

 

8. 主题

为了保持风格统一,谷歌规定了亮色和暗色两种主题的界面颜色搭配模板,其实就是规定了黑色和白色的不透明度。

亮色主题

状态栏:填充黑色#00000,不透明度24%。

应用栏:谷歌规定的500号色。

背景:亮度98%的纯灰色,#FAFAFFA。

卡片/对话框:纯白色,#FFFFFF。

Android design_08

 

还不明白的小伙伴可以下载谷歌的主题模板,至于深色主题,我觉得平时用不上,就不多讲了。

Android design_10

 

Android design_11

 

 

04. MD文字规范

谷歌官方规定两种字体Roboto 和 Noto,字体优先顺序首先是 Roboto,然后是 Noto,最后才是 sans-serif。

英文用Roboto ,Roboto 有 6 种粗细,Thin、Light、Regular、Medium、Bold、和 Black。

中文用Noto ,有 7 种粗细,Thin、Light、DemiLight、Regular、Medium、Bold、和 Black。

下面分别描述中英文字体的使用:

 

英文

基本样式集是基于 12、14、16、20、和 34 的排版比例。

应用栏:标题字号Medium 20sp

列表、卡片标题:副标题字号Regular 16sp

文本内容:正文字号Regular 14sp

按钮:Medium 14sp,字母全大写

Android design_15

 

英文行高:行高是指文字高度+间距高度

Android design_25

 

中文

从标题到说明文字的样式,字体大小都比对应的英文样式大1px。对于大于标题的样式,则使用和英文相同的字体大小。

应用栏:标题字号Medium 21sp

列表、卡片标题:副标题字号Regular 17sp

文本内容:正文字号Regular 15sp

Android design_16

 

中文行高:

Android design_25

 

颜色& 对比度

文本颜色和背景颜色太相似,会导致很难阅读。对比度太大的文本也会难以阅读,尤其是深色背景上的浅色文本,文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰,最佳对比度为 7:1。

Android design_14 Android design_26

 

字间距

如果你想要一个良好的阅读体验,应该保持每行文本拥有正确的字符数,是文本可读性的关键。

Android design_27

 

05. MD布局规范

布局元素包含:状态栏、应用栏、底部工具栏、卡片、下拉菜单、搜索框、分隔线、侧边栏导航、对话框、浮动操作按钮等组件。

所有组件都与 8dp 的基准网格对齐;工具栏中的图标则与 4dp 的基准网格对齐;文字与 4dp 的基准网格对齐。

(上面的基准网格怎么用呢?比如文字的网格线最小单位是4dp,如果你设计的是XXHDPI尺寸也就是3X图,那么在ps的网格线应该是12px哦。)

 

列表

Android design_04

 

详情视图

Android design_03

 

抽屉式导航

Android design_05

 

比例

推荐的宽高比为:16:9   3:2   4:3   1:1   3:4   2:3

Android design_09

 

触摸目标大小

为了确保信息密度和可用性之间的平衡,触摸目标的尺寸至少为 48 x 48 dp;在大多数情况下,触摸目标之间至少还有 8dp 的间隔。

Android design_06

 

手机端结构

应用栏

以前称为操作栏,是一种特殊类型的工具栏,用于放置品牌、导航、搜索和操作。

Android design_07

 

菜单

菜单是一张始终会遮盖应用栏的临时卡片,而不会表现的像是应用栏的扩展。

Android design_28

 

状态栏

状态栏包含通知图标和系统图标,状态栏高度:24dp。

Android design_23

 

导航栏

包含几个设备导航控件:后退键、Home 键、任务键,高度:48dp;导航栏可以是不透明、半透明或全透明的。

Android design_22

 

侧边栏

可以位于屏幕左侧或右侧;理想状态下,左侧侧边栏应该是与导航相关的、或是与用户身份相关的内容。右侧侧边栏应该是与页面中的主内容相关的次要信息。

宽度 = 屏幕宽度 − 56 dp,最大宽度:320dp

最大宽度仅在使用左侧导航时才适用;当使用右侧导航时,面板可以覆盖整个屏幕的宽度。

Android design_24

浮动按钮

高度:56dp

 

阴影

谷歌定义的材质阴影由两种光源组成:主光源投射出一个定向的阴影,而环境光从各个角度投射出连贯又柔和的阴影。我们在做设计时不能只加一个投影哦!

百度云盘资源有一个“阴影psd文档”,每种组件的阴影数值都有详细描述。

Android design_12

 

完!

 

总结:

谷歌官方文档里面的规范很全面,把规范全部照搬过来是不可能的,需要我们仔细研读,然后灵活使用。这里给两个连接,方便大家研读。

英文版  https://material.io/guidelines/

中文版  https://www.mdui.org/design/

 

资源下载:(国外网站要翻墙)

谷歌字体库:https://fonts.google.com/

谷歌图标库:https://material.io/icons/

设备数据统计:https://material.io/devices/

谷歌统计的一个包含各种设备的尺寸、分辨率等数据的综合性资源。

Resizer工具:https://material.io/resizer/#device=handset&url=https%3A%2F%2Fwww.android.com%2F&width=360

它是一个交互式查看器,显示数字产品如何响应桌面设备、移动设备和平板电脑上的 Material Design 的断点。

百度云盘资源: https://pan.baidu.com/s/1bJ3qW2 密码:ti1f

包含布局、色彩、字体相关资源。

 

原文地址:番茄设计匠(公众号)

作者:番茄

 

转载请注明:学UI网 » 安卓UI (三) — 设计规范

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
你的设计有依据吗?详解用户体验设计中的规律与逻辑你的设计有依据吗?详解用户体验设计中的规律与逻辑
不可不看的2018UI设计趋势不可不看的2018UI设计趋势
用「8点网格」来规范你的设计用「8点网格」来规范你的设计
房产类APP「链家」原型分享房产类APP「链家」原型分享
【滴滴体验设计研究·实践篇】从 iPhone X 适配说起【滴滴体验设计研究·实践篇】从 iPhone X 适配说起
20个优秀手机界面扁平化设计,让你一秒看懂扁平化20个优秀手机界面扁平化设计,让你一秒看懂扁平化
为什么选择XXHDPI做设计呢?为什么选择XXHDPI做设计呢?
实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点
帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !
表格设计深入研究——行高设定表格设计深入研究——行高设定