前段时间有些可视化设计师在群里问地图怎样做，怎么做好看。针对大家的疑问干脆写个教程分享下。在可视化中地图是比较常见的，很多项目都会用到地图，地图视觉好不好对整体的视觉效果也起了不小的作用。

前段时间有些 可视化设计 师在群里问地图怎样做，怎么做好看。针对大家的疑问干脆写个教程分享下。在可视化中地图是比较常见的，很多项目都会用到地图，地图视觉好不好对整体的视觉效果也起了不小的作用。下面针对地图，以实际项目案例做分析。

地图其实有很多方法制作，一是基于第三方地图如百度、高德、谷歌等等，二是基于一定标准自行设计。

本次主要介绍地图自主制作的方法。可通过三维软件制作如 3dmax、C4D、Maya 等等，本次选择一个比较简单的方法，用 PS 插件实现。

先看些例子，以下图为例制作。

更多可视化设计干货：

可视化设计6大核心步骤，看完就明白了！ 大家好，时常有设计师在内部群中反应说不清楚可视化实施的总体流程，什么节点该干什么？

阅读文章 >

本次用到的一款 PS 插件是：3d_map_generator_terrain。非常好用（文末/文章结尾自行下载）

方便大家使用，下图做了中文对比，建议使用英文版

第一步：航拍图采集 打开谷歌地图（不建议用百度、高德，谷歌地图的颜色比较有利于后面调色）仅个人建议。

首先在地图中搜索需要做设计的地理区块位置，并打开航拍模式。

找到位置后，点击左上角的地图选择，选择 Labels on 模式，关闭地图上的道路及名称。仅显示航拍地图，并截图保存，后面作为贴图所用。

地图说明：

推荐选择谷歌地图，方便后面的色调调整，下面是谷歌、百度、高德三家地图颜色对比情况，百度和高德基本没区别，从色调和精细程度上对比，选择谷歌地图更适合些。

第二步：黑白地图采集 打开黑白地图网站： https://tangrams.github.io/heightmapper/ 找到相同的位置 。区块位置选择好后，点击 export 把截图下载到本地。为方便定位查找，可把 map lines 和 map labels 打开。

第三步：航拍图及黑白图的处理 把黑白图和航拍图同时导入 PS 中，把航拍图和黑白图对齐。可以把航拍图透明图调低些，方便和黑白图对齐。对齐后透明度复位。

黑白图有点对比度不够，通过调整亮度对比度，增加黑白图的对比度。（黑白图是控制地图的高低，这里通过调整对比度优化地图的高低起伏，有助于视觉效果提升)

第四步，异形地图制作 用钢笔工具勾出需要的位置，并把图层名称改成 shape（切忌重点），不然无法把勾选区域生成。刚踩过的坑，版本更新后，需要更改图层名称，之后尝试了各种方法一直无法生成就是由于这里出现问题。

第五步：选择地图插件生成地图 打开 3D Map Generator-Terrain 插件。

点击 Create New Terrain。

Set Terrain Elecation 是控制地形高差的，5 是最高，这里我们选择最大，高差大一些效果也会明显些。建议调大一点。选择完高程后，点击 Create 3D Terrain 下的 Right。下面的 Left、Frontal、Right 分别是不同的透视方向。等待完成即可（生成时关闭航拍图图层）。

生成后效果

第六步：航拍图作为纹理应用及调整 这部主要是替换地图纹理，点击 Texturing

选择开始文件中的航拍图，把图层复制到新打开的文件中。并把新复制的图层纹理对齐。

使效果更加细腻真实些，调整下地图的曲线和色相/饱和度，使得地图更有品质感，然后直接保存

保存后生成完整地图

第七步，地图侧面厚度颜色调整 改变地图竖向高度颜色的话可以点击 Edit Terrain Project，然后在点击下图的左上角的吸管选择颜色：

第八步：背景的调法 可以调整背景，点击 Grounsd，里面有很多背景选项，也可以自己定义颜色。如果这些满足不了，可以自行新建背景层设计调整。

调整后效果：

第九步：地图信息内容的增加 同时可以添加一些 2.5D 素材，用官方自带的素材做展示，点击 Icons，可以选择一些符合需求的素材使用，素材库毕竟有限，可根据实际项目自行画一些素材使用。

添加后的效果，到这里地图就基本完成了。

第十步：增加图表信息完成整体效果 可根据项目需求把数据加入进来，进行设计。增加些图表信息。完成！

插件中功能很强大，比如调整海、湖、自己手动画地形等等，还有很多功能。

更多地图效果生成，其他的功能自行尝试，自行研究一番。

其他地图生成效果扩展：

总结

推荐使用谷歌地图 谷歌地图和黑白地图一定要对齐，错位会有违和感 航拍图是好比三维软件中的贴图，黑白图是控制地图的高低起伏 做异性地图时，用钢笔勾选一定要是闭环，并且图层命名为“shape” 生成时选择高度时最好选择大一些，这样整体视觉会好一些 欢迎关注作者微信公众号：「聂永真可视化设计实验室」

AR(Augmented Reality)，就是我们常说的增强现实，是将计算机生成的虚拟 信息叠加到用户所在的真实世界的一种新兴技术。做 AR 界面设计，就是做增强的界面设计（Augmented User interface，AUI），界面上更直观的体现就是虚拟和现实的融合，但是，要做好它，光理解到这一层可远远不...

AR(Augmented Reality)，就是我们常说的增强现实，是将计算机生成的虚拟 信息叠加到用户所在的真实世界的一种新兴技术。做 AR 界面设计，就是做增强的界面设计（Augmented User interface，AUI），界面上更直观的体现就是虚拟和现实的融合，但是，要做好它，光理解到这一层可远远不够。

AR 需要设计师把空间场景这个词语植入到自己设计的每个界面里。

只有把空间场景作为设计对象植入到自己设计的每个界面里，你才会理解所有的设计元素需要在环境中保持识别性，才会理解可以使用手势识别、眼动识别等多交互手段让用户与空间中的元素交互，才会理解如何运用颜色、动效、照明、贴图等一系列设计手段给予用户反馈、营造氛围，最终增强用户体验。

但是，对于设计师来说，什么才是真正地把空间场景这个词植入到了自己设计的每个界面里呢？

更多 AR设计 干货：

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程 Hi，我是彩云。

阅读文章 >

首先，我们来看最简单的一层应用。

我给过一个简单的例子，如下面一张图：

我们看到过很多 AR 界面是这张图的样子，现有的界面被搬进了环境空间中。似乎很简单，好像和其他屏幕界面设计没什么不同，但真的是搬进去就行了吗？

图片来自网络

即使是这简单的一步，在搬的过程中，也需要对这个界面进行色彩的调试，整个界面需要考虑环境背景的影响，如果是以 AR 眼镜为终端的界面，纯黑色是看不见的，应该说偏暗深的色系如果没有一个明亮色系衬托，其识别性都不高。

色彩只是一个方面。

你还需要考虑其相对运动关系、显示内容效果、操作交互方式等等。因为 AR 界面设计最后形成的用户所见内容不单是我们设计的那部分虚拟元素，而是和真实元素进行增强后的所有内容，即真实世界本身存在的、用户看见的画面，它们一起被呈现给用户。

如图一那样，通过考虑环境变量和设备技术，把原有的界面经过处理后“搬”进空间里，只是植入空间场景这个关键词的简单应用。

进一步的，空间场景这个词，不仅仅指用户的场景，还指你设计的画布。

做界面设计和作画类似，都是在一张画布上创作的，有些可惜的是，这张画布暂时还只能是平面的，它常常会不经意间限制我们的想象，但是，当我们将空间场景这个词植入到你设计的每张界面里，你就知道，你的画布，其实不一定是平的，在场景里，它可以是弯的。

就像下面这张图。

蓝色边框的区域是当前 AR 眼镜可以给予的显示区域，我们叫它显示 FOV（Field of View），是以可显示范围的边缘与人 眼的夹角来计算的，又可以分为水平 FOV 和垂直 FOV。

微软 Hololens 2 的显示 FOV 只有 43°×29°，远远小于我们很多手机摄像机能拍摄的范围。要做大显示 FOV，这里面有很多技术难点，暂时没有看见跨越性的突破，于是，为了让 AR 头戴设备的显示 FOV 大一些，市面上一些设备对 FOV 参数的描述已经开始使用对角线来计算了，这样可使得出的数字显得更大一些。

虽然技术的现状还有些不尽人意，但好在的是，当我们在设计每张界面的时候植入空间场景这个认知后，它对我们的影响就会少了很多，因为，在一个空间场景中，用户的位置和姿态是可变的，你的画布也是可延展的，即使某一个时刻只能显示一小部分，但那并不是全部。

就像我们人类的视觉系统，在某一个时间点，实际看到的是下面这张图的鬼样子。但是，我们最终感知到的可不是这样。

做好 AR 界面设计，知道你的设计对象是场景很关键，把空间场景这个认知植入到你设计每一张界面里，它关系到如何让用户产生身临其境的感觉，如何让用户在虚实并存的环境中进行自然的操作。为了实现这一目标，视觉效果、相对关系、操作方式等都是我们需要考虑的内容。

一、视觉效果 空间场景的视觉效果，主要关注三个要点：距离、朝向和色彩。

距离感是深度带给用户的最直接的感知。在设计中，距离体现在两个设计维度 中:第一个是元素间的相对关系，包括虚拟元素和虚拟元素之间，以及虚拟元素和 真实元素之间的关系;第二个是每个元素相对用户的具体距离，也就是每个元素在 以用户为原点的 Z 轴上的位置。

朝向，是指虚拟元素用哪个角度面对用户。在这里，我将朝向具体分为静态朝 向和动态朝向两种。静态朝向是指当用户视角固定时，虚像面对用户的那个角度。动态朝向是指当用户视角发生变化时，虚像面对用户的角度。在手机、计算机等屏幕 UI 的设计中，由于我们大多面对的是二维界面，朝向问 题可以忽略不计，但在 AUI 的场景中，除非你的虚拟元素是一个从各个角度看没有任 何区别的圆球，否则朝向就是一个需要考虑的问题。

