视觉设计规定了交互元素在界面中的外观。它在很多方面影响着用户体验;例如,它:
考虑到视觉设计的重要性，所有用户体验设计师(以及跨功能开发团队中的每个人)都应该至少对视觉设计有基本的了解，并拥有共同的语言。但即使是熟练的用户体验设计师也并不总是精通视觉设计，很少有团队能够创建一个可靠的通用词汇表。这种困难可能会导致数小时的反复沟通、无数不必要的修改和代价高昂的误解。相反，良好的视觉设计沟通可以使一个网站或应用程序真正令人愉快，并简化设计迭代。
此备忘单可以为您的跨职能团队播下通用视觉设计词汇表的种子。我们选择这组术语是因为它们要么是最重要的，要么是最容易被误解的。主题范围包括:
- 图形
- 颜色
- 视觉重量
- 类型的图片
为了解释这些定义，我将请我的同事芬利帮忙:
注意:我们使用短语视觉元素或者元素指一幅图像、一页或一页或一幅图像的片段。
亮度:元素具有的光或暗颜色的平衡（不与对比度混淆，见下文）或图像内的光密度或深色或深色
当整体亮度增加时，所有的颜色，前景和背景，都变得更亮——也就是说，更接近白色(完全亮度)。当亮度降低时，所有颜色都变得更暗，更接近黑色(完全黑暗)。在任何视觉上操纵亮度都会影响分辨细节的容易程度。如果某物太亮或太暗，视觉可能会被洗掉或很难看到。
界面的亮度也会影响整体色调和品牌标识。以两家不同投资银行的网站为例，它们有着相似的布局在褶皱，但具有不同的英雄图像选择。改善选择更暗（低亮度）英雄形象（除了女人的脸上，其肤色的肤色成果更多对比而Wealthfront则使用了更亮的英雄形象(尽管由于使用了粉彩，对比度较低，参见下图)，并且布局中使用了深色的按钮。图像的亮度和按钮的黑暗最终会影响对比度(见下文)。
对比（也称为γ):某一给定元素的明暗成分之间的差别
明暗色调的差异增加了视觉趣味性，使图像更强烈(或有人说，“大胆”或“流行”)。对比对于可读性来说很重要，可以帮助把观众的注意力吸引到重要的细节上。
密度:在给定的区域或空间中视觉元素的数量
高密度页面有时被称为“繁忙”或“拥挤”。低密度页面有很少的组成部分(例如文本、颜色或纹理)，并使用负空间或空白(即没有内容的区域，见下文)。密度的定义适用于图像、页面和显示。包含很少组件的页面或显示通常被称为简单或极简(见下文)。
如果页面上的组件太少(甚至可能不需要专门的页面)，用户可能没有足够的组件信息的气味自信地浏览页面。相反，页面上太多的组件会导致感觉过载，增加任务时间或人们忽略相关信息的机会。页面或显示的密集程度和密集程度之间总是存在权衡交互成本或者认知负荷该页面将导致或要求。
双色版（意为“两个色调”）：颜色型材仅包括两个对比颜色的不同阴影，没有其他颜色
为了有资格作为双向通道，他们之间必须有足够的对比，因为它们是两种不同颜色的色调。例如，浅粉红色和暗粉色将有资格作为单调，但不是双单位，而紫色和黄色是两种不同的颜色，并将有资格成为双龙。
灰度（也称为黑色和白色):只有黑白色调或深浅灰色组成的颜色配置文件，没有其他颜色
灰度就是一个例子单色(见下文)，但并不是所有的单色图像都是灰度的。
极简主义：一种低密度的美学风格在这种情况下，设计提供了满足某些目的所需的最低限度的组件
极简主义可以应用于页面、图像或设计。虽然极简主义可能对一些观众有审美价值，它不一定要做设计易于使用的密度(见上图)。
单色(意思是“单一颜色”):只由单一颜色的不同深浅组成的颜色配置文件，没有其他颜色存在
与流行的观念相反，单色不仅仅是黑白的，而且单色图像不一定是灰度的。它们可以是任何颜色，只要图像中的每一种颜色都是该颜色的浅或深阴影。
负空间（也称为空白或者隔离）：缺乏文本，图形或前景颜色的空间
有足够负空间的视觉元素(如页面或图像)看起来就不会那么拥挤。有些人将负空间称为元素之间的“呼吸空间”——无论是在一张照片中还是屏幕上的界面元素之间(参见密度)。
注意:虽然术语空白包括“白色”这个词，但负空白并不一定是白色的。例如，如果放置在绿色背景上，白色正方形就不会被认为是负空间，但绿色区域就会被认为是负空间。但是，如果正方形是绿色的，背景是白色的，那么正方形周围的白色区域就被认为是负空间。
像素:从屏幕上发出的微小的光单位(“图像元素”的缩写)
每个像素一次只能显示为一种颜色。更让人困惑的是，像素这个词(缩写为px)还被用作网页大小的度量单位。因此，在高dpi屏幕上，一个1像素元素实际上可以包含多个物理像素(屏幕上实际发光点)。
饱和度:颜色在任何给定元素中出现的强度有多大
该术语也用于印刷;字面意思是“填补过度”或“浸泡”。您可能已经听到了称为“粗体”或“颜色充满活力”的饱和图像。
高度饱和的元素具有明亮，大胆的颜色，如霓虹灯绿色，鲜红色或电动蓝色，而较少的饱和元素具有中性色调（更接近黑色，白色或灰色）或柔和（或柔和）颜色，如薄荷，腮红或荔枝螺。
颜色强度影响可读性;如果文字饱和度太高，会使眼睛疲劳。色彩的强度也会影响品牌的感知——强烈的颜色通常被认为是“活泼”、“大胆”或“年轻”，而中性的颜色往往被认为是“冷静”、“成熟”或“接地气”。
材质:在视觉元素的给定区域内的不同层
类似于织物纹理，包括编织纤维和放置在前景和背景中的物体，高纹理的数字元素也有多层。在图像中，纹理可能是由阴影和角度创建的三维空间感，而界面可能使用重叠元素，如背景图像顶部的文本，或带有文本的3D按钮，以提供纹理感。纹理和深度有助于将人们的目光吸引到重要的细节上，并为设计定下基调。
视觉平衡：当一个元素的所有成分都有相似的时候视觉重量(见下文)，每个元素与页面上的其他元素一样强(或弱)
对称的平衡:类似的对象均匀分布在页面、屏幕或元素中
不对称的平衡:不同的对象，但视觉权重相同，分布在页面、屏幕或元素上
视觉重量：一个元素与它周围的一切相比显得有多突出
元素的视觉权重越大，就越能吸引观众的眼球。权重通常受以下一个或多个视觉属性的影响:对比度、大小、密度、纹理、颜色和负空间。视觉属性越明显，视觉权重就越大。
增加或减少某些元素的视觉重量可以帮助将眼睛引导到设计中的高优先级细节。
类型的图片
光栅图像(也称为位图图像，包括.JPG、.PNG或.GIF文件):大小是静态的，由像素组成的图像(相对于vectors.(见下文)
从本质上说，一个光栅图像是一个单独的彩色点的集合，从正常的观察距离，显示为一个单一的图形。当光栅图像被放大或拉伸时，像素会更清晰可见。
光栅图像可以是许多不同的文件类型之一，但是某些文件类型在特定的上下文中比其他文件类型表现得更好。例如，在UI设计中:
- .png文件启用了透明度，而.jpeg/.jpg则没有
- .jpg文件通常可以较小，更快地加载;但是，图像质量也可能在缩放时降低
矢量图(包括.SVG文件):可以轻松缩放的图像，而不会损失准确性或修改，因为该文件包含图像中每个形状的数学计算
这些通常用于非照片的图像，如徽标、图标、图表或其他图形。
结论
使用这些术语来帮助你的团队揭开视觉设计的神秘面纱，以及传达它的语言。减少花费在误解上的时间和修改，并在设计过程中消除隔阂。
参考
韦氏词典，饱和(定义)（关联）
德克萨斯大学多媒体系统(模块1第二课)（关联）
“灰度vs.黑白vs.单色:差异的解释”(关联）
技术术语“像素（定义）”（关联）
分享这篇文章: