最近在整理系统的组件规范，收集各个场景下的组件应用，在搜集应用控件时，弹窗的套用、混用、乱用情况挺多的。

主要是模态框和非模态框的使用。

模态框：一般会有一层黑色透明的蒙板，它打断用户所属的主流程，不能进行下去，只能到完成模态框的操作，才能返回到主流程中去，这个操作很明确，不会被误解；

非模态框：一般没有那一层蒙板，不会影响所属的主流程，也不用担心原有进度会停止，仍然可以持续操作。即打开非模态也能看见底层的主流程。

概述

模态or 非模态，统称为弹窗。样式上可以理解为类似卡片，能够帮助用户快速定位获取关键信息和进行操作，它的内容是灵活的，一般情况下包含文字、图标、按钮。弹窗的设计是给用户传递与当前场景需要的操作相关的内容。

蓝蓝推荐：这是一篇很实用的表格基本交互形式文章！
译文：如果没有将数据可视化和具备编辑数据的功能，数据就毫无用处。未来行业的成功依赖于将数据收集与更好的用户体验结合起来，而数据表格的设计体验则非常重要。

固定表头

-

固定表头让用户随时都知道自己所在列的名称。

水平滚动

-

当展示大型数据列表时，水平滚动是不可避免的。可以 将具有标识性信息的数据展示在第一列中，并固定第一列方便用户对其他数据进行对比。

调整每一列的宽度

-

调整列宽可以让用户看到所有的内容。

设计表格样式

-

表格的样式有：白色和其他颜色相间的斑马线设计，单纯用线分割，自由形式等。

正确的设计行样式可以帮助用户浏览表格数据，对只包含少量数据的表格来说，减少视觉干扰非常重要，这时候就可以采用去掉分割线、斑马行的自由展示模式。但对于有大量数据的表格来说，自由模式容易让用户迷失，这时候用线分割，让用户能区分开每一行就显得尤为重要。而斑马线的设计样式适合包含多列数据的表格，需要水平移动的大量数据表格。 

表格密度展示

-

为列表设计不同的密度，用户可以根据需要自行切换，比较紧密的行距让用户无需滚动就可以浏览更多的数据。

数据可视化

-

让数据可视化，提供表格内容的概括性预览，让用户无需细读每一条数据就能得到想要的信息。

分页展示

-

分页设计方便用户跳转到相应页面，但是也常常被无限滚动加载的方式取代，无限滚动加载指的是随着鼠标不停地往下滚动，页面内容也会随之加载，这种方式适用于发现类的网站，但是对于考虑优先级的产品来说就不太合适了。

悬停展示

-

当用户悬停时显示更多功能可以减少视觉混乱。需要注意的是，它可能会导致可发现性问题，因为用户需要与表交互才能看到更多的功能。

直接编辑

-

直接编辑可以让用户在当前表格内修改数据和内容，而不用额外再跳转其他页面进行操作。

可扩展功能

-

可以扩展的表格设计允许用户在不丢失上下文的情况下浏览更多详细信息。

快速视图

-

与可扩展功能非常相似，快速视图使用户能够在保持上下文的同时查看附加信息。

弹窗

-

弹窗设计同样可以让用户停留在表格视图中，让用户更专注在附加信息和操作上。

多层弹窗

-

多层弹窗功能对于活跃用户来说非常强大，可以同时完成多种操作，或用来比较不同项目的详细信息。

点击详情展示

-

单击链接会将表格转换为左侧为列表项和右侧为其他详细信息的视图。它使用户能够解析大型数据，以及查看单独的项目详情而不会丢失它们的位置。

可排序的列

-

排序允许用户按照字母顺序或数字顺序对列进行重新排列。

基本筛选

-

提供基本的筛选功能来搜索表格里的相关数据。

列筛选

-

这种设计模式允许用户将过滤参数分配给特定的列。

可搜索的列

-

这种设计模式允许用户在每列中搜索特定值。

添加列

-

这种设计模式允许用户根据需求在数据表格中添加列。

可编辑的列

-

可自定义的列功能使用户能够选择他们想要查看的列并进行相应的排序。 这个功能还包括保存预设后再修改的能力。

...

为什么表格设计很重要

数据正在成为全球经济的原材料。对数据的追求推动了行业的重塑。能源、媒体、制造、物流、医疗保健、零售、金融，甚至政府都在经历数字化转型。

然而，如果没有可视化数据并对其采取行动的能力，数据就毫无意义。未来十年幸存下来的公司不仅将拥有卓越的数据；他们也将拥有卓越的用户体验。

良好的用户界面设计基于用户的目标和行为。用户界面反过来也会影响行为，从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变了人类的决策方式。所看到的、呈现的位置以及交互的方式，都会影响行动。重要的是我们要做出能够带来更美好世界的设计决策，一个符合这个时代的数据表格设计。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：国外  彩虹BOOK翻译
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

众所周知，黑帕云这样的产品几乎使用了所有类型 B 端的组件。

由于我司设计资源有限，所以在拥有了组件库、设计师定好了设计规范之后，作为产品经理就直接可以手撸设计稿了。

这是是前面一文《 B 端产品中，一个 Epic 基本功能设计的过程》 提到，作为一个长大了的产品经理，有时候没有资源给你做交互没有资源给你画 UI 的，你要自己学会自给自足。

这个系列就是作为产品经理的我，在这两年中“自给自足”做设计的的一些总结与发现。

自给自足的前提是，前面说的组件库和设计规范，即拥有一个设计体系（Design System）。

01.什么是设计体系？

关于设计体系的定义和内容各家都不同，我找出来了以下案例供参考。

《设计体系：数字产品设计的系统化方法》

Tilio（一个写作和笔记应用）联合创始人，有十年 UX 设计经验的阿拉·霍尔马托娃在《设计体系：数字产品设计的系统化方法》一书中这么定义：

设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。
模式指的是界面中那些重复的要素：用户流程、交互方式、按钮、文本框、图标、配色、排版、文案，等等。
实践则是我们如何创建、捕获、共享和使用这些模式，尤其是在团队协作时做这些事情的方法。

书中将设计体系分成以下几个部分：

设计目的、设计原则、组件库、样式指南，以及用于提高设计师和开发人员沟通效率的工作流程和实用工具。

整理之后，可以参考下图：

Salesforce：Lightning Design System

Material Design

可以发现，以上设计体系无论如何定义概念，都是由设计原则+设计指南+一些基础的元素（比如 Design Token、Material Foundation、Icons）+组件库+其他资源工具构成。

形成这些内容的目的都是为了给自己产品建立一套保证设计质量、提升设计决策、提升沟通效率的“工具包”，从而让产品形成自己的符合设计原则的风格。

所以设计体系是什么不重要，重要的是如何在遵循设计原则下，能够高效做出高质量的设计。

