网页设计

网页设计中美丽的布局

时间:2023-03-19 10:25:58 网页设计 我要投稿
  • 相关推荐

网页设计中美丽的布局

  一个伟大的网站从美丽的排版开始。虽然打破偶尔的规则是伟大的,有时回到制作伟大的排版的原则,以及如何创建它是很好的。

  这是一个重要的刷新,可以帮助您重新思考项目,考虑一种新的方法或只是回到一个更简单,更流线型的设计。

  所以今天,我们忽视了将规则重点放在排版理论上的趋势和方法,以及“规则”如何成为创造出惊人的类型的伟大准则。

  大小和层次结构

  大小事项。当在屏幕上创建可读排版轮廓时,尺寸可能是最重要的因素之一。微小的文字可能令人震惊,难以看清。超大文本可能会以奇怪的方式突破线,造成混乱。

  可读排版具有几层层次结构,可以告诉用户第一,第二等等。有一个明显的规模,所以身体文本是一个大小的设计,标题是另一个大小,分支和小标题也有自己的规格。

  跟踪和字距

  经常混淆,跟踪和字距不一样。字距是一对字母之间的空间调整。跟踪是对一整套字符之间的空间进行调整,例如对一段文本的段落或整体调整。

  Kerning通常应用于各个元素,以创建精确度,增强大文本的可读性甚至风格。跟踪通常用于收紧身体副本中的松散字体。

  限制字体

  太多的字体可能是压倒性的和刺耳的。大多数项目都有两到三个字体。

  选择固体类型选项的关键是选择具有大量变化风格的类型家族。大多数质量字体都有多种样式 - 粗体,常规,斜体,浓缩,黑色等。通过选择具有多个选项的字体,您将拥有多种用途的重量和样式。(如果您想将整个设计保留在单个字体系列中,有些家庭甚至包括衬线和无衬线选项。)

  混合和匹配样式

  当你选择字体时 - 诚然,这可能是许多设计项目中最棘手的部分 - 可以选择两种不同的类型。

  最常见的配对是衬线和无衬线。但你不必坚持这一点。

  当配对不同的样式和字体时,请查找具有相似x高度的字体(查找具有相同垂直小写“x”大小的字符集)和碗形状(封闭字母(如“o”)内的空格)。

  这些细节可以在字体感觉如何一起以及用户阅读文本的容易程度上有很大的不同。使用不同风格的类似字母形式仍然具有视觉熟悉度,可以使所有类型更容易一起阅读。

  忘记连字符和理由

  大多数时候,连字符和充分的理由是不必要的。

  特别在线,这些技术可以使文本更难以消化和理解一目了然。Hyphens分解阅读体验和充分理由通常会导致难以阅读的奇数间距。

  虽然这两个要素都在某些项目中占有一席之地,但它们通常应该被避免。

  不要改变字体

  你永远不应该调整字体。不要试图使它变得更胖,更高或更薄。选择一个新的字体代替。

  类型设计师努力创建一个一致的字符集,这些字符是可读的,适合字体的样式。不要尝试改变一组字符的外观。你不会改进它们,并且通常会使流程中的类型混乱。

  如果一个字体不太适合你需要的方式,寻找别的东西。尝试使用Identifont类似的字体工具来识别具有相似外观的字体,以选择在项目中可能会更好的其他选项。

  对比

  设计与对比使用排版。正如您将使用不同的大小来创建层次结构,考虑不同的字体权重,颜色和样式,以提供视觉兴趣。

  颜色是创造对比度的最有效和简便的方式之一。理想的对比是在浅色背景(或相反)上的深色文字。有几个无限数量的颜色选项可以帮助您实现这一点。当使用颜色和排版时,请注意,一些颜色组合,如右蓝色亮红色,真的很难阅读。寻找在光与黑暗,活力和饱和度方面不同的组合。

  当谈到对比,简单的背景通常最适合给予文本空间阅读。但如果背景包含视觉元素,如图像或图案,则会产生大小字体的凹凸,以创建背景和前景文本元素之间的距离。

  测量事项

  度量是保存文本的容器的大小。这可以是多列格式的整个文本框或单列的宽度。

  措施重要,因为屏幕上的字符数(包括空格,字形和标点符号)可能会影响可读性。这个概念背后的理论是,如果线条太长或太短,由于来自一条线路到下一条线路的不断往复运动,用户的眼睛可能会感到疲劳。

  从印刷风格的元素: “45到75个字符的任何东西被广泛地认为是在文本大小的衬线文本面中设置的单列页面的令人满意的长度。66字符行(计数字母和空格)被广泛认为是理想的。对于多列工作,更好的平均值是40到50个字符。

  这对于大多数项目来说是一个很好的起点,尽管许多项目都倾向于稍大一点的类型大小,这会使字符数落在该范围的较小端。

  尽管移动排版在该书首次发布时不是关心的,但是多列的指南是可以接受的起点。您甚至可以选择稍微降低一点,并针对小屏幕每行更优化35个字符。


【网页设计中美丽的布局】相关文章:

网页设计的布局12-06

常见的网页布局设计04-21

关于网页设计布局的分析03-30

网页设计的布局的方式有哪些09-01

网页设计要明确的那些布局细节12-20

网页布局基础12-04

网页设计中的字体设计12-03

网页设计中色彩的运用11-17

网页设计中怎么配色12-15

网页设计中的文字运用12-02