编者按：在 AR 和 VR 这类设备诞生之前，人类为了增强视觉进行了几千年的研究和探索，这些探索的产物如今成为了我们日常生活中稀松平常的事物，但是它们同样重要。这篇出自 UX 设计师 Olesia Vdovenko 的文章重新梳理了 VR 和 AR 出现之前的视觉增强探索史，有趣且充满启发性。正如同我们所看到的，...

编者按：在 AR 和 VR 这类设备诞生之前，人类为了增强视觉进行了几千年的研究和探索，这些探索的产物如今成为了我们日常生活中稀松平常的事物，但是它们同样重要。这篇 出自 UX 设计师 Olesia Vdovenko 的文章 重新梳理了 VR 和 AR 出现之前的视觉增强探索史，有趣且充满启发性。

正如同我们所看到的，AR 和 VR 正在改变当前的世界，不过在 AR 和 VR 诞生之前，有很多前置的发明和技术，是这些东西逐渐发展并启发来如今的 XR 技术。当然，AR 技术能发展到如今的状态，很大程度是因为人类想要看到更多，表达更多，这才是技术发展到此的原因。

AR｜也许AR增强现实技术才是距离设计师最近的未来 从科幻小说到电影，从动漫到现实世界，虚拟现实技术历经几十年的光阴，从一个构想，变成了现实世界中到处可以体验到的民用技术。

阅读文章 >

皮影戏 皮影戏的具体起源如今已经很难考证来。虽然居于洞穴的原始人会玩影子游戏是合乎逻辑的设定，但是并没有具体的证据。一般说来，大家会认为皮影戏起源于亚洲某个区域。不过可以肯定的是，篝火前的影子游戏逐渐发展成为一种娱乐方式是相当自然的。因此，皮影戏的诞生追溯到 公元前 2 世纪更早一些的历史时期就不足为奇了。

皮影戏在某些文化当中，和当地的宗教起源也有关联，在部分地区会涉及到神灵和仪式。

由于皮影戏本身的流传形式，目前几乎很很难找到历史特别悠久的遗存，而且材料本身的脆弱也是一个相当重要的原因，这也使得如今对于皮影戏的历史认知，很多都来源于侧面的记载和印证。

下图是一种来自马来西亚的一种皮影戏艺术，名为 Wayang，它可以追溯到 1500 前后，图片中的皮影人偶大概是 1700 - 1800 之间的文物。

目前存于大英博物馆

皮影戏应该是现存最早的 AR 「原型」样本之一，这种使用灯光和人物角色来呈现故事的艺术形式，几乎是任何投影型艺术的雏形， 如今的 AR 仅仅只是将图像投射到现实世界。

视错觉艺术 和皮影戏类似，视错觉通常被用作添加一些东西来欺骗大脑。

有人认为，视错觉很早就已经被古人运用到不同的地方。有一个案例是古希腊画家 Zeuxis 和 Parrhasius 的故事，他们俩曾试图使用视错觉欺骗彼此。传说 Zeuxis 绘制了以假乱真的葡萄，甚至可以诱骗小鸟，而 Parrhasius 则绘制来一个极为逼真的窗帘来欺骗 Zeuxis ，虽然这个故事的真实性存疑，但是它确实用到了视错觉技术。

描绘 Zeuxis 和 Parrhasius 的版画，出自 Den gulden winckel der konstlievende Nederlanders (1613)

同样的，虽然视错觉的世纪使用场合的证据缺乏，但是在光学当中，视错觉相关的研究并不在少数。比如托勒密（公元 100-170 年）就在自己的著作当中描述来不少视错觉的存在：视觉错觉、知觉误判和心理推断。有意思的是，在他的 公元 2 世纪的著作当中提到了动画的概念，而类似的产物直到 17 世纪才出现。

在谈到知觉误判的时候，他讲到了艺术家如何将二维的物体绘制得有三维的特征，而这正是视错觉的基础。

实际上到来 17 世纪的时候，我们看到来越来越多的艺术作品当中使用了视错觉的设计。圣伊格纳齐教堂当时准备建造一个巨大的拱顶，但是临近的多米尼加修道士抱怨，如果拱顶真的修那么巨大会影响隔壁图书馆的采光，所以 Andrea Pozzo 使用视错觉的插画让拱顶看起来足够宏伟，但是实际的建筑层高不用修筑得那么犯规。

某种意义上来说，这幅插画实现了「视觉增强」。

而在随后的的 18- 19 世纪，艺术家们继续在他们的插画当中使用各种视错觉技术，就像下面的这幅来自荷兰的讽刺画（1710-1726年）：

当时的艺术家为了研究视觉的作用原理，催生了很多有趣的发现，比如立体成像。1838 年，Charles Wheatstone 绘制了有史以来第一台立体成像工具草图，简单来说，如今 3D 眼镜的成像原理和它是一致的。这一研究是如今 3D 视觉的基础。

这一技术随后被用来创建3D立体图片查看器，一同诞生的是专门拍摄这种 3D 图像的摄影工具。

19世纪晚期的 立体眼镜的广告

立体眼镜的原理图，1882 年科普月刊插图

似乎早期的立体眼镜没有使用复杂的镜片系统，从而导致本身的结构较为复杂，图片必须放置在特定的距离。而随着镜片系统的完善，更加耐用小巧的立体眼镜也随之诞生。

我想你大概能够明白这个东西的运作原理是怎么回事，而后面的技术，连接了这些早期的设备和如今先进的 XR 头戴设备。

眼镜 Nimrud 镜片是现今发现的最早的镜头之一，发现于伊拉克，大概诞生年代是 公元前 750 - 710 之间，具体的功能现在并不清楚，因为缺乏相应的设备，而且它本身也没有放大的功能。

早在罗马帝国时代，Lucius Annaeus Seneca 就使用装满水的玻璃容器来辅助阅读，虽然当时这种玻璃容器本身并不算流行，不过这也算是随着书写和印刷技术发展到一定程度才逐步诞生的需求。

而在玻璃和放大镜诞生之后，越来越多的镜片和相应的光学应用也开始普及，眼镜、望远镜、相机、立体镜、投影仪等等。

Johann Amos Comenius（1658年）

伽利略曾经设计望远镜来记录太阳黑子，他会在纸张上画一个圆圈，然后将它放在望远镜附近，然后让它和太阳对齐，这个时候太阳黑子会在纸张对应的位置上留下黑点，然后伽利略以此来记录太阳黑子的位置。

这看起来是一个相当简单的解决方案，伽利略在自己的实验记录当中也坦言它做起来并不复杂，不过在 Marc Welser 的信当中，伽利略还补充道：

「……不过在执行的时候需要灵活处理，你需要随着太阳活动及时移动望远镜，确保它能对准太阳的位置，并投射到纸张上……」

同样的，在 19 世纪的时候，有一项名为 Camera lucida 的发明，这项发明可以借助棱镜将艺术家眼前的事物投射到纸面上，从而方便他们将轮廓勾勒出来。

这个设备还超级便携，不过由于在绘画过程中，手会遮挡住纸面的内容，所以艺术家需要经过一段时间的训练才能驾驭这个工具。通常，艺术家会尽快绘制出粗略的轮廓，然后借助这个工具来做细化。

无论是这个 Camera lucida 还是伽利略记录太阳黑子的方式，都和现代的 AR 的运作逻辑类似，比如你借助 AR 应用测量现实世界中的物体的尺寸，就非常相似。值得注意的是，这类需求一直存在着。

虽然玻璃镜片在历史上经历了很长时间的完善，但是我们注意到，护目镜存在的历史要比镜片长，比如下方这种用来对抗雪盲症的眼镜，就可以追溯到 2000 年前（有人认为它的历史还要更加悠久），通常，这些眼镜使用骨头、皮革或者是木头来制成。这类产品和玻璃镜片并没有交集，但是它们仍然非常有趣。

现存于加拿大博物馆，目录号 IX-C-2846

随着玻璃镜片技术的发展，除了基础的眼镜之外，诞生出了大量的功能各异的发明。

Trade card: The Maker. [James Ayscough, Ludgate St, London] optician

最终，眼镜成为了一个完整的独立的门类，成为了常见的日用品，而当 AR 和 VR 这类头戴设备出现的时候，作为基础的眼镜作为一种理所当然的形态，而没有被视作为一项重大的发明。

早期的头戴式显示器

Google Glass

结语 越深入地审视，我们所发现的就越多。由于 AR 和 VR 设备的复杂性，我们此刻所用到的知识涉及到过去几个世纪的积累。但是单独审视这些知识的时候，会重新看到前面几十代先辈的经验积累和探索。比如印刷技术对于镜片发明的推动和影响，远远超出眼镜本身的范畴，即使你仅仅只是对于古早的视觉设计感兴趣，你会发现其中所涉及到的艺术作品、技术文献都足够好看和有趣，而其中很多东西，一开始仅仅只是用来娱乐，为这个无聊的世界增加一点乐子，一直到现在，而 VR 和 AR 的诞生也是类似需求的产物。

文章参考来源：

Chen, Fan Pen. “Shadow Theaters of the World.” Asian Folklore Studies, vol. 62, no. 1, 2003, pp. 25–64. JSTOR, http://www.jstor.org/stable/1179080. The History of Chinese Shadow Art by Google Arts and Culture The British Museum website Secret Knowledge (New and Expanded Edition): Rediscovering the Lost Techniques of the Old Masters by David Hockney Ptolemy and the Foundations of Ancient Mathematical Optics: A Source Based Guided StudyBook by A. Mark Smith Sines, G., & Sakellarakis, Y. A. (1987). Lenses in Antiquity. American Journal of Archaeology, 91(2), 191–196. https://doi.org/10.2307/505216 Galileo and Scheiner on Sunspots: A Case Study in the Visual Language of Astronomy by Albert van Helden Google Arts & Culture

编者按：在 AR 和 VR 这类设备诞生之前，人类为了增强视觉进行了几千年的研究和探索，这些探索的产物如今成为了我们日常生活中稀松平常的事物，但是它们同样重要。这篇出自 UX 设计师 Olesia Vdovenko 的文章重新梳理了 VR 和 AR 出现之前的视觉增强探索史，有趣且充满启发性。正如同我们所看到的，...

编者按：在 AR 和 VR 这类设备诞生之前，人类为了增强视觉进行了几千年的研究和探索，这些探索的产物如今成为了我们日常生活中稀松平常的事物，但是它们同样重要。这篇 出自 UX 设计师 Olesia Vdovenko 的文章 重新梳理了 VR 和 AR 出现之前的视觉增强探索史，有趣且充满启发性。

正如同我们所看到的，AR 和 VR 正在改变当前的世界，不过在 AR 和 VR 诞生之前，有很多前置的发明和技术，是这些东西逐渐发展并启发来如今的 XR 技术。当然，AR 技术能发展到如今的状态，很大程度是因为人类想要看到更多，表达更多，这才是技术发展到此的原因。

