中大型B端后台 视觉优化改版协作经验分享 做减法的设计
旨在分享：中大型后台如何改版如何挖掘诊断视觉问题？从1-2的设计阶段优化设计方案？如何高效推动多人保持设计统一性？
《B端大型中后台视觉改版多人协作经验分享》
背景介绍：
作者和团队小伙伴们在去年协力对一项重点项目大型中后台，进行了从0-1的功能需求支持&从1-2的视觉体验优化。
该产品是一款是集合云计算、云服务、云存储等为一体的云服务器技术平台。
大型B端产品的改版涉及页面繁多且人员复杂，此次复盘总结主要聊一聊：如何实现大型协作项目的视觉统一改版和落地执行。
这篇文章价值点在于：推动设计由无序到有序的改版，阶段性策略确保多模块、多人设计执行统一和落地高还原。
项目阶段：v2.0 体验视觉优化阶段
参与人数：设计师5人、配合上下游开发+产品+项目等其余 50+人
涉及产品：云管平台*1 子产品*12
一、问题挖掘与梳理
0-1摸石头过河阶段，产品品牌定位模糊。时间资源都很紧张的情况下，没有进行时间进行细致的产品分析和竞品调研，产品决策者对视觉风格要求是：「标新立异与众不同」。设计师在缺乏统一规范的前提下，根据几张产品视觉稿直接产出，大的风格虽然保持了一致，但在细节上还有很多不一致。那么在功能完成开发后，也暴露了风格定位和协作一致性问题。设计组对多方反馈意见综合搜集、分类整理、统计共性问题。从相对发散阶段进入更加聚焦明确的设计阶段。
外包意见汇总包括了：（1) 客户（2）产品方（3) 其他参与者
内部排查：对滞留的视觉、体验等问题进行系统性的排查和分类，逐一记录。
梳理用户的建议，从视觉层去挖掘产品未被满足的需求和产品内核调性的传达：
（1）设计及开发1.0版本未达到期待的精致度、设计大方向变更：
（2）由追求差异性到追求同类产品相似性的审美偏好改变
直接原因：1.0需求方最开始对视觉风格定位不准确，一味追求与众不同，将C端的装饰效果直接应用至B端。经过实际使用后发现原视觉设计语言不适合产品高精端的调性，装饰干扰性强，影响了信息获取。
二、重新定位改版方向
指导原则：信息有序，认知轻松、操作易寻
设计目标：更聚焦、去干扰、轻量感
最终达成共识：B端追求任务快速准确完成，工作效率提升优先。
表现层需要符合产品调性及用户使用场景认知：从精简、高效、理性的方向出发。解决视觉干扰、细节不统一、信息密度低的三个重点问题。
三、竞品整体与细节调研
1.整体调研：共性与记忆点
各家的风格比对，共性设计方向和典型视觉特征。比如阿里云的产品宣传网页3D表现细腻令人印象深刻，但控制台略显粗糙;腾讯云、火山云整体轻量且清晰，区域架构划分明显;青云的全扁平化界面，后台细节处理有细致优秀，对细节把握更有参考性。
2.局部调研：设计方案对比
面对相同的问题，不同产品通常会有不同的解题方案，可以利用不同的竞品来扩宽我们的设计思路。从表现层和产品层去思考：
1. 竞品如何满足上述的问题和具体内容，是不是比我们现有的方案更合理？
2. 可能基于于什么样的产品、业务指标考量，采取这种方案？
3. 这样解决方案的优劣势是什么？
- 漏斗选择:在多角度对比后，肯定有一个适合我们现阶段产品的最优解。把这个方案作为主推方案，其他方案可以尝试作为对比备选。
- 例：在整体布局风格上目前比较常见的有：卡片分割，线条分割。在调研后发现，虽然线条分割能够节省更多的间隔距离，更能满足更高屏效比的需求，但对现阶段产品来说不适用：在扩展性、模块层次划分清晰度、改版的重开发设计成本都不及卡片分割。根据信息内容分析，平台型多用卡片分割易替换信息模块，工具型后台信息稳定，模块简单，多用线条分割的形式。经过竞品调研后，我们在提案阶段也有了案例的支持，更有依据的说服老板们从多角度平衡选择我们主推的方案。
四、设计拆分，针对调整
1.认知减负：视觉元素优化调整
- 聚焦：色彩引导、信息层次、反馈明显、操作引导
- 去干扰：布局结构优化、去大投影、精简装饰、对比去暧昧、透明度去暧昧
- 轻松：形、质感，投影、分割等
2.视觉锤品牌强化：
品牌图形重复应用，可以增强用户对产品的印象，提升辨识度，增加设计趣味性。
提取了logo中的立方体（六边形）轮廓 和 硬朗利落明确的特征，应用到图标、空白页插画、加载动效、头像等位置，加强品牌印象。
3.抽取典型高频页面优先设计
对后台的重要、高频典型页面抽取样本，在有限的页面范围内进行尝试，好钢用在刀刃上，B端的高频典型页面占整体页面样式比例的60-80%。如：数据报表、表格页、表单页。
五、设计提案，方案对比
背景介绍：
（1）为了解决什么样的问题？
（2）做出什么样的应对措施
方案对比：
（3）方案探索及不同方案的典型特征
（4）适用产品或场景
（5）实现或变更成本分析
（6）拓展性对比
（7) 情景访谈设计测试，与用户、商业利益相关者、技术专家进行方案验证测试，进一步优化
小范围用户测试：
在周围小范围内的寻求有想同行业属性或产品使用经验的同事进行设计体验和验证，记录他们的感受并询问为什么做此选择。
一则可以验证设计方案的合理性，了解行业大众审美。二则还能从中获取新的讯息，辅助我们进一步对设计方案进行优化。三则能够帮设计师在提案是提供案例支持、数据支持。
引导决策方选择：
进行设计提案，虽然可能产出多套设计方案，但设计师（组）可以主动引导评审团选择最优方案
包括了方案推导过程以及小范围用户测试数据的验证，结合产品扩展性、适用类型，用户体验，实现成本、等角度去评估。
六、设计规范的逐步完善搭建
定义设计原则和准则：
设计原则和准则是设计体系的核心元素之一，可以指导设计师和开发人员在设计和开发过程中保持一致性和高质量的标准。
1.基础规范-简单规律：
大体设计原则帮助所有人达成审美共识和判断依据
简单的规律比如界面间距倍数递增分组使用、字阶梯度变化、透明度梯度变化。越简单越有规律的变化越适合相对负责的协作。
2.组件规范-规范可复用：
基础组件、业务组件调整，将无序的积木重新筛选、修正、分类，使其有序，规整。调用起来更加的方便。
3.页面级组件-典型抽取：
对高频模块特征的界面进行归纳总结，如表单、表格、图表也等。保持产品的整体框架和响应式布局保持一致
（1）有规律可遵循：对任何新增页面都不会出现相同面积比例不一致，控件间距混乱、表格宽度不统一等。
（2）符合用户预期，在体验层上不会来回变更信息要素、按钮操作位置。交互更加的简单明了
（3）视觉统一。多条产品线保持统一，不需要做过多个性化处理，视觉上保持简洁明了舒适，不要让装饰影响内容阅读。
（4）降本增效，其他设计师及开发都可以根据模板快速搭建类似界面，并保证稿还原度，形成共识，减少沟通成本。对属于典型页范畴内的界面其他设计师无需对1.0版本重复调整。
（5）对特殊页面进行特殊设计，频次特别低，无复用可能性的不需要放到典型界面组件中
七、设计宣讲对齐、落地追踪
大型B端产品的改版涉及页面繁多且人员复杂，同步协调涉及细节也是十分重要的环节。如何让多人协作并保持高一致性？
1.拉齐设计、前端统一宣讲，认知对齐。讲清核心关键点和规则，加深大家对于一些容忽略问题的暴露，开发有疑问点提前暴露。
2.做好标注，文档文本描述，相当于改版使用说明书，哪里改了改了什么新标准是什么，大体量的改版需要一份详细可查的使用说明书。
3.前期要帮助其他模块执行设计师去审核，改版调整后的他们产出的设计稿符合新规范，辅助纠正大家的疏漏。
4.设计师可以学会使用网页检查工具去更快发现前端实现是否和设计稿一一致。
5.追踪反馈：做好验收管理，建立验收文档。前端实现的Bug提测追责到人。做好责任划分，按照优先级排序BUG,使用追踪记录工具,完成一个问题关闭一个，才能没有遗漏，减少推诿。
6.后续组件维护也最好有调整日志记录，同步给其他协作者。
改版前后设计对比图：
提炼一下，去实操大型改版的步骤：
需求明确+问题发掘+定义方向+竞品调研+细节拆分+设计提案+规范统一+验收落地。设计师不仅仅页面的美化者,而是信息设计传递者。后台设计学会做减法的设计，减少信息噪音，去芜存菁。帮助用户寻找定位他们关注的。
希望我昨日的困惑和今日的经验分享，能够带给耐心读完的你些许帮助~ 👍🏻
