• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 新版抢先看!Material Design 的7个重大更新

新版抢先看!Material Design 的7个重大更新

作者:Shell_Xiao糯米 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Google,Material Design,UI组件,设计原则,设计规范等相关知识,Shell_Xiao糯米希望在学习及工作中可以帮助到您

2018年5月9日凌晨1点,谷歌I/O 开发者大会如期在美国加州山景城的海滨露天剧场拉开帷幕,谷歌不仅对 AI 技术进行了更深层次的提升,同时也对 Android 系统进行了更新,谷歌副总裁 Dave Burke 对 Android 的更新进行了开场演讲,「在 Android 过去的10中,已经成为了一个开放的系统。」

随着 android P 的诞生,谷歌今日宣布了 Material Design 应用程序视觉设计语言的几项更新。尽管此前传闻称有大改,但从刚刚召开的 I/O 2018 开发者大会来看,今年的发力点还是在主题、分享和开发简易性上。下面就对 Material Design 的更新内容进行解读。

一、强大的「主题编辑器」

主题编辑器可帮助你制作自己的品牌 UI 组件库,并提供全局样式更改方案,可以应用于颜色,形状和排版。目前可用于 Sketch,通过下载 sketch 插件来进行应用。

1. 自定义主题颜色

通过插件可以设定主色、辅色及背景色和文字颜色,并自动将颜色应用于所有组件。

  • 检查色彩对比以符合无障碍要求;
  • 从材质调色板中选择颜色;
  • 使用单一颜色自动生成10个辅助色;
  • 使用 symbols 设定全局颜色方便颜色的更改。

2. 设置形状
  • 选择你的形状和边角风格;
  • 从弯曲或切割的边角样式中进行选择,并自动将更改应用于全部组件;
  • 在材质库的组件中使用对称或非对称形状进行切换,同时保留在 Material Design 规范中。

3. 字体定义
  • 最多可为您的主题添加3种字体;
  • 基于 Material 排版,自动调整和优化字体的可读性;
  • 可快速访问 Google 字体,包括:Roboto,Raleway,Alegreya,Merriweather,Rubik,Oswald等。

4. 探索图标
  • 通过风格化的系统图标表达您的品牌,提供五个主题和一系列格式,尺寸和密度;
  • 从填充、圆润、锐利、描边和双色图标主题中进行选择。

5. 开始使用主题编辑器

通过下载并安装 Material Plugin 开始使用(需要 macOS High Sierra 10.13 或更高版本)

  • 该插件提供对 Material 组件库,Material Theme Editor(可用于Sketch)的访问,并且可以直接将画板上传到 Gallery;
  • 在图库中,使用材质主题编辑器创建的设计可以自动生成规范并访问开发者文档。

Material Plugin 下载地址:https://material.io/tools/theme-editor/

二、新增Material Design设计目标

先让我们来回顾一下旧版 Material Design 2个设计目标。

1. 旧版 Material Design 设计目标
  • 我们希冀创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。
  • 我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。
2. 新版 Material Design 3大设计目标

新版增加了「定制」目标,与最新推出的主题编辑器个性化的定制功能相吻合。

  • 创造:我们希冀创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。
  • 统一:我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。
  • 定制:通过 Material 的视觉语言的延伸,为创新和品牌表达提供统一灵活的设计规范。

三、新增Material Design设计原则

本次更新将原有的材质隐喻、大胆夸张、动效表意3大设计原则扩充为5大设计原则:材质隐喻、大胆夸张、动效表意、灵活、跨平台,让我们来做一个对比。

1. 原有 Material Design 3大设计原则

隐喻

通过构建系统化的动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。与众不同的触感是实体的基础,这一灵感来自我们对纸墨的研究,但是我们相信,随着科技的进步,应用前景将不可估量。

实体的表面和边缘提供基于真实效果的视觉体验,熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果,但同时又绝不会脱离客观的物理规律。

光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系,以及单个物体的运动。

大胆夸张

新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用这些基础的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。

Material Design 设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引。

动效表意

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。

动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化。

动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

2. 新版 Material Design 5大设计原则

材质隐喻

Material Design 受物理世界及其物体纹理材质的启发,包括它们如何反射光线和投射阴影。材料表面进行重新构想,加入纸张和墨水的特性。