AR｜也许AR增强现实技术才是距离设计师最近的未来 从科幻小说到电影，从动漫到现实世界，虚拟现实技术历经几十年的光阴，从一个构想，变成了现实世界中到处可以体验到的民用技术。

阅读文章 >

皮影戏 皮影戏的具体起源如今已经很难考证来。虽然居于洞穴的原始人会玩影子游戏是合乎逻辑的设定，但是并没有具体的证据。一般说来，大家会认为皮影戏起源于亚洲某个区域。不过可以肯定的是，篝火前的影子游戏逐渐发展成为一种娱乐方式是相当自然的。因此，皮影戏的诞生追溯到 公元前 2 世纪更早一些的历史时期就不足为奇了。

皮影戏在某些文化当中，和当地的宗教起源也有关联，在部分地区会涉及到神灵和仪式。

由于皮影戏本身的流传形式，目前几乎很很难找到历史特别悠久的遗存，而且材料本身的脆弱也是一个相当重要的原因，这也使得如今对于皮影戏的历史认知，很多都来源于侧面的记载和印证。

下图是一种来自马来西亚的一种皮影戏艺术，名为 Wayang，它可以追溯到 1500 前后，图片中的皮影人偶大概是 1700 - 1800 之间的文物。

目前存于大英博物馆

皮影戏应该是现存最早的 AR 「原型」样本之一，这种使用灯光和人物角色来呈现故事的艺术形式，几乎是任何投影型艺术的雏形， 如今的 AR 仅仅只是将图像投射到现实世界。

视错觉艺术 和皮影戏类似，视错觉通常被用作添加一些东西来欺骗大脑。

有人认为，视错觉很早就已经被古人运用到不同的地方。有一个案例是古希腊画家 Zeuxis 和 Parrhasius 的故事，他们俩曾试图使用视错觉欺骗彼此。传说 Zeuxis 绘制了以假乱真的葡萄，甚至可以诱骗小鸟，而 Parrhasius 则绘制来一个极为逼真的窗帘来欺骗 Zeuxis ，虽然这个故事的真实性存疑，但是它确实用到了视错觉技术。

描绘 Zeuxis 和 Parrhasius 的版画，出自 Den gulden winckel der konstlievende Nederlanders (1613)

同样的，虽然视错觉的世纪使用场合的证据缺乏，但是在光学当中，视错觉相关的研究并不在少数。比如托勒密（公元 100-170 年）就在自己的著作当中描述来不少视错觉的存在：视觉错觉、知觉误判和心理推断。有意思的是，在他的 公元 2 世纪的著作当中提到了动画的概念，而类似的产物直到 17 世纪才出现。

在谈到知觉误判的时候，他讲到了艺术家如何将二维的物体绘制得有三维的特征，而这正是视错觉的基础。

实际上到来 17 世纪的时候，我们看到来越来越多的艺术作品当中使用了视错觉的设计。圣伊格纳齐教堂当时准备建造一个巨大的拱顶，但是临近的多米尼加修道士抱怨，如果拱顶真的修那么巨大会影响隔壁图书馆的采光，所以 Andrea Pozzo 使用视错觉的插画让拱顶看起来足够宏伟，但是实际的建筑层高不用修筑得那么犯规。

某种意义上来说，这幅插画实现了「视觉增强」。

而在随后的的 18- 19 世纪，艺术家们继续在他们的插画当中使用各种视错觉技术，就像下面的这幅来自荷兰的讽刺画（1710-1726年）：

当时的艺术家为了研究视觉的作用原理，催生了很多有趣的发现，比如立体成像。1838 年，Charles Wheatstone 绘制了有史以来第一台立体成像工具草图，简单来说，如今 3D 眼镜的成像原理和它是一致的。这一研究是如今 3D 视觉的基础。

这一技术随后被用来创建3D立体图片查看器，一同诞生的是专门拍摄这种 3D 图像的摄影工具。

19世纪晚期的 立体眼镜的广告

立体眼镜的原理图，1882 年科普月刊插图

似乎早期的立体眼镜没有使用复杂的镜片系统，从而导致本身的结构较为复杂，图片必须放置在特定的距离。而随着镜片系统的完善，更加耐用小巧的立体眼镜也随之诞生。

我想你大概能够明白这个东西的运作原理是怎么回事，而后面的技术，连接了这些早期的设备和如今先进的 XR 头戴设备。

眼镜 Nimrud 镜片是现今发现的最早的镜头之一，发现于伊拉克，大概诞生年代是 公元前 750 - 710 之间，具体的功能现在并不清楚，因为缺乏相应的设备，而且它本身也没有放大的功能。

早在罗马帝国时代，Lucius Annaeus Seneca 就使用装满水的玻璃容器来辅助阅读，虽然当时这种玻璃容器本身并不算流行，不过这也算是随着书写和印刷技术发展到一定程度才逐步诞生的需求。

而在玻璃和放大镜诞生之后，越来越多的镜片和相应的光学应用也开始普及，眼镜、望远镜、相机、立体镜、投影仪等等。

Johann Amos Comenius（1658年）

伽利略曾经设计望远镜来记录太阳黑子，他会在纸张上画一个圆圈，然后将它放在望远镜附近，然后让它和太阳对齐，这个时候太阳黑子会在纸张对应的位置上留下黑点，然后伽利略以此来记录太阳黑子的位置。

这看起来是一个相当简单的解决方案，伽利略在自己的实验记录当中也坦言它做起来并不复杂，不过在 Marc Welser 的信当中，伽利略还补充道：

「……不过在执行的时候需要灵活处理，你需要随着太阳活动及时移动望远镜，确保它能对准太阳的位置，并投射到纸张上……」

同样的，在 19 世纪的时候，有一项名为 Camera lucida 的发明，这项发明可以借助棱镜将艺术家眼前的事物投射到纸面上，从而方便他们将轮廓勾勒出来。

这个设备还超级便携，不过由于在绘画过程中，手会遮挡住纸面的内容，所以艺术家需要经过一段时间的训练才能驾驭这个工具。通常，艺术家会尽快绘制出粗略的轮廓，然后借助这个工具来做细化。

无论是这个 Camera lucida 还是伽利略记录太阳黑子的方式，都和现代的 AR 的运作逻辑类似，比如你借助 AR 应用测量现实世界中的物体的尺寸，就非常相似。值得注意的是，这类需求一直存在着。

虽然玻璃镜片在历史上经历了很长时间的完善，但是我们注意到，护目镜存在的历史要比镜片长，比如下方这种用来对抗雪盲症的眼镜，就可以追溯到 2000 年前（有人认为它的历史还要更加悠久），通常，这些眼镜使用骨头、皮革或者是木头来制成。这类产品和玻璃镜片并没有交集，但是它们仍然非常有趣。

现存于加拿大博物馆，目录号 IX-C-2846

随着玻璃镜片技术的发展，除了基础的眼镜之外，诞生出了大量的功能各异的发明。

Trade card: The Maker. [James Ayscough, Ludgate St, London] optician

最终，眼镜成为了一个完整的独立的门类，成为了常见的日用品，而当 AR 和 VR 这类头戴设备出现的时候，作为基础的眼镜作为一种理所当然的形态，而没有被视作为一项重大的发明。

早期的头戴式显示器

Google Glass

结语 越深入地审视，我们所发现的就越多。由于 AR 和 VR 设备的复杂性，我们此刻所用到的知识涉及到过去几个世纪的积累。但是单独审视这些知识的时候，会重新看到前面几十代先辈的经验积累和探索。比如印刷技术对于镜片发明的推动和影响，远远超出眼镜本身的范畴，即使你仅仅只是对于古早的视觉设计感兴趣，你会发现其中所涉及到的艺术作品、技术文献都足够好看和有趣，而其中很多东西，一开始仅仅只是用来娱乐，为这个无聊的世界增加一点乐子，一直到现在，而 VR 和 AR 的诞生也是类似需求的产物。

文章参考来源：

Chen, Fan Pen. “Shadow Theaters of the World.” Asian Folklore Studies, vol. 62, no. 1, 2003, pp. 25–64. JSTOR, http://www.jstor.org/stable/1179080. The History of Chinese Shadow Art by Google Arts and Culture The British Museum website Secret Knowledge (New and Expanded Edition): Rediscovering the Lost Techniques of the Old Masters by David Hockney Ptolemy and the Foundations of Ancient Mathematical Optics: A Source Based Guided StudyBook by A. Mark Smith Sines, G., & Sakellarakis, Y. A. (1987). Lenses in Antiquity. American Journal of Archaeology, 91(2), 191–196. https://doi.org/10.2307/505216 Galileo and Scheiner on Sunspots: A Case Study in the Visual Language of Astronomy by Albert van Helden Google Arts & Culture

在 B 端复杂业务场景下，设计师们该如何为自己增加话语权呢，本文从熟悉产品、分析问题、提出解决方案、转变设计思维4个方面探讨这个话题。相关干货：怎么提升 B 端设计师的话语权？来看大厂总监的分析！

在 B 端复杂业务场景下， 设计师 们该如何为自己增加 话语权 呢，本文从熟悉产品、分析问题、提出解决方案、转变设计思维4个方面探讨这个话题。

相关干货：

怎么提升 B 端设计师的话语权？来看大厂总监的分析！ 话语权缺失的现状 还是回到 B 端设计师职业问题上，这几天在我们群里，反复讨论了一个问题，就是设计师如何能提升话语权，提升过稿率。

阅读文章 >

相信很多同学都对设计的「被动」处境都深有体会，无论是主营哪个发展方向的设计，都会在方案评审时被其他职能：

“这个不够高级呀，你看其他竞品的就很有高级感”

“客户想要的就这种，实在不行，咱们抄吧”

“不行，我觉得你这交互也没多好呀，而且一换，那影响点就多了”

“你这还是不懂业务呀，为什么要这么设计”

“大哥，你这交互，开发工作量增了一倍，效果也不一定好吧”

....以上都我乱编的，但反正为了满足产品、开发、运营各个大佬的要求，我们得不断的沟通、改稿、评审...最后上线，还是会被 diss“其实这可以做的更好”。

所以“你怎么知道用户想要的就是你说的这种方案？”...敢不敢提出这种质疑？我不敢，但我鼓励大家这么做，因为这种想法或许是走出「被动」处境的一条路。咱们来一步步探索设计该如何走进方案共建，变被动为主动，提升话语权，在取得其他职能同学的信任后，将他们一网打尽。

先来说说我这边是由于公司整个研发流程调整，设计师需要与产品同学共建需求方案（在硬性的设计评审环节上也整体拉高了对设计师的要求）。我们需要在产品评审详细方案之前，就产出详细的设计方案（包含 UI+交互），意味着设计师需要前置需求分析、产出方案，节奏是快于产品同学的。

