企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

建站知识

Website development

北京网站设计云智提醒设计师别让网页中的文字禁锢了你

发布时间:2015-12-02 09:08:39

TAGS:汽车网站设计策划书,java小型购物网站设计

北京网站设计云智先和大家分享两个关于网页的中文文字设计现象。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现象1:Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

公司前端技术同事看到我上周写的《好的字体让你的网站“倾国倾城”》后,主动和我聊了排版网站文字的各种心得体会,他提到的一个现象让人很意外:除了设计师、前端技术、策划、排版印刷等职位的人员对文字有一定的敏感度外,实际上大多数用户对文字的字体和字号没什么概念。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

他说的没概念是指,虽然用户对正在浏览的网页有一个大致印象,可以说说自己对网站的直观感受,比如网站好不好看、风格是否吸引人等。但他们并不是很在意这个网页使用的是什么字体,甚至不知道造成视觉疲劳的罪魁祸首可能正在于一个字号的“小小”选择。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现象2:Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

经常听到设计师们抱怨网页设计中可供选择的中文字体太少,创意字体即使设计出来也没法实现,或者实现成本太大,大大限制了他们创意的发挥。我们也看到很多设计教程都建议设计师们不要在中文字体上做太多创意。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这种现象也是AnyForWeb上一篇文章中设计师的问题:为什么国外网站字体做出来的效果那么好看,但我们在设计网页时总觉得无法达到那种效果?Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

先从视觉角度说明:我们能很明显看出,英文是线条结构,中文是方形结构。从构图设计的角度看,英文字母比中文更具有几何符号的感觉,图形感会更丰富;从字形的角度看,英文采用的拉丁字母包括大小写一共52个,而且字形都比较简单,符号数量少便于识别,字形简洁便于设计,而中文的笔画很多过于密集,不利于字体设计。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

然后我们再了解以下事实:Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

用户的操作系统中自带的字体有限,若使用创意字体,打开网页前还需要下载,通常英文字体只有几百KB,因为它只需要包含数字、标点、英文字母即可。而中文字符文件庞大,动辄数个MB,甚至十几MB,下载时间一般比较长,往往导致网站打开速度慢,可能特殊字体还没看到,用户已经关闭网页了。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> 网站排版 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站策划</a> 网站版式设计Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

从以上真实情况可以了解,其实我们不必纠结于网站的字体设计无法发挥创意,因为用户在意的不仅仅是字体设计的创意,而是网站整体给人的感受,因此AnyForWeb认为:设计师对文字的创意可以通过其他方向的发挥来让用户对你的网页设计印象深刻。比如,保证网页整体文字设计的规范性、增加修饰文字段落的创意,以及对少量特殊字体的灵活应用。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一、如何保证网页整体文字设计的规范性?Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

> 网页设计规范:字体选择Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在选择字体上,AnyForWeb建议设计师们尽量选择系统默认的或通用字体,保证浏览器能够正确识别并显示出正常的文字。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们以宋体和微软雅黑为例:Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1.宋体Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

宋体是常见的中文字体,在没有指定字体的情况下,浏览器往往选择它来渲染。但很多人认为这种字体并不美观。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

NoNoNo,并不是这样!举个例子,在下面AnyForWeb网站的案例中,右侧对客户案例的描述文字正文内容就是采用的宋体12px,配上18px的微软雅黑标题,层次清晰,让人一目了然,同时展现的美观度丝毫不弱。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> 网站排版 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站策划</a> 网站版式设计Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2.微软雅黑Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

微软雅黑可以作为网站首选字体,它的美观度和清晰度都较好。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在优度旅游网站中,网站首页采用了Metro风格,整站使用微软雅黑字体,在不同板块灵活应用了不同的字号,文字层次很清晰。下图中文字与卡片式设计风格融合在一起,让整个网站显得干净大方,富有亲和力。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> 网站排版 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站策划</a> 网站版式设计Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这里有个小提示:微软雅黑字体可以用font-family写在页面,但在网站图片里面嵌入微软雅黑的字体会构成侵权,这一点是设计师们需要注意的。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们再来说说宋体和微软雅黑的一些区别。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

宋体是衬线字体,微软雅黑是无衬线字体,宋体在视觉上更纤细。和宋体相比,微软雅黑的字形不是正方形的,而是稍微的扁宽,字间距很小,这样会使默认的行间距更明晰,同时微软雅黑的字心显得更饱满。所以在同样的字号下,雅黑的单字面积显得更大,更容易识别。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

标题字体使用微软雅黑更适合,正文内容可以根据设计风格和需求灵活选择。不过在手机端查看时,我们很明显感觉到微软雅黑字体更赏心悦目。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

除宋体和微软雅黑字体之外,设计师们还可以根据实际需要选择其他经典通用字体,比如Windows自带的中文字体黑体、仿宋、楷体等,以及英文字体Arial、Vardana等等。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

> 网页设计规范:字号选择Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

CSS里面常用描述字体大小的单位主要是em和px。其中em在跨平台设备字体处理上很有优势,在常规网页设计中,我们通常更多采用px作为单位。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这里以px为例,网页设计中一般使用14px 作为标准字体,16px 作为中等字体,18px 作为较大字体,12px 作为偏小字体。当然,我们这里说的只是一种比较通用的标准,实际上如何选择字号需要设计师根据网页整体设计布局来确定。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在页面自适应的设备上,比如手机屏幕分辨率比PC端的低,这些因素也是设计师需要考虑的。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

> 网页设计规范:文字设计的规范性Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

大家应该记得一点:虽然我们看到很多网站页面的分享,但这些页面都是属于不同网站的,而用户关注的是一个网站的整体。所以对于设计师来说,他们在设计网页时应该考虑所有页面规范和一致性。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

初级设计师比较容易犯一些细节错误,比如同一层级下的不同页面出现字体不一样,字号不统一,字间距不一致的情况等等。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果想成为一个专业设计师,这些问题都是需要通过规范设计来避免的。Jpt北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,6251,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号