/引言

“由理有剧”系列以”我们怎样理解暗黑模式“为开篇，缘由作者正在任职的工作是 TO B 产品交互及界面设计，入职时正值公司整体产品线升级迭代，用户界面从浅色模式向暗黑模式探索的阶段。这个探索阶段面临的本质问题便是“到底什么是暗黑模式”，同时“我们为什么要用暗黑模式”的问题也随之而来。

为了给公司同事阐述这两个问题，作者搜集了大量资料，翻阅了相关产品系统所给出的设计文档，重点围绕“什么是暗黑模式”展开，逐步推敲其中的理论原理，总结出便于理解的文字内容。这样做的目的简单有二，一是与产品、开发、测试方面的同事能够达成向暗黑模式优化升级的共识；二是能够让我们的各个产品线更从容地去拥抱暗黑模式的到来。

/“由理有剧”系列篇01：我们怎样理解暗黑模式

文章大纲

1、是什么？

2、为什么？

一、是什么？

随着 iOS 13 和 Android 10 的正式发布，“暗黑模式 (Dark Mode)”一词逐渐走入了我们的视野，“暗黑模式是什么？”这个问题也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也许我们可以换一个角度，从用户界面的演进历史中寻找线索，从而帮助我们更好地理解暗黑模式。

作者自从拜读了《苹果三剑客》，对于用户界面的前世今生才有了更深的了解，苹果的产品发展史，某种程度上也可以称为用户界面的演进史。废话不说，下面让我们一起简单聊聊。

1、原来，“Dark Mode”是用户界面的起源

计算机诞生的早期，其显示器一直以“暗黑模式”面向操作者，其缘由是早期的显示技术一直被CRT主导，CRT释义为“阴极射线显像管”，在19世纪末被研制出来，因为制造原理相对简单，所以CRT一直是早期电脑显示的主力，但在上世纪80年代之前仅支持单色显示。

下面两图分别为苹果公司于1977至1980年间生产发售的 Apple II 及 Apple III 型计算机

图中显而易见，两款计算机的显示方式均为单调的黑底白字或绿字，呈现出一种“暗黑模式”的视觉效果。苹果公司的 Apple II 和 Apple III 两支产品线一直以这种“暗黑模式”面向用户。这也反映了早期的计算机以输入代码执行数字运算作为主要功能，但是这从另一方面反应出：未来计算机会借助不断成长、成熟的电子技术，必将掀起一场接一场的变革，用户界面也随之不断地革新。

2、Apple Lisa（丽萨）奠定了计算机向“图形用户界面”演进的基础

上个世纪80年代之后，CRT彩色显示技术成熟，逐渐流行普及到各个电子行业，但当时主流的计算机操作系统并没有“图形界面”这个概念，所以大部分计算机产品依旧延续了先前黑色背景的显示方式。

直到1983年1月9日，在年度股东大会上，苹果宣布了两款将在未来的计算机行业中占据关键地位的产品：一款叫 Apple Lisa （丽萨，老乔的第一个女儿），苹果第一台（也是全球第一款）基于图形用户界面（GUI）的计算机，也就是 Macintosh 的前身；另一台叫 Apple IIe ，是已获高度成功的 Apple II 系列的新一代进阶产品。

Apple Lisa 向主流个人电脑行业介绍了一种全新的鼠标控制的图形用户界面，宣布向单调的黑白用户界面告别。

运用形象的图标、方便的下拉菜单和重叠的窗口，替代了此前一贯使用的输入文字命令，Lisa的图形用户界面开启了消费者与个人电脑交互方式的革新之路。尽管Lisa存在诸多缺点，如定价过高，功能缺失、运行缓慢等，但它的图形用户界面依然给它赢得一阵喝彩。

Lisa的GUI影响如此深远，以至于诸多电脑制造商纷纷加入鼠标控制的GUI领域，争相模仿。就在Lisa首次亮相十个月后，微软于1983年11月推出了Windows操作环境。（对于此事，老乔总是公开谴责微软的盖茨抄袭他的产品创意，甚至想让盖茨吃官司，两位大佬一直不合也是业界皆知，跑题了...）

///一个有意思的事儿：今年7月份，一位外国的苹果粉在Twitter上发布了一条关于 Apple IIe 型计算机的动态，内容展示了自己使用 Apple IIe 型计算机进行智能化任务的过程，如发送推文、在Evernote中写作、发送电子邮件，甚至控制智能家居（如下图）。要知道，这台计算机生产发售至今已有37年的时间。由此感叹，不得不说苹果对于产品的品控做到了那个时代的。

3、Macintosh（麦金塔）推动了“暗黑模式”向“浅色模式”的迈进

1984年，苹果发布了个人计算机 Macintosh（麦金塔），Macintosh 延续了 Lisa 的图形界面语言，并向世界普及了图形用户界面（Graphic User Interface）的概念，从而开启了以白色为底色的图形交互时代。

Lisa获得的一些成就在 Macintosh 上体现的淋漓尽致，包括灵活的鼠标、点阵影像图、桌面的布局、形象的图标、相称的字体、屏幕上方的下拉菜单和重叠的窗口，这些也得益于日益成熟的显示技术和不断进步的计算处理技术。形象生动的图形设计和界面交互一直是老乔最引以为傲的杰作，不得不说，老乔对于计算机行业甚至是设计行业都有着极高的敏感度和先于旁人的前瞻性。（当然，这里的主语应该是苹果）

Macintosh 产品的成功，不是苹果一味地迎合计算机消费市场，而是利用创新的方式引导市场，引领计算机行业向人性化的用户界面发展、迈进。

至此，我们也彻底地向“暗黑模式”说了再见，全面拥抱“浅色模式”的到来。

4、“浅色模式”成为用户界面的主流

麦金塔搭载的 System 1 打破了字符终端的模式，浅色的界面风格一直持续到 System 6 都没有显著的改变。直到1991 年的 System 7 开始引入彩色，图标也增加了隐约的灰色，蓝色和黄色阴影。System 7 系列中的 7.6 版本正式被苹果公司改名为 Mac OS ，而这一年是1997年。

与此同时，微软的 Windows 从黑屏的 DOS 发展到全屏幕的 Windows 1，再到较为成熟的 Windows 3，最后演变到奠定当今 Windows 界面基础的炫丽多彩的 Windows 95。用那个时代的眼光来看，微软的变化是相当惊人的，微软俨然成为了一匹计算机行业的黑马，一路赶超苹果成为行业霸主，而苹果因为因循守旧，在界面设计上从领先掉到了最后。

