header_v1.7.40

视觉构成四要素(上)——布局Layout/字体Typography

70天前发布

原创文章 / 多领域 / 观点
若明似暗 原创,如需商业用途或转载请与若明似暗联系,谢谢配合。

随着视觉设计的行业演变,越来越多的人从事起视觉设计,品牌设计的工作。这背后,是哪些设计原则启发我们作出【更好】的设计。


前言

随着视觉设计的行业演变,越来越多的人从事起UI设计,视觉设计,品牌设计的工作。在这背后,又是哪些设计原则启发我们作出【更好】的设计,结合我的学习与探索,整理视觉构成四要素系列。从布局,字体,色彩,图形四大方面为大家解读是哪些原则影响着用户对我们设计的判断,又是哪些因素改变了体验的感受。

在正文开始之前,向Material Design,Atlassian , Ant Design,Teambition的设计团队致敬,踩在巨人的肩膀上让我们探索真理的路途更近。


*本文内容3959字,将介绍布局和字体两部分内容。文中部分图片源自网络,个人观点,如有偏颇,欢迎指正。



布局 Layout

界面中空间的应用传递给用户不同的心理感受,这里空间应用即是我们所说的布局。精巧的布局能力是平面设计在书籍装帧时代的基础,它能给用户传达出来一种高级感与信任感,让用户感受到不知道为什么好但就是很好的感受,比如我们常闻其名的《设计中的设计》就传递着日式设计一贯的简约与节奏感。这就是布局所影响的设计体验。

 

布局知识中,包含如下几个部分:

 

1.栅格:通过分列将页面划分为相同宽度的N列,并设定装订线,使页面风格统一工整。根据不同的屏幕尺寸情况,调整栏的宽度等比例变化来实现响应式的布局。

2.间距:页面内栅格间、模块间、模块内的各内容的距离

3.版面率:页面中内容所占页面的比例,即页面的利用率,不同的版面率反应出不同的视觉情绪。

 

栅格

建立栅格系统

栅格系统由三个元素组成:列,装订线和边距

undefined


1.列Columns 2.装订线Gutters 3.边距Margins (图片内容源自Google Material Design)

 

栅格自书籍装帧设计出现就广泛的被设计师所应用,设计师将先设置出血将版面划分为版心与留白,再将版心划分为N列,每一列之间通过装订线宽度划分列间距,就将版面划分成了结构性和连贯性的一个个面。栅格体系的建立,便于设定模块的大小,且使模块之间具有连贯性,使内容更具有节奏感从而提升用户的阅读效率。

undefined

栅格还有助于进行跨平台和分辨率的响应式设计,通过对列间距的变化,或对列与列间距的等比例缩放来实现在不同分辨率下的统一视觉效果(这种系统被称为流式栅格系统)。

 

较为重要的一点,无论是怎样的栅格体系,一定是从列开始,到列结束,并且在绝大多数情况下,栅格体系中一定要设置边距padding,来让版面集中。

 

流式栅格系统

undefined

图例为Atlassian的流式栅格布局方法

 

1.全局导航:最小宽度为60px。

2.功能性导航:最小宽度为240px。

3.内容区域:自适应宽度

4.装订线:固定列之间的间距。

5.列:内容对齐的依据。

 

流式栅格指在不同的分辨率下,列数恒定,列宽和列间距自适应改变的栅格体系,举例说明:


常见的laptop设备宽度分辨率为1240px,我们设此时的内容区域宽度为1136px,分12列,此时列宽设为80px,装订线宽度为16px,边距为52px。

当分辨率缩小时,边距不随之缩小,内容区域自适应变化,则当分辨率为956px时,内容区域的宽度为852px,列宽为60px,装订线宽度为12px。

需要注意的是,设计流式栅格布局时,需要设置断点,若装订线宽度小于一个特定值,则会导致内容容器之间形成粘连,无法有效的进行阅读和使用。

 

文本内容布局

中文阅读效率最高每行为42个汉字,以42加减12来得到最大值和最小值。如果正文字号为14px,则文本跨越8列为文本内容的最大宽度;文本跨越4列为文本内容的最小宽度。


间距

递进式间距组合

在Material Design中,所有间距规则都是在8的倍数上进行变化,而且并不是毫无头绪的递进,只定义了几种增量关系,克制的有序的间距弹性,基础单位是8,演变出16,24,32,48,56,72。从而我们可以得到这个递进式间距数列为1,2,3,4,6,7,9,是结合用户研究经验得出的一组间距。

 

同时我们在这里介绍几种间距组合的定义方法,分别是应用等差、等比、斐波那契数列作为变换规则,设定4/8px为恒定基础单位(因为正文为14px的英文x-height为8px)得出的不同间距组合。如下图,以8px为基础单位的递进式间距组合。

undefined

从图中的间距模块变化曲线我们可以发现等差数列的变化曲线较陡,各个间距之间接近,难以区分内容之间的关联性,在实际应用时难以确定什么时候用24什么时候用32。

而等比数列递增过快,第五和第六间距异变过多难以应用;相比之下,接近黄金比例变化的斐波那契数列变化具有节奏性,更容易划分出边距margins和间距padding之间的大小关系,快速建立内容优先级。

Keylines的设立 

