第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

对比这10个注意事项,你的网页文字排版达标了么?

时间:2017-06-27 09:27来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
对于网页而言,视觉信息的传达至关重要。用户通过页面获取信息,文字、图片、图标、按钮、表单等UI元素都承载着不同类型的信息。在这其中,文字的作用尤其巨大。排版设计的时候,对

  对于网页而言,视觉信息的传达至关重要。用户通过页面获取信息,文字、图片、图标、按钮、表单等UI元素都承载着不同类型的信息。在这其中,文字的作用尤其巨大。排版设计的时候,对于文本内容的处理,占据了相当大的比例。虽然网络上,信息呈现的方式多种多样,但是依然有超过9成的信息是通过文本来传递的。

  良好的排版设计能让阅读成为一件愉悦的事情,正如同 Oliver Reichenstein 在他的文章中所说的:

  “优化排版等同于强化可读性,提升可访问性,增强可用性,最终实现视觉上的平衡!”

  换句话来说,优化排版设计就是优化UI界面。今天的文章总结了文字排版的10个常见注意事项,帮你真正有效提升内容的可读性和易读性。

  1、控制字体数量

  当你的网页文本内容中使用超过3种完全不同的字体的时候,会让网站显得结构紊乱和不专业。

  太多字体和复杂的样式都会对布局产生影响。

1-HVmsH0t4RE1nIDAw9udwnA

  为了阻止这种情况的发生,尽量控制字体类型的数量是很有必要的。

  一般说来,限制字体数量是一种非常有用的方法(最多两种字体,通常一个字体能够搞定绝大多数的排版),在整个网站设计中坚持使用一种字体能够带来足够一致的体验。如果你需要使用两种,甚至更多的字体,那么请确保这几种字体族之间能够互相补充、互相搭配。以下方四个字体为例,四个字体当中 Georgia 和 Verdana 在字体的大小、宽度上都比较接近,两者构成和谐的搭配。相比而言,右侧的两款字体 Baskerville 和 Impact 如果搭配在一起就很不合适了,Impact 过于厚重,而 Baskerville 的衬线也过于突出。

1-NqgjW0hDyoMaK8dWZdTNsg

  2、尝试使用标准字体

  诸如Google web Fonts 和Typekit 这样的在线字体服务能够为你推荐许多新鲜有趣的字体,意想不到字体设计,在很多场合能够给用户带来新鲜的体验。在使用上,也确实非常方便,比如Google Web Fonts 是这么用的:

  ·选一款你喜欢的字体,比如 Open Fonts

  ·生成代码,贴到HTML文档的标签中 ·完成!

  这种操作其实和把大象放到冰箱里面一样简单。

  那么,到底问题出在哪儿呢?

  首先,你是选取的漂亮字体并不是谁的电脑里面都会有的,最前先的例子是,Windows电脑中的微软雅黑并不是Mac的标配字体,如果你的网页中使用了微软雅黑,它会在Mac电脑中以苹方来显示。你挑选的字体并非普遍存在的,最终会以另外一种样子呈现在别人的屏幕上,用户熟悉的还是那些标准的、常见的字体,最安全的英文字体始终都是 Arial、Calibri、Trebuchet 等字体。良好排版实际上只是基础,吸引人的始终是漂亮整齐的布局和优质的内容,而非字体本身。

  3、控制每行内容的长度

  每行文本的字符数,其实直接影响着内容的可读性。正如同Baymard 通过研究所发现的那样:

  “如果你想拥有良好的阅读体验,将每行文字控制在大概60个字符左右,这个字符数量能够让你的内容拥有恰到好处的可读性。”

  如果文本太短,用户的内容扫视频率会过高,经常会打破阅读的节奏,而如果太长了,用户会很难持续的保持高专注度的阅读。

1-D3UaR14yzMYpbWmPjci6Q

  在移动端上,每行文字应该控制在30~40个字符之间,这也符合目前的用户使用习惯和阅读体验。参考下面的对比图,可以看出,40~60个字符数通常能够取得最佳的阅读体验。

1-glrQ6N9g9vqpmPy0q4wwUA

  在网页设计中,通常使用 em 和 px 来控制文本块的宽度,借此来控制每行的字符数量。

  4、选择各种尺寸下都能良好显示的字体

  用户注定是要通过不同的设备来访问你的网站的。绝大多数的用户界面需要使用到大小不一的文本元素来作为支撑,正文,标题,按钮标签,表单,等等等等。你所选择的字体,应该在不同的尺寸、不同字重的情况下,都能具备良好的可读性。

0-j5uRmcOtMWZ9HjDY

  最值得参考的是目前几个主流的平台自主设计的字体族,比如 Android 上的Roboto,苹果全系列的通用英文字体 San Francisco 。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