- 卡片式设计 | 掌握这些技法,快速提升界面效果!
- 一图读懂
- 正文
- 卡片式设计 | 掌握这些技法,快速提升界面效果!
- 一、卡片式设计的定义
- 1.什么是卡片?
- 2.互联网中的卡片式设计
- 二、卡片式设计价值
- 1.结构清晰
- 2.场景拓展
- 3.空间扩展
- 4.突出重点
- 5.兼容多端
- 6.易于操作
- 7.跳转流畅
- 三、常见的卡片式设计样式
- 1.四周留白
- 2.悬浮内容之上
- 3.通栏类型
- 四、卡片适用场景介绍
- 1.瀑布流
- 2.信息流
- 3.左/右滑动
- 4.优惠卡/券
- 5.突发事件/临时提醒
- 6.部分页面头图
- 五、卡片式设计原则及小技巧
- 1.一致性原则
- 2.功能定位决定卡片形式
- 3.避免过多卡片嵌套
- 4.合理利用横向空间
- 5.降低纵向空间的浪费
- 6.长文表达不适合卡片
- 7.突出一个核心内容
- 六、结语
卡片式设计 | 掌握这些技法,快速提升界面效果!
卡片式设计 | 掌握这些技法,快速提升界面效果!
❤️
微信公众号:能量眼球
❤️
发布时间:2022-10-10 09:05
一图读懂
正文
卡片式设计 | 掌握这些技法,快速提升界面效果!
近几年,卡片式设计可以说是移动端产品中极为常见的设计形式了,甚至有很多互联网大厂将卡片式设计纳入设计语言,在各大APP中得到广泛运用。
卡片式设计自带分割属性、让界面更有层次感,能给人一种视觉上的享受,也因此让其成为了页面布局的利器,但它并非万能,因分割的原因可能会影响用户沉浸式的浏览体验、造成横向/纵向空间浪费等问题,需要根据实际场景和内容形式来确定,不要专门为了“卡片式”而设计。
很多设计师对卡片设计习以为常,但对于使用卡片的原因、视觉表现方式、优/缺点等并不是很了解。那么卡片到底该如何设计?需要注意哪些细节?笔者根据经验并结合平时的一些思考,跟大家一起聊聊在设计中极易忽略的细则,希望能帮助大家提升卡片设计的精致感。
一、卡片式设计的定义
1.什么是卡片?
早在互联网时代之前,卡片就出现在了我们生活中的方方面面,如名片、不干胶标签、便利贴、会员卡...等,不管是何种类型的卡片,它都将代表着我们现实生活中的某个特定信息。
加载失败,