| 订阅 | 在线投稿
分享
 
 
当前位置: 王朝网络 >> 学院 >> 常规or创意?别让网页中的文字设计禁锢了你
 

常规or创意?别让网页中的文字设计禁锢了你

2016-08-30 06:39:02 编辑來源:互联网 繁體版 评论
 
 
  AnyForWeb先和大家分享两个关于网页的中文文字设计现象。
  现象1:
  公司前端技术同事看到我上周写的《好的字体让你的网页设计“倾国倾城”》后,主动和我聊了排版网站文字的各种心得体会,他提到的一个现象让人很意外:除了设计师、前端技术、策划、排版印刷等职位的人员对文字有一定的敏感度外,实际上大多数用户对文字的字体和字号没什么概念。
  他说的没概念是指,虽然用户对正在浏览的网页有一个大致印象,可以说说自己对网站的直观感受,比如网站好不好看、风格是否吸引人等。但他们并不是很在意这个网页使用的是什么字体,甚至不知道造成视觉疲劳的罪魁祸首可能正在于一个字号的“小小”选择。
  现象2:
  经常听到设计师们抱怨网页设计中可供选择的中文字体太少,创意字体即使设计出来也没法实现,或者实现成本太大,大大限制了他们创意的发挥。我们也看到很多设计教程都建议设计师们不要在中文字体上做太多创意。
  这种现象也是AnyForWeb上一篇文章中设计师的问题:为什么国外网站字体做出来的效果那么好看,但我们在设计网页时总觉得无法达到那种效果?
  先从视觉角度说明:我们能很明显看出,英文是线条结构,中文是方形结构。从构图设计的角度看,英文字母比中文更具有几何符号的感觉,图形感会更丰富;从字形的角度看,英文采用的拉丁字母包括大小写一共52个,而且字形都比较简单,符号数量少便于识别,字形简洁便于设计,而中文的笔画很多过于密集,不利于字体设计。
  然后我们再了解以下事实:
  用户的操作系统中自带的字体有限,若使用创意字体,打开网页前还需要下载,通常英文字体只有几百KB,因为它只需要包含数字、标点、英文字母即可。而中文字符文件庞大,动辄数个MB,甚至十几MB,下载时间一般比较长,往往导致网站打开速度慢,可能特殊字体还没看到,用户就已经把网页关闭了。
  从以上真实情况可以了解,其实我们不必纠结于网站的字体设计无法发挥创意,因为用户在意的不仅仅是字体设计的创意,而是网站整体给人的感受,因此AnyForWeb认为:设计师对文字的创意可以通过其他方向的发挥来让用户对你的网页设计印象深刻。比如,保证网页整体文字设计的规范性、增加修饰文字段落的创意,以及对少量特殊字体的灵活应用。
  一、如何保证网页整体文字设计的规范性?
  > 网页设计规范:字体选择
  在选择字体上,AnyForWeb建议设计师们尽量选择系统默认的或通用字体,保证浏览器能够正确识别并显示出正常的文字。
  我们以宋体和微软雅黑为例:
  1.宋体
  宋体是最常见的中文字体,在没有指定字体的情况下,浏览器往往选择它来渲染。但很多人认为这种字体并不美观。
  NoNoNo,并不是这样!举个例子,在下面AnyForWeb网站的案例中,右侧对客户案例的描述文字正文内容就是采用的宋体12px,配上18px的微软雅黑标题,层次清晰,让人一目了然,同时展现的美观度丝毫不弱。
  2.微软雅黑
  微软雅黑可以作为网站首选字体,它的美观度和清晰度都较好。
  在优度旅游网站中,网站首页采用了Metro风格,整站使用微软雅黑字体,在不同板块灵活应用了不同的字号,文字层次很清晰。下图中文字与卡片式设计风格融合在一起,让整个网站显得干净大方,富有亲和力。
  在这里,AnyForWeb有个小提示:微软雅黑字体可以用font-family写在页面,但在网站图片里面嵌入微软雅黑的字体会构成侵权,这一点是设计师们需要注意的。
  我们再来说说宋体和微软雅黑的一些区别。
  宋体是衬线字体,微软雅黑是无衬线字体,宋体在视觉上更纤细。和宋体相比,微软雅黑的字形不是正方形的,而是稍微的扁宽,字间距很小,这样会使默认的行间距更明晰,同时微软雅黑的字心显得更饱满。所以在同样的字号下,雅黑的单字面积显得更大,更容易识别。
  标题字体使用微软雅黑更适合,正文内容可以根据设计风格和需求灵活选择。不过在手机端查看时,我们很明显感觉到微软雅黑字体更赏心悦目。
  除宋体和微软雅黑字体之外,设计师们还可以根据实际需要选择其他经典通用字体,比如Windows自带的中文字体黑体、仿宋、楷体等,以及英文字体Arial、Vardana等等。
  > 网页设计规范:字号选择
  CSS里面常用描述字体大小的单位主要是em和px。其中em在跨平台设备字体处理上很有优势,在常规网页设计中,我们通常更多采用px作为单位。
  这里以px为例,网页设计中一般使用 14px 作为标准字体,16px 作为中等字体,18px 作为较大字体,12px 作为偏小字体。当然,我们这里说的只是一种比较通用的标准,实际上如何选择字号需要设计师根据网页整体设计布局来确定。
  在页面自适应的设备上,比如手机屏幕分辨率比PC端的低,这些因素也是设计师需要考虑的。
  > 网页设计规范:文字设计的规范性
  大家应该记得一点:虽然我们看到很多网站页面的分享,但这些页面都是属于不同网站的,而用户关注的是一个网站的整体。所以对于设计师来说,他们在设计网页时应该考虑所有页面规范和一致性。
  初级设计师比较容易犯一些细节错误,比如同一层级下的不同页面出现字体不一样,字号不统一,字间距不一致的情况等等。
  如果想成为一个专业设计师,这些问题都是需要通过规范设计来避免的。
  二、如果想让文字部分看起来有创意,我们可以怎么做?
  > 使用不同颜色的文字突出重点
  > 段落加上装饰性设计元素
  > 重点文字内容字体加粗
  > 文字与背景色形成高对比度
  设计师还可以通过增加其他创意元素的方式来突出文字内容,给设计增加亮点。
  三、如果一定要使用特殊字体……
  在遇到需要使用特殊字体的情况时,很多设计师最常做的方法是把想要的文字做成图片,但这种方式有几个明显的缺陷:不可能大范围使用该字体,图片内容的文字不易修改,还很不利于网站的SEO。因此我们不建议这么做。
  这并不意味着在文字上我们只能走常规路线,AnyForWeb在网站中就使用了特殊字体,给网站增加特色和亮点。这里不是采用的图片方式哦,大家可以试试对这些文字进行复制!
  当然,如何将特殊文字的设计还原到网页,是前端工程师通过技术解决方案完成的,有兴趣的设计师也可以自己研究。
  通过技术,我们就可以灵活使用一些特殊字体让网页设计更有创意啦。
  本次关于网页中文字设计的分享就到这里,下一篇文章AnyForWeb将和大家分享文字的性格与应用。
 
 
 
