全国服务热线

0791-86810858

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

点击数:发布时间:2019-01-11
经常浏览各种必威体育备用网站的人知道,中文文字必威体育备用网站上目前使用的字体基本分为两类:宋体、微软雅黑。还有很少量的必威体育备用网站会使用黑体文字或其他特殊字体。
Windows7普及之前,中文必威体育备用网站上字体几乎是清一色的宋体。除了中文字符文件大的局限,还有下面几个原因:
>  阅读习惯:中国人长期阅读纸质书本和杂志,大量宋体文字培养了一种固定的阅读习惯。
>  操作系统默认:Windows操作系统本身自带字体有限,如果没有指定字体,操作系统默认使用宋体渲染。
>  不同操作系统、不同版本的兼容性:近几年国内Mac使用人群在增长,不同系统、不同版本预装的字体几乎没有交集。即使是有限的常用字体,比如宋体、仿宋、楷体,在Windows和OS X展示也有一些视觉差异,而为了尽可能减少这些差异,大家一般会选择“安全字体”,比如宋体、黑体。
Vista系统出现后,Vista和Windows7默认微软雅黑字体,当用户逐渐接受这种美观大方的字体后,设计师也开始在网页设计中大量使用微软雅黑。14497277587203.jpg在专业的网页设计里,除了Banner图、广告语等特殊情况可能会用到特殊字体,网页中使用的字体以不超过2种为准,并且最好采用标准字体,比如中文的宋体、微软雅黑,英文的Arial、Verdana。
只有使用这些系统自带的字体,才能让前端开发人员在排版时高程度地还原设计稿的文字效果。
说到这里,设计师们可能觉得字体选择性少,不过先别急着哭!本文以国内优秀中文必威体育备用网站字体应用及我们的实践经验为案例,分享如何只用宋体和微软雅黑这两款中文字体,同样设计出高大上的网页。14497277892247.jpg一、整站只用1种中文字体
悦读FM是一个汇集阅读、播音、音乐、摄影爱好者分享交流的平台,主要面对的人群是年轻人。这个必威体育备用网站上所有页面的文字,包括Logo的文字、导航、按钮、文章标题、正文等,都采用了微软雅黑字体,它们的区别只是在不同栏目和不同层级采用了不同字号。
在上一篇介绍文字性格的文章中,我们曾描述过微软雅黑给人的感受包括平和、干净、简单、平静、专业等。144972782248.jpg在悦读FM必威体育备用网站中,我们能看出这个必威体育备用网站整体设计风格就是干净简单,不论是网页布局还是图片搭配,都看起来清晰明了。这个平台定位是“倾听文字的声音”,用户在这个必威体育备用网站上的行为主要是听,文字则倾向于一种辅助作用。
用户在听的时候,可以时不时看看文字内容,微软雅黑这款字体很好地向用户展现出一种干净感,很符合必威体育备用网站想要传递的安静、清新的意境。14497278803018.jpg知乎网是一个网络问答社区,整个必威体育备用网站构成以文字为主,社区内的问答通常通过大篇幅的文字进行互动。这个必威体育备用网站整站采用了宋体,文字标题与字号和正文有明显的区别,这些设计突出了标题,也促进必威体育备用网站整体设计满足最高质、最深度、最有收获的阅读体验。1449727898841.jpg对字体的感受不那么强烈?那咱们试试把必威体育备用网站字体换成微软雅黑:14497279251713.jpg一眼看上去,换过字体后的网页好像没有什么大变化,似乎让必威体育备用网站还有了一种科技感。
但假如像下图这样呢?14497281022139.jpg大段的微软雅黑字体排列略显厚重,如果是在网页上长时间浏览,会让人的眼睛产生不适。相比而言,衬线字体装饰性强,具有易读性,所以宋体更适合知乎必威体育备用网站这种大段文字必威体育备用网站,它们看起来更舒适,并且宋体文字还能让用户注意力集中在文字内容上,更专注于信息而不是字体本身。
AnyForWeb为杜卡迪设计开发的公司必威体育备用网站中,除了图片中的特殊字体,整站中文字体采用了微软雅黑。
与悦读FM必威体育备用网站的清新风格不同,我们能明显感受到这个必威体育备用网站传达另一种感觉:现代化、速度与激情、酷炫,同时还有一种力量感。14497281225759.jpg我们再试试把必威体育备用网站字体换成宋体:14497281408008.jpg呃,怎么看都觉得哪里不对!宋体在这里看起来太轻了,完全不能表达文字阐述的“释放”“动力”“速度”的感觉。而微软雅黑虽然不像某些特殊字体那样传达强烈的速度感,但如果要选择网页中文字体,干脆利落的微软雅黑是一个很好的选择。
二、2款中文字体灵活搭配
如果你觉得只用一款中文字体太单调,还可以灵活搭配两款字体,提升用户的阅读体验。我们以优秀案例说明:
简书是一个让用户专注写作和阅读的平台,它为用户提供了两款字体选择模式:宋体、黑体。
头部的筛选标签文字在两种模式下都是微软雅黑字体,用小字号仍然确保了显示的清晰度。14497282096229.jpg在黑体模式下,整站就只采用微软雅黑字体,文章详情页的标题以加粗突出展现。这时候我们感受到的就是简洁干净。
为了避免长篇文字带来的厚重感,简书采取自动分段功能,并且正文有固定的字号和行间距,这种排版布局让写作者和阅读者都感到舒适。14497282294149.jpg在宋体模式下,首页文章标题是加粗宋体,作者名称和文章发布时间的小字也是宋体,下面的阅读和评论部分使用了微软雅黑。14497282675344.jpg文章详情页的标题使用了楷体,正文内容则是宋体。这种模式下浏览网页,我们可以感受到一种文艺和优雅。14497282864698.jpg如果只使用宋体,这个页面可能会略显普通,所以不要小看了这一处楷体的应用,这款俊雅字体的应用让整个页面散发出一种书卷气息,可谓是点睛之笔。
而且大家不要忘了,楷体也是系统预装的字体之一,设计时不用顾虑排版问题。
另一个案例是AnyForWeb为汉路律师事务所设计开发的必威体育备用网站。
在看到图之前,我们先想一下:律师行业必威体育备用网站应该给人什么感觉?
传统、专业、公正、官方、权威?没错!而具备这种特征的字体非宋体莫属。我们来看必威体育备用网站展示:14497283171484.jpg在这个必威体育备用网站中,Logo本身已经传达了传统文化的感觉,如果文字全部采用宋体肯定会让必威体育备用网站显得呆板不生动。所以设计师在导航栏应用了黑体,标题部分则使用了微软雅黑加粗,这样搭配起来,既展现出专业的特征,又让必威体育备用网站显示出一种小小的独特。
经验提炼:根据必威体育备用网站定位、整体设计风格以及文字性格选择字体。可以通过加粗、增加字号、文字颜色突出标题。
从这些案例中我们就能知道,在分析了必威体育备用网站定位、用户人群,确定了设计风格后,只用常规的几款字体,我们一样可以设计出高客户满意度的作品。
上一篇:别让扁平化设计平淡无奇
下一篇:好的字体让你的网页设计“倾国倾城”