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

发布：2022-01-05 13:33:03 浏览：2473

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