这一转变难吗，其实不难，难的是一开始仅意识到把排期时间提前，而设计思维还滞留在从前。怎么讲呢，相当于我们还停留在通过产品的框架方案，来牵头进行产品方案分析，与产品讨论方案的可实施性（简单点就是依然按照产品的方案规划来走）。但并没有跳脱出来，根据需求本身（融入实际使用场景，分析用户的真实痛点，质疑目前的方案框架是否就是用户需要的，是否有第二条更好的路）去思考，再说直白一点：产品方案≠解决方案。那设计师该如何主动出击呢，咱们具体拆分成小点讲：

一、入场券：你对负责的产品熟悉吗 问问自己，你对负责的业务有多熟悉（尤其是 B 端产品，想要有话语权的第一步就是要熟悉业务，不然没有人会认同你）。你得清楚自己负责的产品涵盖了哪些业务，服务什么客户，用户都有哪些，产品功能有哪些，主要功能都迭代到什么程度了...（不清楚这些的，请先自行回去恶补）。

了解业务最简单粗暴的方式，就是不限次数的操作，一有空就用，变着花样的今天虐这个功能模块，明天虐那个功能模块。只有这样当需求来了，你才知道是哪个功能负责的，好去针对性的找到对应的页面，线上体会现有的交互流程是啥。如果有时间，可以记录到体验画布当中，便于理清每项操作存在的意义。

二、登场：分析现有问题 这是最重要的，立足用户「主」场景，思考“你”为什么会提出这个需求，是想要解决什么问题（当前的做法是什么，有哪些不方便的地方）得到什么样的效果。带着这些问题，去审视产品方案（你现在是用户，所以一定要抱着审视的态度才行，不然很容易掉进陷阱）。“在这里加上 xx 入口，能不能解决我的问题，理解成本是不是有点复杂，这真是我想要的吗”。

因为 B 端产品，往往会涉及到两种及以上不同的角色，一个是设置者，一个是使用者，设计师需要在方案拟定中权衡对两种角色的满足（不要再当出图工具了，好的用户体验才是设计师追求的目标）。所以当出现了与咱们目标想违背的框架，就需要 battle，在 battle 的过程中，你会发现有时候产品对用户的主场景也是模糊的，没有好的方案取舍…这时候，作为专业设计师的你就该登场了，用你的专业，融入场景，告诉他按照这种框架设计，会出现什么样的问题（甚至会让其他职能都跟着方案陷入困境中）。没有哪个方案是完美的，所以解决方案的主次层级，就一定要分清楚（成年人不能既要又要也要）。

以上的操作流程，咱们一定要带入使用场景，先以场景为前提，设想自己是在什么场景下会使用，这样才有助于判断设计的优先级，使用场景是否全面（可能会影响设计交互）。顺便吐槽一下某 8 的 APP，用户体验真的是非常差劲，完全没考虑用户在多场景下的使用情况（如果有幸能被某 8 的设计老师看到，请真的去体验一下你们的产品交互，你们的设计仅考虑到了单一的用户场景，操作繁琐、反馈也不及时）。

这里再补充一点，除了第一步分析自己的产品，还需要分析同质竞品，不要只是看页面设计，更重要的是交互，多数据量时的交互。建议竞品分析可以深入一些，了解为什么要这样设计，有没有缺陷，用户有没有反馈过竞品使用情况如何。

三、表演：提出解决方案 对产品方案提出质疑后，需要拿出你的解决方案。还是从用户场景出发，按照用户的使用操作流程来梳理。把方案主次区分出来（大方向别跑偏了）。我们首先解决了什么问题（这也是用户最想要解决的），然后通过什么次级方式满足了其他角色在使用过程中的期待，最后这样做的可落地性（技术实现的可行性）。

这一点需要强调的地方是在方案拟定的时候，先不要着急考虑技术的实现可能，不然又会陷入被动（要相信你们公司的技术大佬，再难的方案他们也能实现，当然也要相信，人性是希望不要有什么技术难点）。因为我们的方案不可能只有一种，先满足业务需要，再满足技术实现，由深到浅的递进。

四、定局：转变设计思维 再次强调：不要直接用产品方案，不然你永远都会处于被动处境，你要做的是把产品方案转化为你自己的设计方案。这点确实是很难，因为我们要转变的不是单纯技术上的设计输出，而是设计生产思维，创建自己的思维体系。

按照被动的设计思维，盲目跟着产品方案走，可能造成设计方案最终呈现效果并不理想，暴露出来的会是：你们共建方案的时候，配合出了问题，却没有及时反馈…所以如果方案拟定过程中出现了多次沟通无效，争论无果的情况下，一定要向上寻求帮助，提出你的观点，让更多人看到你的思考。

综上：废话有些多了，但都是希望能为提升设计话语权打下基础，设计师的「存在感」不应该只是在设计评审环节。加油吧，做颗（永不）秃头的小白菜。

上一篇我们了解了一些硬件基础以及如何拆解产品需求。本期我们沿着上篇的思路继续和大家分享如何根据拆解出的需求制定相应的设计方案。如何做好可视化大屏业务？

上一篇我们了解了一些硬件基础以及如何拆解产品需求。本期我们沿着上篇的思路继续和大家分享如何根据拆解出的需求制定相应的设计方案。

如何做好可视化大屏业务？京东高手总结了这份方案（上） 在可视化大屏业务中，设计师如何快速了解业务并产出合理的方案呢？

阅读文章 >

本文将从以下五个方面讲解可视化大屏从 0 到 1 的设计过程：

首先，确定画板大小；然后，合理安排模块布局；其次，明确整体界面的设计风格；再次，对业务数据进行梳理、合理安排信息层级以及选择合适的图表去精准的表达业务数据；最后，就是快速的搭建一块可视化大屏。

一、确定画板 前期与客户、产品经理沟通后，得到的有用信息如下：

大屏被安置于室内； 适配电脑 1920*1080 分辨率，大屏原始尺寸：5.8*3.2 米，采用直投形式； LED 屏幕点间距 1.2 毫米。 通过以上信息，我们总结出大屏的色彩明度不易过亮。电脑直投形式按照“投屏电脑的分辨率为 1920*1080”设计就可以保证投屏的清晰度，不会产生拉伸和变形。因为 LED 屏的点间距 1.2 毫米，属于比较清晰的屏幕，所以我们把最小字号设定为 12 像素。

二、规划布局 确定了画板的大小，下一步需要根据产品原型优化页面布局。

一般中心的位置会放置地图，其余的指标按优先级依次在地图周围展开。

首先搭建信息分布框架，根据这个框架往里边填充内容就更规整了。大屏是以数据展示为主，内外边距的设定较小，希望能给数据展示留更多的空间。目前这张屏幕每个模块包括标题、数据指标以及数据分析图表三个部分。

在设计时，首先要让用户获取到有用信息。所以需要考虑哪些信息内容优先级更高。可以参考上篇分享内容

三、设计风格 风格定义主要依据上一篇文章分析得出的行业属性、业务应用场景、地域文化背景以及前期与客户沟通时提到的一些诉求以及审美倾向，甚至于时下流行时政热点、天气等因素都能成为影响整体设计风格的诱因。

通过这些影响因素搜集了相关词汇，最终提取 3 个核心关键词。

① 科技。我们的业务需求是：玉环市泵阀（水暖阀门）产业大脑，产业大脑就是将产业数字化治理。以科技驱动产业升级，是我们业务的核心目标。所以第一个关键词为科技。

② 机械。本屏主要是展示机械设备相关的企业数据，所以，机械被选入了第二个关键词。

③ 玉环。此处结合了地域文化：“ 玉环市 ” 被誉为中国阀门之都，并且玉环市的命名也是源于当地独特的自然现象 “ 晨雾缭绕，形如玉环 ”，我们可以把这种感觉设计在大屏中。

看到这个情绪板后，大家是不是头脑中已经描摹出一副大屏的初步模样了？

将情绪版落实到具体的设计细节有这五个方向：

① 图形：我们选用偏机甲风的造型。与机械硬朗的感觉相比，细节上我们采用圆角做融合；

② 质感：运用科技、光感；

③ 色彩：倾向于科技蓝，并且这这块客户也有明确表示过蓝色更符合他们企业的整体调性。为了丰富画面整体效果，为此增加了黄色、绿为辅助色。

④ 动效：采用流光等光效效果。

⑤ 字体：首选择现代、简洁一点的字体，更符合产业工业的气质；也要考虑后期开发实现。目前莫奈系统中字体有限，需要在这里找到比较符合现代感的字体。标题选用-京东朗正；其他字体选用-思源黑体；数字字体为选用-京东正黑。

四、业务设计 1. 视觉层级划分： 我们针对业务内容（信息维度的优先级）进行了梳理：

第一视觉层级是希望用户能第一眼看到的内容：这里包括：指标名称、数据指标、图表、业务兴趣点。

第二视觉层级是指模块背景层：包括模块 UI-背景、装饰元素、图标、控件等。

第三层视觉级为基础底图层：包括行政区域-边界、地面、地形、建筑、道路、水域、绿地等。

2. 图表的正确使用： 在选定适合的图表表达业务数据之前，首先要明确数据指标所要表达的维度，它是否符合业务场景？它是否合理表达了该数据业务属性？

在这里我对常用的图表做了个归类。在不同维度下，应该选择什么类型的图表，供大家参考。

3. 图表结构

以上是图表的解构图。它包括：图表标题、X\Y 轴线、坐标轴文本、网格线、图例以及图表背景。图表的每一部分都是可以根据界面整体设计风格去重新设计。不过前期请和开发工程师沟通好实现机制。了解图表的构成，还有另外一个好处就是在产品原型内容缺失或者表达不准确时候我们知道如何去调整它。

4. 图表选择

案例分析

上图表是对平台销售趋势进行分析，根据之前的研究表示趋势的图表有折线图、面积图、桑基图。

我们再看下该图表产品原型存在的问题：

X 轴表示时间维度，Y 轴上数据缺失； 悬浮层要表达 3 个维度的信息：该时间点下的订单量和销售额； 该图表没有展示图例信息； 桑基图应用于数据维度趋势比较复杂的情况下使用，而面积图除了可以展示数据趋势以外，还可以通过面积对比不同的数据量，但是订单量和销售额不在同一个分析维度，因此不需要对比。 所以最后我们还是采用了更简单易懂的折线图。

5. 快速搭建

可以分为以下两步：

第一步：设计师用我们长期积累的设计组件快速搭建界面；

第二步：设计师/研发人员用京东城市的 数据可视化 引擎—莫奈去快速实现界面效果。

上面这张屏正是采用了设计组件搭建而成。组件化不仅在提升设计师设计效率方面有着很重要的意义，还能够在项目长期迭代和多人协同完成设计方案的情况下保证设计的一致性。从而节省了更多的时间让我们去打磨设计细节。

以下附上我们还在不断完善的 Rainbow D（京东智能城市设计语言系统）。本设计系统包含了可视化组件库、中后台组件库以及相应的设计规范供大家参考。

网址： http://dev-uc.urban-computing.cn/find-react/index-cn

如果有项目周期特别紧张的情况下，客户想要快速看到线上效果，设计师也可以协助产品在莫奈系统上（京东城市数据可视化引擎）快速搭建产品原型。以下为在莫奈系统中搭建的大屏。