色彩，之所以是空间场景设计中需要关注的要点，是因为我们最终感知到的色彩，其实是光的作用。它包含 3 个方面的影响:光源的照射、物体反射的可见光（物体色）、环境与空间通过光线作用后的色彩影响。也就是说，我们感知到的色彩是由光源色、物体色和环境色共同组成的。

二、相对关系 空间场景的相对关系，第一层指它的位置。

在场景里虽然既有实也有虚，但在具体设计的时候，设计师的落脚点还是只有虚实里的虚像，为了更好地理解和设计这个可以落脚的虚像，我们需要引入物理学中的一个很基础的概念:参考系。

参考系是指在物理学中用以测量并记录位置、定位其他物体属性的坐标系; 或指与观测者的运动状态相关的观测参考系；又或同指两者。参考系又称参照系、 基准系、坐标系、参考坐标等，因为 AUI 是虚实结合的画面，它和真实的物理世界息 息相关，所以要设计与之相结合的虚拟内容，就必须引入这个概念，并在设计中时时刻刻考虑到它。

按照参考系，我们将 AUI 的虚像分为两个大类:一类参考系为真实的物理世界， 一类参考系为用户。基于第一类参考系设计的虚像，丰富了物理世界本身的内容， 设计时需要更多地参考物理知识，让它更自然而然地成为原本世界的一部分。基于第二类参考系设计的虚像，多为用户随时调用，从属于用户本身。对这个参考系的设计，我们可以认为它增强了人本身的能力，就像用户的手脚、用户的眼睛、用户 的耳朵等。设计应以用户为尊，设计的成果应成为用户自身的一部分。

空间场景的相对关系，还可以衍生出第二层，第二层更贴近整体感知。

第一层以参考系考量的虚像本身的相对位置关系，还可以进一步从更完整和更表象的感官层面，考虑不同的虚像和实像关系中所呈现的整体效果。按照业内比较通用且易理解的话术， 可以分为 3 类:融合虚拟、孪生虚拟、沉浸虚拟。

融合虚拟需要借助同步定位与地图构建的技术，只有 AR 设备能够认识到真实环境，才能实现与真实世界的融合显示，这是我们期望的虚实叠加方式。

孪生虚拟模式中的虚拟内容一般在真实物体旁边孪生显示。用户在看真实物体时，画面以真实内容为主; 用户在看虚拟物体时，画面以虚拟内容为主。

沉浸虚拟是指基本和现实环境无交互，用户关注的画面以虚拟内容为主的一种内容显示模式。VR 是这种类别最极端的应用。

三、操作方式 最后，操作方式，是互动，也就是如何让用户在虚拟环境中进行自然的操作。

手势、语音、控制器、触屏、按键、键盘、触控板、鼠标、脑电波、凝视，还有数据手套、脚踏控制、操纵杆、手写笔等等等等。所有的输入和输出技术都可以为创建更自然的用户界面提供机会，全看设计师如何运用。

总的来说，设计成功的 AR 界面关键在于融入空间场景的认知，由浅入深，从视觉效果、相对关系和操作方式三个大方面将这个概念深化运用，才能为用户提供更好的 AR 界面体验。

欢迎关注作者微信公众号：「林间有影落」

大家好，时常有设计师在内部群中反应说不清楚可视化实施的总体流程，什么节点该干什么？针对大家的疑问，小编今天详细梳理了可视化设计的六大核心步骤，希望对大家能有所帮助。更多可视化设计干货：可视化设计神器三弹！

大家好，时常有设计师在内部群中反应说不清楚可视化实施的总体流程，什么节点该干什么？针对大家的疑问，小编今天详细梳理了可视化设计的六大核心步骤，希望对大家能有所帮助。

更多 可视化设计 干货：

可视化设计神器三弹！9个精选神器都在这！ 大家好，我是小六。

阅读文章 >

一、需求对接 业务需求：正确了解需求，要干什么事，同时熟悉业务，这些都是最重要的一步，这将决定未来的设计。

了解品牌：首先是甲方的品牌相关内容，包括品牌的名称，品牌介绍。品牌 LOGO 样式，是否有注册过商标。品牌的优势，包括品牌文化等等一些资料

行业竞品：了解行业相关的信息，主要是了解客户的产品的行业属性，有哪些竞争对手，竞争对手都是怎么玩的。先了解他们，然后在决定后续的设计策略。

了解用户：知道最终给谁用，来拍板设计人的特点（这个关系到设计几搞能过），了解使用的群体，针对用户用户画像。如果可以的话，可以让甲方帮助分析客户的直接需求是什么，做的产品优势特点。

使用场景：大屏与其他设计使用场景不同，变化多端，受外界影响比较大。不像 ui 设计，在 web 与手机端使用居多。可视化经常被应用于智慧大厅、展会会展、电脑、电视、手机等，同时观看距离也是各不相同，有一米的有十多米的，千变万化。别头疼后续我会详细的针对性介绍。

二、需求原型 每个需求都有它想对外传达的故事，作为设计师也要了解清楚，整个故事线事怎样的，这样有利于设计去分析，应该怎样表达每一个数据的展示，同时也有助于了解数据之间的关联性，更加合理的表达数据。

例如，产品 A 销量增长主要来自北京和上海等用户订单量激增，同时退货量减少、用户对产品的评价槽点减少影响的。

所以在设计上就可以采用地图空间分布的的手段去表达，并且体现北京和上海增量，及全国各省市的销量情况。这样可以有效的通过设计的手法去表达故事。

三、交互设计 交互设计可以有效的把产品的构思更细化的通过交互原型表达出来，包括信息层级、大屏的交互方式都会有初步的雏形，为设计提供数据信息层级及大屏初步交互方式，这里建议设计师多参与大屏交互方式的梳理，可视化设计师其实对设计有更多的见解，可从视觉的维度辅助交互完善。让交互更加趣味性、视觉性、感染性。

四、视觉/动画设计 这部分也是设计师的主要领域，发挥最多的地方，同时对设计师的要求相比 UI 设计会更高，知识广度上要求也更全面，正对可视化中常用的技能方向大致罗列如下。

1. 界面设计 了解硬件及场景背景

首先要根据场景确定硬件，布局时一定要考虑硬件，例如：拼接屏要考虑拼接缝，避免拼接缝与数据文字等穿插，拼接封把一个文字劈成两半在两个屏幕中展示，想想都丑。

还要考虑屏幕材质，如果是 led 屏幕就要多考虑显示虚不虚，偏不偏色。（可视化大屏便色、发虚出现在 led 屏幕上的居多）

同时还有观看距离，现场灯光，现场光线等情况都会对屏幕有不小的影响。

依数据界面布局

界面设计中，区分版块和内容的主次关系，能确保流程的合理性，同时使视觉区域更符合人类的生理习惯，使阅读体验更加轻松。

可视化中常用的布局方式，左右侧次，中间主、左主右次，等等具体依照数据自行排布。

界面元素应按照视觉运动的规律进行布局和组合，形成界面脉络，引导用户从主到次再到整体的视线移动规律。同时这也与我们前面了解到的业务故事线是一致的，让设计辅助业务讲故事，为故事增光添彩。

2. 配色设计 确定主色

早期的大屏以科技蓝为主，而现如今，大屏可以说是五彩斑斓，需要注意的是，在做大屏的时候，首先需要确定的是大屏的主色，需要考虑到客户的品牌要求，以及项目业务的所属行业，比如：我们做安全的系统，多数以绿色为主色；做党建，会以红色为主色；金融行业，以黑金相辅；做水务、城市等等业务则多以蓝色为主，确定了主色调以后，还需要找到辅助色，一个大屏上大面积的颜色建议不超过 5 种。

明度

其次就是颜色的明度，和做 B 端是同样的道理，一整个版面上，我们需要根据信息的重要程度，和人类阅读的习惯，把文字和图形按照有明到暗有所区分，这样会使我们的版本更富有空间感和层次感，更易阅读。

3. 图表设计 图表设计初衷是让数据清晰的传达信息，同时带来美观的视觉感受，

图表要承载业务上的大量数据信息，同时视觉元素较多，图表设计考量也是很多的，统一性、坐标轴、图例、多图表视觉重量感，不能凭借设计师的审美喜好进行视觉设计，根据业务属性及数据状态综合考虑，做到用色符合业务符合状态，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。

4. 主视觉设计 主视觉顾名思义也是设计作品中最核心的内容。需要兼顾整体的美感，同时符合环境场景使用，持续地强化用户对品牌的感知，并能打造视觉记忆统一性。

常见的主视觉主要分为几类，平面、2.5D、三维。平面主要以视觉排班为主更简洁的表达数据，三维更容易表达视觉效果，各有千秋。

5. 三维设计 平面大家比较熟悉了，本次主要以三维为主，三维也是可视化设计的大趋势。首先了要了解有哪些三维软件，例如 3dmax、c4d、Blender 等等，不同的软件建模逻辑有所不同，不管采用什么软件最终的成果要符合自然界中的认知，任何物理自然界存在的东西都可以用三维模型表示。

如果是地理相关的数据，要考虑他的真实性，制作其实是通过三维虚拟的形式还原真实物理世界。通常针对地理数据分为几大类包括建筑、道路、路网、河流、湖泊等。

数据应该怎样获得，可以通过 gis 数据、人工建模、倾斜摄影等，不同的数据直接关系到后期设计的可控性，比如倾斜摄影效果局限性非常大。

6. 动画设计 动画结合故事情节，在二维或者三维空间中用动画更生动的串联故事串联数据。让数据更富有灵性，形成独特的视觉艺术。

五、对接研发输出 这部分也是比较复杂难度比较高的，比较常见的对接参数、烘培等等方式。后续单独细说，这里仅做流程说明。

六、测试验收 这一步关系到设计还原度问题，我们的设计是否真正被高质量的还原，有没有还原度不够，或者直接没有实现的效果，都要通过这个环节梳理出来，形成测试文件，提交 BUG。待开发修改后还要跟进复验，最终达到高质量的设计落地。

欢迎关注作者微信公众号：「聂永真可视化设计实验室」