此后，从 Mac OS 8 到 Mac OS X Server 1.0 ，苹果一直专注于改善操作系统和优化界面表现，直到2001 年 3 月，经历了四个开发者预览版和一个公共测试版之后的 Aqua 界面终于跟随 10.0 正式发布，发布后改变了人们对计算机界面的印象，在随后的10年里苹果一直沿用这套界面风格。

OS X 系列用户界面较大的更新来自于2007年10月发布的 10.5 Leopard 豹，虽然基本的界面仍为 Aqua 和其糖果滚动条，但新加入了一些铂灰色和蓝色，另外重新设计的 3D Dock和更多的动画交互使得新界面看上去 3D效果更强，此外还改进了 Finder、半透明菜单条并新增了最初只用于 iTunes 的 Cover Flow界面。

整体来说，Mac OS X 10.5 Leopard 豹 这一版本的用户界面相比之前有了翻天覆地的变化，灵活生动的图形语言和交互体验重新得到了用户青睐，苹果也以此，再一次走上了引领潮流之路，使得多彩的“浅色模式”成为用户交互界面的主流。

苹果开创性的界面图形语言也延续到了移动设备领域。

2007年的初代iPhone作为苹果公司第一个移动设备产品（iPhone1代）首次亮相市场，惊艳了整个行业，iPhone搭载的 iPhone OS 和后来更名为 iOS 的系统，延续了 Mac OS 用户界面的设计语言。在历代iPhone上可以看到没有物理键盘侵占空间的屏幕，精美的的方块图案整齐的排列开来，颜色丰富且耐看。

依稀记得当时的我们，还玩着黑白屏幕上的俄罗斯方块，还敲打着物理键盘上的九宫格，挪鸡鸭也表示永不为奴。

2010年堪称iPhone史上最重要的一年，苹果推出了“改变一切”的iPhone 4，并对其用户界面进行了革新。

生动的拟物化设计风格正式成为业界潮流，这也使得UI行业逐渐热了起来，苹果的界面设计规范也顺势成为了主流的移动端设计规范。

苹果以此作为移动端界面设计的基础，沿用到之后的iPhone系列中，期间iOS系统的风格保持依旧，只有 iPhone 5S 搭载的 iOS 7 做出了图标由拟物化向扁平化的改变，但整体都以“浅色模式”作为主流的用户界面视觉模式。

5、“暗黑模式”的正式登场

在 Mac OS 的系统上，用户可以通过“通用设置-外观”来对整体界面进行浅色、深色的切换，可以看出，苹果早已把“暗黑模式”纳入到他们的开发队列中，也就是说，“暗黑模式”的概念主要来源于苹果的 Mac OS，这也为“暗黑模式”的正式登场埋下了伏笔。

自从有了这个概念之后，很多网站都为用户提供了“浅色”和“深色”两套界面，便于用户根据自己的习惯或爱好进行切换。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所谓“深色模式”的支持，其中也不乏 Web 端的网站、系统等。

北京时间2019年6月4日，果粉期待已久的苹果WWDC19如期而至。

发布会上，库克一如既往地优先调侃了Andriod系统一番….（苹果一直喜欢用数据说话，想了解的同学可以回顾一下发布会的视频）

言归正传，在发布了一系列硬件之后，库克终于介绍了大家期待已久的 iOS 13。新发布的 iOS 13，除了提升系统流畅度和增加系统稳定性外，还介绍了其他提升用户体验的优化。

其中，最为引人注目的“暗黑模式”即将亮相于新系统。

发布会表示，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。

“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”发布会的主持人一边演示使用在暗黑模式下的App应用，一边不由自主地发出赞美。这也许也受到了老乔的影响，犹如在剧场舞台中心的话剧演员，有着一种无可比拟的自信和气场。

但有意思的一点是，主持人展示了 iOS 13 暗黑模式的开发团队合照，从极客穿着到赛博朋克式的暗黑摇滚装扮，这一戏剧性的变化似乎在告诉大家：“玩，我们也是认真的。”

发布会上简单演示了暗黑模式下的漂亮界面，虽然没有过多地阐述暗黑模式的开发细节，但是这标志着暗黑模式“重新”登上历史舞台。

6、小结

我们从苹果产品发展史中，不难发现苹果对于用户体验的理解是具有创造性的，总是能先于用户发现用户的潜在需求。苹果产品的发展史也可以称之为用户界面的演进史，从早期黑色背景的计算机桌面发展到以浅色为主的用户界面，再到 iOS 13 正式发布的“暗黑模式”，这一过程貌似是在“返祖”，但这些始终是围绕以用户体验为中心的改变和突破。

“暗黑模式”是什么？抛开技术理论，简单理解就是降低用户界面在设备上的亮度，以深色的背景、较低的对比度、灰阶的色彩来呈现用户界面，提升用户使用产品的体验。

二、为什么？

上面我们提到了，根据 Apple 官方的说法，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。

我们可以围绕这个说法，结合我们与设备、环境的关系进行探讨。

1、更好地适应弱光环境

随着人们对智能设备的依赖性越来越强，设备使用的时间也高频覆盖了白天到黑夜，夜晚使用的频率更是与日俱增，所以暗光环境的使用需求被实实在在地摆到了台面上。以设计职业为例，在阿里巴巴 UCAN 2019 设计大会上分享的数据结果显示：设计师群体夜晚的工作时间通常在5-6个小时…

不是在加班就是在加班路上的我们更习惯于在夜间工作，夜间安静的环境更能让我们专注设计、灵感爆棚。但这也在另一方面表达了我们需要设备更加符合我们在弱光环境下的视听需求。

Dark Mode 由此应运而生，使用暗色模式可以缩小屏幕显示内容与环境光强度的差距，可以保证使用者在暗光环境下使用设备的舒适度。也就是说 Dark Mode 可以降低屏幕的整体视觉亮度，降低对眼睛的视觉压力，再也不用怕夜晚的设备屏幕刺瞎我们的双眼了。

但这里我们要理解一个概念，“降低对眼睛的视觉压力”并不等同于所谓的“护眼”，夜晚使用暗黑模式的设备，实际上并没有改变屏幕的“频闪”问题，所以说用户看屏幕的时候依旧会有视觉疲劳的症状，所以各位大佬还是晚上少看屏幕，多爱护眼睛吧。

2、更好地专注显示内容

想象一下，我们在电影院看电影时，为什么要全场关灯？

甚至有些APP， 在影片的下方也会有一个模拟关灯效果的按钮，来让整个手机屏幕变黑， 只剩下视频画面的部分，这都帮助我们可以更专注、更沉浸在当前的内容下，也就是所谓的“沉浸感”。

