第一印象通常就是一种持续印象。不管你是否意识到，你的版式能够帮助用户在他们甚至还没有开始读一个字或者点击一个按钮之前建立一个体验。版式不仅仅是讲述一个故事，它告诉用户是这个网站的幕后以及这个背后的人是做什么的。对于字体的处理创造了一种氛围，同时也会像声音的音调一样引起回想。

你需要问一问你自己，你想要表达什么以及你想要怎么去表达它？想一想用户：当页面加载的时候你想让他们有什么样的感受和体验？版式建立一个交流的模式，同时，也表达了一个网站的个性。字体的选择将会决定人们对你的网站的反馈。

以下的网站有着非常明显的个性，大部分都是通过版式来建立的。诚然，有时候他们并不是很完美（不幸的是，性能常常是个问题），但是他们通过字体来吸引用户来产生兴趣。好的网页版式不仅仅只是一个美好的视觉处理，同时也要注意速度。很多设计师彻底忽视了性能。请注意：这些网站没有在老的浏览器或者移动设备上做过测试。当然这不是这篇文章的主旨。相反的，我们将会近距离的观察有趣的版式处理以及字体的创新使用。

精致的字体使用实例（20-38）

（20）Ewket

http://ewket.co.uk/

这是个简单的扁平化设计的网站。用最基本的造型设计，就像油画的第一层。Ewket在埃塞俄比亚致力于基础教育事业。网站内容所使用的字体Andale Mono并不是你所期待的那样，但是它能够读懂。这个字体是一种锋利的无衬线字体，有一种空荡荡的感觉。Ewket是一个基层项目，所以它的整个设计看起来非常的基本和简单，也映照了它的功能。然而，它并没有很好的对应它的性能，4.6MB和58次HTTP请求显得有点没必要的多余。

（21）The Dissolve

http://thedissolve.com/

我喜欢它的铭牌，它营造了一种老式的电影院的感觉。对比起文章的衬线字体来讲，这种字体有一种古老的感觉。这个网站有一种简单，干净和非常复杂的老电影的体验。导航条的设计让顶部的空间得到的了很好的应用。一旦这个网站的视觉识别跟它的铭牌一起建立起来，当你把鼠标悬停在上面的时候，不同的分类广告就会出现在铭牌的位置。

（22）The whig

http://www.thewhig.org/

这个餐厅是一个可以坐下来，放松，和你的小伙伴们喝一杯的地方。Medula One字体被用来诠释这样一种感觉。这种无衬线字体非但不会显得过分装饰而且它的笔刷线条有一种中世纪的感觉 。它非常的友好而不做作，很好的映衬了这个小bar的氛围。

（23）Find&Form

http://findandform.com/

干净，单色的审美特征，这个网站让内容文字减少到最少。网站的排版很简洁和低调，让图片本身来说话。单色的字体在这里看起来有一点特别，但是，它传达了这个团队的口号那就是“数码世界渴望古老的校园工艺”。这种审美是跟我们同一时代的。另外非常有趣的就是当你向下滑动到网站的底部的时候，导航条会水平移动到右边，这样可以给整个网站其他的内容留下一些空间。

（24）Carrera

http://carreraworld.com/us/

Carrera网站的设计有一种永恒的魅力，正如它的产品真实且永恒。网站的设计应该要符合产品设计的气质。这个眼镜公司则援引其目标之一“在传统与时尚之间达成完美平衡”。简单，粗体的大写字体实现了这一点，既有传统的感觉又不会落伍或过时。尽管字体上与logo风格有很大的不同，但很大胆和醒目。同时值得一提的是，有趣的鼠标悬停效果也是整个网站与众不同的部分。

（25）Myfelt

http://www.myfelt.de/

该网站所用的字体样式非常友好温暖，文案插图与产品气质也是一致的。所有这些元素加在一起都传达着同样的讯息。这个网站让我很感兴趣的一点是，地毯上的点融入了logo和铭牌。

（26）Vogue

http://www.vogue.es/

设计师Claus Eggers Sørensen设计的Playfair Display字体，带来一种大胆而不张扬的格调。优雅的衬线体与Vogue的品牌相得益彰。对于设计师而言，将字体放到更大字号时看上去更佳。

（27）All Saints Estate

http://www.allsaintswine.com.au/

用字体来达到传统又优雅的风格有很多种方法，该网站则恰到好处的混合了衬线体和少量无衬线体。Garamond Premier Pro Display字体看上去既现代又精致，与正文文本匹配的精致完美，而且与葡萄园和葡萄酒也很合适。

（28）Evening Edition

http://evening-edition.com/

铭牌的黑体字的字体与传统的印刷报纸是一致的。它会给人权威庄严感，新闻来源与小报以示区分。

（29）Served MCR

http://www.served-mcr.com/

这个有趣的涂鸦风格的网站是为了一个乒乓球比赛。排版看上去很原始的手绘风格。在一些区域，会有一些元素是动画或是动画的背景。在网页设计中动画并不常用，但在这它很好的吸引了用户的注意力。注册的条目就是这样一个例子，文字清晰并且突出。由于文字并不是很多，这种排版是合适的，依然可以保持网站的易用性。然而，页面的性能却很糟糕，页面大小有7.5MB，175次HTTP请求。不论是在电脑还是在移动端，主要背景图片有2032*4761像素，2.2MB大小。

（30）Enso

http://helloenso.com/