AR(Augmented Reality)，就是我们常说的增强现实，是将计算机生成的虚拟 信息叠加到用户所在的真实世界的一种新兴技术。做 AR 界面设计，就是做增强的界面设计（Augmented User interface，AUI），界面上更直观的体现就是虚拟和现实的融合，但是，要做好它，光理解到这一层可远远不...

AR(Augmented Reality)，就是我们常说的增强现实，是将计算机生成的虚拟 信息叠加到用户所在的真实世界的一种新兴技术。做 AR 界面设计，就是做增强的界面设计（Augmented User interface，AUI），界面上更直观的体现就是虚拟和现实的融合，但是，要做好它，光理解到这一层可远远不够。

AR 需要设计师把空间场景这个词语植入到自己设计的每个界面里。

只有把空间场景作为设计对象植入到自己设计的每个界面里，你才会理解所有的设计元素需要在环境中保持识别性，才会理解可以使用手势识别、眼动识别等多交互手段让用户与空间中的元素交互，才会理解如何运用颜色、动效、照明、贴图等一系列设计手段给予用户反馈、营造氛围，最终增强用户体验。

但是，对于设计师来说，什么才是真正地把空间场景这个词植入到了自己设计的每个界面里呢？

更多 AR设计 干货：

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程 Hi，我是彩云。

阅读文章 >

首先，我们来看最简单的一层应用。

我给过一个简单的例子，如下面一张图：

我们看到过很多 AR 界面是这张图的样子，现有的界面被搬进了环境空间中。似乎很简单，好像和其他屏幕界面设计没什么不同，但真的是搬进去就行了吗？

图片来自网络

即使是这简单的一步，在搬的过程中，也需要对这个界面进行色彩的调试，整个界面需要考虑环境背景的影响，如果是以 AR 眼镜为终端的界面，纯黑色是看不见的，应该说偏暗深的色系如果没有一个明亮色系衬托，其识别性都不高。

色彩只是一个方面。

你还需要考虑其相对运动关系、显示内容效果、操作交互方式等等。因为 AR 界面设计最后形成的用户所见内容不单是我们设计的那部分虚拟元素，而是和真实元素进行增强后的所有内容，即真实世界本身存在的、用户看见的画面，它们一起被呈现给用户。

如图一那样，通过考虑环境变量和设备技术，把原有的界面经过处理后“搬”进空间里，只是植入空间场景这个关键词的简单应用。

进一步的，空间场景这个词，不仅仅指用户的场景，还指你设计的画布。

做界面设计和作画类似，都是在一张画布上创作的，有些可惜的是，这张画布暂时还只能是平面的，它常常会不经意间限制我们的想象，但是，当我们将空间场景这个词植入到你设计的每张界面里，你就知道，你的画布，其实不一定是平的，在场景里，它可以是弯的。

就像下面这张图。

蓝色边框的区域是当前 AR 眼镜可以给予的显示区域，我们叫它显示 FOV（Field of View），是以可显示范围的边缘与人 眼的夹角来计算的，又可以分为水平 FOV 和垂直 FOV。

微软 Hololens 2 的显示 FOV 只有 43°×29°，远远小于我们很多手机摄像机能拍摄的范围。要做大显示 FOV，这里面有很多技术难点，暂时没有看见跨越性的突破，于是，为了让 AR 头戴设备的显示 FOV 大一些，市面上一些设备对 FOV 参数的描述已经开始使用对角线来计算了，这样可使得出的数字显得更大一些。

虽然技术的现状还有些不尽人意，但好在的是，当我们在设计每张界面的时候植入空间场景这个认知后，它对我们的影响就会少了很多，因为，在一个空间场景中，用户的位置和姿态是可变的，你的画布也是可延展的，即使某一个时刻只能显示一小部分，但那并不是全部。

就像我们人类的视觉系统，在某一个时间点，实际看到的是下面这张图的鬼样子。但是，我们最终感知到的可不是这样。

做好 AR 界面设计，知道你的设计对象是场景很关键，把空间场景这个认知植入到你设计每一张界面里，它关系到如何让用户产生身临其境的感觉，如何让用户在虚实并存的环境中进行自然的操作。为了实现这一目标，视觉效果、相对关系、操作方式等都是我们需要考虑的内容。

一、视觉效果 空间场景的视觉效果，主要关注三个要点：距离、朝向和色彩。

距离感是深度带给用户的最直接的感知。在设计中，距离体现在两个设计维度 中:第一个是元素间的相对关系，包括虚拟元素和虚拟元素之间，以及虚拟元素和 真实元素之间的关系;第二个是每个元素相对用户的具体距离，也就是每个元素在 以用户为原点的 Z 轴上的位置。

朝向，是指虚拟元素用哪个角度面对用户。在这里，我将朝向具体分为静态朝 向和动态朝向两种。静态朝向是指当用户视角固定时，虚像面对用户的那个角度。动态朝向是指当用户视角发生变化时，虚像面对用户的角度。在手机、计算机等屏幕 UI 的设计中，由于我们大多面对的是二维界面，朝向问 题可以忽略不计，但在 AUI 的场景中，除非你的虚拟元素是一个从各个角度看没有任 何区别的圆球，否则朝向就是一个需要考虑的问题。

色彩，之所以是空间场景设计中需要关注的要点，是因为我们最终感知到的色彩，其实是光的作用。它包含 3 个方面的影响:光源的照射、物体反射的可见光（物体色）、环境与空间通过光线作用后的色彩影响。也就是说，我们感知到的色彩是由光源色、物体色和环境色共同组成的。

二、相对关系 空间场景的相对关系，第一层指它的位置。

在场景里虽然既有实也有虚，但在具体设计的时候，设计师的落脚点还是只有虚实里的虚像，为了更好地理解和设计这个可以落脚的虚像，我们需要引入物理学中的一个很基础的概念:参考系。

参考系是指在物理学中用以测量并记录位置、定位其他物体属性的坐标系; 或指与观测者的运动状态相关的观测参考系；又或同指两者。参考系又称参照系、 基准系、坐标系、参考坐标等，因为 AUI 是虚实结合的画面，它和真实的物理世界息 息相关，所以要设计与之相结合的虚拟内容，就必须引入这个概念，并在设计中时时刻刻考虑到它。

按照参考系，我们将 AUI 的虚像分为两个大类:一类参考系为真实的物理世界， 一类参考系为用户。基于第一类参考系设计的虚像，丰富了物理世界本身的内容， 设计时需要更多地参考物理知识，让它更自然而然地成为原本世界的一部分。基于第二类参考系设计的虚像，多为用户随时调用，从属于用户本身。对这个参考系的设计，我们可以认为它增强了人本身的能力，就像用户的手脚、用户的眼睛、用户 的耳朵等。设计应以用户为尊，设计的成果应成为用户自身的一部分。

空间场景的相对关系，还可以衍生出第二层，第二层更贴近整体感知。

第一层以参考系考量的虚像本身的相对位置关系，还可以进一步从更完整和更表象的感官层面，考虑不同的虚像和实像关系中所呈现的整体效果。按照业内比较通用且易理解的话术， 可以分为 3 类:融合虚拟、孪生虚拟、沉浸虚拟。

融合虚拟需要借助同步定位与地图构建的技术，只有 AR 设备能够认识到真实环境，才能实现与真实世界的融合显示，这是我们期望的虚实叠加方式。

孪生虚拟模式中的虚拟内容一般在真实物体旁边孪生显示。用户在看真实物体时，画面以真实内容为主; 用户在看虚拟物体时，画面以虚拟内容为主。

沉浸虚拟是指基本和现实环境无交互，用户关注的画面以虚拟内容为主的一种内容显示模式。VR 是这种类别最极端的应用。

三、操作方式 最后，操作方式，是互动，也就是如何让用户在虚拟环境中进行自然的操作。

手势、语音、控制器、触屏、按键、键盘、触控板、鼠标、脑电波、凝视，还有数据手套、脚踏控制、操纵杆、手写笔等等等等。所有的输入和输出技术都可以为创建更自然的用户界面提供机会，全看设计师如何运用。

总的来说，设计成功的 AR 界面关键在于融入空间场景的认知，由浅入深，从视觉效果、相对关系和操作方式三个大方面将这个概念深化运用，才能为用户提供更好的 AR 界面体验。

欢迎关注作者微信公众号：「林间有影落」

大家好，时常有设计师在内部群中反应说不清楚可视化实施的总体流程，什么节点该干什么？针对大家的疑问，小编今天详细梳理了可视化设计的六大核心步骤，希望对大家能有所帮助。更多可视化设计干货：可视化设计神器三弹！

大家好，时常有设计师在内部群中反应说不清楚可视化实施的总体流程，什么节点该干什么？针对大家的疑问，小编今天详细梳理了可视化设计的六大核心步骤，希望对大家能有所帮助。

更多 可视化设计 干货：

可视化设计神器三弹！9个精选神器都在这！ 大家好，我是小六。

阅读文章 >

一、需求对接 业务需求：正确了解需求，要干什么事，同时熟悉业务，这些都是最重要的一步，这将决定未来的设计。

了解品牌：首先是甲方的品牌相关内容，包括品牌的名称，品牌介绍。品牌 LOGO 样式，是否有注册过商标。品牌的优势，包括品牌文化等等一些资料

行业竞品：了解行业相关的信息，主要是了解客户的产品的行业属性，有哪些竞争对手，竞争对手都是怎么玩的。先了解他们，然后在决定后续的设计策略。

了解用户：知道最终给谁用，来拍板设计人的特点（这个关系到设计几搞能过），了解使用的群体，针对用户用户画像。如果可以的话，可以让甲方帮助分析客户的直接需求是什么，做的产品优势特点。

使用场景：大屏与其他设计使用场景不同，变化多端，受外界影响比较大。不像 ui 设计，在 web 与手机端使用居多。可视化经常被应用于智慧大厅、展会会展、电脑、电视、手机等，同时观看距离也是各不相同，有一米的有十多米的，千变万化。别头疼后续我会详细的针对性介绍。

二、需求原型 每个需求都有它想对外传达的故事，作为设计师也要了解清楚，整个故事线事怎样的，这样有利于设计去分析，应该怎样表达每一个数据的展示，同时也有助于了解数据之间的关联性，更加合理的表达数据。

