为什么卡片式布局在网页设计中经久不衰?

发布时间:2017-04-10 编辑发布:迪麦互动

最早开始使用卡片式形式的是palm web os,弱化程序概念,采用卡片式展示形式,所有的任务都是一个个的卡片的转换。

卡片式布局在网页设计中如同春日梨花,满满的铺开在屏幕之上,直至今日。那么,流行了这么多年的卡片式布局为何经久不衰呢?它有什么样的“过人之处”呢?

视觉上美观
卡片式设计必须以图片来取悦用户,我们一直在说卡片带给设计师的便捷,当然也有些麻烦需要我们处理,尤其当你发现甲方给的图片真的“有点难看”的时候,因为很多研究表明图片是能够提升网站的效果和浏览体验,你可以尝试突出使用某张图片,或者以不对称的形式来吸引用户,同样也能带给他们愉悦的视觉感受。

设计上灵活性

卡片式设计的灵活性让设计师的工作变得更加简单,卡片式填充给了设计师更多的自由,它允许许多不同的内容同步、清晰的呈现,以瀑布流为例,上传排列能够节省更多的设计时间,当然,如果你厌烦了瀑布流,不规则对称的卡片布局也能带给用户更多的新鲜感。

用户体验至上

用户体验无疑是每个设计师都十分重视的因素,在卡片式布局中,对用户体验有了明显的提升,因此才受到广大用户的喜爱,其中两个方面是值得大家探索的:一是通常卡片式设计会让用户持续地浏览网站,并不断的下拉更新,让用户在网站中停留的时间更长,持续不断地提升转化率;二是图片的相关性,以Pinterest为例,以用户所搜索的关键词为基准,为用户即时分享更多同类信息。


互动性强

卡片式布局常被形容作为一个内容容器,这是因为它很容易被放大或者缩小。同样的设计布局在不同大小的点子设备中能够展示出一致的美学效果,另一个方面,卡片的拉伸及阴影动作伴随着用户的手指拉伸动作,这样的一种操作方式,是极其美妙的。

这里分享几个特立独行的网页设计布局案例,看看能不能给你的设计带来一点儿灵感?

这个网站比较小众,是(荷兰)鹿特丹国际电影节官网,首先,这类电影、画廊类网站会有超凡的视觉效果,使用高饱和度的色块和夸张的纹理进行卡片填充,让整个网站变得时尚感十足,在交互方面,每一个卡片都有一个微小的体验变化,当鼠标光标放在其上时,图片会拉近,圆形的色块也会变成方形,这些视觉上的变化更加能够吸引用户的眼球,增加停留时间。

UpLabs网站是一个汇集了网站前端作品设计、iOS UI设计的资源站点,也是小编经常逛的收藏夹网站,这里介绍的是CircularChaos的作品。结合了Material Design中的渐变色系和卡片式,让整个页面变得大胆、时尚,导航在左边清晰、自然的展示,碰撞出平衡的视觉构图效果。



卡片式的布局在网页设计中一直占据前茅,它看上去简单,却又有许多的细节可以设计变化,只要你掌握好一点,就可以创造出于众不同的界面。


分享至: