飞特网

  • 飞特网官方微博
  • 飞特网微信公众号
飞特网 顶部通栏广告

十分钟认识UI设计中卡片式设计技法

leyqw发布于:2019-4-17 10:02 |原作者: 张增顺
简介: 正确认识卡片式设计,什么是卡片、总结卡片优势、卡片正确设计知识通过设计两个案例进行讲解,卡片在运用时的技法,望能帮助大家

版权申明:本文出自“张增顺”原创,感谢“张增顺”的原创文章分享!

好久没有发文章了,今天顺叔和大家一起聊一聊卡片式设计,无论是WEB还是APP卡片式设计运用的比较多,很多UI设计师比较偏爱这样的表现,卡片式设计会给人一种视觉上的享受,也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解,不能因为卡片式设计而卡片式设计,要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家,之后的几篇系列文章中,顺叔会从界面中比较趋势的设计技法进行分析,希望能帮助到一些设计的小伙伴。

教程前的引言

卡片式设计这几年比较流行,同样这样的设计表达也是个趋势,应用在APP PC界面中至今还流行着,从事UI设计的都会知道卡片式设计,具有把内容整合模块化,从视觉,个性化体验上进行呈现,是设计师在设计时常用的一种表现,同样也具有独特的创新概念。

在一些项目中,一些客户会说这个设计的APP界面有点太白,没有层次感怎么办,那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法,卡片式设计,可以解决在画面中有个性化 、变化、 层次感的设计。那客户又问什么是卡片式设计呢?

一、什么是卡片

无处不在的卡片设计具有个性的美感和很好的易用性,是以文字标题,小标题, 图形或图片组成的模块化,以块状形式规整的整合内容,让内容更规整化,视觉上更个性化,也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势,而卡片在设计中也占用一定的优势,让整体更加的有层次感,在运用起来也比较方便,从视觉、体验、交互都具有不错的优点

设计效果图展示

顺叔为了这个文章特意设计了两个案例,通过这两个案例进行一些讲解。请见下图:

十分钟认识UI设计中卡片式设计技法 飞特网 设计理论

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

二、卡片设计优势

1.趋势

无论是大平台 还是小平台的产品都会运用这样的卡片式,跟风式设计趋势,也让卡片式设计成为了一个现在常用的优势,不过卡片式设计的确有很好的效果

十分钟认识UI设计中卡片式设计技法 飞特网 设计理论

2.层次感

具有一定的层次感,能在页面版式中起到设计上的不同,个性化变化,页面层次感区分强烈,能更好的体现提炼出内容

十分钟认识UI设计中卡片式设计技法 飞特网 设计理论

3.规整化

卡片式设计以图片、 图标、LOGO、 标题、 整合到一起 以块状的形式在界面中展示,更规整的排版呈现。虽然内容多会导致页面乱,一个模块包含内容之后就会规整不少,也给页面设计上带来了更好的视觉

十分钟认识UI设计中卡片式设计技法 飞特网 设计理论

4.视觉体验

卡片式给整个页面会增加视觉上的体验,特别那种大图片卡片式更具有视觉上的冲击力,背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、 产品需求、功能进行设计。以达到最好的用户体验、视觉体验。

不要为了卡片设计而卡片设计。

十分钟认识UI设计中卡片式设计技法 飞特网 设计理论

1234下一页
2

好评

差评

刚表态过的朋友 (2 人)

leyqw
天津市 河西区 平面设计师
+ 关注 私信
  • PS制作手表网站横幅教程
  • Material Design暗色主题设计指南
  • 电商化妆品修图思路介绍

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 飞特网