Google Material UI设计标准解读及实践

AI郭老炮
529 阅读14分钟

material是google UI设计标准最佳实践，为什么说一个网站是UI标准的最佳实践了，而不是UI设计标准文件，不难发现，一个交互和设计恰当的页面，首先经过UI设计，再经过前端开发，最后呈现在用户面前，所以说一个可展示静态内容和动态设计元素的网站是最接近用户的设计，而不仅仅是一个标准文件。 下面从material设计要点和举例实践情况来说明，并在其中阐述UI标准与前端开发实践要点。

一、设计要点：

我们从根本上讨论什么样的网站可被定义“好网站”，如果一个网站能被常人轻松阅读，顺畅交互可以称该网站符合用户需求。

那么更进一步的一个弱视用户，一个盲人用户就不能访问网站了吗，享受上网的乐趣了吗，material标准是考虑弱视和盲人用户的一种标准：

  • 对于弱视用户加强颜色对比度，字体与字体容器、字体容器与背景容器等之前颜色对比度至少为3:1

image.png

  • 对于盲人更多的从架构层面的考虑，一个考虑盲人访问的客户端，页面应简洁，页面内容支持语音播放，页面跳转之间应有语音提示

当一个客户端UI设计内容从常人标准到弱视标准到盲人标准，其UI设计标准在不断演化，前端的架构设计也变化较大，其工作量之大不下于重构，所以在前端架构设计之初尽可能考虑其设计的扩展性。

1、设计原则

设计原则：让用户轻松阅读网站，实现无障碍访问，是这套设计的基石：

  • 使用标准的图标，Web 内容无障碍指南（WCAG）的AA级标准
  • 48*48最佳实践
  • 3:1 最佳颜色对比度
  • 友好交互

2、触摸和指针目标尺寸48*48

摸目标是屏幕上响应用户输入的部分，延伸到元素的视觉边界之外。 图标可能看起来是24 x 24dp，但其周围的填充物包括完整的48 x 48dp触摸目标。 图标间距相隔8dp。

image.png

3、状态层

状态层是一个覆盖层，每个状态具有固定的不透明度，并使用与内容相同的颜色。一个常用标准图标状态层的大小为40dp，而交互目标的大小为48dp。

image.png

4、颜色对比度

为了支持那些喜欢视觉层次的人，比如有认知障碍的人，基线配色方案使用混合对比度作为标准对比度。

(1) 确保颜色具有3:1的对比度。

image.png

(2) 为了获得更大的对比度，将音调分配得更远，达到7:1的对比度。

image.png

(3) 对比度计算

image.png

5、主题色

创建可访问的个人配色方案，传达产品的层次结构、状态和品牌。

主题色分为：动态主题色、静态主题色。

5种关键颜色：主要颜色（Primary）、次要颜色（Secondary）、三阶颜色（Tertiary）、中性颜色（Neutral）、中性变体（Neutral variant）。 可根据项目情况适当添加辅助色。

image.png

(1) 根据算法在线生成主题色：

material支持根据自定义颜色，算法生成最佳主题色适配色，其颜色搭配恰当美观，但需要注意的是，material给每个组件设定不同颜色用来强调其在页面的层级关系，但实际中可能不需要这么多颜色，根据具体实践来。

image.png

(2) 根据主题色，设计常用样式属性，便于多端通用

当一个项目确定了主题色，其他常用颜色，确定了组件内元素的边距，组件与组件的边距，确定了常用字体大小，需要进一步确定是通用设计样式，以便于在多端通用，这里要注意的是，各端需求设计样式的不同。

image.png

形成这样的设计文件：


