网页设计中排版的7个技巧

排版是一个相当大的问题. 这是内容与设计相结合的地方. 它可以让Dafa888casino ,让Dafa888casino 感觉 一个特定的方式. 个性会影响你的公司给人的印象. 

糟糕的排版会分散人们的阅读注意力,让他们在你的网站上流连.

好的排版应该使内容公平——在某种程度上不会增加用户的认知负荷. 🤯

换句话说,设计内容要便于阅读和理解.

让你的字体具有可读性,以积极的方式传递信息(易读性)和传达价值(美观性)(良好的用户体验).

但如何? 它始于目的.

你的使命是什么?? 答案应该指导你选择使用什么字体. 当你考虑排版时,首先要考虑网站的目的. 它将影响其设计的方方面面.

1. 选择一种能传达你的品牌价值的字体

网页设计不在于挑选好的字体,而在于Dafa888casino如何使用它们. 但这并不是说你的字体选择不重要——它确实很重要.

有时候,选择一种字体很困难——有成千上万种字体可供选择. 一般来说,有手写字体、无衬线字体、厚衬线字体、脚本字体、衬线字体和装饰字体.

字体样式.jpeg

排版有一种视觉语调. 字体会在潜意识里告诉Dafa888casino.

这不仅仅是你说了什么,或者你怎么说. 沟通的很大一部分是 它看起来如何. 人类天生就是视觉思考者.

人们对某些字体有潜意识的联想,而这些联想往往是基于一种字体的用法. 就像每个人一样,每种字体都有自己的个性和历史.

尽量减少使用的字体数量. Dafa888casino建议使用 不超过1-2型家庭 在你的网站上增加理解.

选择一种适合各种大小和重量的字体,以保持每一种尺寸的可读性和可用性,因为人们从不同的屏幕尺寸和分辨率访问你的网站.

与你的品牌字体保持一致(以及整体品牌)——不要仅仅为了好玩或者没有任何原因而添加字体. 有意识地选择和使用类型. 一致性可以提高品牌知名度,增加信任度. 你传达的信息(无论你说的是什么还是看起来如何)越一致, 你的品牌就越一致. 🙂

你的品牌字体是否与公司的价值观一致? 确保它能清晰有效地传达你的信息.

2. 成对的字体相互补充

Dafa888casino建议你的品牌坚持使用1-2种字体. Dafa888casino使用一种类型的家庭有很多重量变化(额外的轻, 光, 常规的, 书, 半黑体的, 大胆的, 黑色的, 等!),以保持Dafa888casino的品牌信息强大,但始终如一.

有时 你仍然想要组合两种不同的字体……

web-design-typography.jpeg

如何在看起来不太复杂的情况下做到这一点? 通过相似或对比来组合字体. 还可以通过文本颜色和大小创建对比度(稍后会详细介绍).

另一个解决方案是混合使用同一系列的字体. 有些字体两种都有,无衬线字体和衬线字体! 所以如果你把它们混合在一起,就不会有那么大的可能造成复杂性.

这里有四个字体的例子,有两个版本:

  1. 源无衬线/来源

  2. PT无/ PT衬线

  3. Droid san / Droid衬线

  4. 货物无/货运文本

字体组合无穷无尽. 字体两 是一个很好的资源与有益的例子免费 谷歌字体 配对. Adobe的字体 是一个奇妙的资源包含在任何创意云订阅.

3. 使用视觉 层次结构 和标题

有效的层级结构有助于提供信息, 留下深刻印象, 并通过正确的视觉提示说服用户采取你想要的行动. 

层次结构是指用布局来引导读者的视线,以创建方向,并确保整个页面内容易于阅读.

基于你网站的目标, 页面上的一些单词将优先于其他单词, 如菜单, 标题, 和奖状. 使用字体样式和大小来建立层次结构.

这可能听起来非常明显,但你希望人们首先阅读的信息, 应该比其他的更大更粗体,因为人们更容易注意到大的元素.

So, 如果你想吸引更多的注意力, 强调它,给它(白色)空间. 这个概念也适用于去强调. 例如, 让一行文本比周围的文本更小,这样观众就会觉得它不那么重要.

标题或HTML标题标签在网页设计中是非常重要的.

People rarely 读 word by word; instead, 的y scan 的 page.

H1通常是最大和最粗体的. 这是用来吸引别人注意力的主要标题. 接着是H2,然后是H3,等等. 这些子标题帮助用户快速浏览内容. 正文或段落文本比标题要小,但可读性仍然很高.

html-headings.jpeg