这其中的原理就是色彩本身是具有层级关系的，深色会在视觉感官上自动后退，浅色部分则会向前延展，这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作；尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。

这一点在股票交易软件上就是最好的验证，目前来看全世界绝大多数的股票软件采用的都是负极性，也就是暗色底的设计方式。红色和绿色代表的涨或跌（不同国家颜色表示可能不一样）在这样的深色背景下就会特别显眼，还有一些颜色比如蓝色用于某些数据的走势图。这样的显示帮助用户更好地集中精力在数据获取上，更快地做出决策。

3、更好地迎合消费品味

这里所提到的消费品味是来自用户层面的潜在心理需求。

从心理学角度而言，颜色可以影响观者的感受和情绪，这直接影响到用户对于一个事物的判断和选择，这就像我们消费购物一般，有时候我们的消费不完全是为功能、实用性买单，而更加看重的是一个产品的外观属性，当产品的外观符合我们的消费审美甚至超越预期时，我们往往会更快地做出消费选择。

而黑色在积极层面的外在直观表现为高贵、庄严、镇定、神秘，这代表着黑色相比其他颜色存在着更多的可能性，这也造就了黑色成为百搭色，可以作为其他颜色的底色、陪衬色进行使用。暗黑模式也存在同样的心理暗示，沉稳、神秘的黑色会让用户联想到产品的稳定和高级，提升用户的心理信任度，迎合用户的消费品味。

4、更好地改善电池寿命

最后才探讨耗电功效方面的问题，算是一个压轴问题了，在某种程度上说，智能移动设备目前最大的矛盾是性能与电池功效的博弈。如果去微博等社交网站进行搜索可以发现，为了省电而使用深色主题或者说黑暗模式的用户大有人在，尤其是一些中高端采用 OLED 屏幕的手机。这是为什么？

暗黑模式省电的作用来源于 OLED 这种材质的特性，这种屏幕经过多年发展如今已经取代了 LCD 在中高端手机上的地位。和 LCD 依赖于背光不同，OLED 自发光的特性使得屏幕能够独立控制单个像素是否发光，也就是说画面越黑，采用 OLED 屏幕的手机就越省电。下图做了一个简单的理解示例，每一列的格子代表亮度，在不同亮度下有相对应的耗电量显示，闪电的亮度代表耗电量的多少。

理解了简单含义，我们再来看一下Notebookcheck上对于OLED功耗的专业研究数据。在使用 OLED 屏幕时，屏幕上显示的内容决定了功耗。当屏幕基本全黑时（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。显示了白色内容的屏幕，功耗曲线会随着亮度提高而逐渐变陡。

上面的可视化图表相对来说可能需要一定的理解时间，让我们翻译简化一下。

上图显而易见，OLED屏幕的耗电量不仅受到亮度高低的影响，关键在于在OLED屏幕显示了什么，有多少区域是浅色甚至是白色的，有多少区域是深色甚至黑色的，深色区域占比越高，相比较之下OLED屏幕也就越省电。这也就证明：OLED屏幕在使用以深色为主的显示模式时，能够降低耗电量，提升供电效率，也就是改善电池寿命。

///题外话：关于为什么我们的智能设备普遍采用OLED屏幕，可以参考Notebookcheck（文本链接），小伙伴们可以自行研究。

文章来源：站酷   作者：强强0075

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

前言 什么是复杂应用程序？

之前，我们已经将「复杂应用程序」定义：为支持广泛的、非结构化的目标或专业领域用户的非线性工作流的任何应用程序。复杂应用程序在其支持的工作流程和最终用户的类型上当然有所不同（比如从科学家到军事专业人员再到金融分析师），但是复杂的应用程序通常具有相似的品质。

例如，复杂的应用程序经常出现：

（1）以专业知识为专业用户提供支持；

（2）帮助用户浏览和管理大型基础数据，并启用高级感官分析或数据分析；

（3）通过未知或可变的基础任务支持问题的解决或达成最终目标；

（4）需要在多个角色，工具或平台之间进行切换或协作；

（5）减轻执行中高影响力（或高价值）任务的风险，因为在高风险情况下，高额损失（例如收入甚至生命）会受到威胁。

尽管差异很大，但所有复杂的应用程序都面临许多相同的挑战，无论是创建这些复杂应用程序的从业人员，还是依赖于它们进行工作的最终用户。

考虑到设计人员和研究人员在处理这些应用程序时面临的共同挑战，本文概述了8条复杂应用程序设计准则：

01 边做边学

研究表明，当引入一个应用程序或系统后，用户更喜欢立即开始使用它，而不受其复杂程度的限制。相较于花费大量时间学习使用教程、文档或其他类型的帮助或设置内容，用户更有动力开始他们的任务。（这种现象被称为活跃用户的悖论。）虽然在任务或安全关键领域中仅依靠试错学习来进行应用是危险且不适当的，但一定程度的边做边学永远是必需的，因为在培训课程或手册中不可能涵盖一个系统的所有使用。

支持用户立即开始探索界面这一偏好，允许他们通过尝试和错误来学习界面，而不会导致工作损失或不可弥补的损害。

例如，限制了用户执行长时间操作的能力，而看不到这些操作的结果。实时仪表板建构支持这一原理，其中仪表板元素预览在建构时会实时更新。用户不必等到任务结束就可以查看其操作结果是否符合其意图。

02 帮助用户采用更有效的方法

在大多数情况下，即使是复杂应用程序的用户也往往会处于中等水平。换句话说，大多数用户在自己的设备上使用系统时，并没有过渡到真正的专家使用水平。许多用户会感到满足，这意味着他们将继续使用满意的（通常是低效的）方式来完成任务，而不是花费时间为他们的工作流程寻找最佳解决方案。随着时间的推移，这种行为将导致难以置信的生产力断层，因为用户将花费数年甚至数十年的时间，以低效的方式日复一日地使用同一个系统。

通过为用户的工作寻找通俗易懂的沟通方式和更有效的方法，帮助他们转变为使用更有效的方法并打破其根深蒂固的行为模式。

例如，与其仅仅依靠冗长的教程或手册（甚至是写得很好的），还不如在整个应用程序中嵌入加速器或附加功能的上下文学习线索。上下文学习提示是仅在当前任务的上下文中提供给用户的提示。当用户将鼠标悬停在工具栏菜单项上时，提示一种更快完成任务的方法的工具提示支持这一原则。

03 提供灵活而流畅的路径

复杂应用程序的用户通常在非线性工作流中执行广泛的非结构化目标。对于这些工作流程，用户可能不知道他们的确切最终目标，而是需要分析数据以寻找答案。即使存在一个制定良好的最终目标，用户通常也不会遵循一组已知的、顺序的子任务来实现它。但是，出于必要，该系统必须具有某种结构：与用户交互的物理界面以及随着时间推移完成的某种线性过程。

