最佳网页设计中的简约主义和字体排版

层次结构是一个网站构建的整体框架,但当你进入排版步骤,还必须建立相关的页面上特定的文本层次。在这一块,我们将解释如何才能使文本同页眉或者网站标题相呼应,以及如何使用的空白,使冗长的段落在视觉上变得易于消化。

标题同间距的关系

网页文本通常围绕一组不同的文本元素。标题的范围从H1-H6,但大多数网站使用H1-H4最多。无论使用多少种标题风格,作为一个设计师,你的工作是合理的安排它们,明确规划页面层次。

文字之间的空间是很重要的,因为它有助于定义页面内容本身。当用户发现一个新的标题,他们期望能够马上识别内容是一个独立的专题,还是现有专题中的一个小部分。大小,颜色和标题文本的样式的正确组合有助于为用户创造正确的预期。

文字之间的负空间(一个艺术上的特殊名词,指的是一张图画或照片中,画面主体之外的空间部分)显示页面内容如何相关。占用大量空间的篇头通常被认为更占优势,而靠近段落的标题则被认为更需要通过文本解释。段后底部页边显示文本行以及它们在层次结构中属于之间的关系。这一切都涉及各具特色的文本之间的视觉上分辨。

标题之间的关系

每个标题都应该反映自己独特的风格,同时也需要同页面上的其他风格互补。华丽或者辉煌的标题会非常容易吸引人,但是无论是那种标题样式,留白都非常重要。


Square就采用了一个传统的启动界面,包含了大量的图像和文本块。标题设计是一个非常有趣的部分,因为标题可大可小字体多样。然而,相比于大小,标题同其他文字的关系更加重要。

注意上面截图中大标题的使用和文本中行距的使用,每一个章节的标题在视觉上都有一种独特点,但也能自然的组合在一起,形成更大的小标题和段落块。

每个内部功能块使用小得多副标题文本。这些内部小标题在字体大小上同一般的段落文本并无差别,但是它们通过加粗和不同的字体颜色来突出自己。视觉上,这些清晰加粗或者加下划线的文本非常醒目(只比视觉的焦点弱一点)。


::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::3标题和段落之间的间距还明确了哪些段落属于哪个小标题。同样,大标题和小标题之间也应该预留足够的空间。其次,负空间同样会影响视觉设计和排版层次。

正如Web UI Design Best Practices说明,创建页面标题时,请记住以下几点:

  • 一个视觉层次应通过利用空间,大小,颜色,文字样式等元素来创建,使其变得易读。哪怕站在从监视器3-5英尺远的地方,应该是可见的。你还可以使用5-second Gaussian blur test测试,以检查的层次结构。
  • 保持每个小标题靠近它的第一个子段落。
  • 用更精辟的标题更快速,清晰地传达思想。

长段落

就文本留白这个话题,其实就基于如何围绕常用的段落设计的问题。牢固,可靠,几乎无处不在,段落是每一个网站的内容战略的支柱。

但是,内容如何置入是取决于内容的风格而言的。举个例子,一个在线的新闻杂志会比一个小的园艺博客使用更多的不同种类的段落。段落的内容量,内容长度和详细程度在进行排版设计时都需要被考虑。

试着用足够大的文字设计,使文字哪怕跟屏幕相距3英尺远也是可读易读的。文字大小是同空白空间是非常相似的,通常大的比小的好。但是,在实践中仍然需要适度和因地制宜。

如果文本尺寸过大,那么它会是占用更多的屏幕空间,需要更多的卷轴。但是,如果它太小也可能是不可读的,当游览者的目光从一行跳跃到另一行的时候,他们会觉得很难找到一种垂直的阅读节奏。

两个要牢记的重要事情是段落边距和行高(每行之间的空间)。文本在段落的大小决定了这两个值,因为空白取决于大小。

行使设计权利的网络博客平台就是一种处理媒介,其中的文字是清晰的,可读的并且相互之间有足够的空间距离。正如博客中的段落设计向我们展示的,行高必须足够大,这样连接的下一行才不会让人觉得过剩。

​根据Web Design Trends 2016 ebook推荐,这里有一些简单上手的规则可以遵循:

  • 避免使该行高度大于文本的常规行高度
  • 使用em     font unit字体单位非常适合在所有浏览器建立统一字体大小
  • 行高度经常是比字体大一点点
  • 尝试用1EM的字体大小和1.5em-1.75em的行高组合