在莫奈系统中可以自定义配置图表、地图、文字，也可以嵌入视频、动态图片等

五、总结 我们简单回顾一下 可视化大屏设计 方案制定的流程：

首先在明晰设计需求为前提的情况下，根据实际应用场景确定画板大小、根据业务数据优先级合理的规划布局和信息层级；

再根据行业属性、业务场景、客户倾向性等因素确定适合 大屏设计 风格；

大屏风格确定之后，需要从数据分析维度，去选定最适合表达业务数据的图表；

接着，就是采用设计组件库和莫奈可视化引擎去快速搭建完成可视化大屏。

欢迎关注作者微信公众号：「JDTDA」

2022年职场习惯第5期来了！这期邀请了设计总监葱爷，分享了他快速成长的学习方法，以及坚持多年如一日的职场习惯和思考方式。上期回顾：前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？

2022年职场习惯第5期来了！这期邀请了设计总监葱爷，分享了他快速成长的学习方法，以及坚持多年如一日的 职场习惯 和思考方式。

上期回顾：

前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？ 2022年职场习惯第4期来了！

阅读文章 >

一 、您有哪些坚持了三年以上的工作和生活习惯

看书应该算一个吧，虽然我每一年看得的书都不算多，但是至少每年都会看，然后也会经常在网上看一些文章，都是以专业书籍为主。形成这个习惯的原因可能要追溯到大学期间，那时我经常去学校图书馆翻看一些设计、创意类的书籍，应该看了有几十本吧，后来确实发现自己比同学们要懂得多一些，坐做起设计老来也成熟一些，于是就把这个习惯保留下来了。

虽然现在获取知识的渠道有很多，但感觉书里的东西更严谨、更专业，也更稀缺， 设计师 懂得一些理论知识也是很重要的，做设计要有依据和方法。

除了设计书籍，我还会看一些营销、文案类的书籍，最近两年我好还开始在一些听书的平台上听书，这大大拓宽了自己的阅读面，对我的职业和生活都会有很多帮助。

另一个坚持了很久的习惯是做设计前我一般会画草稿，这大概跟我入行时遇到的上级有关系吧，我觉得画草图对做设计挺有帮助的，草图不一定要画得很专业，草图的目的是构思和快速验证自己想法的可行性，也能为执行做参考依据，可以有效提高工作效率。当然，也多多少少可以锻炼一下手绘能力。

二、对你职业生涯帮助最大的习惯是什么？

我觉得应该是把大部分下班时间和周末的时间用来学习，我算是一个比较刻苦的人吧，也挺喜欢做设计和创意，我们在上班的时候是没时间做练习和看书的，所以我就会用下班和周末的时间来做这些事，包括写文章，以前上班的时候我经常在地铁上用手机写文章。当大家都在用空余时间追剧、刷短视频、和玩游戏的时候，如果你用来学习，时间一长，你的五年可能就是人家的七八年，差距自然就会形成。我觉得我从学习中获得的快乐比玩手机获得快乐更满足，更持久。

葱爷的文章回顾：

零基础速成班！21个简单实用的字体设计笔画处理技巧 无论什么类型的设计，往往都讲究在大方向直指人心、美而不妖，在细节上精益求精，百看不厌。

阅读文章 >

目录页该如何设计？给你8个高手常用的排版方式 目录页主要出现在一些篇幅比较长的书籍（画册）中，其位置一般被安排在扉页之后，目录虽然不是正文，却概括了一本书的所有内容，具有便于读者快速了解及查阅书本内容的作用，所以，即使说目录页是一本书中最重要的页面也不为过。

阅读文章 >

图片排版找不到灵感？送你17个实用技巧！ 排版的难处在于，我们不是根据已经设计好的版面来填充内容（套模板），而是要根据具体的内容来布局版面。

阅读文章 >

三、刚进入职场的设计师，应该培养哪些习惯才能快速成长？

1. 要沉下心来把基础打好

基础对于设计师来说很重要，就好比我们以前学素描，首先要通过临摹、以及画大量简单的物体，来锻炼我们的线条、透视、造型能力、对五大调子的刻画能力的等等，至少画了两三年以后才开始画人物石膏和人物写生，最后才 会去学尝试一些技法，如果最基础的东西都没学号好，后面的东西就没法画。

设计师要警惕一开始就被一些炫技的东西吸引、自乱阵脚，设计并不是把软件学会就可以了，审美、版式设计、图形设计、构图、字体设计、色彩搭配等等才是设计师的核心技能。

2. 多主动去问别人，虚心学习

新人一定要积极主动，不要总指望着别人主动来帮你，主动的人比被动的人能获得更多自己想要的东西，在学习上面，脸皮要厚一点。另外提醒一点，如果别人给了你指导，你就应该去尝试一下他的解决方案是否可行，如果有异议可以委婉地提出来，如果老是爱问，别人提出的建议你又不愿意接受，那么以后就没人在再愿意指点你了，反正，你也不听。

3. 善用下班时间

大家上班的时间都差不多，所以真正拉开人与人差距的，是对下班时间的利用，如果你觉得这也是内卷的话，那当我没说。

四、有哪些不注意的小习惯，长此以往对设计师有害？

1. 以工资高低选择公司

刚入职场的年轻人很容做出一些错误的选择，比如根据工资的高低来选择公司，他们很容易被一些毒鸡汤影响，比如打工不就是为了赚钱吗？实际上，如果你一开始就被一些小钱带跑偏了，能力没有得到提升，那么以后就会失去很多赚大钱的机会。

个人觉得年轻设计师刚开始的关键是选择一个好的团队，把学东西放在第一位，当然，也要谨防有些公司以此为借口给你画饼，大家都是成年人了，自己的基本权益要懂得维护。

2. 做设计求快不求质

可能是由工作环境造成的，很多设计师习惯了半天一张海报、两小时一个 logo、一天一张详情页的工作流程，这么短的时间要完成这些设计，能做完就不错了，根本没时间思考如何做得出彩，也没有时间打磨细节。长此以往，你就只能做这样的设计了，以后即使给你几天的时间，你可能也不知道如何跳出原来的模式、不知道如何深入下去，所以，很多设计师做了好几年的设计仍然没有拿得出手的作品。

偶尔一些比较急，比较简单的项目这么处理没问题，但如果几年下来都只是这样做设计，那么你就要小心了，除非这是你想要的。

着色是卡通数字人角色设计的重要元素之一，它对于角色有着基本的色彩表现和结构表现等造型作用，并且能够表达角色的情感、塑造角色的性格，甚至通过其象征作用赋予角色某种特殊属性或成为角色的缩影。随着 3D 角色建模技术发展至今，色彩在角色设计上的功能和作用得到了较为充分的发挥和体现。本文通过分析 Blender 材质节点...

着色是卡通数字人角色设计的重要元素之一，它对于角色有着基本的色彩表现和结构表现等造型作用，并且能够表达角色的情感、塑造角色的性格，甚至通过其象征作用赋予角色某种特殊属性或成为角色的缩影。随着 3D 角色建模技术发展至今，色彩在 角色设计 上的功能和作用得到了较为充分的发挥和体现。本文通过分析 Blender 材质节点的应用，并结合 UV 和烘焙技术，来完成卡通数字人展 UV、着色、烘焙的工作。

上期回顾：

5000字干货！3D卡通虚拟数字人角色设计完整流程（上） 张志舟：2021 被认为是“元宇宙元年”，元宇宙概念大热，但目前仍在布局阶段。

阅读文章 >

一、展 UV 1. 什么是 UV?

在 Blender 中，可以为一个面关联一个独立的图像。UV 用于定义二维纹理坐标系，称为“UV 纹理空间”。UV 纹理空间使用字母 U 和 V 来指示二维空间中的轴。UV 纹理空间有助于将图像纹理贴图放置在 3D 曲面上，然后图像可以用于渲染或实时显示。在 3D 视图中选择面选择模式，才能指定图像或修改活动网格物体对应的 UV 坐标。这样一个面可以有多张 UV 贴图。默认情况下，网格是没有 UV 的。首先得映射面，然后才能编辑它们 。展开模型的过程是在 3D 视图编辑器的编辑模式下进行的，过程中会在 UV 编辑器创建一个或多个 UV 孤岛。

2. UV 映射

UV 映射是将三维表面转换为平面位图图像的二维坐标系。原始曲面的每个顶点在 UV 贴图上都有一个坐标，中间的像素值在平面多边形曲面上进行插值，以实现高精度的纹理控制（特别选择 U 轴和 V 轴名称，以免与实际模型的 X、Y 和 Z 轴重名）。UV 贴图坐标值被组织成一个网格系统，其中图像本身出现在网格的 0-1 区域中，而该图块之外的区域只是向外重复图像。因此，传统上只真正使用了 UV0-1 空间。

UV 映射-图片来源于网络

3. UV 通道

在网格标签页的 UVMaps 面板有一个列出所有为网格创建的 UV 映射的列表视图。被选中的映射会在 UV/图像编辑器显示。单击相机图标，启用渲染该 UV 贴图。

4. UV 展开

展 UV 前先重置模型：Ctrl+A，选择「全部变换」。这是为了避免 UV 有拉伸。和缝纫一样，缝合线是图像/布拼接的位置。展开时，只要选中边，然后按下 Ctrl-E 并选择标记缝合边，即可将一条边标记为缝合线；使用 Ctrl-E 并选择清除缝合边即可清除标记。

工作流程如下：Create seams-展开-反复调整缝合线-手动调整 UV，角色模型的 uv 展开方式有很多，具体如何拆分，需要综合考虑角色的风格、性能、精细度等。

在展开对称物体时，比如身体，沿对称轴标记缝合线，在展开时，可以把两个半边重叠到同一个纹理空间，这样右手和左手可以共用图像像素；左脚匹配右脚等等。

展 UV-图片来源于 Blender 官方

3. UDIM Workflow

UDIM 是对 UV 贴图和纹理工作流程的增强，它使 UV 贴图的生成和分配纹理变得更加简单。

从本质上讲，UDIM 只是一个自动 UV 偏移系统，它将图像分配到特定的 UV 平铺上，它允许你对相邻表面使用多个较低分辨率的纹理贴图，从而产生更高分辨率的结果，而不必求助于使用单个、超高分辨率图像。为了理解 UDIM 工作流的好处，需要对 UV 贴图的工作原理有一个基本的了解。

使用 UDIM 工作流程，0-1、1-2、2-3 等每个完整的图块部分都可以分配给它自己的独立图像映射，所有这些都在同一个表面内。每个图像也可以有自己的分辨率。UDIM 工作流程只是一种相应命名图像的符号格式，因此它们会自动分配给特定的 UV 平铺。编号从 UV 原点开始，沿正方向向外移动十个图块（到 1010），然后重复堆叠在一起的行，向上移动 9999 行。

UV 图块

