400-609-4309

网页字体设计技巧

网页字体设计技巧

设计网页字体时,应选择可连接部位或共同的笔画,根据文字的内容和特点进行构思,笔画可长可短,字形可大可小,使产生均衡与对称,对比与统一,充满律动的美感。下面介绍网页字体设计技巧,希望为大家带来帮助。

网页字体设计技巧

1.空心

以线条勾画出文字的轮廓,而中间留出空白的一种字体,它适用于宋体、黑体和各种字体,特粗字体的轮廓线有时会相合或重叠,此外,宋体的横线如保持空心形状时,有时会有太粗的感觉,因此,横线维持原来的单线形状即可。

2.断开

把文字的某些笔画断开,也是一种很常用的字体设计方法,它可以使文字更有设计感和现代感,而且也便于对一个文字的不同部分去做一些颜色或形式上的变化,这种技巧除了在字体设计中运用广泛,在标志图形设计中也很常见,例如李宁和劲霸男装的标志升级后都是把以前的一个整体分割开了。

不过有一点要注意的是,太圆滑和复杂的字体不适合此种方法,笔画简洁、多直线的字体会比较适合。还有,选择一两个地方断开就可以了,然后其他字体也在相对应的地方做断开处理,如果断开的地方太多,就会显得太散。

3.连接

字与字的连接,或者笔画之间的连接,这种方法在广告标题和网页标题中极为常见,通过相邻字体的笔画连接,快速提升设计感。字与字的连接能打破方块字的制约,重新组合成为活泼美观、字形连贯统一的新形态,但不加思考地用直线串连会有平板、单调的感觉。

设计时应选择可连接部位或共同的笔画,根据文字的内容和特点进行构思,笔画可长可短,字形可大可小,使产生均衡与对称,对比与统一,充满律动的美感。

4.虚实

汉字的虚空间相对于实空间而言,虚实相互补充,构造出汉字形兼容并蓄、若隐若现的天地。笔画简省就是汉字设计将虚拟实的视觉语言表现。将汉字繁冗的笔画或细部笔画省略,保留汉字的关键部分,就能触发对该字的完整感觉而达到以部分来感知整体的视觉效果。

利用网点和网纹的变化,使其产生虚实相间的字体。这种字体的设计可以先勾出字体的轮廓线,再贴上网点或网纹的纸而显出字形,简单而又方便。当然,直接在文字上画出点或线,使其产生虚实的效果也是可以的。

5.图形化

这种字体设计是最富创意的,中文字由象形字演变而来,每一个字都有它的意义,所以把能体现文字意义的图形融入到字体设计当中,可以使字体更富创意、更有特点、更生动活泼。图形本身可以提升整体的视觉度和画面感从而促进自体的表现力,可观赏性和趣味性。这样的字体更像是图形,标志设计和广告设计比较喜欢这么做。

6.扭曲

是依据坐标方格的变化或使用电脑创造出来的扭曲变形字体。首先,在方形的框内,写出宋体、黑体等原型字体,并在框内画出10等份的垂直与水平坐标线,标上代号,然后,画出要变形的框子,任何形状都可以,框内也画出10等份的坐标线,标上代号,最后根据方形框内的位置,在变形框内画出来,即成为所需要的字形。

7.对比

宋体字有一个特点,就是笔画横细竖粗,宋体字很漂亮,但是略显传统,所以在现代设计中,宋体字的使用频率并不高,但是设计师经常用这种笔画对比比较大的手法,设计出一些很有个性的字体。例如:我们可以让字体左边的笔画细,右边的笔画粗、左边的笔画粗右边的笔画细,或者横粗竖细等等,设计出来的字体都很有特点。

8.笔画简化

对于字体的设计,我们会经常将笔画进行简化或者省略其中的笔画,在保证辨识度的情况下进行一定量的删减,从而使字体本身更加简洁和现代。

笔画简化就是对笔画的精简处理。所谓“精简”,即不能匆匆简化了事,而是要做到精致,要有所考究,有所选择,在可辨识的前提下,使字体实现简洁美。