02.设计原则（Design Principes）

一个开源设计原则和方法的网站 Design Principle 这样定义设计原则：

Design Principles are a set of considerations that form the basis of any good product.

译为“设计原则是构成任何好产品的一套基础考虑因素。”

比如 Salesforce 的设计原则是：清晰、高效、一致、美观。并且优先级由前到后。

可以理解为 Salesforce 会追求清晰大于高效、一致、美观，比如在产品设计中，让用户清楚的看到、理解、自信地去操作要比任何事情都要重要。

这个准则很容易理解，可以推论出 Salesforce 在度量体验时，将“易用性”放在了第一位，即作为一个 SaaS 产品，不能有任何让用户产生疑惑的地方。如果在设计上的美观而要牺牲清晰，这就是不可取的。

03.组件库

有了设计原则之后，下一步是需要一个组件库。这里说的组件库囊括了无论是原子化的颜色、字体、阴影、Icon 这些基本的元素，还包括了已经封装好的组件，如 Button、Alert、Toast、Text Input。

关于为什么要组件化，也不多说了，之前看过一篇阅文体验设计 YUX 的《组件化思维—— 适应并推动业务及产品变革的设计案例》写的非常清楚。

接下来我通过 Minecraft 这个游戏来总结了组件库。

玩过生存模拟类游戏大家都知道，在游戏中会有一些可以靠双手劳动得来的基础材料，比如砍树砍来的木头、地上捡的石头、挖矿挖的燧石。这些基础材料可以合成一些简单处理过的材料，比如把木头合成为木板。然后可以再把半成品进一步加工，比如木棍。

在 Minecraft 这个游戏中，如果玩家要制造一个弓箭，需要一个弓和一个箭。弓和箭的合成又需要一些半成品和成品或者原材料来加工制作，如下图：

对应在设计组件库中可以对照查看，一个完整的页面是可以通过一些元素、控件、组件、大组件组成：

04.适用人群

在系列开始之前，先声明一下文章的范围和适用人群。

关于 「B 端设计总结」这一系列，主要是我个人在已有了我们的设计规范和组件库后，“自给自足”的情况下探索出来的一些组件使用规则，更偏向产品经理或者交互设计师来参考。

所以系列中不会写设计规范，比如说字号、颜色、间距等等这些属于设计规范中内容。而是基于已有的规范，总结之前我们功能中涉及到的该使用哪些组件，也可以称之为狭义上的设计指南（Design Guidelines）或者设计模式（Design Patterns）。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

关于数据可视化项目

图3 配色的概念图

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

01表单概念

表单页作为基础通用组件，也是B端产品中台、后台出现比较频繁的页面之一。看似简单的页面我们在设计时却有很多值得推敲的点，在细节处提升用户易用度，我通过日常的学习和公司项目，在这里总结复盘了自己的经验。

表单的适用场景比较广泛，常见的基础表单比如登录注册页面，这一类往往信息简单，格式比较固定，除此之外就是分步表单、高级表单。常见的场景主要用于新建信息、申请、客户信息、商品信息等等。这类表单可能存在复杂逻辑关系和功能，有时会给我们造成困扰。以下我将以这一类表单为主要案例，一一进行拆解。

登录注册页：表单内容简单，操作简单。

分步表单：具有流程化特点，具有先后逻辑关系，内容较多的业务类型，比如转账，新建商品订单等。分步填写可以减缓用户压力，起到安抚用户情绪的作用。

高级表单：主要用于需要一次性输入、提交 大批量数据的场景。也成为分组表单，和分布表单一样都是为了减轻用户填写压力。

02设计原则

首先我们需要明确表单页的主要功能：表单页承载了系统中绝大多数系统数据的录入、增删、修改、查看，是系统中人机交互最为频繁和典型的数据媒介。表单页通常需要用户录入大量的信息或数据，在设计时我们的核心目标应该是让用户明确当前表单页面要完成什么任务，轻松理解项目含义及生效的结果，思考如何帮助用户高效、准确、轻松的完成任务。

表单设计基本原则：明确、高效、安全

明确：用户可以快速定位重要信息和目标选项，表单文案和组件可以准确传达任务含义

高效：易理解易操作的交互方式，尽量减少交互步骤，减少用户任务路径步长，配合合理的信息布局引导，准确的选择合适的组件传达信息，帮助用户高效的完成任务。

安全感：操作前有效的防错机制，操作中有明确的状态反馈与容错，允许纠正错误。操作后及时的保存，取消机制。

03表单构成

一个完整的表单通常包括表单标题、表单标签、表单域、提示信息、占位符、操作按钮几部分。

标题：起到说明表单模块的作用，是用户快速明确任务和定位页面位置的重要标识。

表单标签：内容项的名称，说明对应填写项含义及说明用户该填入什么信息。

表单域：表单的核心操作区域，用户操作最频繁，最集中的地方，这里的可选择组件样式也会根据内容需要而变化，类型最为丰富多样。需要注意的是同一类型的组件需保持一致性原则。

占位符：一般出现在用户未填写内容时，用于辅助提示用户录入线索。

提示信息：辅助提示用户的作用。分为普通提示和错误提示，也是很好的防错纠错机制体验。

操作按钮：“结束”表单任务的触发器，用于向服务器提交数据或者放弃操作。

表单标签

表单标签样式常见的有4种，左对齐标签、右对齐标签、顶部标签和行内标签，不同的对齐方式各有优势和缺点，适应在不同的场景。

右对齐标签（冒号对齐）

优点：标签指向明确，操作效率高，节约纵向空间

缺点：可读性低，不适用于狭长空间或需要适配多语言的页面

场景：普通表单填写，多用于web端

左对齐标签

优点：阅读性高，节约纵向空间

缺点：不适用于狭长空间或需要多语言适配的页面，操作效率低

场景：详情陈列

顶部标签

优点：视觉对齐舒适，节约横向空间

缺点：纵向空间利用不高

场景：多用于移动端表单填写，多语言适配页面

行内标签

优点：视觉对齐和空间最节约的方式

缺点：当用户输入状态时，标签消失，增加用户记忆负担

场景：多用于登录注册，修改密码等内容极少，不需要记忆的页面

表单域

表单域是一个表单页面的主体部分，其内容丰富多样，从而它可选择形式也最多，不同的内容我们在设计的时候应该选择最合适的组件，以及应该注意同类型内容选择统一的组件进行设计。

定义操作框大小

在实际项目中我们往往会遇到内容长度不能统一的时候，那怎么这种情况该怎么处理呢？

以往我的处理方式是强行拉长对齐，但我们可以发现强行对齐的时候，视觉没有得到很大优化，反而在隐喻传达给用户错误的信息，当用户在操作1功能的时候，可能会错误的认为这个选项可以选择很多，因为我们给的选择框很长，而实际上它只能选一个。这样就会给用户造成不必要的理解成本。