例如，产品 A 销量增长主要来自北京和上海等用户订单量激增，同时退货量减少、用户对产品的评价槽点减少影响的。

所以在设计上就可以采用地图空间分布的的手段去表达，并且体现北京和上海增量，及全国各省市的销量情况。这样可以有效的通过设计的手法去表达故事。

三、交互设计 交互设计可以有效的把产品的构思更细化的通过交互原型表达出来，包括信息层级、大屏的交互方式都会有初步的雏形，为设计提供数据信息层级及大屏初步交互方式，这里建议设计师多参与大屏交互方式的梳理，可视化设计师其实对设计有更多的见解，可从视觉的维度辅助交互完善。让交互更加趣味性、视觉性、感染性。

四、视觉/动画设计 这部分也是设计师的主要领域，发挥最多的地方，同时对设计师的要求相比 UI 设计会更高，知识广度上要求也更全面，正对可视化中常用的技能方向大致罗列如下。

1. 界面设计 了解硬件及场景背景

首先要根据场景确定硬件，布局时一定要考虑硬件，例如：拼接屏要考虑拼接缝，避免拼接缝与数据文字等穿插，拼接封把一个文字劈成两半在两个屏幕中展示，想想都丑。

还要考虑屏幕材质，如果是 led 屏幕就要多考虑显示虚不虚，偏不偏色。（可视化大屏便色、发虚出现在 led 屏幕上的居多）

同时还有观看距离，现场灯光，现场光线等情况都会对屏幕有不小的影响。

依数据界面布局

界面设计中，区分版块和内容的主次关系，能确保流程的合理性，同时使视觉区域更符合人类的生理习惯，使阅读体验更加轻松。

可视化中常用的布局方式，左右侧次，中间主、左主右次，等等具体依照数据自行排布。

界面元素应按照视觉运动的规律进行布局和组合，形成界面脉络，引导用户从主到次再到整体的视线移动规律。同时这也与我们前面了解到的业务故事线是一致的，让设计辅助业务讲故事，为故事增光添彩。

2. 配色设计 确定主色

早期的大屏以科技蓝为主，而现如今，大屏可以说是五彩斑斓，需要注意的是，在做大屏的时候，首先需要确定的是大屏的主色，需要考虑到客户的品牌要求，以及项目业务的所属行业，比如：我们做安全的系统，多数以绿色为主色；做党建，会以红色为主色；金融行业，以黑金相辅；做水务、城市等等业务则多以蓝色为主，确定了主色调以后，还需要找到辅助色，一个大屏上大面积的颜色建议不超过 5 种。

明度

其次就是颜色的明度，和做 B 端是同样的道理，一整个版面上，我们需要根据信息的重要程度，和人类阅读的习惯，把文字和图形按照有明到暗有所区分，这样会使我们的版本更富有空间感和层次感，更易阅读。

3. 图表设计 图表设计初衷是让数据清晰的传达信息，同时带来美观的视觉感受，

图表要承载业务上的大量数据信息，同时视觉元素较多，图表设计考量也是很多的，统一性、坐标轴、图例、多图表视觉重量感，不能凭借设计师的审美喜好进行视觉设计，根据业务属性及数据状态综合考虑，做到用色符合业务符合状态，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。

4. 主视觉设计 主视觉顾名思义也是设计作品中最核心的内容。需要兼顾整体的美感，同时符合环境场景使用，持续地强化用户对品牌的感知，并能打造视觉记忆统一性。

常见的主视觉主要分为几类，平面、2.5D、三维。平面主要以视觉排班为主更简洁的表达数据，三维更容易表达视觉效果，各有千秋。

5. 三维设计 平面大家比较熟悉了，本次主要以三维为主，三维也是可视化设计的大趋势。首先了要了解有哪些三维软件，例如 3dmax、c4d、Blender 等等，不同的软件建模逻辑有所不同，不管采用什么软件最终的成果要符合自然界中的认知，任何物理自然界存在的东西都可以用三维模型表示。

如果是地理相关的数据，要考虑他的真实性，制作其实是通过三维虚拟的形式还原真实物理世界。通常针对地理数据分为几大类包括建筑、道路、路网、河流、湖泊等。

数据应该怎样获得，可以通过 gis 数据、人工建模、倾斜摄影等，不同的数据直接关系到后期设计的可控性，比如倾斜摄影效果局限性非常大。

6. 动画设计 动画结合故事情节，在二维或者三维空间中用动画更生动的串联故事串联数据。让数据更富有灵性，形成独特的视觉艺术。

五、对接研发输出 这部分也是比较复杂难度比较高的，比较常见的对接参数、烘培等等方式。后续单独细说，这里仅做流程说明。

六、测试验收 这一步关系到设计还原度问题，我们的设计是否真正被高质量的还原，有没有还原度不够，或者直接没有实现的效果，都要通过这个环节梳理出来，形成测试文件，提交 BUG。待开发修改后还要跟进复验，最终达到高质量的设计落地。

欢迎关注作者微信公众号：「聂永真可视化设计实验室」

大家好，这里是和你们聊设计的花生~武汉最近大降温，还接连下了好几天的雨，冷得让人感觉又回到了冬天，倒春寒实在太让人难受啦。春分已过，再有一段时间就是“气清景明、万物皆显”的清明，也希望能尽快恢复之前温暖的气温，那今天就继续和大家分享在清明借势海报中常用的设计意向 ~往期回顾：借势海报必看！ 二十四节气之春分海报设...

大家好，这里是和你们聊设计的花生~

武汉最近大降温，还接连下了好几天的雨，冷得让人感觉又回到了冬天，倒春寒实在太让人难受啦。春分已过，再有一段时间就是“气清景明、万物皆显”的清明，也希望能尽快恢复之前温暖的气温，那今天就继续和大家分享在 清明 借势海报中常用的设计意向 ~

往期回顾：

借势海报必看！ 二十四节气之春分海报设计常用意象总结 大家好，这里是和你们聊设计的花生~ 这段时间气温上升的好快，一下窜到了二十多度，在武汉都恨不得穿短袖上班了。

阅读文章 >

一、“清明”简介 清明是二十四节气的第 5 个节气，因节令期间“气清景明、万物皆显”而得名，一般在公历 4 月 4 日至 6 日之间交节。清明具有两方面的含义，一方面它反映自然界物候变化，这个时节阳光明媚、百花盛放，适合踏青出游，在指导农事上也有重要意义；另一方面清明也是人们扫墓祭祖、慎终追远的节日。二者相融，让清明兼具自然和人文内涵。

不少借势海报都会侧重表现清明时节“气清景明”的好景象， 手机品牌三星结合用户“看见美景就想拍下来”的使用场景，将清明的美景置入手机的镜头框内，既符合节气特征，又凸显出手机强大的夜景拍摄功能，借势非常贴合品牌定位。

中国古代的物候历将清明分为三候：“一候桐始华；二候田鼠化为鴽；三候虹始见”。意思是清明正是桐花开放的时节，喜阴的田鼠因阳气渐盛而躲回洞穴，喜爱阳气的鸟儿则开始出来活动（“鴽”指鹌鹑类的小鸟），又因为清明时节多雨，故而多有彩虹在雨后出现。

清明三侯的意象在借势海报中的体现极少，可能是大家对桐花不太熟悉，羽色偏暗灰的鹌鹑也没有燕子讨喜有辨识度。不过“彩虹”倒是一个可以用起来的设计元素，颜色多彩，也有“雨后彩虹”的美好意境。我特地百度了一下，发现桐花是指泡桐（也叫白桐）开的花，小时候见过但不知道叫什么，开在高高的树上，没有香气，也不怎么起眼，不知道大家认不认识？

二、“清明”习俗 清明节具有悠久的历史，保留下来的习俗也非常多。除了我们熟悉的祭祀扫墓，还有踏青、放风筝、吃青团、插柳、吃蒿饼等。

① 祭祀扫墓/踏青

清明节既是一个扫墓祭祖的肃穆节日，也是人们亲近自然、踏青游玩、享受春天乐趣的欢乐节日。它融汇自然节气与人文风俗为一体，是天时地利人和的合一，充分体现了中华民族先祖们追求“天、地、人”的和谐合一，讲究顺应天时地宜、遵循自然规律的思想。

由于情感基调的限制，“祭祀追思”在商业品牌借势海报中使用较少，更多侧重于表现含蓄的“回忆”和“思念”。音乐品牌酷狗将音乐“容易勾起回忆”的特性与清明节“思念”的情感内核联系起来，温情又符合品牌调性。而“踏青游玩”的意象基调轻松活泼很多，在清明海报中经常被使用，两种意象也常结合使用。

② 放风筝

放风筝是清明时节人们所喜爱的活动。在古代，每逢清明时节人们不仅白天放，夜间也放。夜里在风筝下或风稳拉线上挂上一串串彩色的小灯笼，像闪烁的明星，被称为“神灯”。过去，有的人把风筝放上蓝天后，便剪断牵线，任凭清风把它们送往天涯海角，据说这样能除病消灾，给自己带来好运。

③ 吃青团子/蒸蒿饼

清明时节江南一带有吃青团子的风俗习惯。青团子是用一种名叫“浆麦草”的野生植物捣烂后挤压出汁，混合糯米粉揉制成面皮，再裹入糖豆沙制成的。青团子油绿如玉，糯韧绵软，清香扑鼻，吃起来甜而不腻，是江南一带人用来祭祀祖先必备食品。

蒿饼与青团类似，制法是“采新蒿嫩芽和糯米同舂，使蒿汁与米粉融和成一体，以肉、蔬菜、豆沙、枣泥等作馅，纳于各种花式的木模之中，用新芦叶垫底入笼蒸熟。”蒿饼颜色翠绿且带有植物清香，也是清明祭祖的食品之一，也用来馈赠或款待亲友。

三、“清明”常用意象 ① 清明时节雨纷纷

清明借势海报中对“下雨”意象的使用很广泛，还有不少品牌都选择化用“牧童遥指杏花村”的场景，不用说大家肯定也都知道这些意象的源头出自杜牧的名诗《清明》。网易音乐在借势海报中并没有重点刻画下雨的场景，而是将音符与伞的符号结合起来，体现清明“雨纷纷”的意向，画面简单但创意十足。