字体设计的方法和形式非常多,不断的尝试,把不同的字体、不同的设计技巧进行组合,才能设计出完美的字体。需要注意的是,无论你要怎么做,字体设计的一些根本原则是不能违背的,美观、易识别、调性与你所要表达的内容相吻合是对字体设计不变的要求。

移动端网页界面设计技巧

1. 让他可读性高

无论如何你的网站上的文本必须使人容易阅读。如果一个网站的文字阅读起来很有挑战,用户很显然不会去看它,这意味着你将失去潜在的客户。在移动端屏幕变小,还有各种反光和倒影会让文字更难读。移动端文字有它固有的标准(如:一般在2×的设计稿中文字最小可读是24PX),文字不能过于单薄也不能有太多色彩,所有的“手段”都必需使文字更加容易阅读。

2. 建立视觉层次

访问者一般用快速扫描的方式查看你的网站。在视觉设计上用一些技巧告诉用户那些文本是最重要的,他们应该集中注意力看。

你可以突出你的网站优势,因而让用户去关注你希望他们关注的内容上。那怕是在移动端,用户再如何快速的扫描信息,也不致于忽略关键内容,一旦产生兴趣,他们就能成为潜在客户,产生购买、成为会员、或者你会收获更多。

3. 考虑用户

想想用户使用网站的场景,您的网页设计元素应该让他们感到温馨。

如果他们习惯了网站上使用那些现代而精致的字体,如果突然出现其他字体,他们会觉得蹩脚或不知所措。

你的网站的字体选择应该有一个基调,让访问者舒适,并熟悉。

4. 对比的创意

平面设计中 玩对比已经是一种常见的方式。您必需使用对比色,来增加可读性。如果文字的色彩很重,那么配色浅色的背景会更加易读,背景和字体色彩过于相似会难以阅读,或者背景过于花哨也会显得阅读困难和档次低。

也可以在排版中用文字玩对比(如粗细对比、大小对比和疏密对比等),如果所有的文字都很相似,你的作品将失去视觉层次,并显得很平庸。

5. 使用同一套风格的字体去设计

网页设计中字体的选择是一件困难的事情,那么多的字体可选,会让人困惑。

最好的组合方式是使用同一个系列的字体,或者是由同一个设计师设计的字体。

在一些情况下,字体并没有粗体和多个字体样式供我们使用,这个时候你可以找找同一个设计师做的字体,它们可能拥有相似的特性,让你的设计显得更加“和谐”。

6. 限制字体的种类

不管你如何使用字体设计和排版,有一条不变的法则,不要使用太多字体,专家建议使用2到3种适宜。

虽然这条建议非常好,但是也不是绝对,一些情况下,多种字体也能做出特殊效果。但是大多数情况下,过多的字体意味着缺乏设计和乱。

让网站调用系统字体不仅仅影响网站的视觉外观而且会对WEB页面的性能有巨大影响,英文最好使用woff (Web Open Font Format),可惜中文由于字体数量大导致文件体积过大,不适合做woff。

字体太多 = 较慢的加载时间,一个网站加载时间过长则意味着用户的流逝。

7. 不要忘记测试体验一下

如果你不去实践,任何的规则和理论都是没有意义的。

用各种移动设备去试试你的网页,看看文本阅读是否流程,在小屏幕可读性还是否OK。什么样的设计概念都是用来打破的,一旦你运用到实践中,可能你就需要有调整,以便于获取最佳效果。

网站设计中文字排版的技巧

字体、字号

字体和字号这两个元素必须捏在一起说。

字体分为衬线体(serif)与非衬线体(sans serif)。简单的说,衬线体(serif)就是带有衬线的字体,笔画粗细不同并带有额外的装饰,开始和结尾有明显的笔触。常用的英文衬线体有Times New Roman和Georgia,中文即是我们在windows下最常见的中易宋体。

与衬线体相反,无衬线装饰,笔画粗细无明显查差异的字体就是非衬线体(sans serif)。Arial、Helvetica、Verdanad都是我们熟悉的英文非衬线体,中文有微软雅黑和mac下默认的中文-华文细黑。

