在谈论设计时,我们需要从设计师的角度考虑文本。文本必须清晰可读,同时适合网站的风格。但它也必须与内容的层次结构相关。
构建层次结构是网站组成的“大局”。但是当您转向排版时,您还必须创建与页面上特定文本相关的层次结构。在这篇文章中,我们将解释如何使用标题创建关系,以及如何使用空格来使冗长的段落可视化。制作网站网页最佳实践:极简主义排版。
标题和间距
Web内容通常只关注几个不同的文本元素。标题范围从H1-H6,但大多数网站最多只使用H1-H4。无论使用多少标题样式,作为一个设计师,他们的工作,以使层次结构清晰建立。
文本之间的空格很重要,因为它有助于定义页面内容本身。当用户找到新标题时,他们希望能够识别内容是否切换到全新主题,或者是否在现有主题内。标题文本的大小,颜色和样式的正确组合有助于为用户创造正确的期望。
文本之间的空白表示页面内容如何相关。具有大量空间的标题被视为更显着,而靠近段落的标题被视为通过上下文相关。段落后的底部边距显示文本行与它们在层次结构中所处的位置之间的关系。这一切都涉及到制作内容的层次结构,以在视觉上区分页面上的文本。才艺多,专业网站建设、网站优化、logo设计、品牌设计、印刷等产品服务,新上线企业VI设计套餐和网站营销推广系统(强),欢迎新老顾客前来咨询!
标题关系
每个标题应该反映它自己独特的风格,这也补充了页面上的其他样式的文字。制作精采标题通过练习变得更容易,但是空格值通常应该相同,不管标题样式。
Square使用传统的初始首页布局,包含大量图像和文字块。标题是设计的一个特别有趣的部分,因为它们的范围从超大到无穷小。然而,大小并不像页面上与其他文本的关系那么重要。
请注意,在上面的屏幕截图中,大标题如何在文本上方和下方使用额外的间距。这些部分标题在视觉上传达了“自己”的感觉,但也自然地组合成更大的副标题和段落的块。
每个内部块使用小得多的子标题文本。这些内部头部与段落文本大小相同,但它们以粗体文本和较深的颜色突出显示。视觉上,这些粗体的文本行仍然是标题(只是在视觉图腾柱上较低)是非常清楚的。
标题和段落之间的空间量还定义哪些段落属于哪些标题。同样,你应该在较小的头部和较大的头部之间插入大量的空间。再次,负空间在视觉设计和排版中定义层次。
文本清晰可读
通过使用空间,大小,颜色和/或文本样式,可以看到视觉层次结构。即使站在距离显示器3-5英尺的位置,这应该是可见的。您还可以使用5秒高斯模糊测试来检查层次结构。
尝试设计足够大的文本,使其清晰可读的距离屏幕3英尺。文本大小非常类似于白色空间,通常更好地设计大于较小。然而,运动温和和克制。如果文字大小太大,则会占用更多的屏幕空间,需要更多的滚动。但如果它太小,它可能是不可读的,或访问者将遇到困难与垂直节奏,因为他们移动他们的眼睛从线到线。
要记住的两个重要的事情是段落边距和行高(每行之间的空格)。段落中的文本大小决定了这两个值,因为空白区域取决于大小。