莫b

视觉美学设计使用一致的版式,建立清晰的层次结构,使用精致的调色板并与网格对齐。诸如字体,颜色和对齐方式之类的视觉细节创造了一种可用的体验,并表达了品牌特征(例如友好性或可靠性)。

正文 

查看设计很容易,发现它看起来不错。查明为什么看起来不错通常要困难得多。在本文中,我们分析了三种用户界面设计,并讨论了使它们具有吸引力的视觉设计原理。 

 

 一  排版和间距 

我们的第一个示例来自Medium.com。该设计利用网格,空白区域和版式系统来创建舒适而美丽的阅读体验。

图片

Medium的设计很简单,但很吸引人。周到的排版系统,间距和一致的左对齐使用户易于阅读,同时在视觉上具有凝聚力的侧边栏中显示了其他信息。

图片

该设计使用3列网格。每个文本元素都与一条网格线对齐。左侧边栏中的图标之间使用一致的填充单位(垂直的空白分隔元素),而相同的单位的两倍用于分隔分组。小写字母区别了WRITTEN BY标题,超大空间的领先设计使设计显得通风且易于使用。

 

1.1. 对齐网格。

首先,有一个列网格(上图中的粉红色线)。柱状网格提供了与对象对齐的垂直锚定线。由于侧边栏内容保持与最左边的网格线对齐,因此设计看起来清晰,并且侧边栏内容易于扫描。文章文本也保持与列网格线对齐。
在设计中,设置一个列网格,并使不同页面和元素之间的对齐方式保持一致。任何对齐不一致都应该是有目的的-定义清晰的规则来指导自己(并记住左对齐支持可扫描性)

 

1.2. 文本行之间的多余空间。

中号使用同一字体家族中的不同字体样式(小写,粗体,斜体,带下划线的字体)和轻微的颜色变化(黑色与灰色)以区分不同类型的内容。虽然太多的变化会破坏一致性并使外观看起来杂乱无章,但Medium的变体却始终如一地并有目的地应用。例如,WRITTEN BY中的小写字母表示它是节标题。这种差异使设计无法感觉平整,但仍与文本的其余部分保持内聚。根据经验,确定一个印刷系统并将你的设计限制为1-2种字体。始终出于相同目的(即使是跨网页或界面区域)使用相同类型的变体(斜体,粗体,小写)

 

1.3. 印刷差异。

这是段类型的每一行的基线之间的距离,稍微从默认间隔增加(其通常2px的大于字体大小)。在这种情况下,前导字符比字体大小大4–6px,有助于创建通风且开放的文本块。减小标准行距将导致上升和下降之间的不舒服碰撞以及密集的读取。如果你有多个文本段落,请考虑增加默认的+ 2px前导,否则可能会感到视觉上的密集和沉重。

 

1.4. 紧缩和跟踪调整。

设计师还考虑了字母形状之间因特殊形状而造成的尴尬间距。字距调整和跟踪通常应用于较大的类型,例如标题,其中的空格更明显。通常在形成一个角度的字母(例如W,Y,V或T)周围会出现空白。例如,在标题“日本的锻炼方式”中,单词“ What”中的字母W和h之间的间距已略微压缩。虽然大多数字体系列会自动调整字距调整(它已内置在字体样式中),但是请考虑手动调整字距明显的大标题或徽标的字距调整。

总的来说,这些设计细节使设计更美观,同时实现了网页的主要目的-易于阅读。

 

 二  层次结构和颜色 

我们的第二个示例来自维生素公司Ritual.com。该设计使用层次结构,颜色和图像来创建引人入胜的视觉体验。

图片

Ritual的设计利用比例和颜色创建页面层次结构。

图片

此设计将内容集中在3条锚线上。每个产品的标题,图像,描述和按钮都围绕其中一行。调色板是有限的-由蓝色和黄色为主色。这种类型的调色板可以使内容(蓝色)和号召性用语(黄色)之间形成鲜明的对比。  

 

2.1. 精致的调色板。

调色板仅限于两种基本颜色:蓝色和黄色,经典的补色s。选择的特定蓝色和黄色有助于提高设计的吸引力-黄色不太亮,蓝色足够黑,无法在白色背景上阅读。如果黄色和蓝色是CMYK的主要颜色(青色和荧光笔黄色),则外观将不像它那样复杂(并且更像是90年代初的网站设计)。为设计选择颜色阴影时,请创建调色板并进行迭代-切入和切入不同的颜色,以共同查看看起来不错的颜色。远离任何与荧光笔相似的地方。仅从原色稍微调整颜色会优化你的颜色选择。例如,上面的屏幕截图已进行了更改(下图),以演示如果使用了原色,则设计的外观。 

图片

更改后的图像演示了如果使用原色调色板而不是原始的更饱和的调色板,设计将是什么样。设计不仅看起来不太精致,而且黄色按钮变得更难以阅读。

我们喜欢使用Adobe Color来激发调色板的灵感。如果您喜欢其他网站上的颜色,请尝试查明原因-是特定的颜色组合,色调还是饱和度级别?通过将调色板限制为几种颜色,你可以将注意力集中在设计上,因为要考虑的元素很少(因此,分散的注意力也更少)。该设计将创建更强大的品牌形象。

 

2.2. 清晰的视觉层次。

