• <small id='Ko4so'></small><noframes id='Ko4so'>

    <tfoot id='Ko4so'></tfoot>
      <bdo id='Ko4so'></bdo><ul id='Ko4so'></ul>
      <i id='Ko4so'><tr id='Ko4so'><dt id='Ko4so'><q id='Ko4so'><span id='Ko4so'><b id='Ko4so'><form id='Ko4so'><ins id='Ko4so'></ins><ul id='Ko4so'></ul><sub id='Ko4so'></sub></form><legend id='Ko4so'></legend><bdo id='Ko4so'><pre id='Ko4so'><center id='Ko4so'></center></pre></bdo></b><th id='Ko4so'></th></span></q></dt></tr></i><div id='Ko4so'><tfoot id='Ko4so'></tfoot><dl id='Ko4so'><fieldset id='Ko4so'></fieldset></dl></div>
        <legend id='Ko4so'><style id='Ko4so'><dir id='Ko4so'><q id='Ko4so'></q></dir></style></legend>

      1. 南京网站制作分析网站字体布局的规则应该遵循?

        编辑:南京核心SEO -

        南京网站制作分析网站字体布局的规则应该遵循?

        网站字体排版也是一个有效的方式,以改善网站设计的质感。在本文中,南京网站建设公司将分享一些印刷规则,以帮助您提高文本内容的可读性和易读性。

        南京网站制作浅析网站设计技巧分享:网站字体排版应该遵循哪些规则?|南京做网站公司|南京网站设计公司|南京网站制作公司

        “沟通”在设计中起着至关重要的作用 - 它建立了网站和用户之间的联系,帮助用户实现目标。当我们谈论网页设计中的沟通时,它通常指的是文本的输出。

        排版在此过程中起着至关重要的作用:网络上95%以上的信息都以书面语言的形式存在。良好的文本布局使得就读的行为变得容易,而格式不良的文本布局会导致用户关闭网页。 “网页设计是95%的排版设计”:

        优化的排版是优化界面可读性,可访问性,可用性和总体平衡的关键。

        换句话说:优化网站文本布局也是一种优化用户界面的方式。在下面的文章中,我将提供一组规则,帮助您提高文本内容的可读性和易读性。

        1.尽量使用少的字体

        使用3种以上不同的字体将使网站看起来不那么结构化和不专业。请注意,一次使用更多字体样式可能会破坏所有布局。

        为防止这种情况,请尝试减少字体数量

        通常,将字体数量限制到最小(两个计数,一个是正确的)。如果使用多种字体,请确保字体具有系列感并基于字符宽度。以下面的字体组合为例。 Georgia和Verdana(左)的组合创建了一个类似于价值视图的和谐配对。相比之下,Baskerville和Impact(右)极大地掩盖了衬线的相应不匹配,从而产生更好的视觉体验。

        确保字体系列根据其字符宽度标准相互补充

        2.尝试使用标准字体

        字体嵌入服务(例如Google Web Fonts或Typekit)有许多有趣的字体,可以为您的设计提供创新,新鲜和意想不到的效果,并且它们易于使用。以Google为例:

        选择任何字体,例如Open Sans。

        生成代码并将其粘贴到HTML文档中。

        完了!

        这种情况会不会出错?

        事实上,这种方法存在两个问题

        并非所有人在打开浏览器时都可以访问相同的字体,这意味着您选择的用于获得更好用户体验的字体将不会显示给所有用户。

        用户更熟悉标准字体,因此他们可以更快地读取他们想要的信息。

        除非您的网站有足够的引人入胜的自定义字体(例如品牌或创建身临其境的体验),否则最好使用系统字体。更安全的方法是使用系统字体:Arial,Calibri,Trebuchet等。请记住,良好的文本布局会吸引读者阅读内容,而不是文本本身。

        3.限制文本线长度

        每行放置适当数量的字符是文本可读性的关键。它不仅是您的设计,它决定了文本的宽度,它也应该是一个可读性问题。考虑Baymard Institute的可读性和文本行长度的建议:

        “如果你想要一个好的就读体验,你应该将这个行限制在大约60个字符。每行适当的字符数是文本可读性的关键。”

        如果一行文字太短,眼睛必须总是回头,打破读者的节奏。如果文本行太长,则用户的眼睛很难长时间专注于单行文本。图像来源:材料设计

        对于移动设备,基本上每行保留30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个使用每行50-75个字符(每行和桌面的最佳字符数),而第二个使用最佳的30-40个字符。

        在网页设计中,您可以通过使用像素来限制文本块的宽度来实现每行的最佳字符数。

        4.选择各种尺寸的文本元素

        用户将从具有不同屏幕尺寸和分辨率的设备访问您的网站。大多数用户界面需要各种大小的文本元素(按钮文本,字段标签,部分标题等)。选择适用于各种尺寸和分辨率屏幕的字体非常重要,以保持每种尺寸的可读性和可用性。

        谷歌的Roboto字体

        确保您选择的字体在较小的屏幕上清晰易读!尝试避免使用脚本的脚本,例如Vivaldi(在下面的示例中):尽管它们很漂亮,但它们很难被就读。

        Vivaldi字体在小屏幕就读

        上会很困难

        5.使用可区分字母的字体

        许多字体很容易混淆类似的字母形式,特别是“i”和“L”(如下所示)和字母间距差,

        例如,当“r”和“n”看起来像“M”时。因此,在选择类型时,请务必在不同的上下文中检查您的类型,以确保它不会给您的用户带来问题。

        6.避免所有字母大写

        所有大写字母 - 意味着所有带字母的文本 - 在不涉及就读(例如首字母缩略词或徽标)的情况下看起来很好,但是当您的消息涉及就读时不要强制使用大写字母。正如Miles Tinker所说,在他的标志性作品“可读性”中,与小写类型相比,所有大写都提高了扫描速度和就读。

        7.不要尽量减少线间距

        在排版中,我们对两行文本之间的间距(或行高)有一个特殊术语。通过增加行高,可以增加文本行之间的垂直空白,通常可以提高可读性以换取屏幕空间。有一个基本规则,顶空应该是字符高度的30%以便于阅读。

        好的间距有助于提高可读性图片来源:微软

        正如Dmitry Fadeyev指出的那样,正确使用段落之间的差距已被证明可以使理解增加20%。使用空白技能为用户提供可以转换的内容,然后删除不相关的详细信息。

        左:几乎重叠的文字。右:良好的间距有助于提高可读性。图片来源:Apple

        8.确保您有足够的颜色对比度

        文字和背景不应使用相同或相似的颜色。文本越明显,用户扫描速度越快,就读。 W3C建议将正文和图像文本对比如下:

        这些文本行与颜色对比度建议不匹配,很难根据背景颜色制作就读

        小文本的背景对比度应至少为4.5:1。

        大文本(14pt/18pt常规及以上)应该具有至少3:1的对比度及其背景。

        这些文本行匹配颜色对比建议,并且很容易为就读背景颜色

        一旦你选择了颜色,绝对有必要在大多数设备上用真实用户进行测试。如果任何测试显示就读文本有问题,那么您可以确保您的用户遇到完全相同的问题,然后解决它们。

        9.避免将文字着色为红色或绿色

        色盲是一种常见病,尤其是男性(8%的男性是色盲),建议使用色彩以外的线索来区分重要信息。此外,避免使用红色和绿色单独传达信息,因为红色和绿色色盲是最常见的色盲形式。

        10.避免使用闪烁的文字

        闪烁自身或闪烁的内容可能会触发敏感个体的神经系统事件。它不仅会引起神经阻力,而且对普通用户来说可能会令人烦恼或分散注意力。

        结论

        文本布局是一个重要的设计领域,正确的排版选择可以让您的网站感觉清爽。因此,文本布局的可读性,可理解性和清晰度至关重要。文本排版的存在是突出显示内容,内容应该用方式读取,这不会增加用户的认知负荷。

        本文由南京网站建设公司 南京做网站公司 南京网站制作  南京网站设计 南京网络公司 网络中心收集整理!以上是从互联网上组织的。如果有任何侵权行为,请与我们联系删除,谢谢!

        免责声明:本网站的部分资源和文字信息来自互联网。如果您侵犯了您的权利,请及时通知我们:电子邮件:  380254277@qq.com