独家新闻日记

老板让做个卡片式设计,我上哪里找参考?

卡片式设计(Card Design)作为2018年UI设计的大趋势之一,已经深深植根于互联网世界当中。

作为承载信息的“容器”,卡片式设计能够包含文本、媒体和按钮等元素,而且能够适应不同设备、屏幕尺寸,平衡用户界面和用户体验之间的关系。

什么是卡片式设计?

就像是名片一样,一个小小的矩形,里面有图片和文字,卡片式设计能够作为用户获取信息的切入点,既美观又不失可用性。由于卡片式设计能够显示包含不同的元素内容,也易于使用,所以现在不少界面默认选择用卡片式设计。

卡片式设计的优点?

增加空间利用率

传统的列表样式,需要我们不断往下滚动才能看到更多内容,而且显示的内容有限。但用卡片式布局,即使是瀑布流,通过水平滑动也能显示更多内容。

提高可操作性

卡片不仅仅是能够展示信息,同时卡片式设计还具有可以被覆盖、折叠、移动和滑动的特点。如此一来,更有利于扩展内容的视觉深度和可操作性了。

像是iPhone的通知中心,就是使用堆叠的卡片式设计,同类型的消息会被折叠起来,可以帮助用户迅速找到自己想要的东西,只需要点击就能打开,或者通过滑动删除。

方便信息集成

卡片式设计,除了能尽可能展现信息以外,其实还具有“逻辑”,即使我们超快速浏览页面,也不会因信息多而感到混乱。卡片式设计将界面用块状分割开来,让页面更加整洁、赏心悦目。一个页面中各种卡片大小不一,信息的层次结构立马就被区分开来了。

个性化的用户体验

比起传统的UI设计,卡片式UI相对简单直观,最大的优势是它让整个界面更加清晰、平衡和简洁,同时又没有影响App的功能。

优秀的卡片式设计

Google Play

Google Play是一个很好的例子,整个网站的色调都遵循着Google的风格。卡片式设计在网站里随处可见,模块化让整个网站看起来井井有条。

Quora

作为一个内容网站,Quora用卡片式设计解决了如何在有限的布局内平衡显示内容和用户体验。用卡片将信息组合成每个小模块,便于用户阅读。

Linkedin

点击目标越大,用户的操作越快,Linkedin展示内容的格式就是文本、图片、链接,当一张卡片都具备这些元素的时候,中心的图片就成为了整个卡片上最大的可点击区域。

Pinterest

作为卡片式设计的先驱,Pinterest的瀑布流页面设计为用户提供了一种流畅无缝的浏览体验。尽可能减少点击次数,很大程度上留住了用户。跟Linkedin,Pinterest的每个图片都是可以点击的,在鼠标停留在页面图片的时候,图片就会有微妙的阴影、颜色变化,引导用户点击。

Dribbble

经验表明,图片能够快速吸引用户的注意力。由于每天都有很多设计师上传自己的创意,Dribbble选择了使用卡片式设计来展现每个作品。

Instagram

Instagram里面所有图像都是以正方形发布的,这样可以将瀑布流布局中的图像宽度标准化。

Trello

Trello运用卡片式UI将内容分类,优化了用户管理任务和工作的方式。

Airbnb

Airbnb一直专注于用视觉效果来吸引用户,卡片式设计简单直观,有利于改善用户体验和区分每个内容。Airbnb还采用无框设计,将统一和重复的信息相结合,内容显示有一个标准的模式展现。

除了这些例子,Dribbble上还有很多优秀的卡片式UI供我们参考学习。

Maciej Dyjak

Faria

Masudur Rahman

Uber Design

Jack W.

卡片式的UI设计,不仅仅是页面上的控件,它还是创建高质量内容和提供好的用户体验的重要布局元素。上面的例子展示了卡片式设计的最佳实践,最为当下UI设计的常态风格,再不掌握连跳槽的资格都没有啊( ´▽`)

欢迎大家留言评论,转发和收藏^^

—————END————

推荐新闻