在过去,普遍认为有笔触装饰的衬线体,可提高辨识度和阅读效率,更适合做为阅读的字体。多用于报纸、书籍等印刷品的正文。非衬线体饱满醒目,常用做标题或者用于较短的段落。

网页字体设计技巧

很长一段时间里,在互联网上我们会注意这样的一个现象,国外网站大部分以非衬线体为主,而中文网站基本就是宋体。其实不难理解,衬线字体笔画有粗细之分,很小字的情况下细笔画就被弱化,受限于电脑的分辨率,10-12px的衬线字体在显示器上是相当难辨认的(见下图);同字号的非衬线体笔画简洁而饱满,更适于做网页字体。windows下,中文宋体小字点阵的特性,12px、14px的字号显示仍然相当清晰美观,便于阅读。这也就是为什么大多网页设计制作人员容易机械性的选用特定字号或英文或中文的字体。

如今随着显示器越来越大,分辨率越来越高,经常会觉得看12px的文字有点吃力,做为设计师也会不自觉的开始大量使用14px的字体,而且越来越多的网站开始使用15、16px甚至18px以上的字号做正文文字。大字号的使用,对英文字体来讲,衬线体的高辨识度和流畅阅读的优势就体现出来了。中文宋体在显示14号以上字体时,单线条大字总是看上去有些单薄不那么协调,特别是这款点阵字在ClearType强制平滑显示状态下尤其显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。

行长

我们随手拿起一本书或者一份报纸,数一数每行的文字,一般情况下都不会超过40个汉字。这是因为如果每行文字过长,读者会不停的转动脖子,感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首,也很容易串行,影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的,我们更要注意划分阅读区域。

文本宽度控制在450-700px为宜,此范围内参照字号大小; 英文每行80-100个字母(空格算一个字母)为宜; 中文每行30-40个汉字为宜。

间距

通过设置间距,我们就可以控制文字的密度。如果每行间距太小,与文字过长一样,读者浏览文章时也容易串行;如果行距过宽,阅读时就会感觉文章不够连贯。

间距没有固定的值,通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示,不管是中文网站还是英文网站,大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例,字号16px的字,行距就是25.6px。

1.5-1.8em的行距的确是非常适于阅读的文字密度。

关于段距,我们要考虑一下具体实际情况。比如文章篇幅较短,就不需要很宽的段距;二文章篇幅很长,特别是那些偏学术的比较枯燥的文章,就要多利用段距把握文章的节奏,给阅读者喘息和思考的机会,且使文章更有层次和可读性。

背景

白色是全频光,全放射光对人眼睛的最有刺激,所以很多印刷品读物的纸张都选用乳白色或者淡黄色的纸张。由于显示器本身就发光,所以同是纯白色背景的文字,在电脑上比在纸上阅读会使眼睛更容易疲乏,另有研究表明:在电脑上阅读只有在纸上阅读速度的78%,阅读效率大大减低。因此,为了提高页面浏览的舒适度和效率,越来越多的页面采用浅灰色和淡黄色做为页面背景。

另外,印刷品以文字为主的出版物往往会采用低光泽度的纸张,也是因为光泽度高的纸张反射度高,导致阅读质量下降,容易使人视觉疲劳。页面背景仿造低光泽度的纸张(纸张纹理)也能否提高阅读的舒适度呢?

有人曾经做过这样一个小调研,同样一段文字放在不同颜色的背景上(仅考虑自然光源),其中有两个背景加了纸张纹理的效果。结果75%的人认为带有纸张纹理的背景长时间阅读舒适度最高。

字体设计和排版技巧

1. 彩色的文本和字体

虽然绝大多数的极简风格的页面会采用黑白色调的文字,但是有色彩的文字更有张力,这是不争的事实。

彩色的字体在绝大多数地方都显得足够醒目,在许多设计项目当中,彩色字体被作为最重要的视觉元素来呈现。

明亮的色彩和多样的色彩是非常吸引人的,这也使得信息的传递更加有效,足以建立富有标志性的标识,并且吸引用户参与到设计当中来。