处理段落间距可能会非常棘手,但它是一个非常重要的课题,特别是对文字为主的网站来说。底部段落边距,应该比文本的常规行大得多。底部段边距应该足够大,这样就可以直观地确定一个段落已经结束。

一旦文字的大小被确定,找出合适的行高和间距就比较容易了,搭配组合就能发挥更大的价值。这样做的目的在于阐释清楚和搭建结构,每一个新的段落都应该是显而易见的,没有任何疑问的。达到这种效果的关键在于对每个文本块之前比例空间的把握。

正如前面提到的,如果空的太多往往比空的不够来的安全。尽可能的避免使用过多的空间,或者你也可以尽量使内容密度变得小一点。保持页面中有足够的内容,并且保证所有的内容都是有趣的,不在多在于精,使其具有一种压倒性。

概括

文字本身的内容如果不合适,会同时对整体组合和小的元素产生负面影响。所以文字排版时,内容为王。

页面中的段落边距可能需要比在侧边栏中的段落更大。标题链接需要设置的看起来微胖线条流畅,但在页脚的链接就需要减少填充,尽量整洁。但是记住,排版设计本身并没有什么固定的规定,只有实践才是最好的方法。

同样要记住的是,排版必须跟着自身的风格结构(例如网页结构)来设计,大量的实践将是提高你的眼界和的最佳方式,它可以使你切实了解如何在特定的web空间中进行设置排版,做出最合适的设计。

当涉及到空间设计,请记住,空间首先是一个设计工具,其次才是一种美学素养。空间创造层次关系,定义层次结构,并强调内容。

文章来源:应酷设计

(0)

相关推荐

  • 网页设计中的大事件 – 彩色字体

    小编:今天@Ethan为大家带来一篇关于网页设计中彩色字体的文章,主要介绍了什么是彩色字体以及注意事项和如何创作.感兴趣的小伙伴可以试着自己创作一下,完成后别忘记晒出来呦. 那么什么是彩色字体?这是一 ...

  • 网页设计中的极简风格—无的力量

    小编:首先感谢@飞屋睿UIdesign为我们分享讲解什么是极简设计以及如何做到极简并配上很优秀的图来帮助我们讲解.不久前刚看到一句话来和大家分享下,感觉可以用来提升逼格.这句话是这样写的"U ...

  • 网页设计中文字排版设计的技巧

    谈到到网页设计中的排版,这是可个大学问.网站上每一个元素都能影响浏览,排版设计的好与坏绝对能考验一个设计师的基本功底,而短短的一篇文章并不能将排版介绍清楚,本文就先主要分享网站主题部分文字的排版,后期 ...

  • 网页设计中文本排版的技巧和细节

    网站的核心是内容,用户访问网站最重要的目的就是要看网站的正文,所以,网页的文本排版非常重要.网页的文本排版并不是仅仅在CSS里设置个字体大小那么简单的,想要有好的排版,对细节要下一番功夫才行. 步骤/ ...

  • 2015年不容错过的最佳网页设计作品

    是时候开始准备挥手告别2015年了.这一年中涌现了许多优秀的设计作品,设计趋势也在时间的推移中渐渐转变.在这个新旧更替的时间节点,重温过去一年中的优秀网页设计,无疑是对2015最好的纪念和总结. 这一 ...

  • Airbnb前端工程师告诉你,如何在设计中选择正确的字体和版式

    原文作者Jonathan是一位设计师,同时也是一位开发者.曾任职于雅虎,现在在airbnb任前端工程师.大神自述,自己在设计和开发两个领域研究的比较多,这篇文章就分享了他在设计中的一些排版,虽然文章中 ...

  • 【海平面】在网页设计中,如何应用纹理?

    当提到网页设计,纹理的应用是未来的趋势.极简主义的方式已经一去不复返了--我们想要纹理那种令人快乐的"小零碎"呈现在我们的网页上,现在就想要它! 纹理是一种简单而有效的方式,可以为 ...

  • 巧用格式塔原则处理网页设计中的正负空间

    本文中,我们讨论了关于网页正负空间的格式塔原则.文章虽然有点长但讲解详细,希望能对你有所帮助. 备注:翻译过程中为了适合我们的阅读习惯,有对原文进行一定的内容简化和语义修饰,如有不妥欢迎大家根据官网链 ...

  • 网页设计中要遵循哪些原则

    网页设计中要遵循哪些原则呢?怎样才能设计出一个合格的网页.我们知道,设计的个性化表现得非常明显,每个设计师都有着自己的设计理念,而企业也有着自己的需求,因而这两者经常会出现冲突.因此,网页设计中要遵循 ...