掌握这些卡片设计要点,让初级变成高级设计师了!

用户头像
北京/UI设计师/5年前/1980浏览
掌握这些卡片设计要点,让初级变成高级设计师了!
用户头像
UI范

以卡片设计的界面越来越流行,基于卡片视觉交互正在广泛传播,相信大多数小伙伴还不太理解,今天范范就总结下我的经验之谈

#.什么是卡片?


卡片是装满图像和文字的那些小矩形,它们是进入更详细信息的入口。“卡片”一词是一个很好的隐喻,因为它们在用户界面中看起来就像是现实世界中的有形卡片。目前主流的一些APP都已经开始运用这种设计手法,整体视觉感是不错,简洁大方,易操作,不知道大家有没有发现?


比如下面这些案例:


暂时举例这么多,更多的细节需要自己感受...



#.那么卡片设计到底有什么优势?


卡片设计可以应用到各种环境中,可以正确实施,它们可以改善应用程序的用户体验等等。以下是总结的要点,认真阅读。


第一点:分块内容

卡片将信息组织成大块的内容,并且用户喜欢分块的内容,因为它有助于提高可扫描性:它有助于避免文字墙的出现,因为这些文字墙看起来令人生畏或耗时,并允许用户更快地深入自己的兴趣。卡将内容分为有意义的部分,类似于文本段落将句子分为不同的部分的方式。他们可以收集各种信息以形成一个连贯的内容。卡片是整齐的小容器,用于存储信息




第二点:容易消化

卡片是交流快速故事的好工具。将内容放置在卡中使用户可以消化。用户可以轻松访问他们感兴趣的内容,这使用户能够以他们想要的任何方式参与。




第三点:视觉愉悦

基于卡的设计通常严重依赖视觉效果。其实,在影像上会重是强度基于卡的设计。学习图像可提升网站和应用程序的设计水平,因为图像可有效且立即吸引用户的眼球。强调使用图像使基于卡片的设计对用户更具吸引力。




第四点:适合各种屏幕尺寸

卡片最重要的是,它们几乎可以无限操作。它们是响应式设计的不错选择,因为卡充当可轻松缩放的内容容器。此功能使我们可以跨多种设备创建单一的美感,并建立一致的体验,而与设备无关。



第五点:专为拇指设计

卡片是为拇指而制成的。卡是一种似乎只是为应用程序制作的样式。数字卡的行为与物理卡相同。用户喜欢卡片的简单性,并直观地了解将卡片翻转以获取更多信息或刷卡获取下一信息的物理原理。



#.总结要点


1.选择简单的字体和易于阅读的配色方案(将文本放在具有足够对比度的纯色背景上时,文本最容易辨认)

2.尽量限制字体的数量。对于大多数卡片项目而言,一个字体就足够了

3.在设计时要考虑上下的呼应性,不要盲目去设计


欢迎关注我们微信公众号:UI范

5
举报
|
21
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
空的平台平面和自然景观
海底世界插画
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
空的平台平面和自然景观
平面设计 吊牌设计
平面插画设计女孩喝咖啡
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
城市园林平面布局航拍
中国传统纹样创新图案设计
玄关入门地毯印花图案红地毯
平面书法字手写
城阙凡花
城市园林平面布局航拍
平面设计风格的粉色草莓味马卡龙
“知识宅急送”外卖,快递,平面,海报,素材,教育
水蜜桃和李子的平面水果图案
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
金色颗粒质地的平面
平面插画情侣/矢量
平面男孩喝咖啡插画设计
牛奶乳液层次平面平铺平面
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
金色颗粒质地的平面
你可能喜欢
相关收藏夹
ui
ui
ui
ui
大家都在看
登录注册