菜单 关闭

视觉设计术语一manbetx官方网站手机版览表

通过 特蕾丝·费森登4月14日,二千零一十九

总结:视觉设计术语和简单定义的词汇表可以在成员具manbetx官方网站手机版有各种背景的混合团队中创建共同点。


视觉设计规定交manbetx官方网站手机版互元素在界面中的外观。它在很多方面影响用户体验;例如,它:

考虑到它的重要性,所有的U万博官manbetx官方网站手机版网manbetx下载X设计者(以及跨功能开发团队中的每个人)都应该至少对可视化设计有一个基线理解,并且共享一种公共语言。但即使是熟练的用户体验设计师也不总是精通万博官manbetx官方网站手机版网manbetx下载视觉设计,很少有团队能够创造出坚实的共同词汇。这种困难会导致数小时的来回沟通,无数不必要的修改,以及代价高昂的误解。相反地,良好的视觉设计沟通可以使网站或应用程序真正令人愉快和流线型的设计manbetx官方网站手机版迭代。

此备忘表可以为您的跨职能团队提供一个通用的可视化设计词汇表种子。manbetx官方网站手机版我们之所以选择这些术语,是因为它们要么最重要,要么最容易被误解。主题领域包括:

  • 绘图
  • 颜色
  • 视觉权重
  • 图像类型

为了帮助解释其中的一些定义,我要请我的同事帮忙,芬利:

芬利的照片,我的狗
我给我的狗拍的照片,芬利去年圣诞节。多好的孩子啊。

注意:我们使用这个短语视觉元素要素指的是图像,一页,或者一页或一幅图像的片段。

