同今生活在线网

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

UI设计培训 2019-09-11 12:0193未知kpssjlxd

随着Material Design的流行,卡片式设计几乎成为当前界面设计的主流模式,并且已经深入到各个行业、领域的UI设计当中。卡片作为信息载体,也使得卡片式UI成为现代网页设计和移动应用设计的一部分。相比传统单一的页面设计,卡片设计提供更多个性化的用户体验,使界面设计清晰平衡、富有美感、简约时尚而又具备良好可用性。而卡片作为容器,能够适应不同屏幕大小而不破坏信息的展示效果。

智能化的生活中几乎随处可见卡片式设计以及基于卡片的交互模式。作为设计师,需要考虑使用者在不同设备上的使用和阅读习惯。白天,他们在桌面设备浏览信息,休息时间切换到移动设备,而晚上则有可能选择平板电脑。所以,在卡片设计的前提下,应辅以相应的响应式设计,使得各种设备都能完美的呈现设计。而卡片布局的设计就非常符合这一要素。

所以今天摹客将为大家普及卡片设计的理念,整理一些优质的卡片式设计资源,希望能在设计上为你带来更多的思考和灵感。如果你对卡片式设计非常感兴趣,也可以免费下载Mockplus从原型设计开始制作。

一、什么是卡片式设计?

卡片是含有图片和文字在内的小矩形模块,它是用户了解更多细节信息的入口。要平衡界面的美学和可用性,卡片基本是一个默认选择。因为卡片用起来非常方便,还可以展示包含不同元素的内容。

二、卡片式设计的优势是什么?

Google将它称之为“Inside Out design”(由内而外式),它的本质是更好的处理信息集合。那么卡片式设计具备哪些优势呢?

(1)增加空间利用率

在传统列表下,内容一般为纵向滚动操作,展示的内容有限。而采用卡片式的布局,在纵向的内容流里,还可以很好的增加横向滑动的内容区域。

(2) 提升可操作性

卡片是一种拟物化元素,可以被覆盖、堆叠、移动、划动。这样能更好的拓展内容视觉深度和可操作性。

比如:iPhone自带的“提醒事项”APP,就是采用卡片堆叠的方式,用户可按照标题快速查找目标备忘录,同时进行点击操作,打开或删除卡片内容。

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

在卡片式设计中,一张卡片就是一个信息模块,用户即使快速浏览,也不会产生混乱。块状的卡片使得页面更加整齐美观,同一页面中卡片的不同大小,还区分了信息的重要等级。

三、优质卡片式设计实例赏析网页类卡片设计实例

1. Google Play – Material Design卡片

Google Play作为谷歌出品的一款网页应用,不管是颜色搭配还是界面设计都遵循了Material design设计理念。整个网站的设计运用了大量的卡片设计。

无论是首页推荐还是细分类别,模块化的展示使整个网站界面看起来整洁大方,十分具有条理性。配合上下、左右的滑动交互,给用户极强的操作感。

上一篇:QQ极简与夜间模式设计 下一篇:没有了

杰途IT培训学习网 备案号:

本站内容部份来自网络和网友自行发布,如有侵权等问题请联系本站删除。