《众妙之门——网页排版设计制胜秘诀》——第3章 设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计
本节书摘来自异步社区《众妙之门——网页排版设计制胜秘诀》一书中的第3章,第3.1节,作者: 【德】Smashing Magazine 译者: 侯景艳 , 范辰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第3章 设置网页字体的5 项原则和方法设置网页字体时,有一些基本的方法、指南和目的。总体来说,网页的版式应当具有可读性、易访问性、可用性和品牌特色。这四个方面相互作用,使网页设计达到与用户沟通和交互的目的。
为使网页富有表现力并给人留下深刻的印象,网页版式的设计有许多方法。让我们进一步看一些网页版式设计的原则、规则和方法—当你学习如何在网页上完成有效的字体设置时,可以把它们当作一个开端。
3.1 系统地进行网页版式设计在网页设计中,每个版面上的元素都需要同时实现各种各样的目标。创建的每个标题都应当使用容易辨认的字体,应当容易被搜索引擎找到,还应当契合公司的品牌理念。此外,版式应当配合页面的图形风格,符合用户的期望,使他们能够方便地复制和粘贴文字。正如你所知,一个标题需要满足数个需求。
但在某些情况下,这可能会造成一个问题。例如,为了迎合某种风格或品牌特色,设计师需要使用某种特定的字体,但这种字体又不能在网页上直接使用。这时,你就需要做出决定:
放弃品牌特色,使用容易被搜索引擎找到的字体; 使用图像代替文本,在图像中嵌入需要的字体(静态或动态)。可以考虑使用sIFR,这是一种闪存式的动态字体植入技术,你不仅可以将各种各样的字体植入网页中,还几乎可以像处理普通文字那样处理它们。
如果想了解更多关于sIFR或其他字体替换工具或技术的信息,可以在本书中查看相关章节。
这有一篇介绍sIFR的文章,sIFR 2.0: Rich Accessible Typography for the Masses。
在许多情况下,网页版式所绑缚的许多目标将会彼此冲突。面对不同的客户和项目,你必须在目标之间进行权衡,对它们的重要性进行排序。一些客户可能更关心网页的版式是否有助于品牌识别,而另一些客户可能想让搜索引擎处于更高的位置。
不同的版式所能解决的问题各异,也有不同的目标,而一个网页不可能满足所有的需求。不管你将哪个目标排在最重要的位置,都必须仔细考量它为网页版式所带来的优点和缺点。
当你在工作中遇到问题时,可以看看别的网站是如何处理类似问题的,这是研究和学习的一部分。在Typography For Headlines(关于标题的版式)上,收集了100多个网页标题的链接和截屏,对每个标题的设计都以一种独特而有创意的方式进行了处理。
在网页设计中,选择标题的字体是很常见的设计步骤,但这并不代表字体选择就是标题设计的全部。还有许多其他方面需要我们用系统的设计方法进行研究。下面让我们看一看关于信息层级的内容。
《超越平凡的平面设计: 版式设计原理与应用》—怎样运用对比确定字体风格 span "author-img" src="https://ucc.alicdn.com/avatar/img_7bf6099aa47aa474ad0f72d18c11f1c1.png?x-oss-process=image/resize,h_150,m_lfit" />
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍
- UE设计之让整个网站网页变灰的方法
- js实现网页中无法选取/复制/粘贴/剪切/拖放/禁用右键
- Java网页数据采集器[续篇-远程操作]【转载】
- javascript 编辑网页
- 《网站建设与网页设计从入门到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.3 添加文本元素
- 《众妙之门——网页排版设计制胜秘诀》——第3章 设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计
- Selenium Python 代码之打开网页自动填充内容并搜索
- flash 动画转gif在网页中使用的兼容性处理方法
- php银联网页支付实现方法
- 使用Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies(二)(转)
- 纯html实现将网页页面分享到微信朋友圈添加缩略图图片的方法
- 安卓中一句代码,解决拨号,定位,网页,卸载,安装,播放,邮件,短信
- Vue 之 Vue Cli 创建 Three js 工程( 网页 3D )的简单整理(一些注意事项)
- PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程
- RouterOS首次打开网页强制跳转