“Uber是一种非常独特的模式，没什么可以参考的产品”

——Travis Kalanick

Uber遍布全球65个国家，超过600个城市，拥有7500万用户，为很多人解决了交通不便的问题。

这个规模和增长速度是前所未有的，Uber提到这其中独特的商业模式和用户体验是驱动。

所以哪些是最重要的用户体验问题，Uber又是怎么通过科学的方式来解决这些问题的呢？

Uber用户最大的痛点-等待

-

想象一下你在凌晨2点的冬天，独自矗立在陌生城市的街头瑟瑟发抖；或者是你要参加一个重要的会议，如果Uber准时到达的话那就正好赶得上。

在这些非常紧急的情况下，人们对时间的感知是扭曲的，等一秒像是一分钟，等一分钟像是一个小时。

不仅如此，人们还会用这种扭曲的等待时间来评价整体用户体验，为什么会这样？这就用到一条心理学原则叫“峰终定律”（peakend rule).

隐藏在“难以忘怀的用户体验”背后的科学

-

Image via UI Patterns.com

峰终定律指的是人们基于最高峰体验和最终体验来评价整体体验，而不是在这段体验中的平均感受，这个定律对好体验和坏体验是通用的。

对品牌来说，顾客会深刻记住这两个点：最坏（或最好）的体验、最后的体验。

Photo by why kei on Unsplash

好体验对“等待时间”的要求是非常苛刻的，这也是用户给出好评的关键点，Uber花了无数时间来解决这个痛点，这就是Uber决定要应用心理学来完善用户体验的原因。

在这份调查中，Uber发现了3个关键原则，可以解决“等待时间”这个痛点：厌恶无聊，操作透明化，目标趋近效应。

1.厌恶无聊

-

“人们讨厌无所事事，他们需要一个原因忙起来”

——researcher Chris Hsee

Photo by Fabrizio Verrecchia on Unsplash

最近对心理学、幸福和用户体验的研究，揭示出一个原则，就是“厌恶无聊”，指的是人们在忙碌时感到更快乐，即使他们是被迫忙碌。

如何应用这一原则？

可以让用户参与读取信息、游戏化和增加视觉效果等方式，让用户保持忙碌的状态。

像下面Uber采用的方式，他们利用一个动画来愉悦用户，同时实时告诉你等待时间。

Uber Blog Australia

2.操作透明化

-

“当用户从我们为他们创造价值的过程中分离时，他们会感觉我们没有全力以赴。

这时候他们较少重视或肯定我们的服务。”

——Ryan Buell，哈佛商学院

Photo by Sitraka Rakotoarivelo on Unsplash

操作透明化是一种能让用户看到公司如何运营操作的直接方式，这样用户就能看到我们在整个过程中付出了多少努力。

根据最新的研究发现，操作透明化会让用户对产品的价值评价更高，让人们感觉更好。

如何应用操作透明化？

及时告知用户，让关键信息可见，还要帮用户理解信息来源。

在下面Uber Pool的例子中，他们提供了到达时间的计算方法这一信息。通过一种简便的方式告诉用户，即使是没有任何技术基础的用户也能看懂。

Engineering at Uber（右图详细解释：我们是如何计算到达时间的）

3.目标趋近效应

-

目标趋近效应表明人们更愿意为即将达成的目标而付出努力，而不是他们已经走了多远。

Photo by Jonathan Chng on Unsplash

越接近目标，用户就越愿意采取行动更快的去完成这个目标。

如何应用目标趋近效应？

想象目标趋近效应是一条真实存在的终点线，用户越接近终点，越能鼓励他们积极行动。

你也会经常看到这个原则应用在很多交互元素上，比如进度条，填写完成度等，用即将完成来鼓励用户完成任务。

Uber通过解释幕后发生了什么来应用这一原则，他们解释过程中的每一步，让用户感觉到为了达到他们的目标正在不断的努力。

最后

-

毫无疑问，Uber很大部分的收益来自利用科学改善用户体验，最先在Uber Pool运行的增加了厌恶无聊、操作透明化、目标趋近效应的实验版本，效果非常好：

“Express POOL团队用A/B测试的方式，发现增加这些解决方案后，取消率降低了11%”

——“Uber如何大规模利用行为科学”

如果你想在产品中应用这些原则，必须要结合非常严格的测试。一个原则的应用，可能要通过上百种实现方式对比实验，才能找到最佳解决方案。

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

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

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

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

固定表头

-

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

水平滚动

-

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

调整每一列的宽度

-

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

设计表格样式

-

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

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

表格密度展示

-

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

数据可视化

-

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

分页展示

-

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

悬停展示

-

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

直接编辑

-

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

可扩展功能

-

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

快速视图

-

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

弹窗

-

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

多层弹窗

-

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

点击详情展示

-

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

可排序的列

-

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

基本筛选

-

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

列筛选

-

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

可搜索的列

-

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

添加列

-

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

可编辑的列

-

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

...

为什么表格设计很重要

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

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

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

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

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

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

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

编辑导语：有效地利用 B 端设计系统，产品设计师将可以更高效地做出更好的交互设计。那么前段时间发布的 Arco Design 设计系统，和已有的阿里 Ant Design 系统，二者有什么区别呢？本文作者对两大设计系统典型页面发表了他的看法，一起来看一下。