死板、线性的工作流强迫用户从开始到结束完成一组操作，没有退路或顺序上的灵活性。通过避免这种死板的工作流，允许用户在任务序列中具有灵活性。

例如，提供方法允许跳过前面的步骤，回溯前面的步骤，以及从任何步骤流畅地移动到任何其他步骤。再比如，面包屑中灵活的交互式序列图使用户可以返回之前的步骤，而不会丢失进度。

04 帮助用户跟踪行为和思考过程

复杂应用程序用户经常面临漫长的等待，工作也经常被打断。例如，复杂的数据分析可能需要花费数小时甚至数天的时间，而大多数复杂应用程序用户所面临的高复杂性的环境可能会导致其工作意外中断。即使没有计划外的中断，为实现目标而执行的子任务的复杂性和可变性也要求用户在任务执行过程中将大量信息保存在工作存储器中，而这些信息很容易在他们改变方向时丢失。

通过允许用户在工作期间记录他们的行动和思维过程，减轻工作记忆负担，并帮助用户在工作流中断或中断后恢复任务。

允许用户添加和存储有关特定数据、图表或其他元素的开放式注释是支持此原理的一种方法。例如，在复杂的数据建模或分析期间，用户输入的注释可以在稍后时刻提醒用户创建模型的原因，以及他们创建模型时试图回答的问题。

05 协调多个工具和工作空间之间的转换

复杂应用程序用户通常跨多个工具和多个工作区工作。即使用户大部分工作主要依赖于一个专用应用程序，他们仍会出于多种原因而频繁切换应用程序。例如，当主要软件不支持该操作时，可以从在线数据库中收集数据，查找和参考文章或其他外部文档，或者在其他应用程序中做自己的注释和评论。即使是在主应用程序中，存在软件附加组件或其他启用应用程序中各种专门功能的可选软件包，用户也可能在不同的环境或工作空间之间转换。

通过支持从一个环境转换到另一个环境（包括主应用程序内部和外部），减少工具切换的负担。

减少工具切换负担的一种方法是简单地接受这个生态系统，并在主要应用程序和经常使用的第三方工具之间设计连接点。例如，复杂的工作通常需要协作和报告。将数据集导出到Excel或将图像导出到PowerPoint的内置功能，使用户在试图编译报告和演示文稿时节省宝贵的时间，否则将花费在转换数据或屏幕快照图像上。

06 减少混乱而不降低能力

复杂的应用程序通常旨在适应广泛的用途。例如，环境机构用来测量和跟踪蜜蜂生产的分析监测软件也可能被汽车公司用来监测机器故障。使用场景的多样性一方面使复杂的应用程序非常强大，但另一方面又常常非常混乱。此外，复杂的应用程序通常必须同时支持新手和专家用户，并且专家用户可能需要新手用户很少访问的高级功能。

通过在不降低应用程序功能的情况下，地减少界面内混乱的外观，帮助用户管理在复杂应用程序中普遍存在的选择、特性和功能过载问题。

分阶段公开是一种减少混乱的方法，仅在选项与手头任务或重点项目相关时才向用户显示选项。例如，只有在复杂表单或向导中选中相关字段后才显示高级参数或设置，这就是与复杂应用程序相关的分阶段公开的一个例子。

07 简化主要和次要信息的转换

即使在界面中有效地减少了混乱，也不是所有的元素和信息都能（或应该）一次显示出来。有些信息必须放到二级层次；然而，次要信息通常是必要的，以作为有关主要层次的信息的决定的上下文参考。

通过允许用户在不离开主屏幕或环境的情况下访问和查看补充信息，简化主信息和辅助信息之间的转换，并帮助用户将主信息置于上下文中。

仪表板通常支持此原理，例如，当用户将鼠标悬停在图表或图形中的特定点上时，它允许用户在工具提示中查看更的定量数据。

08 视觉上突出重要信息

复杂应用程序用户执行的许多任务需要高度的视觉搜索。举几个例子：用户可能需要在巨大表格中的表格视图中查找和区分相关数据。系统警报必须引起用户对界面相关部分的注意，以便用户可以及时注意到并纠正潜在情况。在仪表板上简单地查看和理解数据可视化也有一个重要的可视化搜索组件。在复杂的应用程序中，大量竞争信息和元素可能会阻碍这些任务。

通过在视觉上突出关键元素（例如，让它们从周围元素中脱颖而出），帮助用户找到重要信息并对其采取行动。值得注意的是，突出重要信息并不总是意味着要强调这些信息（例如，明亮的颜色或加重字体粗细）。去掉不必要的元素可以同样、甚至更有效地使重要信息在视觉上显得突出。

例如，删除无用的多余图形或视觉元素可以让留下的数据脱颖而出。仪表板模块从数据元素中消除了不明显的、难以理解的插图，从而减轻试图在仪表板上定位数据的用户的视觉搜索负担，支持这一原则。

结论

复杂的应用程序是多种多样的，支持各种用户类型和工作流；然而，类似的挑战存在于各种领域的复杂应用程序中。遵循这8条设计准则优化复杂的应用程序：

1. 边做边学

2. 帮助用户采用更有效的方法来完成任务

3. 提供灵活而流畅的途径

4. 帮助用户跟踪动作和思考过程

5. 协调多个工具和工作空间之间的转换

6. 减少混乱而不降低能力

7. 简化主要和次要信息之间的转换

8. 视觉上突出重要信息

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

不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个“大师”帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后以后这家餐厅火爆了，王境泽都觉着香的不行…

听完这个故事，自此我幼小的心灵里把橙色和食欲划了等号。这个烙印直到我从业前几年还一直这么觉着。同时间段，在9年义务教育的美术课本上，我得到了有生以来第一次对色彩这门学问的细致输入，了解到了各种颜色对应的含义与情绪：

这种色彩与情绪的映射关系在我的脑袋里根深蒂固 / 无法磨灭，直到有那么一场面试或者汇报，面试官/老板问我，“为什么你要选择这个颜色作为品牌色呢？”

面对着一手塑造出来的社交应用，我解释到：“因为红色代表着热闹，这个颜色会赋予这款产品热闹的氛围”。坦诚的讲，这个解释自信但空洞，颜色本身并无好坏和指向，只看你用在了什么地方，不讲究场景就别轻易定性。

这也侧面反映出来惯性思维的不断吞噬着你我的思路，过往的“经验”可以让人习以为常，也可以让人尴尬不已，取决于是否洞察的到。如果抛弃惯性思维，到底如何去定义一款产品的主色呢？

