下载掌阅APP，畅读海量书库
立即打开
本节按照设计到实现的顺序，逐步介绍设计师工作的目的、设计意图，以及这些意图是如何通过前端工程实现完整交付的。这个过程中的选择、取舍就是所谓的可变性。了解UI的可变性如何一步步从设计落地到前端技术工程中，是构建智能UI供给链路的基础。
Ajax之父Jesse James Garrett围绕“以用户为中心的设计”得出一套产品设计的思维模式：从抽象到具体，逐层击破战略层、范围层、结构层、框架层和表现层五个层面，最终达到提升用户体验的设计目的。其中“表现层”是这五层中的最顶层，该层又称为“视觉设计”。D2C的目的就是将“表现层”（视觉设计）转换成Web应用（或Web页面），和视觉设计不同的是D2C用代码来表达视觉，而视觉设计用设计稿来表达视觉。设计稿中的要素和Web中的元素对应关系是什么？在Web前端技术工程中又是如何实现视觉设计中的可变性的？下面就详细解答这些问题，开始我们的实现UI的可变性之旅。
用户的第一印象或直觉反应通常是在50ms内形成的。如果用户不喜欢向他们展示的东西，就会选择离去。很多人误以为这意味着设计师加入有吸引力的元素，就能最大限度地提升UI吸引力从而留住用户。而事实上，使用视觉设计来创造和组织元素是为了引导用户关注应用的功能，并使美感一致。
例如，设计师围绕应用的功能来构思和安排网站内容，并小心翼翼地确保内容能给人以正确的视觉暗示，这些暗示细节的变化会直接影响用户的感受和想法。所以，必须始终以正确的方式向用户展示正确的东西。因此，视觉设计应该将用户的注意力吸引到重要的内容上，以重要的内容诠释产品功能，并在设计的表达和用户对UI的感知力之间取得平衡。视觉设计师必须努力适应用户对UI感知的局限性，比如认知负荷，因此会用留白、空间、分隔、分组等魔术棒，施展用分块来帮助用户理解和区分不同信息的魔法。而前端工程师则会利用技术让栩栩如生的UI及合理的交互呈现在用户面前，提示他们和内容或功能进行互动。
另外，视觉设计的重点是：通过图像、颜色、字体和其他元素的组合来实现具有美感的Web应用（或Web页面）。一个成功的视觉设计并不直接影响页面上的内容或功能，相反，这些UI变化范围不同效果的呈现，能够吸引用户并帮助应用和他们建立信任，并用UI偏好的个性化来增强它。下面将详细介绍这些元素的特点，同时展示其在视觉设计和技术实现上的关系。
创造视觉设计的基本元素也是UI可变性的对象，包括线条、形状、色彩、质感、字体、形体等。这些基本元素自身和其内在属性，以及组织这些元素的方式和元素之间的关系，共同构成了设计意图的实现路径。
线条连接着两个点，可以用来定义形状，进行区域的分割。所有的线，如果是直线的话，都有长度、宽度和方向。此外，还有曲线等线条。
代码示例：
如图5-1所示，借助线条可以在UI上绘制形状，还能给UI添加一些装饰性元素。
除了独立的线条外，UI元素上的线条还有边框、背景（纹理）等。
图5-1 线条效果
形状是自成一体的区域。为了定义区域，设计师使用具有不同样式的线条、颜色或纹理来构建不同的区域。不同的区域分别组成不同的形状，而每个物体又是由形状组成的。
代码示例：
这些CSS样式的效果如图5-2所示。
图5-2 线条、颜色、纹理构成区域的效果
色彩可变性的选择和组合，被用来区分UI元素，创造深度和立体感，增加重点和强调，还能帮助UI组织信息。色彩理论研究各种可变性如何对用户产生心理影响，色彩心理学则是其中一门重要的学科。色彩在客观上是对人们的一种刺激和象征，在主观上则是一种反应和行为。
色彩心理通过视觉开始，先经过人眼视锥细胞取色、视杆细胞取灰阶和景深，再从知觉、感情，到记忆、思想、意志、象征等，其反应与变化是极为复杂的。而色彩应用除了这些复杂度外，很重视视觉到感知的因果关系，即由对色彩经验的积累变成对色彩心理响应的范式：受到什么刺激后能产生什么反应。了解这些，前端工程师才能够从本质上掌握设计师的设计表达会对用户产生什么影响，从而摸清背后的设计意图。
研究色彩可变性时，前端工程师会发现在使用色彩时，RGB是其接触最多的颜色空间，分别用红色（R）、绿色（G）和蓝色（B）三个通道来表示色彩，有时还需要用到透明度（Alpha）通道，来使某些低层级内容能够透出。
RGB颜色空间利用三个颜色分量的线性组合来表示颜色，任何颜色都与这三个分量有关，而且这三个分量是高度相关的。RGB颜色空间是图像处理中最基本、最常用、与显示设备的颜色空间兼容性最好的，但RGB连续变换颜色时并不直观，想对图像的颜色进行调整需要同时更改这三个分量。
自然环境下获取的图像容易受自然光照、遮挡和阴影等情况的影响，因此，图像对亮度比较敏感（注意，这里指的不是Alpha通道的透明度，而是色彩亮度，如照片中高光、亮色部分）。而RGB颜色空间的三个分量都与亮度密切相关，即只要亮度改变，三个分量都会随之相应地改变，而没有一种更直观的方式来表达。
此外，人眼对于RGB三种颜色分量的敏感程度不尽相同。通常人眼对红色最不敏感，对蓝色最敏感，所以RGB颜色空间是一种均匀性较差的颜色空间，各通道调整结果与人眼视觉感受会有较大的偏差，因此，很难直接根据图像推测出较为精确的三个分量数值。
在图像处理中使用较多的是HSL颜色空间。HSL表示色相（Hue）、饱和度（Saturation）、亮度（Lightness），它比RGB更接近人眼对色彩的感知经验。HSL能非常直观地表达颜色的色调、鲜艳程度和明暗程度，方便进行颜色的对比。在HSL颜色空间下，更容易跟踪某种颜色的物体，方便UI重构忠实表达设计意图。
代码示例：
效果如图5-3所示。
图5-3 用HSLA表示色彩（A是Alpha通道，代表透明度）
质感是指物体表面被感知的时候，人的经验感觉。通过重复一个元素，就会产生一种质感，形成一种纹理。纹理能够让UI元素摆脱单调的色彩，产生特殊的质感。可以借助CSS纹理去模拟大理石、皮革、木材、金属等质感。
字体在UI设计中是指设计师选择哪种字体，同时规定它们的大小、排列、颜色和间距等。这些常规的概念在进行UI重构的过程中可谓驾轻就熟，但是，字体选择会对排版产生直接和深刻的影响，这是容易忽视的部分。如果不理解字体和排版之间的关系，只是按照设计师选择的字体进行代码的实现，在字符截断、换行等场景中进行UI重构时就容易出现排版和UI渲染错误。
在讨论排版问题时，通常遵循的是字体形状部件的属性，如升部、基线、降部、行距、X的高度（X-height）等，如图5-4所示。
图5-4 字体形状部件的属性
了解字体形状部件的属性后，还需要一些字体排版的原则，才能保证排版的美观。这些原则是由设计系统中的设计规范所提供的，以Material Design的规范为例。
❑4dp网格：无论pt/sp大小如何，文本的基线都必须位于4dp网格上，线高必须是可除以4的值才能维护网格。
❑基线测量：CSS或Sass会从字体的基线进行测量并自动计算行高等数值。
❑X的高度（X-height）：取决于X的值，周围留白可以让字体显示更清晰，有字母的UI重构尤其要注意。
❑上升下降属性：在行高紧密的情况下，笔画之间可能发生碰撞，需要对字体的上升下降属性中是否让字符碰撞边界进行测试。
由于设计师无法站在技术实现的角度去观察，难以发现UI重构的排版样式和UI渲染问题，因此，在字体选择的过程中，要对排版问题进行充分测试，出现问题及时与设计师一起协商解决。
形体适用于三维物体，描述其体积和质量，并允许其在三维空间中和用户交互（如AR、VR等）。形体可以通过组合两个或多个形状来创造，并可以通过不同的结构、贴图和颜色来进一步增强。随着WebXR等标准的完善和推广，前端也不可避免地邂逅AR、VR等三维场景，形体在日常工作中出现的概率急剧增加。在淘系技术中，前端工程师已经在天猫等业务场景中应用了全景视频、3D帧动画、AR交互等全新的商品展示形式，如图5-5所示。
图5-5 高精度3D模型交互界面
Web UI视觉设计的基本要素如图5-6所示，这些Web UI视觉设计基本要素背后，都有一些常用视觉设计原则的归纳，如层次感、焦点、韵味、呼吸、轻度留白、重度留白等。既然视觉设计原则会直接影响UI重构的方法和排版布局方式，理解视觉设计原则就成了UI重构高手的必由之路。下面介绍一些常见的视觉设计原则。
一个成功的视觉设计会将一些基本视觉设计原则应用到Web UI基本元素中，并将这些元素用视觉设计原则以一种合理的方式结合起来。当试图找出使用何种基本UI元素进行重构以及如何排版布局时，请务必参考这些设计原则，力求在UI重构的过程中遵守这些原则，忠实还原设计意图。
常见的视觉设计原则如下。
❑统一性：统一性能够建立页面元素之间的和谐感，让它们看起来属于同一个地方，让用户不会因为混乱的布局而分心。
❑格式塔：在视觉设计中，格式塔原则帮助用户感知整体设计，而不是单个元素。
❑层次：使用Z-index、位置、字号等来显示UI信息的层次感。
❑平衡：为UI信息创造一种平等分配的感觉。
❑对比：利用大小、颜色、方向等的差异来强调某些UI元素。
❑规模：通过展示每个项目如何根据大小相互关联来创造用户的兴趣和访问深度。
❑支配：以一个元素为焦点，其他元素为从属，利用物体的大小、颜色等使焦点突出。
❑相似性：在整个设计中创造连续性，而不直接重复。相似性是用来使各个部分在界面上共同工作的，帮助用户更快地学习、理解和使用界面。
❑空间：在设计中融入空间有助于减少噪音，增加可读性。留白是布局策略的重要组成部分。
图5-6 Web UI视觉设计的基本要素
视觉设计原则会应用于图5-6的Web UI视觉设计要素上，用于约束这些要素实际使用的方式和设计手法，最终限制UI可变性的范围。当然，这个范围还只是原则上的范围，具体使用时还是要看前端工程师应用了哪些原则。
前端工程师是互联网时代软件产品研发中离用户最近的角色，向上承接设计，向下服务用户，负责完整交付软件产品。狭义上，前端工程师使用HTML、CSS、JavaScript等专业技能将产品设计实现成Web产品，涵盖PC端及移动端的网页和应用，处理视觉和交互等问题。广义上，所有用户终端产品与视觉和交互有关的部分，都应当是前端工程师的专业领域。
前端要解决界面和交互问题，但界面问题一直是软件工程方面的难题，因为UI和相关技术变化太快。此外，浏览器各版本的兼容性、Web标准、移动设备、多终端跨平台适配等又给前端工程带来很大挑战，对前端工程师的能力也提出了更高的要求。许多UI和交互问题有不只一种解法，经前端工程师之手常有巧妙构思和精彩呈现。前端工程师是非常有创造力的一个群体，因为领域特性决定了前端需要更丰富的创造力和想象力。
早期的设计师使用GIMP对用户界面进行设计，后来使用Photoshop、Fireworks等设计软件进行这项工作，而今大多数UI设计师们都在使用Sketch、Figma等工具进行UI设计。UI设计与其他设计最大的区别就是UI设计师输出的并不是最终的作品，他们通常还要把自己的设计先交付给前端工程师，然后由前端工程师借助其丰富的创造力和想象力，针对UI设计和产品、交互设计进行开发并完成产品交付。
怎么设计乃至怎么输出设计会对前端工程师的产品交付过程产生重大影响，所以，面对设计交付的媒介——设计稿，前端工程师会遇到各种问题，最终被迫去学习设计工具，然后去切图。前端工程师也可以自己开发工具，按照设计稿自动构建界面，即利用D2C。可是，构建界面与设计师在使用Sketch或Figma来设计UI的思路南辕北辙，D2C能够解决一些交付效率问题，但还需要读者借助智能UI针对自己的使用场景进行优化。
此外，目前很多团队UI设计和前端工程师分别隶属于两个职能部门，这种情况造成了UI设计师不懂前端、前端工程师不懂设计的局面。而事实上，在UI设计和前端开发两个领域存在很多关系紧密乃至重叠的部分，对这些部分的理解深度会直接影响设计交付到软件交付的映射质量，同时影响对终端用户的交付的质量和用户体验。
对于前端工程师而言，一个Web应用主要由三大要素构建而成，即HTML、CSS和JavaScript。
1）HTML：HTML是Hyper Text Markup Language的缩写，它并不是一门编程语言，而是一种用来告知浏览器如何组织Web页面的标记语言，是构成Web世界的砖和瓦。HTML定义了网页内容的含义和结构，它由一系列HTML标记组成，这些标记包裹不同的内容，使其以W3C标准和具体浏览器实现所支持的方式呈现或者工作。
2）CSS：CSS是Cascading Style Sheets（层叠样式表）的缩写。和HTML类似，它也不是真正的编程语言，甚至不是标记语言，而是一种样式表语言，用来描述HTML或XML（包括SVG、MathML、XHTML之类的XML分支语言）文档的呈现。CSS解决了在屏幕、纸质、音视频等媒体上的元素应该如何被渲染的问题。
3）JavaScript：JavaScript是脚本编程语言，因此以往被称作JS脚本。它可以在网页上实现复杂的功能，让网页展现的不再是简单的静态信息，而是实时更新的内容，如交互式的地图、2D/3D动画、滚动播放的视频等。JavaScript解决了如何让Web鲜活起来的问题。
对于Web应用而言，HTML、CSS和JavaScript各司其职，其中HTML用来搭建骨架，由一系列的HTML标签元素来描述骨架的每个部件或内容。这个时候，它是没有任何美感的，仅仅是一篇普通的文档，只有给骨架加上相应的CSS才能有美感。虽然HTML和CSS的组合能让前端工程师构建出一个好看的Web应用，甚至能达到设计师所追求的UI效果，但这些都是静态的。如果希望Web应用具有灵魂——动态性和可操作性，那就需要使用JavaScript。从Web应用本身来看，JavaScript提供动态性（主要是条件渲染和样式变化）和可操作性（提供UI的触点并响应用户操作），把原本静态、独立的UI元素串成一条条用户路径，并且在路径的每个节点上完成UI逻辑、交互逻辑、业务逻辑。
回顾了设计、前端以及Web应用的交付过程，理解了UI是如何从设计师开始经过前端工程师加工并交付给用户的，我们回到如何释放构建Web应用的UI的可变性问题上。首先要做的是构建设计系统，原子设计理论就派上用场了。
原子设计是由Brad Frost最早提出的，被用于创建设计系统。类似化学中所有物质都是由原子组成的，原子结合成分子，分子组合形成更复杂的细胞、生物，设计系统也可以按照这种方式进行分层。原子设计理论拆分成5个层次：原子、分子、组织、模板、页面。
原子是网页最基础的组成部分，如表单标签、输入框、按钮等，也可以是抽象的元素，如色板、字体等。原子指化学反应不可再分的基本微粒，虽然是微粒，但会对分子乃至物体形成产生很大影响。同理，在设计中原子是构成设计的最基础元素，可以是一个图标、一种字体等本身不具备特有功能的元素。这些基础元素虽然基础，但是会对UI产生很大影响。
原子以特定的次序、结构和排列结合成分子。回到设计中，多个设计元素以特定的次序、结构和排列组合在一起，也会创造出具有明确功能的组件，比如将表单标签、输入框、按钮组合在一起构成表单。原子设计强大的地方在于，可以为分子的创造分配不同的原子，以确保结合具有明确的意义和功能。
不同的分子组合形成组织，在设计中各种不同的组件组合在一起，形成一个完整的功能模块，例如首页的轮播图模块，有图像、文字等元素，还有按钮、导航箭头等组件。利用组织这个概念能帮助设计师建立模块化意识并深入理解页面结构，帮助前端工程师准确布局。
将元素、组件和功能模块相互关联，可以得到产品模板，即产品框架。我们可以把产品框架看做产品的低保真线框图（wireframe）。在这个阶段，产品的信息架构和可视化的层次结构变得非常重要，它们决定了用户理解UI的路径和方式。这些信息架构和可视化层次结构不同，可以良好满足不同类型用户对UI感知、理解和使用的偏好。
页面是模板的特定实例，准确表达了最终用户看到的内容。在模板的基础上继续添加细节，最终会形成完整的页面，即产品的高保真原型，也是交付研发的设计交付物——设计稿。
把原子设计理论代入到Web应用研发，其对应的概念如下。
❑基础元素（Element）：可变、可配置的最小基础单元，比如按钮、输入框、文本、段落、图标等。
❑组件（Component）：表达一定功能语义的简单组件，比如搜索条、商品卡片、评分、筛选器等。
❑模块或区块（Module）：由基础组件构成的表达了完整业务语义的复杂区块，比如信息流、登录表单等。
❑页面（Page）：一个完整的页面。
❑应用（App）：一个完整的应用，在页面基础上加上路由等功能构成完整的用户路径。
原子设计理论的一切，都是为了给产品设计、研发效率和用户体验一致性提供帮助。同时，它们也是传达设计原则、设计意图，构成产品独特气质的基石。为了让上述的“设计基石”更统一，设计师一定会有一套设计规则（设计规范）。但令人遗憾的是，最熟悉这些规则的人大多是规则的制定者，其他设计师对规则的细节则不甚清楚，在业务中大多是通过组件的复制、样式的复制完成产品的设计（或者说是搭建产品设计）。
开发者对规范的理解成本则更高，在开发落地过程中主要依赖设计师和工程师线下沟通。针对沟通和理解成本的问题，一些前端工程师开始和设计师一起使用设计令牌。设计令牌很容易映射到前端组件样式上，还有大量的前端工程实践和开源项目作参考，因而迅速流行于设计和前端领域。
设计部分聊完了，接下来谈谈令牌。令牌是在网络编程中用户身份与服务器端进行校验的凭证。而在设计体系中，令牌则是具体设计与设计规范进行校验的凭证。利用好令牌进行前端工程化，将设计的样式代码进行语义化和编组，就可以轻松灵活地在不同需求场景下调用不同基础样式，同时，借助与设计规范进行校验来保证使用样式的正确性。具体的方法是：从最广泛的场景和语义开始定义全局变量，也就是元素或原子的样式，分子可引用若干原子来构成自己的基础样式语义，逐级往上构建场景中语义化的令牌体系。然后，在设计规范中对令牌在某一场景的某一语义下选取某个样式的范围进行具体定义，就完美地把设计和令牌结合在了一起，让它们共同为UI的可变性服务。
原子设计理论的落地，就是要打造一套可以根据用户偏好开关或配置进行整体的令牌样式替换的方案。例如当用户手机为夜览模式时，调整好元素的属性（如文本的颜色等），将页面或应用整体切换成夜览样式。设定好一系列基础的色板、色号、字体、字号，然后进行基础元素、组件的色板引用，再根据具体场景构建方案、页面或应用，就可以通过映射UI可变性到设计令牌的样式选择来实现整体的UI个性化方案。
在这种语义化命名规范的帮助下，只需要根据需求定义具体场景，逐级引用元素、组件、模块构建页面，并在其上应用设计令牌，再根据设计系统的约束生成新的实例化值，就能拥有一套智能化、自适应的设计系统来实现UI的可变性。这就是笔者追求的设计生产一体化方案。