审视卡片式设计趋势!

总有一些新的设计趋势蓄势待发。现在谁又能忘记视差滚动这种设计手法呢?这种网页设计趋势从几年前一直延续到现在,越来越多的用户开始认可并这种视差滚动式的网页。

而在诸多新兴的设计趋势当中,基于卡片的网页设计也开始在整个网页设计浪潮中占有一席之地。虽然比例不高,但是对他认可的设计师和用户正在稳步增加。

也许你对于曾经火爆一时的瀑布流还有印象,它也算是卡片式设计的一个分支,而最典型也是最具有影响力的,是Pinterest,国内的花瓣和它有着异曲同工之妙。当用户打开这些网页的时候,他们会逐渐洞悉到这种看似简单的设计背后对于信息和内容的高度整合,也会逐渐折服于这种简单但优雅的设计方法。

当然,卡片式设计并不止于此。而在你的网站中采用卡片式设计也有着足够的好处。

当你查看任何卡片式设计的时候,你是无法忽视整个设计中贯穿始终的栅格系统。每一个卡片的边缘都在整个设计中成为一套更大的栅格系统的一部分,他们在尺寸和间隙上保持着一致性与和谐性。

毫无疑问,规则的栅格化系统是有助于整个信息架构的建立的。信息架构为网站创造一套智能化的规则和流程,访客可以更轻松地吸收网站所提供的信息,明确每一个页面的功能和目的,掌控整个网站。

想想看,强调一致性的卡片式设计可以更好地引导用户的视觉。卡片的矩阵至少是按列或者按行对齐的,用户的眼睛可以沿着横向或者纵向有序地浏览。这种浏览方式可以让用户更快地找到对他们而言重要的内容。

拿摄影杂志Contrastly举个例子。如果你顺着栅格来浏览卡片会让你意识到这种信息架构的重要性。和许多网站一样,最新的文章在上面,旧的文章在下面。新的文章通常更重要,而文章下方的相关链接是同样重要的文章。这样的浏览方式确保了信息的条理,也让用户阅读更顺畅,黏度也更高。

我们不止一次听说“人是视觉动物”这个说法,而当我们遇上卡片式设计的时候,这个说法有了新的含义。卡片式设计让不同部分的样式设计趋于相同,在这种信息架构之下,同一个页面下的视觉的重要性令文案居于次席。

这也使得图片成为了卡片式设计的重中之重,而研究也表明,图片可以更好的提升网页设计。高品质的照片,和出现人脸的照片能更好的提高网页的转化率。事实上,有几种常见的图片处理方式,可以提升网页的 转化率。

换句话说,强化图片使用后的卡片式设计的网站会对用户更有吸引力。这也解释了为什么Alexa网站排名中,Pinterest 在美国排到了第15名。

看看Pinterest吧。当你在网站中搜索“美食”的时候,那些漂亮的照片和精心制作的美食会瞬间抓住你的眼球,你不会在第一时间注意到下面的说明,高品质的图片赋予你以网站的第一印象,然后才是其他。

每个设计师都会告诉你用户体验最重要。而这也是作为设计师的我们应该置于首位并且试图做到的。卡片式设计之所以会引起如此广泛的认同和共鸣,很大程度是因为它对于用户体验有显著提升。通常卡片式设计会让用户持续地浏览网站,并不断回来,让用户在网站中停留的时间更长,并且持续不断地提升转化率。

拥有优秀的用户体验的网站会让用户毫无挂碍地找到他们想要的东西,而Dribbble就是这样的一个典型。Dribbble作为知名的创意作品展示社区,它的设计师深谙卡片式设计的优势,可以让用户体验更简单直观,也更好。

设计师们优秀的构思和精致的小样本就适合于展示,网站的卡片式设计和用户的诉求紧密地结合到了一起。最具吸引力的图片极为有效地抓住用户的眼球,网站的栅格式布局让每张图片都相对均匀地吸引用户的注意力,从而让用户最快地找到真正吸引自己的作品,然后他们会自然地点开图片,一探究竟。Dribbble 在卡片式设计的基础上,调整每一个交互和细节,让用户以舒适而方便的方式来发掘他们真正想要的东西。

