用一个改版实战案例，教你掌握产品思维！

一、全文速览图

今天我们通过一个案例进行分析，来提升对产品思维的认识与理解。下面左边是原图，右边是改版初期的原型。

二、街猫首页的前期分析

不管是工作中还是做作品集、练习，改版的第一步就是先从业务与产品侧入手进行分析，然后才是用户与体验，最后才是交互与视觉。

那么业务与产品侧分析什么呢？

用一句话总结就是：产品的业务目标是什么，用了什么样的产品形式来解决？

我们以街猫为例，它的业务是通过投放户外智能猫箱，为流浪猫进行投喂，用户可以远程查看猫咪进食的直播，也可以充值后手动控制猫箱进行投喂。

除了喂食和直播的主要服务外，产品还包含用户社区、抓猫派单、猫狗领养、线上商城等次要服务。虽然核心服务看起来有很强的“公益”属性，但说到底它是个商业应用，商业应用就不可能只靠用爱发电，它就需要一套盈利模式来支撑自己的发展。

盈利模式的分析其实并不难，只要自己认真用过产品都能形成大致的理解。比如街猫的商业模式就是通过投放猫箱，提供视频直播来吸引用户关注，并通过用户的爱心进行付费投喂，并在用户量增长后再提供其它增值服务，扩大营收规模。

在这套模式中，吸引用户是最关键的一环，因为只有用户注意到并被内容打动，才会完成后续的付费充值实现商业的闭环。而吸引用户最主要的问题，就是这种服务对多数人来说并不是刚需，除了少数顶级爱猫人士以外，普通爱猫人和养猫人是不会特意准备饭食去喂养流浪猫的。

基于这样的业务诉求，打开当前街猫 App 后首先进入的就是它的直播页面而不是首页，且直播页面会主动匹配正有猫在进食的频道，吸引用户关注。需要用户主动点击首页，才能进入到常规的首页去。

再看首页的布置，顶部是用户自己积累的数据信息，下方罗列猫屋的模块，每个猫屋就是一个直播间，吸引用户点击进去。再下方则是快速入口组件，包含了5个不同的下级功能入口。再往下则是鼓励用户申请猫屋、助力绝育、鼓励领养的广告信息。

可以说，这个首页属于非常不像首页的首页，手动进入并不是重点，而是内容的组成上更像一个信息型 H5 页面。可操作和推送的内容不多，纯商业广告也不多，更多是一些预设的说明内容。

这可以侧面反映出产品端上并不想在首页添加大量商业化元素，降低用户反感情绪，更多是吸引用户关注到流浪猫的不同公益事务中去，是引流入口。

在这个简单的分析里，先理解业务形式是什么，然后通过分析产品形态来寻找它们和业务之间的关联，这种联系就反映了产品的基本设计意图。在改版中，这种设计意图通常是需要正视且遵守的，它会是改版设计的核心主线，后续所有体验、交互、视觉上的优化都要围绕这种意图开展。

基于这种认识我们再看学员改版后的首页：

顶部用户积累的数据和签到虽然有增加用户粘性的作用，但占据篇幅不小，很难吸引刚注册的用户（没有数据），他们恰恰是最需要争取的转化对象。

而下方的猫箱地图，虽然增加了和用户自身的联系，但如果只放了地标图钉，要用户主动点击才能查看或进入，那么对用户的吸引力是很弱的，这个点击和转化的效率一定也会特别低。

再往下快速入口进行改动和强化没有问题，但如果这是最后一个组件，那么首页的作用也没有最大化利用起来。因为部分次要服务只用一个快速入口图标是缺乏吸引力的，用户是不会轻易点击它们的。

这些问题如果总结出来，那么后面不管视觉做成什么样，改版的结果都已经脱离原有目标。除非产品在战略层面有调整，业务给出新的解读，否则这样的改动是缺乏意义的。