简介

前两周字节发布了自己的中后台设计系统 Arco Design，在仔细阅读官网文档了过后，想和大家聊聊我自己对于 Arco Design 设计系统的与阿里的 Ant design 的一些对比和差异分析。

ArcoDesign 是一套设计系统的简称，是基于字节跳动所有的中后台产品。ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现，主要由 UED 设计和开发同学共同构建及维护。

Ant Design 是阿里打磨出的一个服务于企业级产品的设计体系， 通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

总览

Ant 和 Arco 两者的前端框架都是基于 React 和 Vue，设计价值观和设计原则也有所不同。Arco Design 基于「清晰」、「一致」、「韵律」和「开放」的设计价值观，试图建立务实而浪漫的工作方式。在「设计价值观」的坚持上，Ant Design 有四点与众不同：「自然」、「确定性」、「意义感」、「生长性」。

我的个人理解 Arco Design 是站在设计规范的基础出发点考虑，希望给用户传递出来的价值出发，让用户深刻感受到系统是「清晰」、「一致」、「韵律」和「开放」的，而 Ant Design 所传递出来的价值观似乎更加玄学或者说格局更高，上升到更高的思维境界，即大自然思想和社会责任。

当然这部分的内容相对比较虚，每个人侧重点想法都不同，大家可以自己去理解一下这部分内容。

B 端典型页面分析

接下来会从工作台、表格、表单几个典型高频的 B 端界面进行分析，看看两者的差别。

1. 工作台

1）布局

Arco 的卡片列布局灵活，基于 24 栅格进行布局，将整个栅格区域 2:2:1 的比例进行分割，信息卡片的宽度根据栅格宽度进行自适应，这样的工作台页面既灵活也能够满足业务需求。

Ant 的卡片列布局采用 3:2 比例进行布局，同样是基于 24 栅格。目前主流的 B 端页面都是以 24 栅格为基础进行设计。3:2 还是 2:2:1 这两种卡片布局方式没有绝对的优劣，主要是根据我们页面的信息量以及行业属性去确定。如果工作台所展示的单个信息量较多可采用少列大宽度进行布局，满足信息展示的最优布局。

作为 B 端的工作台页面，核心诉求是能够清晰找到用户想要的信息，想要做的内容，所以我们设计师要优先保证用户能够快速定位到核心的信息，快速到达要到达的功能。

2）信息展示

Arco 针对同系列的模块设计了两种尺寸的间距，例如欢迎问候信息与下方的数据信息之间是大间距，数据信息与下方的团队动态最近项目之间是小间距。

格式塔心理学的接近原则指出：接近的事物会被认为是同一个整体，拥有相似的功能或特征。所以在这里设计师通过两种间距的留白对我们视觉进行暗示，强调信息之间的关联程度，便于区分信息层级。

Ant 在卡片方面没有为卡片间距设置两种尺寸，从上下到左右都是一种尺寸，这样做的好处可以让视觉更加对齐，显得页面更加规整，不好的一点就是内容区域外间距与卡片之间的间距一样宽视觉上并没有聚焦，显得内容区域很散。标题方面没有进行加粗重色强调，将内容进行突出，使用户更加聚焦于内容。

3）导航方式

两个系统默认都采用侧边栏导航方式，侧边导航在国内的 B 端产品当中最为常见的。将菜单栏放置在左侧，页面布局上基本为左右结构，将导航菜单放置左侧固定。侧边栏导航扩展性强、展示灵活、能够快速定位，缺点是不易阅读、阅读沉浸感低。

Arco 导航区域与内容区域都使用同类浅色，采用线的方式进行分割，整体视觉比较清爽。Ant 导航区域使用了传统的重色与内容区进行区分。

目前的设计趋势流行浅色导航，有几个产品的 WEB 端进行了一系列的大改，YouTube、Twitch、Twitter 都进行了重新设计，他们不约而同地将块面去除，去掉多余的的灰色，通过留白和空间将页面拉开。这否是下一个 WEB 端所要追寻的趋势，我还不得而知，但是对于导航层级多的侧边栏导航，我仍然建议使用深色背景区分导航栏。

有一个细节，在页面背景有一个以登录的用户名形成的一个背景水印，在 B 端的页面中，对信息的保密程度要求很高，这里是为了防止公司核心数据资料泄露，在截图的时候会有水印的存在，增强了信息的保密级别，这是一个很好的设计洞察点。

2. 表格

1）表格样式

表格作为组织整理数据的手段，可以有效地向用户展示数据信息，是 B 端产品中出现最高频的模块之一。

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化（关联和区别）。好的表格信息展示设计，应当是能够辅助用户高效便捷地实现以上场景中的诉求。

Arco 和 Ant 的表格设计样式与市面上多数产品都类似，采用表格列无分割线条、表头与内容左对齐、数字右对齐的方式。

合格的表格设计要定义合理的表格行高，在具体设定表格行高时，由于表格中以文字信息为主，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑。

文字行高可以设定为字号的 1.2~1.8 倍，文字与分割线间距离可以设定为字号的 1~1.5 倍。

2）信息展示

