网页字体设计奇幻之旅【译】.pdf

网页字体设计奇幻之旅 【译】 (Shavaughn Haack著 T immliu Charrywang译 Sevenshao校正 查看原文 转载请注明出处) 第一印象 常就是一种持续印象。不管你是否意识到 ，你的版式能够帮助用户在他们甚至还没有开 始读一个字或者点击一个按钮之前建立一个体验。版式不仅 仅是讲述一个故事 ，它告诉用户是这个 网站的幕后以及这个背后的人是做什么的。对于字体的处理创造了一种氛围 ，同时也会像声音的音 调一样引起回想。 你需要问一问你自己 ，你想要表达什么以及你想要怎么去表达它 ？想一想用户 ：当页面加载的时候 你想让他们有什么样的感受和体验 ？版式建立一个交流的模式 ，同时 ，也表达了一个网站的个性。 字体的选择将会决定人们对你的网站的反馈。 以下的网站有着非常明显的个性 ，大部分都是 过版式来建立的。诚然 ，有时候他们并不是很完 美 （不幸的是 ，性能常常是个问题 ），但是他们 过字体来吸 引用户来产生兴趣。好的网页版式不 仅仅只是一个美好的视觉处理 ，同时也要注意速度。很多设计师彻底忽视了性能。请注意 ：这些网 站没有在老的浏览器或者移动 设备上做过测试。当然这不是这篇文章的主旨。相反的 ，我们将会近 距离的观察有趣的版式处理以及字体的创新使用。 精致的字体使用实例 Mat t Luckhurst 这个网页色彩斑斓也很有趣。首先映入眼帘的是活泼的衬线字母 ，接下来 ，　看起来很随意分散的 字母拼写出Mat t 的名字。悬停效果显示每个项目的示例图片 ， 这种做法非常有效 ，几乎是跳出字母 的限制。这个网站显示了字体可以作为平面元素合并在设计中。混合在一起的五彩有衬线字母打破 了经典 ，可能我们能够从衬线 字体中更清醒的找到创意。 Playf ul Wow 这个网站确实很幽默 ！这个网站的调调不是仅仅根据字体的特征而设计的 ，而是 过它们的排 版方式。它打破了我们的常规交流的顺序。 常你会在印刷海 报中看到轴对称的排版 ，那 常给人 印象深刻。在这个网站上 ，字体的选择并不是非常的有个性的装饰性或者是很好玩的装饰性字体 ， 它就是用的非常简单的无衬线 字体。非常棒的背景图案触觉体验 ，它引导阅读的方向 ，以及用户阅 读网站的文字时头部从一边到另一边的运动。 At elier 这个网站的所有地方都值得关注。整个页面由不同的元素组合在一起有一种动感。网站的logo是用 的一种宽的但是很优雅的字体 ，建立了一种设计基调。运动的 感觉是由一条倾斜的线来建立的 ，这 根倾斜的直线跟logo 中的首字母“A ”的倾斜保持一致 ，创建了这个网站的节奏。滑动的预览图深深 的抓住你的眼球 ，图片 很大让你感觉到无拘无束。然而 ，这个网站的背景图片居然有 ：2560*5350 像素 ，2.4 MB ，哎哟 ！ Cirp 这个为葡萄园设计的网站非常的独特和创新 ，设计的就像一个老式的海报。这个美丽的网站设计成 功的找到了一种葡萄酒的感觉。我喜欢”Russian River”后面的阴影会跟随着你的鼠标的移动而运动 从而在一个另外的静态页面创造出动感。这个地方最主要的缺点就是 ，从某中意义上说 ，文字是作 为图像而 嵌入到网站上的 ，可能会让文字无法复制和粘贴。还有 ，当然类似的设计被创造出来需要 不少于3.4 MB和4 3次HT T P请求。 max Di Capua 这里的布局和排版混合在一起是 过一套模板的系统建立的 ， 常是几个部分重叠在一起。这种布 局的方法很清新因为它不死板 ，并且非常容易改变。排版也是同样 的感觉 ，因为他们都有很大的 间距 ，不管是大量的文字还是稠密的文字。标题和说明性文字 ，以一种很容易阅读的无衬线字体出 现在作品的旁边。 Rijksmuseum 一种很常见的字体的巨大的字母在整个屏幕范围之内 ，还延伸到整个页面。使得“Rijksmuseum”看起 来比现实中的大很多。主页就 过循环漂亮的图片 来展示博物馆的内容。主导航也很有意思 ：当你 点击的时候 ，它会下滑然后让你选择子目录。整个网站的体积只有955KB以及31次HT T P请求—— 优化做的 很棒。 I shot Him 这个设计工作室的网站以一张写着欢迎你的照片来向你问候 ，这很新鲜。用户马上就有了一种置身 于这些设计师工作室的感觉。有一种陌生感 ，但是同时也感受到很 真实可靠。字体是焦点 ，但是不 至于太吵或者太压抑。我非常喜欢他们这种从完美的电脑中走出来展示他们自己独特的一面的方式 。尽管这个网页没有你期待的交互 那么好 ，这个工作室的个性就在这张照片上完美的显示出来了 ， 那就是有深度