--mio-theme-color-on-surface-variant-2: linear-gradient(0deg, rgba(77, 66, 86, .08), rgba(77, 66, 86, .08));
  --mio-theme-color-on-surface-variant-4: linear-gradient(0deg, rgba(77, 66, 86, .12), rgba(77, 66, 86, .12));
  --mio-theme-color-on-surface-2: linear-gradient(0deg, rgba(28, 27, 29, .08), rgba(28, 27, 29, .08)), var(--mio-theme-color-secondary-container);
  --mio-theme-color-on-surface-4: linear-gradient(0deg, rgba(28, 27, 29, .12), rgba(28, 27, 29, .12)), var(--mio-theme-color-secondary-container);
  --mio-theme-color-white: #fff;
  --mio-theme-color-on-background: #191C20;
  --mio-theme-color-background: #F9F9FF;
  --mio-theme-color-on-surface: #191C20;
  --mio-theme-color-on-surface-variant: #43474E；
  --mio-theme-color-surface-0: #fff;
  --mio-theme-color-on-surface-2: linear-gradient(0deg, rgb(31 25 35 / 8%), rgb(31 25 35 / 8%)), var(--mio-theme-color-secondary-container);
  --mio-theme-color-on-surface-4: linear-gradient(0deg, rgb(31 25 35 / 12%), rgb(31 25 35 / 12%)), var(--mio-theme-color-secondary-container);
  --mio-theme-color-on-surface-variant-2: linear-gradient(0deg, rgb(77 66 86 / 8%), rgb(77 66 86 / 8%));
  --mio-theme-color-on-surface-variant-4: linear-gradient(0deg, rgb(77 66 86 / 12%), rgb(77 66 86 / 12%));
  --mio-theme-color-surface-variant: #E0E2EC;
  --mio-theme-color-inverse-surface: #2E3035;
  --mio-theme-color-inverse-on-surface: #EFF0F7;

  --mio-theme-color-primary: #1C84FE;
  --mio-theme-color-primary-80: #AAC7FF；
  --mio-theme-color-primary-30: #00458E;
  --mio-theme-color-primary-20: #002F65;
  --mio-theme-color-on-primary: #fff;
  --mio-theme-color-primary-container: #D7E3FF;
  --mio-theme-color-on-primary-container: #001B3E;

  --mio-theme-color-neutral-10: #1C1B1C;
  --mio-theme-color-neutral-90: #E5E2E2;

  --mio-theme-color-secondary: #FF9500;
  --mio-theme-color-on-secondary: #fff;
  --mio-theme-color-secondary-container: #FFDCBF;
  --mio-theme-color-on-secondary-container: #2D1600;

  --mio-theme-color-tertiary-container: #f1d3f9;
  --mio-theme-color-on-tertiary-container: #271430;

  --mio-theme-color-utility-error: #ff6240;
  --mio-theme-color-utility-error-variant: #ff6240;
  --mio-theme-color-utility-on-error: #490909;
  --mio-theme-color-utility-error-container: #f9dedc;
  --mio-theme-color-utility-outline: #787579;
  --mio-theme-color-utility-list-hover: rgb(31 25 35 / 8%);
  --mio-theme-color-utility-list-active: rgb(31 25 35 / 10%);

  --mio-theme-color-surface-1: #f8f1f6;
  --mio-theme-color-surface-2: #f2ecee;
  --mio-theme-color-surface-3: #ece7e9;
  --mio-theme-color-surface-4: #e6e1e3;
  --mio-theme-color-surface-5: #e6e1e3;

  --mio-theme-color-extensions-do-container: #34be4d;
  --mio-theme-color-extensions-on-do-container: #11371d;
  --mio-theme-color-extensions-dont-container: #ff6240;
  --mio-theme-color-extensions-on-dont-container: #490909;
  --mio-theme-color-extensions-caution-container: #ffce22;
  --mio-theme-color-extensions-on-caution-container: #3a2900;

**6、交互

交互是本次定义标准的重点，上面所有设计点都为交互服务。

交互是用户认知信息的关键点。 交互行为：click, double click, long press, scroll and pan, swipe, drag, pinch。

输入设备：鼠标、面板以及键盘。

用户与一个按钮交互有哪些状态：

Hover：鼠标手、组件出现高程（阴影）样式

Focus：焦点状态

Press：点击波纹或高程加深

Drag：拖拽， 高程进一步加深

(1) 状态层

为了便于让用户清晰的感受到在网页的操作，每个动作都有其状态。 Hover +8% opacity Focus +10% opacity Press +10% opacity Drag +16% opacity 随着用户从点击到拖动状态层深度逐渐增加。 !

image.png

(2) 高程