比较好的方式处理方式是我们设计组件库时就设定不同尺寸的操作框，来适应不同场景下不同内容需求。如果不能对齐，那就让它参差不齐。

提示信息

提示信息在表单中起到提示、纠错的作用。形式主要有以下几种：行内占位符提示、操作框下方文字提示、tost提示、气泡提示。

行内占位符：这是一种基础应用，它即可用于占位，也可用于任务说明提示，当我们说明文字很少的时候可选择的一种方式。需要注意的是内容务必简洁易懂，减少阅读成本，不要说“正确的废话”，语句应该是完整的陈述句。

气泡提示：当提示文字很多，主要用于对标签的名字释义时，气泡弹窗是个不错的选择。它的优势在于可以将更多内容折叠，不占用空间，缺点是不直观，增加了用户操作步骤。

Tost提示：Tost提示一般是在出发操作按钮后给出的提示，可以是操作结果提示，也可以是内容填写提示。

操作框下方文字提示：当提示内容很多时，还可以考虑操作框下方提示，多用于对输入内容的辅助说明场景。应用场景包括以下几种：

组件组合后在表现层的设计

提示信息在页面中还是一个辅助性的角色，常规情况下的视觉层级应该是 表单内容>表单标签>提示信息。当用户有错误操作时“错误提示”优先级是最高的，我们一般用带有警示性的颜色给以醒目显示。

为了使用户更好的辨别任务项，需要注意组件与组件、组件与说明文字之间的间距差别。

04交互方式

表单中的交互方式根据其内容选择对应最合适的形式，内容简单而少的可以直接在原位编辑，操作快捷，关联性最强，所见即所得，内容容量低于5个。其次内容较多的，或者针对全局操作的可以选择气泡卡片，比如全局设置等。第三种是弹窗或者抽屉，两者形式是一致的，区别在于对内容的承载量上，弹窗容量较小，内容较多的情况下抽屉式弹窗（侧拉弹窗）是更好的选择。最后，内容承载最大的就是页面跳转，同时这种方式与原页面的关联性最弱。

组件构成表单，实际项目中，我们的表单往往内容会多而复杂，设计时可以考虑在布局上优化去提升使用体验。

常用的方式有几种：信息分组、锚点定位、标签页、分步骤。

在格式塔邻近性原则中提到，人们将彼此接近的事物、元素，倾向于认为它们是相关的。在设计中很早就运用到这种认识倾向。所以我们在信息分组时可以运用设计手法将相关信息从视觉上区分开，提升信息阅读有效率。

分组方式：

1.简单的内容使用标题分组或卡片分组就可以达到目的。

2.而内容很多，组别之间没有关联性时用标签分组。

3.页面内容很长需要连续下滑操作时，锚点定位就可以提供便捷的操作体验。

4.在任务有先后逻辑关系时，分步骤是最好的选择。

标签分组与锚点定位在表现形式上类似，区别点在于操作后的结果。标签分组切换标签后页面数据会刷新，一般没有自动保存功能，锚点定位则是每次点击定位页面不刷新数据，始终保持在同一数据页面。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如何选择合适的B端设计风格？

1.B端后台分类：

根据服务对象划分：

一类支持有C端前台，支持前台产品管理各种资源。第二类服务企业，提高企业工作效率和营收。

根据后台功能：

1.监控运营：时效性强，旨在实时反馈异常情况，快速判断下达命令，回复信息、多用于数据控制中心。

2.数据分析：数据结果的对比和分析趋势，时效性要求并不高，了解整体和各部分数据水平，助力决策。

3.记录管理类：主要用于人员、设备、资产等增删改查，文本信息容量大，频繁便捷的操作。

4.系统配置：权限配置、设备功能配置，操作为主。

2.后台深浅两大风格分类：

浅色：

适合文本信息多密集的表单列表类后台，浅色更符合人眼白底黑字的阅读习惯，浏览速度更快，信息获取效率更高。

深色：

图像信息密集的后台适合图片、数据可视化图表等；深色对彩色的图像信息衬托更强。信息获取速度较慢，长时间可能视疲劳。

3.作者常向产品方提供的风格参考

较常见

1.经典商务风（导航深、内容浅）——专业、高效、成熟、可信赖（对照深色西装人物形象）

      优点：市面最常见的风格，普世性高，大多数用户可快速接受，层次分明

      缺点：视觉缺乏记忆点

 2.轻量科技感（导航浅、内容浅）——简洁、明快、轻量、年轻（对照白衬衫打领带男性）

      优点：视觉清新明快更年轻化更轻量，对其他文本及图形展示包容性高，就像A4白纸一样容器存在感弱

      缺点：纯白色导航+页面层次略暧昧。

 3.蓝色科技风（导航中、内容中）

      适合：适合科技属性强的产品界面，图像图形展示

      缺点：对其他色彩信息有干扰，持续性长时间观看易视觉疲劳

 4.暗黑科技风（导航深、内容深）

      优点：对色彩表现力强

      缺点：密集文本信息获取速度会下降，持续性长时间观看易视觉疲劳

4.精准选择风格时可以进一步的考虑：

1.整体行业风格

比如美妆和科技行业的整体设计基调就不太相同。

2.产品想要传达的气质：

理性可靠 or  简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨

3.目标用户的群体特点及喜好。

根据目标用户的性别、年龄层、受教育水平，审美水平考量（可能包含多种角色，选取1.2个核心角色为参考）带入目标用户工作场景及爱用物常用物品味，去判断基调。

如主要用户群：40+男性用户，本科以上受教育水平，使用windows电脑进行专业管理操作，审美倾向明确内敛。

如主要用户群：20-40岁，男女比例约6：4；大专；操作水平参差

4.使用场景及高频的操作。

例如：最常使用数据分析管理，需要快速阅览多条数据，对数据进行比对，更适合浅色风格展示表单数据。

5.判断独立的平台是否为独立开发

独立开发的，可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。

5.如何让后台设计更具特色：

1.重点色的使用

“731配色比例”70%的面板色，30%的导航面板色，10%的强调色。（这里的用色比例可以根据内容具体再去调节只是大概比例）品牌色或重点色：强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。

2.图标的优化

后台高频出现的图标，值得我们花时间去统一设计打磨，调整圆角粗细疏密，符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的，好的设计在细节处也要动人。

B端工具类图标识别性第一，美观性第二。B端导航图标更多是在基础造型上打磨，不需要加花里胡哨的渐变、投影，导航图标一般在24px-16px大小，太复杂反而看不清。在区分状态的时候可以考虑加点品牌色

3.空状态小插画

空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。

图形化状态语言，辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度，具有引导性。让乏味的工作出现一些共情小彩蛋，有趣的插图动画可以缓解等待的焦虑。

