江苏龙网

  1. 主页 > 生活百科 > >

网页排版设计的技巧大全！

沟通在设计中起着至关重要的作用 。这是在用户和网站之间建立清晰连接的关键，帮助你的用户实现目标 。当我们谈论网页设计环境中的交流时，这通常指的是文本 。排版在这个过程中起着至关重要的作用:网络中95%以上的信息都是以文字的形式出现的 。
好的版式会提高用户的阅读热情，而差的版式会降低用户的阅读热情 。正如Oliver Reichenstein在他的文章《网页设计95%是排版》中所说:
优化排版就是优化可读性、易访问性和可用性！让整体数字平衡 。
换句话说:优化你的排版意味着优化你的用户界面 。在本文中，我将提供一组规则来帮助您提高文本内容的可读性 。
1. 减少不同类型字体的使用 使用超过3种不同的字体，使网站看起来没有结构和不专业 。记住，太多的尺寸类型和样式也会破坏任何布局 。
为了防止这种情况，尽量将字体的数量限制到最小 。
一般来说，把字体的数量限制在最少(两种就够了，一般一种就够了)，在整个网站粘贴相同的字体 。如果使用多种字体，请确保字符系统根据字符宽度互补 。以下面的字体组合为例 。格鲁吉亚和凡尔登(左)价值观相近，很般配 。对比一下与巴斯克维尔和Impact(右)的配对，其中过分强调的Impact使其对应的serif字体显得沉闷 。
确保字符系统根据字符宽度互补 。
2. 使用标准字体 字体嵌入服务(如Google Web Fonts或Typekit))可以提供许多有趣的字体，这些字体对于您的设计来说是新鲜的和意想不到的 。它们也很容易使用 。以谷歌为例:
选择任何字体，如Open Sans 在HTML文档的中生成代码并粘贴 。完成！实际上，这种方法有一个严重的问题:因为用户更熟悉标准字体，所以他们可以更快地阅读它们 。
除非你的网站对自定义字体非常有吸引力(比如品牌推广或创造沉浸式体验)，否则通常最好使用系统字体 。最安全的方法是使用系统字体:Arial、Calibri、Trebuchet等 。记住，好的版式能吸引读者的是内容，而不是版式本身 。
3. 限制行的长度 每行有适当数量的字符是使文本可读的关键 。不是你的设计，决定了你的文字宽度，应该是可读性问题 。考虑一下Baymard Institute关于可读性和行长度的建议:
“如果想有好的阅读体验，应该是每行60个字左右 。每行有适当数量的字符是让你的文本可读的关键 。”
图像:材料设计
如果线太短，视线必须一直返回，会打破读者的节奏 。如果一行文字太长，用户就很难把注意力集中在文字上 。
对于移动设备，每行应该是30-40个字符 。以下是在移动设备上查看的两个网站的示例 。第一种是每行使用50-75个字符，第二种是最好使用30-40个字符 。
图片:用户测试
在网页设计中，每行的最佳字符数可以通过使用em或像素来限制文本的宽度来实现 。
4. 选择一个能在各种尺寸中工作的字体 用户将通过不同屏幕尺寸和分辨率的设备访问您的网站 。大多数用户界面需要不同大小的文本元素(按钮副本、字段标签、章节标题等) 。).选择一种可以在各种大小和粗细下运行良好的字体，以保持每种大小的可读性和可用性，这一点非常重要 。
谷歌机器人字体
确保你说选择的字体在小屏幕上清晰可辨！尽量避免草书字体，比如维瓦尔第(如下例):虽然很漂亮，但是很难读 。
Vivaldi字体在小屏幕上很难阅读 。
5. 使用可区分字母的字体 很多字体让相似的字形容易混淆，尤其是“I”和“L”(如下图所示)以及字母间距较小的空房间里，比如“R”和“N”看起来像“M”的时候 。因此，在选择你的版式时，一定要在不同的文本环境中检查你的版式，以确保它不会给用户带来问题 。
6. 避免所有的大写 全部大写字母:是指文本中全部大写的字母，在不涉及阅读的上下文中(比如首字母缩写词或者logos)很好，但是当你的消息涉及阅读时，不要强迫用户全部大写 。正如迈尔斯·廷克(Miles Tinker)所说，在他的标志性作品《可读印刷》中，全大写印刷和小写排版大大延缓了用户的阅读速度 。
7. 行间距的重要性 在排版中，我们有一个专门术语来描述两行文字之间的间距(或行高) 。通过增加行高，可以增加文本行之间的垂直空白空间距，通常以提高可读性来换取屏幕空间距 。通常，行高应该是字符高度的30%,以提高可读性 。
【网页排版设计的技巧大全！】良好的间距有助于可读性 。图片:微软
正如德米特里·法捷耶夫(Dmitry Fadeyev)所指出的，正确使用段落之间的空白色，已被证明可以提高20%的理解能力 。使用空 white的技巧在于为用户提供可消化的内容，然后剥离无关紧要的细节 。


推荐阅读


上一篇：手机网站建站需要多少钱和资料！

下一篇：java程序员的工资待遇 2020年java好找工作吗