使用 UDIM 工作流程从实际几何体的 UV 映射开始。在此阶段决定如何划分模型，通常基于项目所需的分辨率程度。对于一个普通的角色项目，可以分成头部一个图块，身体一个图块。如果想要更高的分辨率，还可以将手和脚分配到单独的图块上。

如何在 Blender 中使用 UDIM 分块？

先选中角色模型，在 UV 编辑器中新建图像，注意图像选择平铺。 在右侧图像菜单，源选项下选择 UDIM 分块。 在 UDIM 分块下添加分块，设置所需的分块数量。 将模型的 UV 孤岛分配到各个 UDIM 分块。 二、着色 1. body 材质

为了避免制作贴图时每一步都需要绘画的痛苦，我们求助于搅拌机最大的力量——材料节点编辑器！我们通过添加一些顶点绘画并添加一些次表面散射来完成角色的皮肤着色。

body 着色

① 设置光源

将世界环境的背景色改为略带灰白色的颜色，这样做的好处就是，在场景中我们不需要任何灯光，并且为场景中的模型提供了非常匀称的光源。

② 使用（AO）添加基础颜色

给角色模型添加一个原理化 BSDF 材质，然后给基础色添加一个环境光遮蔽（AO），这时候我们可以看到角色的夹缝中看到一些暗部阴影。在环境光遮蔽节点与主节点之间添加一个渐变节点，调节滑块模拟阴影部分的深浅，调节渐变颜色模拟皮肤的色调。这样得到一个非常基础的肤色，可以多添加几种颜色，丰富皮肤颜色的细节和过渡。需要注意的是，在着色和烘焙的时候，需要将渲染属性的颜色管理改成标准，以便我们更准确的观察色彩变化。

③ 添加皮肤高光

有了基础颜色，接下来我们来调整高光部分，添加一个几何数据节点，再添加一个渐变节点，将尖锐度连接到渐变系数上，按住键盘快捷键 ctrl+shift，然后点击渐变节点，预览节点效果。调整滑块，最终调整得到我们满意的高光部分为止，然后将此部分节点和基础色节点通过节点混合链接到主节点，需要注意的是高光部分的节点连接到系数，最后设置一下另一个颜色（高光颜色），这样就得到了皮肤的高光，继续调整高光节点的渐变滑块，以达到最佳的效果。

④ 添加次表面效果

最后添加次表面颜色，让皮肤在光照下显得更加通透，通常次表面体现在皮肤相对薄弱的区域，譬如手指、眉毛、眼睑、鼻子、耳朵、和其他肉质部分。接下来我们添加一个顶点色，命名为 sss，我们为这些地方绘制顶点色，绘制完记得使用模糊画笔模糊一下。最后添加次顶点颜色节点和渐变节点，链接到主节点的次表面上，设定一个次表面颜色，调整渐变滑块，以达到满意的次表面效果。

角色 body 着色材质节点

2. 眼睛材质

实现眼球材质的方法多种多样，但最终都需要以贴图的形式输出，这里主要使用材质+烘焙的方式。通过观察，我们可以将眼睛的材质分为眼球和虹膜两个主要材质，而眼球眼球实际上可以分为三种材质：白色的基地、巩膜上的血丝、透明的角膜，这里我们依托于 blender 强大的节点，将三者结合到一个材质里，尽量少的材质，亦能节省引擎渲染的性能。

眼睛材质

① 眼球的材质

通过观察，我们在制作眼球的材质时可以将其归纳为白色基底、透明的角膜、眼球中的血丝三个部分：

step 一：白色基底

对于白色基底，新建一个原理化 BSDF 节点，基础色直接选取白色，只要把糙度调低即可。

step 二：透明的角膜

角膜的关键在于它是透明的，且为了保证过渡自然，需要用到渐变纹理来控制白眼球的透射率实现。颜色渐变模块的滑块拖动可以控制渐变范围，这里渐变区域一般不要设置太大，有一点就可以了。（将虹膜添加一个深色材质，便于观察过渡的效果）

step 三：眼球中的血丝

眼球中的血丝可以分为底色和血丝部分，由于血丝的位置主要分布在白眼球处，所以可以复用前面的渐变纹理作为输入，新建一个渐变即可，通过调整渐变的范围即可以调整颜色分布。沃罗诺伊纹理作为血丝的纹理，由于该纹理具有一致的方向性，和血丝的不规则不同，故还需要通过噪声纹理对齐形状进行调整。然后将纹理染成红色并与底色柔光叠加即可达到血丝的效果，为了增加细节，可以再添加一些小血管，小血管的材质和大血管的流程完全一样，只是纹理的参数不同，通过增加沃罗诺伊纹理的缩放系数，来增加纹理的密度，并将大血管的输出通过混合节点混合后输出为血管纹理。

至此眼球的部分的材质就做好了，接下来我们制作虹膜部分的材质。

CORNEA/SCLERA 的材质节点

② 虹膜的材质

在制作虹膜的材质之前，我们可以先将虹膜部分的 UV 展开，因为后续纹理映射将会使用 UV 坐标来制作。

通过观察，我们不难发现，瞳孔中心是黑色的颜色，然后是浅色的虹膜，然后逐渐消失，因此，可以将虹膜部分看作是虹膜和瞳孔两部分，虹膜纹理部分使用噪波+镜像渐变纹理，而虹膜的渐变则可以使用球形渐变纹理制作，然后通过混合 RGB 节点（正片叠底）进行混合。

为了让虹膜的纹理不显得单调，还可以使用沃罗诺伊纹理增加虹膜部分的细节，最后使用混合 RGB 节点（颜色减淡）与前面的颜色节点相连。

IRIS 的材质节点

三、渲染烘焙 烘焙，一般是为了加速后续的其他过程进行的预先计算。渲染烘焙一个网格物体表面，得到 2D 位图图片，这些图片会通过 UV 坐标重新映射到物体上，这让实时渲染的效率更高。烘焙是对每个独立网格完成的，并且网格已经展开 UV。

Blender Cycles 着色器的灯光照明可以烘焙到图像纹理。这有几种不同的用途，最常见的是：

烘焙纹理，如基础颜色或法线贴图，用于导出到游戏引擎。 烘焙环境光遮蔽或程序纹理，作为纹理绘制或进一步编辑的基础。 创建光照贴图以提供全局照明或加快游戏中的渲染速度。 1. UDIM 渲染烘焙

在烘焙之前我们需要确保已经完成 UDIM 分块，同时在物体数据属性下为每个 UV 块添加了定位在主分块的 UVMap。Blender 的渲染烘焙是一个非常复杂的工作流程，为了提高工作效率，我们选择使用插件(SimpleBake)来辅助烘焙。

在物体数据属性中选择对应的 UVMap，在 SimpleBake 中，选择需要烘焙的贴图类型，譬如 Diffuse、sss、Normal 等，选择贴图尺寸，贴图名称，在物体模式下选中模型，点击 Bake PBR Maps，最后检查一下贴图是否正常，在 ps 或者直接使用 Blender 纹理绘制，在贴图的基础上添加细节以及修正瑕疵。

使用 SimpleBake 完成 UDIM 渲染烘焙

烘焙后的贴图

2. PBR 贴图应用

在 blender 中我们可以使用程序化节点达到想要的效果，但当模型导入到引擎，这个时候就需要通过贴图的形式来实现我们想要的效果，也就有了上面烘焙的这步流程，当然，相对程序化节点效果，PBR 让更为真实但更加复杂更加消耗性能的光照模型算法变为可以大量被使用，在 Blender 中 PBR 纹理到底如何正确使用？下面介绍几个主要的贴图的设置方法。

① 基本颜色 Base Color：

基本颜色贴图定义了表面的颜色。直接将其插入 Principed BSDF 的 Base Color 接口。注意：确保图像文件的颜色空间设置为“颜色”。

② 粗糙度 Roughness：

粗糙度图定义表面的粗糙度。应将其插入 Principed BSDF 的“粗糙度”输入中。确保图像文件的颜色空间设置为“非颜色数据”。（可选）您可以在图像后面添加个 Gamma 节点以轻松实现材料的粗糙度。较低的 gamma 表示表面更粗糙，反之亦然。

③ 法线 Nomal：

法线贴图定义表面的一部分朝向哪个方向，该方向用于创建详细的阴影和高光。通常，应将其插入法线贴图节点的“颜色”输入中，然后将其插入“Principed BSDF”的“法线”输入中。确保图像文件的颜色空间设置为“非颜色数据”。

④ 金属度 Metallic：

金属贴图定义了材料的哪些部分是金属的，哪些不是。应将其插入着色器的金属输入中。确保图像文件的颜色空间设置为“非颜色数据”。只有金属和非金属材料都可以使用此贴图。如果金属材料没有此贴图，则可直接调整 Principled BSDF 中的金属值。

⑤ 环境光遮蔽 Ambient Occlusion：

环境光遮蔽（AO）贴图可用于伪造曲面凹凸中的柔和阴影，这在游戏引擎里面尤为有用。（注：Blender 中使用 Cycles 渲染时，AO 贴图的作用不大）。如果要使用此贴图，则应使用 MixRGB 节点将其与“基础颜色”贴图相乘，其中“环境光遮挡”贴图是第二个颜色输入，因此您可以使用 MixRGB 节点的滑块轻松控制其强度。

最后我们按照上面的方法，新建一个材质，将烘焙好的贴图连接到对应的原理化 BSDF 节点上，至此，一个附带 PBR 材质的角色模型就做好了。

PBR 节点连接方式

四、效果展示

三视图

服装

pose

cloth-01

cloth-02

cloth-03

五、结语 本文着重讲述了数字人角色在 Blender 中着色的工作流程，讲述了角色如何展 UV，借助 Blender 强大的节点功能，完成角色皮肤及眼睛的材质制作，最终使用 UDIM 工作流提升我们的工作效率，至此，一个角色的形象已经完整的展现在你的眼前，但栩栩如生的数字人，怎能止步于静止，在下一章节，我们继续讲述角色绑定和动作的知识，让真人实时驱动角色动起来，以及通过语音驱动数字人说话。

前言文字是设计中的重要组成部分，就像我们平时看到的海报，里面各种被精心设计过的字体经常会成为视觉焦点，以醒目且个性化方式传达出内容的精髓，最后达到的效果事半功倍。虽然在 UI 设计中不需要对文字过分设计，但图文作为主要的传播途径，字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率...

前言

文字是设计中的重要组成部分，就像我们平时看到的海报，里面各种被精心设计过的字体经常会成为视觉焦点，以醒目且个性化方式传达出内容的精髓，最后达到的效果事半功倍。

虽然在 UI 设计中不需要对文字过分设计，但图文作为主要的传播途径，字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率。所以不管是平面设计还是 UI 设计，字体都是不可忽视的核心元素，做好对文字信息层级的处理，对用户的视觉体验有着至关重要的作用。

互联网经过多年的发展，也积累的很多的专业字体知识，设计师应该去了解字体的性格及特征并将其合理运用，才能将信息更清晰的传达给用户。本文将围绕着字型、字号、字距、字重等几个属性，针对各方面深度解析，希望能够帮到大家。