STEP 1

说实话选取一个颜色作为品牌色是一个战略决策过程，一般来说行业里一定存在一种主流颜色，像旅游行业的携程/去哪儿和途牛，还有以淘宝为代表的电商行业通常是喜庆的大红大橙。

显而易见基于这个逻辑下，有3个做法，一条路是顺势而为，一条是逆向而去，还有一条是另辟蹊径。这块的选择一定程度上并不是设计师可以决定的，需要结合整个业务的方向去判断；在旅游行业里马蜂窝选择了逆向而去，在直播行业里抖音就选择了另辟蹊径。

我们试着揣测下抖音和马蜂窝的想法，在产品的定位和策略的打法上，他们更注重的是差异化，走反方向的路突出品牌，试图在用户的心里站得住。通过这个例子你或许会发现，黑色未必死气沉沉，ta也可以色彩斑斓；黄色未必只象征尊贵，ta也可以代表青春和希望；颜色没有偏向，只看使用在什么场景上。

主色的选择更需要贴合业务战略的发展，也更多的偏向于主观。给业务提供思路和方向，判断不好业务方向的时候，多提供思路帮助其更好的匹配颜色。

STEP 2

以往的面试里，我这种好事的面试官就特别喜欢问侯选人一个问题：“一个色相里有那么多色号，为什么你定了这个色号作为品牌色？”大部分候选人乍一听都是面露难色，心里大概想着这人是个傻X吧，能问这种问题，哈哈哈哈哈哈；废话不多说，我来简单分享下我的方法：

首先以黑白两色（#000000-#FFFFFF）作为起始点设置10个梯度，然后把第一个模块定义的色相扔进去，只需要调整HSB中的H就可以，这样一顿操作下来你就得到了一个完整的色彩序列：

第二步，基于序列主观调整下颜色，确定主色的同时确保其在黑白2种背景上对比度大于4.5：1（wcag色彩可用性标准），理论上来讲梯度中间是最合适的，饱和和亮度足够就可以。

上图是我用到的色彩可用性测试工具-color review（https://color.review/）

STEP 3

当你准备好了以上所有工作，最后一步就是拓展色系了；这里采用负能量补给站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作为主色并结合下google的方法开始拓展色系。

首先 - 确认同色系辅助色：我们将主色的色相加减 30° （谷歌是以10为梯度，但色相变化不大，为了效果我们以3倍作为最小单位）获得2个新颜色，即同色系辅助色。

其次 - 确认对比色辅助色，将主色的色相加上 180° 获得其互补色，即对比色系辅助色。为了和主色的类似色对应，取互补色的同类色（色相加减 15°）和类似色（色相加减 30°）。从中选取需要的颜色作为最终的对比色系辅助色。

根据色彩需求取同类色2和类似色1作为最终的对比色系辅助色，这样，我们得到了主色和四个辅助色；同理你可以推理出无色彩倾向的中性色系（这里就不展开赘述）。

最后你可以通过编码的方式，赋予每个颜色一个token（密钥），方便团队的配合和使用。

以上就是我在选取色彩的大概思路，市面上也有很多讲颜色的好文，分享大家去找找。

总结一下

随着工作经验/时长的不多增加，我们往往会对事物的存在习以为常，思维的惯性会困住我们追根溯源的想法，但需求和场景是千变万化的，所有的方法也都针对的是通用场景，标准化的解决方案未必适用你当下的处境；试着在熟悉的环境用敏锐的洞察和科学的方法突围也许是最好的办法。

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

动效对产品的可用性体验有多维度的影响。在界面中动效不仅仅是一种视觉装饰，它能够提升产品的参与度并扩展交流的范围。

本文追根溯源，先从动效的起源讲起，一步步推进与产品、体验之间的关系，最后通过案例分析动效设计的原理和应用。一起来看看吧～

一、动效设计的起源

动效与用户体验的结合相对较新，其根源是迪士尼动画设计的十二个条基本原理。迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律。这些原理能让绘制的卡通角色移动和表演，但不能充分满足现代UI界面的交互需求。

为了弥合这个差距，动效专家Canedo Estrada改编的《动效设计的10条原理》更适合应用到数字产品设计中。

在围绕界面元素建立用户体验时，重新定位动效原理的关键在于：

• 将动效设计与UI动画区分开;
• 阐明动效如何帮助可用性;
• 解开核心动效的内部工作机制。

二、动效设计与用户体验

在讨论动效设计的原理之前，重要的是要强调动效不仅仅是装饰，而是一种用来帮助用户体验的行为。动效设计涉及两种基本的交互类型：实时和非实时。

 实时 

当用户在屏幕上点击UI元素时，实时交互提供即时反馈，会对用户的操作做出即时响应。

 非实时 

非实时交互发生在用户操作后，这意味着用户需要经过短暂的转场才能看到结果，然后再继续。

另外动效设计通过四种不同的方式来提升产品的可用性：

1.期望：当用户与界面交互时，他们期望看到哪些行为？动效是否符合预期或引起混乱？

2.连续性：交互在整个体验中是否发生一致的运动行为？

3.叙述：触发的动作是否与满足用户意图的事件的逻辑进程相关联？

4.关系：UI界面的空间、美学和层级结构如何相互关联并影响用户的决策？动效如何影响各种元素的关系？

三、产品动效设计原理

这里提供12种动效设计原理的解析，每一种对应不同的案例，从更直观的角度来解读抽象的原理。

1、缓动(Easing)

缓动效果模拟了现实世界中对象随时间加速或减速的方式。它适用于所有运动的UI元素。下图中的卡片和对应的椅子移动速度很快，但由于缓动效果它们可以平稳地受到控制。

2、偏移和延迟(Offset & Delay)

当多个UI元素同时快速移动时，用户倾向于将它们组合在一起，而忽略了每个元素自身的功能性。

偏移和延迟会在移动的UI元素之间创建层级结构，并传达它们相关但又不同的消息。元素的时间、速度和间距不是完全同步的，而是交错排列从而产生一种微妙的“一个接一个”的效果。

当用户在屏幕之间穿梭时，偏移和延迟表明存在多个交互选项。

3、父子关系(Parenting)

父子关系将一个元素的属性链接到其他元素中。当父元素中的属性更改时，子元素的链接属性也会更改，同时所有元素的属性都可以相互链接。

在下图中，将父元素(蓝色滑块)的位置与子元素(灯泡发光效果&光照强度)相关联。当父元素左右移动时，子元素的发光效果的范围和光照强度的数值会发生变化。

