视觉细节像字体,颜色和对齐等创建可用的体验和表达brand traits(such as friendliness or reliability).

很容易看到一个设计,并注意到它看起来不错。通常很难精确定位为什么看上去不错。在本文中,我们分析了三个用户界面设计并讨论了视觉 -设计原则that make them attractive.

例1:排版和间距

我们的第一个例子是媒体. 这种设计利用了网格、空白和排版系统来创造一种舒适而美丽的阅读体验。

媒体的设计很简单,但很吸引人。深思熟虑的排版系统、间距和一致的左对齐方式使用户易于阅读,而附加信息则显示在具有视觉凝聚力的侧边栏中。
该设计使用3列网格。每个文本元素都对齐于网格线。在左侧栏中的图标之间使用一致的填充单元(垂直的白色空间分离元件),而双倍相同的单元用于分开 分组 . Small caps differentiate theW.RITTEN BY标题和额外宽敞的领先使设计感到通风且易于消费。

与网格对齐. To start, there is a column grid (the pink lines in the image above). A column grid provides vertical anchoring lines to which objects are aligned. Because the sidebar content is left aligned to the leftmost grid line, the design looks crisp and the sidebar content is easy to scan. The article text is also left aligned to a column grid line.

在您的设计中,设置列网格并保持对齐在不同的页面和元素上一致。任何对齐不一致都应该是有目的的 - 定义明确的规则来指导您(并记住左对齐支持扫描性).

排版方差。介质使用不同类型的样式字体系列(小帽,粗体,斜体,下划线)和颜色(黑色与灰色)的微小变化,以区分不同类型的内容。虽然太多的繁多会破坏一致性并进行设计看起来,但媒体的变体始终如一地应用。例如,小帽子W.RITTEN BY表明它是一个部分标题。这种方差保持设计平放的感觉,但仍然对其余文本感到凝聚力。作为拇指的规则,识别印刷系统并将您的设计限制为1-2字体;始终使用相同类型的变体(斜体,粗体,小帽)以获得相同的目的(甚至跨越界面的网页)。

文本行之间的额外空间。领导,即段落类型的每行基线之间的距离,从默认间距(通常比字体大小大2倍)略微增加。在本例中,前导字符比字体大小大4–6像素,有助于创建一个轻松且开放的文本块。减少标准行间距会导致上升和下降之间不舒服的碰撞,以及密集的读取。如果有几个段落的文本,可以考虑增加默认的+2px前导,否则可能会感觉视觉上很密集和沉重。

紧排和跟踪调整。设计师还考虑了由于其特定形状而导致的封面形式之间的尴尬间距。Kerning和跟踪通常适用于更大的类型,如头条新闻,其中空间更加明显。通常在形成角度的字母周围发生间隙,例如w,y,v或t。例如,在标题中日本的运动是什么样的,字母之间的间距W.H在这个词W.Hat已经被稍微压缩了。虽然大多数字体家族都会自动调整字距(它内置于字体样式中),但对于字母间距明显的大标题或徽标,可以考虑手动调整字距。

统称,这些设计细节使设计美观,同时实现网页的主要目的 - 很容易读取。

Example 2: Hierarchy and Color

我们的第二个例子来自ritual.com.,一家维生素公司。这种设计使用层次、颜色和图像来创造一种有吸引力的视觉体验。

仪式的设计利用比例和颜色来创建页面层次结构。
This design centers content on 3 anchor lines. Each product’s title, image, description, and button are centered around one of the lines. The color palette is limited — made of primary blue and yellow. This type of palette allows for a clear contrast between content (which is blue) and calls to action (which are yellow).

精致的调色板。调色板仅限于两种基本颜色:蓝色和黄色,经典互补色s。所选的特定蓝色和黄色为设计的吸引力有助于 - 黄色不是太亮,蓝色足以在白色背景上读取。如果黄色和蓝色是主要的CMYK颜色(青色和荧光笔 - 黄色),那么设计就不会像它一样复杂(更像是90年代初的网站设计)。选择设计颜色色调时,创建调色板和迭代 - 切换和出不同颜色,以查看有什么看起来在一起。远离任何与荧光笔一样类似的东西。从原色颜色稍微调整颜色将优化您的颜色选择。例如,上面的屏幕截图已被改变(下面)以演示如果使用原色颜色,则设计设计的样子。

如果使用了主色调色板而不是原始的更饱和的调色板,则此更改的图像演示了该设计的样子。设计不仅看起来不那么精致,但黄色按钮更难阅读。

