优惠活动 - 12周年庆本月新客福利
优惠活动 - 12周年庆本月新客福利
优惠活动 - 12周年庆本月新客福利

提高网页版式可读性的10项原则

日期 : 2022-01-05 21:35:39

相对来说,使版式具有可读性很容易,只需要遵循一些关键的原则。一个具有可读性的网页将长久地吸引读者的目光,给予他们深刻的用户体验。网页设计的目的就是要使用户获得尽可能愉悦的体验。以下10项设计原则将帮助你设计出具有可读性的网页版式。
1.易读的标题
      标题是印刷版式、网页版式等中的核心要素之一,如上文阐述的,标题是文字层级的组成,也是浏览内容的重要部分。
首先,标题文字的尺寸与正文文字的尺寸一样重要。标题设置得太大,用户阅读的时候就会感到不协调,他们的视线会被打断,从而失去阅读的目标。最终会毁掉内容的流畅性,干扰用户的阅读。若标题设置得太小,也会破坏文章的层级,分散用户的注意力。其次,在标题和正文间预留足够的空间也是很重要的。
2.易于浏览的文本
我们已经多次提到了“易于浏览”这个词,你一定也在别的地方听到过。易于浏览的文本和具有可读性的文本之间有着密切的关联。要使文本易于浏览,就必须将标题、层级和焦点(用于引导用户)三者合理有效地结合起来。
      那么,到底怎样才能使文本易于浏览呢?其中有许多要素,大部分上面已经提及。标题的尺寸和位置,正文的尺寸,文字的行高,文字对比以及区分焦点的方式,都会对文本的浏览产生影响。
      焦点是版面上的必要组成元素,它已吸引或打算吸引用户的注意力。焦点也许是标题图像,也许是按钮,等等。
      3.留白
版面以内容为重,而空白是为内容的可读性服务的。留白将大段的文字隔开,也会使用户的视线在文字间自如地穿梭。留白还将版面上的各个元素,如图片和文字隔开。
4.一致性
-致性是-种增强可用性的重要技巧,设计师也将其运用到提升可读性中。要想让用户能更加轻松地阅读版面,保持层级的一致性是很重要的。这就意味着同级标题的尺寸、颜色和字体应该相同。例如,文章中所有的h1级标题看上去应当相同。为什么?因为这将使读者在浏览文章的时候,能轻松找到相似的焦点。同时,一致性还能帮助你组织起版面的内容。
5.文本密度
文本密度是指你在某个区域所放置的文字数量。标题(H1-H6)标签是指在网页html中对文本标题进行强调的一种标签,以标签<h1>、<h2>、<h3>到<h6>依次显示重要性的递减。一般来说,<h1> 用来修饰网页的主标题,<h2> 表示一个段落的标题,<h3> 表示段落的小节标题。内容的密度对其可读性有重要影响。密度与间距选项如行高、字距和字体大小有关。如果以上选项彼此之间达到平衡,使内容不至于太拥挤也不至于太宽松,那么这样的密度就是极佳的,就是易于浏览和具有可读性的。
6.突出重要元素
另一个重点就是要在主体内容中强调特定元素。这包括突出链接,加粗重要文字以及显示引用文字。之前提到过,焦点在网页版式中是必不可少的。通过强调这些元素,你就能为用户提供焦点,而它们则将大段单调枯燥的文本分隔开。使文本易于浏览很重要。通过提供以上焦点,可使得正文特别易于浏览。将关键字行加粗。就能立即吸引用户的目光,也因此成为展示重要信息的有效手段。
7.组织信息
在文章中组织信息的方式会影响可读性/用户在一篇组织合理的文章中能轻松得到引导,进而顺利获取信息。这虽不是文本的讨论范围,但真的很重要。
8.图形支持
正文都需要一些视觉图形的支持,如图片、按钮、图表或插图。在文章中防止图形并不是一件容易的事,你必须在文字和图形间预留足够的空间。如果图形元素是一张图片,那么为了使它与文字泾渭分明,就需要一个干净的图片边框。边框能引导用户的视线,也能使版面别具风格。不过保持文字框的简洁也很重要。它的色调应当柔和,而边框也不宜太大。如果图形元素是图表或插图,我们只需使用空白作为隔离元素。内容应该干净而不受干扰地环绕在图形周围。
9.使用分隔符
要将大片文字干净而有组织地分分隔成段,使用分隔层级元素。如标题和正文;也可以对内容进行划分。分隔符最简单的形式就是一条直线。它最常用来分割层级元素,非常实用,对提高可读性也很关键。
另一种分割内容的常见方式就是使用方框。文字框可将一页上不相干的内容有效地分隔开。它能使用户在复杂的版面上聚焦视线。
10.页边
常听人说不要将版面塞得太满,应当保留适当的留白,这是为什么呢?留白实际上可以将用户的实现吸引到文字上,即迫使用户关注文字。因为此留白将会影响内容的流畅度和可读性。也变就是最佳的留白元素之一,它能很好地支持文字元素。四条边将迫使用户关注页面中间的中心内容。
相关文章