上一篇《给设计新人的十大建议!》
下一篇《艾滋病公益广告》
 
 
 
 
 
 
日版宠物情人插曲《Winding Road》歌词

日版宠物情人2017的插曲,很带节奏感,日语的,女生唱的。 最后听见是在第8集的时候女主手割伤了,然后男主用嘴帮她吸了一下,插曲就出来了。 歌手:Def...

兄弟共妻,我成了他们夜里的美食

老钟家的两个儿子很特别,就是跟其他的人不太一样,魔一般的执着。兄弟俩都到了要结婚的年龄了,不管自家老爹怎么磨破嘴皮子,兄弟俩说不娶就不娶,老父母为兄弟两操碎了心...

如何磨出破洞牛仔裤?牛仔裤怎么剪破洞?

把牛仔裤磨出有线的破洞 1、具体工具就是磨脚石,下面垫一个硬物,然后用磨脚石一直磨一直磨,到把那块磨薄了,用手撕开就好了。出来的洞啊很自然的。需要猫须的话调几...

我就是扫描下图得到了敬业福和爱国福

先来看下敬业福和爱国福 今年春节,支付宝再次推出了“五福红包”活动,表示要“把欠大家的敬业福都还给大家”。 今天该活动正式启动,和去年一样,需要收集“五福”...