4.登录注册页

纯色背景卡片式：简单大方更聚焦登录操作

插画背景：场景化展示产品的功能及亮点，让用户更有心理预期

几何图形背景：最后和品牌图形相关，加深用户对产品的品牌印象。

照片背景：相关场景或产品类型，具象图片信息更直观

5.圆角的大小

不同大小的圆角传达产品不同的气质，大圆角亲和、小圆角精致、中等圆角大众中庸。

6.优化信息层级

优化信息层级，区分信息主次可以使阅读更快，操作更快，界面更有节奏感。

这时候你就是那个考前画重点的老师

判断一个页面里最重要的是那些信息或操作，强化它！并弱化辅助信息；

判断一个模块里那些是重要信息，强化它！

6.新人需要避免的雷点：

1.追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板，满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多，反而干扰信息获取效率。

2.反常规用户习惯的操作。尊重用户习惯，不要为了个性化去尝试改变，不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维，曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。

3.数量多，动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打扰。之前看过一个反面例子后台，在每一步操作后都出现大的场景动效鼓励完成，如果作为一个长期使用的工作者，我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。

4.新人建议多看Antdesign和Element等成熟的组件，创新类组件样式，最好和和开发商量是否能够实现。

5.在确定主要风格及2-5张主要页面后，就应该着手基础规范（色彩字体等，不然后面越做越乱）。

6.一段时间一个审美，同一界面中的元素风格不统一。

7.避免大面积使用高饱和高明度的色彩，及暧昧含糊的临近色彩。长时间使用眼睛会累，产生不耐烦焦躁的负面情绪。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

背景

在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

案例收集｜发现问题，大胆假设

纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是查询列表？

首先我们先了解下官方Ant Design对查询列表的定义：

简介：

查询列表可以查看和处理大量的条目数据，常有导航至详情的作用，

用户可在列表页对条目进行筛选、搜索、对比、新增、分析、下钻至条目完整详情页等操作。

设计目标：

帮助用户更高效的查看、处理、查找条目。

设计原则：

易读性：采用格式一致外观，突出有利于对象识别的关键信息。利用富交互分层展示信息以减少认知负荷；

可寻性：列表以易于浏览的逻辑排序。提供合适的搜寻组件帮助用户快速查找信息；

常规布局顺序：

数据过滤 + 数据统计 + 数据列表 + 批量操作

模板页面示例：

现在有了官方解答指导，我们就先从分析模仿开始

查询列表有什么？

从四个维度开始一一分析：

一、数据过滤：

常规的数据过滤分为两种类型：

1、条件筛选：

特点【结构化+有限范围】，筛选需求和数据都是结构化的，

比如有一个用户信息表，需要筛选出性别【男】+城市【北京】+年龄段【18-24岁】的用户，就是因为信息属性可以被量化和拆解处理，我们才能多条件组合筛选（且的关系）出来；

组件：选择器（单选/多选）；

布局：上下结构（常用）、左右结构，条件多时要配合可折叠操作；

形式：区域堆叠、表头、弹窗；

2、搜索查询：

特点【非结构化+模糊/精准匹配】，搜索的需求是非结构化的，

比如还是用户信息表，需要查到一个叫【宁荣荣】的信息，你就只能去手动打字去搜索，因为姓名是开放式的信息，无法被结构化处理。

组件：基础搜索框、高级搜索框；

布局：跟随列表，常放置其左上角或右上角；

关于具体使用，搜索不用多说，遵循系统统一性原则，选择一处固定位置就好，

对于B段产品，业务本身比较复杂，筛选条件偏多，原则建议从使用高低频入手，高频显性，低频置后、折叠都可（后续可以出一片详细的筛选篇分享下）

二、数据统计：

数据统计一般作为查询列表的重要配角出现，方便用户直观了解到当前页面的统计信息。

就是列表数据提炼出来统计信息，数据名称+数值，左右、上下布局都可，

有一点强调一下，业务的数据统计要求和条件筛选联动变化，就要放在条件筛选下方，

如果统计数值是固定值，就放置条件筛选上方。

三、数据列表：

这里的列表主要陈述标准的【表格Table】形式，

表格被公认为是展现数据最为清晰、高效的形式之一。

它常和排序、搜索、筛选、分页等其他元素一起协同，适用于信息的收集和展示，以及操作结构化数据，

明显优势就是结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

常规内容构成：

Header：标题、筛选（高频）、操作按钮、表搜索、icon（列设置、刷新、全屏）

Table-Header：复选框、序号、列名称、icon（排序、提示、列筛选、列搜索）

Table-Content：数据内容、按钮

Footer：多选数量，分页器

四、批量处理：

批量操作是作用于整个页面的操作，故放置与页面最底部，当然这个可以根据应用场景调整位置，

常见操作有【批量删除】【批量禁用】【批量导出】。

如何设计查询列表？

笔者也是从0开始接触B端设计，开始查阅了相关很多设计规范体系，一顿狼吞虎咽，依葫芦画瓢出了设计模板

下图就是依据Ant Design设计出的第一版查询列表模板

经过产品和研发评审，这样的布局表现虽说“五脏俱全”、“兼容性较好”，但是脱离了用户实际使用场景和交互路径，割裂感也很强，

举个例子，你准备盖一个房子，常规讲应该有有客厅、卧室、书房、厨房和卫生间五个空间，但你现在只是单纯用砖块砌了五个房间，大小一样，毫无顺序，想必你也不会这么盖···，我们现在从头开始，你是不是会考虑：

1、是不是进门应该是客厅，是不是应该大一点好接待客人；

2、书房是不是应该远离，减少噪音；

3、哪些房子需要窗户，窗户朝哪边好通风，阳光充足；

4、等等···

总结一句：我们设计出的交互操作&视觉呈现，要契合用户实际使用场景和路径，而不是自己YY。

怎么获取你想要的答案？调研和竞品分析。

调研可以向产品、销售、交付人员获取你想要的信息，

竞品分析可以找同类型产品进行优劣分析，取其精华。

下面列举调研和竞品分析的几个点说明下：

调研一

问：产品或销售登门拜访客户时，演示电脑分辨率是多少？客户使用电脑分辨率是多少？

答：多为老式笔记本电脑且分辨率偏小，1440*900、1366*768偏多。

机会点：上图数据来自百度统计-流量研究院也只能作为辅助参考，最终还是要看产品实际用户设备情况，为了保证页面内容尽可能多的展示在屏幕上，布局得紧凑，要优先适配小屏幕效果，所以设计稿尺寸得调整为1440*800（去除浏览器顶部页签+地址栏+Win任务栏高度，再取整）。

调研二

问：询问客户使用查询列表页面是否能高效的查看、处理、查找条目

