欢迎光临企业网站推广全程服务

企业网站推广

10年网站推广经验,之前与我们合作的企业代理商已经推广网站推广开始赚钱了,超越同行不是梦

UI设计-卡片流、图片流、Feed流拆解

作者:jcmp      发布时间:2021-03-11      浏览量:0
卡片作为信息的承载体,在界面设计应用得非

卡片作为信息的承载体,在界面设计应用得非常广泛。弄清不同卡片的设计细节点,能让我们做设计化繁为简,设得心应手。在设计的过程中,我们要有拆分思维,将复杂的模块、组件,拆分为细小的基础元素,逐一攻破。

图片流、卡片流、feed流,“流”是按照某种时间线,去呈现我们的内容。

一、图片流

花瓣、Pinterest的首页展现方式就是用的卡片流去承载图片、用户头像、用户名等信息的。

1.图片流功能作用

a.帮助用户快速浏览图片与筛选图片

b.使用户减少干扰,沉浸式阅读

2.图片流细节构成

从纵深角度,把图片流拆分为背景层、内容层、控件层。

3.内容层设计注意点

a、图片卡片设计要点

1.图片区域高度不固定。

2.信息区域主要样式高度固定。这里在设计时需要重点规定上下间距。(字数不一样多,会导致信息区域高度不一样,但是从样式上来讲,是固定的,因为这一部分是可复用的)。

b、用户头像

1.用户头像设计应注意左右平衡。 保持头像高度与左边文案高度一致,可以保证左右平衡。

2.头像素材要选取背景简单、统一的视觉中心、统一的明暗度的图片,而且选取的图片一定要符合我们产品的气质。 我们在做设计稿的时候,一定要选取统一的图片,比如图片的视角、明暗度等。这样才能保证我们页面的统一性,确保设计稿的效果。 千万不要觉得线上环境头像很乱、图片很丑为由,就不去选取一些优质的图片,从而降低我们的专业度。

c、图片流板块设计要点

1.保持对应要素间距统一 。这样也利于开发。 (数值根据自己产品规范去定义,只要保持相同要素间距统一就行)。

3.注意圆角大小。 圆角设置一般在6-10px 为宜。

4.图片流要点总结

二、卡片流

卡片流样式在支付宝、美团app中是很常见的。卡片流的组成部分有点像图片流的内容区域板块。卡片流的设计样式是比较固定的。

1.卡片流作用

a.卡片流是让用户了解更多信息的入口

b.卡片流的信息呈现能让用户快速抓取重要信息,节省用户时间

2.卡片流拆分

将卡片流按照“UI星辰大海”拆解为以下几部分,分别从每一部分去突破。

2.卡片流设计要点

a.基础布局。基础布局也就是简单的背景色、分割线,就不多讲解了。注意背景色不要太脏、太暗就行。

b.文字

文字设计时,也需根据自己产品设计规范去灵活应用,从字 颜色、大小、字重 上去区分文字层级。主副文案大小差别至少4像素。

c.内容层级-卡片组件

卡片流设计主要发力设计的区域为卡片组件。卡片组件拆分为表头、表内容、表尾三部分。表内容部分可以有不同的内容呈现形式。

表头部分

▲图标高于文字高度。间距符合二分原则 (左边距是右边距的两倍)。

▲表头部分的图标一定要简洁、具有呼吸感。 内图标与圆底比例接近1:2。

表内容部分

▲根据产品的卡片作用,去对此部分内容进行设计。 一定要控制好间距,保持此部分的呼吸感。

表尾部分

▲表尾部分一般会放置文字按钮、或简单的按钮。对于文字按钮需根据重要程度从自重、颜色、大小上去突出。对于简单的按钮上下边距与左右边距需符合 二分原则 (接近二分原则,没有那么死板)。

三、feed流

feed流是投喂用户想要的内容。常用在很多资讯app中,如今日头条、酷安等app。

1.feed流作用

a.帮助用户持续地获取最新的订阅内容

b. 使用户减少干扰,沉浸式阅读。

2.feed流细节拆分

a.配图

▲配图的选取应遵循背景感觉、烘托主题、色彩关联这三个原则。 从美团外卖、饿了么这些产品可知,首页选取的图片一定是严格把控的,符合产品的气质、而且有想买的欲望。

▲图片尺寸

不同的产品、不同场景出现的图片比例是不一致的。 在feed流中长出现的图片比例为3:2 (这里只简单的给出数值、后续会详细讲解图片尺寸)。

c、列表流

对于列表流,最重要的是把控间距。 建议建立最基本的间距,比如为8px,然后根据亲密性来依次增加偶数像素,来拉开层级关系。

d、分段控件

设计时,选中文案比未选中文案一般大2px;颜色一般选取品牌色。小横条通常设计为3px(1x下)。

e、辅助按钮

▲注意左右平衡。设计时图标与文案一样高。

卡片流、图片流、feed流在界面设计中用的越来越广泛。掌握好其中的设计要点、会对我们的设计效率、设计效果有很大的帮助。以上内容,只是自己平时学习的总结与积累,希望对你有所帮助,但是切记死板套用哦~