标题标签不仅用于样式和内容层次结构, 但它们也是搜索引擎的语言. 搜索引擎使用标题标签来理解和描述每个页面的主题及其内容,从最重要的(H1)开始.

设计和编写标题标签,引导网站访问者(和搜索引擎)浏览页面内容.

4. 限制行距

line-lenght-1.jpeg

长行很难读懂. 短的行也很难读.

你是否曾经因为行太长而停止阅读或缩小浏览器窗口!

这种事发生在我身上. 的. time. 为了Dafa888casino所有人的眼睛和使网络成为一个更好的地方,请不要在你的网站上犯这个初学者的错误.

看了75个字,人的眼睛就开始疲劳了. 保持你的线的长度短,但不要太短. 60个字符是桌面游戏的最佳设置,而手机游戏的最佳设置是30-40个字符. 

每行中适当的字符数量是提高文本可读性的关键. 通过限制文本块的宽度来达到每行字符的最佳数量.

字幕.jpeg

如果你需要更多的证据,看看这篇博客文章或任何主要的新闻媒体 大西洋, 《Dafa888casino》, or 洋葱 你会看到完美的线条长度. 这是故意的,所以你继续读下去!

想要增加人们阅读你的网站副本的时间?

提高你的行长度,传播信息. 我疲惫的眼睛几乎每天醒着的每一分钟都盯着屏幕,谢谢你.

5. 行间要留有足够的空白

Dafa888casino刚刚讨论了最优线长. 现在Dafa888casino来讨论直线的高度, 或行间距, 或者是技术排版术语——leading(读作sleding,但没有“s”).

首行是字母基线之间的空白量.

通过增加领先度, 增加文本行之间的垂直空白, 通常提高可读性. 但就像线条长度一样,你不想要太多,也不想要不够.

行高.jpeg

即使是最小的间隔调整也能在理解上产生巨大的差异.

我不能给你一个确切的公式,关于你应该有多少空间,但作为一般规则, 领口应该比人物高度高30%左右. 检查你的网站的线高,并相应地调整它.

6. 增加颜色对比

让你的网站文本易于扫描和阅读,使用足够的颜色对比. 不要使用相同或相似的颜色作为文本和背景.

文本与背景颜色的对比度越大, 它的能见度越高,就会有更多的人去阅读它!

避免单独使用红色和绿色传达信息,因为红色和绿色色盲是常见的(大约4.总人口的5%).

使用 WAVE Web无障碍评价工具 测试站点的可访问性问题,包括颜色对比度低. 如果测试显示你的颜色有问题, 那么你的一些网站访问者可能会有同样的问题.

ada-contrast.jpeg

7. 使用适当的撇号和破折号

是的, 这是细节,但魔鬼在细节中,我知道我会让所有英语专业的骄傲.

当我六年前第一次学习印刷术的时候,我对印刷术一无所知 正确的 使用撇号和破折号的方法. 但是,我知道我不是唯一一个…

漂亮的引号或卷引号是弯曲的,看起来像6和9,例如,“我喜欢排版”. 使用撇号来表示占有,例如“艾米丽的玉米卷”. 例如,当另一个引号里有一个引号时,使用单撇号引号, “我非常喜欢‘字体设计’”.

直引号是垂直的,例如“或”. 不要在实际的引号或撇号中使用直引号. 这是糟糕的排版! 正确使用直引号的方法是用英尺或英寸来表示测量值.

curly-quote-straight-quote.jpeg

不要混淆连字符和破折号. 它们不一样.

连字符(连字符)是最小的破折号,用于将不同的单词组合成一个,或者当一个单词中断时出现在一行的末尾,以显示该单词继续到下一行(连字符).

En破折号是中等大小的破折号,用于日期和数字中,以显示值的范围. 破折号是最大的破折号,用来把一个句子分成两段以产生停顿.

hypen-en-em-dash.jpeg

把这些排版细节弄好,你就会看起来像个专家.

结论 & 额外的资源

好的排版让阅读变得轻松. 我希望这些打字技巧能帮助你提高网站文字的可读性和易读性!

排版是任何网站的基本元素. Dafa888casino只谈到了表面.

如果你有兴趣深入研究字体设计的原则,一定要看看我在大学里的第一本字体教科书, 用类型思考,第二修订版和扩充版. 我仍然把这本书从书架上拿下来读!

需要字体或网站设计方面的帮助? 填写Dafa888casino的 触点形式 Dafa888casino.

 

把博客文章放在你的收件箱里

订阅权力游戏


以前的
以前的

提高理解能力的5大网站设计原则

下一个
下一个

如何在5个简单步骤中开始你的搜索引擎优化