恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
回归基础:网站设计中那些好看的排版
0.0°
2017-07-04 好文转载 经验/观点 原作者: 南隼互动 举报 1594 1 2 0

       一个受大众审美欢迎的网站往往是从优秀的排版开始的。虽然偶尔打破规则可以帮助你的网页设计创造不同的视觉风格,吸引用户注意,但是,有时候我们更应该回归基础的排版原则以及思考如何以更好的方式创建它们。

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

所以今天,我们将先忽略那些“扬言”要打破排版规则的理论趋势和方法,专注于“规则”,看看它如何指引我们创造出惊人的作品的重要方向。

1.大小和层次结构

Image title


         思考一下那些有关尺寸大小的相关事件和元素。在屏幕上创建可读性排版大纲时,尺寸可能是最重要的因素之一。过于微小的文字可能令人错愕,难以看清。超大的文本又可能会以奇怪的方式打乱用户的阅读习惯,导致混乱。

网站设计中建立符合可读性要求的排版需要具备层次结构,可以告诉用户第一,第二等等。因此,你需要创建一个明显的视觉规格,将主内容文本、标题、小标题和强调性文本“区别对待”,以营造这种文本的层次感。

2.文本间距和字

Image title


        我们经常会感到困惑,Tracking和Kerning难道是不一样的两项调节参数吗?Kerning调整是一对字母之间的空间调整,而Tracking是对一整套字符之间的空间进行调整,例如对一段文本的段落或整体调整。

Kerning通常应用于单个元素,以创建精确度,增强大文本的可读性甚至风格。Tracking通常用于在整体文本内容中收紧松散的字体。

3.限制字体使用

Image title


        在同一个网站设计中使用太多种类的字体在视觉上可能给用户造成压力和减低阅读体验。大多数设计项目使用两到三个字体就已经足够了。

选择可以固定的字体样式的关键是选择哪些具有大量变化风格的字体家族。大多数字体都有多种样式——粗体,常规,斜体,细体,黑色等。通过选择具有多个选项的字体,你将可以在不同的用途和重量以及样式上自由的选择。

4.混合和匹配设计风格

Image title


       网站建设过程中,选择字体诚然是所有设计项目中最棘手的部分,你可以选择两种不同的类型。

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

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

这些细节可以使尽管不同的字体组合在一起仍然像是同一个而不会产生过多的差异化,用户在阅读文本时也会更适应和简单。使用不同风格的类似字形仍然具有视觉熟悉度,可以使所有类型的组合更容易一起阅读。

5.忘记连字符和下划线

Image title


       大多数时候,连字符和过多的下划线是不必要的。

特别是在网站设计等线上的项目中,这些技术可能使文本更难以消化和了解一目。 连字符会分解阅读体验,下划线则会在奇数间距上导致文本难以阅读。

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

6.不要改变字体

Image title


       你永远不应该过多的干预字体的形态。不要试图使它更胖,更高或更薄。如果你必须使用这样的样式才能符合你的设计要求的话,选择一个新的字体代替。

字体设计师努力创建一个一致的字符集,这种专业的设计可以保证这些字符是可读的,是最适合的字体样式。所以,不要尝试改变一组字符的外观。你可能不会改进它们,反而会造成异常混乱。

如果在网页设计过程中,目前的这种字体不太适合你的需要,寻找别的字体以代替。尝试使用Identifont或类似的字体工具来识别具有相似外观的字体,以在项目中选择可能更好的其他选项。

7.对比

Image title


       使用字体的不同类型设计和创建对比。正如你会使用不同的尺寸大小来创建层次结构一样,考虑不同的字体权重,颜色和样式,以提供不同的视觉。

颜色是创造对比度最有效和简便的方式之一。理想的对比度是在浅色背景上使用深色文字(或相反的)。 在网页设计中可以帮助你创建对比的颜色选项没有限制。当你在使用颜色和排版时,请注意一些颜色组合不要轻易的使用它们,如亮蓝色的亮红色,真的很难被阅读。寻找在亮与暗,活力和饱和度方面不同的组合。

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

8.关于度量的一些事项

Image title


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

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

应用一段《 The Elements of Typographic Style》中提及的相关描述:“45到75个字符被广泛地认为是在文本大小的衬线文本中设置的单列页面的令人满意的长度。 66字符的行(计数字母和空格)被广泛认为是理想的。对于需要以多列排版呈现的内容来说,更好的平均值是40到50个字符。”

对于大多数项目来说,这是一个非常好的起点,尽管许多项目倾向于稍大一点的排版样式,但是最理想的字符数(字符长度)还是在这个范围之内。

尽管移动端排版在书籍的首次出版并不会在文字的长度上产生太多的问题,但是对于多列文本展示来说,这份指南是可以接受的起点。你甚至可以选择稍微降低一点,并针对小屏幕每行优化至35个字符。

总结

      如果你想继续思考有关排版理论和字体使用,除了上述经典之外,还有一些好书值得推荐。

他们分别是:

Thinking with Type by Ellen Lupton

Why Fonts Matter by Sarah Hyndman

Just My Type: A Book About Fonts by Simon Garfield

更新:2017-07-04

收藏

1人已收藏

  • 44

    作品

  • 9

    粉丝

  • 0

    关注

  • 提升移动端用户体验的7种方法
  • 10个很棒的下载免费矢量图形的地方
  • 在网站设计中有效使用微文本的6种方法
  • 如何安装&应用Lightroom预置

    猜你喜欢

      2017-07-04 好文转载 经验/观点 原作者: 南隼互动 举报 1594 1 2 0

      回归基础:网站设计中那些好看的排版

      0.0°

      你确定要举报回归基础:网站设计中那些好看的排版

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年07月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录