首页 > 建站资源 > 网站优化 > 设计干货:网站字体排版设计的10个基本规则

设计干货:网站字体排版设计的10个基本规则

时间:2017-10-20    来源:人人都是产品经理

注:优化网站文字排版也是优化用户界面的一种方式。 在本文,作者将分享一组帮助你提高文本内容的可读性和易读性的规则。

“沟通”在设计中起着至关重要的作用 – 它能建立网站和用户之间的联系,并帮助用户完成他们的目标。 当我们谈论在网页设计方面的沟通时,通常是指文本的输出。

排版在这个过程中起着至关重要的作用:网络上的信息95%以上的是在书面语言的形式存在。良好的文字排版使阅读的行为轻松,而体验不好的文字排版导致用户关闭网页。“网页设计是95%排版设计”:

优化排版是优化界面可读性,可访问性,可用性,使整体平衡的关键。

换句话说:优化网站文字排版也是优化用户界面的一种方式。 在下面的文章中,我将提供一组帮助你提高文本内容的可读性和易读性的规则。

1.尽量使用少的字体

使用超过 3 种不同的字体会使网站看起来缺乏结构化和不专业。 注意,较多的字体样式使用一次都可能破坏所有布局。

为了防止这样的情况,尝试将字体数量减少

一般来说,将字体数量限制在最小限度(两个算多的,一个是正好的)。 如果你使用一个以上的字体,确保字体具有系列感,且基于其字符宽度是相得益彰。 采取下面的字体组合的例子。 Georgia和Verdana(左)的结合,共同创建一个和谐的配对相似的价值观。 与此相比,Baskerville和Impact( 右),极大地掩盖了衬线相对应的不匹配度,形成较好的视觉体验。

在基于其字符宽度的标准下确保字体系列相得益彰

2.尝试使用标准字体

字体嵌入服务(如Google Web字体或Typekit)有许多有趣的字体,可以为您的设计提供创新、新鲜的和意想不到的效果,它们使用起来也非常方便。以Google为例:

选择任何字体,如Open Sans。

生成代码并粘贴到HTML文档中。

完成!

这个情况下不会出错么?

其实这种做法有两个问题

  1. 不是每个人开启浏览器都可以访问到同一种字体,这意味因为您选择的用户体验较好的字体将无法展示在所有用户面前。

  2. 用户更熟悉标准字体,因此可以更快地读取它们想要的信息。

除非您的网站有足够吸引人的自定义字体(如品牌宣传或创建身临其境的体验),否则最好使用系统字体。更为安全的做法是使用的系统字体是:Arial,Calibri,Trebuchet等。请记住,良好的文字排版会将读者吸引到内容,而不是文字本身。

3.限制文本线长度

每行放置适当的字符数量是文本可读性的关键,它不仅是你的设计,决定你的文本的宽度,它也应该是一个可读性的问题。从Baymard研究所考虑有关可读性和文本线长度的建议:

“如果你想要一个很好的阅读体验,你应该限制每行大概 60 个字符。每行拥有适当的字符数量是文本可读性的关键。”

如果一行文本太短,眼睛必须经常转回,打破读者的节奏。 如果一行文本太长,用户的眼睛也难长期专注于单行文本。 图片来源:材料设计

对于移动设备,基本保持每行30- 40 个字符。 以下是在移动设备上查看的两个网站的示例。 第一个使用每行(每行字符印刷和桌面的最佳数量)50- 75 个字符,而第二个使用最佳30- 40 字符。

在网页设计中,您可以通过使用像素限制文本块的宽度来实现每行最佳数量的字符。

相关推荐
在UI设计中如何科学地提高文本可读性?
为什么你爱用的App,都用卡片式设计?优势在哪?
手淘首屏设计是如何用户逛得停不下来?
版式设计中的那些小细节不容忽视
产品设计:帮助中心到底应该怎样改版?
前端开发如何做好SEO优化的工作
提高网页转化率的5个设计技巧分享
5个要点:教你提升在线业务的页面转化率
网站优化:9个建议大大提高网站的用户体验
良好的网页设计对SEO和用户粘度有何好处?
十四年来 百度上线新首页 改版的背景与逻辑
网站优化实战之如何进行用户体验检测?
网页设计必读!125个小优化提升网页可用性(二)
网页设计必读!125个小优化提升网页可用性(三)
优化高跳出率着陆页的正确姿势——忘掉跳出率!
那些让你忍不住买买买的购物网站会这样设计网页
手机刷网页也可以很畅快,背后有这12个设计原则
网页轮播图如何设计才是适当和有用的?
3大原则决定设计一个好的新闻类内容详情页
电商后台设计怎么做?万字长文告诉你!
想让网页可读性更强?你得善用这个 F 式布局
电商网站设计:购物车营销功能设计思考
网站改版设计:米大师web改版之设计总结
电商设计:详情页如何消除用户疑虑,轻松提升转化率?
让网站404页面变的更加实用的5个技巧
建站指南:网页设计的目的有哪些?
网页设计:网站管理后台的表单和表格设计分析
网页设计需要注意的12个常见问题
网站设计指南:怎样与千禧一代建立联系?
网站设计规范:应该做什么,不该做什么?
20个主页设计实用技巧分享 助您打造超完美网页
极简设计能显著降低网站跳出率
网页设计:如何使登录页更完美与高效?

精彩推荐

热门教程