UI设计中的Feed流设计指南

　　拿起你的手机，看看微博，知乎，今日头条，微信朋友圈....... 谋杀我们多少时间?它们为什么有这样的魔力?让我们来一探究竟吧。

　　从结构来看，这些社交和资讯类app中，都使用了feed流。feed流是一个信息出口，想要与他人或资讯建立连接，只需要刷新这一个动作，即可获得大量所需，并且不断在更新，可谓杀时间好手，令人沉溺。想要设计好feed流页面，对feed流的概念，模式进行了解是十分必要的。

　　1、Feed流的定义

　　什么是Feed流呢?我们可以拆分成2个词来理解：

　　Feed：Feed英文翻译是喂养的意思，用在这里可以理解为：用户需要什么，我们就给用户提供什么。从技术层面讲就是产品通过数据算法为不同用户推荐他们感兴趣的内容，吸引用户无限下拉。

　　流：信息有规律排版的一种呈现形式。

　　简单点来讲，Feed流就是将用户感兴趣的内容通过信息流的形式呈现给用户。

　　2.Feed流常见样式

　　feed流主要有3中常见形式：文字流、图片流、视频流。

　　2.1文字性的feed流

　　组成：标题文字+辅助图片

　　优点：一屏之内展现的信息数量多，信息获取率高。通过对标题信息的提炼快速告诉用户当前模块的核心内容。

　　缺点：视觉冲击力较弱，仅有标题信息，内容展示不全面。

　　常见布局方式：左右布局、上下布局

　　多用于新闻资讯类产品中，如下图所示：

　　2.2图片性feed流

　　组成：图片+辅助文字

　　优点：视觉冲击力强，更容易吸引用户注意力。图片比文字具有更强的感染力，可以在短时间内引发用户的情感共鸣，相对与文字，图片的浏览速度更快，印象更深刻。

　　缺点：图片占用空间大，展示内容少;信息传达不如文字明确，对图片质量要求高。

　　常见布局方式：大图布局、宫格布局、拼图布局、瀑布流布局

　　2.2.1大图布局

　　大图布局也就是不管用户上传几张图片，Feed流中始终以一张大图形式展现。

　　适配方式：一般有两种，一种是展示图片固定比例;另一种是随图片而变化。

　　(1)展示图片尺寸固定

　　不管用户上传的是横图还是竖图，展示图片的比例始终固定，常用的比例有1:1、3:2、4:3、16:9等。采用该适配方式图片占用空间小，可提高用户的阅读效率，适合想要提高用户阅读效率的产品。

　　(2)随图片而变化

　　当用户上传不同比例的图片时，UI设计中的Feed流设计指南https://www.aaa-cg.com.cn/ui/2575.html?gpf图片展示宽度为屏幕宽度，展示高度根据确定的宽度等比例缩放。采用该适配方式能将图片信息表达完善，图片占用空间大。适合图片质量高，用户以浏览图片为主的产品。

　　需要注意的是，采用该方式需要设置最大最小阈值，当图片的高度超过一定数值，高度就不再增加，当图片的高度小于一定数值，高度不再减小。

　　2.2.2宫格布局

　　宫格式布局就是用户上传的图片会适配到一个个的方格中，宫格布局常见的排版有3宫格、6宫格、9宫格。

　　适用场景：多用在社交类的APP中或者电商APP的内容社区。如：微博、微信、QQ空间等社交APP;淘宝等电商应用的内容社区。

　　2.2.3拼图布局

　　这种布局方式是将几张图片拼成一个矩形，样式新颖类似杂志的排版，对图片质量要求较高。

　　适用场景：多应用在图片社交中，如in。

　　2.2.4瀑布流式布局

　　视觉表现为参差不齐的多栏布局，瀑布流式布局下，用户的视线轨迹以 Z型为主，这样的轨迹易于阅读。但由于用户采用“就近原则” 阅读信息，容易产生漏读现象。

　　适用场景：社区类浏览型页面中，这样的页面往往信息量大，采用瀑布流式布局浏览体验更为流畅。

　　2.3视频性feed流

　　组成：短视频为主(长视频占用用户时间长容易导致用户缺乏耐心)+辅助文字

　　优点：满足用户的在视觉和听觉上的感受，沉浸式体验好，更加容易吸引用户的注意力。一般情况下会主动且循环播放，画面占满全屏。例如快手、抖音、微视等。

　　缺点：占用空间大，展示内容少;需要缓存，对网络质量要求高。

　　3.总结

　　feed流主要有3中常见形式：文字流、图片流、视频流。

　　其中图片流主要有：大图布局(适配方式：图片固定比例、尺寸随图片而变化) 、宫格布局(三宫格、六宫格、九宫格)、拼图布局、瀑布流式布局。

UI设计中的Feed流设计指南相关推荐

UI设计中的作品集避坑指南
在作品集和简历的制作过程中,有很多注意事项值得关注,而这些能够让你的作品集和简历,更上一层楼.今天我总结出来的是设计师简历和作品集中常见的 10 个死穴.在此之前,我因为这些问题而拒绝过很多设计师的申 ...
UI设计中面性图标设计总结
图标在UI设计中占了一席之地,不同风格的图标会影响页面整体风格效果.主流的图标可分为线性.面性.线面结合3大类,之前跟大家分享过线性图标今天我就来跟大家聊聊面性图标设计总结. 1.图标的作用事物的价 ...
UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
如何实现UI设计中的情感化设计？
所谓的UI设计中的情感化设计,是UI设计师基于满足了产品的功能性和操作性之后,在了解产品逻辑.全面分析产品的前提下.设计出来既不影响产品功能,又满足了用户更高层次的需求和期望的一种设计.下面苏州学码思 ...
什么是UI设计中的情感化设计？
相信很多小伙伴们都知道UI设计.UE交互设计.UX设计,但是你们知道情感化设计吗?不知道也没关系,今天胡老师就和大家讲解一下什么是UI设计中的情感化设计? 情感设计是指如何创建能够唤起情感并带来积极的 ...
UI设计中顶部栏的设计要点
移动端顶部栏设计看似简单,其实在做界面时还是有许多细节值得我们注意的.今天我就针对UI设计中顶部栏的设计要点进行简单的说明,希望能更好地帮助大家理解这个组件. 一.移动端顶部栏样式及设计要点这里将移 ...
android recycleview长按多选_UI设计中Android和IOS设计差异总结
由于设计师.产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照iOS的规范进行设计,两端只做一套. 只做一套的会存在两个问题: 1.安卓用户的使用习 ...
中嵌套的页面如何操作父页面_UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
用户体验设计中的场景服务设计
用户体验设计中的场景服务设计,来自极客时间的课程归纳: 客户旅程:用户从接触产品的第一刻到完结的整个场景服务的完整旅程. 前台服务:前台员工的服务流程设计与技术工具的流程设计. 后台支撑:后台产品供应 ...

UI设计中的Feed流设计指南

UI设计中的Feed流设计指南相关推荐

最新文章

热门文章