视觉层次结构引导眼睛并发出重要的页面元素信号。在这个例子中,眼睛首先吸引到最大的排版元素,大标题为“基本为女性这给用户的页面内容的快速,简洁的概述,”。然后,我们的注意力转移到了黄色图像和“添加到购物车”按钮上。  
注意在标题中的混合排版处理:“基本 为女性,”这 大概是努力强调产品的重要性以及他们定制的妇女的事实。  
在你自己的设计中,进行混合型处理时,请确保: 
#. 在一个标题中最多可以使用两种不同的字体处理方式。(通过字体处理,我们指的是规则粗体,斜体和粗体,每个粗体都有斜体)。对于最重要的单词,请使用粗体或下划线,对于次要的单词,请使用斜体。少即是多-例如,如果还强调了“女性”,则该设计将显得杂乱无章。它会与“基本”的大胆对待竞争,并破坏阅读层次。
#. 使页面之间的样式保持一致。由于“基本”在此标题中为粗体,因此应在“男士必备 品”类别登录页面上以粗体显示。
阅读标题后,我们的注意力转移到了较大的产品图片和黄色的“添加到购物车”按钮上。 

 

2.3. 使用高质量的图像。

图像可以将有价值的信息添加到产品说明中。照片的直接风格,没有多余的杂物分散产品的注意力,也影响了整体视觉设计。图像背景与出现的产品卡背景无缝融合,使页面看起来更加精致。设计中的照片应帮助用户从视觉上理解产品或概念,而不仅仅是在装饰中。要提升您的设计,请通过将图像的背景色与周围空间的背景色进行匹配,使图像与设计的其余部分融合在一起。 

 

 三  排版和间距 

我们的第三个示例来自Spotify移动应用程序。该设计有效地利用了视觉处理的一致性,从而在整个应用程序中创建了凝聚力的聆听体验。 

图片

Spotify应用程序在自定义图稿,颜色和间距中使用一致性,以在应用程序的多个区域中创建凝聚力,同时保持清晰度。

图片

视觉一致性是Spotify优美外观的主要原因。有对齐,版式和填充一致性,以及体裁和艺术品的一致性。这种一致性的一个例外是“流行”播放列表和下面的图块(中间屏幕)之间的间距,与Classic Rock和下面的图块(右屏幕)之间的间距不匹配。理想情况下,这两个位置的间距也应保持一致。间距清楚地确定了分组,而颜色则根据流派进行区分。

 

3.1. 一致的视觉处理。

当视觉元素不一致或偶发地使用时,设计看起来会显得不专业,并且缺乏光泽。在Spotify中,许多视觉元素在应用程序的不同区域保持一致。首先,在所有应用程序屏幕上,列之间的间距(左右装订线)的大小均相同。此外,在流派中,顶部网格线(以及标题在屏幕顶部的对齐和定位)和版式处理保持一致。尽管渐变颜色随类型的变化而变化,但它保留了一致的色相和饱和度。其次,每个类别都有一个带有自定义图稿的图块。尽管每个类别都有特定的颜色和图形,但图块的布局和层次结构是一致的。例如,每个类别的名称(例如,“搜索”屏幕上的“流行”,“摇滚”,“教育” )在每个图块上都位于相同位置。磁贴中的图像(即专辑封面)始终在右侧,从磁贴上渗出。这些细节使整体设计具有凝聚力和抛光感。在你的设计中,你应该致力于创建视觉系统,并在整个体验的各个方面坚持下去。例如,使网页周围的元素间距相同或是同一单位的倍数(例如,如果标题和正文之间的基本间距为5px,则可以使用2个基本间距单位来分隔不同的部分,依此类推)。

 

3.2. 创建分组的空间。

邻近度或元素周围的间距有助于建立组。在我们的示例中,您的流派(流行和摇滚)中的内容块之间的最小空间表示它们属于同一类,而教育类和《真正犯罪》则属于“流行 播客” 类别。在设计中创建分组时,请在标头及其内容之间使用更少的空间,并在组之间使用更多的空间。

 

 四  总结要点 

设计看起来并非偶然。设计中的每个决定都应有意识地做出,最好由视觉设计系统提供支持。尽管没有一件事可以解释设计是否美观,但遵循一些原则会增加设计的可能性: 
#. 将排版(和其他图形元素)与网格对齐。将每个元素固定到网格系统中的一行。 
#. 建立清晰的层次结构和调色板。确定设计中最重要的内容,并有意对其进行特定的视觉处理(大小,颜色,位置),以便用户首先看到它。  
#. 保持一致。定义清晰的视觉规则,并在整个设计中一致地应用它们。 
正是这些设计原则的应用共同使设计变得美观,并为可用的体验做出了贡献。

 

原文地址:UI范(公众号)
作者:范范之道
图片

转载请注明:学UI网 » 为什么你的设计看起来不错?

登录收藏
 
你可能喜欢的:
设计的「七宗罪」设计的「七宗罪」
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
设计师如何高效沟通需求设计师如何高效沟通需求
原来大厂都是这样去做规范的,太强了!原来大厂都是这样去做规范的,太强了!
进不去大厂的设计师,如何在逆境中成长?进不去大厂的设计师,如何在逆境中成长?
工作经验| B 端产品组件设计细节及经验分享(二)工作经验| B 端产品组件设计细节及经验分享(二)
工作经验| B 端产品组件设计细节及经验分享(一)工作经验| B 端产品组件设计细节及经验分享(一)
辛辛苦苦做的设计,被人说没质感,结果两招就搞定了!辛辛苦苦做的设计,被人说没质感,结果两招就搞定了!