父子关系在元素间创建关系并建立层级结构，允许多个元素同时与用户交互。因此这种效果非常适用于实时交互中。

4、转换(Transformation)

当一种UI元素变成另一种形式时就会发生转换。例如，转换展示了下载的开始、中间和完成状态——下载按钮转换为进度条，进度条转换为完成图标。

从UX角度看，转换效果告知用户元素的状态发生了变化并将信息传递给用户，提高了用户的认知度。

5、数值变化(Value Change)

数值的变化(数字、文本或图形）在数字界面中非常丰富，从银行APP到日历到电商网站的各种产品中都会出现。

在某种程度上，数据的动态表达和交流可能会对数据的价值产生影响。例如下图中的数值被动态引入，向用户显示他们有能力影响数据，提升了参与活动的意愿。

6、遮罩(Masking)

遮罩是对界面上的部分内容进行战略性的显示和隐藏。通过改变元素的形状和比例，在改变元素效果的同时允许元素本身保持可识别性。因此，照片和插图等视觉形式是理想的选择。

从可用性的角度来看，设计师可以通过遮罩向用户展示产品正在进行一系列的交互。

7、覆盖(Overlay)

二维空间中没有深度，元素只能沿X或Y轴移动，叠加在界面中创造出前景/背景相区分的位置关系。通过模拟深度，覆盖可以根据用户的需要隐藏和显示元素。

在使用覆盖时，信息层级结构是重要的考虑因素。例如，用户在笔记应用中首先应该看到的是笔记列表，然后使用覆盖来显示每个笔记的辅助选项，如删除或归档。

8、克隆(Cloning)

克隆是将现有的对象拆分成新对象,这是一种突出显示重要信息或交互选项的方法。

通过克隆将元素与界面相链接，如果元素只是突然出现或消失没有关联性，那么用户将缺乏信心去交互。

9、模糊(Obscuration)

想象一扇磨砂玻璃门，虽然看不清门后的东西但是我们能察觉到门后事物的存在。

模糊的工作原理是一样的。它为用户提供提示，让用户意识到自己正在操作的界面之后还有其他的层级结构。导航菜单、密码屏幕和文件窗口是常见的示例。

10、视差(Parallax)

当两个(或更多)元素同时以不同的速度移动时会构成视差效果。

视差的主要目的是划分层级结构：

• 可交互的元素移动速度更快，出现在前景中;
• 非交互式元素移动速度较慢，退到背景中。

视差引导用户点击可交互的元素，同时允许非交互的元素保留在屏幕上并保持设计的统一性。

11、维度(Dimensionality)

维度使界面元素具备具多个方向的交互，这种行为是使元素看起来是可折叠、可翻转、浮动的或具有深度。

作为一种叙述性工具，维度意味着元素的不同侧面是相互联系的，并且可以实现无缝的屏幕过渡。

12、平移与缩放(Dolly & Zoom)

平移与缩放通过视角的变化能产生更多空间上的体验，逐级递进显示更高级别的细节。

平移：点击元素后发生距离远近的平移，用户的视点会越来越接近图像。(一个人拿着照相机走到一朵花前面近距离拍摄)

缩放：用户的视角与图像的距离保持不变，但图像在屏幕中的比例会增加。(这个人站在原地不动，只利用相机的变焦功能使花显得更大)

四、总结——动效即交流

互动体验要求动效具备敏捷和微妙的形式。坚持动效设计原理，即使最基本的界面元素也能成为交流的复杂媒介。

动效设计与产品用户体验之间的关系正在迅速成熟，而且动效跨越了二维屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟。

文章来源：UI中国   作者：Clip设计夹

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

你觉得设计系统重要吗？那目前手里的设计系统是在灵活运用？还是落灰、摆设？你对设计系统理解有多深？它在你的设计中有多大的用处？节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范？那怎么避免设计系统带来了统一和便利，但同时失去了变化和新鲜感？

设计系统是今年来热门的话题之一，想要带来良好的用户体验，设计系统就是其中重要的一环，那它和设计规范、设计模式、设计语言、设计原则有什么关系？

设计系统

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档，在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色，文案，字体等等)，所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的，是需要维护与改进的。

设计模式

设计模式是一种经常性，可重复使用的解决方案，可用于解决设计问题，我们经常会说解决整个方案我们要运用什么样的设计模式。

设计语言

设计语言是把设计作为一种“沟通的方式”，用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。

设计原则

设计原则可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。

比如Airbnb的设计原则可以简单归纳为几点：

设计规范

设计规范对于设计师来说并不陌生，日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率，同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。

那是不是只要制作一套设计系统，在团队进行扩散就可以了？那平台的统一性就解决了？

我曾经加入一个设计团队，看到平台风格不统一，当时很自豪很坚定的制定了一套平台设计规范，从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系，还有交互方面。当时一心想着有这个规范宝典在手，平台统一性指日可待，没想到这个规范就成了我自己的规范，仅仅是我在自嗨。

为什么已经建立设计规范了，还是没能解决平台统一的问题？这里延伸出另一个问题，为什么其他设计成员不用？协作不起来？是它不够好？我严格按照标准来，为什么推不起来？

那要追溯到设计体系的目的是什么？它的意义何在？

1-建立统一的设计文化体系

2-保证多团队成员共同参与的项目视觉一致性

3-提升品牌调性

4-节省与研发人员的沟通成本

5-将元素组件化，提升设计师和程序员的工作效率

6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。

7-在用户层方面，对某产品的体验一致性得到落实

8-减少设计出错率

……

整体可以归纳为

1-对内统一，对外区分

2-管理与协作变得方便

3-建立设计文化体系，建立品牌感

4-减少、优化错误出现

对内统一，对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一，一个品牌的设计风格，是要有别于同类竞品的，比如阿里云、腾讯云，他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分，一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站，各个页面的设计差异明显，像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。

管理与协作变得方便

for Designer:

多个设计成员协同一个产品，迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队，如果没有统一设计规范，那网站会变成什么样子。

for Developer:

在UI还原中，设计需要经常与前端进行沟通“这里这里这样做，那里那里这样做”，对于每一块的设计，前端都会询问你，这样大大增加了沟通的成本，把时间花在了无效的事情上。

设计规范统一后，减少了无效沟通，可以更专注创新方向，比如：要改变预先设定的一个辅助色，无论是设计还是开发，修改组件的颜色，全局使用到这个组件的地方都会改动，大大节省了设计时间。

建立设计文化体系，突出品牌感

做品牌的时候需要制定一整套VI规范手册，那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式，更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐，看到界面都可以立马识别出这是哪个app。

你能分出哪个是网易云播放界面，哪个是QQ音乐播放界面吗？