表格行高决定屏幕内能呈现的行数，即用户在一屏内能获取信息的数量，主要影响用户纵向对比数据的效率。

在 B 端用户使用场景中，数据量极大的表格的展示问题是体验优劣的关键因素。对于 1920*1020（包含该分辨率）以上的大屏用户，对于一屏显示行数的感知不强，但对于 1366×768、1280*720 等这类小屏，显示行数有限，用户进行纵向数据对比的效率就会有所降低。在设计前，应当充分了解目标用户的行为诉求，了解目标用户设备屏幕分辨率的占比分布情况，有针对性的设置行高。

B 端产品的特点之一是通用化，覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户，建议不是完全开放给用户去调整尺寸，而是给出一定阶梯度的快速选项，例如舒适、标准、紧凑三种高度来满足用户需求。

Ant 的表格功能很齐全，很多功能都是 B 端产品的痛点，例如表格可以通过调整单元格行高来调整密度，紧凑模式下可以显示更多的数据。

3）操作路径

作为一个查询表格，我不是很理解为什么 Arco 将查询条件放置在表格右上角这么隐秘的位置，而将明显的左上角放一个添加按钮，如果存在多个查询条件是不是要从右往左放置呢？这里我不是很理解，大家也可以说一下自己的想法，相互探讨一下。

Ant 的表格使用路径符合 F 型视觉动线布局，在 B 端的市场中这种表格的设计方式已经符合用户的操作习惯了。

在 2006 年时候，尼尔森诺曼发表了一篇人们如何扫描和阅读网站习惯的分享，他们通过研究发现，用户倾向于一种 F 模式去查看网站。F 模式，能很好地帮我们创建好的视觉层次结构设计，因为这是人们可以轻松扫描设计一种布局，它能让大多数用户感到舒适，因为我们用户一直从上到下，从左到右阅读。

在设计之前，我们先要去确定哪些内容最重要，明确信息的优先级，只有清楚知道你希望用户看到什么，才能将它们放在用户视线热点中。

个人认为在表格设计的完整度和设计的合理性方面来看，阿里的 Ant 系统做得比字节的 Arco 更好。

3. 表单

表单在界面中主要负责数据采集的功能，任何一个表单都可以被拆解成三个最基本要素：

标签（标题）、输入框和按钮。

1）表单布局

Arco 的表单属于复杂表单，当表单条目数在 7 个以上，可归类到复杂表单，这时候就需要根据表单的复杂度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，降低表单填写负荷。采用 3 列布局，便签与文本框上下左对齐，这样的对齐方式有利于用户浏览的效率、对齐的美观以及国际化拓展页面的对齐问题。

Ant 的表单也是较为常规的布局方式，有一点差异就是文本框并没有右对齐，这里阿里自己也做出了解释：文本框是根据需要填写的字段进行长度展示的，需要填写内容比较长的文本框就会比较长。实际业务中，大部分 input 所需填写内容都存在理想长度，input 的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

2）标签对齐方式

Arco 和 Ant 都使用了顶标签的形式对齐。

标签分为左标签、右标签、顶标签三种，不同的对齐方式，使用场景不同。

该如何选择呢？我们需要从 3 个方面进行考虑：操作效率、标签长度、屏效、视觉对齐。

① 操作效率

根据 Matteo Penzo 的研究总结得到的浏览时间表发现，标签移动到输入框的时间，顶部对齐最快只要 50ms，其次是右对齐 240ms，左对齐耗费时间最长 500ms。

因此当以操作效率为主时，推荐使用顶对齐的方式。

② 标签长度

当标签长度超过 8 个字，或者需要考虑中英文双版本时，推荐使用顶对齐的方式，其容纳的标签文字更多，拓展性更好，比如 Ones 的建任务的标签，就采用标签顶对齐的方式：

③ 屏效

如果只考虑屏效，那么标签左对齐右对齐均可，但是如果还考虑表单录入效率，那么推荐使用标签右对齐的方式，比如蜂鸟汇报：

颜色主题配置

Arco 的颜色主题配置可以说是让人眼前一亮了，可调整的范围非常广非常牛逼。可以编辑的维度从基础的颜色、字体、阴影、 到组件的按钮、导航、分类、表格 一共有接近 40 款组件的样式，并且都是可以进行可视化编辑与实时预览的。

如果你用了 Arco 过后，或许不用苦苦地站在前端后面，让他帮忙调整页面，作为设计师自己就能够搞定，并且每一个组件可以调整的粒度是非常之细，包含各种宽度、图标大小、颜色、投影，等等…在这里可以编辑自己的主题，也可以在商城社区查看到别人发布的主题，真的是很方便啊。

真的有些 amazing！假如你需要去设计一套官方的设计系统，完全可以通过 Arco 进行设计和预览、落地。

Ant 并没有做这方面的功能，颜色主题配置这一块确实是 Arco 很大的亮点。

总结

无论是 Arco Design 还是 Ant Design 设计系统，都代表了字节跳动和阿里两家互联网巨头公司在 B 端领域的沉淀和竞争。对于 B 端交互设计师来说，两个设计系统都值得我们去研究和学习，建议大家都去看看设计规范里面的内容，对于我们认识和熟悉控件以及和开发对接都很有帮助。

文章来源：优设 作者：哄哄
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

