那些你也会遇到的 UI 设计问题！.docx

《那些你也会遇到的 UI 设计问题！.docx》由会员分享，可在线阅读，更多相关《那些你也会遇到的 UI 设计问题！.docx（10页珍藏版）》请在第壹文秘上搜索。

1、那些你也会遇到的UI设计问题!来源：Ul头条(uicner)什么是信息流？信息流设计十分常见，我们日常使用的应用或网页都能见到它的身影。信息流有广义和狭义两种。广义指在空间和时间上向同一方向运动过程中的一组信息，它们有共同的信息源和信息的接收者，即由一个信息源向另一个单位传递的全部信息的集合。狭义指信息的传递运动，这种传递运动是在现代信息技术研究、发展、应用的条件中，信息按照一定要求通过一定渠道进行的。用大白话说，所谓信息流就是信息像河流一样从信息的源头流出，分布到全世界的各种终端设备。信息流有哪些分类？从信息流的表现形式来分有：瀑布式、列表式、动态卡片式、全屏式。以上的信息流的展现形式只是作

2、为信息的载体，那么信息的内容属性又包含哪些呢？根据不同的产品定位、使用场景，针对信息的侧重点，将其内容与展现形式进行组合，产生出符合业务需求以及用户体验的效果。经常有听到所谓的Feed流，实际上并不能称为一种表现形式，feed是一种给用户持续提供内容的数据形式，是由多个内容提供源组成的资源聚合器，由用户主动订阅消息源并且向用户提供内容接下来将逐步对瀑布流、列表流、动态卡片流、全屏流的定义、形式特征、优缺点进行分析解读。瀑布流什么是瀑布流瀑布流是“瀑布流式布局”的简称，专业的英文名称为MaSonryLayoUts。因滑动时会像瀑布一样“飞流直下”“源源不断”，故而得名。是一种以图片信息为主导的页

3、面布局形式，视觉表现为参差不齐的多栏布局，侧重图片展示，以图片或视频（主）+文字（辅）形式出现，最早是由PintereSt首先运用。瀑布流的优点1.瀑布流给用户琳琅满目的视觉体验，其主要特性便是错落有致，定宽而不定高的设计让页面区别于传统矩阵布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳。2.瀑布流使用懒加载的方式不间断的加载信息展现给用户，滑动的时候会不停的出现新的东西，通过给出不完整的视觉图片去吸引你的好奇心，让你停不下来想要不断的向下探索，适合用户目的性不强，随意浏览的场景。采用这种方案的产品，往往可以通过瀑布流加强用户的停留时间，提高用户的使用粘度。从体验的心理讲，女性是

4、一种逛街数小时都不需要停歇的生物，一眼望不到头的瀑布流契合了这种心理。瀑布流的图片就像商品，就像逛街、就像扫货。女性只要不断往下拉伸页面，就像置身在一条没有尽头的购物街,没有层高限制的商场中一样。传统布局中的下一页就是打断，好比男朋友轻声在耳边说了句：休息一下吧，我累了结果不言而喻瀑布流的缺点1 .从用户层面上来说，瀑布流容易造成用户不清楚目前所在的位置，当希望需要进行回溯操作，例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。2 .通常瀑布流适合呈现图片或视频为主，文字为辅的信息，因此当

5、信息需要呈现详细的文字时，就不太适用了。例如当在淘宝搜索关不同类目的时候会呈现不同的信息流形式，比如搜索服饰的时候会呈现瀑布流，搜索数码产品的时候会以列表流的形式出现。这是因为服饰商品更侧重图片的视觉效果冲击，数码产品更侧重参数的对比，当然现在也会同时提供2种阅读方案的切换功能提供给用户自主选择。列表流什么是列表流顾名思义，列表式设计就是通过列表的形式将信息排版呈现，通常出现在以文字为主，图片为辅的场景。常见于新闻、阅读、聊天类APP。呈现形式上可以细分成3种，左图右文，左文右图，上文下图。列表流的优点L列表流加载速度快，单一页面呈现数量多，密度大。2 .视觉上排版整齐，方便用户进行信息浏览、

6、对比、查找定位。例如上文的提到的电商平台通常会在数码产品的类目使用列表流的形式。3 .当（横向与竖向）信息较多时，列表视图可以提供一种概览性的方案来呈现，也可以快速扫描。4 .列表视图可以承载丰富的过滤与检索功能，满足复杂的用户搜索场景。5 .当用户需要批量选择操作时，列表视图提供了便捷的交互方式。列表流的缺点1 .针对单条信息，呈现效果不够丰富，对于图片的展示效果不佳，更着重展示文字信息2 .由于单一页面信息密度大，同级内容过多时，用户浏览容易产生视觉疲劳动态卡片流什么是动态卡片流卡片流实际上就是一种高级版本的列表流，其展示的内容更加丰富，通常包含的信息元素有：头像/图片、名称、文字内容、标

7、签/话题、赞评转、时间等。具备极强的拓展性，更注重交互的引导。动态卡片流的优点1卡片流展示的内容更丰富，经常会伴随图片，屏占比较大，用户的阅读体验更好，帮助用户快速聚焦。2 .视觉上便于将信息组合成区块，增加可读性，增加浏览识别度。3 .卡片式可以拓展更多交互行为，可以有更多操作，如点赞、收藏、评论等。在打破传统列表状态下只能纵向滚动，可以实现横行卷动，空间利用的方式会得到极大的拓展。动态卡片流的缺点L由于单个动态卡片占用的屏幕空间较大，单个屏幕最多呈现3-4个卡片,信息呈现效率偏低。2.同时动态卡片并不适合用户需要进行、对比、查找定位的场景。全屏流什么是沉浸流所谓沉浸流，就是将单个信息详情，通过图文或者视频的形式直接展现在信息流中，常见的如抖音类的短视频产品、一个、潮汐等。全屏式的优点1 .顾名思义，全屏式核心就是希望将信息的内容尽量最大化展现给用户，聚焦度高，降低用户使用成本：向下滑动就能快速切换内容，伴随用户无意识行为的加强，沉浸度越来越高，这也是抖音的成瘾机制。2 .便于展示信息流广告：大屏幕展示能增加信息流广告曝光度，也更容易吸引用户进行点击浏览。全屏式的缺点1 .降低内容多样性：同一个页面仅仅只有一个视频内容展示，不利于内容多元化展示。2 .用户只能通过上下滚动进行视频切换的操作，不便于信息的回溯查找、定位、对比。