网站排版事关网站整体视觉效果,有的网站排版经过简单的调整,视觉效果数倍提升。
如下,我们介绍八个能够显著改善网站排版的简单方法。
方法一:增加颜色对比
在布局文本时,设计师通常会将文本视为视觉设计中的一个块。设计师与文本的关系与用户非常不同,设计者将文本定位为形状,用户逐行读取。因此,设计师往往会低估文本所需的对比度。
浅灰色文本在美学上很漂亮,但在功能上却毫无用处。文本是用来阅读的,需要在桌面上达到WCAG AA标准,在移动设备上达到WCAG AAA标准——或者在任何有许多环境光源的情况下。文字越大,你的回旋余地就越大。
文本的对比度需要进行彻底的测试,但是首先,在白色背景下,18px的文本颜色不能比#595959浅。
方法二:收紧标题间距
绝大多数的字体被设计成作为正文——大块的、多行长的运行文本。当字体被制作出来的时候,它的间距就是为了这个用途。
不像行文,标题往往很短,周围有更多的空白。额外的空白在视觉上淹没了单词形状的负空间,并迫使字母分开。
为了弥补这一缺陷,将标题的字母间距和单词间距缩小1-5%。
方法三:放宽非单词间距
当我们阅读时,我们的大脑并不是一个字母一个字母地把单词拼出来,它可以识别单词的形状,甚至单词组的形状。
大多数微排版都关心的是不破坏这些字的形状。然而,有时确实想要阻止单词的形成,而允许单独的字符。
放宽任何文本的字母间距,拟作为一系列字符读取,如序列号、跟踪代码和表格数据。
方法四:输入时使用系统字体
隐私对用户来说是个大问题。作为一名设计师,所能做的任何保证用户数据安全的事情都会增加你网站的正面用户体验。
样式你的HTML输入使用系统字体-默认字体设置的操作系统,你的用户正在访问的网站。这就清晰地划分了品牌字体中的品牌数据和用户字体中的用户数据。
以这种方式使用系统字体可以鼓励用户感觉到他们的数据的所有权,建立信任,并增加转换。
方法五:标记段落
文本的段落需要有一个视觉上的指示,表明它们已经开始。通常有三种表达方式:紧跟标题、在段落前留出垂直空格、或者第一行缩进。
每个段落应该使用其中一个指标,而且只能使用一个指标。由于网页内容的性质和标题对快速浏览内容的好处,对于大多数网站来说,最好的选择是遵循标题和垂直间距的组合。
方法六:使用正确的风格
由于各种各样的原因,从可用字体到积极的优化,站点使用CSS伪造替代样式是很常见的。斜体可以通过倾斜来伪装成斜体,粗体可以通过使用浏览器的默认设置来伪装,小大写可以通过将文本设置为大写并减少字体大小来伪装。
这些技巧弊大于利,创造出扭曲的文字形状,打断了文本的自然流动。
如果你不能使用真正的斜体、粗体和小大写,那么不要伪造它们。寻找其他方法来突出重点,比如改变颜色。
方法七:使用正确的引号
撇号、单引号和双引号都是特定的字符。大多数字体都为它们提供了不同于键盘上快速单引号或双引号键的符号。
这些引号通常被称为“智能”引号,因为文字处理应用程序通常可以选择它们使用的符号是否“智能”。
使用正确的引用是传达一段精炼文本的最简单方法之一。
综上,通过如上七个办法,可以让网站的排版效果显著提升。