卡片作为信息的承载体，在界面设计应用得非常广泛。弄清不同卡片的设计细节点，能让我们做设计化繁为简，设得心应手。在设计的过程中，我们要有拆分思维，将复杂的模块、组件，拆分为细小的基础元素，逐一攻破。
图片流、卡片流、feed流，“流”是按照某种时间线，去呈现我们的内容。
一、图片流
花瓣、Pinterest的首页展现方式就是用的卡片流去承载图片、用户头像、用户名等信息的。
1.图片流功能作用
a.帮助用户快速浏览图片与筛选图片
b.使用户减少干扰，沉浸式阅读
花瓣图片流
2.图片流细节构成
从纵深角度，把图片流拆分为背景层、内容层、控件层。
图片流页面拆解
我们最需要关注的是内容层的设计。内容层又拆分为：图片内容区域、信息内容区域这两部分。
内容层－图片卡片拆解
3.内容层设计注意点
a、图片卡片设计要点
1.图片区域高度不固定。
2.信息区域主要样式高度固定。这里在设计时需要重点规定上下间距。（字数不一样多，会导致信息区域高度不一样，但是从样式上来讲，是固定的，因为这一部分是可复用的）
b、用户头像
1.用户头像设计应注意左右平衡。保持头像高度与左边文案高度一致，可以保证左右平衡。
保持左右平衡
2.头像素材要选取背景简单、统一的视觉中心、统一的明暗度的图片，而且选取的图片一定要符合我们产品的气质。我们在做设计稿的时候，一定要选取统一的图片，比如图片的视角、明暗度等。这样才能保证我们页面的统一性，确保设计稿的效果。千万不要觉得线上环境头像很乱、图片很丑为由，就不去选取一些优质的图片，从而降低我们的专业度。
图片选取要花功夫
c、图片流板块设计要点
1.保持对应要素间距统一。这样也利于开发。（数值根据自己产品规范去定义，只要保持相同要素间距统一就行）
图片流板块设计要点（2x）
2.注意信息层级划分。利用字体颜色、大小、字重去区分。在这里需要我们去考虑哪些是用户关注的信息。
3.注意圆角大小。圆角设置一般在6-10px为宜。
4.图片流要点总结
图片流要点总结
二、卡片流
卡片流样式在支付宝、美团app中是很常见的。卡片流的组成部分有点像图片流的内容区域板块。卡片流的设计样式是比较固定的。
1.卡片流作用
a.卡片流是让用户了解更多信息的入口
b.卡片流的信息呈现能让用户快速抓取重要信息，节省用户时间
卡片流样式
2.卡片流拆分
将卡片流按照“UI星辰大海”拆解为以下几部分，分别从每一部分去突破。
卡片要素
2.卡片流设计要点
a.基础布局。基础布局也就是简单的背景色、分割线，就不多讲解了。注意背景色不要太脏、太暗就行。
b.文字
文字设计时，也需根据自己产品设计规范去灵活应用，从字颜色、大小、字重上去区分文字层级。主副文案大小差别至少4像素。
文字规范（1x）
c.内容层级－卡片组件
卡片流设计主要发力设计的区域为卡片组件。卡片组件拆分为表头、表内容、表尾三部分。表内容部分可以有不同的内容呈现形式。
卡片拆分
表头部分
▲图标高于文字高度。间距符合二分原则（左边距是右边距的两倍）。
▲表头部分的图标一定要简洁、具有呼吸感。内图标与圆底比例接近1:2。
表头设计要点
表内容部分
▲根据产品的卡片作用，去对此部分内容进行设计。一定要控制好间距，保持此部分的呼吸感。
表尾部分
▲表尾部分一般会放置文字按钮、或简单的按钮。对于文字按钮需根据重要程度从自重、颜色、大小上去突出。对于简单的按钮上下边距与左右边距需符合二分原则（接近二分原则，没有那么死板）
三、feed流
feed流是投喂用户想要的内容。常用在很多资讯app中,如今日头条、酷安等app。
1.feed流作用
a.帮助用户持续地获取最新的订阅内容
b.使用户减少干扰，沉浸式阅读。
feed流
2.feed流细节拆分
feed流拆分
a.配图
▲配图的选取应遵循背景感觉、烘托主题、色彩关联这三个原则。从美团外卖、饿了么这些产品可知，首页选取的图片一定是严格把控的，符合产品的气质、而且有想买的欲望。
配图要点
▲图片尺寸
不同的产品、不同场景出现的图片比例是不一致的。在feed流中长出现的图片比例为3:2（这里只简单的给出数值、后续会详细讲解图片尺寸）
c、列表流
对于列表流，最重要的是把控间距。建议建立最基本的间距，比如为8px，然后根据亲密性来依次增加偶数像素，来拉开层级关系。
简书列表流亲密关系
d、分段控件
设计时，选中文案比未选中文案一般大2px；颜色一般选取品牌色。小横条通常设计为3px（1x下）
分段控件
e、辅助按钮
▲注意左右平衡。设计时图标与文案一样高。
图标与文案一样高
卡片流、图片流、feed流在界面设计中用的越来越广泛。掌握好其中的设计要点、会对我们的设计效率、设计效果有很大的帮助。以上内容，只是自己平时学习的总结与积累，希望对你有所帮助，但是切记死板套用哦～
网友评论