企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

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

发布时间:2017-06-27 18:22:05

TAGS:网站设计

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


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

良好的排版设计能让阅读成为一件愉悦的事情,正如同 Oliver Reichenstein 在他的文章中所说的:T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

“优化排版等同于强化可读性,提升可访问性,增强可用性,终实现视觉上的平衡!”T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

换句话来说,优化排版设计就是优化UI界面。今天的文章总结了文字排版的10个常见留意事项,帮你真正有效提升内容的可读性和易读性。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1、控制字体数量T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当你的网页文本内容中使用超过3种完全不同的字体的时候,会让网站显得结构紊乱和不专业。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

太多字体和复杂的样式都会对布局产生影响。
T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

为了阻止这种情况的发生,尽量控制字体类型的数量是很有必要的。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

2、尝试使用标准字体T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

诸如Google web Fonts 和Typekit 这样的在线字体服务能够为你推荐许多新鲜有趣的字体,意想不到字体设计,在很多场合能够给客户带来新鲜的体验。在使用上,也确实非常方便,例如Google Web Fonts 是这么用的:T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

·选一款你喜欢的字体,例如 Open FontsT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

·生成代码,贴到HTML文档的标签中 ·完成!T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这种操作本来和把大象放到冰箱里面一样简单。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

那么,到底难题出在哪儿呢?
T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

3、控制每行内容的长度T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

每行文本的字符数,本来直接影响着内容的可读性。正如同Baymard 通过研究所发现的那样:T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

“假如你想拥有良好的阅读体验,将每行文字控制在大概60个字符左右,这个字符数量能够让你的内容拥有恰到好处的可读性。”
T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

假如文本太短,客户的内容扫视频率会过高,经常会打破阅读的节奏,而假如太长了,客户会很难持续的保持高专注度的阅读。
T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在移动端上,每行文字应该控制在30~40个字符之间,这也适合当前的客户使用习惯和阅读体验。参考下面的对比图,可以看出,40~60个字符数通常能够取得的阅读体验。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

特马资料qq群网页设计中,通常使用 em 和 px 来控制文本块的宽度,借此来控制每行的字符数量。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

4、选择各种尺寸下都能良好显示的字体T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

值得参考的是当前几个主流的平台自主设计的字体族,例如 Android 上的Roboto,苹果全系列的通用英文字体 San Francisco 。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当字体够大的时候,可识别性的难题并不明显,当它在小屏幕上呈现内容的时候,可识别度的难题就很显著了。例如下面的Vivaldi 字体,虽然很漂亮,但是当尺寸小的时候,可读性就明显不足了:T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

5、使用易于识别的字体T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

由于英文字体本身的几何特征,许多字体在设计的时候,稍不留意就会让客户难以识别,尤其是字母“i”和“L”,字母“r”、“n”和“h”,在选择字体的时候,应该特别留意这方面的难题,确保不会在这些基本的难题上,给客户造成困扰。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

6、避免全部大写的情况T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

本来在英语言国家的网站中,使用全部大写的文本,是一个特别典型的设计上的忌讳。正如同 Miles Tinker 所说,全部的段落都使用大写字母,和小写字母相比,可读性有着明显的降低,直接反映在客户身上,就是文本的阅读速度明显降低了。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

7、留意控制行高T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在排版中,Leading,也就是行高,是一个非常常见的重要概念。在排版设计当中,行高也是很值得关注。换个更容易理解的概念来阐述这件事情,行间距,平常情况下,行间距应该是文本高度的30%,这样能够确保视觉上的清晰易读。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

Dmitry Fadeyev 发现,段落之间的间距假如控制好了,整个阅读效率能够提升20%。这样的布局能够让文本转化为客户更容易消化的内容,剥离无关的细节。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

8、确保色彩对比度合理T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

文本和背景应该有足够的对比度,文本越明显,客户就越能快速清晰地获取其中的信息。按照W3C的提示,文本和背景的对比是有规则的:T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

·较小的文本应当确保至少和背景之间有4.5:1的对比度比率T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

·较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对比度不足的时候,几乎无法进行阅读T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这些适合对比度的规范,易读性不错T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一旦你确定了配色,必需在尽或许多的设备上进行测试,让不同的客户来查看效果,尽量避免出现可读性的难题。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

9、避免使用红色和绿色的文本T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

红绿色盲是常见的视力障碍之一,通常使用彩色的文本而是用来区分重要信息的,但是红绿两色则或许会失去视觉传达的功能。即使只使用红色,有尽量搭配其他的区分方式。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

10、避免使用闪烁的文本T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

闪烁的文本确实能够引起客户的留意力,但是它存在的大难题是让人觉得不适,甚至会引起特定客户的癫痫类疾病。讨厌且令人分心的闪烁文本,无论从哪个角度上来看,全是得不偿失的设计失误。T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1-PIXIsMOrHGP8YnOQ3UsNug.gifT3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


T3A上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

原创不易,未经授权,严禁转载

原文地址:/i,72,7234,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。假如想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,要点是响应速度蛮快,有什么难题都会马上给你解决,公司很满意,因为他们全是针对每个项目建了相应的讨论组,有难题可以再里面提出,人员分工到位,解决难题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!