【页面还原度】是指开发工程师对设计稿的还原程度。 页面还原程度直接决定了从产品需求到设计实现的程度是否准确有效的表达。
B端产品中，越来越注重产品功能的实现，不注重页面还原； 然而，功能实现和页面恢复并不是两个孤立的问题。 页面还原度低也会影响用户的可用性和易用性。 可用性，损失的是产品最终的产出价值和用户体验。 因此，B端产品团队也需要关注页面还原的实现。
大多数开发团队通过UI演练来解决页面还原度低的问题，即在测试阶段。 在这个环节中，UI设计师将检查并标记产品的修复程度，开发工程师将修复问题。
但仅在UI走查环节解决了页面还原问题，存在以下缺陷：
因此，本文结合工作实践以及与产品、前端、测试的深入沟通，从全设计环节探究产品还原度低的原因，并结合工作实践总结出提高页面还原度的解决方案。
1. 低页面恢复的激励因素 1. 设计规范和设计组件库不一致
2.前端和设计页面实现的思维路径不同
UI设计师设计静态定长页面，重点关注如何将产品需求转化为设计语言，科学合理地布局排版设计元素。 前端工程师需要完成的是如何在不同码率下尽可能还原设计稿。
上述案例展示了设计师和前端工程师对同一页面的不同实现方式。 当在线页面长度与设计稿一致时，表单之间的垂直宽度为65px。
但如果页面缩放或者显示在不同码率的屏幕上，设计认为单行两列表单的宽度仍然是65px； 而根据后端工程师的实现方法，不同码率下单个网格的长度发生变化，那么表格之间的垂直宽度必然会动态变化。
3、设计演练缺乏系统性、动态性、可追溯机制
在日常的设计走查过程中，设计师在页面上进行截图和标注，最后将所有标注的截图汇总给前端工程师。 这样的演练过程存在以下问题：
二、如何提高页面还原度 1、建立一致的设计规范和组件库
建立B端设计元件库和设计规范。 使用范围不应仅限于设计团队。 整个团队尤其是后端工程师和设计师的设计规范和组件库要保持一致，这样设计稿才能上传到线上页面。 输出统一的设计语言，从根本上提高设计质量和还原度。
然而，后端和后端的设计规范和组件库的统一并不容易。 需要全面审视产品开发阶段、前端团队和开发团队的工作习惯以及设计的历史原因。 根据工作实践，设计人员可以从以下几个方面进行改进。 与后端团队保持一致。
(1)设计元件的选择
设计人员收到设计需求后，需要与对接的后端工程师、产品总监确认并考虑以下问题：
在下面的案例中，我们看到使用不同的第三方组件库，页面有很大的不同。 因此，设计者需要一开始就尝试使用与后端相同的设计组件库。
(2)设计组件库更新机制
B端产品业务复杂，大多数第三方设计组件库无法覆盖所有设计需求。 设计师仍然需要创建满足产品要求的设计组件； 此外，设计者还会根据产品需求修改现有的第三方组件库。 微调：设计师对设计组件库的改造和更新也需要团队成员尤其是设计师和前端工程师的审核和批准，以保持前端工程师和设计师的组件一致。
(3)设计者对组件的使用进行克制
设计者需要充分考虑产品的可用性和用户的学习成本，对组件的使用进行克制。 组件的使用需要定义明确的规则和范围。 如果仅仅因为“好看”而使用不同风格的设计组件，那将是极其有害的。 大大降低开发团队的学习成本，造成团队成员在使用组件时的困惑和混乱。
(4) 设计规范
制定设计规范的目的是为了统一设计内部以及与后端工程师的设计规范，提高团队协作的效率。 前端工程师按照设计规范完善公共组件库，提高后端组件的复用率，降低设计与后端的连接成本，提高工作效率。 测试工程师按照设计规范完善稳定一致的测试用例，提高测试工作效率。
因此，在设计规范的制定和更新过程中，需要与开发和测试充分沟通和协作，为团队形成稳定一致的规范文档，从根本上提高协作效率，高效地完成设计规范的开发和初步验证。界面。
2、设计师需要了解后端知识
设计师需要将后端思维融入到设计过程中。 虽然设计者最终交付的是静态规格的设计稿，但在设计的每个阶段css查看器，都需要充分考虑不同比特率设备上排列的不同布局和设计元素。 在后端实现页面展示功效，了解后端实现页面的基本逻辑和适配规则，将设计语言转化为后端规则，最大程度实现页面的还原。
如果你有设计朋友的设计工具是Figma，我强烈建议你学习Figma的手动布局和智能组件制作功能。 Figma的手动布局实现方式与后端实现逻辑高度一致。 采用手动布局思维进行设计，可以进一步提高与后端的沟通效率。
3.设计思维呈现
在设计评审工作中，我们经常会遇到前端工程师不明白设计师为何反复指出某个字体不同元素的大小、粗细、宽度的情况。 如果不仔细检查，设计稿和在线页面是无法阅读的。 如果没有差异，为什么设计师要为了这种像素级的差异而“一分钱一分货”呢？ 出现此类问题的根本原因是团队成员不了解设计师的工作，停留在设计师只是为了“好看”而安排设计组件的误区中。
设计师工作的本质是解决问题并运用不同的设计方法。 这背后隐藏着设计师对产品不同信息的处理和传达。 因此，设计师有必要积极与团队成员沟通，解释设计师在设计工作中的角色。 对于不同信息的处理逻辑，设计师如何将文字需求转化为视觉语言，准确传达给用户？ 不同的职业对同一件事的关注度和敏感度是不同的。 例如，在需求评审的过程中，设计侧重于排版，后端侧重于数据和测试。 留意异常情况。
因此，团队成员对同一页面的感知存在巨大差异。 这样的结果可能会导致页面上线后设计者的信息沟通大大减少。 因此css查看器，设计师必须与团队成员尤其是前端工程师分享设计师在设计过程中所做的事情。 在这个过程中，如何将需要的内容转化为视觉语言并传达给用户。
4、科学合理的设计检验流程
上面，作者介绍了传统设计走查流程带来的诸多问题。 经过不断的实践和探索，设计走查流程不断优化，形成了一套日益高效的设计走查流程。
(1)设计工具的选择
维度查看工具CSS Peeper：
设计师在设计演练时往往需要“像素眼”来验证线路上各个设计元素的属性和间距，甚至需要右键检测元素来检查后端的值是否与后台一致。设计稿。 使用CSS Peeper工具后，设计师可以直接点击设计元素查看CSS样式，还可以看到padding和margin值，大大提高了设计师设计演练的工作效率。
截图+标注工具xnip：
在过去的设计走查标记过程中，设计师进行屏幕截图后，需要将屏幕截图推送到设计软件中进行标记和说明。 这个过程中存在几个问题： 1.设计师和前端工程师需要改变颜色和字体，并使用箭头来指示宽度。 增加设计人员的工作量 2、如果一张截图的问题较多，注释的内容会相互交叉，会降低前端工程师的查看效率，增加沟通成本。 使用支持截图+标注的工具，比如xnip，支持快速选框和文字输入，标注功能支持手动排序和排版，提高工作效率，降低沟通成本。
在线合作表格：
在设计演练沟通过程中，您是否遇到过这样的问题？ 使用截图来表示截图文件的传递。 优点：问题可视化，方便后端快速定位问题。 缺点：
使用文档来记录问题：
优势：
缺点：问题无法可视化，增加沟通成本
基于以上设计演练过程中遇到的问题，我们使用在线表格工具对所有设计演练问题进行分类和分级，并支持团队成员查看和编辑所有设计演练问题的实时内容。 结合xnip工具，对截图中标注的问题进行补充。
不同演练问题的分类管理：
将功能缺陷问题提交给测试工程师设计标准问题，前端工程师反馈交互式优化建议问题，设计人员进行记录并建立设计优化要求。
问题解决优先级分级管理：
（二）设计检验标准
设计演练原则：
设计演练的基本原则是页面上线实施必须达到的标准一致性：信息显示一致； 相似的功能和任务，一致的用户操作和交互路径可用性：页面之间信息层次清晰，信息视觉流流畅，焦点清晰准确性：基本控件使用正确； 内容显示正确，无错别字； 信息结构得到准确表达。
完整性：操作路径完整； 功能实现完成。
设计演练粒度：
设计演练的粒度通常来自产品开发目标和开发周期。 一般来说，如果产品开发周期紧迫，产品目标是优先交付功能，那么设计者可以将与功能实现相关的问题标记为高优先级问题，优先解决； 如果产品目标是UI建设或者体验优化，那么影响产品界面还原和体验优化的问题也应该被列为高度优先级。
设计演练沟通：
设计者对演练问题的描述应该准确描述。
设计师在演练过程中尽量直接描述问题，减少使用“请检查设计稿”，以减少设计师和前端工程师之间的沟通成本。
这次就到这里了，希望能够对您有所帮助，我们上期再见。
发表评论