② 植物花草

“二十四番花信风”中清明对应的花信风为“一候桐花，二候麦花，三候柳花”。桐花前面已经给大家介绍过了，麦花和柳花分别指小麦开的话和柳树的花（写这篇文章之前都不知道原来小麦也会开花）。借势海报中对这三种花的使用较少，但清明时节柳色正青，民间也有清明节门头插柳的习俗，因此“柳树枝”在海报中长作为装饰元素使用。

好啦以上就是本期为大家整理的二十四节气中清明 海报设计 的常用意象，喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多有趣又实用的设计干货知识 ~

推荐阅读：

AIGC神器 Midjourney V5 强势更新！逼真到令人发指！ 大家好，这里是和你们一起探索 AI 绘画的花生~ 备受期待的 Midjourney V5 在上周四终于上线了，而且一发布就引起了不小的轰动，因此这次 V5 模型的图像生成效果“太惊人了”，无限逼近真实照片，让人难辨真假。

阅读文章 >

比 AI 帮个忙更好用！这 5 款神器让你效率暴涨200% 大家好，这里是继续为你们推荐 AI 效率神器的花生~ 自 ChatGPT 公布后，各种基于其 API 开发的应用就像雨后春笋般迅速出现，之前「优设 9 图」为大家介绍的“AI 帮个忙”就是其中之一。

阅读文章 >

近段时间讲了不少 AI 方面的知识，不过我实际用 AI 绘画做 UI 时，目前还只能用来做参考，很多细节还是得手动调整。今天跟大家分享的这个案例，就是通过 16 次改版优化把它一点点变好的。通过对 UI 中这些细节的不断打磨，终于让它在视觉上变得更好了。

近段时间讲了不少 AI 方面的知识，不过我实际用 AI 绘画做 UI 时，目前还只能用来做参考，很多细节还是得手动调整。今天跟大家分享的这个案例，就是通过 16 次改版优化把它一点点变好的。通过对 UI 中这些细节的不断打磨，终于让它在视觉上变得更好了。

这 16 次优化，实际上也是在做 UI 时所需要遵循的 设计原则 ，记得收藏并用到自己的项目里，用上才算真正学到。

更多改版实战：

高手是如何做改版的？来看智行10.0设计改版案例复盘 Hey，亲爱的小伙伴，你期待的旅行是什么样的？

阅读文章 >

设计一个好的 UI 界面并不容易，因为有太多细节需要考虑，比如布局、间距、字体和颜色等，做出决策会让人感到无从下手。当你还需要考虑到可用性、可访问性和心理学等因素时，设计就变得更加困难了。

幸运的是，UI 设计并不会太难。作为一个产品设计师，我工作了将近 20 年，发现自己大部分的视觉和交互设计决策都是基于一套简单的逻辑规则。跟别的 设计师 不一样的是，我依赖的是规则而不是艺术感或者神秘的灵感。

有一个系统性的逻辑规则可以帮助你更高效地做出设计决策。如果没有这个逻辑系统，只是凭感觉胡乱挪动元素，能不能把 UI 做好貌似就只能靠运气。

我喜欢规则和逻辑，但做设计也绝不是非黑即白。不要把下面的建议看成必须遵守的严格规则，而是把它们当作实用的指导方向，在大多数情况下都能很好地发挥作用。

下面就用一个案例来说明这些设计规则如何改进 UI 设计。

下面这 2 张图是一款租房应用详情页面，左边是优化前的，右边是通过一系列逻辑规则优化后的效果。（彩云注：有指导原则对于做设计决策会好很多，避免自己的感觉不准，让设计质量更加稳定。）

即使你没有太多交互或视觉设计经验，你可能也会觉得左边的设计是杂论无章，复杂难用的。这是因为界面中有很多设计细节问题没有处理好，让界面的可用性大打折扣，你能看出来多少？

让我们一起根据下面 16 条黄金原则优化好这个界面吧：

使用留白和分组来划分元素 保持一致性 确保看起来相似的元素在功能上也是类似的 设计清晰的视觉层次结构 删减不必要的样式 使用有目的的颜色 确保界面中的元素能保持 3:1 的对比度 确保文本能有 4.5:1 的对比度 不要只用颜色来表达信息 使用一种无衬线字体 使用具有较高小写字母的字体 尽量不要过多地使用大写字母 只使用正常和粗体这两种字重 避免使用纯黑色的文本 多使用左对齐 使用至少 1.5 倍的行高来设置正文文本 1. 使用留白和分组来划分元素 把信息分成几组相关元素可以帮助构建一个有条理的界面，更易于组织和阅读信息。这样做可以让人更快更容易地理解和记住界面的内容。

你可以使用这些方法来对信息分组：

把相关元素放在一个容器里 把相关元素彼此靠近 让相关元素在设计上相似 将相关元素对齐在同一条直线上 使用容器是将界面元素分组的最强视觉表现方式，但它可能会增加不必要的杂乱感。寻找使用其他分组方法的机会，它们通常更微妙，可以帮助简化设计。

使用留白是一个非常有效的元素分组方式，你可以同时使用这些方法用以更好的将信息组织起来。

比如在下面的例子中，留白空间不够，让信息显得挤在一起难以阅读，通过增加留白，能帮助更好的对信息进行分组，让整个排版显得更舒服，更利于阅读。

2. 保持一致性 在 UI 设计中，一致性的意思是相似的元素，在外观和行为上保持相似。这种一致性不仅在你自己设计的产品中保持，也应该与其他已有的产品相类似，以保证用户的心智统一。这样可以提高可用性并减少错误，用户不再需要重新学习如何使用。

在下面的例子中，图标的风格是不统一的，一些图标是填充的一些是描边的。这会让用户感到困惑，填充图标通常会让用户觉得是已经选择了。当所有图标都用描边的形式，统一描边 2pt 的粗细和统一的圆角，并设计相似的视觉重量，那么就可以很好的提高一致性。

文本用来提升图标的易读性，以帮助用户更好的理解它的意思。特别是当一些用户使用读屏时（屏幕阅读器是一种软件，用于描述界面，并通过语音或盲文向看不到它的人进行描述）。

3. 确保看起来相似的元素功能也相似 如果元素看起来是类似的，用户会觉得它们在功能上也是类似的。因此，尝试确保对于具有相同功能的元素使用一致的视觉设计。相反，尝试确保具有不同功能的元素看起来也是不同的。

在我们的例子中，图标区域的样式与“Book now”按钮的样式非常类似。这使得它们看起来是可以点击的，但实际上是不可以的。把底部的蓝色背景区域去掉，避免用户的误解。

4. 创建一个清晰的层次结构 不是所有在界面上的信息都同等重要，为了让信息更容易理解，要让更重要的信息被设计的更突出一些。

一个清晰的层次关系，能帮助用户更快的阅读内容，并能把焦点放到他感兴趣的地方。同时，它还可以通过创造秩序来提高美学效果。你可以通过大小、颜色、对比、间距、位置和深度进行优化，打造一个清晰的视觉层级。

下面的例子是一个视觉层次不清晰的网站 banner 示例，在它下面是一个明确的层次结构的案例。

一个非常快且容易的检查你的视觉设计层次是否清晰的方法是采用“眯眼测试（ Squint Test）”。只需眯起眼睛观察你的设计，或者远离屏幕或使设计模糊。你仍应该能够看出哪些元素最重要，知道界面的用途。

用“眯眼测试”看下面的例子，我们可以发现多个具有类似视觉强度的元素在争抢用户的注意力。同时，左下角的主要操作反而没有凸显出来。

主要按钮在界面中通常是最突出的元素。通过给它一个与背景强对比的颜色，并把字体加粗可以实现这一点。这样做也解决了可读性的问题，后面会详细研究。

再次用上“眯眼测试”，主要按钮这次成了页面中最突出的元素了。

视觉层次现在终于清晰了，但依然还有提升的空间。例如，正文相对于它的层级来说，还是有点太突出了。

5. 删除不必要的样式 不必要的信息和视觉样式可能会分散注意力，增加认知负荷。避免使用不必要的线条、颜色、背景和动画，目的是创建一个更简单、更专注的界面。

在我们的例子中，图片周围的留白和描边是没必要的，会增加视觉复杂度。这些样式不需要来传达信息或对元素进行分组，因此我们可以安全地将它们删减以简化设计。

6. 有目的的使用颜色 有目的地、节制地使用颜色。尽量避免仅仅因为装饰而使用颜色，因为这样会让人感到混乱和分散注意力。从黑白开始，只在需要传达意义时才引入颜色。

一个简单有效的方式是把品牌颜色应用到文字链接和按钮等可交互的元素上。它能帮助用户理解哪些是可点击的而哪些不可以。尝试避免使用品牌颜色在不可交互的元素上。

你也不需要把品牌颜色应用到所有可交互的元素上，一些元素其实本身就已经给出了可交互的线索。例如，卡片设计本身给人的隐喻就是全部可点击的，所以不需要在文字上单独再加一个蓝色的链接。

在我们的例子中，优化前的蓝色标题可起来还挺好看的，但它让文字看起来是可交互的。为了帮助避免这种困惑，我们需要把这种蓝色样式给移除掉。

我们同样需要把其他不可交互的元素中的蓝色样式删除掉，比如蓝色的星星。这样优化后，界面上可点不可点的信息就能一目了然了。

7. 确保界面上的元素能保持 3:1 的对比度 对比是衡量两种颜色之间感知亮度差异的指标。对比度的表达方式是一个比例，范围从 1:1 到 21:1 不等。例如，在黑色背景上的黑色文本具有最低的 1:1 对比度比率，而在白色背景上的黑色文本具有最高的 21:1 比率。

有许多在线工具（ https://usecontrast.com/ ）可以帮助你测量不同颜色之间的对比度比率。通过使用这些工具，你可以轻松地检查是否符合无障碍标准，并确保所有用户都可以轻松地使用你的产品。

为了确保视力受损的人能够清晰地看到界面细节，应该至少符合 Web 内容可访问性指南（WCAG） 2.1 AA 级别的颜色对比要求。