对于大多数网页设计师来说，你的成品需要在各种类型和尺寸的设备上进行外观和工作，这是显而易见的。创建多个设计来实现同一目标的日子已经一去不复返了。

这一切都归结为选择响应式或自适应设计模型，以实现任何规模的一致网站设计。

但是响应式和自适应之间有什么区别？它们真的只是一回事吗？让我们来看看并解释你需要知道的一切。喜欢记得关注UI范，每天更新，打造你的知识武器库！

1.与设备无关的设计的两种方法

2.响应式设计

现在比以往任何时候都更重要的是，我们正在设计旨在沿着不同体验的梯度观看的作品。响应式网页设计为我们提供了一条前进的道路，最终让我们能够“为事物的潮起潮落而设计”。

而这正是我们目前关于响应式网站的思想学派的起点。

• 无论设备或浏览器如何，该设计都适用于任何视口尺寸。

• 响应式设计对搜索引擎友好（谷歌甚至推荐它）。

• 允许设计中的很多精确度，以便设计师可以调整任何或每一个细节。

• 高度移动友好的设计选项。

• 与你可能用于网站项目的大量主题、网站构建器和工具兼容的常见设计实践。

• 该设计将具有统一和无缝的外观，这将提升整体用户体验。

• 确保响应式元素在不同尺寸（尤其是较小尺寸）下仍保持可读性和可访问性非常重要。
• 通常需要比其他网站更多的编码，这可能需要时间或导致重量。重要的是要注意并注意这里。
• 你无法控制所有设备尺寸，最终可能会设计出与旧尺寸或更模糊尺寸不符的设计。
• 元素可能会在你身上四处移动，并不时以奇怪的位置结束，甚至由于核心内容管理系统或网站框架更新，因此重要的是要随时了解变化。

• 320 像素

• 480 像素

• 760 像素

• 960 像素

• 1,200 像素

• 1,600 像素

自适应设计最常见的用途是将旧设计转换为更适合移动设备的设计。这并不是说它不会发生在新的开发中。

5.自适应设计的优点

• 移动设备会告诉设计它们是什么，以便设计非常适合该设备和浏览器类型。
• 自适应设计在事物的设计方面提供了几乎精确的控制。
• 智能广告是一种可能性，允许来自智能设备的链接。
• 自适应设计在速度测试中的得分往往高于响应式设计。
• 该设计可以使用更多的个性化功能，连接到智能设备的使用选项和适配。
• 对于需要刷新的小型网站来说是不错的选择，因为你只需“设计”较小的尺寸。

• 由于配置错误，您在设计时可能会遇到一些不太常见的设备（例如平板电脑）的问题。

• 自适应设计可能是劳动密集型的，需要更多的开发时间和成本。

• 由于内容重复，搜索引擎在使用自适应网站时会遇到更多困难。

• 有一个偷偷摸摸的现实，你设计同一个网站六次。
  

文章来源：站酷 作者：UI范

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

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

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

编者按：资深产品设计师 Taras Savytskyi 将自己在初创团队中的设计经验浓缩成为今天的这篇文章，如果你也是设计团队中唯一或者主要的设计负责人，需要考虑到设计系统的问题，那么这篇文章的6个总结，应该能够给你不少帮助：

成为公司当中唯一负责产品设计的设计师，其实并不是一件容易的事情。你可能会非常忙碌，因为你需要处理很多事情。你需要考虑产品的设计，交付物料，和研发人员协作，在沟通会上做QA，做用户访谈等等。

此外，你可能还需要保持你的设计技能持续精进。比如 Figma 或者 Sketch 更新了新的功能，推出了新的插件，你可能需要持续关注。我们通常会使用 Figma 来作为主要的设计和协同工具，所有的设计、探索、头脑风暴都在其中完成。

我加入 Statflo 之后不久，作为公司唯一的设计师，我需要设计一个全新的 APP，在这个过程中我需要设计一个全新的设计系统，帮我足够快速地创建后续的原型。

1、无需犹豫，直接基于现有的开源设计系统

刚开始的时候，你不需要太多的素材。你可以直接调用绝大多数的原子组件，比如按钮、下拉菜单、表单、字体、配色，等等。默认初始状态的样式无关紧要，因为后续点击几下就能够快速调整样式。

但是这也意味着，你需要在第三方设计系统当中，找到重要的、足够灵活的、合适的组件来套用。你可以从下面几个设计系统开始着手：

免费： Ant Design Open Source, Lexicon DSL

付费：Tetrisly , Venus Design System，73px

2、主要关注基础组件、颜色和排版

在此之后，你如果要继续推进你的设计系统，你需要首先关注几件简单的事情：配色、排版和基础组件。

完成这几个部分能够帮你更快地完成整个体系的搭建。比如你预设了不同状态的配色，那么当你完成某个UI组件的默认状态的设计之后，可以快速添加其他状态的样式。

又比如，如果你不确定在输入字段当中使用什么图标，那么你只需要创建一个 16×16 的正方形，使用灰色填充，作为占位符，等后续图标素材确定之后，再填充进去就好了。

3、总是从一个组件开始设计

