主要观点总结
本文描述了一个学员正在进行的项目案例的改版过程。文章详细介绍了改版对象、问题分析和改版方案。
关键观点总结
关键观点1: 项目背景介绍
文章介绍了一个基于用户照片进行AI生图的工具，用户可上传照片并根据预设模板生成不同风格和用途的照片。
关键观点2: 问题分析
文章指出了视觉改版中多个模块的问题，包括顶部栏、快速入口、标签、卡片信息流和底部导航等。问题包括样式不和谐、权重关系不清晰、细节元素不统一、主色使用过度和图标与目标风格不搭配等。
关键观点3: 改版方案
文章提出了针对性的改版方案，包括调整顶部和快速入口的样式、优化信息流内部组件的样式、使用样式差异显著的双层标签、简化新品卡片的布局形式等。
关键观点4: 改版效果预览
文章提到了改版完成后的效果预览，包括主色的应用、配图的添加和图标及其辅助色的补充等。
关键观点5: 课程推广信息
文章提到了相关的课程招生信息，包括B端产品设计全能班和C端体验设计的课程详情和咨询方式。
正文
今天还是改版日，主要的改版对象是一个学员正在做的项目案例，原图案例如下：
这是一个根据用户照片进行AI生图的工具，需要用户先上传自己的照片，然后再根据预设的模板生成不同风格和用途的照片，比如证件照、写真照等。
问题分析
因为是视觉的改版，这次我们先细节后整体，先从模块/组件层面逐一进行分析，再从整体进行总结。
搜索框和图标的样式不太和谐，搜索框是浅色背景而图标是个深色硬朗的线性图标。且快速入口使用的是较大的圆角，和搜索框的圆角不统一。
下方快速入口的 “开启虚拟分身” 模块是一个新手引导模块，引导用户去完成分身创建之后就会消失。但是看起来像模块的标题，缺少足够的引导性，新手不会想着去点击它。
快速入口的6个选项，权重关系是不清晰的，“拍写真”和“宇宙分身”理论上是权重更高的但位置却靠下，宇宙分身和写真使用的风格不同。且中间的四个功能图标过于严肃，风格和面向当前的主题不匹配。
接着看快速入口下方的双层标签，一级标签用于切换下方的模块类型，下方的标签则用于筛选上新的内容类型。
这两个控件的问题很直观，就是难以区分，以文本的形式展现没有什么存在感，且缺乏主次，让界面显得更加混乱。
标签下方的卡片是新模板上线的公告，让用户可以直接点击进行试用。
这个模块的问题就是太“花哨”了，细节要素多不是不行，但它会在首屏出现，且抢占上方快速入口的关注度。且中间使用的按钮样式和整体样式也不搭，像一个独立的模块。
再往下就是卡片信息流了，按时间顺序展示官方提供的模板类型。
在组件设计上问题不太大，但是模板本身生成的图都是背景很简单（或者没有），所以使用复杂背景的图例即不符合产品特性也不直观。
最下方就是底部导航了，放三个图标选项并不少见，但这个样式太 “普通” 了，只是简单的使用三个素材做出来的底部是无法满足这种主题的风格需要。
再从整体来分析，当前设计的问题还可以总结成下面这些小点：
改版说明
总结出相关的问题，接着就是根据问题进行改版了。还是要强调，改版是有针对性的调整，解决问题，而不是凭感觉，光靠“我觉得”的模式毫无意义。
改动中还是先从搭建原型框架开始，首先顶部的调整中，将开启分身的提示分离出来，作为整个顶部的背景广告图。然后调整快速入口的样式，不再使用完整的卡片将它们包起来，而是每个作为一个独立卡片排列。
然后在下方信息流的设计上，使用样式差异显著的双层标签，以及和上方不同的背景色，将页面划分成上方的操作区域和下方的内容区域。
然后优化信息流内部组件的样式，简化新品卡片的布局形式，以及移除模板卡片的边缘，减少矩形卡片的数量。
最后就是底部的导航设计，因为只有三个选项，后面两个的使用频率也并不高，所以干脆使用悬浮导航，为页面提供更多的空间。
首先就是主色的应用上，顶部的背景使用主色填充，下方主要应用在按钮区域，减少大面积色彩填充的次数。
接着添加配图，因为只是演示所以挑选一些相关的 AI 图例素材，主要控制图片的内容，防止过于复杂让画面的视觉过于臃肿。
最后补充图标和其辅助色，和整体风格形成比较统一的联系（图标就不做了，用目标的风格替代）。
到这一步大体的改版就完成了，我们可以看看前后的对比了。
