web和移动App正在从单纯的页面向完全注重用户个性化体验的方向发展,这些新的体验方式建立在以用户为中心的基础上,而这种人性化的体验直观的呈现在我们面前的就是卡片式界面,卡片式界面的交互方式已经得到了广泛的应用,无论是新闻站点还是美食类的app,你都能看到它的身影。

在这篇文章中,我将会向你们诠释出卡片式界面设计对UI设计师的意义,并附以三个非常流行的卡片式界面案例说明。如果你在设计用户界面的时候对这种方式感兴趣,您可以免费下载Adobe Experience Design CC立刻体验。

什么是卡片式界面

卡片式界面就是一个包含着丰富的图片和文字内容的小矩形,在实际应用中,它常常是作为详情页的入口使用。由于这种形式跟我们现实世界的卡片极为相似,所以用“卡片”这个词形容最合适不过了。
在网络和移动APP出现之前,卡片在我们的日常生活中可谓是无处不在,名片、棒球卡、甚至便签等。因此,这种方式就像日常生活中的卡片一样使我们能够更加直观的了解内容。

61b9582a7e10a84a0e282b95db6f.jpg
棒球卡是现实生活中很好的一个例子,通过双方球员的小卡片我们能够了解到对方球员的基本信息

卡片式界面的优势

数字卡片可以应用到多种应用场景,如果能够适当应用的话,它将会大大提升一款app的用户体验。

组块内容  

卡片把信息组织成块状结构后很利于内容的扩展,避免了内容的大面积堆积造成用户阅读困难和时间的浪费的问题,使用户能够快速深入的找到自己感兴趣的内容。它就像文章段落的句子一样,由不同形式的结构内容组合成一个连贯的内容。

5e13582a7e32a84a0e282b622643.jpg

卡片就是个小型的信息容器

易于消化                                                                                                                                                                                        

卡片是一个非常棒的快速沟通的方式,把内容放在卡片里用户非常容易消化。并且卡片直观简约的形式使用户能够快速找到自己的目标,并且很乐于与此产生互动。

视觉的愉悦性                                                                                                                                                                                    

卡片式界面设计非常依赖视觉,事实上,加大卡片中的图片是很有利的,研究表明图像能够提升网站和应用程序的用户体验,因为图片能够快速的吸引用户的眼球,所以在卡片式界面中加大图片的部分更能吸引用户。

ea3f582a7e60a84a0e282bcda0c3.jpg

卡片以直观的视觉形式为用户梳理了信息

易于多尺寸设备适配

卡片的无限扩展是最重要的一面。对于响应式页面设计卡片是非常好的选择,因为它能够上下自由伸展,在响应式页面中巧妙的利用卡片的特点进行相关的设计,不仅能够保持多平台多尺寸屏幕的视觉统一性,同时也大大的提升了工作效率。

4eb7582a7ed4a84a0d304ffb5440.jpg

卡片式界面设计能够完美的适配多平台及不同尺寸的屏幕

为手指而设计

卡片是为手指制作的,卡片式界面是为app设计的一种方式,数字卡片的交互方式与物理卡片相似,用户喜欢简单明了的卡片形式,通过这种形式获得更多的信息或者滑动到另一个界面。如果卡片能够跟动画和交互非常自然的融合在一起,那么这种形式将会产生无限的可能性。

最好的卡片设计案例

卡片式设计在网页和移动界面中得到了广泛的应用,这种形式把交互和可用性很好地融合在了一起。但是要想把卡片式界面设计好,简洁美观的页面设计以及适当的用户操作方式都是必不可少的。

瀑布流

卡片在瀑布流设计中比较常见,它创建了一条呈现事件的的时间轴。例如,Facebook在新闻版块中使用卡片作为最新新闻快览的展现形式,Facebook的新闻版块是一个长度自适应的瀑布流,而这些卡片新闻都是基于个人喜好推荐的。这种瀑布流的展现方式,不仅能够使用户相互分享,同时还能够分享到社交网络中。

feb1582a7ef7a84a0e282bc3f7dc.jpg
Facebook是一个很棒的以内容为导向的卡片设计案例

发现