大胆夸张

Material Design 以印刷设计方法,排版、网格、空间、比例、颜色和图像为指导,创造出让用户沉浸在精心设计的视觉层级、视觉意义以及视觉聚焦中。

动效表意

通过微妙的反馈和平滑的过渡来使动效保持一定的连续性。随着元素出现在屏幕上,他们在环境中转换和重组,相互作用产生新的变化。

灵活

Material Design 系统旨在实现品牌传达。它集成了一个自定义代码库,可以使组件、插件和设计元素无缝的衔接和灵活的运行。

跨平台

Material Design 使用跨平台管理,其中包括 Android、iOS、Flutter 和 Web,方便设计师跨平台维护 UI 组件。

3. 扩展信息

我们全面的指导可帮助你更快地设计漂亮的产品。通过全新的设计工具,定制 Material 组件和跨平台管理,在材料研究中找到灵感,并用 Material Theming 表达你产品的与众不同。

通过浏览以下三个部分来帮助你更好的理解:

  • 材料系统:我们扩展和优化的设计系统与 Material 工具和组件统一,以改进设计和开发之间的工作流程。
  • 材料基础:设计和策划如何将 Material Design 设计体系运用到你的应用程序,同时学习支持 Material Design 的原理和理论。
  • 材料指南:从设计到代码实现,在整个产品中系统化地定制和部署个性化主题。

设计目标及原则原文地址:https://material.io/design/introduction/#principles

四、放宽对材质形状的限制

△ 形状可以引导注意力,提高组件的识别性,表明状态和表达品牌

材质形状默认情况下为矩形,带有4dp的圆角。但它们具有可调整的圆角、曲线和边角的数量。

形状变化(例如圆角或削角)非常微妙,而且很重要。

1. 形状变化的使用方法

突出重点

通过独特形状的运用,可以将用户注意力集中在页面中重点的 UI 元素上。

△ 圆形浮动按钮和弧形底部工具栏的组合,从屏幕上其他位置的矩形

您可能想查找下面的文章:

  • 我们能从Google的全新UI中学到的知识(图文)
  • 在谷歌当了半年设计师,我学到这些经验
  • 谷歌所说的“整体网页设计”到底是什么概念?
  • 如何将品牌与UI完美结合?Google新规范告诉你答案
  • 新版抢先看!Material Design 的7个重大更新
  • Google I/O 大会之后,Material Design 发生了这些变化
  • 2018 阿里巴巴 UCAN 回顾!张晶华:用户研究在产品定义上的新影响力
  • Google I/O即将到来,对于Material Design 2.0我做了这些预测
  • 实战教程来咯!超实用的VR界面设计实践指南

相关文章

  • 2018-08-23BAT都在使用的设计创新方法 ,现在手把手教你做!
  • 2018-08-23火爆全网的天天P图“前世青年照”是怎么设计出来的?
  • 2017-08-06手机浏览器Viewport 参数(web前端设计)
  • 2017-08-06Web实现点击图片弹出上传文件窗口代码
  • 2017-08-06在新窗口打开的跳转菜单 window.open使用介绍
  • 2018-08-23那些能力差的设计师,都喜欢说这10句话
  • 2017-08-06我的css框架——base.css(重设浏览器默认样式)
  • 2018-08-23刚刚过去的6月,网页设计师们特别青睐这3种设计趋势
  • 2018-08-23昨晚,我偷偷参加了甲方公司的面试
  • 2018-08-23产品设计过程中,异常流程设计的那些事儿

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 功能大于形式!揭秘UI设计中“性冷淡”风格的真相
    • 写给UI新手的APP结构指南:注册和登录
    • 我明明就设计的很好看啊,但为什么上线还是被骂了?
    • 如何获取设计灵感?你没理解它真正的含义!
    • 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
    • 字体大宝库 50款精美的免费细英文字体资源 下篇
    • 超实用!西文字体及排版的运用方法(附字体搭配建议)
    • 掌握这9个设计原则,快速提高用户登录的体验
    • 科班高手的方法!16个简单实用的排版小Tips
    • 超全面!Android 应用与iOS 应用之间的设计差异对比

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有