您的位置: 首页 > 网站建设 > APP必备的设计元素!卡片

APP必备的设计元素!卡片

2020-07-07 16:48:56        栏目: 网站建设

 

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

 

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

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

 

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

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

 

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

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

 

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

 

2af78447j00qd2og60013c000hs00n2m.jpgb3f95687j00qd2og60012c000hs00lsm.jpg 

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

 

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

 

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

 

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

 

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

 

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

 

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


img