当你是初创团队中唯一的设计师的时候，你有很大概率需要自己构建一套设计系统。如果你想在这件事情上节省时间，那么最好的方法，就从你当前正在做的这一个 UI 组件开始，将其中所有的元素转化为固定的组件，逐步拓展出设计系统。

以这种方式来执行，可以节省大量的时间，并且这种方式能够帮你更快明确哪些元素在一开始可能就是重要的。

在理想情况下，你的设计流程是绘制小元素，然后逐步组件成为你所需要的组件，这样的处理机制让你无需花费时间来反复更新组件的设计。

4、使用 Figma 当中的「Master」插件

不过，以这种方式来创建设计系统的时候，你可能会碰到一个问题：你可能会忙于设计，而忘记将创建特定的组件，相反可能会复制一堆完全相同的画板。这个时候，手动撤销操作可能是一件极度麻烦和无聊的事情。这个时候，你就需要一个专门解决这种问题，这个插件名为 Master，创建者是 Gleb Sabirzyanov，它可以帮你将这些重复的画板转化成为一个固定的组件。

但是这还不够。如果你执行的操作足够多，这些你所复制的元素可能已经应用多个画板和页面当中，这个时候，你需要借助名为 The Similayer 的插件，来帮你搞定相似组件的识别问题：它可以一键识别出分散在各处相同的元素，然后你可以将他们转化成你所指定的 UI 组件了。

5、利用项目间歇来完善设计系统

有时候项目和项目之间是有间隔时间的，这个时间段就特别适合你去覆盘之前设计的组件，将其逐步改进融合成为一个系统。相信我，你在这件事情上所花费的时间，将会在你下一次创建新的功能和组件或者原型的时候，得到回报。

我一直试图在自己每周的日程表当中，腾出几个小时的时间专门来做这件事情，帮我完成我的设计系统的增量更新和迭代。

6、一开始不要纠结于正确命名

在创建设计系统的过程中，尤其是当你在不同的项目过程中，各种组件总是没法正确的命名。根据我的经验，在设计的时候，怎么命名方便怎么来其实是很合理的，一开始一定不要纠结，留着在后面的阶段再行解决都好，之后单独梳理命名、路径、结构、嵌套等等关系，比起你一开始做某个小组件的时候就纠结这些事情要更加合理，也更加方便。

字体图标，完善字体系统

图标在 UI 中扮演着重要的角色，并且已被证明是过去几十年 UI 设计趋势的象征。在图形用户界面的发展早期，图标在计算机的显示技术限制内尽可能仔细地模仿现实世界的物体；它们旨在将用户体验从现实世界链接到计算机世界。这可以从苏珊·卡尔 (Susan Kare)为第一台麦金塔 (Macintosh) 设计的图标和微软 (Microsoft) 在 Windows Vista 和 7 中的拟物图标设计中看到。

当用户界面从这种拟物风格转变为 Windows 8 和 iOS 7 的“扁平”风格时，图标设计也转变为单色、线性风格。随着 Android 12 的发布和谷歌新版设计系统—— Material You (或 Material Design 3) , 所有主要操作系统现在都使用这种风格。

但是为什么各大设计系统都使用这种风格的图标呢？设计师意识到图标不仅仅是风格统一、为功能补充说明的辅助图形——设计师制作的图标等同于印刷师制作的字体。 这让设计师意识到图标对于用户体验来说和字体一样重要。

图标的设计考虑与字体类似，并且经常出现在文本旁边。
— Material Design 3 指南

Iconography [旨在] 与 San Francisco 系统字体无缝集成。
— Apple 人机界面指南

Apple 的 SF Symbols 就是最好的例子：它的图标与系统字体具有相同的九种权重，并与文本的大写高度对齐。这也意味着图标可以遵从用户对更粗的 UI 文本的可访问性设置。

Apple 的 SF Symbols 图标集设计为与系统字体相同的九种权重。资料来源：苹果

它们还与系统字体的大写高度对齐，以更好地补充文本。资料来源：苹果

Uber 的设计团队也绘制了字体图标来完善他们的 UI 字体 Uber Move，设置了三种不同的强调程度。

资料来源：优步

字体图标旨在模仿书写系统

因此，为什么字体图标是单色的并用轮廓绘制的原因就很清楚了：它们不是模仿物理对象，而是模仿我们的书写系统。现代字母，尤其是拉丁字母，基本上是由线条而不是填充形状组成的。他们从类似物理对象（如埃及象形文字）的象形文字到更抽象的物理对象表示进行了类似的转变。例如，你不需要画一只鸟来谈论一只鸟；您只需写一组表示“鸟”的字母或符号即可。

通过设计类似于字体的图标，设计师认识到图标是向用户传达信息的重要媒介。图标可以打破语言障碍，而文本对于那些不熟悉图标的人来说仍然是必不可少的。将两者设计为看起来相似可以减少在阅读文本旁边的图标时的认知负担。

默认为字体图标的另一个好处是填充的图标现在可用于表示状态或强调，如粗体文本。例如，Material Design 3 中的“活动状态用填充图标表示” ，Apple 在他们的人机界面指南中建议“使用填充变体来表示选择”或“赋予符号更多视觉强调” 。Twitter 2021 年的重新设计更进一步，活动页面仅通过填充图标和粗体文本进行区分，没有任何颜色变化。