卡片式界面自然的展现了相关的内容,这就使用户能够深入的了解自己感兴趣的内容。以Behance为例,这是一个在线展示创意性作品为主的社区,而卡片的形式是最合适展现这种内容的形式。
058f582a7f10a84a0e282b7e8bff.jpg
Tinder是目前非常流行的app,它是利用发现机制驱动用户进行自由选择的例子。Tinder有一个非常简单的滑动界面的操作—你向左滑,表示你对此不感兴趣,向右滑,则表示喜欢。这种滑动卡片的机制对用户来说会有一种奇妙的吸引力,因为每一次滑动卡片都是在收集信息,通过滑动卡片进行信息的筛选从而得到最好的。
996d582a7f39a84a0d304fc54696.jpg

工作流

卡片很适合应用在任务列表的分类设计中,Trello任务管理应用使用卡片的形式为用户建立任务面板,每一个卡片都代表一个单独的任务。

4f94582a7f4ea84a0e282b66751f.jpg
一个Trello画布上布满了任务卡片

对话框

卡片作为内容容器能够非常清晰的展示相关的内容。我们可以看一下苹果设备的AirDrop服务,当你有一个传入的数据等待接受时,屏幕上会有一个弹框的通知等待用户进行接受和拒绝的操作,苹果的截图主要是针对图片,而开发人员可以把任何形式的内容放进卡片,无论是优惠券、歌曲还是网页链接。
e636582a7f67a84a0d304fc49fad.jpg
面板

卡片设计提供了一种将不同数据内容进行精确分类的形式,通过卡片,你能够把复杂的信息组织成一组组富有逻辑的面板。一个精选的卡片内容是在众多内容提供商中进行筛选、组织并且分类,再把相似的内容分配到对应的卡片中。
c7b7582a7f7ca84a0d304fea667b.jpg
卡片式界面设计语言

在2010 年,微软推出了Metro设计语言,这种设计风格的关键性原则是能够让用户更好的聚焦在应用程序的内容上,通过扁平的卡片形式以及错落有序的排版结合实现。Metro风格的卡片设计不仅仅是一个设计元素,它通过简单的交互满足了用户基本的功能需求。
5ec3582a7f9da84a0d304f91153f.jpg

卡片设计中的细节

卡片和简约设计

当你想考虑使用卡片式的设计形式时,简约性必须牢记在脑中。Carrie Cousins建议“一个卡片只传递一条信息”,一个卡片可以包含多种设计元素,但是每一个元素都应该聚焦在一个主题信息上,这样才能让用户在众多的内容中精确的选择或分享自己感兴趣的部分。
481e582a7faca84a0e282bed607d.jpg

卡片和响应式设计

我们都知道在设计app或网站时适配好多种尺寸的设备是多么的重要,当我们为不同尺寸的设备设计页面时,我们应该在充分利用目标环境特点的基础上,采用卡片的形式简单快速的适配好不同尺寸的设备。卡片具有非常优秀的兼容性和相扩展性,卡片栅格系统能够重构页面从而适配好其他尺寸的屏幕。
数字卡片的好处在于它有多种操作方式,例如,在移动设备中,卡片可以垂直叠加,类似手机上的活动流。
f729582a7fc4a84a0d304f769699.jpg

当应用到大屏幕时,则可以把画面分割成网格。
57af582a7fe9a84a0e282bbbd9c0.jpg

卡片的高度可以是固定或变化的,你可以设置一个固定宽度或变量宽度来适应不同的设备要求。
f06d582a8004a84a0e282b5dab39.jpg

卡片和排版

卡片设计必须对用户来说是易读和容易理解的,所以你在设计卡片的时候必须最大程度的保障卡片的易读性。
选择简单的字体和鲜明有序的配色方案(文本放在跟字体颜色对比鲜明的纯色背景上是最清晰的)
尽量控制好字体的数量,对于大多数的卡片来说,其实一种字体就足够了。
6c8e582a8030a84a0d304fb2b15b.jpg

总结

大多数人通过以上内容可能对卡片式界面设计为何如此流行的原因有了大致的理解,这种设计方式还会接续持续,它将作为在应用程序设计中继续发挥着重要的作用。

能够使卡片持续发挥作用的是它简约的设计和易用性,卡片不仅仅是一个外观形式,它们是创造简约内容的最灵活的排版布局方式之一。现在,人们能够快速的找到自己想要的信息,我们相信它将会在越来越多的平台设备上继续发光发热。