网页设计中排版CRAP原则

用户头像
南京/网页设计师/10年前/6904浏览
网页设计中排版CRAP原则
用户头像
周扒站

网页设计中,文字的处理,版面样式的搭配,显得尤为重要。CRAP原则,助您快速高效完成网页设计排版。

CRAP设计四原则在文字排版中的应用

 

    CRAP是四项基本设计原理,包括对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密(Proximity), 已经被设计师广泛应用。这四个基本原则在网页设计中对文字的排版也非常适用。

1.对比

    我们将对比分为三类,主要是标题与正文的字体与字号对比、文字颜色对比,以及文字颜色与背景颜色的对比。

    标题使用18号的微软雅黑,正文使用12号的宋体,两种字体字号的对比让文字内容富有层次,很容易吸

引读者眼球。

03a556ce79716ac7252ce6347274.jpg

文字颜色对比

    一部分文字采用了与主要文字不同的另一种颜色,这种对比是增加视觉效果的有效途径之一,突出展示了段落的重点。

839f56ce79a66ac7252ce6d2c966.jpg

文字颜色与背景颜色对比


    这是非常常用的一种排版设计方式,正文文本与背景合适的对比可以提高文字的清晰度,产生强烈的视

觉效果。

    比如在埃森哲官网中,白色背景、红色标题、黑色正文的对比,以及红色背景与白色文字对比的应用,

将文字内容清晰衬托出来,既有丰满的层次感,同时有具有很强的视觉冲击力。

8a2556ce79e732f875520f9e3fe2.jpg

2.重复

    设计中的元素可以在整个网页设计中重复出现,对文字来说,可能字体、字号、样式的重复,也可能是

同一种类型的图案装饰、文字与图片整体布局方式等。重复给用户一种有组织、一致性的体验,可以创

造连贯性,显得更专业。

     HeyJuice网站在产品准则部分采用了统一的“图片+标题+正文”形式。内容不同,而布局方式统一,图

片风格一致。用户一眼看过去,就能知道这是属于同一个版块的内容,这样的重复很容易有一种连贯、平衡美感。

312456ce7a386ac7252ce6cd4e65.jpg

3.对齐

    在网页设计中,元素在页面上不能随意摆放,每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分,它可以帮助设计师做出吸引人的设计,是优秀网页设计的潜在要求。

78e956ce7ab832f875520fe2216f.jpg

4.亲密性

    位置的接近意味着存在关联,亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手:适当留白、以视觉重点突出层次感。

e7da56ce7aeb32f875520f794816.jpg

   多在实际中锻炼,不断巩固理论基础。





42
Report
|
69
Share
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in