Material Design（原质化设计）是谷歌开发的一种视觉设计语言，它遵循了优秀设计的经典原则，同时还结合了创新理念和新技术。
概 述
一、目标（Goals）
-
创造 (Create) : 创造一种视觉语言，将经典的优秀设计原则与技术和科学的创新和可能性相结合。
-
统一 (Unify) : 开发一个单一的底层系统，在平台、设备和输入方法之间统一用户体验。
-
定制 (Customize) : 拓展 Material 视觉语言，为创新和品牌传达提供灵活的基础。
二、原则（Principles）
1、Material（原质化） 即隐喻
Materia Design 的灵感来自物理世界及其质感，包括它们如何反射光线、投射阴影。
实体的表面和边缘提供基于纸墨效果的视觉体验，熟悉的质感让用户可以快速地理解和认知。
2、清晰、形象、深思熟虑
Material Design 在排版、网格、空间、比例、颜色和图像的设计上，借鉴了传统的印刷设计。
力求构建出鲜明、形象、有意义的用户界面，使用户沉浸其中。
3、有意义的动效
动效是通过微妙的反馈和连贯的过渡，来集中用户注意力并保持交互的连续性。
当元素出现在屏幕上时，随着交互的触发，这些元素会发生外观上的变化，并且周围的场景也会发生改变。
4、基础灵活
原质化设计系统旨在实现品牌表达。它整合了一个可定制的代码库，允许无缝实现组件、插件和设计元素。
5、跨平台
Material Design 使用跨Android、iOS、Flutter和Web的共享组件，跨平台维护相同的UI。
三、布局（Layout）
1、可预测的
UI应使用直观且可预测的布局，具有一致的UI区域和空间组织。
2、一致性
布局应该使用一致的网格、关键字和填充。
3、响应式
布局是自适应的，并对来自用户、设备和屏幕元素的输入作出反应。
Material Design响应式布局网格可自适应屏幕尺寸和方向，确保布局的一致性。
响应式布局网格由三种元素组成：列 (Columns) 、水槽 (Gutters) 和边距 (Margins) 。
列
界面内容放置在列的范围内。
列宽是使用百分比，而非固定值来定义，以便于内容可以灵活地适应任何屏幕大小。网格中显示的列数由屏幕大小确定。
水槽
水槽是列与列之间的空隙。它们有助于分离页面的内容。
水槽的宽度是每个断点范围内的固定值。为了更好地适应屏幕，水槽宽度可以在不同的断点处更改。
更宽的水槽更适合更大的屏幕，因为它们在列之间会有更多的空白。
边距
边距是内容与屏幕左右边缘之间的空隙。
边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕，边距宽度可以在不同的断点处改变。
更宽的边距更适合更大的屏幕，因为它们在内容的周边会有更多的空白。
1、8dp网格
所有组件都与移动设备的8dp网格线的网格对齐。
如上图，应用栏与悬浮按钮都与网格保持对齐。
2、4dp网格
图标、排版和组件中的元素可以与4dp网格对齐。
如上图，底部导航栏的元素与4dp网格对齐。
3、空隙
空隙是指UI元素之间的空间。它是一种替代间距的方法，以8dp或4dp的增量测量。
空隙应与响应布局网格结合使用，以在设计中一致地放置元素。
4、垂直间距
垂直间距是指标准元素的高度，例如应用栏或列表项。这些元素的高度应与8dp网格对齐。
热区规格
触摸热区适用于通过触摸和非触摸交互的任何设备。为了平衡信息密度和可用性，触摸热区应至少为48 x 48 dp，并且它们之间至少还要有8dp的空间。
点击热区
在非接触式用户界面上（如WEB端、桌面端等），点击热区应至少为24 x 24 dp，其间至少还要有8 dp的空间。
四、启动屏幕（Launch screen）
当APP启动时，显示启动屏幕，而非空白屏幕。显示启动屏幕可以弱化长时间加载/等待的感觉，并且有可能增加用户体验的乐趣。
但如果APP正在运行，则不应显示启动屏幕。
有两种类型的启动屏幕：
-
占位符启动页显示APP实际UI的界面，即非交互式预览。此启动屏幕适用于APP启动和APP内的活动转换。
-
品牌发布屏幕提供短暂的品牌曝光，可提高品牌识别度。
五、新手引导（Onboarding）
应该新手引导是一种虚拟的打开体验，帮助用户开始使用APP。它应该为某类用户达到特定的目标而设计。
用户场景：
-
用户已经安装了应用程序，且不需要马上查看促销信息
-
用户渴望在不阅读说明手册的情况下，先使用APP
-
用户还不熟悉APP的用户界面，并且准备了解它
目标：
-
欢迎用户并激发他们马上体验APP的兴趣
-
帮助用户隐性或显式地理解APP如何使用
-
推动用户在前七天使用APP，提高参与度和留存率
有三种新手引导的样式：自我选择、快速入门和引导页。
– 推 荐 阅 读 –
本文来自:宛苏 作者:宛苏
评论0