信息多就一定要删减吗？ | 喔图 APP UX 拆解 Redesign
杭州/学生/54天前/420浏览
版权
信息多就一定要删减吗？ | 喔图 APP UX 拆解 Redesign
HEY，大家好
今年正式入行了 UI/UX 设计，打算用
拆解真实产品的方式，把自己的思考过程积累成作品。
这是第一篇，选了喔图 APP 的首页，主要探讨了一个问题：
在信息复杂的情况下，如何通过信息分类帮助用户更好地理解页面？
一、产品理解
喔图是什么？
喔图是一款面向
活动场景
的照片直播与云摄影服务平台，依托快速上传、照片管理等功能，帮助摄影师和活动参与者实现
「照片的实时分享」
。
典型场景包括企业年会、婚礼、展会等各类线下活动现场。
摄影师拍摄的照片可以快速出图，活动参与者可以实时查看。
谁使用喔图？
喔图的主要用户分为两类，但二者的使用目标差异很大：
摄影师：
摄影师需要高频使用喔图，例如创建和管理活动相册、拍摄上传、交付照片等。
对摄影师来说，喔图更像一个
工作工具
，核心诉求是高效、流畅地完成自己的工作。
活动主办方：
活动主办方既是活动的组织者，也是摄影服务的采购方。
他们会关注活动相册的数据，用来判断活动举办的效果；同时也会浏览平台案例、挑选摄影师，从而产生摄影服务采购需求。
对主办方来说，喔图更像一个
商业服务平台
，需要通过内容展示服务能力，并完成商业转化。
于是，喔图首页需要面对差异化极大的两种设计目标：
工具侧，需要让摄影师快速完成操作；
服务侧，需要展示丰富的内容，帮助主办方了解服务。
那么：
当一个产品需要同时服务两类用户时，首页该如何满足和平衡不同的诉求？
这是这次产品拆解最开始的问题。
二、原版拆解
先来看原版首页，是如何平衡这两种设计目标的。
下图是首页连续下滑浏览所得截图：
01 | 业务结构
观察页面可以发现，首页由多个独立模块组合而成。
虽然内容丰富，但整体信息仍可归纳为三个层级：
快速入口：
主要面向摄影师，提供功能入口。
运营区域：
承担业务推广和引流。
内容流：
主要承担内容展示，通过分类标签切换不同内容，引导用户浏览。
从业务结构来看：
首页 = 快速入口 + 运营业务 + 内容流。
这种信息分类方式其实比较清晰。
虽然两类用户的目标不同，但通过把两类用户需要的信息放置在这三个区域中，首页同时承载了：
帮摄影师快速开工 + 帮主办方浏览服务。
02 | 视觉排布
双任务的业务，也带来了大量的信息。
这在第一屏表现尤为突出。
纵向堆叠了 11 组信息区块，涵盖导航、工具入口、运营广告、个人内容、推广位、内容 feed、分类标题、标签筛选、人才列表卡片......
当然，信息多并不是问题。
拼多多、京东等产品，同样信息爆炸，但用户并不会因为信息多，就不知道该怎么使用。
那么，喔图是如何处理丰富的信息的呢？
我将原页面剥离掉信息，抽象成色块，留下
空间、面积、顺序、视觉权重和容器层级。
从色块图中可以观察到，页面中的多个区域面积比较接近，以深浅交替的节奏连续排布。
其中有三处浅色区域，在深色区域的衬托下相对突出。
进一步对应实际业务后发现，这三个区域分别是：
功能入口、Banner、我的相册
它们也分别对应摄影师的三个场景：
创建新相册、了解新功能、回到历史相册
从页面最终视觉呈现来看，
原版从大量信息中建立了3个比较明显的视觉重心，且这些重心与摄影师的工作场景存在一定关联。
03 | 交互方式
再来看页面的交互方式。
在Banner 下方有一组页内滚动标签。
点击之后，标签会变成吸顶常驻的 Tab 区域，并滚动定位到对应内容。
用户无需进入独立页面，即可直接浏览：
我的相册/找摄影师/活动案例/专题合集 等内容。
从组件构成看，这其实构成了一个完整的二级页面结构：
标题 + 分类筛选 + Feed 信息流
也就是说，原版把一部分二级页面的内容直接前置到了首页。
这样做的好处很明显：
用户少一次跳转，就能看到更多内容。
原版小结
到这里，我们可以大致还原出喔图首页的设计方式：
- 用业务分区承载两类用户任务
- 在大量信息中营造了三个重心
- 通过内容前置减少了跳转次数
从设计结构来看，它其实已经有一套比较完整的解决方案。
三、
从用户视角重新看一遍
以上是从外部分析的视角看到的首页。
但用户并不会像设计师一样，把页面拆解成“业务分区、视觉权重、交互结构”。
用户进入首页后，面对的是所有同时出现的信息。
他们真正做的事情可能更简单：
在呈现的信息中，本能的寻找和自己有关的内容。
比如，一个主办方进入喔图，想约拍摄影师。
这时候页面上的“照片直播”“创建相册”等工具入口，与他的目标并没有直接关系。
他需要做的第一步，是在大量信息中判断：
哪些内容与我的目标有关？
然后才开始使用。
这也解释了为什么京东、拼多多的首页信息密度远高于喔图，但用户不会因信息多就不知道怎么用。
因为页面上的所有信息都指向同一个根本目标：
购物
用户不需要判断页面上的信息是否跟自己有关，答案永远是「有」。
用户只需要决定「我现在想不想买」。
这是意愿问题，不是理解问题。
而喔图的情况则完全不同。
喔图承载了两类不同的用户目标，页面上的信息并不一定都与当前用户有关。
用户必须额外完成一步判断：
这些信息是否与我有关？
而判断的前提，是理解。
只有先理解页面上的信息是什么意思，用户才能进一步判断哪些内容与自己的目标相关。
四、当前页面，是否足够容易理解？
基于页面的实际呈现，我认为有些问题值得继续验证。
这里需要说明的是：
下面这些并不是我已经证实的问题，而是我观察页面之后提出的疑问。
01 | 视觉层：动态首屏是否破坏了稳定的视觉预期？
首页会根据「我的相册」卡片的数量，呈现出三种状态。
无相册时：
创建相册是用户当前最主要的动作，呈现大面积引导创建区块。
单个相册时：
相册内容成为首页的重要信息，卡片本身占据较高的视觉权重。
多个相册时：
相册卡片纵向排列，首页的视觉节奏也发生变化。
也就是说，不同使用阶段的用户，看到的其实是三个视觉呈现差异比较大的首页。
那么：
一个会随着使用状态发生明显变化的首页，是否意味着用户每次进入新的阶段，都要重新适应一次？
02 | 交互层：页内滚动是否符合通用交互逻辑？
一般来说，
页内滚动
通常用于
同一个页面、同一类内容下查看更多内容。
例如商品详情页，可以通过页面滚动查看商品介绍、参数和评价。
同一 Tab 下的不同标签
通常用于
同一大类内容下的不同细分。
例如电台中的新闻、体育、音乐频道。
但细看喔图的四个标签：
「我的相册/找摄影师/活动案例/专题合集」
它们之间并不完全属于同一内容体系，也不是同一大类下的不同细分。
它确实减少了页面跳转，但与此同时：
这种特殊的页内浏览方式，是否需要用户额外理解？
03 | 导航层：多个入口是否增加了选择成本？
以「找摄影师」为例，在同一屏内存在四条访问路径：
- 首页向下滚动或标签定位，直接浏览。
- 点击tab区的「更多人才」。
- 点击次级功能入口区图标。
- 点击底部导航「派瞬」。
它们都可以把用户带到与摄影师相关的内容。
当同一内容存在多个入口时，用户可能会产生疑问：
这些入口有什么区别？我应该从哪里进入？不同入口的浏览状态是否互通？
多入口本身并不一定是问题。
但当多个入口指向相似内容时，入口之间的关系是否足够清楚，值得进一步思考。
04 |
认知层：专业概念是否进一步增加了理解难度？
喔图本身具有一定的专业门槛。
新用户未必能立刻理解「专题微站」「闪传相册」「派瞬」等概念。
如果首页本身已经同时承载多种用户目标，又存在比较特殊的交互方式和多个业务入口，那么这些专业概念是否会进一步增加用户理解和判断的难度？
五、设计假设
这些问题，我目前无法直接得到答案。
我没有喔图内部的数据，也无法开展大规模真实用户调研。
它们是否真实存在、影响有多大，最终需要数据来回答。
我也提醒自己：
避免用 "为了挑错而挑错" 的视角看设计
因为任何设计在这种视角下都能被挑出问题。
比如：
我担心的「三种首屏状态」需要适应，但对于已经熟悉了产品的老用户来说，即使布局调整，也未必带来很大的适应成本。
我担心的「多入口」造成选择负担，但数据上可能显示增加了转化率。
我担心「特殊 Tab 」交互违背通用逻辑，但用户也许用几次就能适应。
我担心「专业门槛」高，但如果喔图的摄影师用户大多是经过培训或自学的专业人士，那么他们理解这些概念的成本可能远低于本文的预估。
在缺少数据、无法验证的情况下
我选择把讨论收敛到一个更小、也更可验证的假设：
不改变业务功能，只对信息重新分类归组，能否让信息更容易被理解？
六、设计原则：
该假设核心目标是：
让信息更容易被理解，从而帮助用户更快判断哪些内容与自己有关
。
围绕这个目标，我整理了三个后续改版方向：
先更换信息分类方式：
按照 用户能用来做什么 重新分类信息。
再减少判断的阻力：
删减重复冗余。
最后用空间表达关系：
让不同内容之间的关系，通过视觉就能被感知。
定义产品业务逻辑并非设计师的职责边界，但在信息排布这个层面，设计仍然有充分的发挥空间。
如何让用户更快理解眼前的信息，是我这次想练习的事情。
七、方案呈现
基于前文提出的设计原则，我开始对首页进行重新组织。
这次改版最核心的动作是：
按「工具操作 / 内容浏览 / 运营业务」重新划分信息。
原版首页虽然将页面信息划分了三个分区，但工具和内容还是混在一起。
比如，
如快速入口中既有「照片直播」这样的工具，也有「专题微站」这样的浏览内容；内容流中也同时存在「我的相册」和「找摄影师」；运营业务则分散在两处。
用户进入一个分区后，仍然需要对区域内的每个信息进行判断：
这里的内容是用来做什么的？
改版不再沿用原来的业务位置，而是按照信息本身的用途重新归类：
工具操作——用来完成具体操作；
内容浏览——用来查看和了解内容；
运营业务——用来承接活动和商业服务
。
再让分类后信息形成相对独立的区域。
这样用户理解“这个区域是做什么的”后，不再需要对区域每一项内容重新判断。
这是这次改版最核心的设计动作。
后续的位置调整、内容删减和视觉处理，也都建立在这个分类方式之上。
01｜运营区：重新聚合
原版首页的运营信息分散在两处。
重新分类后，我将运营相关内容统一归入运营区。
这样可以让运营内容与工具操作、内容浏览形成更加明确的区分。
02｜工具操作区：重新聚合
原版的工具操作主要可以归纳为三类：
快速开启新相册、回到历史相册、使用相册快捷功能。
因此，我按照这三个方向重新组织。
核心功能入口：
原版三个入口分别是：
照片直播/短视频直播/专题微站
其中，「专题微站」更偏向浏览模板的内容，与另外两个直播功能并不属于同一类。
因此，我将它替换成喔图原有的“视频直播”，让三个入口形成统一的直播功能组合。
历史相册：
「我的相册」在原版中承担一部分浏览任务。
但从实际功能来看，它更重要的作用还是：
帮助摄影师快速回到已有相册。
所以这次我将它从 Tab 浏览体系中移出，作为工具操作区的固定入口。
位置和形态也尽量保持稳定。
这样首页首屏就不会再因为相册数量变化，而产生明显的结构变化。
次级功能入口：
原版次级入口共有 5 个。
其中：
找摄影师 / 接单大厅 / 喔图商城
更接近内容浏览，因此被重新归入内容浏览区。
剩下的：
AI 试修 / AI 剪辑
都属于相册相关的快捷功能。
所以我将这个区域重新定义为：
相册快捷功能区
并补充两个原有的相册相关功能，让这一组入口形成更加完整的工具组合。
03｜内容浏览区：重新聚合
内容浏览部分，我又进行了进一步区分。
主要分成两种情况：
·浏览之后，还可能进入功能流程
例如：
专题微站 / 专题合集 / 找摄影师 / 接单大厅 / 喔图商城
这些内容的共同点是：
用户首先浏览内容，然后根据自己的需求决定是否进行下一步操作。
比如：
浏览摄影师 → 决定是否雇佣；
浏览模板 → 决定是否使用；
浏览商品 → 决定是否购买。
因此，这类内容最终都会进入一个更加完整的功能流程。
所以这次改版中，我不再让这个区域的完整内容前置到首页，只保留导航入口。
让首页和二级页面内容有更为明确的边界：
首页负责展示和引导，完整内容进入独立页面。
同时，将指向同一功能的多个入口进行合并，减少重复路径。
原内容流中一些较长的介绍型标语，也进行了精简，希望用户能够更快理解入口到底是什么。
·浏览本身就是目的
剩下的「活动案例」则比较特殊。
用户浏览案例，浏览本身就是主要目的。
因此，这里的重点不是让用户快速进入其他功能，而是：
让浏览过程更加顺畅。
所以我保留了 Tab 分类，让用户可以快速筛选自己感兴趣的内容。
同时适当放大卡片，让内容本身成为视觉重点。
04｜细节打磨与整体调整
到这里，首页的主要结构调整基本完成。
最后再统一处理信息间距、字体大小、卡片关系等细节，让整体呈现更加整洁。
最终低保真原型如下：
05｜改版前后对比
把改版前后的首页放在一起，可以比较直观地看到这次调整，如图。
这次并没有删除原有业务，而是重新调整了它们之间的关系：
工具操作更加集中。
内容浏览更加集中。
运营内容也拥有更加明确的位置。
我希望用户在进入首页之后，可以更快知道：
这里哪些东西是我现在要做的，哪些东西是我可以继续浏览的。
八、设计取舍
不过，这个方案并不是只有收益。
重新组织信息之后，也产生了一个比较明显的代价：
原版首页可以同时展示多个历史相册，帮助摄影师快速回到不同的历史活动。
而改版之后，首页固定展示一个相册。
如果摄影师的工作需要频繁切换不同相册，那么回到其他历史相册就需要多一步操作。
这反而可能降低摄影师的工作效率。
这也是这次改版中，我比较明确的一项取舍：
我通过固定首页结构降低了理解成本，但也牺牲了一部分历史相册的操作效率。
所以现在回头看，这次改版并不能简单地说成“比原版更好”。
它只是针对我提出的那个假设，给出了一个不同的答案。
九、小结
本文属于个人学习性质的概念重设计，仅用于个人 UX 练习与作品集沉淀，非喔图官方项目，未获得喔图官方授权。
文中涉及的产品背景与用户信息，主要来自应用商店、官网、AI 搜索等公开渠道的收集整理，不代表喔图实际业务。
文中喔图原版界面的版权归喔图所有。所有推导均基于公开信息，可能与真实业务存在偏差，本方案不用于商业用途。
这篇文章对我来说，最重要的并不是最后做出了一个什么样的页面。
而是第一次尝试完整地记录：
我怎么观察一个真实产品，怎么发现问题，怎么提出假设，又为什么做出这样的设计决策。
我希望通过这样的记录，慢慢建立属于自己的设计判断。
文章写完了，但关于设计的学习才刚刚开始。
感谢你的耐心。
如果有什么想法，欢迎留言讨论，我们下篇再见。
4
举报
声明
收藏
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
4登录即可同步推荐记录哦
收藏登录即可加入我的收藏
评论登录即可评论想法
分享分享