福田新闻网

卡片式设计流行的秘密 — 看完这15个案例你就懂了!

随着Material Design的普及,卡式设计已成为当前界面设计的主流模式,并已渗透到各个行业和领域的UI设计中。作为信息载体的卡片也使卡式UI成为现代网页设计和移动应用程序设计的一部分。与传统的单页设计相比,卡片设计提供了更加个性化的用户体验,使界面设计清晰,平衡,美观,简洁,时尚,具有良好的可用性。该卡充当容器,可以适应不同的屏幕尺寸,而不会影响信息的显示。

在智能生活中几乎可以看到基于卡的设计和基于卡的交互模式。作为设计师,您需要考虑用户在不同设备上的使用和阅读习惯。白天,他们浏览桌面信息,休息时切换到移动设备,晚上选择平板电脑。因此,在卡片设计的前提下,应辅以相应的响应式设计,使各种设备完美呈现设计。卡片布局的设计非常符合这个元素。

因此,今天,黑客将为每个人普及卡片设计的概念,并组织一些高质量的卡片设计资源,希望在设计中为您带来更多的思考和灵感。如果您对卡片设计感兴趣,您也可以从原型设计中免费下载Mockplus。

该卡是一个带图像和文本的小矩形模块,是用户了解更多细节的入口点。为了平衡界面的美观性和可用性,卡基本上是默认选择。由于卡易于使用,因此它们还可以显示包含不同元素的内容。

7220494-1042749a0863eb08.png

谷歌将其称为“Inside Out design”(由内而外),这本质上是一个更好的信息集合。那么卡片设计的优点是什么?

(1)增加空间利用率?

在传统列表下,内容通常是垂直滚动操作,并且显示的内容是有限的。通过卡式布局,在垂直内容流中,还可以很好地添加水平滑动内容区域。

7220494-561eb5fee01869b5.png

(2)提高可操作性

卡是一种准物理元素,可以被覆盖,堆叠,移动和滑动。这可以更好地扩展内容的视觉深度和可操作性。

例如,iPhone附带的“Reminder”应用程序是一种堆叠卡片的方式。用户可以根据标题快速找到目标备忘录,同时点击打开或删除卡片内容。

7220494-d57f59d53e37d2e3.jpg

(3)有利于信息分层和整合

在卡片设计中,卡片是一个信息模块,即使用户快速浏览也不会感到困惑。块状卡使页面更整洁美观,同一页面中不同大小的卡片也区分了重要的信息级别。

7220494-7aa8b11ca4c948b8.jpeg

1. Google Play C Material Design卡

7220494-da4f9ba572e9b7b0.png

作为Google生产的网络应用程序,Google Play遵循颜色设计和界面设计的设计理念。整个网站使用大量的卡片设计进行设计。

相关阅读:材料设计资源为您提供灵感!

原因。具有上下左右滑动的互动,给用户强烈的操作感。

2. Quora

7220494-e1204ff84e0c7dd5.png

非正式地显示网页内容并考虑用户体验和友好性? Quora明智地使用卡片设计。从用户的习惯来看,用户喜欢阅读块的内容,并将卡片以块的形式放在一起,这更适合阅读。

优点是该设计使得内容不以长期形式出现,从而避免了因为内容太长而对用户的恐惧。简单明快的内容更容易引起用户的兴趣,因此用户可以选择是否继续阅读。卡片将内容提取并优化为有意义的块,不同类型和属性的内容可以作为有机,连贯的聚合在卡片上组合。

3. Linkedin

7220494-f22d2d2a75e889fe.png

根据Fitz定律:点击目标越大,用户操作越快。在LinkedIn的网站设计中,使用了文本+图片+链接。当在同一张卡中选择所有上述元素时,较大的图像是卡的中心,并且是整张卡的最大可点击范围(详细页面的入口点)。当鼠标移入并与网页交互时,用户获得“可点击”反馈。

4. Pinterest

7220494-6dab87d8ebcc91bb.png

作为卡片设计的早期先锋,Pinterest的瀑布设计页面设计为用户提供了无缝和流畅的体验。同时,减少点击次数也可以大大留住用户。卡片设计和瀑布流的组合也是经常听到的卡片流。

与LinkedIn的内容地图类似,可点击,Pinterest图像流的每个整个图像都是可点击的。材料设计通常会给卡片带来微妙的色调,尤其是在与鼠标交互时。这种设计非常合理,阴影和深度为用户提供视觉感知,增强其可见性和感知“可点击性”。用户可以将鼠标悬停在图像上以获得此类点击反馈。

5. Dribbble

7220494-4479b0ec7de363ff.png

在卡片设计方面,我要说的是设计师最喜欢的Dribbble。作为一个在线创意内容展示网站,Dribbble汇集了大量的视觉作品 - 图片。基于卡的设计通常主要依赖于视觉设计,并且使用大量图像是卡设计的一个亮点。

研究证实,图像可以改善网页或应用程序的整体设计,因为图像可以快速有效地吸引用户的注意力。因此,添加图像也使基于卡的设计更加迷人。因此,为了展示这种类型的内容,基于卡片的设计是Dribbble的正确选择。

6. Instagram

7220494-a6dbf01714a3a8be.jpg

在移动应用程序界面设计中,卡作为容器的作用更为突出。 Instagram是一个基于图片的应用程序。所有图像都以正方形发布,确保进纸流中的图像宽度,全屏,并且看起来非常整体。除了图片之外,这些卡片还带有文字和功能信息,三者相结合,形成一个完整的功能模块。

7. Trello

7220494-0466e6854761f6b0.png

卡片设计可帮助用户更好地对列表进行分类。 Trello的成功也源于其使用的卡片设计。基于卡的任务列表可以灵活使用,使其适用于用户,并帮助用户管理任务和工作。这也是Trello与传统交易管理之间的最大区别。

8. Airbnb

7220494-4d778e9730102b27.png

内容是有区别的。在卡片的基础上,Airbnb的设计采用无框设计,统一和重复的信息元素,使内容更加规则,并创造更整体的感觉。

9. AR汽车修理工App

设计师:Maciej Dyjak

地址:

7220494-323b9d69e2bb40ff.png

10.旅游文章页面

设计师:Faria

地址:

7220494-60efb4c9f851981b.png

11.旅游应用

设计师:Hippie Mao

地址:

7220494-ce56aed293876873.png

12. Cate APP

设计师:刘狗蛋

地址:

7220494-809fc7d897a30e67.png

13. Resto Friends App Exploration

设计师:Masudur Rahman

地址:

7220494-f794ae6246e30a31.jpg

14.实验分析:性能总结

设计师:Uber Design

地址:

7220494-30a00d80506958e4.png

15.定制家具购物应用

设计师:Jack W。

地址:

7220494-3e7e2c6c5ea4f8da.png

该卡是UI设计师的创意绘图板。它不仅仅是物化卡片UI控件,它还是创建高质量内容和创造出色用户体验的重要方式。看看上面15个基于卡片的高品质UI设计实例,希望您能够考虑并获得更多的设计灵感。

http://kids.zhangqilinzx.cn