新闻中心

网页文字排版设计,要的就是精彩!

发布时间:2016-03-11  来源:本站
皇姑区网站建设,铁西区网站制作,和平区网站制作公司,大东网络公司,沈河区网站建设,于洪网站建设,东陵网站建设,浑南网站建设

提到排版,这是个大学识。网站上每一个元素都能影响阅览,排版规划的好坏肯定能检测一个规划师的根本功底,而短短的一篇文章并不能将排版介绍清楚,本文就先首要共享网站主题有些文字的排版,后期咱们还会在不一样系列文章中依据要点地交叉介绍排版窍门。


文字的排版需求思考文字辨识度和页面易读性,本文就从最好易读性标准和CRAP规划四准则的视点与我们共享如何在页面中做出精彩的文字排版。


先想想,你觉得好的文字排版是什么样的?


在咱们看来,好排版必定有着比照棒的阅览性,文字内容在视觉上是平衡和连接的,并且有全体的空间感。


规划、内容摆放和节目规划都会影响文字的阅览性。从易读性来看,需求规划师思考字体、字号、行距、间隔、布景色与文字色彩比照等。


咱们在前面文章中现已要点介绍了字体和字号,以下最好易读性标准则介绍行距和间隔,共享适宜的行宽和行高,协助阅览者坚持阅览节奏,让读者拥有十分好的阅览体会。


一、最好易读性标准


1.行宽


咱们能够想象一下:假如一行文字过长,视野移动间隔长,很难让人留意到阶段起点和终点,阅览比照艰难;假如一行文字过短,双眼要不停来回扫视,破坏阅览节奏。


因而咱们能够让内容区的每一行承载适宜的字数,来进步易读性。


传统图书排版每行最好字符数是55—75,实践在页面上每行字符75—85更流行。中文在14号字体时,主张35—45个文字。


比方下图:


2.间隔


行距是影响易读性十分首要的要素,过宽的行距会会让文字失掉延续性,影响阅览;而行距过窄,则简单呈现跳行。


页面规划中,文字间隔通常依据字体大小选1—1.5倍作为行间隔,1.5—2倍作为段间隔。


比方12号字体,行间隔是12px—18px,阶段间隔则是18px—24px。


别的,行高/阶段之间的空白=0.754。行间隔正好是阶段间隔的75%是十分常见的。


比方简书16号字体,行间隔27px/段间隔36px=75%。文字字号本身比照大,所以行间隔也不需求严厉依照1—1.5倍的份额设置,不过行间隔和段间隔的份额契合75%,看起来很不错,这么的视觉作用让人在阅览时坚持一种节奏感,这即是在实践情况中将标准的灵敏运用。


3.行对齐


排版中很首要的一个标准即是把应当对其的当地对齐,比方每个阶段行的方位对齐。


不管哪种视觉作用,精巧的、正式的、风趣的仍是严厉的,通常都能够运用一种明晰的对齐来到达目的。


通常情况下,主张在页面上只运用一种文本对齐,尽量防止两头对齐。


4.文字留白


在排版文字时,在版面需求留出空闲空间,留白面积从小到大应当遵从的次序是:字间隔、行间隔、段间隔。此外,在排版内容区之前,需求依据页面实践情况给页面附近留出余白。


二、CRAP规划四准则在文字排版中的运用


CRAP是四项根本规划原理,包括比照(Contrast)、重复(Repetition)、对齐(Alignment)、亲密性(Proximity), 现已被规划师广泛运用。这四个根本准则在页面规划中对文字的排版也十分适用。


1.比照


咱们将比照分为三类,首要是标题与正文的字体与字号比照、文字色彩比照,以及文字色彩与布景色彩的比照。


>  标题与正文比照


在AnyForWeb网站事例页面中,标题运用18号的微软雅黑,正文运用12号的宋体,两种字体字号的比照让文字内容赋有层次,很简单招引读者眼球。


>  文字色彩比照


在伽然官网中,一有些文字采用了与首要文字不一样的另一种色彩,这种比照是添加视觉作用的有效途径之一,杰出展现了阶段的要点。


>  文字色彩与布景色彩比照


这是十分常用的一种排版规划方法,正文文本与布景适宜的比照能够进步文字的明晰度,发生激烈的视觉作用。


比方在埃森哲官网中,白色布景、赤色标题、黑色正文的比照,以及赤色布景与白色文字比照的运用,将文字内容明晰烘托出来,既有饱满的层次感,一起有具有很强的视觉冲击力。


规划师在运用这一准则时需求留意,必须保证文字是简单看清的,假如文字过小或过于纤细、色彩比照度不行,会拔苗助长,


规划师假如对色彩的比照度还不行熟悉时,能够经过色彩比照检测工具(如Check My Colours、Colour Contrast Check)检测色差和亮度差,保证页面规划的易读性。


2.重复


规划中的元素能够在全部页面规划中重复呈现,对文字来说,可能字体、字号、款式的重复,也可能是同一种类型的图案装饰、文字与图像全体规划方法等。重复给用户一种有安排、共同性的体会,能够发明连接性,显得更专业。


比方HeyJuice网站在产品准则有些采用了共同的“图像+标题+正文”方法。内容不一样,而规划方法共同,图像个性共同。用户一眼看过去,就能知道这是归于同一个版块的内容,这么的重复很简单有一种连接、平衡美感。


比方土巴兔装修网的流程,标题文字在图像相同的方位、采用相同方法,既与图像布景色彩构成比照,又是文字款式的重复。


重复准则在页面规划上运用十分广泛,单一的重复可能会显得单调,规划师却能够依据不一样网站的需求灵敏运用,比方有改变的重复能添加立异,给页面规划添加生机。


3.对齐


在页面规划中,元素在页面上不能随意摆放,每一项都应与页面内容存在某种联络。对齐可对齐是页面规划必不可少的有些,它能够协助规划师做出招引人的规划,是优异页面规划的潜在请求。

左对齐和右对齐是文本看起来更明晰、作用分明;居中对齐显得更严肃、正式、慎重。


4.亲密性


方位的挨近意味着存在有关,亲密性是指将有关项安排在一起让它们从全体看看起来调和共同。


亲密性能够从两点入手:恰当留白、以视觉要点杰出层次感。


人眼首要被Banner图和里边文字招引,然后再向下移动到文字描述及连接文字,这些元素的亲密性与比照构成一种平衡。


以上即是本次共享的内容啦。如前文所言,排版的好坏检测一个规划师的根本功底,平常的功夫但是必不可少的哟,咱们期待我们规划的精彩排版!


客服
客服