相关好文回顾：

8000字干货！超全面的 UI 字体排版设计指南 文字是人类文化的重要组成部分，经历了数千年的发展和演变，字体排版已经积累了非常多的专业性知识。

阅读文章 >

一、字体的基本特征 1. 使用前的思考

文字是信息内容的载体，能最直接的将信息清晰的表达出来，字体则表现了文字的外在特征，合理的使用这些属性特征不仅能清晰准确的传递信息、用于特定场景还能赋予情感表达，展现出独特的魅力，例如：健身、器械类的产品使用的字体通常会给人一种力量、刚硬、壮实的感觉，而女性专用产品字体则显的纤细、苗条。

2. 为什么要使用黑体

不同类型的字体传达出不同的气质，综合来讲，字体可分为黑体、宋体、圆体、书法体这四类，平时大家看到的各种形形色色的其他字体，基本是通过这几类延伸而来。

在 UI 设计中，绝大多数的文字排版用的是黑体，诸如思源黑体、阿里巴巴普惠体、苹方（ios）、微软雅黑（PC web）等都是标准的黑体。另外，特定场景如瓷片区、卡片、banner、专题头图、引导页、闪屏等，对于用什么字体不会有太大的限制，在避免商用侵权的前提下符合产品气质即可。

黑体字的笔画横平竖直、粗细均匀且字面呈正方形，一般来说，没有衬线的字体都可以称作黑体。黑体结构清晰、简洁有力，能让界面显得庄重还附有现代感，虽然气质上没有太大的个性化、但可塑性很强，这也是在 UI 设计中、黑体一直很受青睐的原因，无论是标题、正文、提示等使用场景都可以作为首选，对老设计师能多一个选择、新手设计师也不易犯错。

3. iOS 与 Android 的区别

iOS 与 Android 是移动设备的两大系统，虽然很多设计师用一稿适配两端、遇到特殊页面也只是单独拎出来微调即可，但对于中、大型的互联网公司则很难满足优质用户体验中的部分细微差别，例如：iOS 的苹方字体在 Android 设备中无法高度还原、预留的文字数量上限位置无法显示完整等，都会影响用户体验。

此外，iOS 和 Android 都有自己独立的设计规范，大家有时间的可自行查看，本文只对字体规范作基本了解。

iOS 使用的是「苹方」字体，提供了 6 个字重，英文字体为「San Francisco」；Android 使用的是 Google 联合 Adobe 发布的「思源黑体」，为充分满足设计要求，提供了 7 个字重，英文字体为「Roboto」。

此外，如果界面中涉及的数据较多，数字使用 DIN 字体也是不错的选择，字体外形较长，易用且耐看，很适合数据统计展示，不过这款字体商用的话需要收费的。

二、字体的基本属性 1. 字体大小

字号的大小决定信息的层次和权重，不规律的使用字号会让页面信息杂乱，不利于用户阅读。在设定字号规范时，需特别注意最小值和递增值。

最小值决定信息的可读性，以 2 倍图为例，iOS11 系统将最小字号规范为 11pt（22px），但很多产品依然将最小字号设定为 20px，甚至部分产品将 18px 的数字加粗运用在标签中，所以最小字号的设定并没有固定数值，原则上不影响用户的浏览就行。笔者建议最小字号不要低于 20px，在设计过程中，可以通过设备实时预览，因为同样的字号在不同的环境、色值、背景下，其视觉效果都有所区别。

其次，递增值决定着信息层级区分的明显程度，遵循字号越大、递增值越大的原则，常用字号数量控制在 6 种左右。iOS 和 Android 都是采用的 2 倍数栅格系统，为了让字号的层级区分更明显，字号设定要避开奇数且最小递增值不要低于 4px，下面举几个常见的例子：

①：20、24、28、32、40、48、64...

②：20、24、30、36、42、48、64...

③：22、26、30、34、40、48、60...

...

规范好的字号该如何使用，还得根据界面中的实际场景来决定，如下图：

2. 字符间距

字间距是指两个字符之间的横向间隔距离，在界面排版中，除了西文的字间距调整需求较大外，中文通常只保持默认，只有少数场景才会手动调整，且没有固定的规律，保持视觉舒适状态即可。例如：banner、界面大标题、重要数字（取件码）显示等。

3. 行高

行高是指包围在字体之外的隐形边框，一个字体元素的的行高等于文字上边框+下边框+字号的高度之和。

西文字体因高度的参差不齐，本身就能制造出视觉上的上下空间，通常行高为字号的 1.2 倍，而中文字体没有上下间隙的延伸，行高则较大，一般在 1.5 倍左右，如果字号较小且折行较多，行高甚至能达到字号的 2 倍。

4. 字重

字重指的是字体的粗细，不同的字重能体现出不同的层级关系，给用户的视觉感受也截然不同。

像苹方、思源、阿里巴巴普惠这些家族字体一般都会有极细体、细体、常规体、黑体、粗体等多个字重，在 UI 设计中，实用的就常规体、加粗两个字重，再通过色彩、字号使其成为对立关系，明显的拉开文字内容层级后，方能保持良好的浏览体验。

5. 全角与半角

这种主要针对标点符号，以英文字母为标准，半角是指一个符号占用一个标准字符（英文）的位置，全角则是占用两个字符位置。

众所周知，中文使用都是全角、英文使用半角，并且会随着中/英文的切换而自动改变，但有时候难免会操作失误让页面中的某处信息看着怪怪的却不明所以、另外中文信息中的时间/日期也大多会使用半角符号，所以设计师对此有一定的了解时候、，在处理这些细枝末节就能做到收放自如。

三、不同场景下的属性参考 在色彩规范中，除主/辅助色之外，设计师还会提供 3~4 个等级的配色，如通用的#333（标题）、#666（正文）、#999（提示）、#ccc（占位符），这也是 UI 通用的文字色用色规范，不同的字号需用色规律。

如果想进一步延展，可以增加一点品牌色，也可以使用#000（纯黑）调整不透明度来体现文字色彩层级，深色模式中很常见，下面我们一起来了解几个常见的使用场景。

1. 标题

标题的主要作用是让用户以最快的速度了解界面主要信息，需要时刻吸引用户的注意力，例如 APP 中的导航栏、模块标题、内容标题、数据统计等。需要简单明了且有冲击力，字号一般会控制在 30px 以上并加粗显示，直接使用一级色值（#333）即可。

在特殊场景下，标题也可以使用主体色值，但一定要注意容器背景与其他信息色彩的协调，不然花里胡哨的还不如用回一级色值。

2. 正文

正文并不需要吸引用户注意力，它主要是提供标题的注释或内容的详细说明。 当白色背景文本内容过多、在需要用户仔细阅读的情况下，一定要注意颜色不能太深，不然显的主次不分，还有些刺眼，这里推荐 26~30px 字号使用二级文字（#666）色值。

3. 提示语

提示类文字使用场景就相对较多，它除了给用户展示当前状态，还能给予合理的引导，促进用户进行下一步操作。常见使用色值为三级（#999）、四级色值（#ccc），例如界面中的操作注意事项、表单占位符等。字号一般为 24px，因使用场景不同，也会有特殊的存在，例如表单中占位符的字号会跟随输入后的字号统一。

4. 超链接

超链接在字号、色值上没有一定的限制，但需要一个特定的辅助元素/属性来提示用户这是可点击的。

例如 APP 登录页面，找回密码、注册、获取验证码等，大部分都是用主体色、图标（右箭头）等方式强化可操作入口，而 PC 端网页中超链接的表现方式，下划线、蓝色字体、>>这三种方式几乎能涵盖所有。

5. 其他

规范并非不可更改，它只能帮助设计师在大部分使用场景中减少设计出入并提高产出效率，但总有一些使用场景需特殊对待，字体也不例外，如以下场景：

APP金刚区入口字体大多使用24px，一级色值（#333）； 底部Tab栏字体未激活使用浅色，激活后切换为一级色值（#333）或主体色； 重量级的提示语用红色色值； 按钮中的文字跟随按钮的等级权重变化； 深色容器标签的文字反白； ......

四、字体使用基本原则 1. 符合产品气质

虽说黑体（苹方、思源、阿里巴巴普惠）是 UI 设计中的首选字体，但这也仅仅只是建立在不出错的的情况下、满足基本条件而选择，如果想表达出产品的类型、情感、气质等品牌属性，在不影响用户识别的前提下，可选择一款符合产品气质的字体，打造出差异化的浏览体验，对于追求完美的 APP 来时是一个不错的解决方案。

例如，部分艺术、女性类的 APP 会选择使用宋体，整体看起来有一种高端、时尚且优雅的感觉。

整体界面使用特殊字体还是相对较少，为了更好的体现出产品属性/风格，将其融入不同的模块及使用场景，会让产品更有特色，例如 banner、瓷片区、大标题、头图等，对用户的视觉吸引力能得到很大提升。

2. 使用同一家族字体

在一个 APP 中，坚持使用同一个家族的字体，对标题、正文等文字信息有一个统一的视觉规划，这样有助于建立起体系化的设计思路，避免在开发落地时存在一致性问题，减少开发与设计的出入。

笔者曾见过这样的设计师，界面中原本用了「苹方」字体，在一个特殊场景下，「苹方」的粗体字重无法满足大标题的使用需求，于是将大标题单独改为「阿里巴巴普惠体」的最大字重。

从表面上看，上述的设计需求是满足了，但稍有不慎就会成为没有价值的艺术品，首先，单独一处使用不同家族的字体，会影响整体视觉的一致性；其次，若程序没有嵌入另外的字体，产品落地后其视觉效果毫无改观，且更没有必要为了某个场景的使用要单独嵌入几十到几百兆的家族字体，让应用安装包无故加大。在设计中，有时候在解决某个问题时，解决方案并非无可替代，加粗字体亦是如此。

另外，在可用性、实用性强且必要的情况下，并非不能再增加一个家族字体，例如所有标题系列使用「阿里巴巴普惠体」、数字系列都使用「DIN」，前提是一定要形成体系化，并非某一处的使用。

3. 明确的信息层级

在同一个界面中，字体色值、字号、字重等，都是用于区分信息层级，尽量不要使用过多的层级，避免层级混乱影响信息浏览。

在信息层级处理方式的四个基本原则中，「对比」就是将复杂的信息通过元素的各种属性以不同的视觉效果呈现，来体现信息节奏感，并非是为了好看而随意给文字赋予各种属性及样式效果。

五、UI 设计需注意的问题 1. 避头尾的使用

避头尾使用在文字内容较多的折行场景中，主要处理标点符号刚好出现在一行文字的开头或结尾时，通过自动调整单行的字符间距、在视觉上将标点符号前移或后移。

在新闻资讯类应用的详情页中，避头尾使用的较多，用以避免头/尾存在标点符号造成视觉重量不一、信息参差不齐的问题出现。

2. 反差体现层级