移动端流量超过桌面端流量早就不是什么新闻了。2015年仅美国一地移动端流量就占据了总流量的51%,而卡片式设计对于移动端的良好兼容性,使得它逐步成为大势所趋,甚至有取现有响应式框架而代之的倾向。相比于目前复杂多变的响应式网页设计,卡片式设计让内容更容易被消化,也可以让它们在移动端更轻松地显示。

换个角度来看,屏幕上的卡片其实更像是手机和平板屏幕的简化抽象出来的。当然,卡片要一次性匹配所有屏幕并不是一件简单的事情,但是有了响应式设计的,这似乎也并不是一件难于实现的事情。

这样一来,随着移动端市场份额的增长,卡片式设计的增长势头也不会减缓。

设计趋势这种东西,有的会长期成为众人所追捧的潮流,有的则在短暂的辉煌之后逐渐沉寂。卡片式设计更像是前者,一方面它是持续的进化之后的成果,另一方面它在这个移动端兴起的时代,呈现出实用而易用的显著优势,后劲十足的卡片式设计会在接下来越发流行。

它提供了一致性的继续你想架构,充分运用用户对于清晰而漂亮图片的痴迷提升转化率。卡片式设计对于用户体验的提升,使得用户可以在网站上更容易找到他们想要的内容,不论是出于需求还是由于趋势,它都将成为主流。

坦率的讲,卡片式设计并不是特别新颖的东西,但是它的确为目前的设计诸如了一阵强心剂。老的东西并不一定是过时的,重要的是它是否有益与当前的设计,迎合时代的需求,能否带领你我走向更遥远的未来。

webdesignerdepot

译文地址:优设

优设译者:@陈子木

(0)

相关推荐

  • 卡片式设计是如何占领设计圈的?

    正如同你所看到的,充满魅力的卡片式设计已经不仅仅是设计趋势了,它早已流行开来.这种设计手法的流行很大程度上是得益于占据主流的移动端,响应式设计成为标准配置,简约.扁平和极简比以往任何时候都受欢迎,卡片 ...

  • 20个案例告诉你着陆页设计趋势

    小编:作为设计师每天都会看到各种图,除了走马观花的看,你学会了分析了吗?还是只是进你杂乱的夹,嘘,也许你看了假图.今天继续跟随@UISTAR来学习下如何思考和分析你看到的优秀的图们. 作为设计师的我们 ...

  • 2017年十个UI设计趋势

    UI 设计越来越重要,它在直观塑造企业形象的同时,也成为留住用户的关键.与此同时,UI 的设计风格每一年都在发生变化.就像是扁平化.手势.微交互.卡片式成为过去两年中的关键词一样.总有一些好的设计总是 ...

  • 回顾2017系列篇(二):移动端APP设计趋势

    移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战.研究表明,用户每天耗费在手机和平板上的平均时长为158分钟, ...

  • Win10红石版最新设计理念互通卡片式UI曝光 秒杀用户

    虽然Build2016基本上是为专业的开发者准备的,但某些技术和功能的提前曝光绝对是给普通用户的一计“杀招”.比如Win10红石版最新设计理念:互通卡片式UI,就能产生这样的效果. 这种设计作用于操作 ...

  • 形式与功能 – 卡片式设计基础概念和运用方法

    卡片式设计有什么优点?什么时候可以运用卡片式设计?最近腾讯设计师leey 在项目改版中也运用了卡片式设计,发现效果不错,所以希望借在项目里的思考与尝试,抛出引子,供大家参考. 在互联网产品中,除了内容 ...

  • 2015年值得关注的21个网页设计趋势

    小编话:今天给大家带来的是@设计达人网分享的2015年值得的21个网页设计趋势.网页设计的发展速度是惊人的快,2014年已经过去,我们之前有总结过去年的网页设计,现在我们不妨来展望一下今年的设计趋势. ...

  • 50+创意卡片式网站欣赏

    小编:卡片布局是现今受欢迎的一部分,它由阴影或者轻微的色差来实现深度上的错觉.它受各种新闻.杂志和博客网站的欢迎,因为它能快速的向用户展示一个故事.设计师们用它们来实现各种不同的布局,有的使用不对称效 ...

  • 2019年 UI 和 UX 设计趋势

    写在前面: 2019年已经来了,新年新气象!给自己写一个可以量化的新年计划,然后努力的去给自己的计划清单打卡,等到年底了,看着收获满满,想想是不是还有点小激动呢?一起加油吧,骚年! 2019年的第一次 ...