卡片标签快速设计排版，抓住用户核心需求

出现频次最高且最常见的的卡片，在界面中处于核心的位置。

伴随卡片形态, Banner配置愈发灵活, 优酷的Banner能够展现卡片性质, 标注为广告或许意在强调首页Banner广告位性质, 以此增加广告收入；网易严选头部区域颜色能依据Banner主色切换；盒马首页Banner可下拉, 用于放置部分用户常用功能。

2）信息浏览

图文形式的内容, 视频形式的内容, 均能够借助卡片予以承载, 再配合 Feed 流这种呈现方式, 或者瀑布流这种呈现方式, 用户能够迅速浏览关键信息, 获取核心价值, 进而选择是否要进入详情进行精读。

对于配置而言, 模块化的这种构成具备友好性, 能够穿插着加入一些活动海报, 或者是活动合集, 以此丰富阅读的内容。

2. 操作型卡片

工具类应用里时常出现操作型卡片, 卡片因功能所需带有颇为复杂的操作。

1）任务管理/工作流

在协作型工具之中, 任务管理面板经常采用的是卡片式设计, 每一张卡片具备丰富功能操作, 能够依据任务实施情形, 对位置进行拖拽运用变动, 对内容予以编辑调整, 对附件加以上传添加, 对人员或者项目进行关联连接等等。

2）数据面板/仪表盘

正常情况下, 仪表盘会借助卡片呈现数据, 并且附带一定的操控, 鉴于数据产品内容与业务关联颇为紧密, 需要按照不同权限、角色来展示相关数据, 而灵活能够进行配置的卡片乃是较为不错的选择。

3. 弹窗型卡片

存在一种特殊卡片形式叫弹窗, 它大多以悬浮状态于页面现身, 模态弹窗主要为和用户交互产生微交互, 非模态弹窗主要用于给用户通知消息, 这类卡片的所有应用它基本涵盖, 所以将它归类以弹窗型卡片来描述。

1）模态弹窗

有这样一种弹窗, 它是模态弹窗, 会打断用户操作行为, 需要用户进行交互, 主要包括:

2）非模态弹窗

不会对用户操作造成影响, 主要是将信息进行展示的那种, 属于非模态弹窗, 一般出现几秒以后就会自行消失。

03 卡片式设计的优点

线上的每一个应用程序, 还有设计师精心打造的作品当中, 都能够瞧见数量众多的卡片式设计, 我们会从设计层面、操作层面以及效率层面总共三个方面, 用以剖析它所具备的优势。

1. 设计优势

1）独立且聚焦的容器感

卡片式设计风格, 于视觉而言, 造就了一种天然的容器形态, 此形态对内容实施了模块化分隔, 这般天然的断层, 有益于塑造独立的视觉焦点, 方便用户聚焦核心信息；每一张卡片身为容器, 能够容纳多种形态的内容, 诸如图片、文字、视频、操作、标签等, 把它当作独立个体或者组件来予以管理。

2）视觉美感

卡片自身, 和卡片相互之间存在恰当一些的空间, 合适且恰到好处的留白将会产生一种令人感受舒适、清爽干净的感觉, 这样的情形是非常易于去打造那种极简主义风格的。

在对 Dribbble、Behance 等平台予以观察之后, 能够看到数量众多的卡片式设计作品, 其一大显著特点便是拥有较多的、完整的留白空间；另外, 还有一种能够提高整体视觉美感的方式乃是采用高质量的图片，这些图片能够赋予卡片视觉风格, 进而容易产生较好的视觉效果。

3）丰富的可塑性

自身卡片的边距留白, 再加上卡片之间所留的空白, 会产生出具备充足的空间, 设计师能够充分施展创造力, 能够对卡片开展异形设计, 将规矩的矩形予以破开；能够采用投影、渐变、轻拟物等办法丰富卡片的质感；能够经由打造 z 轴的纵深感来增添界面的层次感, 运用三维效果丰富界面视觉。

2. 操作优势

1）多态操作

卡片现实隐喻性有一优势, 是有很强可操作性, 卡片概念在现实生活能随意移动, 所以在界面设计里, 我们能采用翻转、滑动、展开等多种交互方式, 还能结合动效引导用户操作。

