论坛风格切换
您好,欢迎光临本站!   登录 注册新用户
  • 2212阅读
  • 0回复

[网站优化]网页视觉效果,别让字体成为败笔 [复制链接]

上一主题 下一主题
 
发帖
47
黑豆
211
威望
211
贡献值
0
交易币
0
红豆
0
只看楼主 倒序阅读 0 发表于: 2016-03-01
当我们浏览网页时,图像往往能在视觉上首先吸引人的注意力,一个好的图片设计可以大大美化页面。和文字相比,网站上图片传达的视觉印象要强烈得多。设计师们也一直注重对图像的创意设计、网页版式设计以及色彩搭配,它们是视觉传达的重要手段。
然而,图片再精美、版式再好,也招架不住字体的败笔所带来的损失。
在网页的构成元素中,文字的设计与编排是重要元素之一,它们虽然占据的存储空间非常小,但在网页上占据的面积却是不容忽视的。对设计师来说,文字除了表达含义,还应该具有传递感情的功能,这种传递就需要通过字体、字号以及颜色来表达了。
博达软件先和大家分享两个关于网页的中文文字设计现象。
现象1:
除了设计师、前端技术、策划、排版印刷等职位的人员对文字有一定的敏感度外,实际上大多数用户对文字的字体和字号没什么概念。
这里的没概念是指,虽然用户对正在浏览的网页有一个大致印象,可以说说自己对网站的直观感受,比如网站好不好看、风格是否吸引人等。但他们并不是很在意这个网页使用的是什么字体,甚至不知道造成视觉疲劳的罪魁祸首可能正在于一个字号的“小小”选择。
现象2:
经常听到设计师们抱怨网页设计中可供选择的中文字体太少,创意字体即使设计出来也没法实现,或者实现成本太大,大大限制了他们创意的发挥。我们也看到很多设计教程都建议设计师们不要在中文字体上做太多创意。
先从视觉角度说明:我们能很明显看出,英文是线条结构,中文是方形结构。从构图设计的角度看,英文字母比中文更具有几何符号的感觉,图形感会更丰富;从字形的角度看,英文采用的拉丁字母包括大小写一共52个,而且字形都比较简单,符号数量少便于识别,字形简洁便于设计,而中文的笔画很多过于密集,不利于字体设计。
然后我们再了解以下事实:
用户的操作系统中自带的字体有限,若使用创意字体,打开网页前还需要下载,通常英文字体只有几百KB,因为它只需要包含数字、标点、英文字母即可。而中文字符文件庞大,动辄数个MB,甚至十几MB,下载时间一般比较长,往往导致网站打开速度慢,可能特殊字体还没看到,用户已经关闭网页了。
从谷歌9月份换了新logo就能看出,这种圆不隆冬的几何无衬线字体已经成为流行,最大的优势在于在电子屏幕上更容易看清。
其实,设计师在选取或设计字体时实际上还需要考虑一些其他因素:比如是否适合符合网站的整体风格,前端技术人员是否能实现效果,以及浏览器的兼容性,在不同系统展示效果等。
C&CCoffee Company网站的手写风格字体与网页里其他元素巧妙呼应,在色彩和布局上展现了高度的统一,网站整体在视觉上传达着手工特色,与产品本身具备的特色保持着一致。
Beg Bicycles网站在不同位置使用了多种字体,logo、导航、图片里的文字等,这些文字并没有让网页布局显得混乱,反而引导用户的视觉有层次地展现不同板块的内容,营造出清新和淡淡的复古感。
    trippeo整站都采用了无衬线字体,这些文字让整个网站看起来干净利落,并且在显示器上阅读起来不费力,非常适合不同设备浏览,是近来科技行业流行的字体。
从以上案例中,我们可以看到国外网站字体的多样化,其中衬线字体主要展现的感觉可以概括为精致、优雅,比较适合大篇文字,主要代表为Time New Roman;而无衬线字体看起来干净简洁,给人自由悠闲的感觉,很有亲和力,适合作标题,主要代表为Arial。
看到这些案例后,也许会有设计师好奇:为什么国外网站字体做出来的效果那么好看,但我们在设计网页时总觉得无法达到那种效果?
的确,英文字体设计更具多样化,但国内网页设计的字体并非没有发挥空间。
如何保证网页整体文字设计的规范性?
网页设计规范:字体选择
在选择字体上,尽量选择系统默认的或通用字体,保证浏览器能够正确识别并显示出正常的文字。
我们以宋体和微软雅黑为例:
1.宋体
宋体是最常见的中文字体,在没有指定字体的情况下,浏览器往往选择它来渲染。但很多人认为这种字体并不美观。
NoNoNo,并不是这样!举个例子,右侧对客户案例的描述文字正文内容就是采用的宋体12px,配上18px的微软雅黑标题,层次清晰,让人一目了然,同时展现的美观度丝毫不弱。
2.微软雅黑
微软雅黑可以作为网站首选字体,它的美观度和清晰度都较好。
整站使用微软雅黑字体,在不同板块灵活应用了不同的字号,文字层次很清晰。文字与卡片式设计风格融合在一起,让整个网站显得干净大方,富有亲和力。
我们再来说说宋体和微软雅黑的一些区别。
宋体是衬线字体,微软雅黑是无衬线字体,宋体在视觉上更纤细。和宋体相比,微软雅黑的字形不是正方形的,而是稍微的扁宽,字间距很小,这样会使默认的行间距更明晰,同时微软雅黑的字心显得更饱满。所以在同样的字号下,雅黑的单字面积显得更大,更容易识别。
标题字体使用微软雅黑更适合,正文内容可以根据设计风格和需求灵活选择。不过在手机端查看时,我们很明显感觉到微软雅黑字体更赏心悦目。
除宋体和微软雅黑字体之外,设计师们还可以根据实际需要选择其他经典通用字体,比如Windows自带的中文字体黑体、仿宋、楷体等,以及英文字体Arial、Vardana等等。
网页设计规范:字号选择
CSS里面常用描述字体大小的单位主要是em和px。其中em在跨平台设备字体处理上很有优势,在常规网页设计中,我们通常更多采用px作为单位。
这里以px为例,网页设计中一般使用14px 作为标准字体,16px 作为中等字体,18px 作为较大字体,12px作为偏小字体。当然,我们这里说的只是一种比较通用的标准,实际上如何选择字号需要设计师根据网页整体设计布局来确定。
在页面自适应的设备上,比如手机屏幕分辨率比PC端的低,这些因素也是设计师需要考虑的。
网页设计规范:文字设计的规范性
大家应该记得一点:虽然我们看到很多网站页面的分享,但这些页面都是属于不同网站的,而用户关注的是一个网站的整体。所以对于设计师来说,他们在设计网页时应该考虑所有页面规范和一致性。
初级设计师比较容易犯一些细节错误,比如同一层级下的不同页面出现字体不一样,字号不统一,字间距不一致的情况等等。
如果想让文字部分看起来有创意,我们可以怎么做?
使用不同颜色的文字突出重点
段落加上装饰性设计元素
重点文字内容字体加粗
文字与背景色形成高对比度
设计师还可以通过增加其他创意元素的方式来突出文字内容,给设计增加亮点。
快速回复
限100 字节
 
上一个 下一个