问题分析

因为是视觉的改版，这次我们先细节后整体，先从模块/组件层面逐一进行分析，再从整体进行总结。

首先，第一个模块是上方顶部栏和快速入口。

搜索框和图标的样式不太和谐，搜索框是浅色背景而图标是个深色硬朗的线性图标。且快速入口使用的是较大的圆角，和搜索框的圆角不统一。

下方快速入口的 “开启虚拟分身” 模块是一个新手引导模块，引导用户去完成分身创建之后就会消失。但是看起来像模块的标题，缺少足够的引导性，新手不会想着去点击它。

快速入口的6个选项，权重关系是不清晰的，“拍写真”和“宇宙分身”理论上是权重更高的但位置却靠下，宇宙分身和写真使用的风格不同。且中间的四个功能图标过于严肃，风格和面向当前的主题不匹配。

接着看快速入口下方的双层标签，一级标签用于切换下方的模块类型，下方的标签则用于筛选上新的内容类型。

这两个控件的问题很直观，就是难以区分，以文本的形式展现没有什么存在感，且缺乏主次，让界面显得更加混乱。

标签下方的卡片是新模板上线的公告，让用户可以直接点击进行试用。

这个模块的问题就是太“花哨”了，细节要素多不是不行，但它会在首屏出现，且抢占上方快速入口的关注度。且中间使用的按钮样式和整体样式也不搭，像一个独立的模块。

再往下就是卡片信息流了，按时间顺序展示官方提供的模板类型。

在组件设计上问题不太大，但是模板本身生成的图都是背景很简单（或者没有），所以使用复杂背景的图例即不符合产品特性也不直观。

最下方就是底部导航了，放三个图标选项并不少见，但这个样式太 “普通” 了，只是简单的使用三个素材做出来的底部是无法满足这种主题的风格需要。

再从整体来分析，当前设计的问题还可以总结成下面这些小点：

改版说明

总结出相关的问题，接着就是根据问题进行改版了。还是要强调，改版是有针对性的调整，解决问题，而不是凭感觉，光靠“我觉得”的模式毫无意义。

改动中还是先从搭建原型框架开始，首先顶部的调整中，将开启分身的提示分离出来，作为整个顶部的背景广告图。然后调整快速入口的样式，不再使用完整的卡片将它们包起来，而是每个作为一个独立卡片排列。

然后在下方信息流的设计上，使用样式差异显著的双层标签，以及和上方不同的背景色，将页面划分成上方的操作区域和下方的内容区域。

然后优化信息流内部组件的样式，简化新品卡片的布局形式，以及移除模板卡片的边缘，减少矩形卡片的数量。

最后就是底部的导航设计，因为只有三个选项，后面两个的使用频率也并不高，所以干脆使用悬浮导航，为页面提供更多的空间。

完成以上安排以后，再开始对页面进行内容的填充。

首先就是主色的应用上，顶部的背景使用主色填充，下方主要应用在按钮区域，减少大面积色彩填充的次数。

接着添加配图，因为只是演示所以挑选一些相关的 AI 图例素材，主要控制图片的内容，防止过于复杂让画面的视觉过于臃肿。

最后补充图标和其辅助色，和整体风格形成比较统一的联系（图标就不做了，用目标的风格替代）。

到这一步大体的改版就完成了，我们可以看看前后的对比了。

目前的版本只是一个还没做完的初版，因为时间有限，本来打算输出多个改版结果的暂时放弃了，还有很多可以优化（类似图标）的细节就不细化下去了，大家凑合看，希望对你们有所启发。

这个产品案例除了样式外，在交互、展示层面都有很多有代表性的问题，会成为后续正式课程的讲解案例之一。

我们下篇再贱~

两套课程同步招生中，B端产品设计全能班即将10月初开课，C端体验设计暂定11月开课，有课程相关的问题都可以下方扫码咨询我了，等你们来了乌拉～