很多时候，为了区分信息层级，首先想到的是利用不同的字号、字重来体现，这当然没有问题，但如果结合字体的明暗关系（灰度色值等级）则效果更佳。 如下图：标题一级色值（#333）、正文二级色值（#666）、时间日期三级色值（#999）。

3. 备用字体

备用字体只会运用在 web 页面中，如果网站需要一款特殊的字体才能彰显其独特的气质、同时又担心用户在某些设备中因为没有这个字体而无法浏览其效果，则会另外再选择一款相近的通用字体作为备选，以弥补视觉体验上的损失。

如果字体包不大，也可以让开发将其放在服务器端，这样能让所有用户都能看到相同的效果，省去了不少麻烦。

4. 确保可读性

可读性应该是选择字体的首要元素，虽说很多文字我们都可以从前后字义、联想词等角度将自己的理解补充完整，但完全没有必要。

UI 设计不像海报那样融入较多的艺术成分，更需要的是内容清晰、表意明确、高效率的传达，任何增加用户阅读、理解成本的做法都应该规避掉，例如过于变形的可爱风格、书法手写体等都尽量少用。

六、结语 文本内容是 UI 界面中占比较多的元素之一，设计师需要对其基本属性及使用场景有一个清晰的了解，使用的是否恰当取决于我们对字体的选择。虽说在 UI 领域，字体模块类的文章比较少（更多是文字、字库的设计），但它在设计规范中的地位是举足轻重，选好一款字体对设计来说是锦上添花。

关于 UI 界面中的字体，其实没有太多的讲究，也没必要整得花里胡哨，重点在于排版过重中注意信息层级的划分以及有足够的视觉舒适度即可。

欢迎关注作者微信公众号：「能量眼球」

着色是卡通数字人角色设计的重要元素之一，它对于角色有着基本的色彩表现和结构表现等造型作用，并且能够表达角色的情感、塑造角色的性格，甚至通过其象征作用赋予角色某种特殊属性或成为角色的缩影。随着 3D 角色建模技术发展至今，色彩在角色设计上的功能和作用得到了较为充分的发挥和体现。本文通过分析 Blender 材质节点...

着色是卡通数字人角色设计的重要元素之一，它对于角色有着基本的色彩表现和结构表现等造型作用，并且能够表达角色的情感、塑造角色的性格，甚至通过其象征作用赋予角色某种特殊属性或成为角色的缩影。随着 3D 角色建模技术发展至今，色彩在 角色设计 上的功能和作用得到了较为充分的发挥和体现。本文通过分析 Blender 材质节点的应用，并结合 UV 和烘焙技术，来完成卡通数字人展 UV、着色、烘焙的工作。

上期回顾：

5000字干货！3D卡通虚拟数字人角色设计完整流程（上） 张志舟：2021 被认为是“元宇宙元年”，元宇宙概念大热，但目前仍在布局阶段。

阅读文章 >

一、展 UV 1. 什么是 UV?

在 Blender 中，可以为一个面关联一个独立的图像。UV 用于定义二维纹理坐标系，称为“UV 纹理空间”。UV 纹理空间使用字母 U 和 V 来指示二维空间中的轴。UV 纹理空间有助于将图像纹理贴图放置在 3D 曲面上，然后图像可以用于渲染或实时显示。在 3D 视图中选择面选择模式，才能指定图像或修改活动网格物体对应的 UV 坐标。这样一个面可以有多张 UV 贴图。默认情况下，网格是没有 UV 的。首先得映射面，然后才能编辑它们 。展开模型的过程是在 3D 视图编辑器的编辑模式下进行的，过程中会在 UV 编辑器创建一个或多个 UV 孤岛。

2. UV 映射

UV 映射是将三维表面转换为平面位图图像的二维坐标系。原始曲面的每个顶点在 UV 贴图上都有一个坐标，中间的像素值在平面多边形曲面上进行插值，以实现高精度的纹理控制（特别选择 U 轴和 V 轴名称，以免与实际模型的 X、Y 和 Z 轴重名）。UV 贴图坐标值被组织成一个网格系统，其中图像本身出现在网格的 0-1 区域中，而该图块之外的区域只是向外重复图像。因此，传统上只真正使用了 UV0-1 空间。

UV 映射-图片来源于网络

3. UV 通道

在网格标签页的 UVMaps 面板有一个列出所有为网格创建的 UV 映射的列表视图。被选中的映射会在 UV/图像编辑器显示。单击相机图标，启用渲染该 UV 贴图。

4. UV 展开

展 UV 前先重置模型：Ctrl+A，选择「全部变换」。这是为了避免 UV 有拉伸。和缝纫一样，缝合线是图像/布拼接的位置。展开时，只要选中边，然后按下 Ctrl-E 并选择标记缝合边，即可将一条边标记为缝合线；使用 Ctrl-E 并选择清除缝合边即可清除标记。

工作流程如下：Create seams-展开-反复调整缝合线-手动调整 UV，角色模型的 uv 展开方式有很多，具体如何拆分，需要综合考虑角色的风格、性能、精细度等。

在展开对称物体时，比如身体，沿对称轴标记缝合线，在展开时，可以把两个半边重叠到同一个纹理空间，这样右手和左手可以共用图像像素；左脚匹配右脚等等。

展 UV-图片来源于 Blender 官方

3. UDIM Workflow

UDIM 是对 UV 贴图和纹理工作流程的增强，它使 UV 贴图的生成和分配纹理变得更加简单。

从本质上讲，UDIM 只是一个自动 UV 偏移系统，它将图像分配到特定的 UV 平铺上，它允许你对相邻表面使用多个较低分辨率的纹理贴图，从而产生更高分辨率的结果，而不必求助于使用单个、超高分辨率图像。为了理解 UDIM 工作流的好处，需要对 UV 贴图的工作原理有一个基本的了解。

使用 UDIM 工作流程，0-1、1-2、2-3 等每个完整的图块部分都可以分配给它自己的独立图像映射，所有这些都在同一个表面内。每个图像也可以有自己的分辨率。UDIM 工作流程只是一种相应命名图像的符号格式，因此它们会自动分配给特定的 UV 平铺。编号从 UV 原点开始，沿正方向向外移动十个图块（到 1010），然后重复堆叠在一起的行，向上移动 9999 行。

UV 图块

使用 UDIM 工作流程从实际几何体的 UV 映射开始。在此阶段决定如何划分模型，通常基于项目所需的分辨率程度。对于一个普通的角色项目，可以分成头部一个图块，身体一个图块。如果想要更高的分辨率，还可以将手和脚分配到单独的图块上。

如何在 Blender 中使用 UDIM 分块？

先选中角色模型，在 UV 编辑器中新建图像，注意图像选择平铺。 在右侧图像菜单，源选项下选择 UDIM 分块。 在 UDIM 分块下添加分块，设置所需的分块数量。 将模型的 UV 孤岛分配到各个 UDIM 分块。 二、着色 1. body 材质

为了避免制作贴图时每一步都需要绘画的痛苦，我们求助于搅拌机最大的力量——材料节点编辑器！我们通过添加一些顶点绘画并添加一些次表面散射来完成角色的皮肤着色。

body 着色

① 设置光源

将世界环境的背景色改为略带灰白色的颜色，这样做的好处就是，在场景中我们不需要任何灯光，并且为场景中的模型提供了非常匀称的光源。

② 使用（AO）添加基础颜色

给角色模型添加一个原理化 BSDF 材质，然后给基础色添加一个环境光遮蔽（AO），这时候我们可以看到角色的夹缝中看到一些暗部阴影。在环境光遮蔽节点与主节点之间添加一个渐变节点，调节滑块模拟阴影部分的深浅，调节渐变颜色模拟皮肤的色调。这样得到一个非常基础的肤色，可以多添加几种颜色，丰富皮肤颜色的细节和过渡。需要注意的是，在着色和烘焙的时候，需要将渲染属性的颜色管理改成标准，以便我们更准确的观察色彩变化。

③ 添加皮肤高光

有了基础颜色，接下来我们来调整高光部分，添加一个几何数据节点，再添加一个渐变节点，将尖锐度连接到渐变系数上，按住键盘快捷键 ctrl+shift，然后点击渐变节点，预览节点效果。调整滑块，最终调整得到我们满意的高光部分为止，然后将此部分节点和基础色节点通过节点混合链接到主节点，需要注意的是高光部分的节点连接到系数，最后设置一下另一个颜色（高光颜色），这样就得到了皮肤的高光，继续调整高光节点的渐变滑块，以达到最佳的效果。

④ 添加次表面效果

最后添加次表面颜色，让皮肤在光照下显得更加通透，通常次表面体现在皮肤相对薄弱的区域，譬如手指、眉毛、眼睑、鼻子、耳朵、和其他肉质部分。接下来我们添加一个顶点色，命名为 sss，我们为这些地方绘制顶点色，绘制完记得使用模糊画笔模糊一下。最后添加次顶点颜色节点和渐变节点，链接到主节点的次表面上，设定一个次表面颜色，调整渐变滑块，以达到满意的次表面效果。

角色 body 着色材质节点

2. 眼睛材质

实现眼球材质的方法多种多样，但最终都需要以贴图的形式输出，这里主要使用材质+烘焙的方式。通过观察，我们可以将眼睛的材质分为眼球和虹膜两个主要材质，而眼球眼球实际上可以分为三种材质：白色的基地、巩膜上的血丝、透明的角膜，这里我们依托于 blender 强大的节点，将三者结合到一个材质里，尽量少的材质，亦能节省引擎渲染的性能。

眼睛材质

① 眼球的材质

通过观察，我们在制作眼球的材质时可以将其归纳为白色基底、透明的角膜、眼球中的血丝三个部分：

step 一：白色基底

对于白色基底，新建一个原理化 BSDF 节点，基础色直接选取白色，只要把糙度调低即可。

step 二：透明的角膜

角膜的关键在于它是透明的，且为了保证过渡自然，需要用到渐变纹理来控制白眼球的透射率实现。颜色渐变模块的滑块拖动可以控制渐变范围，这里渐变区域一般不要设置太大，有一点就可以了。（将虹膜添加一个深色材质，便于观察过渡的效果）

step 三：眼球中的血丝

眼球中的血丝可以分为底色和血丝部分，由于血丝的位置主要分布在白眼球处，所以可以复用前面的渐变纹理作为输入，新建一个渐变即可，通过调整渐变的范围即可以调整颜色分布。沃罗诺伊纹理作为血丝的纹理，由于该纹理具有一致的方向性，和血丝的不规则不同，故还需要通过噪声纹理对齐形状进行调整。然后将纹理染成红色并与底色柔光叠加即可达到血丝的效果，为了增加细节，可以再添加一些小血管，小血管的材质和大血管的流程完全一样，只是纹理的参数不同，通过增加沃罗诺伊纹理的缩放系数，来增加纹理的密度，并将大血管的输出通过混合节点混合后输出为血管纹理。

至此眼球的部分的材质就做好了，接下来我们制作虹膜部分的材质。

CORNEA/SCLERA 的材质节点

