Material Design

   2016-11-13 0
核心提示:经过一周的学习,整合梳理自己学到的知识,与大家分享以下是自己将Material Design中认为比较重要的知识点整合所得,有遗漏或者补充的欢迎大家指出,共同进步!!Material Design(材质设计)一、Material Design是什么?Material Design,中文名:原质化设计

经过一周的学习,整合梳理自己学到的知识,与大家分享

以下是自己将Material Design中认为比较重要的知识点整合所得,有遗漏或者补充的欢迎大家指出,共同进步!!

Material Design(材质设计)

一、Material Design是什么?

Material Design,中文名:原质化设计,是由Google推出了全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

二、排版布局

1、文字

① 标准样式

过多的字体尺寸和样式可以轻松毁掉任何一个布局。字体排版的缩放是包含了有限个字体尺寸的集合,并且他们能

够与布局结构和谐的共存。就信息重要程度选择字号大小

一般情况下字号选择为12sp、14sp、16sp、20sp和34sp,特殊情况除外

② 文字颜色对比

背景色与文字颜色对比度:最低的对比度:4.5:1(依据明度计算)

最适合阅读的:7:1

白背景下:标准字:87%纯黑

次级字:54%纯黑

提示性文字:26%纯黑

2、遮罩——20%~40%透明度(#000000)

Material Design

3、工具提示——背景填充:90%不透明度

Material Design

4、间距、边距

① 基准网格:所有组件都以一个8dp*8dp 的基准网格对齐。排版(Type)以一个4dp*4dp 的基准网格对齐。在工具条中的图标同

样以一个4dp*4dp 的基准网格对齐。这些规则适用于移动设备、平板设备以及桌面应用程序。

② 常用比例:16 : 9

4 : 3

3 : 2

1 : 1

③ 触摸目标尺寸:最小的触摸目标尺寸是48dp。在布局中,当为图标(24dp)或者头像(40dp)设置边距时,这一点要时刻记得。

Material Design

Material Design

Material Design

Material Design

Material Design

Material Design

Material Design

6、颜色—— 调色板以一些基础色为基准,通过填充光谱来为 Android、Web 和 iOS 环境提供一套完整可用的颜色。 基础色的饱和度是500

Material Design

Material Design

Material Design

Material Design

Material Design

Material Design

Material Design

推荐网站: https://www.materialpalette.com/

7、动画

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化。动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

① 真实的动作 ——动画的实现是符合物理运动的

感知一个物体有形的部分可以帮助我们理解如何去控制它。观察一个物理的运动可以告诉我们它轻还是重,柔性还是刚性,小还是大。在 material design 设计规范中,动作不止是呈现着它美丽的一面,它还意味着在空间中的关系、功能以及在整个系统中的趋势。

②交互响应

响应式交互能让用户信任,并且吸引他们。 当用户操作一个美观且符合常理的应用时,他们会感到满意甚至很高兴。那是一种经过深思熟虑、有目的、非随机的而且可以带有轻微异想天开但不会让人分心的交互。

③ 有意义的转场动画——视觉连贯性、有层次的时序

对于普通用户来说,是关注一个应用本身、还是更关注这个应用的元素从 A 点到 B 点转变的过程,这种选择往往有些难。谨慎编排的动画可以在有多步操作的 过程中有效地引导用户的注意力;在版面变化或元素重组时避免造成困惑;提高用户体验的整体美感。动画设计不仅应当优美,更应当服务于功能。

④ 让用户愉悦的细节

8、图像

① 原则 ——当使用绘画和摄影以提升用户体验时,选择能够表达个人相关信息和令人喜悦的图像。

a. 个人关联:使用令人回味的影像来建立与应用程序的情感联系。

b. 信息:传达特定的信息。以便于理解的方式来创建智能的感官体验。

c. 闪光点:用相关图像以一种意想不到的方式来取悦用户,使对方觉得不可思议。

② 根据场景选择绘画还是摄影

a.  摄影天然地存在着一定程度的特殊性, 应该用来展示具体的实体和故事。

b. 绘画则能有效的表现出概念和隐喻,而这一点是摄影所不具备的

③ 远离图片库

Material Design

④ 拥有一个关注点

使你的图像具有一个标志性关注点。关注范围从单一实体到总体组成。确保有一个清晰的概念以一种难忘的方式传达给用户。

⑤ 构建叙事 ——创建一个让人感觉身临其境的故事和上下文场景。

⑥ 不要过度修改

9、按钮

按钮由文字或者图案组成,文字或者图案必须能让人轻易地和点击后展示的内容联系起来.

1、悬浮响应按钮, 点击后会产生墨水扩散效果的圆形按钮。——悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的拥有一系列特殊动作的按钮,这些动作通常和变换、启动、以及它本身的转换锚点相关。

悬浮响应按钮有两种尺寸: 默认尺寸和迷你尺寸. 迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性

Material Design

Material Design

2、浮动按钮, 常见的方形纸片按钮,点击后会产生墨水扩散效果.——浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。

Material Design

Material Design

Material Design

3、扁平按钮, 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果.——扁平按钮一般用于对话框或者工具栏, 可避免页面上过多无意义的层叠。

Material Design

Material Design

10、提示框

提示框包含内容: 标题 :主要是用于简单描述下选择类型。它是可选的,要需要的时候赋值即可。

内容 :主要是描述要作出一个什么样的决定 。

事件 :主要是允许用户通过确认一个具体操作来继续下一步活动。

Material Design

肯定的事件 是放于提示框的 右边 并且可以继续接下来的步骤。肯定的事件可以是据有破坏性的,比如:”删除” , ”
移除” 。(话外音:肯定的事件主要是指产品期望用户的一个决策。与按钮文字呈现的语意无关)

否定的事件 是放于提示框的 左边 。用于返回用户原始的屏幕或者是步骤。(话外音:一般就是关闭提示框作用)

11、Tab

一组 tabs 至少包含 2 个 tabs 并且不多于 6 个 tabs。

Material Design

选中的颜色: #fff 或间色(secondary color)
未选中的颜色: #fff 60%

12、提示功能

单行高度: 48 dp

多行高度: 80 dp

默认背景填充色: #323232 100%

Material Design

13、文本框

① 单行文本框:输入框高度:48 dp

② 浮动标签:浮动内嵌标签,当用户进行文本输入,标签漂浮在上方。输入框高度:72 dp

Material Design

③多行文本框:输入框高度:48 dp

14、设置

① 7 个或少于7 7 个设置项——一点都不要分类

② 8 至 10 个设置项

试着将设置项放在一个或两个节分隔块下。如果你有一些“单个设置” (与其他设置项无关的设置项,并且不能归类到在你的章节里) ,根据下面的方法来处理它们:如果它们中包含一些你最重要的设置项,把它们放在最顶上,但不用节分隔块分隔。 否则,将它们按重要程度的顺序放在末尾,用一个节分隔块分隔。

③ 11 至 15 个设置项

建议同上,不过试着用2到4个节分隔块分隔。同样,寻找“双子选项” :两个设置项互相相关,但与其他设置项无关。试着把它们合并为一个设置项。比如你也许可以把两个相关的复选框设置项重新设计为一个多项选择设置项。

④16 个以上的设置项

如果你有四个以上的设置项相关的情况,把它们分在一个子屏里。把上面说的规则应用到每个子屏里。

三、手势

单次触击(Touch)一只手指按下,提起
例如:选择

Material Design

双次触击(Double Touch)两只手指按下, 提起,其中一只手指按下,提起
例如:放大

Material Design

拖拽(Drag),轻扫(Swipe)和快掷(Fling)一只手指按下,移动再提起
例如取消, 滑动,倾斜

Material Design

长按一只手指按下,稍后再提起
例如:选择列表中的某项之类的单个元件

Material Design

长按拖动:一只手指按下后稍后,移动,再提起
如:选择后移动某项,或是选择多项

Material Design

双触拖动:一只手指按下后提起,快速重复该动作
例如:放大,缩小

Material Design

捏放(Pinch Open):双指按下,向外移动,再提起
例如:放大

Material Design

捏合:双指按下,向内移动,再提起
例如:缩小

Material Design

双指触击:双指快速按下,提起
例如:放大

Material Design

双指拖拽,轻扫和移动:两指按下,移动后提起
例如:选择多项条目,拖拽(Pan),倾斜(Tilt)

Material Design

双指长按:双指按下,稍后提起
例如:暂无

Material Design

双指长按拖动:双指按下,稍后移动,再提起
例如:选择后移动

Material Design

双指双次触击:双指快速按下提起,重复一次该动作
例如:放大

Material Design

旋转:双指按下,以任意点为圆心快速转动,再提起
例如:在地图中旋转内容

Material Design

Material Design PDF 百度云链接:http://pan.baidu.com/s/1pLjgfdL

希望这篇文章能帮大家解决一些疑惑!!!

谢谢!!!

 
标签: 设计 Material Design
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 原生App与javascript交互之JSBridge接口原理、
    前期调研调研对象:支付宝,微信,云之家调研文档:Android中JS与Java的极简交互库 SimpleJavaJsBridge设计需求阅读类型的业务功能页面需要由前端H5实现,需要做到服务端可控;页面界面更改减少重新发布新版本的频率;功能页面部分原型需求无法实现,需要原生
  • 我如何将Material Deisgn带入实际产品中
    我如何将Material Deisgn带入实际产品中
    最近,与上海的“谷歌开发者社区”(GDG)一起策划并与大家进行了一期关于Material Design在的话题分享会。这几天我抽空将当天分享的PPT内容再精简整理了一下,并在关键页面配上了对应的文字说明,便于分享给没有来得及到场及更多的朋友。我问过很多人这个问
  • [原]历久而新,我的新书《第二行代码》已开始预售
    [原]历久而新,我的新书《第二行代码》已开始预
    本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注,每天都有文章更新。 回顾《第一行代码》从出版到现在已经有两年多的时间了。当然,如果是从我开始写书的那天算起的话,时隔已经三年半之久了。回顾这三年半的时光,不得不
  • Material Design让我打破的思维局限
    Material Design让我打破的思维局限
    这段时间为了研究控件,细看了一下 Material Design,结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录,这样的资源想必你能搜到不少。所以,我就不再锦上添花了,这里主要写的是 Material Design 给我带来的打破思
  • 导航栏分析:iOS 与 Material Design的对比分析
    导航栏分析:iOS 与 Material Design的对比分析
    前阵师傅带着整理设计规范,结束项目后从规范角度去反思,会发现自己还有很多东西要学。交互设计师真的是一个很专业的职业(划重点!),虽然国内市场入门门槛低,但是要做出合理的方案是需要有专业的知识储备的。定义iOS:导航栏能够实现在应用不同信息层级
  • Retrofit分析之框架设计艺术
    Retrofit分析之框架设计艺术
    Retrofit使用者会觉得接口+注解方式去写网络请求很吊。但当你真正的去看它的源码,会被它独特,漂亮的解耦方式所吸引,整个结构运用了动态代理,策略模式,Builder模式,工厂等设计模式。Retrofit v2.1基于Okhttp3,可以说是对okhttp进行二次封装。先感受一下
    10-07 Retrofit
  • Java 设计模式之观察者模式
    Java 设计模式之观察者模式
    title date tags观察者模式 2016-08-29 09:19:08 -0700 Java 设计模式摘要:本篇主要讲Java设计模式之观察者模式。!-- more --[TOC]前言? 当心浮气躁时,告诫自己要静下心来,一步一步来,不要急不要燥。观察者模式介绍 ? 观察者模式也叫做 发布订阅模式 ,是
  • Retrofit源码解析(一)
    Retrofit源码解析(一)
    本人以前写的Android网络框架时介绍过Retrofit,原文在这里,也做过对Retrofit库进行简单的封装工作, Github源码再 这里 , 在这里就不多说了。当时使用的时候简单看了一些源码,发现源码中大量使用设计模式,包括Facade、Factory、Proxy、Strategy、Adapter
  • Android热修复之dex多分包架构设计
    Android热修复之dex多分包架构设计
    转载请注明出处: http://blog.csdn.net/magic_jss/article/details/52521056 ; 自2015年QQ空间Team放出安卓App热补丁动态修复技术介绍之后,各种热修复技术层出不穷,越来越多的项目也开始尝试这种新技术,也有了一些相对稳定的框架出现。本文主要讲解如何
  • 设计并开发一个 Android 的插件化框架
    结合动态加载系列文章的分析,现在开始设计并开发一个 Android 的插件化框架,命名为 Frontia。Frontia 有 “前端” 的意思,寓意着 Android 插件能像前端开发那样动态发版,同时,这一词出自 Macross 动画系列,有 “繁星” 的意思,“我们的征途是星辰大海
    09-12 安卓开发
点击排行