亮度:一个元素所具有的明暗色彩的平衡(不要与对比混淆,或图像中明暗颜色的密度。

当整体亮度增加时,所有颜色,前景和背景,更轻-也就是说,接近白色(完全轻盈)。当亮度降低时,所有颜色都更暗,更接近黑色(完全黑暗)。在任何视觉中操纵亮度都会影响区分细节的容易程度。如果某物太亮或太暗,视觉效果可能会被冲掉或很难看到。

四张狗照片,亮度从左到右增加
芬利的原图是在晚上拍摄的,照片很暗。当我们降低亮度时,细节变得更难看到。稍微增加亮度会使图像的颜色更亮,但也排除了一些细节,就像芬利耳朵的边缘(由每一帧中的粉红色箭头标识),在最亮的帧中融入背景。

界面亮度也会影响整体色调和品牌形象。以两家不同投资银行公司的这两个网站为例,布局相似的褶皱之上,但是有不同的英雄形象选择。更好的选择是更黑暗(低亮度)的英雄形象(除了女人的脸,其肤色导致更多对比,见下文)和稍亮的按钮,虽然WealthFront使用了更明亮的英雄图像(尽管由于存在粉彩,对比度较低,请参见下文)和带深色按钮的布局。图像的亮度和按钮的暗度最终会影响对比度(见下文)。

betterment.com和wealthfront.com的截图
改进网站(顶部)的特色是黑色英雄形象和黑色按钮,而“财富前线”网站(底部)则提供了一个带有黑色按钮的更亮的英雄形象。

对比度(也称为伽马):给定元素的明暗分量之间的差异

明暗色调的差异增加了视觉兴趣,使图像更强烈(或如某些人所说,“bold”或“POP.”)。对比度对于可读性很重要,有助于吸引观众对重要细节的注意。

四张狗照片从左到右对比度增加
稍微增加对比度会使阴影更加明显。对比度越小,图像越不清晰,更难区分细节。对比度增加太多会使图像部分太亮,这让人不舒服,特别是长时间的。

密度:给定区域或空间中可视元素的数量

高密度页面有时被称为“忙碌”或“拥挤”。低密度页面的组成部分很少(例如文本,颜色,或纹理),并使用负空间或空白(即没有内容的区域-见下文)。密度的定义适用于图像,页,并显示。包含很少组件的页面或显示通常被称为简单或极简(见下文)。

如果一个页面上的组件太少(甚至不保证有一个专门的页面),用户可能没有足够的信息线索自信地浏览那个页面。相反地,页面上的组件过多会导致感官过载,增加任务时间,或者人们忽略相关信息的可能性。一个页面或显示的密度和显示的数量之间总是存在权衡。交互成本认知负荷该页将导致或需要。

左:更密集的线框;右:密度较小的线框
左边的线框比右边的线框密度高,许多元素填充了页面上的空间,负空间更少。

双色调(意思是“两种色调”):仅由两种对比色的不同色调组成的颜色轮廓,没有其他颜色

为了获得双色调的资格,色调之间必须有足够的对比度,才能被认为是两种不同的颜色。例如,浅粉色和深粉色可以说是单调的,但不是双音,紫色和黄色是两种不同的颜色,将成为双音。

灰度级(也称为黑白):仅由黑白色调或灰色阴影组成的颜色轮廓,没有其他颜色

灰度是单色的(见下文)但并非所有的单色图像都是灰度的。

极少主义低密度美学风格其中,设计提供了实现某manbetx官方网站手机版种目的所需的最低限度的裸露组件。

极少主义可以应用于页面,图像,或者是一个manbetx官方网站手机版设计。虽然极简主义可能对某些观众有审美价值,它不一定能设计manbetx官方网站手机版易于使用(见上文密度)。

单色的(意思是,“单色”):仅由单一颜色的不同色调组成的颜色轮廓,没有其他颜色

与大众的看法相反,单色不仅是黑白的,单色图像不必是灰度的。它们可以是任何颜色,只要图像中的每种颜色都是该颜色的浅色或深色。

单色的,灰度级,以及狗照片的双色调版本
第一幅图像是单色的,并且是灰度的——使用的唯一颜色是不同的黑色阴影。第二幅图像是单色的,但这次是粉红色的。最后一张图片是双色调的-包括紫色和黑色的阴影。

负空间(也称为白色空间隔离):缺少文本的空间,绘图,或前景颜色

具有足够负空间的可视元素(如页面或图像)似乎不那么繁忙或拥挤。有些人将负空间称为元素之间的“呼吸空间”——在照片中或屏幕上的界面元素之间(见密度)。

注:虽然术语“空白”包括单词“白色”,但空白不一定是白色。例如,如果将白色方块置于绿色背景上,则不会被视为负空间。但是绿地是。然而,如果广场是绿色的,背景是白色的,那么广场周围的白色区域将被视为负空间。

Pixel:屏幕发出的微小光单位(即“图片元素”的缩写)

每个像素一次只能显示为一种颜色。为了进一步混淆事情,pixel一词(缩写为“px”)也用作网页尺寸的度量单位。因此,1-px元素实际上可以在高dpi屏幕上包含多个物理像素(屏幕上的实际发光点)。

饱和:任何给定元素中颜色的显示强度
这一术语也用于印刷品;字面意思是“填充过度”或“浸泡”。你可能听说过被称为“粗体”或“色彩鲜艳”的饱和图像。

高度饱和的元素很明亮,醒目的颜色,如霓虹绿,亮红色,或者电蓝,虽然不太饱和的元素有中性色调(接近黑色,白色的,或灰色)或柔和(或柔和)的颜色,如薄荷色,脸红,或长春花。

更饱和与不太饱和的颜色(较浅和较深)
随着饱和度的降低,颜色显得更中性,不那么强烈。

颜色强度影响可读性;如果文字太过饱和,会使眼睛疲劳。色彩强度也会影响品牌认知——强烈的色彩通常被视为“活泼”、“大胆”或“年轻”,而中性色则被视为“冷静”、“成熟”或“扎根”。

更饱和和不饱和版本的狗照片
随着饱和度的增加,颜色的强度增加。随着饱和度的降低,在图像没有除灰色之外的所有颜色之前,颜色颜色变得不那么鲜艳。

纹理:视觉元素的特定区域中的不同层

类似于织物的质地,其中包括编织纤维和放置在前景和背景中的物体,高纹理数字元素也有多层。在图像中,纹理可能是用阴影和角度创建的三维空间感,虽然界面可能使用重叠元素,如背景图像上的文本,或者一个3D按钮,上面有文字,以提供一种纹理感。纹理和深度有助于将视线引向重要的细节,并为设计设定基调。manbetx官方网站手机版

从小纹理到高纹理的三个矩形
在第一张图片上 左边 矩形没有纹理,只有一层(如果计算 文本阴影 效果)。在第二帧中, 纹理 增加了两层:添加到阴影文本后面的黄色矩形。在第三帧中, 纹理 再加上芬利的照片就更高了,它本身有层次。

视觉平衡: 当一个元素的所有组件都相似时视觉权重(见下文),每个元素与页面上的其他元素一样强(或弱)

对称平衡:类似的对象均匀分布在一个页面上,屏幕,或元素

不对称平衡:不同的对象,但在页面上分布的视觉权重相等,屏幕,或元素

左:对称平衡的线框;右:不对称平衡的线框
左侧的线框是对称平衡的,因为元素相似,并且均匀分布在页面的两个垂直部分。右边的线框是不对称平衡的,因为有些元素与页面另一侧的元素不同,但也有相似的视觉重量。例如,右上角的按钮(由红色箭头标识)小于左上角的按钮,但颜色较深,与页面背景对比度高,这增加了它的视觉重量,弥补了它的小尺寸。右上角的按钮在保持整体视觉平衡的同时吸引了人们的注意。图像和文本块不同,但在视觉权重上也保持平衡,因为文本高度密集,与低密度图像保持平衡。两种类型的块的大小也相同。

视觉权重: 与周围的事物相比,一个元素显得有多突出

元素的视觉权重越大,它越能吸引观众的眼球。重量通常受以下一个或多个视觉属性的影响:对比度,尺寸,密度,纹理,颜色,以及负空间。视觉属性越明显,视觉重量越大。

增加或减少某些元素的视觉重量有助于引导眼睛朝向设计中的高优先级细节。manbetx官方网站手机版

图像类型

光栅形象(也称为位图图像,包括JPG,.png或.gif文件):静态大小的图像,由像素组成(与向量见下文)

本质上,光栅图像是一组单独的彩色点,从正常视距,显示为单个图形。当放大或拉伸光栅图像时,像素更加清晰可见。

光栅图像可以是许多不同的文件类型之一,但是,在特定的上下文中,某些文件类型的性能要优于其他类型。在UI设计中manbetx官方网站手机版,例如:

  • .png文件启用透明度,而.jpeg/.jpg不启用透明度
  • .jpg文件通常更小,加载速度更快;然而,当缩放时,图像质量也可能降低。

矢量图像(包括.svg文件):可以轻松缩放而不丢失准确性或修改的图像,因为该文件包含图像中每个形状的数学计算。

这些通常用于非照片的图像,如逻各斯,图标,图表,或其他图形。

光栅图像与矢量图像
(上)放大光栅版本上字母“G”的上半部分会使图像模糊或像素化。(底部)放大矢量版本的图像可以保留图像质量,因为图像可以根据文件中的方程式无限缩放。

结论

使用这个术语摘要表来帮助你的团队解开视觉设计和语言交流的神秘面纱。manbetx官方网站手机版减少花在误解上的时间和修改,并在设计过程中填补空白。manbetx官方网站手机版

工具书类

韦氏字典,“饱和度(定义)”。(链接

德克萨斯大学“多媒体系统(模块1第2课)”。(链接

phototraces.com网站,灰度等级vs.黑白对比单色:差异解释了“,(链接

技术术语,“像素(定义)”。(链接