W.e like to useAdobe颜色for color palette inspiration. If you like the colors on another website, try to pinpoint why — is it the specific color combination, the tones, or the saturation levels? By limiting the color palette to a few colors, you provide focus to the design, as there are few elements to consider (and, thus, fewer distractions). The design will create a stronger brand representation.

Clear visual hierarchy.视觉的等级制度指导眼睛并发出重要的页面元素。在这个例子中,首先将眼睛绘制到最大的印刷元素,大标题“必不可少的forW.omen,用户可以快速、简洁地了解页面内容。然后我们的注意力转移到黄色的图像上添加到购物车按钮。

注意标题中的混合排版处理:“必不可少的对女性来说,”which想必是为了强调产品的重要性和为女性定制的事实。

在您自己的设计中,在混合类型处理时,请务必:

  1. 在单个标题中使用最多两种不同的字体处理。(通过字体处理,我们的意思是常规,斜体和多重的粗体,每个都有一个斜体变体)。使用粗体或下划线,以获得最重要的单词和次级单词的斜体。更少的是 - 例如,如果“女性”也强调,设计将看起来偶然。它将与“必要”和扰乱阅读等级的大胆处理竞争。
  2. 保持页面样式一致。由于“基本”在本标题中用黑体字表示,因此应在“基本”上用黑体字表示必不可少的sfor Men“类别着陆页。

阅读标题后,我们的注意力转移到大型产品图像和黄色添加到购物车按钮。

使用高品质的图像。意像可以将有价值的信息添加到产品描述中。照片的直接风格,没有额外的混乱来分散产品,影响整体视觉设计。图像背景与产品的背景无缝混合卡片in which they appear and make the page look sophisticated. The photos in your design should help users visually understand the product or concept instead of being there just for decoration. To elevate your design, allow your images to blend in with the rest of the design by matching their background color with the background color of their surrounding space.

示例3:一致性

我们的第三个例子来自Spotify.mobile app. This design effectively uses consistency in visual treatment to create a cohesive listening experience across the app.

Spotify应用程序使用自定义图片、颜色和间距的一致性,在保持应用程序多个区域的清晰性的同时,创建凝聚力。
视觉的consistency is the primary contributor to Spotify’s polished look. There is alignment, typography, and padding consistency, as well as genre-artwork consistency. The one exception to this consistency is the spacing between流行播放列表和下面的瓷砖(中间的屏幕),这不匹配之间的间距经典摇滚和下面的瓷砖(右屏幕)。理想情况下,间距也应该在这两个地方一致。间距清楚地建立了分组,而颜色区分类型。

一致的视觉治疗。A design will look unprofessional and lack polish when visual elements are used inconsistently or sporadically. In Spotify, many visual elements remain consistent across different areas of the app. First, the spacing between columns (the left and right gutters) are all the same size, across all app screens. More, within genres, the top grid lines (and, thus, the alignment and positioning of the headers at the top of the screens) and the typographic treatment remain consistent. While the gradient color changes from genre to genre, it retains a consistent hue and saturation.

Second, each category has a tile with custom artwork. Although each category has a specific color and graphic, the tiles are consistent in layout and hierarchy. For example, the name of each category (e.g.,流行、摇滚、教育Search屏幕)位于每个磁贴上的相同位置。磁贴中的图像(即专辑封面艺术)始终位于右侧,从磁贴上渗出。这些细节使整体设计有凝聚力和抛光的感觉。

In your designs, you should aim to create a visual system and stick to it throughout different areas of the experience. For example, make the interelement spacing around your webpage be the same or a multiple of the same unit (e.g., if the base spacing between heading and body is 5px, 2 base-spacing units could be used to separate different sections, and so on).

创建分组的空间。Proximity,或元素周围的间距有助于建立群体。在我们的示例中,内容图块之间的最小空间你的顶级流派流行音乐岩石) signals that they belong together, while教育的真正的犯罪属于流行音乐ularpodcast类别. 在设计中创建分组时,在标题及其内容之间使用较少的空间,在分组之间使用较多的空间。

结论

设计不是偶然的。设计中的每一个决定都应该是有意图的,最好有一个视觉设计系统来支持。虽然没有一件事可以解释一个设计是否好看,但遵循几个原则会增加它好看的可能性:

  • 将排版(和其他图形元素)对齐到网格。Anchor each element to a line in your grid system.
  • 建立清晰的层次结构和调色板。决定什么是你的设计中最重要的,并有意识地应用一个特定的视觉处理(大小,颜色,位置),让用户看到它第一。
  • 保持一致。Define clear visual rules and apply them consistently throughout your design.

It is the application of these design principles that collectively make a design beautiful and contribute to a usable experience.