Twitter 仅使用填充图标和粗体文本来区分当前页面。陪审团仍然不确定这是否足够容易访问。

未来不一定能够被准确预测，但是看看字体系统的历史，已经有了明确的关于什么图形代表什么意思的规范：符号“a”总是表示“a”，字母“ant”表示蚂蚁。这些符号的绘制方式仍然存在差异（大写字母 A 可以有衬线或没有衬线），但它们在不同字体中的外观基本相同。

图标似乎也朝着这个方向发展——上面的“添加文件夹”图标在苹果、谷歌和微软的图标集上具基本相同的设计：一个带有“+”符号的文件夹。随着图标在 GUI 中变得越来越普遍，用户对于什么符号代表什么意思的认知越来越趋同，就像字体一样。

如何才能使用字体图标？在您的应用程序中使用图标时，您应该使用使用您正在使用的字体设计的图标集：如果您使用的是系统字体，这很简单，现在系统字体都具有系统图标字体。但是，如果您使用另一种 UI 字体，则可能没有专门为该字体设计的图标集。使用普通的线性图标集就足够了，例如开源Feather 图标或Iconic.app「1」。如果你像我们一样使用 Material 图标，你可以轻松切换到字体图标。（似乎 Google 现在已将此样式作为 Material Design 3 的默认样式。）

基于壁纸的个性化

个性化正在成为 UI 设计中越来越重要的元素。虽然自 20 世纪 90 年代以来就存在自定义壁纸和主题，但设计人员现在正在寻找更多方法来个性化整个系统的 UI，主要是用户选择的壁纸。谷歌的 Material Design 博客说得最好：“用户在物理和数字世界中使用个性化的图像定制他们的桌面，并提供舒适和快乐。” 壁纸是用户首先看到的东西，并作为 UI 的背景。因此，让 UI 的其余部分适应此元素是轻而易举的事。

将壁纸融入 UI 的技术已经存在一段时间了，从 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜单到 Windows Vista 中的半透明窗口标题栏和 7 的 Aero Glass 主题。众所周知，iOS 7 为其 UI 的许多部分带来了模糊的背景，整个屏幕（如通知中心和控制中心）都使用了可以透出用户壁纸的毛玻璃效果。

最近，墙纸开始影响几乎整个 UI。当 Apple 在 macOS Mojave 中引入暗模式时，他们在基于壁纸的窗口背景中加入了一种色调，称为桌面色调。根据人机界面指南，它“帮助窗口与其周围的内容更和谐地融合在一起。”

后来他们在 Big Sur 的主要重新设计中扩展了这一点，将桌面着色也应用于光照模式：

Windows 11 在其 Mica material 设计系统中引入了类似的元素，他们的设计指南将其描述为“一种不透明的材料，它结合了用户的主题和桌面壁纸，以创建其高度个性化的外观。” 它还使用此色调作为当前活动窗口的标志。

将它提升到一个新的水平是 Android 12 中的 Material You，它为应用程序的背景、按钮和其他控件的明亮强调色以及更中性的文本颜色着色。整个调色板由每个用户的独特壁纸生成。

这是他们新设计理念的一个关键元素，“如果形式跟随感觉，而不是形式跟随功能呢？” 这是对 UI 设计现状的彻底拒绝，它寻求一种“通用”设计，具有技术上最先进的界面来满足用户需求。看看其他人是否效仿这种哲学会很有趣。

Material Design 构建了一个颜色系统

Material Design 团队在他们的公告中遗漏的是他们如何做到了这一点，尤其是因为他们说他们“必须找到一种方法，让任何颜色组合都具有可访问的对比度 [...]，而无需对每一种颜色进行测试。”深入了解 GitHub 上最近发布的Material color 实用程序存储库，揭开所有谜团：

1. Material 团队基于CAM16和CIELAB（或 LAB）颜色外观模型构建了自己的颜色系统：“色调、色度、色调”或“HCT” 。CAM16 是 LAB 的继任者，旨在匹配人类对颜色的感知方式。

2. 这些模型的关键是“色调”或 L* 值，它描述了颜色的感知亮度或亮度，L* 值 0 表示黑色，100 表示白色。这在创建可访问的调色板时非常有用，可确保颜色根据感知亮度具有足够的对比度。

3. 在网络上，WCAG 2 指南规定正文的最小对比度为 4.5:1。直接使用感知亮度作为描述颜色的值使这变得更加直接，正如材料团队解释的那样：“与对比度不同，测量 L* 中的对比度是线性的，并且计算简单 [...] 50 的差异保证了对比度比率 >= 4.5。”

4. 有了这些知识，剩下的就是生成具有不同色调或 L* 值的颜色调色板，并对其应用任何色调。然后为 UI 元素使用足够对比的对。例如，一个按钮可以有一个 L* = 40 的背景色和白色文本 (L* = 100)，它很容易通过最低对比度要求（L* 差异 > 50）。

我们其他人的 LCH

这是一种轻松生成可访问颜色的强大技术，但它不需要材质颜色实用程序。LAB 可以表示为 LCH（亮度、色度、色调），类似于 Material 的 HCT，其中 L 值可以用来计算对比度。（这比现有的 HSL 等表示更好，即使亮度值相同，HSL 的感知亮度也会有所不同。）您可以在本文中了解有关 LCH 的更多信息。

