创意之前,使用2款字体设计高大上的网页

分享到:更多 ()

经常浏览各种网站的人知道,中文文字网站上目前使用的字体基本分为两类:宋体、微软雅黑。还有很少量的网站会使用黑体文字或其他特殊字体。

Windows7普及之前,中文网站上字体几乎是清一色的宋体。除了中文字符文件大的局限,还有下面几个原因:

>  阅读习惯:中国人长期阅读纸质书本和杂志,大量宋体文字培养了一种固定的阅读习惯。

>  操作系统默认:Windows操作系统本身自带字体有限,如果没有指定字体,操作系统默认使用宋体渲染。

>  不同操作系统、不同版本的兼容性:近几年国内Mac使用人群在增长,不同系统、不同版本预装的字体几乎没有交集。即使是有限的常用字体,比如宋体、仿宋、楷体,在Windows和OS X展示也有一些视觉差异,而为了尽可能减少这些差异,大家一般会选择“安全字体”,比如宋体、黑体。

Vista系统出现后,Vista和Windows7默认微软雅黑字体,当用户逐渐接受这种美观大方的字体后,设计师也开始在网页设计中大量使用微软雅黑。

在专业的网页设计里,除了Banner图、广告语等特殊情况可能会用到特殊字体,网页中使用的字体以不超过2种为准,并且最好采用标准字体,比如中文的宋体、微软雅黑,英文的Arial、Verdana。

只有使用这些系统自带的字体,才能让前端开发人员在排版时高程度地还原设计稿的文字效果。

说到这里,设计师们可能觉得字体选择性少,不过先别急着哭!本文以国内优秀中文网站字体应用及我们的实践经验为案例,分享如何只用宋体和微软雅黑这两款中文字体,同样设计出高大上的网页。

一、整站只用1种中文字体

悦读FM是一个汇集阅读、播音、音乐、摄影爱好者分享交流的平台,主要面对的人群是年轻人。这个网站上所有页面的文字,包括Logo的文字、导航、按钮、文章标题、正文等,都采用了微软雅黑字体,它们的区别只是在不同栏目和不同层级采用了不同字号。

在上一篇介绍文字性格的文章中,我们曾描述过微软雅黑给人的感受包括平和、干净、简单、平静、专业等。

在悦读FM网站中,我们能看出这个网站整体设计风格就是干净简单,不论是网页布局还是图片搭配,都看起来清晰明了。这个平台定位是“倾听文字的声音”,用户在这个网站上的行为主要是听,文字则倾向于一种辅助作用。

用户在听的时候,可以时不时看看文字内容,微软雅黑这款字体很好地向用户展现出一种干净感,很符合网站想要传递的安静、清新的意境。

知乎网是一个网络问答社区,整个网站构成以文字为主,社区内的问答通常通过大篇幅的文字进行互动。

这个网站整站采用了宋体,文字标题与字号和正文有明显的区别,这些设计突出了标题,也促进网站整体设计满足最高质、最深度、最有收获的阅读体验。

对字体的感受不那么强烈?那咱们试试把网站字体换成微软雅黑:

一眼看上去,换过字体后的网页好像没有什么大变化,似乎让网站还有了一种科技感。

但假如像下图这样呢?

大段的微软雅黑字体排列略显厚重,如果是在网页上长时间浏览,会让人的眼睛产生不适。相比而言,衬线字体装饰性强,具有易读性,所以宋体更适合知乎网站这种大段文字网站,它们看起来更舒适,并且宋体文字还能让用户注意力集中在文字内容上,更专注于信息而不是字体本身。

AnyForWeb为杜卡迪设计开发的公司网站中,除了图片中的特殊字体,整站中文字体采用了微软雅黑。

与悦读FM网站的清新风格不同,我们能明显感受到这个网站传达另一种感觉:现代化、速度与激情、酷炫,同时还有一种力量感。

我们再试试把网站字体换成宋体:

呃,怎么看都觉得哪里不对!

宋体在这里看起来太轻了,完全不能表达文字阐述的“释放”“动力”“速度”的感觉。而微软雅黑虽然不像某些特殊字体那样传达强烈的速度感,但如果要选择网页中文字体,干脆利落的微软雅黑是一个很好的选择。

二、2款中文字体灵活搭配

如果你觉得只用一款中文字体太单调,还可以灵活搭配两款字体,提升用户的阅读体验。我们以优秀案例说明:

简书是一个让用户专注写作和阅读的平台,它为用户提供了两款字体选择模式:宋体、黑体。

头部的筛选标签文字在两种模式下都是微软雅黑字体,用小字号仍然确保了显示的清晰度。

在黑体模式下,整站就只采用微软雅黑字体,文章详情页的标题以加粗突出展现。这时候我们感受到的就是简洁干净。

为了避免长篇文字带来的厚重感,简书采取自动分段功能,并且正文有固定的字号和行间距,这种排版布局让写作者和阅读者都感到舒适。

在宋体模式下,首页文章标题是加粗宋体,作者名称和文章发布时间的小字也是宋体,下面的阅读和评论部分使用了微软雅黑。

文章详情页的标题使用了楷体,正文内容则是宋体。这种模式下浏览网页,我们可以感受到一种文艺和优雅。

如果只使用宋体,这个页面可能会略显普通,所以不要小看了这一处楷体的应用,这款俊雅字体的应用让整个页面散发出一种书卷气息,可谓是点睛之笔。

而且大家不要忘了,楷体也是系统预装的字体之一,设计时不用顾虑排版问题。

另一个案例是AnyForWeb为汉路律师事务所设计开发的网站。

在看到图之前,我们先想一下:律师行业网站应该给人什么感觉?

传统、专业、公正、官方、权威?没错!而具备这种特征的字体非宋体莫属。我们来看网站展示:

在这个网站中,Logo本身已经传达了传统文化的感觉,如果文字全部采用宋体肯定会让网站显得呆板不生动。所以设计师在导航栏应用了黑体,标题部分则使用了微软雅黑加粗,这样搭配起来,既展现出专业的特征,又让网站显示出一种小小的独特。

经验提炼:

根据网站定位、整体设计风格以及文字性格选择字体。

可以通过加粗、增加字号、文字颜色突出标题。

从这些案例中我们就能知道,在分析了网站定位、用户人群,确定了设计风格后,只用常规的几款字体,我们一样可以设计出高客户满意度的作品。

本文就先介绍到这里,下一期我们为大家分享网页设计最佳实践经验分享之字号篇。

 

本文最初由AnyForWeb UED视觉发布

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 创意之前,使用2款字体设计高大上的网页

0
分享到:更多 ()