这意味着用户界面元素，如表单字段和按钮，需要至少具有 3:1 的对比度比率。这是为了确保用户可以清楚地看到所有的界面元素，从而更容易地使用产品。WCAG 还包括许多其他指南和要求，包括对语音识别和屏幕阅读器的支持等，以确保你的产品具有最佳的无障碍性能。

在我们的例子中，箭头图标与背景的对比度比率太低。给图标上加投影和在图片顶部三分之一处加渐变叠加效果，无论图标所在的图片如何变化，都可以使图标具有足够的 3:1 对比度。

这样可以确保视力受损的人也能够清晰地看到图标，并能够更好地使用你的产品。同时，这也是一种设计技巧，可以使图标在不同背景下都能够显得更加醒目和有吸引力。

主要按钮的对比度在优化前的页面上同样是对比度太低。在解决视觉层次那里已经优化了它，但这里也值得再提一下。

低对比度按钮的风险在于视力较差的人可能无法看到这个按钮。将按钮的对比度比率提高到 3：1 以上可以使按钮易于访问，同时也有助于纠正视觉层次结构。

将箭头和按钮的对比度提高到大于 3：1 的比率会得到以下设计。我们离理想效果又近了一步，但我们仍然有更多问题需要解决。

8. 确保文本具有 4.5：1 的对比度比率 为了确保视力受损的人能够清晰地阅读文本，文本需要满足以下 WCAG 2.1 级 AA 对比度要求

小字（18px 以下）需要最少达到 4.5:1 的比率 大字（包括 18px 粗体或最小 24px 的正常体）需要最少达到 3:1 的比率 在我们的例子中，小字在照片中的对比度是不够的。我们把对比度提高到了 4.5:1，增加不透明度成深色并增加文字的投影。

位置信息的对比度也是太低了。细的文字使得它很难阅读。使用较深的灰色可以帮助文本更易于阅读。我们很快会对文本进行进一步优化。

9. 不要只靠颜色 有许多不同类型的色盲，而且它们主要影响男性。通常，色盲者难以区分红色和绿色，有些人甚至根本无法看到任何颜色。

为了确保色盲用户在使用产品时的可用性，你不能仅依赖颜色作为交互引导，或区分不同视觉元素。你需要增加更多为 UI 元素视觉线索。

在我们的例子中，”reviews“文本使用了蓝色表示一个链接。如果把颜色去除，链接文本就和其他普通文本没任何区别了，所以给可点击的链接文字增加一个下划线是一个正确的做法，这样就可以很好的做了区分。

10. 使用统一的无衬线字体 字体是一组相关的具有相似风格或美学特征的字形设计。Helvetica 是一个字体的例子。而字形则是字体中的变体，如字重或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字体中的两种不同字形。

比较稳妥的方式是在一个界面中仅使用一种无衬线字体，因为它们通常是最易读、最中性、最简单的。

在我们的例子中，标题字使用了细节丰富的衬线字体，这种字体可能有些难阅读，并且可能会对某些人产生干扰。此外，它的风格可能与应用中的某些照片不匹配。使用简单的无衬线字体可以提高可用性和美观度。

11. 使用小写字母更高的字体 在选择字体时，要找那些小写字母比较高，字母间距比较大的，因为这些字体在小字号时更容易阅读。字体中小写字母的高度叫做 x 高度。

在我们的例子中，Gill Sans 字体的字母高度相对较矮，把它优化为高度更大的字体，像 Lato，可以有效地提升可读性。

在将字体从 Gill Sans 更改为 Lato 后，我们的例子像下面这样。

12. 限制使用大写 一般来说，如果不是在向别人大喊大叫，就没有太多使用大写字母的正当理由。因为大写字母看起来太吵，也不易于阅读。

因为当你阅读时，你并不是以单个字母去看的，而是会以单词的字形来看的。

一般来说，我们在阅读时更容易根据单词的形状来识别它，而不是一个字母一个字母地看。大写字母的单词形状相同，阅读起来比较费力，不利于快速识别整个单词。

在我们的例子中，位置信息使用了全大写。将其改为句子首字母大写，只有第一个单词和专有名词（人名、地名或物品名称）大写，有助于提高可读性。

13. 仅使用常规和粗体 虽然一个字体中可能有很多字重可供选择，但并不意味着你需要在设计中全部使用。过多地使用不同的字重会让界面显得嘈杂不清。同时，使用太多不同的字重会让设计难以保持一致性。因此，在设计中只使用常规和粗体的字重是更好的选择。

保持界面中只使用常规和加粗字体，可以让界面简单明了。

一些快速使用的技巧:

使用粗体字体以强调标题 使用常规字重来呈现其他比较小的文本 如果你决定使用非常细或非常粗的字重，最好将它们保留给标题和更大的文本，因为它们在较小的尺寸下可能难以阅读 在我们的例子中，位置文本用了一个非常细的字重。即使我们把对比度优化到 4.5:1，但由于它太细，其实还是比较难阅读。增加它的字重，改成常规字体，可以帮助提升可读性，让界面整体上也更简单。

14. 避免使用纯黑色文字 在 UI 设计中，比较安全的做法就是别使用纯黑色，因为它在一个白色背景上对比度过高了。这种高对比度会导致阅读文本时眼睛疲劳和不适。

黑色是 0%的亮度，白色是 100%的亮度，这 2 者巨大的亮度差异会导致颜色很不舒服。所以，最好避免在白色背景上使用纯黑色，改用深灰色会比较好。

在我们的例子中，很多元素都使用了纯黑色。将其改为深灰色可以提高可读性。之前在检查视觉层次时，会发现物业描述文本过于突出。为了确保界面元素按重要性呈现，改为较浅的灰色来减少物业描述文本的突出程度。

15. 左对齐文本 英语的阅读方式是从左到右，由上至下呈 F 形阅读的，所以最好将文本左对齐以实现最佳阅读效果。对于长篇正文，最好避免居中对齐或两端对齐的方式。这种对齐方式难以阅读，尤其是对于那些认知能力较弱的人来说更加困难。

在标题和短文本上使用居中对齐会比较好，那样会比较方便阅读。但是，对于长文本来说，居中对齐就是灾难，因为每行的起点都不一样。你的眼睛需要找每一行的起点，这会让阅读变得很困难。

在我们的例子中，描述文本是居中对齐的，改为左对齐后会发现可读性好很多。

16. 对于内容文本至少要有 1.5 倍行高 行高是指在垂直高度上的文字间距。每行文字之间的间距有助于防止人们重复阅读同一行文字。这样做也会让阅读更加舒适自然。

为了提高可访问性和可读性，特别是对于长篇正文，确保行高至少为 1.5（150%）。将行高保持在 1.5 到 2 之间通常效果良好。

在我们的例子中，行高仅有 1（100%），增加行高到 1.6（160%）后，可读性好了很多。

最终效果 我们遵循了几个简单但有效的 UI 设计准则，很快就发现并优化了例子设计中的许多问题。

（彩云注：最终优化后的效果会比优化前的好很多，那么请你再回头想想，如果再让你优化一遍这个界面，关掉教程，你还能再优化一遍吗？然后再进一步，把这些方法如何用到自己的实际项目中，作品集中，相信会更有帮助。）

希望你已经开始意识到，UI 设计并不是那么困难。虽然它看起来像一门神奇的艺术形式，但其中很大一部分都是由像我们刚学到的这些逻辑规则或指导原则所构成的。使用客观的逻辑，而不是主观的意见，可以更快速、更轻松地设计出直观、易用和美观的界面。

如果你有学到，记得分享到你的朋友圈哦~

欢迎关注作者的微信公众号：「彩云译设计」

大家好，这里是和你们聊设计的花生~武汉最近大降温，还接连下了好几天的雨，冷得让人感觉又回到了冬天，倒春寒实在太让人难受啦。春分已过，再有一段时间就是“气清景明、万物皆显”的清明，也希望能尽快恢复之前温暖的气温，那今天就继续和大家分享在清明借势海报中常用的设计意向 ~往期回顾：借势海报必看！ 二十四节气之春分海报设...

大家好，这里是和你们聊设计的花生~

武汉最近大降温，还接连下了好几天的雨，冷得让人感觉又回到了冬天，倒春寒实在太让人难受啦。春分已过，再有一段时间就是“气清景明、万物皆显”的清明，也希望能尽快恢复之前温暖的气温，那今天就继续和大家分享在 清明 借势海报中常用的设计意向 ~

往期回顾：

借势海报必看！ 二十四节气之春分海报设计常用意象总结 大家好，这里是和你们聊设计的花生~ 这段时间气温上升的好快，一下窜到了二十多度，在武汉都恨不得穿短袖上班了。

阅读文章 >

一、“清明”简介 清明是二十四节气的第 5 个节气，因节令期间“气清景明、万物皆显”而得名，一般在公历 4 月 4 日至 6 日之间交节。清明具有两方面的含义，一方面它反映自然界物候变化，这个时节阳光明媚、百花盛放，适合踏青出游，在指导农事上也有重要意义；另一方面清明也是人们扫墓祭祖、慎终追远的节日。二者相融，让清明兼具自然和人文内涵。

不少借势海报都会侧重表现清明时节“气清景明”的好景象， 手机品牌三星结合用户“看见美景就想拍下来”的使用场景，将清明的美景置入手机的镜头框内，既符合节气特征，又凸显出手机强大的夜景拍摄功能，借势非常贴合品牌定位。

中国古代的物候历将清明分为三候：“一候桐始华；二候田鼠化为鴽；三候虹始见”。意思是清明正是桐花开放的时节，喜阴的田鼠因阳气渐盛而躲回洞穴，喜爱阳气的鸟儿则开始出来活动（“鴽”指鹌鹑类的小鸟），又因为清明时节多雨，故而多有彩虹在雨后出现。

清明三侯的意象在借势海报中的体现极少，可能是大家对桐花不太熟悉，羽色偏暗灰的鹌鹑也没有燕子讨喜有辨识度。不过“彩虹”倒是一个可以用起来的设计元素，颜色多彩，也有“雨后彩虹”的美好意境。我特地百度了一下，发现桐花是指泡桐（也叫白桐）开的花，小时候见过但不知道叫什么，开在高高的树上，没有香气，也不怎么起眼，不知道大家认不认识？

