国内最专业的IT技术学习网

UI设计

当前位置:主页 > 亚博2018体育博彩 >

银河官网: 卡片式设计流行的秘密 — 看完这15个案例你就懂了

发布时间:2019/09/11标签:   APP设计      网页设计      mockplus      设计理论      A    点击量:

原标题:银河官网: 卡片式设计流行的秘密 — 看完这15个案例你就懂了

地址:https://dribbble.com/shots/4611632-Customized-Furniture-Shopping-App

设计师:Hippie Mao

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

1. Google Play – Material Design卡片

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

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

5. Dribbble

2. Quora

what is a card ui design

what is a card ui design

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

设计师:Faria

what is a card ui design

在移动应用界面设计中,卡片作为容器的作用更加凸显出来了。Instagram作为一个以图片为主的应用,所有图片以正方形发布,保证了图片在feed流里的宽度,撑满全屏,从而看起来很整体。除图片外,卡片也承载了文字和功能信息,三者组合在一起形成完整的功能模块。

好处在于这种设计让内容不会以长篇大论的形式出现,避免因为内容太长让用户产生畏惧心理。简单明快的内容更容易引起用户兴趣,用户也因此能够选择是否要继续阅读下去。卡片将内容提取、优化为有意义的区块,银河官网,而且不同类型、属性的内容可以在卡片上组合称为有机的、连贯的聚合体。

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

一、什么是卡片式设计?

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

地址:https://dribbble.com/shots/5306051-AR-Car-Mechanic-App

what is a card ui design

根据费兹定律:点击目标越大,使用者的操作速度越快。领英的网站设计中,使用到了文字+图片+链接的方式。当以上所有的元素框选在同个卡片中时,面积较大的图片则是卡片的中心,并且也是整张卡片中最大的可点击范围(详细内容页面的进入点)。伴随鼠标移入与网页产生的交互,用户即可得到“可点击”的反馈。

what is a card ui design

设计师:刘狗蛋

作为早期的卡片式设计先驱者,Pinterest的瀑布流设计的页面设计方式为用户提供了无缝式的流畅体验。同时,减少点击步骤也可以极大限度的留住用户。卡片式设计和瀑布流的结合也就是常听说的卡片流了。

地址:https://dribbble.com/shots/5020742-Cate-APP

what is a card ui design

设计师:Masudur Rahman

(1)增加空间利用率

what is a card ui design

设计师:Jack W.

12. Cate APP
结语

卡片是UI设计师发挥创意的画板。它不仅仅是一个拟物化的卡片UI控件,还是创建优质内容,营造优质用户体验的重要布局手段。看了以上15个优质的卡片式UI设计实例,希望你能从中思考并且得到更多设计灵感。

设计师:Maciej Dyjak

11. Travel App

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

4. Pinterest

what is a card ui design

what is a card ui design

what is a card ui design

地址:https://dribbble.com/shots/5093616-Resto-Friends-App-Exploration-02

研究发现已证实,图片可以提升网页或 app 的整体设计,因为图片可以快速有效地吸引用户的注意力。所以,加入图片也使得基于卡片的设计更加引人入胜。那么,要展示这类内容,基于卡片的设计对于Dribbble来说是再合适不过的选择了。

14. Experimentation Analysis:Performance Summary
(2) 提升可操作性

what is a card ui design

版权信息Copyright ? 银河官网 版权所有??? ICP备案编号:鲁ICP备09013610号