减少、优化错误出现

设计经常碰到设计完后需要修改一个点，然后就要找出设计稿中所有相同的地方进行修改，这样很容易漏，统一规范后只需要修改组件即可。尽可能的避免错误的出现。

设计规范的意义这么强大，对网站及品牌有至关重要的作用，那为什么还会出现没有应用起来的情况呢？

很多设计师会说：“设计不就应该是变化多端的吗？就是要表现创新力呀？制定了设计规范是不是就失去了变化和新鲜感？那设计还有什么意义？开发都可以做设计的事情了。”

这里就要看对设计规范理解的深度—设计规范是分层次的，平台规范归根结底是为了确保产品的易用性，是为了减少用户的学习成本

对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式，比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素，给用户一种统一的视觉形象，在跨界面、跨端、跨系统间有熟悉感，从而潜移默化地进行品牌的渗透。

增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定，对组合自由度较高的复合组件减少过于局限的限定条件，考虑各种拓展的可能性。组件在制定过程中要考虑多种状态，多种可能。

设计规范随着业务的发展或技术的变革终究是会过时的，是需要迭代的。

设计规范是需要迭代的，而不是我只要制作出来就放那了，就像女生买衣服，去年的衣服已经配不上今年的我，嘻嘻

~~希望我每天都有新衣服穿，做梦中～

对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力，设计师可以更多的时间去发挥创造性。

误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范，那我的创造性从哪发挥，界面都长的差不多。在设计中，设计目的是解决商业或用户的问题，并不仅仅是为了有创意而引入新的样式或交互方式。

有了设计体系，统一了整体品牌风格，不用把精力花费在比如调整间距、对齐元素等琐碎的事情上，更多的回去关注更全局的设计策略。

误解2-设计系统只关乎设计，可由设计师独立完成

它仅仅是设计软件上可复用的组件，所以可由设计师独立完成，这种想法是错误的，是需要来自不同角色支持和参与的，这里包括前端、品牌、动态设计、 用户研究等。

误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了，其实不然，对待设计规范就像对待产品一样，是需要维护和改进的，包括两个方面：一种是对内部使用的开发以及同事，一种是对用户的，应该定期收集用户以及同事的反馈，确保及时更新迭代。

误解4-设计系统的重要性

1-提高设计开发效率，最显而易见的好处就是，组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2-确保设计一致性，为用户提供连贯一致的用户体验，设计的一致性让用户能缩短的学习使用产品的周期，让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验，会让用户产生一种掌控感。

3-设计系统促进了公司内部的合作和交流，一个成功的设计系统是需要跨功能团队参与，设计系统因此促进了公司内部不同职位的合作和交流，这种文化的建立也会帮助公司更有效地推出新的产品或服务。

那我们要如何去执行呢？

已经了解了规范的目的/意义，那该怎么去着手呢？

• 对于设计规范的意义要同步给设计人员，提高认知，这是一件提率的规范，规范必须落地。

在制定规范前期，不应该是一个人规定这个规范，设计团队的成员应积极参与，前期先把规范的基调定好，人人都参与进来了，规范也就能更好的运营，当时我就是一个人定了规范，只是单纯把规范发给其他设计人员，他们没有参与，自然不会使用规范，对里面的设计元素没有加深理解。

主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力，这样能把纰漏降到。

• 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范，从UI的定义，User Interface—用户界面，用户与界面之间的交互关系，可以归纳规范其实可以包含两大类，一类是视觉规范，一类是交互规范。

视觉规范可以给用户传达统一的品牌形象，确保视觉一致性。后期的设计元素须复合规范的原则。

交互规范可以减少用户的学习成本，让用户有归属感。交互规范在制定的过程中，需要写好交互规则与条件，不然后期维护会混乱。像盖房子一样，地基都没打稳的话，整个楼都是偏的。

那在使用规范时，一定要遵循规范里的要求进行应用，否则会乱套，不仅起不到统一的品牌风格，反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。

设计规范的节点

节点和公司的进度搭边，看当前的产品是应该先独立风格还是先统一基础规范。

1-固定的设计风格规范，比如：google的“扁平”，微软的“磁贴”，可以全局使用，并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队，定好基调，不会走偏。

2-不断优化的设计规范，根据公司的节奏，有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后，进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。

建立规范

·制作原理—利用粒子构成的原理与三维解构

利用粒子构成的原理与三维解构，一个组件被科学的三维解析后由粒子再构成，理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变，高度灵活

·具体过程

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。

·元素是工具库的必要部分

并不是每个时刻都能够直接使用完整的组件，元素是我们工具库必不可少的部分，它可以更大的方便你修改组件，再造组件以及特殊的排版，方便拖拉拽。

·组件的命名规范化

规范组件命名，方便查找、方便协作。

协作

一键导出/同步组件到Sketch模板。

标注方面，目前我们团队使用的是蓝湖私有化。

那是不是所有的公司都需要创建设计系统？

一般情况下，公司有不同的产品线，且都需要长期的开发与迭代。

公司中，越来越多的设计师加入，设计风格需要统一。

那建立一套设计体系会面临什么挑战？

设计体系里面包含了设计语言、设计规范，需要与前端、品牌、动态设计、 用户研究等沟通，还是需要迭代优化的，这是非常繁琐耗时的项目，初期会非常的艰难，当设计师开始做组件时，也是非常耗时的工作，需要考虑不同场景下的使用情况以及设计的延展性，都需要投入大量的设计人力。

聊了这么多，大家对设计系统有了一定了解，建立好设计系统可以事半功倍，以此提升效率才能提升UED价值。

思考点：

1-对于设计团队只有一两个人的时候，是否需要建立设计系统？

2-你是否愿意把时间花费在前期建立设计系统，后期更多时间用于创造性地东西？

3-建立设计系统前很枯燥，你会怎么坚持，怎么让设计体系价值更大化？

排名榜单数据在我们日常生活中经常会遇到：

比如微博、抖、快的热搜榜单、各省份之前的GDP对比、双11的现场的榜单数据等等

都会涉及到，可以说排名数据已经涉及到了我们生活中的方方面面。

那我们应该如何做好榜单排名数据可视化呢？

我们常遇到的榜单排名数据主要分为两种：

↑ 榜单排名数据分类

1. 一种是无数据的排名，也就是只有排名和名称；

2. 另外一种就是有数据的排名，也就是包含了具体的数值；

   
   

那么，本篇文章我将按无数据的排名和有数据的排名，给大家带来，当我们遇到榜单排名数据时，应该如何将图做的更好看！

总共涉及到大于15种可视化表现形式，希望能够对你有所帮助！

一 没有数值的排名数据，如何做得好看？