二、“清明”习俗 清明节具有悠久的历史，保留下来的习俗也非常多。除了我们熟悉的祭祀扫墓，还有踏青、放风筝、吃青团、插柳、吃蒿饼等。

① 祭祀扫墓/踏青

清明节既是一个扫墓祭祖的肃穆节日，也是人们亲近自然、踏青游玩、享受春天乐趣的欢乐节日。它融汇自然节气与人文风俗为一体，是天时地利人和的合一，充分体现了中华民族先祖们追求“天、地、人”的和谐合一，讲究顺应天时地宜、遵循自然规律的思想。

由于情感基调的限制，“祭祀追思”在商业品牌借势海报中使用较少，更多侧重于表现含蓄的“回忆”和“思念”。音乐品牌酷狗将音乐“容易勾起回忆”的特性与清明节“思念”的情感内核联系起来，温情又符合品牌调性。而“踏青游玩”的意象基调轻松活泼很多，在清明海报中经常被使用，两种意象也常结合使用。

② 放风筝

放风筝是清明时节人们所喜爱的活动。在古代，每逢清明时节人们不仅白天放，夜间也放。夜里在风筝下或风稳拉线上挂上一串串彩色的小灯笼，像闪烁的明星，被称为“神灯”。过去，有的人把风筝放上蓝天后，便剪断牵线，任凭清风把它们送往天涯海角，据说这样能除病消灾，给自己带来好运。

③ 吃青团子/蒸蒿饼

清明时节江南一带有吃青团子的风俗习惯。青团子是用一种名叫“浆麦草”的野生植物捣烂后挤压出汁，混合糯米粉揉制成面皮，再裹入糖豆沙制成的。青团子油绿如玉，糯韧绵软，清香扑鼻，吃起来甜而不腻，是江南一带人用来祭祀祖先必备食品。

蒿饼与青团类似，制法是“采新蒿嫩芽和糯米同舂，使蒿汁与米粉融和成一体，以肉、蔬菜、豆沙、枣泥等作馅，纳于各种花式的木模之中，用新芦叶垫底入笼蒸熟。”蒿饼颜色翠绿且带有植物清香，也是清明祭祖的食品之一，也用来馈赠或款待亲友。

三、“清明”常用意象 ① 清明时节雨纷纷

清明借势海报中对“下雨”意象的使用很广泛，还有不少品牌都选择化用“牧童遥指杏花村”的场景，不用说大家肯定也都知道这些意象的源头出自杜牧的名诗《清明》。网易音乐在借势海报中并没有重点刻画下雨的场景，而是将音符与伞的符号结合起来，体现清明“雨纷纷”的意向，画面简单但创意十足。

② 植物花草

“二十四番花信风”中清明对应的花信风为“一候桐花，二候麦花，三候柳花”。桐花前面已经给大家介绍过了，麦花和柳花分别指小麦开的话和柳树的花（写这篇文章之前都不知道原来小麦也会开花）。借势海报中对这三种花的使用较少，但清明时节柳色正青，民间也有清明节门头插柳的习俗，因此“柳树枝”在海报中长作为装饰元素使用。

好啦以上就是本期为大家整理的二十四节气中清明 海报设计 的常用意象，喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多有趣又实用的设计干货知识 ~

推荐阅读：

AIGC神器 Midjourney V5 强势更新！逼真到令人发指！ 大家好，这里是和你们一起探索 AI 绘画的花生~ 备受期待的 Midjourney V5 在上周四终于上线了，而且一发布就引起了不小的轰动，因此这次 V5 模型的图像生成效果“太惊人了”，无限逼近真实照片，让人难辨真假。

阅读文章 >

比 AI 帮个忙更好用！这 5 款神器让你效率暴涨200% 大家好，这里是继续为你们推荐 AI 效率神器的花生~ 自 ChatGPT 公布后，各种基于其 API 开发的应用就像雨后春笋般迅速出现，之前「优设 9 图」为大家介绍的“AI 帮个忙”就是其中之一。

阅读文章 >

近段时间讲了不少 AI 方面的知识，不过我实际用 AI 绘画做 UI 时，目前还只能用来做参考，很多细节还是得手动调整。今天跟大家分享的这个案例，就是通过 16 次改版优化把它一点点变好的。通过对 UI 中这些细节的不断打磨，终于让它在视觉上变得更好了。

近段时间讲了不少 AI 方面的知识，不过我实际用 AI 绘画做 UI 时，目前还只能用来做参考，很多细节还是得手动调整。今天跟大家分享的这个案例，就是通过 16 次改版优化把它一点点变好的。通过对 UI 中这些细节的不断打磨，终于让它在视觉上变得更好了。

这 16 次优化，实际上也是在做 UI 时所需要遵循的 设计原则 ，记得收藏并用到自己的项目里，用上才算真正学到。

更多改版实战：

高手是如何做改版的？来看智行10.0设计改版案例复盘 Hey，亲爱的小伙伴，你期待的旅行是什么样的？

阅读文章 >

设计一个好的 UI 界面并不容易，因为有太多细节需要考虑，比如布局、间距、字体和颜色等，做出决策会让人感到无从下手。当你还需要考虑到可用性、可访问性和心理学等因素时，设计就变得更加困难了。

幸运的是，UI 设计并不会太难。作为一个产品设计师，我工作了将近 20 年，发现自己大部分的视觉和交互设计决策都是基于一套简单的逻辑规则。跟别的 设计师 不一样的是，我依赖的是规则而不是艺术感或者神秘的灵感。

有一个系统性的逻辑规则可以帮助你更高效地做出设计决策。如果没有这个逻辑系统，只是凭感觉胡乱挪动元素，能不能把 UI 做好貌似就只能靠运气。

我喜欢规则和逻辑，但做设计也绝不是非黑即白。不要把下面的建议看成必须遵守的严格规则，而是把它们当作实用的指导方向，在大多数情况下都能很好地发挥作用。

下面就用一个案例来说明这些设计规则如何改进 UI 设计。

下面这 2 张图是一款租房应用详情页面，左边是优化前的，右边是通过一系列逻辑规则优化后的效果。（彩云注：有指导原则对于做设计决策会好很多，避免自己的感觉不准，让设计质量更加稳定。）

即使你没有太多交互或视觉设计经验，你可能也会觉得左边的设计是杂论无章，复杂难用的。这是因为界面中有很多设计细节问题没有处理好，让界面的可用性大打折扣，你能看出来多少？

让我们一起根据下面 16 条黄金原则优化好这个界面吧：

使用留白和分组来划分元素 保持一致性 确保看起来相似的元素在功能上也是类似的 设计清晰的视觉层次结构 删减不必要的样式 使用有目的的颜色 确保界面中的元素能保持 3:1 的对比度 确保文本能有 4.5:1 的对比度 不要只用颜色来表达信息 使用一种无衬线字体 使用具有较高小写字母的字体 尽量不要过多地使用大写字母 只使用正常和粗体这两种字重 避免使用纯黑色的文本 多使用左对齐 使用至少 1.5 倍的行高来设置正文文本 1. 使用留白和分组来划分元素 把信息分成几组相关元素可以帮助构建一个有条理的界面，更易于组织和阅读信息。这样做可以让人更快更容易地理解和记住界面的内容。

你可以使用这些方法来对信息分组：

把相关元素放在一个容器里 把相关元素彼此靠近 让相关元素在设计上相似 将相关元素对齐在同一条直线上 使用容器是将界面元素分组的最强视觉表现方式，但它可能会增加不必要的杂乱感。寻找使用其他分组方法的机会，它们通常更微妙，可以帮助简化设计。

使用留白是一个非常有效的元素分组方式，你可以同时使用这些方法用以更好的将信息组织起来。

比如在下面的例子中，留白空间不够，让信息显得挤在一起难以阅读，通过增加留白，能帮助更好的对信息进行分组，让整个排版显得更舒服，更利于阅读。

2. 保持一致性 在 UI 设计中，一致性的意思是相似的元素，在外观和行为上保持相似。这种一致性不仅在你自己设计的产品中保持，也应该与其他已有的产品相类似，以保证用户的心智统一。这样可以提高可用性并减少错误，用户不再需要重新学习如何使用。

在下面的例子中，图标的风格是不统一的，一些图标是填充的一些是描边的。这会让用户感到困惑，填充图标通常会让用户觉得是已经选择了。当所有图标都用描边的形式，统一描边 2pt 的粗细和统一的圆角，并设计相似的视觉重量，那么就可以很好的提高一致性。

文本用来提升图标的易读性，以帮助用户更好的理解它的意思。特别是当一些用户使用读屏时（屏幕阅读器是一种软件，用于描述界面，并通过语音或盲文向看不到它的人进行描述）。

3. 确保看起来相似的元素功能也相似 如果元素看起来是类似的，用户会觉得它们在功能上也是类似的。因此，尝试确保对于具有相同功能的元素使用一致的视觉设计。相反，尝试确保具有不同功能的元素看起来也是不同的。

在我们的例子中，图标区域的样式与“Book now”按钮的样式非常类似。这使得它们看起来是可以点击的，但实际上是不可以的。把底部的蓝色背景区域去掉，避免用户的误解。

4. 创建一个清晰的层次结构 不是所有在界面上的信息都同等重要，为了让信息更容易理解，要让更重要的信息被设计的更突出一些。

一个清晰的层次关系，能帮助用户更快的阅读内容，并能把焦点放到他感兴趣的地方。同时，它还可以通过创造秩序来提高美学效果。你可以通过大小、颜色、对比、间距、位置和深度进行优化，打造一个清晰的视觉层级。

下面的例子是一个视觉层次不清晰的网站 banner 示例，在它下面是一个明确的层次结构的案例。

一个非常快且容易的检查你的视觉设计层次是否清晰的方法是采用“眯眼测试（ Squint Test）”。只需眯起眼睛观察你的设计，或者远离屏幕或使设计模糊。你仍应该能够看出哪些元素最重要，知道界面的用途。

用“眯眼测试”看下面的例子，我们可以发现多个具有类似视觉强度的元素在争抢用户的注意力。同时，左下角的主要操作反而没有凸显出来。