Keylines可以在布局栅格外部一致地放置元素。在垂直方向贯通,内容元素与keylines统一对其。Keylines由内容元素与屏幕边缘的距离决定,以8dp为增量进行变化。 

undefined

1.布局栅格2.keylines

内容间距Padding

内容间距padding是指内容元素之间的空间。内容元素在模块内可在布局栅格外进行对齐,以8dp或4dp的增量变化。

undefined

(图例,teambition的clarity design设计语言中的组件内容间距,其中1qu=4px) 

版面率

页面中内容所占页面的比例,即页面的利用率。不同的版面率反应出不同的视觉情绪, 

高版面率的页面活泼热闹,低版面率的页面则显得安静优雅。



字体 Typography

字体是体验设计体系化的最基本元素之一,不同的字体系统代表了不同的产品性格,传达给用户不同的情绪从而达成不同的商业目标。科学的字体系统能大幅提高用户的阅读体验和认知效率,从而提升用户的愉悦度。


结合时下主流的设计语言,关于字体的知识主要包含如下几个部分:

1.字体家族:某一标准字的体系,具体会有衬线,非衬线,等宽,非等宽的区别

2.字阶与行高:字阶是字体的递增组合,行高可以通俗理解为段落中行与行的间距

3.字重:字体的粗细程度,通常会选用Regualr,Medium和SemiBold

4.字间距:字符与字符之间的距离,会影响内容的识别性和阅读的效率

5.字体颜色:字体的颜色,会影响内容的可视性和阅读的效率

 

字体家族

简介

某一标准字体系,如“微软雅黑”被称为一个字体家族。优秀的字体系统

首先是要选择合适的字体家族。选择与当前平台最为匹配的字体,使不同平台以及浏览器的显示下,字体尽可能清晰有效地展示设计和内容,给予用户友好稳定的使用体验。

 几个常见平台的默认字体家族如下:

1.mac OS & ios 中文:苹方 英文:San Francisco

2.Chrome & Andriod 中文:思源黑体 英文:Roboto

3.windows 中文:微软雅黑  英文:Segoe UI

 

同时为了保证字体稳定的显示,预防某些字符在默认字体家族中不存在的情况,还会设置备用字体,如在iOS平台下,Helvetica Neue被用做备用字体。

 

等宽字体

指字符宽度相同的电脑字体。东亚语言中,方块字基本上都作为等宽字体处理,如各个地区的汉字、日语假名的全形字符、韩语谚文音节等字符都是等宽的。而字母,数字,符号在大多数字体家族中是比例字体。

 有一些特殊情况时,设计师需要将字母或者数字也处理成等宽的,如在某些表格文档产品中,数字需要进行纵向比对,我们可以将其声明为Mono(等宽)字体,还有一些字体家族本来就是等宽的,如Tahoma。

图例,数字123与234在等宽字体Tahoma中能边缘对齐,而在非等宽字体Helvetica中则不能。等宽字体在纵向的数字列中不会产生错落感。

字阶与行高

字阶和行高,可以影响一套字体系统的节奏与秩序之美。字阶是指一系列有规律的字号的递增组合。行高Lineheight可以通俗理解为段落中行与行的间距。

undefined


为了使字阶符合自然韵律变化,结合斐波那契数列,我们得出以下一组字号与行高的组合。

undefined

具体的定义方法为设定主字号为14px,根据斐波数列乘二来变化,得到12,16,20,

26,36,52,78为字号。行高的计算则为n+6+4。

(计算方法根据英文字符 Line Height=2Fontsize-xHeight+Baseline)

 当我们正文字号为14时,建议使用24的行高。在一个系统设计中(展示型页面除外),字阶的选择尽量控制在 3-5 种之间,保持克制的原则。

字重

字重的选择同样为了创建字体系统的节奏与秩序感。在系统性设计中,主要出现的字重分别为Regular和Medium,分别对应代码中的400和500。在英文字体加粗和部分特别强调标题的情况下会采用 Semibold 的字体重量,对应代码中的600。

字间距

字母间距,也称为tracking,是指对一段文字中字母间的空间进行统一调整。

 字号较大时(例如标题)使用更紧密的字母间距来提高可读性并减少字符之间的空间。 

字号较小时,较宽的字间距可以提高可读性,因为字符之间的更多空间增加了每个字母形状之间的对比度。

 

字体颜色

文本颜色如果和背景颜色太接近就会难以阅读。为了文本清晰可读,准确的传达我们的设计目标,我们需要将文本,标题与背景色区分开来,Web内容可访问性指南(WCAG 2.0)级别AA要求正常文本的文本和背景之间的颜色对比度为4.5.1,大文本为3:1。

 

 

如下图例,AntDesign参考 WCAG 的标准,将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA级对比度。

undefined


不要在彩色背景上使用灰色的文本和图标,而应该通过降低的白色或黑色文本图标的不透明度,来创建更好的对比度。

undefined


例如,在玫红色背景上以85%不透明度显示的黑色文本使文本呈现黑色外观,具有玫红色的色彩倾向。

* 或也可以根据色彩章节中的色阶来选择对比度足够的同类颜色,但这种方法的问题是当背景色色相发生变更时还需要重新计算文本色值。

undefined

图例,在彩色表面上使用具有透明度的黑色使文本具有清晰可读的对比度。



上半部分完,接下来我们会继续学习色彩与图形的知识,共同在设计之路上前行。




26

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功