如何提升页面还原度？我总结了这4个方法！
扫一扫 
扫一扫 
扫一扫 
扫一扫 「页面还原度」即开发工程师对设计稿的还原程度，页面还原度的高低，直接决定从产品需求到设计实现的程度是否被准确有效的表达。 拓展阅读 如何做好设计还原？从这5个方面入手！作为设计师，一个老生常谈的话题就是还原度检查。 阅读文章 >在 B 端产品中，往往更加重视产品功能的实现，页面还原度并不被重视；但是功能实现和页面还原并不是两个孤立的问题，页面还原度低，同样会影响用户的可用性和易用性，损失的是产品最终的输出价值和用户体验，因此，B 端产品团队同样需要重视页面还原度的实现。 大部分开发团队通过 UI 走查环节解决页面还原度低的问题，即在测试阶段由 UI 设计师对产品的还原度进行走查和标注，开发工程师对问题进行修复。然而，只在 UI 走查环节解决页面还原度问题，有以下缺陷：
因此，本文结合工作实践以及与产品、前端、测试的深度沟通，从设计全链路探究产品还原度低的原因，并结合工作实践总结提升页面还原度的解决方案。 页面实现还原度低的原因1. 设计规范和设计组件库不一致
（1）使用不同设计系统 以 Ant Design 和 Arco Design 表单组件为例，两个设计系统的色值、间距、交互效果等都各有差异，如果设计与前端使用不同的组件库，设计稿和线上页面必然大相径庭 （2）使用同一设计系统 前端工程师在开发过程中不会对所有设计元素逐一查看，更不会对比设计稿规范与设计系统默认规范是否一致，如果设计师对默认的设计规范作出调整且没有在设计稿中作出标注，同样会造成设计稿和线上页面的差异 2. 前端和设计页面实现的思考路径不同UI 设计师在静态固定宽度的页面进行设计，关注的是如何把产品需求转化为设计语言，将设计元素科学合理的布局与排版。 前端工程师需要完成的是如何在不同分辨率的情况下，最大可能对设计稿进行还原：
以上案例展示了设计师和前端工程师对同一页面不同的实现方式，在线上页面宽度与设计稿一致的情况下，表单之间的横向间距都是 65px。但是，如果页面缩放或者在不同分辨率屏幕下展示，设计认为一行两列表单的间距依然是 65px；而按照前端工程师的实现方式，不同分辨率下单个栅格的宽度是变化的，那么表单之间的横向间距必然会发生动态变化。 3. 设计走查缺乏系统、动态、可追踪机制
常规的设计走查流程，设计师对线上页面进行截图和标注，最后将所有标注截图汇总给前端工程师。这样的走查流程有以下问题：
如何提升页面实现还原度1. 建立一致的设计规范和组件库建立 B 端设计组件库和设计规范，使用范围不应仅局限于设计团队内部，应达成整个团队尤其是前端工程师和设计师的设计规范和组件库的一致，从而实现设计稿到线上页面输出统一的设计语言，从根本提升设计质量和还原度。但是，统一和前端的设计规范与组件库并非易事，需要将产品的发展阶段、前端团队开发团队工作习惯、设计历史原因等因素进行综合考量，笔者结合工作实践，设计师可以从以下方面提升与前端团队的一致性。 （1）设计组件的选择 设计师在接收到设计需求后，需要首先和对接的前端工程师和产品经理确认并考虑以下问题：
在前面的案例中，我们看到使用不同的第三方组件库，页面差异很大，因此，设计师在开始初始，需要尽量和前端（或者前端和设计师）使用一致的设计组件库 （2）设计组件库更新机制 B 端产品业务复杂，大部分第三方设计组件库并不能覆盖全部的设计需求，设计师依然需要创建符合产品需求的设计组件；此外，设计师会对现有的第三方组件库根据产品需要进行微调；设计师对设计组件库的改造和更新，同样需要团队成员特别是设计师和前端工程师评审通过，保持前端工程师和设计师组件一致
（3）设计师使用组件保持克制 设计师需要充分考虑产品的可用性和用户的学习成本，在组件的使用过程中保持克制，组件的使用需要定义明确的规则和范围，如果仅仅因为“好看”而使用不同风格的设计组件，会极大增加开发团队的学习成本，造成团队成员使用组件的混乱和困惑。 （4）设计规范 制作设计规范的目的是为了统一设计内部以及与前端工程师的设计规范，提升团队的协作效率。前端工程师根据设计规范建立公共组件库，提升前端组件复用率，减少设计与前端的对接成本，提升工作效率。测试工程师根据设计规范建立稳定、一致的测试用例，提高测试工作效率。因此在设计规范在制定和更新过程中，需要与开发、测试充分沟通与协作，形成团队稳定、一致的规范文档，从根本上提升协作效率，高效完成界面的开发和验收。
2. 设计师需要了解前端知识设计师在设计过程中需要代入前端思维开展设计工作，虽然设计师最终交付的是一个静态尺寸的设计稿，但是在设计各个阶段，都需要充分考虑不同排版和设计元素排列在不同分辨率设备中的显示效果，理解前端实现页面的基本逻辑和适配规则，将设计语言转化为前端规则，最大程度实现页面的还原。
如果有设计同学的设计工具是 Figma，强烈建议大家学习 Figma 的自动布局和智能组件制作功能，Figma 自动布局的实现方式和前端实现逻辑是高度一致，使用自动布局思维进行设计，可以进一步提升和前端的沟通效率。 拓展阅读 Config 2022 落幕！这15项新功能让 Figma 更简单好用了大家好，我是和你们聊设计的花生~2022 年 Config 已于 2022 年 5 月 10 日-11 日在旧金山举行，这场由 Figma 召开的线上设计大会，邀请了来自全球 20 多个国家的 100 多位相关行业从业者发表演讲，与全球用户交流分享设计经验和最新的理念。 阅读文章 >3. 设计思想宣讲在设计走查工作中，经常会遇到一些这样的情况，前端工程师不理解为什么设计师对一个字体的字号、字重、不同元素的间距反复强调，设计稿和线上页面不仔细查看，并不能看出区别，为何设计师对于这些像素级的差异要“锱铢必较”？诸如此类的问题，其根本原因在于团队成员并不理解设计师的工作，停留于设计师就是把设计组件摆的“好看”的认知误区。 设计师的本质工作是为了解决问题，使用不同的设计方法，背后隐含的是设计师对产品不同信息的处理和传达，因此，设计师有必要和团队成员主动沟通，解释设计师在设计工作中对不同信息的处理逻辑，设计师如何将文字需求转化为视觉语言准确传达给用户。不同专业对同一事物的关注度和敏感度不同，例如需求评审过程中，设计关注排版，后端关注数据，测试关注异常情况。因此，对同一页面感知度团队成员差异巨大，这样的结果可能会导致设计师对信息的传达在页面上线后大打折扣，因此，设计师必须和团队成员，尤其是前端工程师分享在设计师在设计过程中，是如何将需求内容转化为视觉语言传达给用户的。
4. 科学合理的设计走查流程上文笔者介绍了常规设计走查流程带来的诸多问题，经过不断地实践和探索，对设计走查过程不断优化，形成了一套更加高效的的设计走查流程 （1）设计工具的选择 走查工具 让设计稿还原度更高！两款高手都在用的B端设计走查神器B 端设计师在工作当中一定会遇到这样的情况：因为上线的项目与设计稿不符而与前端进行争论、为了知道开发颜色使用是否准确只有“截图”，然后在设计软件当中“吸色”来进行判断。 阅读文章 >工欲善其事，必先利其器。选择合适的设计工具可以极大的提高工作效率。在这里为大家推荐两款优秀的设计走查工具； 尺寸查看工具 CSS Peeper 网站链接：https://csspeeper.com/ 设计师在设计走查过程中往往需要“像素眼”对线上的每一个设计元素属性、间距进行核对，甚至需要右键检查元素查看前端的数值是否能和设计稿一致。使用 CSS Peeper 神器后，设计师可以直接点击设计元素查看 CSS 样式，还可以看到 padding、margin 值，大幅度提升设计师设计走查的工作效率 截图+标注工具 xnip 过去的设计走查标注过程，设计师截图后，需要将截图拖入设计软件进行标注和说明，这个过程有几个问题：
使用支持截图+标注的工具，例如 xnip,支持快框选和文字输入，标注功能支持自动排序和排版，提升工作效率，降低沟通成本 线上协作表格 大家在设计走查沟通中，是否遇到这样的问题 ① 使用截图标注交付截图文件 优点：问题可视化，方便前端快速定位问题 缺点：
② 使用文档记录问题 优点：
缺点：问题难以可视化，增加沟通成本 基于以上在设计走查过程中遇到的问题，我们使用在线表格类工具，对所有设计走查问题分类、分级，支持团队成员对所有走查问题实时内容可见、可编辑，结合 xnip 工具，对需要截图标注的问题作为补充。
不同走查问题分类管理
问题解决优先级分级管理
（2）设计走查标准 设计走查原则 设计走查的基本原则，即线上实现页面必须达成的标准
设计走查颗粒度 设计走查的颗粒度，一般来自于产品开发目标和开发周期。一般情况下，如果产品开发周期紧迫，产品目标是优先实现功能交付，那么设计师可以将功能实现的相关问题标注为高优先级问题优先解决；如果产品的目标是 UI 重构或者体验优化，那么影响产品界面还原和体验优化的问题也应提升为高优先级。 设计走查沟通 设计师对走查问题的描述，应该描述准确。
设计师在走查问题中，尽量直接描述问题，减少使用“请查看设计稿”这样的表述，降低设计师和前端工程师的沟通成本。 本次分享到这里就结束了，希望可以对大家有所帮助，我们下期再见 手机扫一扫，阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。
最新评论
