网页制作中,卡片式设计要注意的那些事儿

分享到:

卡片式设计,这种能有效整合信息,在排版上很便利,在视觉上也很清晰的设计元素受到很多网页制作者的重用,被广泛应用于网站界面设计以及APP界面设计。本文小编主要来讲讲网页制作使用卡片式设计需要注意哪些问题。

卡片式网页制作

一、遵循一个核心大原则

卡片式设计从外观上看,整个卡片呈封闭式设计,因而,卡片式网页制作时,保证整个卡片的内容是一个完整的小整体,即一颗卡片讲述一个核心内容,让用户便于阅读理解,也是为了不让内容混淆,内容更清晰。

二、卡片设计的细节问题

1、保证整个卡片可点击性,用户不管点击哪一部分的内容都能进入卡片页面查看更具体的内容,能有效增强卡片的实用性,这种设计不管是在PC端网站还是移动端网站都是适用的。

2、卡片的的边框可适当增加阴影,让卡片更加立体,视觉上更突出,阴影颜色的选择要与卡片内的背景颜色相搭配。

三、卡片内容排版问题

卡片式网页制作内容,首先内容要适量,表达要简洁,才能有效保证整体的可读性。其次是内容的排版,上层一般是图片,且面积占比较大,下面一般还有一到两层内容,以文字与按钮设计为主。图片是卡片内容的重点,在图片选择上,要保证图片有意义,以及图片的色彩搭配合理,提升设计质感。

文字表达要简洁,突出重点,并且用户易于理解,在文字的设计上,选用可见性较强的字体、尺寸以及颜色,提升用户的阅读欲望。

按钮设计以需求为主,或是提供有高转化率的按钮,加上相应的微交互,让体验更丰富。

卡片式设计

四、给卡片添加相应的动效设计

卡片式设计更多用来展示,展示方式有很多种,并列排版展示,或是滑动翻阅展示,不同的展示对应不同的动效,前者使用悬停效果的反馈动效,当鼠标移到相应的卡片时,卡片方框变色或是叠加图层与出现相应的按钮或文字内容。后者只需做滑动即可查看不同卡片的内容。

卡片式设计是目前比较流行的布局设计趋势,但也并不一定适用于所有的内容布局,因此不管你是如何制作网页,使用什么样的设计,都应该要根据实际的需求来决定。

以上内容仍未解决您的问题?