1 基于数字本身去做变化

最简单的方法，我们可以从排名的数字本身去做优化，比如将排名数字1、2、3....去做内容的填充丰富，改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...

还可以基于数字本身所处的环境去做优化，比如在其底部加入填充形状垫底，让数字排名更突显出来（如正方形、矩形等等）。

通过这两种形式，可以让单调的排名数字有了更多的细节，内容更丰富，展示更好看。

↑ 基于数字本身去做优化的案例

2 基于整体，通过形状元素去做变化

在数字本身变化的基础上我们还可以加入对文字的变化，比如在文字的底部垫上形状（如圆圈、条形图等等）。这样通过对数字和文字本身的设计强调，就从整体上得到了优化。

↑在文字底部垫上圆圈，在整体上突出设计感

虽然排名没有具体的数值，无法生成条形图，但是依旧可以通过等比缩放的矩形来强调文字，比如倒立金字塔和横向柱状图。

↑通过矩形形成倒立金字塔和条形图，在整体来突出设计感

3 基于内容主题传达，来做变化

3.1借助icon元素，来做变化

如果排名数据内容所传达的主题是品类、物品、或者城市，那么就可以借助icon来丰富可视化。

3.2 借助定制插画，来做变化

排名的数据如果涉及的是品类中的细分物品，比如生活中常见到的吃的、穿的，用的，那么就可以使用定制插画来丰富排名可视化。

3.3 借助头像、品牌LOGO、产品实景图，来做变化

当我们的排名数据中涉及到了人物、品牌、产品之间的排名时，我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。

3.4借助地图，来做变化

如果排名数据讲的是省份之间的排名对比，那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图，一定要注意使用中国标准的地图，当然基于设计的风格，你也可以使用简约风格，去掉地图元素，只保留可视化的部分。

4 借助背景设计元素，去做变化

排名数据也可以借助视觉背景模板来做变化，比如在涉及某个主题排名榜单时（如淘榜单、星数榜单等）就可以通过背景视觉元素来突出排名。

其实这种背景视觉模板，对可视化的要求并不高，你只需将排名通过单一表格的形式展示出来，但需要一个很强的视觉背景版来做衬托，这样，做好一个模板，其余的榜单都可以进行复制使用了。

二 如果排名数据包含数值，如何做得好看？

1 基础可视化排名数据图

如果数值单一，那么可以通过常规的可视化表现形式进行展示（如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等）。

1.1 横向柱状图展示

结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观，特别适合单一排名数据之间的对比展示。

1.2 饼图、圆圈大小占比展示

如果排名数据中数值所传达的是占比，那么便可使用饼图或圆圈大小的形式对排名数据进行展示。

1.3 直角三角形柱状图（柱状图变种）展示

通常我们会使用常规的竖向柱状图来表现数值的大小，但其实还可以对其进行一点点变形，比如将柱子的右侧直角边去掉，那么就变身成为了直角三角形柱状图。

这时如果排名的文字比较多，我们还可以将排名和文字置于柱子的上方进行展示，一方面节省了空间，另一方面在视觉上也起到了美观度。

1.4 180°变种柱状图展示

柱状图的变种，在《如何做出比别人好看的柱状图？》系列文章中有讲到，大家对如何实现这种形式感兴趣的可以看下之前的文章，同样的排名数据也可以基于180°的变种柱状图来进行展示。

2 将主题元素和基础可视化排名图进行结合

除了基础的可视化展示和排名数据结合外，如果排名数据所涉及的是一些主题元素（如生活中吃的、穿的、用的等等）。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。

3 使用桑基图来体现排名

当排名的数据中，还多了一列数据涉及到分类， 那么就可以使用桑基图来进行可视化的展示（如国家属于什么地区、公司属于什么行业、城市属于什么省份等等）。对如何实现桑基图感兴趣的可以看看之前发的桑基图教程。

4 排名连线图展示

如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。

4 排名连线图展示

如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（在后面会讲到）。

5 地图展示

和第一节讲到的地图一样，如果排名数据中涉及到了地理位置数据，那么可以结合地图进行排名数据的展示。通常情况下，完成地图可视化后，可将具体的排名信息以表格的形式罗列在地图的空白区域内，这样结合地图和具体的详细排名数据，就会更加的直观和丰富。

6 组合图展示

如果我们的排名数据维度非常的丰富，数据所包含的信息点在3个以上，那么就可以通过将多种可视化的表现来进行结合，通过组合式的可视化来进行展示。

7 动态柱状图、动态折线图展示排名

7.1 动态柱状图

排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化，那么可以通过柱子从上到下一个一个地出现来进行展示（如下图左),如果涉及到年份的变化， 那么就可以通过柱子随着年份的上升或下降来进行动态的展示（如下图右）。

动态柱状图的实现方法也很多，我在想做出漂亮的图表，这12个网站不能错过！中有讲过，可以通过flourish网站（https://flourish.studio/）来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图，也可以使用B站UP主见齐的开源可视化项目（http://r6d.cn/JdYy）进行实现。

7.2 动态折线图

同样的我们还可以通过动态折线图的形式进行展示，这种表现形式主要看的是排名的趋势变化，同样的，借助flourish网站（https://flourish.studio/）就可以实现这种动态折线图的展示效果。

8 3D建模渲染可视化展示

当然，我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示，比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等。

8.1 3D柱状图展示

将基础的柱状图，通过3D立体柱状图的形式进行展示，排名的结果并不是啪的一下直接公布，而是随着镜头慢慢地公开，对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉！

8.2 3D内容场景展示

如果我们的数据，所要传达的信息非常富有主题场景感，那么就可以通过3D场景渲染的形式进行展示，比如下图GIF中，在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生，置于一个教室中，再通过镜头的移动位移来进行展示。

这种展示形式，实际投入成本还是很大的，从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式，要不然就会出现”虽然视频本身展示酷炫，但是由于选题不好，最终播放量不高“的尴尬情况。

三 做好排名数据的一些小事项

1 时间紧急时，一切从简

比如说，当我们在时间非常紧急的时候，排名数据如果是和地理数据相关的，那么我们会尽量避免使用地图元素来丰富可视化，因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示，虽然会丢失掉一些美观度，但是正确性会有更高的保障。

2 强调重点数据

基于文章内容，需要在图中重点强调某些数据时，可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调.

四 总结

排名数据看似简单，但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时，这篇文章能够对你有所帮助！

文章来源：站酷   作者：邹磊ZouL

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

用户画像作为一种设计工具，可以很好得帮助设计师跳出“为自己设计”的惯性思维，聚焦目标用户，发现核心价值，赋能产品。