2）低学习成本

卡片源自真实生活, 因真实世界里用户的使用习惯, 会映照到数字界面当中, 进而减轻用户的认知负荷, 还能降低学习成本。

3）明显的状态区分

根据设计优势里阐述的聚焦优势, 我们能够明白, 卡片式设计能够促使重点模块更显著突出, 用户能够迅速识别界面里可操作的部分, 或者是我们期望用户实施操作的部分；借着空间感的营造打造, 在感官方面可以区分多种状态或者界面元素的优先级。

3. 效率优势

1）模块化应用

卡片式设计, 鉴于其天然的容器形态的缘故, 所以格外适宜模块化地予以管理, App Store、闲鱼、健康、淘宝等APP, 皆在运用卡片式设计去承载内容, 诸如轮播广告、功能入口、推荐位、列表、文章等, 对于内容形式丰富的应用而言, 灵活可配置的模块尤为关键。

2）适配多种尺寸的屏幕，响应网页端和移动端

设计以及前端研发所关注的要点里, 多端适配始终占据着重要位置, 在着手进行设计期间, 兼容性方面的诸多问题, 绝对是必须要纳入考量范围之内的。不管是响应式布局这种模式, 亦或是自适应布局这种方式, 卡片式设计都能够为适配发挥出自身的作用, 它那具备灵活可控特性的容器结构, 能够依据宽度对布局结构灵活加以调整。

除此之外, 鉴于卡片式设计易于维持一致性, 所以我们针对不同尺寸屏幕展开设计之际, 或是进行元素拓展之时, 成本将会大幅降低。

在Figma推出Auto Layout 3.0之际, 跟研发同学探讨了响应式与自适应的问题, 研发同学推荐了bootstrap官网, 其响应式布局做得较为出色, 运用了卡片式设计来承载内容, 无论何种宽度都能给出恰当的布局, 实现完美适配。

04 卡片式设计的缺点

不存在那种绝对能适用于全部情形的设计方案, 流程逻辑、交互方式以及风格探索等这些用户体验要素, 始终处于持续不断的迭代优化进程里, 卡片式设计纵然具备诸多优点, 我们依旧得结合实际状况, 考量是否合适那般运用。

要想合理地去判断什么样的情形不适宜采用卡片式设计, 那我们就得去了解一下它所存在的缺点。

1. 有效展示的信息数量受影响

如上文所讲, 卡片式那种设计的视觉美感, 有一部分是源自四周留出的空白领域之处, 与此同时呢，这一优势也会引发造成浪费空间方面的问题；处于同样大小尺寸的屏幕当中, 列表式进行展示之际的有效信息数量必定是要比卡片式的更多好些, 对此用户浏览时的效率也就会更高一些。

对于新闻资讯类的APP或者网站而言, 关键在于阅读效率, 用户能够迅速浏览标题进而了解关键信息, 图片以及视频充当辅助信息, 并且一屏的空间最好能够展示数量足够多的条目, 所以此类APP一般采用列表式设计。

与之类似, 消息列表类型的界面, 同样不适用于卡片模样的设计, 就好比钉钉、微信、QQ 这种 APP, 我们得迅速浏览进而查找消息。

2. 易打断连续性浏览

卡片的那种容器形态, 会形成一种天然的阻隔, 这种阻隔, 虽说对构建那种独立聚焦的视觉效果是有利的, 然而在浏览信息的时候, 却容易产生类似阻断一样的效果, 进而就降低了阅读时候的连续性。

05 卡片式设计的实用技巧 1. 形状

1）圆角

圆形的角处在整个卡片四个边角的地方, 它形状的变化会对整体卡片的风格产生影响, 圆角变小, 卡片看上去越发硬朗, 圆角变大, 卡片看上去越发柔和, 针对此我们得凭借业务场景以及品牌调性来确定圆角的大小。

2）轮廓

