莫b

卡片是我们随处可见的UI元素,原因很简单,它们占用的空间非常小,并且可以显示足够的信息,通常还有1-2种选项设置。

墨刀网站中的卡片设计

为什么使用卡片
1)卡片能够存在和流行,因为它们本身拥有简约的设计和良好的可用性。
2)卡片作为切入点,可以进一步展示更详细的信息。
3)卡片在视觉上也很令人愉悦,因为在大多数卡片上,卡片的图像为卡片赋予了风格。
4)它们自动适应Web和移动视图。
5)没有太多认知负荷,毕竟卡片无处不在,用户早已经很熟悉。
6)它们保持界面井然有序,且非常简约。

 

1.了解结构

UI中的“卡片”就相当于物理世界的卡片。它们可充当容器,将内部信息组合起来。

(该原型使用墨刀设计)

 

2.阴影/描边

阴影/描边有助于呈现出卡片的形态,至于你是想使用阴影还是描边,取决于UI的风格。

(该原型使用墨刀设计)

 

3.背景

卡片的好处在于:只要保证视觉上没有太繁多的对比,卡片的背景你可以随便“玩”。

(该原型使用墨刀设计)

 

4. 文本大小和重量

当字体较小时,用户会倾向于“细读”;而字体较大时,用户更倾向于“跳读”。
如果字体粗细使用错误,会影响可用性和美观性。

 

5.对比度

卡片面积比较小,因此对比度在分割信息和体现优先级方面起着重要作用。

 

6. 按钮

卡片上可以使用普通按钮、文本按钮或图标。在垂直卡片上,按钮通常放置在底部上;在水平卡片上则是在右侧或底侧。

 

7.间距和空隙

在可聚焦元素之间添加适当的空隙,也留足够的间距来对内部信息进行分组。

 

8.对焦和悬停

要使卡片在鼠标悬浮时更明显,通常使用较暗的阴影上升一点高度


本文由墨刀编译自Dorjan Vulaj 的8 rules for a perfect card design,转载请联系。

封面Photo by Aditya Chinchure on Unsplash

墨刀作为一款在线原型设计与协同工具,已经帮助众多产品经理和设计师们轻松做出交互原型,展现和验证设计想法,还支持多人协作编辑,分享和评论。

 

原文地址:墨刀(公众号)
作者:Dorjan Vulaj

转载请注明:学UI网 » 如何做出好的“卡片”设计?8种方法大分享

登录收藏
 
你可能喜欢的:
设计沉思录|美事升级,不止于改版设计沉思录|美事升级,不止于改版
这篇“点9”文,欠大家两年了!这篇“点9”文,欠大家两年了!
案例:如何优雅地用卡片分类法,搞定烦人的用户需求???案例:如何优雅地用卡片分类法,搞定烦人的用户需求???
抖音VS快手,产品模式是如何影响交互模式的?抖音VS快手,产品模式是如何影响交互模式的?
如何更好的使用弹窗?如何更好的使用弹窗?
一款APP的交互文档从撰写到交付③一款APP的交互文档从撰写到交付③
关于评分功能的一些思考关于评分功能的一些思考
一款APP的交互文档从撰写到交付②一款APP的交互文档从撰写到交付②
Material Design Layout Spacing methods 间距规范Material Design Layout Spacing methods 间距规范
拇指驱动产品设计 | 手势交互拇指驱动产品设计 | 手势交互