可以使用阴影或其他视觉提示来描绘高程，例如使用色调差异或涂鸦的表面填充。material设定每个组件都有一个默认的高程，但在项目实际UI设计中不必生搬硬套，避免过多设计。

image.png

(3) 交互-Hover

并非每个组件都存在hover属性。

存在悬停状态的组件：Buttons, Cards, Checkbox, Chips, Date and time pickers, List items, Slider, Switch,Text fields。

不存在悬停状态的组件：App bars, Badges, Dialogs, Menus, Navigation, Sheets, Tabs。

image.png

(4) 交互-Pressed

Pressed: 通过按下状态通过光标、键盘或语音输入传达用户点击。此状态适用于所有交互式组件。 按下状态会触发组成的变化，应高度重视。 波纹覆盖表示按压状态。它可以应用于整个零部件或零部件内的一个或多个元素，也可以应用为零部件一部分上的圆形。

有按下状态的组件：Buttons, Cards, Checkbox, Chips, List items, Text fields

没有按下状态的组件：App bars, Badges, Navigation, Dialogs, Menus, Sheets, Tabs

(5) 交互-Focused

Focused：当用户使用键盘或语音高亮显示某个元素时，焦点状态进行通信。焦点状态适用于所有交互式组件。

image.png

(6) 交互-Dragged

拖动状态由某些包含和选择组件继承：Cards, Chips, List items, Sliders

不包括：App bars, Badges, Buttons, Dialogs, Menus, navigation

(7) 交互-不可操作状态disabled

存在不可操作状态的组件： Buttons, Cards, Chips, List items, Selection components, Text fields

没有不可操作状态的组件： App bars, Badges, Dialogs, Floating action buttons (FABs), Menus, Navigation, Sheets, Tabs, Tooltips

image.png

二、实践案例：

material实践聚焦组件级别设计，原因在于常用组件一旦定义后，更通用于各项目，而不再需另外设计，常用组件约20来个，下面举4个典型例子。

在每个组件案例中，都从组件说明、布局、使用原则以及交互4个方面来解释。

1、Top Bar组件

(1) 用于显示导航操作和文本
  • 居中对齐：用于应用程序中的主要根页面。用于显示应用程序名称或页面标题。
  • 小的：对于需要反向导航和多个操作的子页面上的紧凑布局或滚动视图。
  • 中等的：用于滚动前顶部小应用程序栏的初始状态。用于显示较大的标题处理方式。
  • 大的：更大的顶级应用程序栏。用于强调页面的标题。

image.png

(2) 布局

image.png

image.png

image.png

image.png

(3) 原则
  • 始终沾满屏幕这个宽度，始终在页面顶部展示，不会被隐藏
  • 当文字过长使用大文字顶部展示
  • 在尾部最多出现3个图标，在最左侧显示最常用按钮，如返回、菜单显示等
  • 当屏幕比较小，在尾部有多个按钮展示，动态在小屏幕下显示... 按钮，在大屏幕下显示全部按钮
(4) 交互
  • 鼠标滑动、点击在程序栏，程序栏无状态
  • 鼠标滑动、点击程序栏中图标，图标显示标准hover、Pressed效果

2、Button-总体概览

(1) 介绍

按钮让人们只需轻轻一按就可以采取行动并做出选择。在同一屏幕上使用不同的按钮类型来引导用户的注意力。 按钮有九种类型，依次为：高程、填充、填充色调、轮廓、文本、图标、tab切换、浮动FAB、扩展FAB。 每个按钮都有高、中或低强调。

image.png

(2) 强调分类

image.png

(3) 页面按钮层次结构

主要操作按钮：每个屏幕应包含一个显眼的主要操作按钮。这个高强调的按钮吸引了最多的注意力。屏幕上元素的布局应清楚地传达其他按钮的重要性较低。 其他按钮：一个产品可以同时显示多个按钮在布局中。当使用多个按钮时，请确保一个按钮的可用状态不会与另一个按钮的禁用状态相似。

image.png

(4) 页面按钮设计原则

在同一屏幕上使用多种按钮样式，以关注主要操作，同时提供其他选项。 对于多个操作，请为更重要的操作选择一个强调程度更高的按钮，例如文本按钮旁边的填充按钮

  • 单独使用已填充的按钮执行单个重要操作
  • 如果有空间并排放置，请避免将按钮放在另一个按钮下方

