ssw6618

新闻资讯

时时了解最新动态

来自淘宝设计师的分享,网站设计中的文字排版技巧

2020-06-12  
网站设计中很多人都会忽略文字排版,把重点会放在布局、配色等一些大框架下,但是高手往往更注重细节,文字可以更有力的表达出重要信息。虽然每个人打开网站第一件事是看整体、再看图、再看内容,内容就是文字等
各种细节表现,任何信息都是要用文字来表达,所以文字的排版就决定用户如何去看文字。
 
一、如何选择字体之中文字体和英文字体及标点符号的运用
经常看到过很网站设计中文字体和英文字体都运用了一种字体,其实在中文字体和英文字中有很多细节的区分,如大小写、比划、字重、间距、基线、字号等等,如果都使用一种字体,
那么就没有任何细节而言了。
 
相信每个优秀的设计师在运用字体前都会琢磨很久,字体要和整个画面图片做搭配,也要和文案的内容配合、让字体排版有舒适的阅读性和美观性。这里也讲一点更细节的就是标点符号,
 
很多设计师标点符号不太注意字体的区分,还有阿拉伯数字,其实数字和标点也属于英文字体,在进行调整的时候,最好和文中的英文字体一起进行。其实数字和标点符号有时候也会影响整体排版的美观性。
 
大家有没有发现简体文字的排版是标点紧跟前一个文字,后面有很大的空隙,导致在看起来文字断断续续,有点上,有些下,整体性不强,也不太美观,那么有什么解决办法吗?这里
给大家一个小建议缩小标点的字符间距,有必要时调整标点符号的字号,这样既在视觉上保持很好的效果,又可以在单位面积上承载更多的文字内容。
 
 
1、文字的亲密性
 
为什么文字还有亲密性,是因为文字是有内容的,不是一堆堆没有灵魂的干瘪文字,我们要把相关的内容组合到一起,不相关的拆分开来,阅读都读起来流畅又舒适。文字排版得好,就更
能让读者更快的阅读并消化掉文字。
下面给大家看一组亲密排版



再看一组没有考虑到亲密的排版


2、文字的对齐
 
对方的方式有三种分别是:左对齐、居中对齐、右对齐。
 
这里重点讲一下,居中对齐不适合大段文字,因为没有统一的起点,让人阅读起来很吃力,找不到方向。一个页面中不可以使用多种对齐方式,用多了,页面整体性就不强了。这里就不举例了。
 
 
3、文字的重复
 
统一的字号、行间距、色值、空间、线条、图形等等,只要能看到的地方应该作为重复的对象,才会使页面变得统一、具有整体性。
能统一的一定要统一,统一能让排版看起来更有整体性,元素与元素之间有了无形的联系。
 
 
4、文字的对比
 
文字有对比,能让画面元素更有设计感,对比一定要明显,比如大字你用18号,小字用16号,那么小的对比,那不如不用。深灰色和浅灰色
对比,有时候肉眼第一眼都看不出来的对比还是不要用了,大就更大,小就更小,要在视觉上让人一眼认出来。有视觉的冲击力。
 
 
二、排版小细节汇总
 
1、色彩和字体控制在三种或以内;
 
2、内容与留白要控制好
 
3、加大段前和段后的距离,不是按回车键。
 
4、中英文之间需要加空格
 
5、中文与数字之间需要加空格
 
6、一个字不能成行
 
 
三、文字型标识排版
 
好的设计它能够自然而然的向你表达一种内在的气质,它不需要花里胡哨的刻意去点缀,自然而然的在那里。
 
高品质感要注意的细节包括字体结构、字体重心、字面与字怀的比例关系、字体间距的平衡、字重等等。
Prada 标识,黑色是字面,红色是字怀,蓝色是字的留白。


 
左侧为官方图标,而右侧则是使其水平居中分布后的。发现什么了吗?电脑的对齐工具还有是差别吧,当然这细微的差距要在
我们设计师眼中才会了发现,右边用电脑自动排版的水平居中分布还是不平衡,要手动的才会更细节。



四、图形的排版
 
图形的排版也需要讲求平衡的关系,比如元素之间因差异性导致的不协调,比如:播放图标,一般是三角形构成,三角形的左半部分相对于右半部分而言,占据更多的空间,分量较重。如果按照电脑的居中方式对齐的话,会导致出现以下第一种展示效果,导致空间的失衡,这也是很多经验少的设计师所犯的错误。然而有时回过头来看并不能准确的发现这个问题,因为电脑就是居中对齐了。
而更讲究细节的设计师就会做调整,让三角形左右空间平衡一下。
 
再比如,下面这个灰色正矩形和正圆形同样是100X100像素,且上边和底边是对齐的关系,但是在视觉上圆形比矩形显得更小一些,对齐目标相对矩形也更向内一些,所以我们要把圆形调大一些,
让整体感觉更好看。

 


声明:本站转载自网络,版权归原作者所有,文章所述观点并非翼好网络的观点,如有侵权请第一时间联系我们时间进行删除。翼好网络是一家正规的上海网站建设公司,欢迎前来咨询建站业务!