较近，当我播放应用程序时，我发现它是社区、即时消息、电子商务、旅行还是某个工具应用，可以形成一个用户社区，将有一个动态界面来显示用户的内容，该页面的设计风格基本上是一样的。通过对大量应用和在线数据查询的总结和分析，总结出从动态页面到设计的五个要点。这五点是：1.什么是动态页2.动态页的作用3.动态页的入口4.动态卡片的基本组成5.动态页的分割方式01. 什么是动态页在设计之初，我们需要理解动态页面的真正含义。本文介绍的动态页面主要是指用户在app中发布的、按时间和热量排序的、承载不同类型内容的feed流。例如，空间是我们很早就开始接触的动态页面。02. 动态页的作用动态页面的作用主要是两点。一是建立关系，增加用户对粘度的使用；二是可以携带不同类型的内容。1.建立关系以提高用户的粘性之前我提到很多具有不同属性的应用都有动态页面。主要原因是动态页面具有可以帮助用户建立社交关系的社交属性。社区类产品动态页面作为应用程序的核心，可以通过动态发布在用户之间形成共鸣或话题讨论。即时通讯产品典型的，威查和，威查的朋友圈和空间动态，内容主要由熟人发布，用户可以通过动态内容了解自己的现状。电商类产品电子商务产品的社区动态主要是分享好的东西。与商品详细介绍页面相比，在动态页面上引入或使用商品可以使用户与出版商进行讨论，增强互动性，促进商品的购买。工具类产品基于工具的产品通常针对垂直用户群进行社区动态，动态内容围绕产品功能本身的特征，从而增加用户使用该工具的频率。例如，keep基于健身和减肥内容，而网易云音乐主要基于音乐内容。2。可以携带各种类型的内容动态页面本身是指用户发布的动态内容。除了像本文中介绍的空间这样的卡片列表形式外，它还可以包括图片提要流和视频提要流。单独介绍的原因是它可以携带各种类型的内容，包括纯文字、图片、视频、音频、链接、投票等。..03. 动态页的入口动态页面有三个常见的入口：底部选项卡导航、顶部选项卡导航和列表导航。1.底部tab导航底部选项卡导航使用动态页面作为级功能页面，这在社区产品（通常是主页）或添加社区功能的电子商务产品和工具中很常见。门户网站快速且易于查找。2.顶部tab导航顶部选项卡导航通常用作底部选项卡的扩展。它可以垂直划分动态页面，这样用户就可以筛选出他们想要查看的动态页面。比如，闲鱼池下分为：我加入、推荐、宠物、穿戴、化妆品、二元等。网易云音乐安卓版的顶部标签导航是列外，顶部标签导航层，第二个导航层，如下图所示：3.列表导航列表导航主要使用和，入口比较深，需要两次操作才能进入。我的理解是，两者的动态发现页面都具有许多功能，因此使用列表导航更具有可扩展性。04.动态页面信息单元的基本组成动态页面本身就是一种提要流。它由一个信息单元组成，该信息单元根据发布时间序列连续地推送到用户手中。这个信息单元包含三个基本组成部分：个人信息区、内容区和态度表达区。1.个人信息区个人信息领域主要包括用户的头像和昵称。头像大小一般为8088px，昵称大小一般约为30px。第二，会有一些辅助内容，如发布时间、风扇数量、焦点按钮、更多图标等。不同的产品辅助内容会有所不同。2.内容区内容区域是基本组成中的核心区域，可以承载文本、图形文本、视频、音频、链接等各种内容。因此，在设计中应考虑各种类型内容的布局。文字文字一般位于内容的顶部，主要注意保留行数：微博中较大行数为7行，较右边是4行，网易云没有行限制，但较多140行字符。图片图片主要由两种布局组成：调色板和拼贴。应注意多幅图像的自适应。kite kk的“在feed stream中容易被忽略的图像自适应知识”视频的详细视图应该考虑水平屏幕和垂直屏幕之间的差异。水平屏幕布局较为常见，宽度=屏幕宽度-2×边距，宽度比为16：9，高度可根据这个比例计算垂直屏幕调整有点麻烦，有两种简单的方法可以实现它。种类型是垂直屏幕宽度=宫殿网格的两列宽度，高度根据纵横比16：9计算；第二个是垂直屏幕宽度=内容区域宽度的一半，高度根据宽高比16：9计算音频链接和其他内容通常放在文本、图片或视频下面。其次，要考虑内容与原创内容的区别。通常，在内容中添加浅灰色背景。3.态度表达区态度表达区一般包括喜欢分享（）评论三个功能图标，一些产品会公开一些评论，较右边和百度贴吧和神评显示。只有显示功能图标在视觉上更加统一，屏幕比例也较小，但交互并不直观。虽然曝光的评论区域更具互动性，但屏幕比例更大，视觉不均匀。05 . 动态页面分割动态页面由许多不同的信息单元组成，这些信息单元在信息单元之间分开以确保每个信息单元的可读性。1.背景分割背景分割是分割动态页面较常用的方法。大多数产品的动态页面都是基于背景分割的。这种分割方法具有很强的分割感，有利于提高各信息单元的可读性。2.分割线分割动态页面以分界线分隔，整体页面浏览流畅，不易中断，但信息单元不像背景分割那样容易分辨。因此，为了满足每个信息单元的可读性，一些应用程序使用用户的头像作为锚来帮助区分信息单元。3.卡片分割动态页面使用的卡片分割主要是卡片样式，主要是一些电子商务产品，我的理解是为了保持整体风格的一致性，实心动态页面也采用卡片分割。然而，卡片分割也很强，可以很好地区分信息单元，但屏幕利用率不如背景栏分割好。4.留白分割在动态页面中使用空白区域非常罕见。目前，我只找到了虾音乐，脱水和灵魂所使用的分割方法。三者的共性是产品的整体布局相对简单，产品功能相对简单，白色分区的坚固使用更符合产品的整体色调。06. 划重点1。本文介绍的动态页面主要是指用户在app中发布的、按时间和热量排序的、承载不同类型内容的feed流。2.动态页面的作用包括帮助用户建立关系和承载各种类型的内容。3.动态页面的入口包括：底部选项卡导航、顶部选项卡导航、列表导航。4.动态页面信息单元的基本构成包括：个人信息区域，内容区域和态度表达区域，并且特别注意每种类型的内容区域的布局。5。动态页面分割模式的选择应优先考虑各信息单元的可读性。背景分割和分割线是常用的，而卡片分割和空白分割则很少使用。