（此外，LCH 正在作为 CSS Color Level 4 的 一部分进入 Web 标准！因此您可以 lch (40% 44 49) 在 CSS 中编写而无需将其转换为 HSL 或 RGB，但目前仅在 Safari 中支持。Lea Verou，他编写了上面链接的文章是 W3C CSS 工作组的一部分，正在开发这个非常标准。）

因此，您只需要一个起始颜色，将其转换为 LCH，然后修改 L 值以制作调色板。然后使用一对亮度差为 50 或更多的颜色，以确保可获得的对比度。

我们可以在下面的材质颜色系统中看到这种技术是如何使用的：调色板中的色调与 LCH 亮度值相匹配。（他们还修改色度（类似于饱和度）和色调略微跨色调。）我制作了一个小型网络应用程序，显示由材料颜色实用程序生成的调色板，以获得下面的 LCH 值。

在 Material 的 HCT 之前，Lyft和Stripe的设计团队探索了同样的问题，Stripe 也最终使用了 LCH。我已经将他们的两个探索联系起来，这是极好的阅读。

我怎样才能做到这一点？

有一些工具可以在 LCH 之间进行转换：

• Lea Verou 制作了一个LCH 颜色选择器，

• 在Colord网站可以让你从LCH转换为十六进制或RGB，

• 如果您有 Mac，Sindre Sorhus 的System Color Picker非常棒，而且

• Accessible Palette使用 LAB/LCH 生成调色板。

我使用这种技术为Rowy添加主题，允许用户选择自己的强调色，同时保持可访问性并为关键 UI 元素着色。源代码具有我使用的确切 LCH 值。

圆角很和谐

当你想要设计一个带圆角的“卡片套卡片” UI 时，内部的卡片应该具有较小的半径，区别在于间距的大小。如果使两者的角半径相等，则内部卡片看起来不合适。这种技术在数字设计中已经有一段时间了，甚至是 CSS3 规范的一部分。

这也存在于硬件设计中：屏幕的圆角与iPad Pro和 iPhone X 设计上的设备框架相匹配。在带有圆形屏幕的 iPhone 上，底座与屏幕的曲率相匹配——Apple 甚至在软件中提供了精确的点大小。您还可以在视频播放器中看到与屏幕曲率匹配的其他元素。

奇怪的是，这个原则不适用于使用单个圆角半径的 UI 元素。在 Material Design 2 中，对话框和内部按钮的圆角半径都是 4dp，尽管它们之间有 8dp的间隙。macOS 在优胜美地时代的设计中类似，Windows 10 几乎所有 UI 元素都使用方角。

但是，对于 Big Sur 和 Windows 11，通过增加较大 UI 元素的角半径来近似这种效果。在 macOS 中，按钮的圆角半径现在为 5pt，对话框窗口的圆角半径为 10pt，而且它们都使用“平滑角”来匹配 Apple 硬件的角。与此同时，Windows 11 以圆角以前的尖角而闻名，按钮为 4 像素，窗口为 8 像素。

总体而言，用户界面似乎也变得更加圆润：

• Big Sur 增加了圆角半径，使用了平滑的圆角，看起来更圆润；

• iOS 15 引入了带有全圆角的按钮样式；

• Windows 11 移除了大多数 UI 元素上的尖角；和

• 与之前所有版本的 Material Design 形成鲜明对比的是，Android 12 增加了对话框、导航抽屉和完全圆角按钮的半径。

我怎样才能做到这一点？

将最小的 UI 元素设置为某个基本圆角半径，然后将较大的包含元素（如对话框）设置为更大的圆角半径。尝试使它们与较小元素之间的距离成比例，或将较小的角半径加倍以进行简化。这是它在我们的应用程序中的外观，角半径加倍：

OpenType可变字体

最初开发字体时，它们是用金属蚀刻的物理设计，具有固定的字体大小。当排版师为不同的尺寸设计相同的字体时，他们通过改变间距和比例等方面来将设计修改为最佳：这被称为光学尺寸。您可以在本文中了解有关光学尺寸的更多信息。

可变字体是一种基于 OpenType 的新字体格式，允许设计人员自定义字体设计的特定“变化轴”（或变量），例如非固定粗细、倾斜和光学尺寸。您可以在这个优秀的可变字体入门 中了解有关可变字体的更多信息，它使用Roboto Flex，这是谷歌 Roboto 字体的可变字体扩展。

2021 年，所有主要操作系统现在都使用这种可变字体技术来实现 UI 排版中的光学大小：

• Apple 的系统字体 San Francisco于 2015年发布，具有两种光学尺寸：“显示”适用于 20 磅及更大的尺寸，“文本”适用于所有更小的尺寸。2020 年，Apple 将这些字体发布为单一可变字体 SF Pro，以光学尺寸作为变化轴。Apple 的系统图标 SF Symbols也使用可变字体技术。

• 对于 Windows 11，微软将其系统字体 Segoe UI 重新设计为Segoe UI Variable，具有自己的光学大小轴。

• 作为 Material Design 3 的一部分，Google 引入了GS Text 和 GS Variable，这是其企业字体 Google Sans 的演变。

