中国设计网:浅谈UI设计中的卡片式设计

设计资讯
发布日期
2020-04-06 05:16
发送

卡片式设计对于我们来说并不陌生,从设计类网站上或市场上的一些APP中也会看到很多的卡片式设计的案例,卡片式设计也是UI设计中最常用的方式之一。

最近在新项目的设计中也尝试使用了卡片式设计,结合实际项目中的得到了一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望自己通过本次的总结进行知识沉淀,以及跟大家一起探讨下卡片式的设计。

来源于日常

在现实生活中的卡片式设计可以说是无处不在,例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡......诸如此类的生活常见品都是以卡片的方式存在,其共同点都使用一个容器中承载着内容,并且具有“便携性、信息简洁和相对独立性”。

UI设计中卡片的使用场景

在项目设计之初我分析了一些使用卡片设计的App,并且从中整理总结了几个较为常见的卡片式设计的使用场景。

Feed流

卡片式的feed流设计是一种非常常见的设计,早在前几年Facebook、Google+等产品就使用了这一方式,Feed流作为一种长内容的媒介,用户需要长时间的滑动看内容并筛选有效信息,卡片式设计很好的解决了内容与内容的区块分隔,让用户在长屏幕滑动中依旧可以很好的明确每一块的内容。

实际案例-淘宝微淘

瀑布流设计

瀑布流的出现让单屏区域内显示了更多的内容,而内容较多的情况下,使用卡片式设计较好的对内容进行了区域划分,让左右上下的内容从整体中具有相对的独立性。

实际案例-Pinterest

左右滑动组合型内容

卡片式设计具有较强的层次感,相比于拉通平铺更能呈现内容可滑动感受,并且块状化的设计让内容具有较高的区域分割感。

实际案例-QQ音乐

Tips提醒

作为非界面固定内容,卡片式设计可以让tips提醒设计变得更自由,在符合用户体验的基础上,它可以出现在任何我们想要它出现的位置。

实际案例-淘票票会员提醒

结合手势的单块可互动内容

若页面中有且只有一个主内容,并且需要用户进行快速筛选时,可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。

实际案例-探探首页

卡券类设计

卡券类的设计实际上是一种物化映射的过程,我们在现实中看到的卡券造型,结合卡片式的拟物化设计,让用户在屏幕上可以更直观的感知,提升了设计的代入感。

实际案例-京东领券中心

集合型功能入口

集合型功能入口往往会有多个入口,使用卡片式设计让入口形成一个区域整体,可以做到既统一又相对独立。

实际案例-淘宝微淘关注账号
 

个人主页顶部内容卡片

个人主页的设计往往会在氛围上营造沉浸感,卡片式的设计可以把关键信息进行概括收归,让原本单个的内容形成一个整体。

实际案例-美团外卖会员

规则探讨

责编:春林
THE END

本文标题:中国设计网:浅谈UI设计中的卡片式设计
本文链接:https://www.chinadesignw.com/sjzx/1127.html

相关热点

10月22-23日,第28届中国(深圳)国际礼品及家居用品展览会(秋季展)即将在深圳国际会展中心举办,作为最具影响力的礼业顶级盛会,本届展会携手产业上下游4000+展商继续逐浪前行、斩获...
设计资讯/ 2020-09-11
聚焦设计价值 深耕设计师生态圈 躺平设计家平台拥有超1000万全球注册设计师,遍布200多个国家与地区,并与全球5万个商家建立了深度合作。 躺平设计家以免费、简单、高效的3D设计工...
设计资讯/ 2020-09-07
首届福佑文玩乐淘节今日开幕 上海福佑文玩城今天举行首届福佑文玩乐淘节开幕仪式。 本次文玩乐淘节邀请到了全国各地500多位文玩藏家齐聚福佑,并特设六场专业的主题活动:海上...
设计资讯/ 2020-09-03
9月1日是全省中小学开学的日子,江北设计小镇正式启用的金陵中学浦口分校迎来了首个开学日。 据了解,金陵中学浦口分校是江北设计小镇为提高教育水平和办学质量,新引进的公办...
设计资讯/ 2020-09-02
8月28日,同裳@东方 2020大浪杯中国女装设计大赛暨十周年颁奖盛典在深圳大浪时尚小镇盛大举行。星光璀璨,万众期待,最终18号选手杨岳凭借作品《拾荒者的乐趣》突出重围,一举夺...
设计资讯/ 2020-09-01
以升级住房消费健康绿色建筑为主题的第十六届国际绿色建筑与建筑节能大会暨新技术与产品博览会(以下称:绿建大会)2020年8月26至27日在苏州国际博览中心完美收官。2005年至今,绿建...
设计资讯/ 2020-09-01

相关推荐

3