spot_img
Homewordpress插件教程WordPress网页设计文字排版——CRAP设计原则应用

WordPress网页设计文字排版——CRAP设计原则应用

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

 

1.对比

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

 

>  标题与正文对比

 

在AnyForWeb网站案例页面中,标题使用18号的微软雅黑,正文使用12号的宋体,两种字体字号的对比让文字内容富有层次,很容易吸引读者眼球。

 

 

>  文字颜色对比

 

贷款申请在线申请,高额度,快速下款!

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

 

 

>  文字颜色与背景颜色对比

 

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

比如在埃森哲官网中,白色背景、红色标题、黑色正文的对比,以及红色背景与白色文字对比的应用,将文字内容清晰衬托出来,既有丰满的层次感,同时有具有很强的视觉冲击力。

 

 

设计师在使用这一原则时需要注意,必须确保文字是容易看清的,如果文字过小或过于纤细、色彩对比度不够,会适得其反,举个例子:

 

WordPress建站服务

 

设计师如果对色彩的对比度还不够熟悉时,可以通过颜色对比检测工具(如Check My Colours、Colour Contrast Check)检测色差和亮度差,确保网页设计的易读性。

 

2.重复

设计中的元素可以在整个网页设计中重复出现,对文字来说,可能字体、字号、样式的重复,也可能是同一种类型的图案装饰、文字与图片整体布局方式等。重复给用户一种有组织、一致性的体验,可以创造连贯性,显得更专业。

比如HeyJuice网站在产品准则部分采用了统一的“图片+标题+正文”形式。内容不同,而布局方式统一,图片风格一致。用户一眼看过去,就能知道这是属于同一个版块的内容,这样的重复很容易有一种连贯、平衡美感。

 

 

比如土巴兔装修网的流程,标题文字在图片同样的位置、采用同样形式,既与图片背景颜色形成对比,又是文字样式的重复。

WordPress divi主题

 

 

重复原则在网页设计上应用非常广泛,单一的重复可能会显得单调,设计师却可以根据不同网站的需求灵活使用,比如有变化的重复能增加创新,给网页设计增加活力。

 

wordpress建站公司

3.对齐

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

对齐的案例就非常多了,我们随意列举两个。

曼秀雷敦网站的左对齐:

 

 

Darry Ring网站的居中对齐:

 

 

左对齐和右对齐是文本看起来更清晰、效果分明;居中对齐显得更庄重、正式、稳重。

 

4.亲密性

 

位置的接近意味着存在关联,亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。

亲密性可以从两点入手:适当留白、以视觉重点突出层次感。

比如以下案例中图文搭配,这是多个元素在一起的组合排版。

 

 

人眼首先被Banner图和里面文字吸引,然后再向下移动到文字描述及链接文字,这些元素的亲密性与对比形成一种平衡。

 

siteground 小红书电商教程
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES
spot_img

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据