主要按钮在界面中通常是最突出的元素。通过给它一个与背景强对比的颜色，并把字体加粗可以实现这一点。这样做也解决了可读性的问题，后面会详细研究。

再次用上“眯眼测试”，主要按钮这次成了页面中最突出的元素了。

视觉层次现在终于清晰了，但依然还有提升的空间。例如，正文相对于它的层级来说，还是有点太突出了。

5. 删除不必要的样式 不必要的信息和视觉样式可能会分散注意力，增加认知负荷。避免使用不必要的线条、颜色、背景和动画，目的是创建一个更简单、更专注的界面。

在我们的例子中，图片周围的留白和描边是没必要的，会增加视觉复杂度。这些样式不需要来传达信息或对元素进行分组，因此我们可以安全地将它们删减以简化设计。

6. 有目的的使用颜色 有目的地、节制地使用颜色。尽量避免仅仅因为装饰而使用颜色，因为这样会让人感到混乱和分散注意力。从黑白开始，只在需要传达意义时才引入颜色。

一个简单有效的方式是把品牌颜色应用到文字链接和按钮等可交互的元素上。它能帮助用户理解哪些是可点击的而哪些不可以。尝试避免使用品牌颜色在不可交互的元素上。

你也不需要把品牌颜色应用到所有可交互的元素上，一些元素其实本身就已经给出了可交互的线索。例如，卡片设计本身给人的隐喻就是全部可点击的，所以不需要在文字上单独再加一个蓝色的链接。

在我们的例子中，优化前的蓝色标题可起来还挺好看的，但它让文字看起来是可交互的。为了帮助避免这种困惑，我们需要把这种蓝色样式给移除掉。

我们同样需要把其他不可交互的元素中的蓝色样式删除掉，比如蓝色的星星。这样优化后，界面上可点不可点的信息就能一目了然了。

7. 确保界面上的元素能保持 3:1 的对比度 对比是衡量两种颜色之间感知亮度差异的指标。对比度的表达方式是一个比例，范围从 1:1 到 21:1 不等。例如，在黑色背景上的黑色文本具有最低的 1:1 对比度比率，而在白色背景上的黑色文本具有最高的 21:1 比率。

有许多在线工具（ https://usecontrast.com/ ）可以帮助你测量不同颜色之间的对比度比率。通过使用这些工具，你可以轻松地检查是否符合无障碍标准，并确保所有用户都可以轻松地使用你的产品。

为了确保视力受损的人能够清晰地看到界面细节，应该至少符合 Web 内容可访问性指南（WCAG） 2.1 AA 级别的颜色对比要求。

这意味着用户界面元素，如表单字段和按钮，需要至少具有 3:1 的对比度比率。这是为了确保用户可以清楚地看到所有的界面元素，从而更容易地使用产品。WCAG 还包括许多其他指南和要求，包括对语音识别和屏幕阅读器的支持等，以确保你的产品具有最佳的无障碍性能。

在我们的例子中，箭头图标与背景的对比度比率太低。给图标上加投影和在图片顶部三分之一处加渐变叠加效果，无论图标所在的图片如何变化，都可以使图标具有足够的 3:1 对比度。

这样可以确保视力受损的人也能够清晰地看到图标，并能够更好地使用你的产品。同时，这也是一种设计技巧，可以使图标在不同背景下都能够显得更加醒目和有吸引力。

主要按钮的对比度在优化前的页面上同样是对比度太低。在解决视觉层次那里已经优化了它，但这里也值得再提一下。

低对比度按钮的风险在于视力较差的人可能无法看到这个按钮。将按钮的对比度比率提高到 3：1 以上可以使按钮易于访问，同时也有助于纠正视觉层次结构。

将箭头和按钮的对比度提高到大于 3：1 的比率会得到以下设计。我们离理想效果又近了一步，但我们仍然有更多问题需要解决。

8. 确保文本具有 4.5：1 的对比度比率 为了确保视力受损的人能够清晰地阅读文本，文本需要满足以下 WCAG 2.1 级 AA 对比度要求

小字（18px 以下）需要最少达到 4.5:1 的比率 大字（包括 18px 粗体或最小 24px 的正常体）需要最少达到 3:1 的比率 在我们的例子中，小字在照片中的对比度是不够的。我们把对比度提高到了 4.5:1，增加不透明度成深色并增加文字的投影。

位置信息的对比度也是太低了。细的文字使得它很难阅读。使用较深的灰色可以帮助文本更易于阅读。我们很快会对文本进行进一步优化。

9. 不要只靠颜色 有许多不同类型的色盲，而且它们主要影响男性。通常，色盲者难以区分红色和绿色，有些人甚至根本无法看到任何颜色。

为了确保色盲用户在使用产品时的可用性，你不能仅依赖颜色作为交互引导，或区分不同视觉元素。你需要增加更多为 UI 元素视觉线索。

在我们的例子中，”reviews“文本使用了蓝色表示一个链接。如果把颜色去除，链接文本就和其他普通文本没任何区别了，所以给可点击的链接文字增加一个下划线是一个正确的做法，这样就可以很好的做了区分。

10. 使用统一的无衬线字体 字体是一组相关的具有相似风格或美学特征的字形设计。Helvetica 是一个字体的例子。而字形则是字体中的变体，如字重或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字体中的两种不同字形。

比较稳妥的方式是在一个界面中仅使用一种无衬线字体，因为它们通常是最易读、最中性、最简单的。

在我们的例子中，标题字使用了细节丰富的衬线字体，这种字体可能有些难阅读，并且可能会对某些人产生干扰。此外，它的风格可能与应用中的某些照片不匹配。使用简单的无衬线字体可以提高可用性和美观度。

11. 使用小写字母更高的字体 在选择字体时，要找那些小写字母比较高，字母间距比较大的，因为这些字体在小字号时更容易阅读。字体中小写字母的高度叫做 x 高度。

在我们的例子中，Gill Sans 字体的字母高度相对较矮，把它优化为高度更大的字体，像 Lato，可以有效地提升可读性。

在将字体从 Gill Sans 更改为 Lato 后，我们的例子像下面这样。

12. 限制使用大写 一般来说，如果不是在向别人大喊大叫，就没有太多使用大写字母的正当理由。因为大写字母看起来太吵，也不易于阅读。

因为当你阅读时，你并不是以单个字母去看的，而是会以单词的字形来看的。

一般来说，我们在阅读时更容易根据单词的形状来识别它，而不是一个字母一个字母地看。大写字母的单词形状相同，阅读起来比较费力，不利于快速识别整个单词。

在我们的例子中，位置信息使用了全大写。将其改为句子首字母大写，只有第一个单词和专有名词（人名、地名或物品名称）大写，有助于提高可读性。

13. 仅使用常规和粗体 虽然一个字体中可能有很多字重可供选择，但并不意味着你需要在设计中全部使用。过多地使用不同的字重会让界面显得嘈杂不清。同时，使用太多不同的字重会让设计难以保持一致性。因此，在设计中只使用常规和粗体的字重是更好的选择。

保持界面中只使用常规和加粗字体，可以让界面简单明了。

一些快速使用的技巧:

使用粗体字体以强调标题 使用常规字重来呈现其他比较小的文本 如果你决定使用非常细或非常粗的字重，最好将它们保留给标题和更大的文本，因为它们在较小的尺寸下可能难以阅读 在我们的例子中，位置文本用了一个非常细的字重。即使我们把对比度优化到 4.5:1，但由于它太细，其实还是比较难阅读。增加它的字重，改成常规字体，可以帮助提升可读性，让界面整体上也更简单。

14. 避免使用纯黑色文字 在 UI 设计中，比较安全的做法就是别使用纯黑色，因为它在一个白色背景上对比度过高了。这种高对比度会导致阅读文本时眼睛疲劳和不适。

黑色是 0%的亮度，白色是 100%的亮度，这 2 者巨大的亮度差异会导致颜色很不舒服。所以，最好避免在白色背景上使用纯黑色，改用深灰色会比较好。

在我们的例子中，很多元素都使用了纯黑色。将其改为深灰色可以提高可读性。之前在检查视觉层次时，会发现物业描述文本过于突出。为了确保界面元素按重要性呈现，改为较浅的灰色来减少物业描述文本的突出程度。

15. 左对齐文本 英语的阅读方式是从左到右，由上至下呈 F 形阅读的，所以最好将文本左对齐以实现最佳阅读效果。对于长篇正文，最好避免居中对齐或两端对齐的方式。这种对齐方式难以阅读，尤其是对于那些认知能力较弱的人来说更加困难。

在标题和短文本上使用居中对齐会比较好，那样会比较方便阅读。但是，对于长文本来说，居中对齐就是灾难，因为每行的起点都不一样。你的眼睛需要找每一行的起点，这会让阅读变得很困难。

在我们的例子中，描述文本是居中对齐的，改为左对齐后会发现可读性好很多。

16. 对于内容文本至少要有 1.5 倍行高 行高是指在垂直高度上的文字间距。每行文字之间的间距有助于防止人们重复阅读同一行文字。这样做也会让阅读更加舒适自然。

为了提高可访问性和可读性，特别是对于长篇正文，确保行高至少为 1.5（150%）。将行高保持在 1.5 到 2 之间通常效果良好。

在我们的例子中，行高仅有 1（100%），增加行高到 1.6（160%）后，可读性好了很多。

最终效果 我们遵循了几个简单但有效的 UI 设计准则，很快就发现并优化了例子设计中的许多问题。

（彩云注：最终优化后的效果会比优化前的好很多，那么请你再回头想想，如果再让你优化一遍这个界面，关掉教程，你还能再优化一遍吗？然后再进一步，把这些方法如何用到自己的实际项目中，作品集中，相信会更有帮助。）

希望你已经开始意识到，UI 设计并不是那么困难。虽然它看起来像一门神奇的艺术形式，但其中很大一部分都是由像我们刚学到的这些逻辑规则或指导原则所构成的。使用客观的逻辑，而不是主观的意见，可以更快速、更轻松地设计出直观、易用和美观的界面。

如果你有学到，记得分享到你的朋友圈哦~

欢迎关注作者的微信公众号：「彩云译设计」