A. 视觉设计师是怎样让前端工程师 100% 实现设计效果的
知乎问题：视觉设计师是怎样让前端工程师 100% 实现设计效果的？
问题补充：发现自己设计的app和网页，在前端显示总是和设计效果偏差很远。和工程师沟通却说不可能100%呈现的，但实际上80%都没达到。想了解下，各位设计界的前辈是怎么做的，才能让前端显示尽量和设计效果一致。
下面是知乎用户@酸梅干超人 的回答，小编觉得很多价值，感兴趣的读者可以看一看，领悟一下。
首先，作为一个设计师，尤其是UI设计师，请跟我一起大声念：必须掌握前端切图流程！！
这可能意味着你得学会HTML+CSS，或者要长时间和IOS或者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么能去学码农的东西，设计人员对这些看似高深的源码有本能的畏惧和厌恶。无论你所在的公司在项目人员配置上如何贴心到位，但如果你自己没有掌握这些知识点，就不要妄想最后实现环节上能顺利收尾，因为你从出发点开始和程序员的认知就不对称，这些不对称是矛盾和偏差的根源。
让我们来举举例子：
例如你设计了这么个样式，倾斜、层叠，你有没有在设计的过程中考虑过这么设计的后果（国内外高能前端请不要加入此列）？你在当前宽度画布中设计效果似乎还不错，这注定该是个填满浏览器显示区域的设计，但是放大后呢？1920宽下怎么办，难道得是这个模样？？
因为在水平线上无法直接延伸平铺的设计，在前端部分你让开发人员怎么帮你填补这两个区域的空白，你从设计初就不知道在对应设计类型下应该创建的画布大小（满屏响应式设计要准备好大小两种或多种方案），那进入切图环节我已经能脑补出你和开发人员是怎么撕逼的盛况了。
再者，假如我们填满这个设计稿（咳咳，比较粗糙的填上）：
这些没有内容被红线框出的背景区域最后怎么呈现出来？这里面几个主要的倾斜图形上面还叠加了对应内容、图片、文字，还有前后关系，别指望前端设计人员能轻松实现，如果你用一张背景图填充，那这张背景图的大小控制得住？加载过程要多久？导出WEB用途格式图片是选择“连续”还是“优化”？
再类似这样的案例：
现在很多小年轻们迷恋追波上大神们做的牛逼的动效，于是设计的时候光静态稿件不甘心，也来做个AE特效玩玩，压根没有考虑IOS或者安卓在实现这样的效果时，需要哪些运行机制，有没有这样的控件支持，会不会不流畅等等！自己用了一整晚的时间折腾这么酷炫高大上的动画，开发这些土鳖居然告诉我不能实现恩？？撕逼ING.........
再普遍点的，是不是每次前端开发完你发现绝大多数元素和字体都不对，没有对齐，大小加粗等细节没有注意，但是开发拿设计稿就是没办法100%实现的借口的来搪塞你？？
下面就来讲重点~~~
==========重点==========
1、设计前请审核原型
在原型步骤就想好对应的图层结构，交互特效，并和开发人员做好交流，是否可以实现，功能的评估一定要细致，否则会浪费大量的人力成本。还有原型是挺严肃一玩意儿，但是大多数团队或者设计都没有认识到它们的价值，在这里不展开原型的细节了，这还可以再写一个长评，你们懂意思就好拉，画在纸上的手稿也比没有强。
下面放我自己平时做的原型：
2、熟悉设计环境规范
无论是WEB还是IOS、安卓、WP等等，都有对应的设计规范文档，我下面会帖出来。如果连最基础的设计规范都不知道就开始做设计，那么你要自己承担项目拖延和被整个开发组人员问责的后果。在你动手前，请好好的做完功课，并且在每次环境大升级时跟进关注（例如新的iPhone6、6+发布的尺寸变更等）。
前人已经栽好了树，你需要做的就是在既定框架内完成设计即可。你要牢记自己的设计是基于相应的运行环境的，没有足够的能力前，不要有认为这套体系下的设计都很“土”，你是一个要成“大神”的男人，打破限制和规范是你的嗜好和品位。如有以上想法，请对着镜子里的自己说：Navie！
例如WEB设计下，12PX以下的中文字体无法被正常显示，文本只支持本地客户端已有字库，IOS的TABBAR、TOPBAR等高度是不能被随意变更任意增减层级等等。这样的稿子如果被交付，并没有强有力的逻辑说服别人，只会让你的团队感受到你的不专业，增加矛盾隐患。
B. web前端如何最大化实现设计稿还原
多和设计师沟通，太个性化的东西协商下，免得无法完全地还原设计稿！
C. 如何保证抄板还原的PCB文件100%正确
为保证PCB抄板功能和性能的质量，需要在PCB抄板后做各种测试。否则没法保障PCB抄板后的质量，只有经过各种测试才能得以保障。
一、电性测试
在电子产品的生产过程中，因瑕疵而造成成本的损失，在各个阶段都有不同的程度，越早发现则补救的成本越低。电性测试对于PCB业者而言，为的就是及早发现线路功能缺陷的板子。测试条件及测试方法主要包括测试资料来源与格式、测试条件，如电压、电流、绝缘及连通性、设备制作方式与选点、测试章、修补规格。
在PCB的制造过程中，必须作测试的三个阶段是内层蚀刻后、外层线路蚀刻后、成品。
二、电测的方法与设备
电性测试的方法有：专用型、泛用型、飞针型、非接触电子束、导电布、电容式及刷测，其中最常使用的设备有三种，分别是专用测试机、泛用测试机及飞针测试机。为了更了解各种设备的功能，以下将分别比较三种主要设备的特性。
1、专用型测试
专用型的测试之所以为专用型，主要是因为其所使用的治具，仅适用于一种料号，不同料号的板子就无法测试，而且无法回收使用。
2、泛用型测试
泛用型测试的基本原理是PCB线路的版面是依据格子来设计，孔位置以一G10的基材作Mask，只有在孔的位置探针才能穿过Mask进行电测，因此治具的制作简易而快速，而且探针可重复使用。泛用型测试点数通常在1万点以上，测试密度在或是的测试称为on-grid测试，属于off-grid测试，其治具就必须要特殊设计，通常泛用型测试的测试密度可达 QFP。
3、飞针测试
飞针测试的原理很简单，仅仅需要两根探针作x、y、z的移动来逐一测试各线路的两个端点，因此不需要另外制作昂贵的治具。但是由于是端点测试，因此测速极慢。
三、技术比较
飞针测试是目前最适合使用于小量产及样品的电性测试设备，但是若要运用于中大量产时，则由于测速慢以及设备价格昂贵，将会使得测试成本大幅提高，而泛用型及专用型无论是用于何种层级的板子，只要产量达到一定的数量，测试成本均可达到规模经济的标准，而且约只占售价的2~4%。但是随着电子产品的变化速度加快，使得单一电路设计版本的产品生命周期变短，。目前尚在积极改良的E-Beam、CEM或电浆放电技术，若能在测试效率上提升，将是电性测试上良好及可行的解决方案。
D. 前端入门篇（一）：如何把设计稿还原成真实网页
前端工程师，根据设计稿写代码啊。html+CSS +JS +VUE+JQ+Bootstarp...
E. Android如何做到UI还原100%
要做到百分之百，这个基本上是不太可能的。除非UI效果设计得不复杂，能做到完全还原。但如果UI设计得比较复杂的话，就难以保证了。毕竟程序不是死的，是要运行的，实际运行效果在不同的机型和系统版本上可能会有差异。
有个说法，UI的设计图按100%计，前端写完页面后可能还原度在90%~95%左右，等到程序整体完成后还原度可能90%都不到了。理想和现实终归是有差距的，虽然这是个笑话，但很多时候的确如此。
F. 如何让设计效果高还原度落地
一个产品完整的设计流程中，交互与视觉定稿后，后续视觉规范的输出、UI控件的整理与标注、开发的高还原度，都会影响产品最终的用户体验。作为视觉设计师，在视觉设计的最后阶段则是繁琐且像素级别的精雕细琢，设计讲究的不仅是美感还有严谨态度与逻辑。
视觉设计师如何让设计效果高还原度落地?
最近半年在大司(华为)参与一个重点项目，且将会上线到全球各个局点(本司专称，指某个国家)中，涉及多端多屏协同问题。临时组成的设计作战团队，人员投入少、时间紧迫、任务量大高强度的状态下摸索前行。为时五个月过去了，项目推进良好Phone端ios与Android也到测试阶段，“大视频”端的开发工作也即将开始。五个月的时间，与优秀的同事一起协力合作，参与Phone端“大视频”端的视觉与多端规范输出。这里分享一下这几个月的累积与沉淀--视觉设计师, 如何让设计效果保持高还原度的开发落地?给用户呈现一个设计精致与体验良好的产品?
在一个产品完整的设计流程中，交互与视觉定稿后，后续视觉规范的输出、UI控件的整理与标注、开发的高还原度，都会影响产品最终的用户体验。作为视觉设计师，在视觉设计的最后阶段则是繁琐且像素级别的精雕细琢，开发出来的精美页面需要视觉设计师做到以下几点。
一、视觉与交互之间应衔接无缝，即时刷新视觉页面
一般产品设计流程包括不同的阶段，不同的阶段其涉及的范畴内容不一样，作为设计师面对所有步骤不能一蹴而就，而是按部就班，计划行事。
前期准备阶段：确定设计需求的目标，竞品分析，用户研究，市场评估等;
设计需求分析阶段：设计需求的理清，业务逻辑的推敲，产品的架构的搭建;
设计执行阶段：交互设计原型的输出，视觉设计风格与方案确定，开发落实与测试上线，这构成一个不断迭代刷新的流程;
在以上阶段中，业务需求的变更与澄清，交互的迭代，视觉的刷新，是设计过程中最繁琐的阶段。设计启动前了解多端的适配情况(分辨率/屏幕精度)，综合考虑优先出什么分辨率;接着视觉设计师需面对庞大的页面工作量，且常会遇到与交互原型不一致的问题，需及时反馈并拉通讨论。这就需遵循一个清晰可见的迭代流程，对视觉设计而言，需求的变更与澄清-交互的迭代-视觉的刷新-设计的迭代构成的是一个闭环无缝的路线，只有这样才能为开发的启动，打下扎实的根基。
当然作为视觉设计师，设计过程中主动出ABC…方案而不是只拿出一个唯一的方案，只有将想法用画面来表达，才是够合格的设计师，特别是视觉设计师，好处可以锻炼自己的设计表达力，方便评审定稿，避免反复修改被人牵着走。
二、适当时，为开发开启更多的话语权，避免更多的无用功
视觉规范、视觉标注、视觉控件库的整理与输出目的只有一个：那就是指导开发，让设计100%还原落地;回到项目中，对于设计团队与开发团队通常会体现以下两种情况出现：
开发团队对项目有丰富经验，设计团队对此项目经验少-开发话语权大于视觉
设计团队拥有多次项目经验，并有一定的设计沉淀累积-设计话语权大于开发
从视觉设计而言，如果是设计团队拥有丰富的经验这是最好的，用经验累积设计沉淀与创造性指导项目，话语权大，反之亦然。
在这里结合最近参与的项目，情况为第一种来进行思考;交互视觉设计过程与规范输出中，让开发提供更多正确的方向引导，借鉴开发团队以往的宝贵经验，如：设计文档的共享与即时性、设计规范的专业性，开发认同的设计规范去指导开发、设计相关问题单的及时跟踪与解决、设计需求变更流程(变更流程包括：变更需求提出人-交互-视觉-开发-产品经理(SE or PM)敲定-执行变更-关闭问题单-变更完成)等，都能有效指导开发，提高产品开发落地的高还原性。
三、用80%场景的视觉设计＋视觉控件规范＋切图＋标注＋宣讲来指导开发
1. 视觉设计的场景
由交互提供具体场景的典型页面，视觉稿进行输出，多次迭代评审敲定后，再由开发提出缺失场景的视觉设计，视觉进行场景补充;
2. 视觉UI控件规范的输出
必须是经过多次评审与迭代的最终视觉稿;但通常情况下，为了赶进度视觉设计与规范是同步进行，这导致规范反复修改的问题。
根据项目经验是，在视觉迭代中期时，先输出基础控件元素规范，包括(颜色/文字/图标/蒙板/投影/按钮/输入框/或个别控件)约占控件规范30%，与开发进行第一次规范评审，确定规范输出的正确性与专业性。
让开发选取所有视觉页面中需要标注的UI控件，因为开发选择的UI控件也为通用样式，开发代码写成UI控件库(可以对应视觉的控件列表)并由其它分模块统一调用;且所有UI控件必须基于最终视觉效果进行控件抽取与迭代输出。最后，layout用文档(pdf)的方式总结，避免单独模块单独页面传递，更能将规则一目了然;规范是一个庞大而繁琐，极需耐心的工作;过程中注重每一个细节的精准与合理性。
3. 切图与整理
切出所有视觉页面中涉及到的图标与辅助图形;图标大小如：24px/ 32px/48px/72px/128px等，根据图标具体场景中的大小、颜色、状态来切。换句话说，每一个图标都有它对应的具体场景，特定的尺寸、颜色和状态;记得曾与开发gg对规范与切图的时候，他说：页面的图标切图，需要的是一个具体的拿来就用的，我们不会去画一个图标或去特定写一个图标的颜色。
4. 标注
视觉页面的标注基于UI控件规范的基础上进行，抛弃以往每个页面细无巨细的具体尺寸/色值/大小的标注。其实每一个视觉页面皆由不同的UI控件组成，在页面中将对应控件用UI控件规范中的编号来标注，开发gg拿着视觉页面标注去敲写代码时，再在UI控件规范文档中寻找相对应的控件规范细节;这样，视觉设计师避免在视觉页面中做那密密麻麻的尺寸标注，而开发gg拿到标注清爽的视觉页面也不会产生视觉疲劳。
5. 规范宣讲
以上4步完成后项目开发启动前，用视觉规范对开发做统一的宣讲，避免遗漏造成规则传达不一致;这样，还设计原度还是问题么?(后续会有一篇文章专门分享如何做设计规范与标注。)
四、与开发近距离接触，面对面解决问题
最后一个方法是与开发来个亲密接触，即如果有条件允许的话，请与开发坐一起;遇到问题及时面对面澄清、拉通指导、达成共识、修改、敲定、解决。
1. 设计规范做得再完善，开发问题依然存在
试想一下，如果不和开发坐在一起，即使开发面对再完善的设计规范，基于开发本身对设计美感的欠缺，开发过程多多少少都会产生理解偏差。开发过程每遇到一个细节问题，开发gg都得拉着视觉问：这个按钮上的左右箭头是无限循环吗?图标缺少了一个状态，那个状态是什么等;发个信息问拉会或者电话讨论，有时候还解释不清楚，效率低且事倍功半。
2. 视觉设计师直接进组到开发团队中
结合当前项目的做法是视觉设计师直接进驻到开发团队中，与开发团队坐在一起，举个例子此项目视觉在深圳，开发在异省南京或是异国，视觉也出差飞过去长期进驻，遇到问题面对面商议解决;大大提高了开发的进度与也节约了时间，视觉还原度还是问题么?当然，如果设计与开发本来就附近办公，则不需无休止的出差，项目成本节省不少。
设计过程还是和开发gg们来一个“亲密接触”吧，永远不要把开发拒之门外;觉得交互与视觉完成后则就万事大吉。设计讲究的不仅是设计美感还有严谨的态度合理的逻辑，要想一个产品始终保持是那个细节精致，创意精彩，且用户体验好;需要的是交互-视觉-开发三者之间是无缝合作，各个环节的周全考虑。
G. UI设计师怎样让前端100%实现设计效果
这个问题很难为UI设计师，怎样实现完全取决于你们之间的沟通配合，所谓搭档就是这么产生的。但是作为设计师有些工作还是不得不做的，因为前端或许并不清楚，你所描述的效果，在呈现上和你保持一致性，所以设计师至少还得做以下工作：
具有参考性的页面或者产品
你至少得把一些触发效果前，和触发后的页面分别制作出来，让前端不至于自己去猜想。
在自作之前，你如果不清楚这种效果对方是否有能力实现，最好先沟通后再做图，否则会进退两难。
H. 前辈们 刚刚自学前端老师给了我一个图叫我百分百还原改怎么做
这个没有用到图的地方不需要切图，你用ps打开这个设计稿，然后测量这个宽度啊，高度了，边距啊，三角形的大小啊，等等，然后进行布局和css样式的修饰。把这个做出来就行了，像素最好不要有差别，但是一般可以允许1到2像素的误差。最好还是百分百还原，你现在刚开始学习主要是让你掌握你说的基础样式 选择器 宽高 边框 外边距 内边距 贴图之类的知识点。所以你就把能用的尽量都用到就可以了。