卡片使用_APP必备的设计元素！卡片

文/闫文喆 卡片是承载信息的容器&＃xff0c;卡片可以承载不同类型的内容&＃xff0c;其元素可以包含&＃xff1a;图片、文字、视频、按钮、优惠券、音乐、付款信息、注册表单、社交媒体流或分享、奖励信息、链接以及以上元素的任意组合。

卡片也就是承载一些图片和文字信息的容器&＃xff0c;作为跳转下级页面的入口&＃xff0c;不同的卡片都遵循在一个统一宽度和样式的卡片内&＃xff0c;进行发挥和设计。既保证了卡片和卡片之间的独立性&＃xff0c;又保证了服务和服务的统一化设计。用卡片当作不同内容的载体&＃xff0c;会使得层次简单易懂&＃xff0c;用户易于滑动浏览。

卡片简单易懂&＃xff0c;用户不需要考虑事情如何发生&＃xff0c;可自然而然的创建舒适的用户体验。当用户与卡片进行交互时&＃xff0c;可以分成几种行为模式。卡片通常会做三件事&＃xff1a;记录信息、用信息吸引用户或提醒用户信息。根据卡片的内容元素&＃xff0c;将卡片进一步细化为不同类型容器。

①叙述。卡片以瀑布流形式出现&＃xff0c;同时创建事件发展的时间轴。

②发现。卡片能让相关内容自然的呈现出来。采用网格或瀑布流布局时&＃xff0c;使用淡入效果展现卡片&＃xff0c;会让用户觉得好玩和身在其中。

③对话。由于卡片是相对独立的&＃xff0c;它们能够完美展示正在进行的对话。

④工作流。卡片可以将待办事项快速归类。例如&＃xff1a;创建不同的笔记或待办事项的卡片&＃xff0c;当用户删除时&＃xff0c;剩余的卡片按照初始顺序重新排列。

在手机APP中&＃xff0c;用户可以清晰地感知到距离接近的信息在一张卡片之上&＃xff0c;卡片通常会有一个大的底色来做背景&＃xff0c;以使卡片的视觉层次效果更加明显。结合卡片的宫格式布局可以将页面的视觉层级变得更加清晰&＃xff0c;丰富界面设计。

由于卡片式设计能够承载各种类型的内容&＃xff0c;需要设计师在设计卡片时要有规范性和创意性&＃xff0c;使用合适的排版、尺寸、圆角以及良好的阴影和渐变效果&＃xff0c;让卡片为用户提供更加舒适的视觉感受。以下是卡片设计需要注意的地方&＃xff1a;

①了解阴影及特点。为了让投影和渐变的元素更加真实&＃xff0c;了解阴影特点在卡片设计中显得尤为重要。如果阴影投在整个卡片的边和角上&＃xff0c;就会丧失卡片载体的物理交互感。

②留白很重要。卡片留白的重要性不言而喻&＃xff0c;先给卡片一些空间恰当地添加内容。如果卡片信息内容过于繁琐&＃xff0c;会使用户产生疲劳感和厌烦感&＃xff0c;而留白的使用可以增加卡片内容的呼吸感&＃xff0c;有效减少使用过程中的压力&＃xff0c;帮助用户找到重点信息。卡片信息越简约&＃xff0c;设计目标和针对性就越明显。

③增加图文排版的对比性。比如通过字体大小、字体粗细来吸引用户的注意力。简单的图文排版其视觉效果是最好的&＃xff0c;加之非衬线字体&＃xff0c;会给卡片一些美感上的润色&＃xff0c;这样的卡片会看上去既有熟悉感又富有创意。诸如阴影之类的元素&＃xff0c;在很大程度上能帮助用户联想到实体卡片。

④在无色系中保证UI清晰。在无色系的条件下设计&＃xff0c;必须考虑其可用性和所包含的内容&＃xff0c;在此基础上有目的添加颜色。为了让卡片信息看起来足够清晰&＃xff0c;可以在卡片背景使用深色蒙层&＃xff0c;把背景做模糊处理&＃xff0c;来突出卡片信息。

⑤卡片圆角的情感性。在同一个APP中&＃xff0c;所有卡片一般会使用相同的圆角大小。圆角越大&＃xff0c;产品越圆润有趣&＃xff0c;更具有亲和力&＃xff0c;但缺乏稳重感; 圆角越小&＃xff0c;则越严谨安全&＃xff0c;当圆角为0时&＃xff0c;不管是从视觉还是感觉上&＃xff0c;都会显得过于锋利尖锐&＃xff0c;产生距离感&＃xff0c;更加具有权威性。在设计中我们需要根据产品自身的特点来选择卡片的圆角&＃xff0c;不能随意滥用不同的圆角大小。

卡片式设计几乎成为当前界面设计的主流模式&＃xff0c;相比传统单一的页面设计&＃xff0c;卡片设计提供更多个性化的用户体验&＃xff0c;使界面设计清晰平衡、富有美感、简约时尚而又具备良好可用性。而卡片作为容器&＃xff0c;能够适应不同屏幕大小而不破坏信息的展示效果。