2.1Button-通用按钮

(1) 类型

高程、深色填充、浅色填充、轮廓、文本 转存失败，建议直接上传图片文件

(2) 原则
  • 不要用太多的按钮打乱你的UI。考虑在溢出菜单或图标按钮中显示优先级较低的操作。
  • 按钮容器的宽度是动态设置的，以适应其标签文本
  • 按钮容器的宽度不应小于其标签文本
  • 不要换行。为了获得最大的易读性，标签文本应保留在一行上。
  • 在文本按钮中，标签文本应使用与其他文本不同的颜色、样式或布局，更加突出。
  • 容器具有完全圆角
  • 图标应放在按钮文本之前，起到强调的效果
  • 使用清晰传达其含义的图标、不要将图标和文本垂直对齐在按钮的中心、不要在同一个按钮中使用两个图标
  • 不要让图标和标签文本锚定在按钮的相对两侧。
  • 当多个按钮并排时，对比度需要达到3:1
(3) 布局

image.png

image.png

image.png

image.png

(4) 鼠标滑动、点击按钮，显示标准hover、Pressed效果

image.png

image.png

2.2 Button-icon图标按钮

(1) 图标按钮可帮助人们一键执行小动作，类型：

填充图标按钮、填充色调图标按钮、轮廓图标按钮、标准图标按钮。

image.png

(2) 原则
  • 图标按钮必须使用具有明确含义的系统图标
  • 悬停时，显示描述按钮操作的工具提示（而不是图标名称）
  • 使用轮廓样式图标指示未选中的状态，使用填充样式指示选择
(3) 布局

image.png

(4) 交互

image.png

image.png

2.3 Button-tab图标按钮

(1) 选项、切换视图或对元素进行排序：

image.png

(2) 原则
  • 通常选项卡在2到5个之间
  • 具有完全圆角
  • 每个label长宽一致
  • 不能换行
  • 使用一致的标签类型
  • 不要填充整个屏幕，在两边有一定间距
  • tab按钮不要过长

image.png

(3) Button-通用按钮

image.png

(4) 交互

image.png

3、Chips（tag）组件

(1) 一种小块的容器，通常用于表示输入信息、属性或操作。
  • Assist（辅助）
  • Filter（过滤器）
  • Input（输入）
  • Suggestion（建议）

image.png

(2) 原则
  • chips需成组出现2个以上
  • 避免用chips代替主要动作，将用户推进到下一步或上一步的操作应始终显* 示为按钮。
  • 使用轮廓在常规背景上定义芯片容器的边缘
  • 在常规页面上chips不能添加高程
  • Label Text 文本内容尽可能少
  • 保持48*48 样式 最佳设计
(3) 布局

image.png

image.png

image.png

image.png

(4) 交互

Pressed效果尽量避免使用高程的形式，用水波纹的效果

4、Lists

(1) 列表是文本和图像的连续垂直索引

image.png

(2)原则
  • 当列表内容较多2列或者3列时，可用分隔符隔开
  • 列表内容仅一列，列表之间用间距隔开，不需要使用分隔符
  • 列表内容太长影响阅读，可用分列的形式展示
  • 列表内容有3列内容时，移动端和web端样式展示区别，web端可将3列展示成2列
(3)布局
  • 内容仅1列Height：56

image.png

  • 内容仅2列Height：72

image.png

  • 内容仅3列Height：88

image.png

(4)交互
  • 滑动：滑动列表项（向左或向右）可以执行操作。
  • 拖动：可以拖动项目以重新排序列表。
  • hover：提供一个视觉提示
  • click：水波纹

三、总结

本文万字解读Google material标准原理及其实践，重点在于其设计标准与前端开发的结合，特别是交互这一块，需前端开发相关demo具体实践，当然material标准不仅仅是这些，提取其中最核心的关键点即可，比如对于每个组件定义高程是否有必要，对交互水波纹使用是否有必要，在实践过程中也不必循规蹈矩按照这一套来。

实践最终形成如下结果：

  • 一套组件级别设计文稿
  • 一套设计标准文件
  • 一套前端实践demo
avatar
文章
阅读
粉丝