答：查询查看没问题，就是一屏数据内容展示的太少，标题栏、筛选和数据统计占了太多高度，而且筛选也不常用，导出按钮在底部不明显，横向滑动很难用，看错行。

机会点：优化布局，筛选考虑折叠或者表头筛选，横向数据堆积能否换行展示，导出操作是否可以放在上方？

竞品分析：纷享销客CRM

优点：列表内容占主要视觉面积，筛选采用表头和自定义配置条件功能结合，列内容可自定义隐藏/显示/前置和列固定左侧，优先展示用户自己想看的信息，减少横向滚动条操作和提升小屏用户体验，将主动权交给用户，列表视图和分屏视图也满足了不同用户的查看需求，以上这些都是很好的优化方向。

竞品分析：广联达

优点：同样列表内容占主要视觉面积，高频筛选放出来，低频筛选采用折叠交互方式，用户有需要则点开【更多筛选】去操作，顶部有数据统计支持总揽，Table内容对于强关联的内容进行上下组合（节省横向空间），所有的操作按钮集合到右上角，方便用户定位操作。

总结一下：

以上就是笔者在调研和竞品分析上可以获取到的主要信息，虽说第一版套用AntD模板的设计并不理想，但对于初入B端行业的笔者来说着实重要，对查询列表的框架、功能、和交互有了基础指导和了解，才能有后续的一些针对特定业务场景的设计优化改版，凡事还是得现有基础理论支持，后面的路才会走的更远。

言归正传，下图就是针对上面的总结优化后的查询列表，相比第一版（可上划参考对比）变化还是挺大的，各位可以对照的优化点细细体会下：

1、取消面包屑（系统深度较浅），优化（减少）标题栏高度；

2、增加数据统计，区域板块使用分割线划分，减少割裂感；

3、页面操作按钮集合放置在右上角，主按钮统一在最右侧；

4、高频筛选常驻+表头筛选结合交互（这里其实还是有问题的，对于组合筛选操作并不易用，待优化）；

5、增加Table刷新和列设置操作（刷新和设置icon）；

6、列锁定（锁子icon）可以快速自定义设置优先左侧固定；

7、Table内容根据业务内容属性合并上下组合展示，节省横向面积（宁可上下滑动，也不要横向滑动，至少减少横向滑动的距离）；

这一版看起来整体架构层级依然清晰明确，从视觉角度看更丰富、更有节奏感，从交互来看也更符合用户的操作场景，新增了几个辅助功能，让用户可以根据自己的业务需要自定义配置列表内容，更有掌控感，能更高效的查看、处理、查找相关信息，这也是基本达到了查询列表的设计目标。

经过和产品经理沟通，此次优化思路和方向也很准确，获得了肯定，后续的迭代还需持续进行。

调研和竞品分析带来的好处想必各位也体会到了，凡是我们不了解不精通的，就去多看看多搜搜，总会有收获，站在巨人的肩膀上总会看的更远。

Ending

这次的分享是自己在探索B端道路上的小经历，同时也体会到一些更深层次的东西，比如设计的意义在哪，什么是好的设计，怎么才能做出“好”的产品，在此分享给各位，希望能给大家带来些思维上的变化，共同进步。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

前言：

入行做车载 HMI 已有 2 年余久，也该沉淀输出一些行业内容，HMI 行业还是一片蓝海，很多设计师都不敢轻易的进入这个新型的行业，觉得有难度、门槛、视觉要求高、这篇文章先带你入行，文章还是以一些 HMI 基础知识作为讲解，在设计规范方面的内容，我会添加很多干货结合实际案例讲解。

先给大家打一个预防针（规范是用来打破的，本篇文章只做为参考价值）

1. 设计规范包含什么内容

设计规范包含视觉规范和交互规范，本章节先说一下视觉规范，车载交互内容会安排在后续写作中…

2. 视觉规范：

车载端设计和移动端、web 端设计显示差别还是蛮大的，最主要的差异就在于布局的不同，接下来我们从文字、颜色、布局、圆角、图标等角度讲解，PS：偶尔还会穿插一些工作心得的内容。

文字规范：

文字是 UI 界面设计中重要的组成元素，对于文字的使用是检验设计师基础功底的时候，用得好坏会直接影响到用户在使用产品的过程中的一个体验，文字的使用从这几个纬度出发：字体选择、字号大小、颜色、字重、行高.

1. 字体选择

（我要做一个良心的博主，让你们避免侵权问题，别再傻乎乎的犯字体侵权的错误了）

在做车机系统设计的时候，需要选定该款车机中文、英文、数字或多国语言需要用什么字体。如果在乙方公司呢，客户会指定给到你字体包，插播一段小插曲（职场心得：当客户选定字体后，如果该款字体是付费字体，你得先和客户确认是否得到使用许可，避免后续官司纠纷）在甲方爸爸工作的同学一般会遇到两种情况：

• 公司已明确字体（请专业字体设计师设计一套）
• 用常规设计的字体，建议使用中文字体：思源黑体、英文/数字：Roboto。如果有做海外项目的，对于 Roboto 未涵盖的语言，建议使用 Noto Sans 字体。Noto Sans 源自类似于 Roboto 的度量标准，旨在实现视觉上和谐的国际化。

这边肯定会有人问为什么不能用苹果字体呢？它不是免费字体嘛？

普及一下：首先该车机系统属于商业用途，未得到许可使用，这就是侵权，在 app store 上 发布的 app 是可以免费使用的，因为这是在苹果生态下使用，所以不属于侵权。

2. 字号大小与字阶

车机端的字号大小的制定也是要循规蹈矩

字号肯定要远大于移动端和 web 端，为了确保文字信息的扫描性，结合了：基于 IDX & 同济 (2020) 百度 Apollo 中控视觉基础研究项目，设置清晰的文字阶级参数，还有谷歌 Android Automotive OS 研究，以下是用字的规范（标红色区域是他们之间的区别）

可参考谷歌：字体大小的遵循 4px 倍数大小增量

我们在做项目的时候，规定的字体大小维持在 4px，这样有助于保持一致性和视觉层次感

用字的注意事项：

字体大小控制在 20px，这个要谨慎使用，一般都是使用在小标签辅助类的文字上，最小的正文字号为 24px

设定文字规范有两个好处：

• 文字样式复用，不管对于设计师还是开发同学来说，都是极大提高工作效率的一件事情
• 对于界面设计来说，有规可循，避免设计时降低整体的视觉感

3. 字体用色规则

• 文字与背景颜色对比度要遵循 WCAG 的标准，需要考虑到无障碍设计需求，因此保持在 4.5:1 – 7:1 对比度，确保文字清晰易读
• 将注意力集中到最重要的区域内容
• 文本元素之间传达视觉层次感

4. 字体字重

