“Feed流”如何从理论走向落地

在信息爆炸时代，信息变化越来越快，用户有无限的信息获取渠道。如何从多种信息中筛选出高质量、符合胃口的内容，必须提到今天的主角Feed流。Feed流是移动互联网的产物，个性化的内容推荐将在这个内容为王的时代发挥更大的价值。在信息超载的时代，设计师也应该与时俱进「更好的用户体验」是设计师不断追求的。作为中国超活跃的女性交流社区，feed流是信息和社区的核心场景之一，feed流的优化也在不断进行。本文将从了解Feed流、国内Feed流的市场格局、可用性设计原则、设计方案等方面带您全面了解Feeed流。了解Feed流1.什么是Feed流？「Feed」现代信息媒体世界可以理解为「投喂」。在网络时代，用户主动从新闻网站或博客订阅，订阅器帮助用户及时更新信息，然后按时间顺序显示。关于维基百科全书「webfeed」在定义中，我们可以看到Feed是为用户提供内容的数据格式；内容提供商订阅服务，用户主动订阅内容更新；2006年，Facebook在社交行业被重新定义为「NewsFeed」，即突出内容信息，注重内容信息，「沉浸式」用户通过无限下拉刷新获取信息的体验。「流」这是一种呈现形式。在当今的产品应用中，除了用户主动订阅外，大多数都是基于智能算法推荐的。总结:Feed流是一个信息出口，为用户提供个性化定制的内容，只需刷新一个动作就可以与他人或信息建立联系。2.Feed流的作用现代Feed流的核心是个性化推荐，内容和用户是两个主题，通过用户和内容的匹配来实现「信息找人」展示方式。3.Feeed流的基本核心是内容，其次是内容生成的时间、地点、出版商等。在社会领域，有更小的元信息，如拇指、转发和评论。根据不同的场景和业务，它的表达方式也不同。文字流、图片流、视频流是移动互联网中最常见的三种形式。文字Feeed流主要是「标题文字 辅助图片」组成。今日头条、腾讯新闻等常用于新闻信息类应用。优点:信息清晰，内容信息细化为标题传递给用户；显示信息量大，信息相互获取率高；学习成本低；缺点:视觉冲击力弱；内容显示不够全面；需要二次点击进入详情页；常见布局:左右结构、上下结构；图片feed主要流向图片，文字信息辅助显示在图片底部。如绿洲、ins、Facebook、微信、小红书等。优点：视觉冲击强，适应简单，节省开发成本；视觉层次丰富；高质量图片可提高整体产品质量；缺点：占用空间大，显示内容少；信息传输不如文本清晰；图片质量差，常见布局：大图片、宫殿、拼图、瀑布流；视频Feed流主要是短视频，文本信息弱化处理。如抖音、快手等。优点：身临其境的体验良好；最强的感官冲击，满足用户的视觉和听觉感受；缺点：占用空间大，缓存，网络质量要求高；显示内容少，只能播放短视频，需要频繁刷新；常见布局：全屏流；当今碎片化时代的国内Feed流市场模式，人们越来越追求高效、准确的信息获取。社交和获取信息是用户在互联网上的重要需求，信息产品连接人和内容，专注于信息获取；社交产品连接人和人，注重沟通环境。在这种背景下，Feed流的优化一直在进行。本文从美柚App中应用的新闻信息类和社交互动类两种类型分析了国内Feed流的市场格局。1.2016年，新闻客户端在智能手机用户中的渗透率高达66.2%，即3.77亿人。随着移动互联网的快速发展，这一数据仍在扩大。目前，智能推荐算法用于信息产品的排序，这就是信息「同温层效应」，也就是说，在心理学上，人们自然更喜欢接受与自己观点一致的信息。本次通过「易观千帆」筛选「信息流资讯」，对比统计新闻产品Top4的Feeed流样式。今日头条今日头条是一款通过用户行为分析和推荐引擎技术实现更个性化、更精准推送的综合信息app。结构清晰，功能划分清晰。发布更多3图大图和视频样式。使用红色品牌色，基本情况下白底黑字，文字最多显示3行。在微信、QQ等社交平台的帮助下，腾讯新闻腾讯用户活跃度高。强调新闻秒传，快速实时推送重大新闻。整体结构非常清晰，操作简单，隐藏层次少，使用方便。使用腾讯蓝色，没有复杂的配色，界面简洁明了，非常干净。趣味头条以娱乐和生活为主题，为新兴市场用户提供准确的内容，专注于让阅读更有价值。上下图的格式在结构上应用更多，三图和视频样式应发布更多。颜色采用安全稳定的绿色，在新闻信息产品中比较少见。搜狐新闻全媒体信息平台，开放订阅模式，海量独家内容，准确可靠。与其他新闻应用程序不同，搜狐新闻采用左右文本的布局，浏览移动线稍微复杂，发布更多的小图形风格。因此，与其他客户相比，搜狐新闻页面呈现的新闻数量更多。大多数使用动态字号的新闻信息产品都有动态字号的功能。一般来说，默认显示的字体大小为标准（中）字体大小。以今日头条为例，我们可以发现小字体和大字体在标准字体的基础上向上或向下递减2。动态字体调整在同一模型下，可以发现Feed流中只有标题字体随设置字体大小而调整，而详细页面中只有标题和段落的字体随设置字体而调整。在任何情况下，辅助信息和图纸的大小都不会改变。一些插入模块不会随着字体大小的设置而改变。在视觉层面上，视觉层面分析了所选主流应用Feed流中的标题文本、辅助信息、对齐方法和分割线。文字(大小、颜色、字重)、颜色、标签、布局等都可以作为分析因素。标题文本：字体大小介于17至19之间。只有HSB模式中的B（亮度）颜色不同，字体距离和行高的选择没有统一的格式。辅助信息:在HSB颜色模式下，字号在11和12之间，颜色在B>60、多个辅助文本信息以宽度间距分割。对齐:小图87%以上的图文显示采用左文右图的结构，文字信息采用左对齐。分割线：同一信息模块的分割更多地采用两侧之间的距离，插入不同的信息模块，上下分割模块间距。摘要：信息流信息流产品，即标题产品，注重内容，注重信息提取效率，更注重用标题文本信息吸引用户浏览视线。在更小的空间内合理地向用户展示更多的内容，提高用户的视觉体验，同时有效地阅读。2.社交互动互联网的本质是连接，价值也在连接中产生。社交网络是用户在互联网上的另一个重要需求，各种圈产品应运而生。创造基于不同圈子的社会环境。圆圈可以很好地平衡产品的内容和社会属性。本次主要分析宫格式布局产品，如我们最熟悉的产品「微信」朋友圈是经典的宫殿布局。新浪微博新浪微博作为中国领先的社区，Feed流是微博最重要的场景之一，最常见的主页和发现是宫殿布局。与新闻和信息类不同的是，发布者信息和关注按钮将添加到每个内容的顶部。关注的目的不是社交，而是社交的前提。关注关系可以更快地获得内容，这是社会产生的前提。豆瓣主页专注于发现和记录感兴趣的内容。您可以在主页推荐频道自由浏览个性化内容，找到更多有趣的豆类朋友并与之建立联系。主页推荐和动态的主要目的是社交互动，其中2图和3图风格占最大比例。与微博不同的是，出版商背后没有关注按钮，而是与信息类相同的负反馈。总结:泛社会应用产品，社会关系主要以内容为基础，注重内容传播速度和内容披露。Feed的呈现方式发布者与发布内容没有明显的设计区别。底部通常伴随着拇指、评论和分享等操作交互。不同的模块通过间距分割进行区分。可用性设计原则设计不仅是艺术行为，也是商业行为。如今，随着越来越多的数据化，仅仅通过情感判断来定义设计的价值是不够客观的。设计师应该掌握更多的设计原则来赋予设计权力。1.信噪比信噪比是指相关信息与不相关信息的比例。合理的信噪比可以改善与用户的沟通。增加信号可以快速准确地向用户传达有用的信息，减少噪音，使信号脱颖而出，平衡内容的优先级，帮助用户快速找到所需的信息。灵活运用「信噪比」，减轻用户负担，通过设计提高效率。2.易读性文本的易读性在很大程度上决定了用户能否准确高效地阅读。在iOS和Android的一般文本规范中，最小阅读文本为12号。行间距也是影响文本易读性的重要因素。行间距过大会增加视线跨度，阅读负担过小，容易重复阅读。一般1.2～两倍行间距更适合人眼阅读。3.图版率图版率是指页面中图片面积的比例。当图片布局率为0%时，布局非常枯燥，读者会对阅读失去兴趣。当图片布局率为40%时，布局充满活力和活力，读者的阅读兴趣就会上升。当图版率为100%时，会给读者带来强烈的视觉感受。除了图片本身，我们还可以通过填充底色、叠底图形和重复图片来提高界面中的图片版本率。4.格式塔原则-相邻物体之间的相对距离会影响我们对它们关系的感知。距离较近的对象比距离较远的对象更相关。当不同元素的物理距离接近时，自热被视为一个组，而不是一个单一元素。当距离较远时，它们是不同的组。通过对基础知识的理解和主流应用Feed流程的比较，设计方案结合自身产品特点，以设计体验目标为导向，梳理现状，提出相应的优化目标，进而制定优化方案。目前，信息和社区在线存在以下问题：Feed流字号不统一；图片间距不统一，图片圆角不统一；标签位置没有统一的逻辑；为了解决现有问题，我们重新优化了Feed流的设计语言。本次优化将基于对Feed流的理解和主流产品的分析，从有序统一、空间利用率、视觉体验三个要点进行。通过「信噪比」我们知道，平衡信号与噪声的比例可以有效地保证核心信息的清晰度。削弱其它装饰元素，让用户关注内容本身。格式塔中的相邻原则也告诉我们，控制不同元素之间的间距可以更好地把握亲密关系。为了更好地观察Feed流中不同文字大小的影响，我们可以将各种方案与标题大小、行高、字距等不同变量进行比较。影响Feed流最终数据的潜在因素是字体大小、字距、字体重量和配图比例。我们可以单独验证不同的元素。注意文字跳动率，即最大字号与最小字号的比例。除黄金分割比1.618外，还可应用于根号2的比例，即1.141。尽量用黄金比例来显示图片的比例，比如4:3、3:2、1:1、16:9。图文样式可作为基本样式，在确定图文样式后，对新设计方案的所有输出进行梳理。结论：在当今互联网内容时代，用户对快速获取有效内容的需求越来越强烈。如何有效准确地获取他们感兴趣的内容已成为一种日益突出的需求。Feed流结构简单，减轻了用户的认知负担，每一种与社会信息相关的产品都必然会进行科学有效的优化迭代。在本文的最后一篇文章中，我们分享了葡萄柚feed流redesign的整个过程。在优化过程中，我们也发现了很多自己的缺点，还有很多内容需要改进。我们也相信，每一个变化都是前进的步伐。每一个设计提案都要基于理论知识和对市场格局的理解，设计不是最终目标，提升用户体验才是我们的追求。我希望这篇文章能对你有所帮助。如果您有任何意见和建议，请在评论区留言讨论。更多Feed流设计方法：