多种形状我们可以尝试, 除矩形之外；卡片能承载的信息类型很多所以, 可以据此设计卡片形状按功能特性、营销氛围、产品特色、IP形象等元素；也能借用现实物品隐喻设计卡片, 比如优惠券/代金券常设计成券的形状, 银行卡通常模拟真实世界卡片设计。

2. 颜色

1）卡片本身

因业务需求之故, 一般而言也会针对卡片自身开展视觉设计, 以此来使页面的元素得以丰富；最为常见的情形乃是营销大促, 此时我们会给卡片整体增添配色, 进而对整体的氛围予以点缀。

2）背景色

对设计而言, 使用卡片还有一个好处是, 能够在背景方面做文章, 比如配置颜色, 添加营造氛围的颜色, 添加动态元素等；当然, 背景的美化得与卡片本身相结合, 设计师凭借自身想象力能创制出诸多令人惊艳的视觉效果。

3）字体

文字, 乃是卡片信息传递之中的关键元素, 字号以及字重的比例, 还有排版, 会对用户的阅读造成影响, 用户们倾向于首先去阅读字号大、字重明显、颜色较突出的, 而后再去阅读较小的。

让文字的比例、颜色以及排版做出调整, 这对于提升用户获取信息的效率是有利的, 可这些调整同样会对卡片的视觉效果产生影响, 字号字重的调整得依据系统字体来进行, 因为字体特性不一样, 所以字号粗细对其造成的影响也会不一样。

3. 质感与风格

1）投影

起先, 是Material Design引入了z轴的深度概念, 借由使用投影这般表现手法, 冲破二维空间的限制, 架构塑造出视觉方面的纵深感，投影之深浅大小、分部状况以及颜色, 均会对全然的卡片质感构成影响, 拥有优质的投影层次颇具繁多丰富性, 此等情况需要交由设计师予以细致入微的调整。

2）渐变

逐渐变化能够使卡片的细节得以丰富起来, 借由颜色的逐步过渡去增添层次感, 然而渐变色在进行配色时必要留意搭配情况, 平常的时候能够多去收集一些出色的渐变配色方案当作参考。

3）样式

氛围元素能够在卡片这物体亦或是任意背景里面进行配置, 简单的形状, 精致的插画, 立体的3D效果, 动态的漂浮物, 品牌相关的元素等等之类, 这些都能够增添画面的质感；甚至还能够借助样式去打造效果, 以此增加卡片的质感, 就好比最近比较火的玻璃拟态这种情况。

4. 布局结构

1）分析框架结构，合理排布信息

卡片整体能被视作信息承载的容器, 怎样恰当地安排内部元素的布局是极为关键的, 我们不但得考量单个卡片里的信息排列有无合理性, 还得对整体页面之中所有卡片的结构予以调整, 判定整体架构是不是适宜。

2）间距

卡片自身, 与卡片相互之间存有的间距有着留白方面的效应, 去对间距比例予以调整能够塑造出页面那种疏密透气的感觉。恰当的间距有益于信息层级的排列布置, 致使用户产生舒适之感。

带有较多留白的较宽间距, 会使整体空间感呈现出舒展的状态, 然而这样做也势必会造成较多空间的浪费, 这种宽间距是适宜于内容较少的卡片的。当内容较多之时, 就会尽可能地去压缩间距, 进而露出更多的信息, 以此便利用户进行浏览。

3）操作

最后卡片旨在方便用户进行操作, 最为常见的是充当信息入口, 借由点击来转向详情页面。另外还有一些, 是于卡片之上增添按钮以增添些许简单操作, 诸如点赞、收藏、删除等等（普通按钮、文本按钮、图标按钮）。

不把范围限定于卡片自身, 可对其空间予以扩展, 一种极为常见的方式是通过点击来展开卡片, 可不进行跳转就能直接浏览详情；对于详情内容本身数量不多的页面来讲, 这样的交互方式更为轻便。

06 结语

有着卡片样式的设计, 表面上瞧着好像是个微不足道的设计风格难题, 然而其间却涵盖了数目众多的理论根基以及实践根基, 历经了好多回历史的进展以及设计师的思索。

设计师需要培养体系化思维，透过现象，分析本质。

继续浏览有关 卡片式设计用户界面设计 的文章