字重是指一种字体的粗细样式，下面展示字重的种类：

上实际案列讲解：

谨慎使用中等字体粗细 ，尽量别用最粗的字体，这样会使得页面感觉差别很大，过度的不是那么自然，没有了细腻、轻盈的感觉。所以在制定字体规范的时候就尽量将 Bold 字重去掉，如果你想通过加粗字体的方式来和下面信息作为区分，请选择 Medium 字重（根据实际项目需求来定，我的规范只做参考价值）

5. 字体行高

为什么要加这一 pa，因为这个问题一直有小伙伴问到我，我就一次性解决了，文字模块需要增加安全距离，这块比较复杂。不行我后期录一期视频讲解，下文也有详细的讲解。

字体文本的高度一直困扰着设计师，我该用什么方式去对接开发？在设计过程我们是否可以使用文字字号的高度进行对齐方式，而不是使用文字区域的行高？NO 肯定是不可以的。

微信朋友圈主页作为案列：

文本的行高肯定是要大于字号的，个人动态的字号为 16px（在@1x 设计稿中）如果是多行文本的时候，微信是手动调整了文本行高（正常 Line：22px 微信实际 Line：20px），当行高为 20px 的时候，需要将文本上移 3px 才能使得图片和文本视觉在一条线上面，如果按照这个进行开发的话，开发小哥需要在 CSS 属性过程中注意图片和文本之间的实际差异，这种左右高度不一致的设计，会直接导致在开发布局过程中变得更加繁琐。

最后的结论：按照文本的行高来对接开发

普及一下小知识点：车载段落的行高一般为字号的 140%-180%的视觉呈现，提供舒适的阅读环境给到用户（取整数）

下面是一些专业性的知识 了解一下：

在设计字体过程中，字体设计师一般都会给字体预留安全距离，让字体展示更加稳定。

我们在做设计的时候，将字号设置为 30px，但实际字体的空间是需要包含上下部分的安全距离，最终实际高度就变成了 42px（Font:pingfang） 穿插一个小干货：在不同字体下相同字号，行高（Line height1）是不同的，Ant Design 的 30 号字，行高为 38px （详见配图计算方式）

颜色规范：

1. 使用场景

场景：白天阳光暴晒（阳光强度有很多档位早、中、下午） 、 梅雨季节阴雨连天 、夜晚模式、地下隧道等。

驾驶汽车在室外不确定因素会比较的多，光线强度的干扰尤其重要，照明会根据一天中的时间，天气，窗户的色调等等而有很大不同。当你设计的车载应用程序在现实世界中使用时，设计时在计算机上看到的颜色并不总是相同。考虑颜色亮度如何影响驾驶条件，以及低对比度的颜色在阳光直射下如何被洗掉。始终在多种光照条件下预览您的应用以查看颜色的显示方式。如有必要，请进行调整以便在大多数案例中提供最佳的观看体验。

最初车机厂商系统大多数都是偏爱深色背景，具有代表性的两家系统谷歌的 Android Auto 系统和苹果 Carplay 系统，我在做项目最初也是沿用了深色系。

2. 色彩中的“TF BOY”组合

我想用一句苹果的官方话说：“配色可以提供交互性，提供视觉连贯性，并且对界面赋予生命力。”这句话总结得真的非常到位。集中注意力认真听，重点来了，UI设计中颜色的使用法则，在一个页面设计中需要讲究 60-30-10法则， 在60％+30％+10％的比例下创造一种平衡感，是为了视角能够从一个焦点舒适地过渡到下一个点，避免给驾驶中的我们产生视觉落差很大的感觉。

一个项目车载系统的色彩规范，包括了品牌色、语义色、中性色。

品牌色：又称为 “强调色“ ，通常一个车载系统只有一个品牌色，也是出现频率较高的一种颜色，强调色一般使用场景为：tab 的切换选中，按钮开启状态、音乐在播放中的音符小动画等等 （拿我练习稿讲解）

语义色：语义色需要在 UI 界面中承载着具有准确的信息传达，在复杂场景里颜色的倾向性应十分明显，减少用户的理解成本和理解时间，给出行体验者带来良好的驾驶体验。

根据交通标志的定义，红色表示禁止、停止、危险，那么用户需要在第一时间识别出这种信息，黄色为警示或不良结果等，绿色则代表通行、成功，上诉说的颜色为状态色。下面要讲一下功能色：说到链接色，大家第一时间肯定想到的是蓝色。

中性色：主要用于除文字外，还被运用到背景色、分割线、置灰填充、边框、等场景中 （注：根据背景色的变化，系统其余颜色也随之而变，这是两套用色规范切换）。

3. 如何制作 HMI 色彩规范？

尽量使用较少的颜色，颜色饱和度不要过高，避免对驾驶的视觉干扰，吸引驾驶者的注意力，让老司机翻了车。

避免让交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的颜色，则很难知道在何处点击）。

保持色彩一致性（请勿使用不同的颜色来任意区分单个屏幕中的重复组件。当颜色不能增加价值时，请谨慎使用）。

建立视觉层次（通过不透明度值或者是同一色系，但不要过多的使用不透明度或对比度）。

尽量使用深色背景，这是市面上很多车厂的选择（不过蔚来、特斯拉、小鹏、carplay 都相继推出了白色版本，来适配白天，我们项目中后期也加入白天模式，经过路测在阳光很刺眼情况下，黑色会反光，无法看清显示屏幕内容），最终在实际各种照明条件下，对应用配色方案进行测试。

车载 UI 系统中使用足够色彩对比度，上述在使用场景中有所提到。

继续讲干货

(在后续文章安排里我会单独拿出 WCAG 从感知，可操作性，易于理解和稳定性去详细讲解，这次先挑重点说)

WCAG 全称是 Web Content Accessibility Guidlines（网页内容无障碍指南）它们是一组是网页内容更容易访问的建议，主要针对残疾人。一共分为三个级别 A（最低）、AA、AAA（最高）

讲个概念：两个白色的对比度是 1:1 , 白色（#FFFFFF）与黑色（#000000）的对比度为 21:1

做颜色对比的网站链接，搭梯子访问：https://next.rsuitejs.com/en/tools/palette

要满足 AAA 级准则，文本视觉呈现及文本图像至少要有 7:1 的对比度，针对大号文本以及大文本图像至少有 4.5:1 的对比度

总结：

对于颜色运用的细节，是证明了一位设计师的深度、且具备耐久力。上述内容对于颜色的规则不适用全部的设计方案，还是具体项目具体分析，用户人群不同，运用场景也不一致，比如驾驶者和后排人的屏幕设计内容肯定会有差别。还有一个点在设计需要阅读内容页面，例如：微信发来的消息、设置中文本，最好能够达到 AAA 标准。

布局规范：