冰箱异味产生的原因和臭味去除的方法

有时候我们打开冰箱就会闻到一股异味,冰箱里的这种异味是因为一些物质发出的气味的混合体,闻起来让人恶心。 产生这些异味的主要原因有以下几点。 1、很多人有这种习...

《极品家丁》1-31集大结局分集剧情介绍

简介 《极品家丁》讲述了现代白领林晚荣无意回到古代金陵,并追随萧二小姐化名“林三”进入萧府,不料却阴差阳错上演了一出低级家丁拼搏上位的“林三升职记”。...

李溪芮《极品家丁》片尾曲《你就是我最爱的宝宝》歌词

你就是我最爱的宝宝 - 李溪芮 (电视剧《极品家丁》片尾曲) 作词:常馨内 作曲:常馨内 你的眉 又鬼马的挑 你的嘴 又坏坏的笑 上一秒吵闹 下...

乌梅的功效与作用以及乌梅的食用禁忌有哪些?

乌梅,又称春梅,中医认为,乌梅味酸,性温,无毒,具有安心、除热、下气、祛痰、止渴调中、杀虫的功效,治肢体痛、肺痨病。乌梅泡水喝能治伤寒烦热、止吐泻,与干姜一起制...

什么是脂肪粒?如何消除脸部脂肪粒?

什么是脂肪粒 在我们的脸上总会长一个个像脂肪的小颗粒,弄也弄不掉,而且颜色还是白白的。它既不是粉刺也不是其他的任何痘痘,它就是脂肪粒。 脂肪粒虽然也是由油脂...

网络安全治理:国家安全保障的主要方向是打击犯罪,而不是处置和惩罚受害者

来源:中国青年报 新的攻击方法不断涌现,黑客几乎永远占据网络攻击的上风,我们不可能通过技术手段杜绝网络攻击。国家安全保障的主要方向是打击犯罪,而不是处置和惩罚...

河南夫妻在温岭网络直播“造人”内容涉黄被刑事拘留

夫妻网络直播“造人”爆红   1月9日,温岭城北派出所接到南京警方的协查通告,他们近期打掉了一个涉黄直播APP平台。而根据掌握的线索,其中有一对涉案的夫妻主播...

如何防止墙纸老化?墙纸变旧变黄怎么办?

如何防止墙纸老化? (1)选择透气性好的墙纸 市场上墙纸的材质分无纺布的、木纤维的、PVC的、玻璃纤维基材的、布面的等,相对而言,PVC材质的墙纸最不透气...

鲜肌之谜非日本生产VS鲜肌之谜假日货是谣言

观点一:破日本销售量的“鲜肌之谜” 非日本生产 近一段时间,淘宝上架了一款名为“鲜肌之谜的” 鲑鱼卵巢美容液,号称是最近日本的一款推出的全新护肤品,产品本身所...

中国最美古诗词精选摘抄

系腰裙(北宋词人 张先) 惜霜蟾照夜云天,朦胧影、画勾阑。人情纵似长情月,算一年年。又能得、几番圆。 欲寄西江题叶字,流不到、五亭前。东池始有荷新绿,尚小如...

关于女人的经典语句

关于女人的经典语句1、【做一个独立的女人】 思想独立:有主见、有自己的人生观、价值观。有上进心,永远不放弃自己的理想,做一份自己喜爱的事业,拥有快乐和成就...

未来我们可以和性爱机器人结婚吗?

你想体验机器人性爱吗?你想和性爱机器人结婚吗?如果你想,机器人有拒绝你的权利吗? 近日,第二届“国际人类-机器人性爱研讨会”大会在伦敦金史密斯大学落下帷幕。而...

全球最变态的十个地方