另外值得注意的是：这些字体都是不同风格的无衬线字体。旧金山是新怪诞的，Segoe是人文主义者，而Google Sans是几何的。

我怎样才能做到这一点？

可变字体是一项相对较新的技术，生产它们的成本很高，所以资源没有那么多，尤其是在免费和开源领域。到目前为止，我发现的唯一具有光学尺寸的开源可变字体是Roboto Flex，但它似乎还没有完成。Rasmus Andersson 被广泛使用的 Inter 字体正在进行 OpenType 的 Bata测试。同时，为突出的标题使用更具表现力的字体可以提升您的设计。对于Rowy，我在小文本中使用 Inter 作为字体，在品牌表达的标题中使用 Space Grotesk。

专注于内容

扁平化设计已经存在了十多年，它的主要目标是通过剥离 UI 元素的杂乱和装饰来专注于内容。在iOS的15设计指南状态，“明快，漂亮的界面帮助用户了解内容以及互动。”

最新的操作系统版本通过更少的层级来迭代这个概念。导航栏在iOS 15和Android 12 中是透明的，并在您滚动之前融入背景。

在桌面上，macOS Big Sur 混合了标题栏和工具栏，直到您滚动或悬停在栏上几秒钟。Windows 11 中的一些应用程序根本不区分标题栏，而是将内容放在一个独特的卡片式层中。

这些元素都实现了相同的目标：减少周围的视觉混乱并提升内容的视觉突出度。

我怎样才能做到这一点？

如果您有一个停靠在边缘的导航栏，请在不需要区分时将其混合到背景中，例如当用户尚未滚动时。如果您有主要内容，请将其放置在与背景不同的微妙层中。我们使用了一个 React UI 库 MUI，它使我们可以轻松实现导航栏仅在滚动时区分的效果：

插入一切

同样，更多的 UI 元素被插入，不再占据其容器的整个宽度。当 iPhone X 引入屏幕上的主页指示器代替主页按钮时，Apple 更改了他们的指导方针，规定带有圆角的嵌入式按钮，避开iOS 7 中引入的全角按钮。许多其他固定到的元素的最佳实践已更改屏幕底部适应新的 iPhone 设计。

在 iOS 15 中，Apple 正在更多应用程序（如“设置”和“邮件”）中插入“表格视图”。这似乎是为了应对 iPhone 屏幕尺寸不断增长的情况，指南指出，“在紧凑的环境中，插入的分组表格可能会导致文本换行，尤其是在内容本地化时。”

在 macOS Big Sur 中，他们将此设计扩展到邮件中的列表，与iPadOS 设计一致。它也出现在整个系统的菜单中，包括菜单栏。请注意，点击目标延伸到菜单的边缘，就像之前的全角设计一样。Windows 11 在其菜单和导航项中共享相同的样式。Android 12 的系统 UI 和应用程序通常也遵循这种风格。

这种风格可以提高可访问性，因为元素和它们的容器之间的分离现在扩展到所有四个方面，但我还没有发现任何支持这一点的研究。当搭配和谐的圆角时，它可以使菜单看起来更现代。

超越颜色的状态变化

设计师们正在添加更多的方式来显示状态，而不依赖于颜色，这对于色盲的人来说是无法实现的。以下是我注意到的一些例子：

• Spotify 在 shuffle 和 repeat 按钮下方添加了点，而不是在 2017 年仅仅依靠改变它们的颜色。

• Material Design 3 显示一个药丸状指示器，并在导航栏中为活动页面使用填充图标。

• Windows 11 向列表和导航窗格中的选定项目添加了一致、独特的行。

这决定了重新设计Rowy 的切换按钮：

以及标准的开关设计

在 Android 12 中，开关现在在主要操作系统中具有相同的基本设计。这使用户可以更轻松地在这些平台之间切换并减少认知负担。

UI设计走向何方？

我在所有这些设计决策中注意到的首要主题是设计师将用户界面设计置于透视之中。他们敏锐地意识到数字界面在哪些方面适合人类体验并与物理世界互动。

• 轮廓图标模仿文本的融合认识到图标在通信中的重要性。

• 越来越个性化的界面元素——尤其是你所采用的材料方向——承认人们喜欢用自己的方式制作东西，包括他们每天使用的技术。

• 和谐的圆角和插入元素的灵感来自实物和工业设计，因此我们的软件与硬件更紧密地匹配。

• 使用具有光学尺寸的可变字体可以追溯到排版的起源，并且与颜色以外的差异化元素一起，它们提高了所有人的可用性，尤其是残障人士。

• 更小的事情也有帮助：减少视觉混乱以提升内容使用户能够专注于他们想做的事情。并且使用标准的开关设计消除了确定 UI 元素功能所需的任何认知负担。

这种思维背后的UI设计使我们很好地起来为下一代对AR / VR计算为中心的虚拟实境，在虚拟实境一经验将不得不回答他们是如何改善人类的经验和交互与物理世界。设计人员已经在研究如何使设计系统适应这种变化。看看上面的决定，应用色彩科学（Material 的 HCT 考虑到观看条件）和提升内容的插入元素有助于这些 UI 元素从 2D 世界过渡到 3D 元世界。

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

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