HMI 的设计和其余终端设计，最大的差异就在于布局，布局是整个页面设计的框架，也是最重要的内容之一，在讲该模块内容，我会从实际项目案例出发。开始制作车载 UI 系统，需要和汽车厂商确认车载 UI 可在屏幕中，设计的尺寸区域（注：其中“屏幕”是指应用正常工作空间而不是到边缘的全部空间，有的厂商把固定按键也镶嵌这块区域中）。

1. 屏幕尺寸有多少种类别？

我们先要了解一下热门和主流车机分辨率。众所周知我们车机上的屏幕尺寸和分辨率种类可以说是种类繁多，在设计过程中设计师主要还是关注屏幕的分辨率是多少？（ 需要我们设计的屏幕为仪表盘、中控、有的车载还包含有副驾驶和后排娱乐屏幕 ）

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸为 120 像素是固定 ）Model S/X 用竖屏设计 分辨率 1200*1920

蔚来

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比较特殊，它拥有 4 块屏幕，仪表盘 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副驾驶娱乐屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鹏

G3 竖屏幕 15.6 1920×1080 P7 控屏，在目前汽车产品中属于分辨率较高的梯队 2400×1200 精度超过 2K（普及一下 2K 分辨率标准为 2048×1080 像素）

接下来给大家观看苹果的 CarPlay 系统分辨率和谷歌车载系统

CarPlay 系统分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已经找出规律了：在设计横屏的时候高度基本都为 720px，其余横屏幕按照比列缩小。

这块内容非常重要，以至于关乎到后面整个系统的布局方式，苹果的 CarPlay、谷歌 Android Auto、国内的百度 carLife+等都有自己的车载系统，如有的车企屏幕分辨率不一致，就无法适配成功，会出现拉伸等现象，除非通过定制化服务重新按照厂商的尺寸去重新搭建一套。我们项目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我们有自己的想法，后面在自适应布局中会提到。

2. 间距的规范制定

制定一组间距值，用于布局中元素和组件之间的固定纵向和横向的间距，参考规格布局 8 像素点网格上构建，这意味着规范中的 UI 组件和元素之间相隔 8px 的倍数

谷歌 Android Auto 间距规范一共制定了常用的九种数值，P0 – P8

注意事项：提供 4px、12px 间距大小，是为了对齐较小的元素之间的距离，这两个数值谨慎使用，在大屏幕车载系统内，也有很多间距需要大于 96px，因此在对于这些数值制定规范的要求就是 8px 的倍数即可使用。

说到这边肯定会有人有疑问，我们在做规范时能不能将间距不设定成 8 的倍数，4、5、6……倍数是否可行呢，当然是可以的，“规矩是死的，人是活的“。只要是按照倍数叠加完全都 OK，如果选定一种倍数，就不能加入其他倍数，如果页面出现多种间距会使得页面没有节奏感，打破了亲密性原则。

3. 车载模块中布局

这部分对于想接触车载设计同学非常友好。讲一下通用的布局，具体交互设计等待我后续更新文章，这次就简单按照 1920×720 分辨率每个模块我都会稍微带一下。

4. 自适应布局

讲完前面每个模块的大致布局，接下来我们来探讨一下自适应布局，这个真的非常非常！！！超级重要，工作后期经常会遇到这个问题，甲方爸爸后续有增加屏幕分辨率的需求。我们前期在布局上花费的时间相对较多（但后期维护起来可以减少你很多工作量，前期需要你规划好基础框架）

下面拿实际做过的案列来陈述：抛出一个问题，我们如何将分辨率1920×720页面的内容转变成1280×720 呢？

（有同学说，直接丢开发然后他们写自适应布局）导航相关页面需要调用地图的接口，这个开发是可以直接去写自适应，但其余元素还是需设计师重新来排版。

（还有人说直接缩放比列，调整页面布局）这个方案在比例相差很大的时候是行不通的，但同比例或者很相近是完全 OK 的，正巧我们项目上有 800×480 分辨率，和 1280×720 极其相似。

（还有人表示不服：折叠某块区域内容，将该区域内容做成 icon 点击后弹出来）该方法可以使用在部分内容。

有的模块内容没法降低层级，这个办法就不行，遇到这类的情况我们就直接将这块内容适配做成 1280×720 尺寸。

如果前两种办法都行不通，有的内容就得需要做弹性布局控件了，例如设置页面，当中间空间很大的时候，放置到短屏中可以根据弹性布局拉伸该控件长度，拉至适配该屏幕的设计，如有需要请留言，后续弹性布局我会写一篇文章详细说明使用。

我们项目多种分辨率进行转化基本都按照这些方案推进下去的，来一句鸡汤：办法总比困难多，真的只要用心做事情，没有什么困难能难倒你的，还有不要做理想主义者，要做实践者，实践才会见真理。

不好意思，一下子说多了没收住 ，进入正题。谨慎重新改变布局 ： 第一是增加开发工作量，其次就是增加用户的学习成本，当然，屏幕是竖屏的时候则就需要重新布局，因为横宽比例变成了相反数值。（旋转屏幕大家可以去看看比亚迪的唐、汉车型）

上述的内容都是我们一步一个坑踩过来的，“且看且珍惜”。

圆角的规范

1. 如何制定圆角的大小规则

更圆的角和全圆角的使用

对主要动作和组件使用更圆的角（更大的角半径 or 全圆角），是需要重点突出的，圆形对大多数直线形状具有更大的视觉影响，如果在页面有足够空间的前提下，全圆角形式会和其他按钮做出反差，鼓励用户去点击。比如：全局消息通知按钮、电话模块中接听、挂断、下拉负一屏中的按钮等 （下方是练习稿案列）

较低的圆角和直角的使用

对于不需要 or 低强调的元素，使用较低角半径 or 0px 圆角=直角，例如：工具栏或列表可以用较小的圆角，专辑封面不需要再强调，所以直接将它降到 0px，我们项目音乐专辑大封面就用的直角，具体问题需要具体去分析，像音乐控件的外轮廓就是带圆角的，因此专辑封面在容器里面就必须带有圆角，不然设计风格则就不统一。

还有一个模块，就是在音乐分类的情况下会有很多专辑封面，我们对比一下两种方案：有圆角 or 无圆角，两张图对比下来，带有圆角的专辑封面有更明显的边缘产生了视觉差的感觉，而直角的专辑看起来就没有，不易突出，因此不太可能引起我们的注意。所以在网格布局中，圆角的效果更好

谷歌对于圆角的定义

在设定圆角规则时，需要注意一个事项：大小种类不宜太多，不然显得杂乱无章。

注意：即使应用布局是在 8dp 网格上构建的，但仍会提供 4dp 的半径大小，以帮助在较小的组件中形成元素。该值应谨慎使用，因为它不是 8dp 的倍数