大字号，加粗，全大写的无衬线体映入眼帘，就好像它在呐喊一样。然而，Enso也使用柔和的色调来调和这种大胆的版式——尽管黄色有一点难以阅读。这种布局很新颖很有趣；设计师想让你注意到这种页面从上到下的版式，同时向下滚动看到全部的信息。这是一个很聪明的做法，因为导航是散落在页面各处的亮粉色文字。Logo在页面顶部作为首页按钮，当鼠标滑过时推出整个单词。

（31）Crafting Type

http://craftingtype.com/

该网站就是关于样式设计的，所以它的排版就是在推销自己。在Logo上，纤细的大写“Crafting”和厚重的小写“type”之间的对比创造了一种视觉的平衡。正文采用大字号保证可读性。衬线字体和简洁大方的布局也有助于可读性。

（32）Nautilus

http://nautil.us/

这个漂亮的网站整齐，干净，且易于浏览。排版起了很大的作用，而且所用的三种字体来自于同一系列。这是一种区分样式的很好的方法，可以保持一致性而且不干扰美感。不幸的是，这种网页排版也有其代价：12.6MB大小和73次HTTP请求，还有两张超大图片，分别是3.5MB和2.4MB。

（33）Kick My Habits

http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/

到这个页面你第一眼看到的就是这个厚厚的粗体“Kick My Habits”。瘦瘦的字体（叫做KG How Many Times）以其迷人的手写风格，与其他粗体形成对比。这个设计漂亮图文并茂的网站是用一种轻松、非正式的方式来测试你在坏习惯上浪费了多少钱，而且这个网站也不会占用很多网络带宽。包括所有页面上的图片在内，它只有1.2MB，尽管初次加载时会有161次HTTP请求，更多的内容只有在需要时才会加载。

（34）Monocle

http://monocle.com/

Monocle是一个有着经典品质的漂亮的网站。它使用了不同磅数的衬线体和非衬线体，看上去简单大方。Monocle是一个全球性新闻网站，主要聚焦在国际事务，商业，文化以及设计。布局很创新，同时也提供了所有用户需要的东西。类别用标签来承载，用子类别来削减信息层级。

（35）Rezo Zero

http://www.rezo-zero.com/

Julien Blanchet的自定义字体独特而又引人注目。它建立了品牌身份，在单色网站背景上使用薄荷绿。这种字体既没有过度使用也没有充分利用，而是以logo美丽的诠释了它。

（36）More Sleep

http://www.moresleep.net/

简洁，但友好且诱人！这就是我第一次访问该网站的感觉。大字号以及略显圆润的边角就有一种友好的感觉。打字机风格的字体用于描述和解释，有着一种圆润，柔软，温馨的情调。

（37）Lenta

http://lenta.ru/

Lenta是一个俄国新闻网站。神奇的是，该类型的图片质量是怎样引导你，并影响你对于网站及其内容的看法。任何新闻网站的身份都是由其铭牌建立的。这里使用的是一个干净的无衬线字体，用粗体来传达新闻来源的权威性。当文字被翻译成其他语言时，这个字体仍然有效。保持着传统新闻的布局的情况下，整个网站的文章和广告牌都使用了衬线字体。

（38）Pixel Recess

http://recess.unitedpixelworkers.com/

Pixel Recess使用的是无衬线字体Adelle Sans，这种字体整齐清晰，并且在屏幕上显示效果很棒。然而更耐人寻味的是标题字体，Zeitgeist，它有点扭曲，像素化，甚至是有点模糊的外观，在左上角的操场那一侧也是同样的感觉。像素化在传统上会被认定为是一个错误的用法，但由于网站上其他地方是尖锐的，这里会格外吸引注意力——确实是一个聪明的做法。

结论

这不仅仅关乎你说什么，而是你怎么说，是吧？根据你的目的，我们可以尝试更多，在排版上也更有创意。我们可以大胆的使用大字号，粗体，或是新奇独特的手写体。我们应该始终记得字体要有可读性，因为如果没有人能阅读的话，这样的字体就没什么可以炫耀的。如果设定了韵律和风格，字体可以做出如此多的设计。

漂亮的字体和大片区域的背景图片很容易让人分心。但我们也不能忽略性能。自定义的网页字体会降低加载速度，所以让我们找方法来解决这件事。

最后，如果你探索到了更有趣的对字体极为讲究的网站，一定要联系Typewolf和Font in Use。

原文来自：腾讯MXD

回复数字0，即可查看【IxDC2014游戏用户体验大会】相关信息噢。

回复所在城市的大写首字母即可查看对应城市的展讯（例：广州回复GZ即可查看）。

目前开通的城市有：广州 上海 北京 成都 深圳

相关阅读（回复数字即可查看对应资讯）：

31.《怀旧风格的网页设计欣赏》

32.《【IxDC欣赏课】音乐播放器界面设计》

33.《【IxDC欣赏课】奇特有深度的LOGO设计》

34.《【IxDC欣赏课】20个精心设计的旅游观光网站设计》

35.《【IxDC欣赏课】简约但不简单的名片设计》

36.《从科幻电影中学习手势操作》

转载是一种智慧，分享是一种美德；赠人玫瑰，手留余香；请用你的分享照亮无数人的人生。

喜欢本文请点击右上角将文章分享到朋友圈或者发送给朋友。

未关注用户点右上角查看官方账号，点击关注！

关于我们：

IxDC（微信号：ixdcorg）：致力于引领中国交互设计行业行业发展，每天发布设计类资讯，让你快乐收获新资讯。