10.土耳其地下洞穴城市 变态指数:★★☆☆☆ 这是土耳其卡帕多西亚的一个著名景点,传说是当年基督教徒们为了躲避战争而在此修建。里面曾住着20000人,...

科学家称,人类死亡后意识将在另外一个宇宙中继续存活

据英国《每日快报》报道,一位科学家兼理论家Robert Lanza博士宣称,世界上并不存在人类死亡,死亡的只是身体。他认为我们的意识借助我们体内的能量生存,而且...

《屏里狐》片头曲《我爱狐狸精》歌词是什么?

《我爱狐狸精》 - 刘馨棋   (电视剧《屏里狐》主题曲)   作词:金十三&李旦   作曲:刘嘉   狐狸精 狐狸仙   千年修...

 
 
 
AnyForWeb先和大家分享两个关于网页的中文文字设计现象。 现象1: 公司前端技术同事看到我上周写的《好的字体让你的网页设计“倾国倾城”》后,主动和我聊了排版网站文字的各种心得体会,他提到的一个现象让人很意外:除了设计师、前端技术、策划、排版印刷等职位的人员对文字有一定的敏感度外,实际上大多数用户对文字的字体和字号没什么概念。 他说的没概念是指,虽然用户对正在浏览的网页有一个大致印象,可以说说自己对网站的直观感受,比如网站好不好看、风格是否吸引人等。但他们并不是很在意这个网页使用的是什么字体,甚至不知道造成视觉疲劳的罪魁祸首可能正在于一个字号的“小小”选择。 现象2: 经常听到设计师们抱怨网页设计中可供选择的中文字体太少,创意字体即使设计出来也没法实现,或者实现成本太大,大大限制了他们创意的发挥。我们也看到很多设计教程都建议设计师们不要在中文字体上做太多创意。 这种现象也是AnyForWeb上一篇文章中设计师的问题:为什么国外网站字体做出来的效果那么好看,但我们在设计网页时总觉得无法达到那种效果? 先从视觉角度说明:我们能很明显看出,英文是线条结构,中文是方形结构。从构图设计的角度看,英文字母比中文更具有几何符号的感觉,图形感会更丰富;从字形的角度看,英文采用的拉丁字母包括大小写一共52个,而且字形都比较简单,符号数量少便于识别,字形简洁便于设计,而中文的笔画很多过于密集,不利于字体设计。 然后我们再了解以下事实: 用户的操作系统中自带的字体有限,若使用创意字体,打开网页前还需要下载,通常英文字体只有几百KB,因为它只需要包含数字、标点、英文字母即可。而中文字符文件庞大,动辄数个MB,甚至十几MB,下载时间一般比较长,往往导致网站打开速度慢,可能特殊字体还没看到,用户就已经把网页关闭了。 从以上真实情况可以了解,其实我们不必纠结于网站的字体设计无法发挥创意,因为用户在意的不仅仅是字体设计的创意,而是网站整体给人的感受,因此AnyForWeb认为:设计师对文字的创意可以通过其他方向的发挥来让用户对你的网页设计印象深刻。比如,保证网页整体文字设计的规范性、增加修饰文字段落的创意,以及对少量特殊字体的灵活应用。 一、如何保证网页整体文字设计的规范性? > 网页设计规范:字体选择 在选择字体上,AnyForWeb建议设计师们尽量选择系统默认的或通用字体,保证浏览器能够正确识别并显示出正常的文字。 我们以宋体和微软雅黑为例: 1.宋体 宋体是最常见的中文字体,在没有指定字体的情况下,浏览器往往选择它来渲染。但很多人认为这种字体并不美观。 NoNoNo,并不是这样!举个例子,在下面AnyForWeb网站的案例中,右侧对客户案例的描述文字正文内容就是采用的宋体12px,配上18px的微软雅黑标题,层次清晰,让人一目了然,同时展现的美观度丝毫不弱。 2.微软雅黑 微软雅黑可以作为网站首选字体,它的美观度和清晰度都较好。 在优度旅游网站中,网站首页采用了Metro风格,整站使用微软雅黑字体,在不同板块灵活应用了不同的字号,文字层次很清晰。下图中文字与卡片式设计风格融合在一起,让整个网站显得干净大方,富有亲和力。 在这里,AnyForWeb有个小提示:微软雅黑字体可以用font-family写在页面,但在网站图片里面嵌入微软雅黑的字体会构成侵权,这一点是设计师们需要注意的。 我们再来说说宋体和微软雅黑的一些区别。 宋体是衬线字体,微软雅黑是无衬线字体,宋体在视觉上更纤细。和宋体相比,微软雅黑的字形不是正方形的,而是稍微的扁宽,字间距很小,这样会使默认的行间距更明晰,同时微软雅黑的字心显得更饱满。所以在同样的字号下,雅黑的单字面积显得更大,更容易识别。 标题字体使用微软雅黑更适合,正文内容可以根据设计风格和需求灵活选择。不过在手机端查看时,我们很明显感觉到微软雅黑字体更赏心悦目。 除宋体和微软雅黑字体之外,设计师们还可以根据实际需要选择其他经典通用字体,比如Windows自带的中文字体黑体、仿宋、楷体等,以及英文字体Arial、Vardana等等。 > 网页设计规范:字号选择 CSS里面常用描述字体大小的单位主要是em和px。其中em在跨平台设备字体处理上很有优势,在常规网页设计中,我们通常更多采用px作为单位。 这里以px为例,网页设计中一般使用 14px 作为标准字体,16px 作为中等字体,18px 作为较大字体,12px 作为偏小字体。当然,我们这里说的只是一种比较通用的标准,实际上如何选择字号需要设计师根据网页整体设计布局来确定。 在页面自适应的设备上,比如手机屏幕分辨率比PC端的低,这些因素也是设计师需要考虑的。 > 网页设计规范:文字设计的规范性 大家应该记得一点:虽然我们看到很多网站页面的分享,但这些页面都是属于不同网站的,而用户关注的是一个网站的整体。所以对于设计师来说,他们在设计网页时应该考虑所有页面规范和一致性。 初级设计师比较容易犯一些细节错误,比如同一层级下的不同页面出现字体不一样,字号不统一,字间距不一致的情况等等。 如果想成为一个专业设计师,这些问题都是需要通过规范设计来避免的。 二、如果想让文字部分看起来有创意,我们可以怎么做? > 使用不同颜色的文字突出重点 > 段落加上装饰性设计元素 > 重点文字内容字体加粗 > 文字与背景色形成高对比度 设计师还可以通过增加其他创意元素的方式来突出文字内容,给设计增加亮点。 三、如果一定要使用特殊字体…… 在遇到需要使用特殊字体的情况时,很多设计师最常做的方法是把想要的文字做成图片,但这种方式有几个明显的缺陷:不可能大范围使用该字体,图片内容的文字不易修改,还很不利于网站的SEO。因此我们不建议这么做。 这并不意味着在文字上我们只能走常规路线,AnyForWeb在网站中就使用了特殊字体,给网站增加特色和亮点。这里不是采用的图片方式哦,大家可以试试对这些文字进行复制! 当然,如何将特殊文字的设计还原到网页,是前端工程师通过技术解决方案完成的,有兴趣的设计师也可以自己研究。 通过技术,我们就可以灵活使用一些特殊字体让网页设计更有创意啦。 本次关于网页中文字设计的分享就到这里,下一篇文章AnyForWeb将和大家分享文字的性格与应用。
󰈣󰈤
 
 
 
  免责声明:本文仅代表作者个人观点,与王朝网络无关。王朝网络登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述,其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
阳光女孩第一辑
紫色魅力女孩
月光女孩
标致美女写真
顺德.逢简.水乡.石桥
生活缝隙
奈良&#;法隆寺
美丽下川岛
 
>>返回首页<<
 为你推荐
 
 
 
 
 
 转载本文
 UBB代码 HTML代码
复制到剪贴板...
 
 
 
 
 
 
 
 
 
 
 
©2005- 王朝网络 版权所有