今天，90％ 的媒体互动都是基于屏幕的，通过手机，平板，笔记本电脑，电视和智能手表来与外界产生联系。多屏设计已成为商业设计中不可或缺的一部分，响应式设计正迅速成为常态。作为 UI 设计师，我们希望为我们的产品在不同尺寸下都能为用户提供良好的用户体验，栅格系统可以帮助我们做到这一点。
即使是我们只针对一个尺寸进行设计，我们也经常面临设计布局方面的问题。合理运用栅格系统可以帮助我们控制布局结构并实现一致和有组织的设计。栅格系统就像无形的胶水一样凝聚一个设计，即使元素看上去是彼此分离，但通过网格将它们连接在一起，实现良好的层次结构，位置关系和一致性。
设计师和开发者之间的协作过程中，栅格系统在前端开发中是被应用的很广泛一套体系，许多优秀的设计都使用了栅格系统，使用栅格系统可以加速开发并保证视觉还原。栅格系统虽然是传统设计方法中的一部分，但它仍旧能帮助我们去设计这个多终端的世界。看到这里，你可能非常想知道栅格系统在页面中是如何运作的，那么今天我们一起来学习并且实践我们的格栅系统。
「The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.」
「栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。但是必须学习如何使用网格。这是一门需要实践的艺术。」
——Josef Müller-Brockmann《平面设计中的网格系统》作者
栅格系统可以让你依靠秩序与逻辑去完成设计。
早在 20 世纪初，德国、荷兰、瑞士等国的平面设计师们发现通过维持视觉秩序，从而使版面能更加清晰有效地传递信息，二战后这种理念在瑞士得到了良好的发展，直到 20 世纪 40 年代后期，第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 Josef Müller-Brockmann（约瑟夫·米勒-布罗克曼）所著的《平面设计中的网格系统》一书，自 1961 年出版以来畅销至今，对设计界有着深远的影响。史称 Swiss Typography Movement （瑞士新浪潮平面设计运动），后来成为全球风靡的 International Typographic Style （国际主义设计风格)）。
△ 约瑟夫·米勒一布罗克曼 (Josef Muller-brockmann, 1914-1996)
瑞士的一位平面设计师和教师。1958 年任《新平面设计》（New Graphic Design）主编 1966 年被任命为 IBM 的欧洲设计顾问。布罗克曼因他的极简主义设计与简洁的排版、图形和色彩而闻名，他的设计对 21 世纪的众多平面设计师都产生了重大影响。
1. 减少决策成本提高设计理解力
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；UI 设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够让你的设计更有秩序和节奏感，页面信息的展现更加清晰，提高阅读效率，从而提供给用户舒适的使用体验。加快认知速度。这意味着用户在使用产品完成特定的任务时，例如发送消息，预订酒店房间或乘车。用户能够连贯地理解并找到下一条信息或下一步要采取的步骤。
2. 响应化
因为人们使用不同类型的设备与产品进行互动，从智能手表的小屏幕到超宽屏电视，交互是流畅的，并且没有固定的尺寸。使用产品时，人们通常会在多个设备之间切换，以完成该产品的单个任务。所以响应式设计不应该是一种品，而是一种必需品。这意味着设计师不能再为单个设备的屏幕构建。多设备环境迫使设计人员根据动态网格系统进行思考，而不是固定宽度。使用网格可以跨不同屏幕尺寸的多个设备创建连贯的体验。
3. 加速团队协作设计
当多位设计师共同设计产品时，一个统一标准就变得尤为重要。如果没有一个统一的框架去约束的话，我们的产品的页面和组件的标准可能各式各样，这样的话整个产品的页面都会比较混乱。因此，网格系统有助于将界面设计工作分开，因为多位设计师可以在统一的布局下进行不同部分工作，并且无缝集成并保持连贯。
4. 加速开发并保证视觉还原
大多数设计项目的实施，涉及到设计者和开发者之间的协作。栅格化提高了页面布局的一致性和复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率、并能帮助开发者实现较为理想的设计还原。
1. 列和槽（Columns and Gutters）
列（Columns） 和槽（Gutters）。列（Column）是内容的容器，水槽（Gutter）用来调节相邻两个列的间距，把控页面留白；列和列间距加上页面边距（Margin）加起来屏幕的水平宽度。列和列间距的内容区域（Content width）由 N个列和（N-1）个水槽组成。通常情况下，web 端采用 12 列，平板采用 8 列，手机采用 4 列。当然，你可以根据项目特点来设计你的网格系统，列和水槽的宽度我们可以利用 8 点网格系统来定义，下面会讲到。列的数量越多，页面就会被分割得越「碎」，在页面设计时就会越难把控，适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的页面设计，列间距宽度数值对页面的影响，与外边距大体类似，即间距越大页面越轻松简单，反之亦然。用户已经习惯通过鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容，因此竖直方向可以无限延伸，所以栅格系统在竖直方向的栅格可以不体现出来，我们在执行设计时只要在水平方向保持规律的变化就可以了。
2. 页面边距（Side Margins）
页面边距就是内容区域（Content field）以外的空间，比较推荐的设计就是页面边距可以随着屏幕尺寸的增大而增大。页面边距在移动设备上通常是 12Px到 40Px 之间，在平板设备和桌面设备页面边距变化就相当多了。在响应式设计中，你选择了一个页面边距之后，缩小页面宽度时页面还是会有你设置的最小页面边距，直到到达下一个响应点（breakpoint）。当你增大页面宽度时，页面就有更多的页面边距，直到页面宽度到达下一个响应点（breakpoint）。
3. 模块（Field Elements）
模块就是你的设计区块，可以是一段文字，一张图片，或是其他更加丰富的元素。背景元素并不能算作是设计模块，所以并不需要遵循栅格系统。模块的定义是很灵活的，它可以是个小的单位或是元素，也可以是一个元素丰富的区块。
以 12 栅格系统为例，一个 12 栅格系统可以根据业务需要被 2 等分、3 等分、4 等分、6 等分、12 等分，还可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不对称分割，具体采用哪种比例的组合需要我们根据自己业务需求来定。
4. 8 点网格（8pt spatial system）
栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后再填充内容、调整细节。
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位「网格」的大小。目前最普适易用的就是 8 点网格。我们也可以利用 8 点网格法来制定产品中的间距，建立 8 点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。8 点网格有如下几点优势：
如果设计上没有立即可识别的间距系统时，这种设计可能会让用户感觉廉价、不一致，而且通常不值得信任。如果设计上遵循一个 8pt 网格系统时，节奏变得可预测和视觉上的愉悦。对于用户来说，这种体验是经过修饰和可预测的，这增加了用户对品牌的信任和喜爱。
无论有多少个设计师在协同合作，现在都有一个一致的间距规范，决策成本将大大降低。设计师可以轻松地从另一个设计师停止的地方开始设计，或者轻松地并行构建。我们定义下规范可以及时和开发同学沟通，因此可以为工程师节省时间。
5. 基线网格（Baseline Grid）
基线网格由密集的水平行组成，这些行提供文本的对齐和间距准则，类似于您在直纹纸上书写的方式。在下面的示例中，每 8px 行在红色和白色之间交替。
△ 基线网格
提示：将所有行高设置为基本单位（8x 或 4px）的增量非常重要，这样您的文本才能与基线网格完美对齐。
△ 字体行高
1. 什么是响应式？
设计师需要通过设计让内容在不同的平台上体验最大化，确保让用户在任何一个屏幕上看到内容的时候，会觉得这些内容就是为这个平台而设计的，而不是单纯的缩放而来。这种无缝的体验，才是跨屏幕设计的真正难点所在。想要制定一套针对不同设备和屏幕的设计方案，你需要一整套的策略。用户体验同时包含了性能、交互、效率等多方面内容，也就是说，对于一个线上的响应式页面，我们不仅要关注视觉上看到的，也要关注我们操作、使用时的感受，这些综合因素最终影响着用户使用时的效率与体验。
2. 响应式设计的核心步骤
确保核心的用户体验
虽然用户体验是无处不在的，但是对于特定产品，最核心的体验是存在的。产品通常是用来解决用户所面临的特定问题的，它的这一特质让产品变得有意义。关键的内容和关键的功能的组合，通常构成了产品的核心用户体验。如果你并没有想明白这个问题，不妨问问自己：用户需要完成哪些最常见/最重要的任务？找到问题的答案之后，你的产品就应当从各个方面、各个渠道，完整而全面地支撑这些功能，帮助用户完成这些任务。举个例子，Uber 的核心用户体验是随时随地叫车，无论设备的屏幕大小如何，你进行的设计全部都应该围绕着这个需求和功能来进行。叫车是 Uber 的核心功能，即使使用 Apple Watch 这种极小的屏幕尺寸都应该顺利地完成这个任务。
敲定你的产品所覆盖的设备类型
现在的移动端设备屏幕尺寸各不相同，单独为某一个设备设计内容无疑是不现实的。根据你的产品覆盖人群、受众分类、使用场景，综合考虑你的内容会优先呈现在哪些设备和平台上，然后有意识地筛选出常见的设备类型：手机，平板，桌面端，智能电视，智能手表……
不同的设备组合通常是基于不同的场景、需求和服务来构成的，用户会针对不同的屏幕进行不同模式的交互，甚至处理的内容也会有差异。比如说，在手机上，用户更加倾向于使用轻量级的任务，并且进行一定量的沟通和交流。在平板上，用户行为更多集中在内容消费上，并且目前平板的使用量被认为在逐步降低。桌面端依然是用户完成较为专业、复杂任务的首选平台，足以应付复杂多样的内容。了解各种设备类型和使用场景是用来构建用户体验的关键。
针对不同内容来匹配用户体验
并非所有的内容都符合不同设备的使用场景，比如智能手表就不适合展示大量的文本内容。你的产品所覆盖的设备组当中，每种设备的使用场景不同，应该匹配的用户体验也不一样。移动端用户和桌面端用户的需求就是不同的，场景差异也很大。以 Evernote 为例，它可以在多种不同类型的设备之间同步和切换，其桌面端版本就针对用户的内容需求进行了优化：Evernote 的桌面端应用程序针对阅读性的内容和多媒体进行了优化，而移动端的 Evernote 则强化了拍摄记录、图片和音频记录的功能：其次，不同的设备屏幕具备不同的输入方式，设计师如果忽略输入方式上的独特性，也常常会出现许多问题，这里就不扩展开来了。
优先为最小的屏幕做设计
一直以来，设计师都习惯从最大的屏幕着手设计，最后考虑最小的屏幕上的显示效果，这意味着绝大多数的设计都是从桌面端开始设计的，通常桌面端的内容和功能更全面。当桌面端的整体设计完成之后，再推进到其他设备端的设计。然而，在进行桌面端设计的时候，我们常常会遭遇「厨房水槽」困境：由于产品通常会牵涉到多个利益相关方，许多多余的功能会被加入进来。而实践经验表明，移动端优先的设计往往能够更好的专注于核心功能，更适合作为产品设计的起点。当你优先设计最小屏幕所需要的界面的时候，这种局面会强制你从最关键最重要的地方开始设计。这也是之前设计圈和产品开发领域一直所强调的「移动端优先」的策略的由来。在此之后，再进行平板、桌面和电视端的设计，就是一个自然地做加法的过程了。在绝大多数的案例当中，最小屏幕通常是手机屏幕。
测试你的设计
产品的测试环境并不一定都得是在现实世界中寻找，但是在尽可能让真实的用户来做可用性测试，并且在产品发布之前解决所有的用户体验上的问题。
3. 为何要利用栅格系统来进行响应式设计?
响应式可以响应的前提有两点：1、页面布局具有规律性、2、元素宽高可用百分比代替固定数值，而这两点正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较快捷，所以响应式与栅格化天生一对好搭档。
第1步：确定列的数量
第一阶段先不要限制自己的列数。首先，创建一个低保真或高保真的原型。设计一些基本元素和用户流程。在此之后，就开始设计最优的列数和大小。如果在项目开始设计之后不得不改变我们的栅格系统，不要有负担，我们需要有一些试错的空间。
我们在设计页面时，用到最多的布局方式就是等分布局，即页面内容区域被 N 等分，每一份的宽度则根据屏幕宽度自适应调整。那么就从这个角度出发，思考一下页面的网格应该设置为多少列，才能的满足各种等分布局的需要。与 web 类似，移动端最方便的网格之一是 12 列网格。这个网格将允许我们在一行中同时放置偶数和奇数个元素。
对于移动端来说，12 列网格的缺点是一个列的宽度太小，你可能很少创建一个列宽度的元素。如果你选择 2、4 或 8 列网格，请记住在一行中放置奇数个元素可能会出现的问题。
Pro-Tip：
界面设计通常包含数百个不同的页面，因此，一个网格可能不适合所有的页面。如果需要，创建额外的栅格系统，但不要忘记设计的一致性。网格系统的一致性：相同的布局边距、列之间相等或成比例的水槽，以及更改列本身的宽度时其他模块也需要保持相同的比例。
第2步：定义水槽和边距
首先，让我们先翻阅目标屏幕的设计 Guideline，以找出通常页面边距（Side Margins）。目前，Android 和 iOs 的最小推荐布局边距为 16pt。web 端则依照屏幕尺寸不同而不同。这意味着，如果你希望遵循系统指南，则页面边距不应小于 16pt。（但可以更大的）
在选择 12 列网格时，列之间的水槽不应该太大，因为由于列的宽度小和它们之间的大宽度的水槽，列将在视觉上产生分裂的感觉。同时我建议你选择与8pt 间距系统成比例的水槽大小。所以布局的水平和垂直节奏会相互重叠。水槽与页面边距成比例。那么网格更加一致，也将允许我们轻松地在其中放置特殊元素，如轮播（carousel）。
第3步：定义 8pt间距系统
了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗。在大量的实践中，我们提取了一组可以用于 UI 布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好地实现布局空间上的设计决策。定义网格系统方法很多，如运用 8 点网格系统、斐波那契数列、某最小原子单位的增量、从底层系统参数化定义间距等，我们以最小原子单位的增量为例去定义网格系统。最小单元格的数值选择需要从两方面考虑：
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4px 表现最佳，但是页面就会被分割的非常细碎，在设计时比较难于把控。因此我们需要根据 APP 的实际情况选择合适的数值，4px 或 6px 单元格比较适合页面内容信息较多，布局排版比较复杂的产品。而 8px 单元格对一般的设计场景都可以很好的满足，比较适合大多数的 项目，因此是比较推荐使用的。
那么假设我们以 8 为基准的去延展系统间距，得到如下间距系统：
1、2、8、16、24、32、40、48、56、64、72、80、88、96、192 等，这里都是 8 的倍数或能被 8 整除
但是目前间距数量太多，过于细碎也会导致间距比较乱，所以我们继续优化梳理（以 6 为基准，前面个数是后面个数的 2 倍递增），得到以下间距系统：
1、2、8、16、24、32、48、64、80、96
第4步：sketch布局设置
利用 sketch 的布局设置功能，即可快速搭建出网格系统的参考布局，在平时做设计的过程中，可以经常使用 Ctrl+L 快捷键切换布局的显示，提高设计效率。
我们来解释一下这些设置分别是什么：
在传统的栅格化系统设计中，列的宽度和水槽的宽度是保持不变的，只是列的「数量」发生变化。为什么要这么处理呢？这是为了让设计更简单。如果一组三张卡片分别放在桌面的四列上，那么在平板电脑上，会显示两张卡片，并把第三张卡片进行折行显示在第二行上。不需要做任何的调整，因为已经知道它位于第四列上了。在手机上，答案也很简单，只需要一张卡片，其他的就会自动堆到下面的行中。但是目前我有更多的响应策略，例如当视窗（Viewport）发生变化时，内容区域的元素如何去响应，具体到我们当前的栅格系统，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 组成的盒子（BOX）四者的值（主要是宽度）如何变化，以及在这种变化之下我们页面的布局如何调整。
1. 固定栅格或是断点系统（Fixed boxes or breakpoint system）
固定网格，列宽和水槽宽不会改变，只是改变列的数目，当窗口缩放时，排版布局不会发生任何改变，只有当达到一个临界值（开发那边设置好的固定的值），界面才会发生改变。在此之前界面排版都是不变的，就像一部分被切掉了。
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在桌面的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到平板屏幕尺寸临界点时，设计布局马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。下面是常见的断点系统（Breakpoint System）
如图，响应式是以视窗的最小宽度作为基本依据来制定每种宽度下 Columns、Gutters、与 Margins 的响应策略，也就是说 Viewport Min-width 是做出响应的触发条件，视窗每达到一个最小宽度，就会触发该宽度下预设的页面布局方式，而每种布局都是在该宽度下的最佳布局，也是因此，响应式才会在各种复杂分辨率条件下都能给用户比较好的体验。
每个视窗宽度的最小值是触发响应的关键值，因此我们给这些用于触发的关键值起了个名字叫「Breakpoint」，每个 Breakpoint 触发一种响应策略。
2. 流动栅格（Fluid Grid）
流动栅格系统是编辑内容，仪表板，图像，视频，数据可视化等理想的响应策略。当窗口缩小时，内容将动态地发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。在各种情况下，对用户来说，扩展内容的大小比扩展可见内容的数量更有用。
所以我想说的是，断点 BreakPoint 只是一个更改布局的参考点。这就是为什么列宽和水槽的数量不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。内容宽度会随着窗口的缩放而发生改变，例如图片会缩小，文本会换行。水槽的宽度不一定是固定的，可以随着页面宽度变化。
在每个断点处，列计数是固定的，列宽度是最小网格 8PT 的倍数。行高是列大小的倍数，遵循推荐的纵横比。边距和填充是小单位的固定倍数。在断点之间，实际列宽是网格区域的百分比，而不是一个小的单位倍数。内容尺度流畅。
首先从所以屏幕大小中选择一个基本尺寸，然后按照推荐的纵横比以基本大小的倍数构建每个响应式尺寸。当每个块使用相同基础大小的倍数时，就会出现网格。遵循此方法可确保栅格系统一致性，甚至跨产品的一致性。
3. 混合栅格（Hybrid Boxes）
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。后台系统设计、工具型的界面设计就比较经常使用网格和流动网格组合的形式。例如的后台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格。混合栅格在每个维度上有不同的缩放规则，所以它们不使用统一的缩放比。当用户需要调整浏览器的大小以使内容在一个维度上伸缩而在另一个维度上不伸缩时，便使用混合网格。
1. 灵活面板（Flexible panels）
灵活的面板允许折叠和扩展状态。面板的展开状态为固定宽度，用户无法调节。当用户将鼠标悬停在折叠的面板上时，面板就会展开。当灵活的面板扩展时，它们要么压缩内容和网格，要么将内容推到浏览器边缘之外。
2. 固定面板（Fixed panels）
固定面板保持静态宽度，不能折叠，也存在于响应网格之外。
3. 悬浮面板（Floating panels）
此面板样式漂浮在主要内容区域之上，不影响响应网格。浮动面板将任何 UI 元素隐藏在其下方，用户必须将其移除。内联菜单、下拉菜单和工具提示也是浮动的。
写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统，我知道对于我自己来说，我花了很多时间理解网格是如何工作的。我在 YouYube 上看了很多视频，也阅读了大量的文章，但每个人都在关注它为什么重要，却不去注重到底怎么在自己的项目中使用这些原则。
你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，你将会开始阅读这些设计系统。为了帮助理解，这里有一些设计系统概述了它们的网格使用：
在完全理解了网格的工作原理之后，你将成为了一名更好的设计师，因为你知道了你的设计将如何在临界值之间进行转换。你也可以落地你的设计，使它们能够达到像素级完美。这样的规范带来了更一致，更简洁的设计，当用户从一个界面到另一个界面流转时，这真的提升了产品的档次。我建议在你的设计中去应用这些网格，并和开发同学一起，以实践的方式将它们落地，这将会是一个非常不错的进步。
文章来源：优设 作者：IvanZheng
有时候做国风的设计作品，如果选择黑体和宋体可能太过端正，但选择书法字体的话，可能因为飞白或过度连笔导致字体不容易识别，那选什么字体呢？我建议大家选择楷体，注意不是选系统自带的楷体，而是今天推荐的演示悠然小楷，字体手稿由一位美丽女生书写，其字体有着悠然自得、闲情逸致的气质。
「演示悠然小楷」是由 keynote 研究所 x 秋叶 PPT 联合发布的一款免费商用字体，推荐设计师们收藏或下载。下载地址见文末。
1. 青春/知识
△ By@伟崇
2. 文学/历史
△ By@伟崇
3. 游戏/小说
△ By@小敏
4. 中式地产
△ By@伟崇
5. 商务风
△ By@伟崇
8. 主视觉设计
△ By@画生
△ By@画生
9. 海报物料
△ By@画生
△ By@画生
△ By@画生
10. 电商广告
△ By@画生
△ By@画生
△ By@画生
11.文字排版
△ By@画生
△ By@画生
12. 品牌形象设计延展
△ By@画生
△ By@画生
△ By@画生
1. 思源宋体
△ By@澄音
2. 方正宋刻本秀楷
清刻本悦宋用得多了，不如试试这款有些相似但又有不同的「方正宋刻本秀楷」，较之前者字形更为周正，笔画更为果决，娟秀之中蕴藏力量。
△ By@画生
3. Garamond
Garamond 是一款古朴传统的衬线字体，在西文体系中历史悠久，恰因没有特殊的个性而被广泛使用，是老式衬线体中最具代表性的字体，与同样以端正工整为名的楷书作搭，最能相互映衬。
△ By@画生
4. 阿里巴巴普惠体
基础黑体的字体没有复杂的修饰，进一步弱化次要信息，强烈对比下让主角得以更好的突显，也让画面层次感更加丰富，而基础型的黑体，必然首推阿里巴巴普惠体。
△ By@画生
下载地址：https://pan.baidu.com/s/1ohOK2RSEA9vsfHAbfvpZmw 提取码：ypae
通过一些案例进行比较与实验，探索如何将 UI 深色模式设计得更好。
iOS 作为 UI/UE 设计的风向标，一直是行业的引领者，不管你愿不愿意承不承认，他的每一次更新变化总能带动 UI 设计行业的一些大大小小的变革，并且产生更多的追随者，比如当年的 iOS7 开始的扁平化设计风格，对后续设计风格的影响直到现在已经 7 年了。
在最近半年，iOS 在 UI 设计风格上最大的变革莫过于 DarkMode（深色模式），在 DarkMode 之前，我们熟悉的 UI 界面往往都是浅白色界面为主，而从 iOS13 开始正式使用了 DarkMode，界面突然可以变深色了，苹果官方说这样设计可以让眼睛更舒服地长时间阅读，为革命保护视力，而且更加省电增长续航，具体结果我们不得而知，需要科学家们去验证了，但是对于我们设计师来说带来的挑战就是要「黑白无常」了。
其实 DarkMode 从测试版算起已经差不多推出了有半年的时间了，一些知名的 APP 产品早已经有了自己的兼容方案，同时 iOS 原生界面也给了我们很多最佳实践案例，按道理大家对于 DarkMode 的设计方式方法应该已经掌握了差不多了，但直到这几天微信正式推出了自己的 DarkMode 兼容方案，才发现对 DarkMode 的探索还需要设计师们多多努力。谨以此文表达一下自己的观点，不妥之处敬请海涵。
列表视图（TableView）是 iOS 中最常见的界面组件，一般常见于设置与栏目列表页面：
iOS 设置界面的浅色模式和深色模式看起来都非常协调。
下面我们看看微信发现页面，这个页面和 iOS 设置是很相似的。
如果单独看微信发现页面的浅色模式实际效果还是不错的。
但是直接转换到深色模式下就感觉突然差的很多了，甚至可以说是有点难看，这次微信真的做了一次黑天鹅？
到底是什么原因让微信发现页面在深色模式下视觉体验如此之差呢？
我们不妨将两个功能布局都相似的深色进行放在一起进行一下比较：
组成色彩分析：
在色彩这块在这两个页面中微信和 iOS 基本保持一致，四层灰度设计能更好的保持页面整体干净整洁且层次分明，但是在 A 背景色上，微信的背景色选择了黑色偏绿的颜色，应该是微信设计师还是想体现出产品的标志色原色。
文字的颜色也较 iOS 略微深一点，但是在整体上影响并不大。
看来在主要色彩上并没有什么问题，那么为什么微信这个界面与 iOS 界面比起来视觉上要感觉差一些呢？
下面来看一下图标
图标设计分析：
图标上的差别主要在于线宽与外框，微信采用无外框统一线宽的线形图标，iOS 采用的是有外框剪影图标。
我们我们把图标进行互换会怎么样呢？
观察到了吗？别看错了！
是的，我故意把位置做了对调，左边是 iOS，右边是微信。替换图标后的微信明显加分不少，整个界面都整齐多了，而 iOS 换了图标后明显变得不够整齐了，潦草很多。
那么结论是微信的无框线性图标在深色模式下兼容有问题？是的，的确如此。但是等一下，还有一些细节你注意到吗？换了图标的微信界面和之前的 iOS 界面比起来明显还是有点不够整齐，为什么呢 ？
我们回过头来从细节再看一下 iOS 界面。
我们按照这个思路把刚才微信替换图标界面再排序一下！
△ 界面视觉体验明显整齐了很多是不是！
疑问：
为什么细线图标和无框图标会在深色背景表现不够好，而在浅色背景下就没问题呢？
是不是所有的 UI 都会存在这样的问题呢？
我们再来看一些例子：
看来结论是一样的，线性图标在深色背景下的表现都是差强人意，反观带框图标适应性很强，浅色和深色模式下均能良好的适配，我来分析一下原因。
当年伽利略用望远镜往天上看，发现木星比金星大，换成肉眼看后金星则比木星大。他认为是眼睛的某种视觉特性造成了这种现象。
德国物理学家赫尔曼把这种错觉称为辐照错觉，就是说在黑暗背景下，亮度越高的物体看起来面积越大。
再来看一张图片
哪个圆圈看起来更大，显然是黑色背景下的白色圆形，实际上这只是一种错觉，所有圆圈是一样大。
光亮刺激会使得神经元产生非线性放大作用，导致刺激比实物本身看起来更大，白色圆形更亮，所以看起来更大一些。
线性图标是用线条勾画图案达到隐喻效果，一般线粗是 2px~6px 像素。
设计师在设计时都是以最终视觉作为参考，而设计稿本身多是浅色背景，所以在浅色背景的映衬下图标视觉会显得稍大，视觉基本是平衡的，假如设计是 4px 而呈现出的效果其实是 6px 左右。
是不是觉得哪里有点不对了？按照这个逻辑黑色背景下白色线图标不应该是视觉更大、更明显吗？
我们还需要考虑一个因素，那就是色彩，之前的几个界面案例的线性图标都是彩色的，特别是黑色背景下，不同色彩的图标放在一起，会有明显的忽大忽小的感觉，会让界面感觉非常凌乱。
是不是感觉黄色最大，红色的最小？但是其实是一样的，这还是相同形状的，要是图标形状不同感受会更明显。
看一个实际中的例子：
由于都是单色线性图标，在浅色和深色下表现还都不错的，但是单色图标略显界面单调，并不太建议这么设计。
毫无疑问，未来的 UI 场景需要适配多背景色风格，图标除了具备好看隐喻之外，更需要具备抗干扰性。
带框图标是一个不错的解决方法，大胆预测带框图标会将成为未来一段时间图标设计主流！
本文来和大家讨论数值框架提取与数据分析运用是怎么相辅相成来推动游戏化项目，帮助设计团队提升设计专业性和展示产品思维的。分为 2 大块：如何在设计中平衡效益、如何衡量设计价值。下面会从这 2 个游戏项目：独立小游戏《嘛哩嘛哩汪》、会员游戏《天天加速》来剖析。
要了解这件事，首先需要简单介绍下什么是数值，在游戏公司里有个职位叫数值策划，他是解决游戏里数值平衡和经济平衡的。在这里，我们不用专业术语，我们的也没游戏公司的那么难。我总结一下电商里容易理解运用的，就是这么一条公式：
下面讲的时候大家可以用这个思路（文中都叫数值框架）来理解并试试能不能运用。
1. 快速理解游戏的玩法（数值框架的运用）
举个例子，我们之前做的独立小游戏《嘛哩嘛哩汪》，用户可以领到一只同样的小土狗，通过不同的社交玩法：比如战斗，发送偷偷告白的小纸条等等，最终把自己的狗狗变成一只的萌宠换装养成游戏。
它的主要功能模块有采金（收金币）、对战、魔法屋（换装）。
有货币系统（金币、钻石、氪金）、等级系统（阶级经验值）、任务系统、道具系统（商店、背包）、社交系统（打 call、好友、消息）等。
这样乍一看，是不是觉得有点复杂？其实只要抓住关键流向节点，比如主要货币金币、成长体系的经验值，这种流入流出最频繁的地方就是关键流向节点，再把游戏主要功能系统串起来，主要功能就是关键流向节点流向最多的地方。这样串联起来就非常简洁明了，一眼就知道这个游戏怎么玩（如下图），通过采金、pk（主要功能）得到金币（关键流向节点），可以用来购买新装备去换装（主要功能），但需要靠做任务（社交、互动）去提升经验值（关键流向节点），才能不断解锁新装备，养成一只的狗仔。
当提取了最简单的框架后，再去细分支线数值，会清晰很多，最后细化的数值从系统的组成和期望去架构数值表和体系：如何实现、从哪里获取数据、如何方便又泛用化表格、精简配置、去除冗余数据等；大白话就是解决比如：升阶太慢，要调整；金币太快，装备很快买完了，玩不下去了，要调整；用户可操作太少了，要调整；装备售价多少金币，多少钻石适合？道具使用时长多久？任务成就奖励怎么设定，要送用户什么？等等这些问题…….
而这些在项目后续可能会困扰的问题其实在初期设计的时候就可以先规划，照顾到。
2. 数值框架在其他项目中的运用
这样的思路也很适合分析运营活动，快速抓住别人玩法中最吸引用户的点，包括自己设计的时候也可以在前期就自我评估项目成本。大家可以拿淘金币和叠猫猫用这个思路试试看，这边是比较早期的分析，淘宝的迭代太快了。
先看看 19 年 6 月前的淘金币，已经有在大促的时候开垦土地，我们不说视觉，先来分析下它的布局思路。
用公式代入看看，业务的诉求植入在领水滴任务中，关键流向节点是水滴和金币，节点流向最多是种地（图中种子，这里讲功能），投金币。非常清晰的框架。而且棒的是大促期间只需要复用同一套框架变成种宝贝，这对多方来说效益是高的。我们可以看到现在很多都在做这个模式，也就是把框架工具化了，换皮不换骨。19 年双十一的全民开喵铺几乎把它套用到所有的阿里旗下产品，（下方图左）底部的任务入口（领喵币）和辅线内容（领组队红包）均根据产品来配置，设计的时候规划得很清晰。（下方图右）当养成思路之后在活动刚出体验的时候就可以分析它的设计框架意图，无需过度依赖网上分析也能知道它好在哪，自己设计的时候也会有好的借鉴。
那在做游戏化产品的时候，里面就有很多东西需要考量植入业务诉求后的平衡了，但游戏玩法肯定是相对简单些的。
3. 理解业务诉求和游戏玩法关系
拿游戏化产品-会员游戏《天天加速》举个例子。
天天加速是一款宇宙救援世界观的游戏，以加速为核心玩法。把产品的各项目标植入到加速的道具中，用户如需获得道具需要完成产品目标，获得奖励，从而实现双赢。
拿主线来说，如下图展示我们植入业务诉求的时候，按那条公式思路来思考，业务层级越高（越难做，比如购买），游戏中设定层级越低（不强推），但游戏和现实中反馈都越多/强，去激励用户做重任务。这样简单罗列，就可以让双方同学都容易理解，并提前规划后台配置和配置的数值建议，给运营同学留出后续自运营配置的空间。
副线射击游戏也是，按照这种思路，把成本均衡到，几乎相同的玩法，不同的配置成本差别是很大的，下表是对玩法影响最小的，这些产出比都会影响业务方是否为你的功能玩法买单。
当建立了数值框架后，对后续上线的数据分析和推导下一步的迭代有很好的指导作用，因为你清楚知道数据的用户操作行为、可以知道用户是怎么流失的，再综合客户的投诉建议，用研同学的调研，可以较全面的整合处理。
这里还是拿游戏化产品-会员游戏《天天加速》举个例子。主要从以下3个方面，通过《会员游戏-天天加速》这个项目不同版本迭代来讲。（具体数据均不能透露）。
前面已经介绍过游戏是怎么玩的，这里直接讲 1.0 数据结论：在上线 7 天的时候就超额完成 kpi 了，其中 pv 是 kpi 预期 2.5 倍，任务完成率是 kpi 3 倍，近 90% 的用户都来打卡签到。超出我们预期挺多的。
但是数据好=我们的价值么？这也是我们从开始做就很想验证的，我们来看看方式。
建立数据体系、量化设计指标
在前期就和业务方达成共识，把他们的 kpi 指标任务活跃和用户上行，拆解成了游戏中的具体指标。再根据指标，对应到游戏中用户完成操作的行为流程，便可对应 kpi 的数据埋点。
最后，等埋点数据出来了，再用工具具体分析。流程可以看下图~
每周根据数据，发现规律、解决问题
具体的分析，我给大家举个例，这里是各个 kpi 数据的长线跟踪，一个点的数据是说明不了问题的，重点在怎么去维持和提高。第一张图可以看到，项目上线后，uv、pv 稳定上升，但在第 6 周开始回落，我们需要敏感地察觉，并且进行分析，作出反应。当我们快速调整上线 2.0 的时候，在第 11 周数据又开始回涨。
所以需要我们对数据敏感，有解读能力，和对项目的深刻理解。不然数据就只是数据，结论可能是因人而异的，当然有现成后台直接看数据结论最好，但没有的时候也得能处理，野外求生技能还是得有的。
构建合适的数据分析框架
我把如何分析数据的全流程复制下来，每周都会把收集的数据进行梳理，按照流程把各 kpi 的数据梳理一遍，发现问题就去沟通解决推动。这样也保证项目数据能持续稳定地增长。
其实做到这一步，我们已经是项目密不可分的一部分了，谁又能否定我们的价值呢。
那数据分析除了能验证设计的价值，还能做什么？
我们再来详细说说，是如何通过分析数据指标提升游戏体验的。我们按版本迭代来看看。
首先，我们可以把数据分成两个层面去看：用户操作数据和产品目标达成数据，业务方更多关注的肯定是产品目标的达成数据，那我们就多分析用户操作数据，2 边汇集，能更好地推动项目。
我们举些例子～
刚说了数据需要长线跟踪，需要发现变化规律，那如图，到了第 7 周，发现数据开始回落，但依旧超过了 kpi。我们去梳理原因，最大的原因是游戏 1.0 只上线了最简单的核心玩法，用户回访多，但没有太多可操作的内容，久而久之，回访自然会下降，所以我马上拉着产品讨论稳住 pv 的方案，同时还满足产品新诉求，植入发放优惠券，并且需要快速上线。这就是 2.0 版稳住 pv 的方案，事件系统，就是画面一中，右下角的小信封。用户每次回访，都有事件系统可操作，系统里会根据问答随机给到优惠券或者游戏道具。保证用户每次回访都有事可做，有利可图。
的确上线后数据开始回涨，也是首次破 8，数据是暂时稳定了，但是我们也明白这个版本下用户没有长线留存的理由。我们必须给用户带来积累感和晋升感，才能让用户对自己的付出有感知。于是我马上策划和实现了长线粘性的新增玩法，让用户除开机械的事件操作，还有主动的互动操作。
在图一主页面的左下角，有了一个寻宝行动的入口，是个射击游戏，用户可以通过击落陨石获得高分开宝箱，得到更多用于飞船升级的核能源，积累越多可以换取越高阶的飞船，对应更丰厚的奖品，因此长线的留存在游戏中。
前两点，我都在不断地去帮助产品达成目标。那我们是不是可以再去拓宽设计的边界，提升产品的目标呢？
当我们上线 1 个多月时，得到了向好的业务数据，但是我们知道，这是基于用户的基数大，11% 的转化已经可以带来这么大的订单额，如果我们能撬动另外 90% 的用户呢？因此我去分析了游戏用户，发现对促销敏感度高的用户，不管是在全量用户还是核心用户中，都超过 70%，是相当明确的用户类型。
于是有了这三者的考虑：
优化转化目标、寻找合作可能性更高的业务方向、结合我们核心用户的促销敏感度高的特点，也去挖掘了一些方向。考虑产品运营成本实现的方式去出了 2 个方案，
第一个方案：转化入口的优化。
用户要得到虫洞道具，需要去购买商品。业务诉求有发券的 kpi，那在购买同时配合得到类目优惠券，这样就能大大的提升用户的购买诉求。
第二个方案：植入事件系统
系统事件，之前是只有送优惠券的功能，现在加入跨品类低价商品的推送+对应优惠券的功能，再次打游戏用户对价格敏感的痛点，目标是提升两者的转化。
当然业务有更多深入的考量，我们既然有一些想法能共同推进项目，那就多多沟通交流。
那到这里，文章终于要结束了，通篇其实是在通过实际的项目告诉大家数据框架（开篇那条公式思路）和数据分析能怎么贯穿整个项目，怎么去平衡各方成本，相辅相成地去推动项目、验证设计价值的。
最后一点小体会，在做这 2 类项目中，我最深刻的感受是独立小游戏里游戏内容是绝对主角，难点在没接触过的游戏引擎技术的攻克和数值的实现打通（游戏资质和法务问题也很麻烦），而游戏化产品里业务诉求和游戏化的包装是双主角，难的是两者的紧密结合和推动落地。第二种在策划的时候很容易把玩游戏当成主题，但电商公司做游戏化最主要是想让用户多回访，在平台购物，带来商业效益。因此，前期都比较阉割，需要看到它为业务带来实际效益，才有后续的为「趣味性」买单的资源研发投入，这个「游戏」的取舍其实挺难过的。
文章来源：优设 作者：JellyDesign
网师分层对平台的重要性不言而喻，诸如阿里这类的电商平台都有完善的商家分级体系，明确了不同等级的权益和运营策略。
2019 年底 CCtalk 平台的网师数量达到了一定规模，平台的基础能力建设也相对完善，因此网师分层的事宜被提上日程。此前我们评估网师的方式是按照流水，将网师分为普通网师、中部网师和大 V 网师 3 类，不同网师对产品功能需求及运营要求差别很大。这种粗略的划分方式可以帮助简单评估网师，但并没有产品化，而且只有单一的 GMV 维度，不够全面客观。有些客单价较低的网师也有大量的购课学生，他们对平台的价值也高。因而我们需要推出一套综合网师流水、招生数量、内容质量等多个维度的方法来进行分层运营。
面对以上问题，相应的解决方案是：
既然是涉及全平台网师的重大升级调整，当然要从全局的角度来进行价值分析。我在这个项目中探索了用于多角色价值分析的「三维价值分析法」，从整个关系链的角度来解析网师分层对网师和平台的价值。
Step1.列出相关利益者
分别包括：CCtalk平台、网师、学生。
△ 列出相关利益者
Step2.设定中心点并建立关系
分析连接这3种角色的关键点是什么。我们CCtalk作为一个在线教育平台，最核心的因素是内容，因而将中心点设定为「内容」。（注意，如果此时是做某个具体功能相关的项目，那么中心点可以是这个具体的功能，例如「作业」或「直播」）设定中心点后，建立不同角色和中心点之间的双向关系。
△ 设定中心点并建立关系
Step3.进行全局价值分析
在上一步的关系网的基础上，用圆弧连接相邻角色的价值走向关系，从全局的角度进行不同角色间的价值分析。
△ 进行全局价值分析
从上面的三维图中可以看出网师分层对于平台和网师的价值。
对网师来说，有助于：了解成长路径，获得更多产品运营支持，获取更多功能权益。
对平台来说，可以：筛选网师，激励网师自驱动，增加收入。另外，还有一些间接的价值，包括通过督促网师生产高质量的内容来提升平台的价值，通过督促网师积极招生来扩大用户规模。
△ 网师分层对于平台和网师的价值
刚接到需求时，我内心的 OS 是：大项目！概念大，范围广，都有点不知从哪里入手。
冷静下来分析，网师分层本质是一套针对商户端的激励体系。从下往上拆解：由底层商户活跃度来计算经验值，根据经验值划分商户等级，并赋予不同等级不同的权益，权益包括教学核心功能：直播时长，素材存储空间，课程人数等。再向上衍生到不同权益对应的使用场景，以及权益的扩展方式。
△ 分层拆解
从设计层面，分为信息展示和场景触达两部分。这么一看，其实又挺简单。
由于项目涉及的底层逻辑多，时间周期跨度大，因此拆分成 3个小版本来实现：商户权益改造，经验值等级底层 & 商户等级外显。前期的功能实现后，先预埋在版本中。等到经验等级上线时统一发布。其中经验值等级底层项目是纯技术，不涉及设计。
所以下面将从功能权益分层和等级经验值外显两部分来讲解具体的设计过程。
功能权益分层是权益的使用层面，包括多场景触达和引导购买增量包。设计时分为场景梳理→设计要点→细化直播场景→具体设计这 4 步来实施。
Step A.场景梳理
拆解权益的生命周期，可分为三个阶段：充足可用，即将不足，已用尽。而功能的使用场景——直播，也分为三个阶段：直播前，直播中，直播后。
Step B.设计要点
将权益生命周期和直播场景结合进行交叉分析，列出设计要点和具体的设计拆解。
△ 不同阶段的设计要点及拆解
Step C.细化直播场景
发起直播的入口很多，除了「立即直播」的主场景之外，还有由预告进入直播的 3 种场景，如果在每个入口都做功能禁用判断的话，不仅逻辑会很复杂，开发实现起来成本也比较大。
于是将直播前的流程细化，发现「直播检测」是进入直播间的必经环节，因此将功能禁用的判断节点缩减为 2 处：「立即直播」&「直播检测」。
△ 细化直播场景
Step D.具体设计
有了前期的分析后，具体设计环节就相对容易了。下面以点击「立即直播」时的功能余量判断为例。
点击「立即直播」按钮，在按钮原有的逻辑上加上新的判断逻辑，此处要注意写清楚他们之间的优先级关系。如果在不了解背景的情况下，很可能就直接写点击按钮进行可用直播时长的判断，那需求宣讲的时候开发就会问你，和原来按钮上的逻辑是什么关系呢，此时就会一阵紧张。
△ 立即直播时判断剩余可用直播时长
等级经验值属于展示层。对网师用户来说，最重要的是了解自己当前处于哪个等级以及相应的权益有哪些。对平台来说，除了明确每个等级及相应的权益，重要的是要引导网师升级，以激发他们的自驱力。
由此推导出相应的设计方法：锚定目标、降低门槛和利益点吸引。
△ 设计方法
在设计方法的指导下进行落地，分为网师后台首页的展示，以及等级详情页的设计两部分。
网师后台首页-个人信息模块的展示
由于等级和权益挂钩，涉及网师切身利益，因而在网师后台首页的个人信息模块，增加当前的经验值和相应等级的展示。同时，通过利益点吸引等方式，引导网师向下一个等级努力。
△ 个人信息模块展示
等级详情页的设计
点击等级进入详情页，除了 Lv0 是将所有权益无差别展示，其他等级都是优先展示新增部分，包括新获得的普通权益和附赠的高级功能。另外，用「箭头」和「NEW」的图标帮助用户区分是老权益的内容升级，还是新增的权益。
1. 前期缺乏深入调研
由于涉及网师的切身利益，因而此功能受到了网师们前所未有的关注。上线前一周，运营以邮件、通知等形式向网师预热，3 月 5 日会上线这么一个功能。于是还没上线就有网师来咨询在哪里可以查看。刚上线就收到了大量的用户反馈，网师反馈群里的消息简直是秒速级地在刷屏。
其中，网师对每月直播时长限制的反响最为强烈，部分网师表示平台应该鼓励多直播，不能接受对直播时长的限制。因为直接关系到上课这个核心功能，时长不够课都上不了，网师们的言辞非常激烈。所以我们又重新评估了平台的直播成本，经过深入讨论，全面放开了每月的直播可用时长限制。
带来的反思是，如果前期有通过问卷、访谈等方式进行深入的用户调研，了解他们对核心权益的态度，那么在进行权益设置时就能有更全面的考量。
2. 中高等级跨度太大，缺乏激励效果
游戏任务的上手难度曲线一般是先平缓，再慢慢陡峭，越往上难度越大。我们的等级体系其实也是这个逻辑。初级到中级还较为容易，但再往上要非常难，要经过长时间的积累，一看就无望，难有激励效果。
因而我们之后的优化方向是在相邻等级中间设定一些小目标，达到可以提前赠送下一等级的新权益，以此来提高激励效果。
文章来源：优设 作者：鱼游设计
手把手教你 「如何 7 步从 0 ～ 1 设计一款产品经理一稿过，设计风格明确，用户粘性高的软件！」
据不完全了解，身边大部分的 UI 同事都从 0 到 1 参与过一款或多款软件的设计，设计过程中不知道你是否有过这样的疑惑：
在解决这些困惑之后，我总结了一套自用的，适合从 0 ～ 1 进行软件设计或项目改版的方法 ，并在其他项目上进行了二次验证。
以实践项目 —— 有道少儿词典为例，上线一年期间，用户次日留存峰值 36% 以上，也非常幸运，被 App Store Today 推荐 4 次，App Store 编辑推荐 8 次，被 App Store 纳入 2019 本土优秀 App 盘点中，同时被预装到苹果线下直营店，作为样机体验软件之一。所以，这个方法亲测有效！
这篇文章，通过分析如何解决类似「产品经理不满意、设计关键词不对、设计风格无区别」这些问题，整理出 7 个帮你从 0 ～ 1 设计一款软件的步骤。
文章较长，大概需要花费 15 分钟，建议大家先看大纲，优先阅读符合自身情况的部分。
从 0 ～ 1 进行软件设计，免不了要多出几个设计稿，但做了 100 稿，产品经理对页面设计还是不满意的话，很有可能有 2 点原因：
一拿到需求就开始做，很容易忽略需求背后的目标，从 0 到 1 做一款新软件更是要了解业务目标和用户目标。
在提出解决办法前，我们需要先捋清楚以下 2 个问题：
为什么要了解目标？
公司开发软件是为了达到某些目标或是实现某个目的的，只有了解目标才能更好地为公司创造价值。
什么是业务需求、业务目标和用户目标？
平时产品经理跟我们说，要设计一个页面，设计 一个流程，这就是一个业务需求，而这个需求的背后，能够解释清楚这个需求是为了什么，要做到什么程度，这就是业务目标（通常包括用什么手段，给用户带来什么价值，达到什么目的）。而软件的目标用户，他们在一个具体的时间、地点、环境下做了什么操作，想达到什么程度，满足自己的什么要求，这可以理解为用户目标。
解决办法 ：多使用 「为什么+动词」 的问法，向产品经理了解业务目标、用户目标。
从 0 ～1 做软件需要了解的业务目标和用户目标，我们都可以从产品经理那里得到。
少儿词典的产品经理很早就给出了业务目标和用户目标。但，当我们需要更多细节的时候，可以使用「为什么+动词」这样的问法。例如：
- 「我们要做一个少儿查词软件，定位是一款拥有权威释义背书，在视、听、触方面打造良好体验，紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。你来做吧！」「为什么做这个？」
- 「现在儿童教育KOL越来越多，很多家长都很关心k12教育问题。市面上的很多产品都不太适合孩子使用」
- 「为什么这样的定位可以满足用户需求呢？」「为什么是适合少儿和家长使用呢？」
- 「为什么……」
在少儿词典项目中
我们既了解产品的业务目标，也知道用户目标的情况下，方案还是被 pass 的话，可能是因为你给出的方案和产品经理想要的不是同一个东西。为什么业务目标在这里不起作用了呢？怎么才能弄清楚产品经理想要的是什么？我们可以用产品关键词来回答这个问题。
为什么业务目标在这里不起作用了呢？
我们常见的业务目标的内容是很长的，用户目标的内容也是很长的，在这种所有已知内容都很长的情况下，如果没有准确理解内容，没有对重点内容达成一致，就很容易产生偏差。例如我要向你描述一位美女，她的头发很柔顺，脸蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我们脑海中想的不是同一个美女。但是，如果我跟你说，这是一个跟芭比娃娃很像的美女的时候，我们脑海中的形象会接近很多。
怎么才能弄清楚产品经理想要的是什么？
就像设计师在进行页面设计时，需要设计关键词一样，产品经理在描述自己的业务目标的时候，也需要能概括业务目标重点，突出卖点的产品关键词，这个产品关键词能帮助设计师弄清楚产品经理想要的东西。
部分产品经理为了方便大家达成共识，会早早亮出产品关键词，如果当你们的产品经理没有办法提供产品关键词的时候，我们要学会在讨论中找到。
解决办法 ：从业务目标开始跟产品经理讨论项目信息，直到获得双方达成一致的产品关键词
从业务目标和用户目标开始跟产品经理讨论项目信息，在讨论的过程中，我们可以留意产品多次提到的几个形容词，写下来，然后跟产品反复核对确认，最后双方确认且保留下来的这 3～4 个形容词，就是这个项目的产品关键词。
少儿词典的产品关键词是：权威内容，寓教于乐，适合孩子使用。这些关键词被我贴在屏幕的显眼处，就怕自己哪天忘记了。
寻找设计关键词，是设计师非常熟悉的步骤，但常常也在这里翻车，甚至还会出现，不管做什么软件，反反复复就那几个关键词的情况，我们可以把原因归结为：
为什么不了解用户会导致关键词找不对？
我们的用户在选择软件、使用软件的时候，了解到的是软件的设计、体验和功能。用户下载软件时，他们已有的认知会影响他们对软件的幻想。就像给小男孩的衣服是天蓝色，小女孩的衣服是嫩粉色一样，如果用户想要一件天蓝色的衣服，而我们给他展示的是深蓝色或是嫩粉色的衣服，这都会让用户产生疑惑甚至离开。因此，如果对用户了解不准确，会导致我们输出错误的设计关键词。
而了解目标用户是又一件复杂的事情。
首先，我们的目标用户可能是一类人，如有道词典，下载软件用户和使用用户大概率是同一个人。目标用户也有可能是两类人或是更多，如少儿词典，下载用户是家长，使用用户是家长和孩子，企业协作软件也类似。
从接触软件，下载软件，使用软件，到判断是否继续使用软件，不同的阶段的目标用户是不一样的，目标用户在不同阶段的需求也是不一样的。
其次，开发软件的周期是很长的，在开发软件的过程中，我们的用户在不断地接收新的知识和观点，用户的喜好，认知可能会发生很大的变化。
因此，为了更好地了解用户，我们需要找到用户跟软件之间的交互关系，以及影响用户喜好的因素。一共有 2 个步骤：
步骤 1. 分析不同用户跟软件之间的接触点，从未来趋势和用户当前认知角度收集用户资料
在这一步骤中，我们加入了 2 个概念，接触点和未来趋势。
什么是接触点？
接触点指的是用户与产品发生交互的关键点，用来捋清楚我们刚刚提到 「用户跟软件之间的交互关系」。以少儿词典为例，家长和软件之间的接触点，可以罗列为：家长听说少儿词典 – 到应用中心下载软件 – 打开软件 – 使用软件……可见要想打造一款用户好评度高的好产品，仅仅优化软件的体验是不够的。
为什么要从未来趋势和用户当前认知角度去收集用户资料？
刚刚有提到新软件的周期是较长的，前期定好的风格、关键词等，到了开发上线后却不适用了，既浪费人力，也浪费资源，因此要考虑未来趋势对用户的影响。同时，用户在选择软件的时候，已有的喜好/预期/经验等用户认知会影响用户对软件的判断。就像大家想到夏天的冷饮时，脑海中会浮现冰块、西瓜等元素，因此雪碧、西瓜等符合用户对夏天认知的食品在天气炎热时会热销，但是受到大部分买家越来越注重卡路里这一未来趋势的影响，低卡的西瓜冷饮也可能在未来一段时间大卖。
接触点和未来趋势、用户认知之间有什么关系？
了解用户接触点之后，我们就可以猜测用户在这一接触点的需求和心理，加入未来趋势和用户认知，能让我们做出来的东西更符合用户预期。
寻找接触点。我们了解到，少儿词典的目标用户群体是 1～6 年级的学生和他们的家长，即 6～12 岁孩子，和 30～44 岁家长。然后，我们粗略地将用户的接触点划分为，筛选软件 – 下载软件 – 使用软件 – 判断是否再次使用软件，孩子、家长跟接触点之间的关系就可以展示为：
孩子是软件查询、练习、核心功能体验者，家长是内容审核者、软件筛选者、伴学时软件使用者。
找到接触点之后，我们还需要把影响用户认知的内容具象化。
例如，我们想了解夏天做什么口味的饮品更好，我们可以从夏日饮品口味销量排行榜，夏日新品类型，夏日广告等角度来获得更清晰的用户认知。应用到少儿词典中就是，家长在筛选软件时，老师的要求，未来孩子考试的内容、日常辅导内容、大 V 推荐的内容等会影响家长对下载软件的判断。每个接触点都可以使用这样的方式，来联想更多影响用户认知的内容。然后我们将得到类似下面的表格：
根据表格，我收集了 近 10 页的用户信息
步骤 2. 提取收集到的信息，并放入四象限中，总结出2～4个视觉关键词、体验关键词
杂乱无序的信息只有经过归纳之后才能被大家使用。
怎么归纳总结杂乱的信息呢？
UI 设计师都清楚，在进行界面设计时，大标题、缩进、分层等排版方式能让我们的页面看起来更清晰易读。处理杂乱的信息也同理，要做的是找到信息的重点，然后把信息归类，最后再用一句对内容进行总结，方便大家理解。应用到我们提取关键词的环节中就是，挑选重要信息、放入四象限中、总结出能归纳这些信息的关键词。
挑选重要信息。以家长筛选软件为例，当我们将热门大 V 推荐的教学方法、内容，进行整理的时候，会发现美学、乐感、编程、外文图书、儿童心理教育、英文教学方法（自然拼读）等内容出现的频率很高，在一堆内容中挑选跟少儿词典相关的内容，如美学、外文图书、儿童心理教育等。
放入四象限中。在这一方法中，我们将四象限划分为设计和用户认知 2 个方向，其中设计划分为视觉风格和体验风格，用户认知划分为当前认知和未来趋势 。以刚刚挑选的儿童美学教育为例，这是一个属于未来家长会越来越关注的少儿视觉发展方向，所以我们放在视觉风格、未来趋势这一象限中。其他内容也类似，不断地提取出现频率高、用户热点高的内容，并根据内容类型放入四象限中
总结出能归纳这些信息的关键词。以视觉和未来趋势象限为例，我们收集到大 V 的美学教育，未来的课本发展趋势，小学建筑风格发展趋势，他们都有一个特点，颜色柔和无攻击，色彩丰富，因此，我们总结出一个视觉关键词是柔和多彩。
其他内容也采用相同的方法进行总结，少儿词典的视觉关键词是柔和多彩，轻质感，亲和陪伴，体验关键词是，探索多变，感官刺激和重复熟悉。
视觉关键词出来了，产品的业务目标也出来了，从关键词到页面样式的逻辑也很严谨，但出来的风格却会觉得跟关键词不太搭，或是跟竞品差异不大，在多款 App 实践后，我们发现可能是这样的原因：
引用一句说烂了的名言 「一千个人眼中就有一千个哈姆雷特」。大家在对关键词的理解是有差异的，以「年轻」为例子，一款针对活力的年轻人的衣服和一款针对潮流的年轻人的衣服，设计风格上可能是隔好几条街的。因此，仅仅得到几个视觉关键词和体验关键词还不足以让我们找准方向，我们还需要将关键词组合和具体化。一共有 2 个步骤：
步骤 1. 分别组合产品关键词和视觉关键词，产品关键词和体验关键词，找到同时满足 2 组关键词的规则
为什么将关键词结合能让关键词的作用发挥出来呢？
我们的目的是要做一款满足产品需求，符合用户认知的软件。
从问题 1 和问题 2 中，我们得到了符合产品需求的产品关键词，和符合用户认知的视觉关键词和体验关键词，想要同时满足产品需求和用户认知，我们需要找到他们的重合点。如下图所示，将产品关键词和视觉关键词、体验关键词分别结合，这样的出来的规则就能最大限度地符合我们的要求，既满足产品需求，又符合用户认知。
具体怎么做呢？下面将分别从视觉和体验角度举例子。
视觉角度，以权威内容和柔和多彩结合为例：
「权威内容」 要求我们输出的内容是符合教材，符合老师标准的，内容是准确无误的、来源是可靠的；「柔和多彩」 要求我们在进行页面设计的时候减少大面积颜色的使用，色彩柔和，且颜色多样。
将两者结合，我们得到的规则是：
根据这些内容，我们将得到下面的 4 个颜色和圆形叠加的形式。（ps：通过这样的形式确定的是规则，如：以橙色为主结合另外 3 个颜色，圆形，使用深浅色搭配。具体颜色和叠加形式需要在具体页面中进行调整）
体验角度，以权威内容和探索多变为例：
体验上，「权威内容」要求我们的操作形式是跟老师的教学相似，学习方法需要参考成熟且有效的方法；「探索多变」要求我们在交互形式上可以采用多种形式，给孩子探索未知的机会，交互形式要符合儿童操作习惯，如涂抹、翻转、拖拉等
将两者结合，我们得到的规则是：
其他几个关键词的结合也是使用这样的形式，这里就不一一展开。下图是少儿词典的视觉关键词和产品关键词结合后的样式。
步骤 2. 选择复杂的核心页面，把具象化的体验规则、视觉规则融进页面中，确定设计风格
规则梳理出来后，我们就要挑选一些重要页面进行风格尝试，以结构复杂的中文查词单字结果页为例：
分析小学一年级到六年级的考试内容，我们了解到部首、笔顺笔画、跟写、发音等汉字的基础信息是低年级用户（小学三年级及以下）会使用到，他们要求信息完整且准确；像词组、造句这些信息则是针对高年级学生，要求快速准确定位到具体的内容板块。
分析完内容结构后，我们就需要根据内容布局，加入表格中总结的体验规则：
最后，梳理好页面的体验形式之后，我们开始给页面添加视觉规则：
对比产品原型和市面上的一些竞品，我们可以发现，查词软件在内容布局上相差无几。如果没有找到符合我们产品业务目标，同时符合用户认知的规则，我们将被淹没在一群查词软件中。
步骤 3. 建立一个画板，把用到的颜色、规则、字体、间距等内容罗列出来，并给他们限定使用范围，方便自己查阅和团队合作
最后一步，相信很多设计师都会在设计过程中建立一套方便好用的设计规范库，这里就不展开来说了。
最后，再对上文的所有内容进行概括。从 0 到 1 进行软件设计我们需要用到下面这 7 步:
完成这 7 步，将可以让你从 0 ～ 1 设计一款产品经理一稿过，设计风格明确，用户粘性高的软件。
随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。所以数据可视化设计，绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求，如果不了解数据可视化设计，肯定是一头雾水，不知从何入手。本文结合最近设计案例，分享大屏可视化设计过程中遇到的一些问题以及设计思路，供大家一起交流与学习。
△ 最终动态效果图
首先放的是项目改版前的页面：
1. 需求介绍
某某应用云，分为五大云平台模块：云端综合调度、数据查询通道、数据应用处理、数据存储管理、管理运行维护。每个大模块下⾯有若干个子系统。
可视化⼤屏首页需要展示的内容包括：
2. 需求分析
分析大屏可视化的一些共性：
结合大屏的一些共性特点针对看到的线上旧版本设计，分析存在的问题。
3. 布局
整合数据，分析出主要数据、次要数据、总量数据、细分数据、各数据的维度等等。首先优化页面布局，可以先在纸上画一画，然后脑子里有大概思路以后再用电脑绘制，如下图：
采用栅格化对称布局，让整体视觉左右平衡。
4. 风格
一提到数据可视化大家往往能想到科技、数据、蓝色等一些普遍关键词。
了解到客户是想做一个科技感强、炫酷的视觉效果。可以在网上找一些效果图或是自己曾经做过的案例供客户选择，确定一个大致的风格，然后结合具体的业务场景进行设计。
5. 颜色
颜色上结合产品使用场景，以及整个产品调性还是以蓝色为主，背景选用深色调，让视觉更好聚焦，内容部分采用比较透亮的蓝色系，保证内容与背景有一定的对比关系，便于业务信息传达。
6. 主体地图
地图为大屏的主要展示内容，首先分析展示的目的是为了看清各个城市间的不同分布情况，和城市数据的汇集效果。
如图：
改版前：地图过于单薄，没有立体感，太平缺乏层次，颜色黄色不符合产品调性。
改版后：主色调改为科技蓝，在原有地图上增加外发光和多层阴影叠加，增加地图的立体感，地图上增加科技线条上升的效果代表每个城市数据变化的提升，地图背景采用比较弱化的转动线条圆形，衬托地图主体，使得画面更加丰富。
7. 地图效果的实现方法
首先用 ps 拉框助手新建一个山东的地图（拉框助手的使用获取方法可以参照上篇文章）。
完成后会得到一个叫 map 文件夹的地图分层文件，如图所示。这里需要对每个城市的颜色进行调整，为了区分每个城市之间的数据不同关系。
调整完块之间的颜色后，就需要给地图整体增加立体效果。
首先，是整体给地图加了一个描边和外发光。描边是为了强化地图边缘，外发光是为了地图与背景有一个区分。
其次为了增加地图立体感，需要给地图增加多层阴影叠加的效果。复制现有形状层，拼合成一个山东省的地图，如下图：
最后，把拼合好的图层移动到 map 文件夹下面，阴影可以添加多层，这里针对每一层进行不同颜色大小的调整，就是下面的这种效果了，地图的体积厚度感也就出来了。这里只是提供一个大概的思路，大家可以多去尝试。
整体地图效果调整完成后，就是给地图增加些纹理，和上升线条这些细节上的效果了。纹理可以用图案叠加，或者找一张纹理图剪切蒙版实现，最后再添加上升线条的效果，地图的效果就完成了。
最后加上线条上升的动态效果：
8. 数据图表拆分
在选定数据图表之前，首先要确定图表之间的关系，可以从以下四个维度进行思考分析：
可以参照下面这个图：
△ 图片来自于网络，侵删
当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。
传统的图表比如 echarts 图表在视觉上展示可能不是很美观好看，可根据选择的图表在其基础之上进行美化设计，总之选定图表最重要的两个点就是：易理解、可实现。
易理解：就是要考虑最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。
可实现：主要是跟开发前期沟通好实现方式，一般都采用开源组件库的居多，比如 echarts 组件库，我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用 Ps/Ai/Ae 这些工具模拟时会发现比较困难。同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计。一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。
案例中在图表选择上，强化科技感元素，条形图打破传统条形图的展示形式，采用电池晶格的展示形式，在保持图表功能的同时更加凸显科技感。
从页面的整体看，已经有两处用到了条形图、柱状图，如果这里还是条形图，那么页面看起来会很单调，图表也没有表现出多样性，所以现在设计要体现图表的多样性也能够有排名的直观呈现。以下图表采用科技圆盘的形式，运用科技线条的上升状态代表排名的先后顺序，所有图表都采用数据降序来展示排名更加直观。
改版前的图标样式比较单一，改版后针对每组数据不同的对比形式，采用比较贴合的图表进行展示，篇幅原因就不一一做展示了。
附上最终视觉效果图：
大屏设计需要注意的点：
以上是我对数据可视化大屏的案例总结，希望能帮助到你。除此之外还有很多地方没有涉及到，包括具体设计的操作方式、选取图形元素的具体方法，以及在各种大屏中所需要的相对应的组件等，在庞大的可视化大屏设计系统中，还有很多值得学习参考和优化的知识，欢迎沟通交流，大家一起努力。
文章来源：优设
有句话叫：「设计无小事」，很多看似不起眼的东西却起着至关重要的作用，比如这期要说的线条，很多人对于线条的理解有局限性，比如：线条的形态可以是曲线、直线、折线、粗线、细线、实线、虚线等等。其实已经牵扯到了点、线、面的知识，这也是很多科班生在学校必学的知识点，但是这期所说的线与点线面中的线还是有所不同的，点线面中的线可以是线条、可以是文字或者是看不到的视线，而是今天着重说的是设计中很直观的线条。下面我们还是通过实际的案例逐一分析：
设计类的知识很多都和日常生活息息相关，尝试着把设计类的知识点与日常生活想结合，对于记忆和理解来说会更加得心应手，例如：
图中的闪电可以视作为设计中的线条，给人的视觉感受是通过闪电把天与地连接为一个整体，而闪电在图中的作用就是串联整体，那么回到这里的正题：线条有引导视觉的作用该怎么理解呢？再举一个现实生活中的案例：
我们选择从北京到拉萨开车去，出发之前可能需要在地图上看下路线，知道途径哪些省市，规划好行程路线，这里绿色的虚线就起到了引导视觉的作用。回归设计中道理是一样的，线条可以引导用户把原本杂乱无章的视觉点规整为有次序的视觉元素，例如：
当看到左侧这张海报时我们视觉次序会出现很多变化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多种顺序，这时给人的感觉就是杂乱无章的，毫无视觉次序而言；而看右侧的海报给人的感觉却是条例清晰的，相比而言只是多了两条线，但是却在整个海报中起到了引导视觉的作用，它可以给与用户阅读海报时视觉辅助的作用，让用户以右>左>右的视觉次序欣赏、阅读，看似很不起眼，其作用却至关重要。
前面也说了，线的形态可以有很多种，例如：
这里是以真实的可口可乐吸管作为设计中的线条，同样起到了视觉引导的作用，但是我们不难发现，这里的线条不仅仅只有一个作用，也牵扯到另一个作用：线条有串联整体的作用。
在排版时我们有分组原则，即把互想关联的元素彼此靠近，无关联的相互疏远。在页面中我们会把同一色块上的元素视作为一个整体；下面我们说下线条所带来的串联整体的作用是如何体现的，比如：
△ 图一
△ 图二
图一因为大面积的留白能使得用户很容易分辨出自行车与文案是一个整体，但是相较于图二而言，其整体性略显不足，而且给人的感觉太过单薄、重心不稳；图二的整体性更强，这里的矩形线条就起到了串联主题的作用，类似的还有：
不难看出，这些案例中的线条都有串联主题的作用，线条使得主题元素整体感更强、画面板式更加严谨；对于整体的视觉传达也起到了串联、引导的作用；在文字排版中，也有类似的线条，比如：
同样是通过线条把文案更加整体化，也起到了串联的作用。
突出主题的方式有很多种，像我们之前所说到的留白、对比。接下来继续说下另一个可以突出主题的方式—线条，下面看个案例：
通过对比观察我们发现，右侧海报整体感更强，主题文案信息更加清晰，主体更明确。其中的原理可以理解为：因为线条的存在，使得主题信息有了一定的范围，在视觉上等于是在海报中划定了视觉焦点，从而起到了突出主题的作用。当然还有其他的表现形式，比如：
很好的诠释了线条的作用——突出标题序号。在进行创作时，作品的每个元素都要做到有理有据，否则只是一味的抄袭，到再创作时脑袋里还是一片空白，只有明白了其中的设计原理，才能做到活学活用。再看几个案例：
突出主题也许一个线条就可以表现的淋漓尽致，因设计目的的不同，线条所发挥的作用也不尽相同。下面继续分析：
前面说了线条有串联整体的作用，而这里又说可以分割整体，是否存在矛盾呢？下面举个简单的例子：
在小文案的区域中间我加了两个线条，看似很小的改变，其目的是把文案很准确、严谨地分割为三个小整体，希望能给用户带来识别性更强的阅读性，再举个例子：
这里的线条把月份和日期分割、英文和中文分割开，使得用户对于信息的捕捉能力以及可辨识性都提升了很多，而线条的作用就起到了分割的作用。
线条也能起到修饰、衬托的作用，很多小伙伴会忽视这一点，其实线条也可以成为海报中衬托画面、修饰主题的元素，例如：
海报中的线条起到了衬托、修饰主题的作用，假如把这些线条都删除，画面整体会显得相对单薄。
更多设计中线条的应用：
线条的作用我们分为四个逐一分析，其实它们之间也存在着相辅相成的作用，不能以一概全，线条所起到的作用可以是一种，也可以是多种，比如：我们前面「可口可乐」的案例，即有串联整体的作用，又有引导视觉的作用。只要我们在使用的时候能明确目的，而不是机械式的抄袭，那么最终一定会得心应手。
文章来源：优设 作者：美工美邦
未来荧黑是一个基于思源黑体、Fira Sans和Raleway的开源字体项目，支持简体中文、繁体中文与日文。
思源黑体的7种字重被扩展为9种字重，并增加了5种字体宽度，全家族共包含44款字体。
相比于思源黑体，未来荧黑的造型更加简明现代，版面效果清新轻快。未来荧黑的中宫与字面更加收敛，重心在字重之间经过了重新配置；笔画细节上处理得更加干练，简洁而平直化。
开发者：Celestial Phineas
字体文件以SIL Open Font License 1.1发布，构建字体开发的代码以MIT License发布。
发布地址：github.com/welai/glow-sans
网盘地址：https://pan.baidu.com/s/1f2UuFO8ZxWa8v5XXYUEmig 提取碼 2e8w
备份下载链接：https://pan.baidu.com/s/1E1woRsZX91bCrq5FT1SAzg 提取码: 92t2
文章来源：优设 作者：GrayDesign
微信在3.23号上线了传闻已久的 「暗黑版」，用来适配 iOS 的深色模式，相信不少同学已经安装并体验上了，如果还没安装的可以看看下面图例。
微信每有一次大动作都会引发全网性的讨论，而针对设计上的调整，往往只会迎来一片骂声。比如我们看看知乎中讨论的内容，感觉民愤都快压抑不住了。
但我们先别急着参与网上的声讨，现在站在设计师的角度，来评价一下迟到的微信深色模式。
很多人会把深色模式和夜间模式搞混，这里必须强调这是两种不同的模式，所以我们要对还没搞清楚状况的同学先做一个扫盲（最近扫盲好像搞的比较多…）。
先说夜间模式，是一个专门针对夜晚环境适配的设计版本。腾讯的 ISUX 团队之前做过调研，有 71.1% 的用户习惯在夜间不开灯看手机。
如果在深夜漆黑的房间中看手机屏幕，对我们的健康有非常大的损害，不仅表现在对视力的伤害上面，视网膜和神经元容易受损，同时主流的研究项目还表明会这会抑制我们褪黑素的分泌造成失眠。
所以，夜间模式，是一个用来降低屏幕对用户伤害，提升夜间使用体验的特殊模式。
通常，夜间模式会采取 降低尼特值、减少对比度、降低色彩明度、增加深色遮罩的方法，比如之前 QQ 官方的夜间模式示意图，大家感受一下，是不是有内味儿了？
这里提一下尼特这个概念，尼特是用来说明亮度的术语，1nit=1坎德拉／平方米。是现在各大手机发布会中介绍屏幕的时候都要强调的参数之一，因为尼特值越高，证明在户外大白天的环境中屏幕内容可以越清晰，而夜间模式做的就是用来降低显示亮度尼特值的。
然后再解释一下苹果的深色模式，苹果的 DarkMode，并不是一个专门面向深夜环境的模式。官方对此版本的解释，详见我们翻译的 iOS 官方文档中 112 页。
这是一个面向全天候的视觉风格，同时通过深色背景的对比，来加凸显图片、文字内容。包括上面那种官方的配图，大家应该就能感觉到主体元素比白色模式下更凸出，更激烈。
所以了解了这两个模式的区别，我们才能好好展开对微信深色模式的讨论。
接下来，我们先来总结一遍微信的深色模式。首先是分析一遍它使用的背景色。
背景色纯灰色，有3个等级的灰度。熟悉我的都了解，看色彩的奥秘，靠16进制代码和 RGB 那是分析不出个什么所以然的。如果我们把它们转化成 HSB 一看，规律性就来了。
背景色从深到浅色的灰度值 B 值分为 10、14、18，是不是朗朗上口。应用的层级虽然和官方规范一样使用了三级，但是设置和官方的不同。
然后再看看其中使用的其它配色，其中主色保持了不变，其它应用到图标色彩，都进行了明度的调整，比如下图案例。
再看看文字的用色，也是纯灰色，标题使用 B:85，正文使用 B:65，注释使用 B:35（主要用色）。
而官方使用的文字色彩中，却并不是纯灰色，除了第一级的白色以外，其它灰阶的文字是由带有蓝色色相的色彩通过降低透明度来呈现的。
对中性色增加蓝色色值是一个常规操作，可以让这种灰色看起来有一点活力，不会像纯灰色那么单调，不过这次微信明显在文字的应用上更保守，一点色相也没有给。
这次微信被大面积吐槽的，就是颜色的应用上和官方的规范不一致，作为从业人员直接开喷是相当不专业的（最起码要先走个形式），这就是我要分析的重点了。
要说微信的 UED 团队，专业性肯定是国内最顶尖的，你们网上所有看过有关交互的方法论、可用性测试的分享， 他们肯定都有做过，而且执行得更专业。
直接用官方规范的黑底白字模式，微信团队不可能没有出过这样的方案。但很明显，这个方案最后被毙了，上了我们看见的这个版本，虽然不知道以后会不会变。
再看看下面官方发的一条微博。
其中已经提及了，是和苹果 「共同探索」 出来的方案，这是非常耐人寻味的。也就是说，这个不用官方的模式是苹果团队也通过的。
那么为什么要做的不一样呢？没有内幕消息，就根据自己的经验来判断一下。
我自己认为的一个非常重要的原因，就是对于 「夜间模式「 的兼容。前面不是讲暗黑模式和夜间模式不一样嘛？为什么微信的暗黑模式又去兼容夜间模式了。
这里面有几个小彩蛋，首先就是官方对深色模式的态度，在我看来越来越暧昧了。比如在显示与亮度设置页面里，有一个自动设置外观 —— 日出前保持深色外观的功能。这样，就等于默认将深色模式和夜间模式挂钩。
还有，如果过去我们没有整理 iOS13 的翻译，就不会发现，上面我们展示的那句专注于内容的解释，现在在官网已经被删掉了（你品，你细品）。
再说关于用户认知的问题上面，在 UI 群体中，能了解暗黑模式和夜间模式是不一样的可能就只占 10 分之一，那么对于普通用户来说，这个情况就更不乐观，能有 1% 的用户了解这个概念就不错了。所以，绝大多数用户会直接认为暗黑模式就是夜间模式。
如果暗黑模式直接当成夜间模式用，在深夜的环境里，观感会特别差，因为 —— 明暗对比度过高。
如果在黑底中直接用白字，那么可以说屏幕的文字和背景的对比度就是 100（HSB中 B 的差值），在一个漆黑的环境中会非常应验 「让内容脱颖而出」 的效果，刺激性会非常强烈，文字将变得非常尖锐，比如 QQ 暗黑模式，大家可以在被窝里打开下面这张图感受一下。
新的深色模式版本中，文字和背景的对比度基本控制在 50 左右，降低了一半。
并且，中英文字形在正负形上的差异（简单理解就是中文笔划更复杂），这个感觉会更强烈。比如我们用一个公众号页面举例，使用纯黑底白字，采用相同字号的中英文，看看显示的效果。
还有，纯黑背景色和白色的对比度，会根据屏幕的类型和参数不同而有不一样的感受，比如苹果从 X 后旗舰机型使用 OLED 屏幕，纯黑色区域将不会发光，进一步扩大对比度，使得文字变得更尖锐，更让人难以接受。
如果不是使用 OLED 屏幕的同学光看一个案例可能很难受，所以我们用纯黑的案例来对比一下现在的状态。
是不是发现明显在夜间的情况下黑白模式并不如另一个模式看起来舒适？而这种不舒适的差别并不会随着屏幕亮度降低而变化。
所以色彩并没有符合官方的原因，我的判断就在大环境中无法割裂夜间和深色模式的区别，同时也要让深色模式更适应夜间环境，做出了调整。而又因为它不是真正的夜间模式，所以对比度也不能像 QQ 之前的夜间版本一样将整体环境完全压暗。
你看，真是一个让人矛盾的过程……
最后再简单讨论一个问题，为什么深色模式来得这么晚。很多用户一直嘲讽，不就是换一套皮肤的事嘛，为什么就是不上线。
外行可以看热闹，但是如果是从业人员就应该知道，微信这种体量的应用，上线深色模式绝对不是一个非常容易的事情。
适配黑暗模式首先需要使用苹果新的 iOS 13 SDK（开发者工具）进行编译，等于应用中有大量的代码需要调整，而这种升级调整的结果还会导致沉重的测试压力。有经历过 Darkmode 开发的团队应该都知道这绝对不是改改颜色就能上线的皮肤。
再看到知乎另一个回答中提到的：
另一方面点大家随便听听。使用 iOS 13 SDK 之后，Apple 要求 VoIP 推送必须使用 CallKit，否则应用程序会被终止。而由于众所周知的原因,CallKit 在中国大陆是无法使用的,这样的改动会降低微信语音电话的体验。
原文地址：https://www.zhihu.com/question/378027349/answer/1069072154
再者，抛去大量用户体验调研相关的工作，微信整个生态对于暗黑模式的不友好可以说是无解的。比如说公众号，有大量公众号内部的标题、分割线、引用语句是用图片做上去的，而图片还用的是白底（透明底黑字的也有），于是现在就产生了灾难性的阅读体验。
比如我的公众号：超人的电话亭，其中文章展示的截图。
而且因为公众号发出去是不能修改的，只能删除，那么这部分存量文章将无法更改，体验也无法扭转。而且公众号还支持文字色彩等自定义，那么你在白色背景下添加的颜色，可不会直接适配深色模式，尤其是官方也不可能轻易直接给你们 「适配」 掉。
而在夜间模式，正常访问的文章网页，也和公众号会很像，但是打开以后是白色背景的话，统一的体验在哪里？
再者还有小程序，小程序虽然也可以通过微信官方提供小程序的深色模式适配文档，对应的 SDK，但是小程序不是 APP，其中有大量小程序开发后是缺少维护的。
因为线下门店通过外包方做好一个小程序上线以后，没特殊的原因不会直接去更新它，那么这部分小程序的升级适配无从谈起，会出现打开小程序一个白一个黑的窘境。
最后，再讲一个微信里最高频使用的功能 —— 发表情。深色模式直接造成大量自定义表情报废，无法正常显示的问题，比如看看下面我自己发的表情。
前面提到的，都是不能解决的问题，这就是做深色模式的挑战，因为用户 UGC 内容是不可控的，官方不可能通过算法直接帮用户强行 「适配」。
而这些，就是做深色版的难点。
以上总结内容多数为主观分析，纯粹站在 UI 设计师角度进行专业解读，不带入个人立场。而一定要我自己评价的话，那就是 ：赶紧把这模式给我移除！！
再顺便提一点小感想，一个有数亿用户的产品，每一个小调整分量都不轻，都要慎之又慎。同时，你做的每一个决策，都意味着要站在其中一部分用户的对立面，因为你满足不了所有用户的需求。所以，这就是设计师的压力与挑战。
文章来源：优设 作者：超人的电话亭
蓝蓝设计的小编 http://www.lanlanwork.com