总结：圆角还是直角没有对错之分，合适的才是最好的。

图标规范：

1. 图标的种类（车载图标分为应用程序图标、系统性图标）

应用程序图标

现在 HMI 的设计趋势已经去掉了应用程序图标，取而代之的是卡片化的设计方案，简单说一下卡片式设计有两大好处，第一，把学习成本降至最低，第二，增大的接触面积让驾驶时误触率也降到最低，给到用户最直观的体验就是简单易用。不过有的汽车厂商对这一块还是有需求，我们就稍微再提一下。

我自己也负责过有应用程序图标的项目，在 1920×720 中为 160px 分辨率和苹果@3x 分辨率相同 ；在相对较小的屏幕中应该按照比例同比缩小，如同 800×480 分辨率中首页中的应用程序图标为 80px，这是如何计算的呢？

项目中还有一款车型的屏幕分辨率为 1280×720，由于屏幕变窄，应用程序图标需要缩小到 120px，高度 720 and 480 有一个共同 240 的倍数，所以最终小屏幕的应用程序图标为 80px，圆角大小也随之而变：R：24/18/12。其余分辨率按照实际情况使用。

系统性图标（后续 HMI 组件库搭建文章中我会详细的讲解）

该系统提供了许多小图标（代表常见任务和内容类型），供导航栏和选项卡栏中使用。最好尽可能使用这些内置图标，因为它们是人们熟悉的。

2. 图标的尺寸

大厂是如何制定图标尺寸

很多博主在讲到图标尺寸的时候都是一笔带过，拿着别人得出的结论，却没说怎么计算出来，对于车载来说，前期发布这些研究报告的内容极少，所以我对图标的计算想找到了计算方式，如果大家想知道怎么换算的话可以查看：https://zhuanlan.zhihu.com/p/158099749

根据百度 IDX 驾驶体验中心，在对于《车载 HMI 界面效果客观指标实验报告》在基于视距为 50cm，计算出最小图标为 9mm 推荐使用 12mm。视觉上的 1cm 的实际像素是多少呢？这就是一个错误的想法，上面文章中也有提到屏幕分辨率无法与物理长度单位进行转换，（实际项目工作经验告诉我，因为相同的屏幕大小但是分辨率不一样，所以得出的结果不能共用）

PPI 的计算

我就大概讲一下计算原理，这个根据屏幕的分辨率，我做过一款相同屏幕尺寸的车机，都是 8 寸屏幕，但分辨率一个为 1280×720，另外一个则为 800×480，每一个格子为一个像素。

最小图标尺寸计算

接下来找一下分辨率 1280×720 最大公约数为 80，最后得出结论屏幕的比列 16:9

两边比例的平方相加 = 屏幕英寸的平方

根据勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的结果为 0.4357

16:9 的 8 英寸屏幕 长度（单位：英寸）=0.4357×16 =6.9712 宽 =0.4357×9=3.9213

国际计算单位 1 英寸 = 2.54cm

所得出屏幕的长度（单位：厘米）=6.9712×2.54≈17.7cm 宽 =3.9213×2.54≈9.96cm

分辨率：1280×720 宽度约等于 10cm 来计算，720/10 = 72px

分辨率：800×480 由于他们屏幕大小一致（英寸）480/10=48px

得出结论：视觉上的 1cm 的实际像素是有所差距的。

按照设计规则：按 4 的倍数来制定，因此最小图标为 40px（这个结论只是作为推荐使用，在做项目的时候，变数有很多，甲方爸爸就喜欢超级大的，你也没办法，所以还是按照项目来制定）

为了计算这个我还特地的回顾了高中学习的开根号、初中的最大公约数都搬出来了，幸好当时数学还算是个小学霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 图标大小规范

基础的图标：主图标：44px 次要图标：36px 第三方图标：24px

头像的使用：小头像：56px 中头像：76px 大头像：96px

百度车载生态开放平台下载了他们组件库，进行了研究。

基础为图标：48px 次要图标 40px（最小图标尺寸）

这边还要说一下，对于大图标的尺寸设定，会有很多尺寸 icon，后续我还会在输出关于车载图标详细的内容，敬请关注吧。

3. 图标的点击区域

图标触摸区域分为驾驶中使用和静止中使用

例如说驾驶中需要调节空调的内外循环，原本老车机的硬按键替换成了屏幕中的按钮，原有的硬按键已经通过长期使用有了记忆性，有触感并且操作硬按键大小适中，所以在操作中减少了操作时间，降低了危险系数。新能源汽车在设计的时候可以通过增大触摸区域降低误操作、无法点击使得驾驶员视野长时间远离方向盘的情况，研究表明视野超过 2 秒以上停留，就会存在危险。

静止使用例如：在设置页面中调节车辆设置中的属性，巡航模式、电动尾门打开百分比的调节等等。

谷歌制定触摸区域的规则

最小触摸目标尺寸为 76 x 76px，需要在单个图标设计基础上再额外增加一块触摸区域，易于驾驶中可操作，在静止使用的话，我们可以遵循苹果设计规范中最小手指触摸的区域为 44x44px

这是我根据实际项目并在车内进行路测（路测：驾驶中测试）中得出结论。

还有一种特殊情况：文字+图标组合点击区域，在 icon 很小的时候也可以考虑将文字也组合一起，增大点击区域

4. 图标设计的统一规则：

• 统一风格
• 统一光源
• 统一线条粗细
• 统一圆角/直角
• 统一倾斜角度
• 断点的距离、大小统一

5. 最后最一个小插曲：命名的规范

之前经常有小伙伴问我，落地项目的 icon 切图命名规范怎么制作？就拿我之前做的风格稿首页来说，首页音乐卡片中的“下一首”的图标如何命名。

首先分析这个 icon 在哪个页面当中 or 用在哪里，接下来就是他的属性是什么 icon 还是 button，其次就是这个 icon 代表什么，这个 icon 的大小，因为在一个系统里面会有重复功能 icon，所以是有必要增加大小（这块内容是选填项），最后在增加这个 icon 是处于什么状态下，状态分为：禁用、常态、按下、选中

最后呈现：首页_音乐_下一首_常态 ，对接开发应该是翻译成英文。

有时候英文命名也可以用缩写比如设置：setting 你直接可以写成 set icon ic button bt（如果全局使用就使用   All）

总结

听完小米的发布会，是我触动较深的一次，视频弹幕中满屏刷着““干翻特斯拉”，小米造车一诞生就背负着全民的期望，创始人雷军已经功成名就，但还是愿意押上全部的声誉和未来十年的人生，全力 all in，我心中只有敬意，祝小米早日造车成功，“干翻特斯拉”，我们设计师也愿意和这个行业赌一次，行业深耕下去，砥砺前行。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设  作者：设计界的影帝

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务