分析业务和产品就是确定我们设计的目标，也是一种思维上的约束，防止后续设计过度发散，导致最终的设计结果完全无法做出有效的解释。这样不仅在真实项目里很难通过评审，在面试环节也很难说服面试官。

三、街猫首页的改版思路

基于前面的分析，我们可以确认街猫的首页需要打通通过视频吸引用户的路径，还要达成吸引用户关注其它服务的目标，同时商业服务的入口得有，但不能特别突出。

在展开具体的决策之前，我还决定把改版后的地图模块保留下来，那么下面我们就一步步根据产品的思维来展开首页的调整。

步骤 1：进入应用后看什么

第一个问题就是进入应用时先看什么，原设计里直接进猫屋虽然可以直接进入直播状态，但要正好匹配到用户想看的内容，概率并不是特别大（有时候画面是空的），且首页的访问频次会受限，作用无法发挥。

所以有必要让用户一打开应用依旧进入的是首页，但首页顶部我要保留地图，所以不可能把视频直接放上方，那么我可以选择打开首页时弹出直播视频组件，用户根据内容决定要不要进入直播间，或者关闭它访问首页。

这个需求可以做进一步优化，比如突出猫咪的身份或者关联一些有趣的短视频、动态等，或者让首页应用「二楼」的概念：下滑可以再匹配不同的直播间等等，增加趣味性和吸引力。

步骤 2：优化顶部地图组件

地图组件要继续用，就是强化猫箱和用户的关联性，对于爱猫人士来说查看、投喂自己附近的流浪猫是更有吸引力的。那么地图就得有调整，可以让用户自己定位并增加人的形象，而周围的图钉可以做额外的设计，比如加入对应记录到的流浪猫头像，增加当前是否有猫在镜头内的标识等等。

探索周边的猫屋在我看来会极大增加用户的动力，而且本质上看直播和投喂都包含了 “云撸猫” 的特征，那么脑海里想象到的画面会是下图这样，在用户定位、点击并查看猫屋这些环节上，都有很多趣味设计可以做，当然这是之后具体设计的事，这里暂时不管。

步骤 3：优化下方组件

接着在快速入口设计上，可以使用常规一点的做法。但是到了申请猫屋、绝育、领养上，可以使用别的组件来替代，而不用非得做得很像公益广告。

比如直接使用简单的瓷片区来组合它们，或者是作为三个独立的组件来完成更直观的设计展示。

步骤 4：聚合型信息流

最后就是下方可以增加信息流组件，本身产品中包含的原创内容是不少的，使用信息流来让用户发现感兴趣的内容没有太大的阻力。包括提供直播间、晒猫的动态、求助问题、领养信息、绝育案例等等。

如果让我自己来定产品的结构，我会把底部 Tab 中的猫友圈直接去掉，合并进首页下方，解决猫友圈没人看，首页没内容的问题。

到这里，首页的调整基本就完成了，前面也解释了为什么这么改，只要我们自己的改动与调整都紧跟前面产品分析的结论，那么就可以开展后续的视觉设计。如果出现了前后冲突的设计，那么再往后硬做就要做好面试中无法解释的心理准备。

最后再对比改动前后的差异：

四、结尾

产品思维是中大厂 UI 设计师招聘中最关键的指标（高于视觉和规范，更高于 AI 应用），因为在实际工作中，对所有设计方案的评审也是围绕产品层面展开的，相关讨论最多。只有有效运用产品思维来完成设计，才能产出有说服力的结果。

最后，再聚焦一个产品思维应用会关注的问题，那就是地图组件。我们使用它，是建立在「你的定位周围有猫箱」这一前提下的，如果你所在城市就没有，甚至方圆几百公里都没有，那么这个组件是否还有存在的价值？如果有，那你觉得又应该用什么形式呈现和运用？

这个问题大家可以自己去考虑，如果你能把这个漏洞用一种合理的思路解决掉，那它就是合理的设计，如果不行，它就是错误的！

如果观看分享多，我们会看情况更新视觉的设计，大家积极分享~

我们下篇再贱~