② 虹膜的材质

在制作虹膜的材质之前，我们可以先将虹膜部分的 UV 展开，因为后续纹理映射将会使用 UV 坐标来制作。

通过观察，我们不难发现，瞳孔中心是黑色的颜色，然后是浅色的虹膜，然后逐渐消失，因此，可以将虹膜部分看作是虹膜和瞳孔两部分，虹膜纹理部分使用噪波+镜像渐变纹理，而虹膜的渐变则可以使用球形渐变纹理制作，然后通过混合 RGB 节点（正片叠底）进行混合。

为了让虹膜的纹理不显得单调，还可以使用沃罗诺伊纹理增加虹膜部分的细节，最后使用混合 RGB 节点（颜色减淡）与前面的颜色节点相连。

IRIS 的材质节点

三、渲染烘焙 烘焙，一般是为了加速后续的其他过程进行的预先计算。渲染烘焙一个网格物体表面，得到 2D 位图图片，这些图片会通过 UV 坐标重新映射到物体上，这让实时渲染的效率更高。烘焙是对每个独立网格完成的，并且网格已经展开 UV。

Blender Cycles 着色器的灯光照明可以烘焙到图像纹理。这有几种不同的用途，最常见的是：

烘焙纹理，如基础颜色或法线贴图，用于导出到游戏引擎。 烘焙环境光遮蔽或程序纹理，作为纹理绘制或进一步编辑的基础。 创建光照贴图以提供全局照明或加快游戏中的渲染速度。 1. UDIM 渲染烘焙

在烘焙之前我们需要确保已经完成 UDIM 分块，同时在物体数据属性下为每个 UV 块添加了定位在主分块的 UVMap。Blender 的渲染烘焙是一个非常复杂的工作流程，为了提高工作效率，我们选择使用插件(SimpleBake)来辅助烘焙。

在物体数据属性中选择对应的 UVMap，在 SimpleBake 中，选择需要烘焙的贴图类型，譬如 Diffuse、sss、Normal 等，选择贴图尺寸，贴图名称，在物体模式下选中模型，点击 Bake PBR Maps，最后检查一下贴图是否正常，在 ps 或者直接使用 Blender 纹理绘制，在贴图的基础上添加细节以及修正瑕疵。

使用 SimpleBake 完成 UDIM 渲染烘焙

烘焙后的贴图

2. PBR 贴图应用

在 blender 中我们可以使用程序化节点达到想要的效果，但当模型导入到引擎，这个时候就需要通过贴图的形式来实现我们想要的效果，也就有了上面烘焙的这步流程，当然，相对程序化节点效果，PBR 让更为真实但更加复杂更加消耗性能的光照模型算法变为可以大量被使用，在 Blender 中 PBR 纹理到底如何正确使用？下面介绍几个主要的贴图的设置方法。

① 基本颜色 Base Color：

基本颜色贴图定义了表面的颜色。直接将其插入 Principed BSDF 的 Base Color 接口。注意：确保图像文件的颜色空间设置为“颜色”。

② 粗糙度 Roughness：

粗糙度图定义表面的粗糙度。应将其插入 Principed BSDF 的“粗糙度”输入中。确保图像文件的颜色空间设置为“非颜色数据”。（可选）您可以在图像后面添加个 Gamma 节点以轻松实现材料的粗糙度。较低的 gamma 表示表面更粗糙，反之亦然。

③ 法线 Nomal：

法线贴图定义表面的一部分朝向哪个方向，该方向用于创建详细的阴影和高光。通常，应将其插入法线贴图节点的“颜色”输入中，然后将其插入“Principed BSDF”的“法线”输入中。确保图像文件的颜色空间设置为“非颜色数据”。

④ 金属度 Metallic：

金属贴图定义了材料的哪些部分是金属的，哪些不是。应将其插入着色器的金属输入中。确保图像文件的颜色空间设置为“非颜色数据”。只有金属和非金属材料都可以使用此贴图。如果金属材料没有此贴图，则可直接调整 Principled BSDF 中的金属值。

⑤ 环境光遮蔽 Ambient Occlusion：

环境光遮蔽（AO）贴图可用于伪造曲面凹凸中的柔和阴影，这在游戏引擎里面尤为有用。（注：Blender 中使用 Cycles 渲染时，AO 贴图的作用不大）。如果要使用此贴图，则应使用 MixRGB 节点将其与“基础颜色”贴图相乘，其中“环境光遮挡”贴图是第二个颜色输入，因此您可以使用 MixRGB 节点的滑块轻松控制其强度。

最后我们按照上面的方法，新建一个材质，将烘焙好的贴图连接到对应的原理化 BSDF 节点上，至此，一个附带 PBR 材质的角色模型就做好了。

PBR 节点连接方式

四、效果展示

三视图

服装

pose

cloth-01

cloth-02

cloth-03

五、结语 本文着重讲述了数字人角色在 Blender 中着色的工作流程，讲述了角色如何展 UV，借助 Blender 强大的节点功能，完成角色皮肤及眼睛的材质制作，最终使用 UDIM 工作流提升我们的工作效率，至此，一个角色的形象已经完整的展现在你的眼前，但栩栩如生的数字人，怎能止步于静止，在下一章节，我们继续讲述角色绑定和动作的知识，让真人实时驱动角色动起来，以及通过语音驱动数字人说话。

2022年职场习惯第5期来了！这期邀请了设计总监葱爷，分享了他快速成长的学习方法，以及坚持多年如一日的职场习惯和思考方式。上期回顾：前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？

2022年职场习惯第5期来了！这期邀请了设计总监葱爷，分享了他快速成长的学习方法，以及坚持多年如一日的 职场习惯 和思考方式。

上期回顾：

前小红书设计负责人：为什么有人工作才两年，能力远超五年的设计师？ 2022年职场习惯第4期来了！

阅读文章 >

一 、您有哪些坚持了三年以上的工作和生活习惯

看书应该算一个吧，虽然我每一年看得的书都不算多，但是至少每年都会看，然后也会经常在网上看一些文章，都是以专业书籍为主。形成这个习惯的原因可能要追溯到大学期间，那时我经常去学校图书馆翻看一些设计、创意类的书籍，应该看了有几十本吧，后来确实发现自己比同学们要懂得多一些，坐做起设计老来也成熟一些，于是就把这个习惯保留下来了。

虽然现在获取知识的渠道有很多，但感觉书里的东西更严谨、更专业，也更稀缺， 设计师 懂得一些理论知识也是很重要的，做设计要有依据和方法。

除了设计书籍，我还会看一些营销、文案类的书籍，最近两年我好还开始在一些听书的平台上听书，这大大拓宽了自己的阅读面，对我的职业和生活都会有很多帮助。

另一个坚持了很久的习惯是做设计前我一般会画草稿，这大概跟我入行时遇到的上级有关系吧，我觉得画草图对做设计挺有帮助的，草图不一定要画得很专业，草图的目的是构思和快速验证自己想法的可行性，也能为执行做参考依据，可以有效提高工作效率。当然，也多多少少可以锻炼一下手绘能力。

二、对你职业生涯帮助最大的习惯是什么？

我觉得应该是把大部分下班时间和周末的时间用来学习，我算是一个比较刻苦的人吧，也挺喜欢做设计和创意，我们在上班的时候是没时间做练习和看书的，所以我就会用下班和周末的时间来做这些事，包括写文章，以前上班的时候我经常在地铁上用手机写文章。当大家都在用空余时间追剧、刷短视频、和玩游戏的时候，如果你用来学习，时间一长，你的五年可能就是人家的七八年，差距自然就会形成。我觉得我从学习中获得的快乐比玩手机获得快乐更满足，更持久。

葱爷的文章回顾：

零基础速成班！21个简单实用的字体设计笔画处理技巧 无论什么类型的设计，往往都讲究在大方向直指人心、美而不妖，在细节上精益求精，百看不厌。

阅读文章 >

目录页该如何设计？给你8个高手常用的排版方式 目录页主要出现在一些篇幅比较长的书籍（画册）中，其位置一般被安排在扉页之后，目录虽然不是正文，却概括了一本书的所有内容，具有便于读者快速了解及查阅书本内容的作用，所以，即使说目录页是一本书中最重要的页面也不为过。

阅读文章 >

图片排版找不到灵感？送你17个实用技巧！ 排版的难处在于，我们不是根据已经设计好的版面来填充内容（套模板），而是要根据具体的内容来布局版面。

阅读文章 >

三、刚进入职场的设计师，应该培养哪些习惯才能快速成长？

1. 要沉下心来把基础打好

基础对于设计师来说很重要，就好比我们以前学素描，首先要通过临摹、以及画大量简单的物体，来锻炼我们的线条、透视、造型能力、对五大调子的刻画能力的等等，至少画了两三年以后才开始画人物石膏和人物写生，最后才 会去学尝试一些技法，如果最基础的东西都没学号好，后面的东西就没法画。

设计师要警惕一开始就被一些炫技的东西吸引、自乱阵脚，设计并不是把软件学会就可以了，审美、版式设计、图形设计、构图、字体设计、色彩搭配等等才是设计师的核心技能。

2. 多主动去问别人，虚心学习

新人一定要积极主动，不要总指望着别人主动来帮你，主动的人比被动的人能获得更多自己想要的东西，在学习上面，脸皮要厚一点。另外提醒一点，如果别人给了你指导，你就应该去尝试一下他的解决方案是否可行，如果有异议可以委婉地提出来，如果老是爱问，别人提出的建议你又不愿意接受，那么以后就没人在再愿意指点你了，反正，你也不听。

3. 善用下班时间

大家上班的时间都差不多，所以真正拉开人与人差距的，是对下班时间的利用，如果你觉得这也是内卷的话，那当我没说。

四、有哪些不注意的小习惯，长此以往对设计师有害？

1. 以工资高低选择公司

刚入职场的年轻人很容做出一些错误的选择，比如根据工资的高低来选择公司，他们很容易被一些毒鸡汤影响，比如打工不就是为了赚钱吗？实际上，如果你一开始就被一些小钱带跑偏了，能力没有得到提升，那么以后就会失去很多赚大钱的机会。

个人觉得年轻设计师刚开始的关键是选择一个好的团队，把学东西放在第一位，当然，也要谨防有些公司以此为借口给你画饼，大家都是成年人了，自己的基本权益要懂得维护。

2. 做设计求快不求质

可能是由工作环境造成的，很多设计师习惯了半天一张海报、两小时一个 logo、一天一张详情页的工作流程，这么短的时间要完成这些设计，能做完就不错了，根本没时间思考如何做得出彩，也没有时间打磨细节。长此以往，你就只能做这样的设计了，以后即使给你几天的时间，你可能也不知道如何跳出原来的模式、不知道如何深入下去，所以，很多设计师做了好几年的设计仍然没有拿得出手的作品。

偶尔一些比较急，比较简单的项目这么处理没问题，但如果几年下来都只是这样做设计，那么你就要小心了，除非这是你想要的。