2. 简约大胆的非衬线字体

想要给人留下深刻的印象,字体并不一定非得那么华丽。

笔触较粗的非衬线字体在这两年比较流行,在各种网站和 APP 当中出现的机率非常之高。

它们之所以会被选取,很大程度上是因为它们足够易读,并且能同背景和其他的文本元素构成良好的对比。

3. 高亮的字体

被高亮显示的字体,是目前所看到的最令人惊讶的趋势之一,这种设计手法可以强调文本,让它成为视觉焦点。

从简单的通过高饱和度色彩高亮文本,到使用下划线的方式来高亮文本,设计师们所采用的方法都不尽相同。

不过不论是怎么设计,都是希望用户能够优先看到重要的文本内容,这种设计适合使用更短的文本块,以便突出显示,又不会造成信息过载。

4. 剪切和叠加效果

通过剪切和叠加实现的设计效果可以创造出足够有趣、令人印象深刻的效果。

无论是叠加还是剪切,基本上都是通过分层来实现的,它让设计看起来不那么扁平化,而在字体上实现这样的效果,会是个不错的的选择。

剪切和叠加效果指的是文本字体当中不填充色彩,而是在背景上叠加一层,剪切出文本部分,透过剪切部分可以看到底层背景的图片。就像上图的案例当中,透过文字可以看到底层的动态图片。

这种设计通常需要使用较粗的大写字母,并且控制文本内容的量。只有这样能够确保前景剪切的文本内容清楚的传递给访客,也能让底层的图形内容呈现出来。

底层的内容无论是图片、纹理还是视频,都可以不错地呈现给用户,而且因为文本的尺寸,总体的信息量不会太大,也不会过载。

5. 和其他图层穿插

在绝大多数的设计当中,文本元素所在的图层通常会独立使用,比如在背景之上,在图片旁边等等。但是现在很多设计师在字体的设计上已经有截然不同的想法,单纯的上下叠加和平行的布局已经不足以满足他们的需求,让文本元素和其他的视觉元素穿插起来,让看似单薄的文本拥有了物理质感,仿佛真实的存在。这样的设计让用户感知到文本的「重量」,同时也更容易注意到其中的信息了。

就像上面的案例当中,人物和文本穿插起来,让文本看起来仿佛是真实的存在,创造出更为沉浸式的体验。

这种设计技巧更贴近平面设计,在设计上难度不算高,而且非常受欢迎。它充分利用到了格式塔原理,所以用户并不会因为部分遮挡而无法获取文本中的信息。

6. 文本与渐变

渐变可能是最不被重视的设计趋势之一。由于曾经许多设计中并没有正确使用渐变,导致它在扁平化兴起之前,名声并不太好。但是现在大家对于「微妙」的追求使得渐变成为了一种可用性极强的设计技法。

微妙的渐变会给人以现代和新鲜的感觉,而上面的案例当中,设计师仅仅是为标题中的关键字加上渐变,就创造出颇为令人难忘的体验。当然,这样的设计更适合在极简的页面上使用,如果页面信息量太大,这样的设计也是很难脱颖而出的。

7. 「过于复古的」效果

当然,在谈及到设计技巧的时候,一些相对更老的设计技巧其实很少被提及。这些设计手法常常会让人觉得过于「复古」,不过在有的场合下,倒是能够发挥作用。

通常,设计师会让文本具有阴影、斜角、相对更显著的渐变和少见的色彩,这样的设计让文本具备良好的可读性,和让人难以移开目光的独特「复古」气息。不过,这样的设计更适合简约的页面布局,否则只会让人觉得难受。

8. 完全自定义

不同的项目需要不同的字体来与之匹配,混淆了字体或者使用不当,都会让整个设计显得怪异。设计师通过对字体进行自定义设计,可以实现各种各样不同的感觉和体验。针对字体进行全方位的自定义,也是当下字体的使用和设计趋势之一。

虽然完全自定义的字体非常有趣,但是这样的字体设计成本是比较高的,可能需要较长的时间来实现。对于大品牌或者准备了较多预算的企业机构而言,倒不是很大的问题。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章