更多最新文章相关作者文章搜狗：感谢您阅读UI 设计师是怎样让前端工程师100%实现设计效果的？ 本文版权归原作者所有，本文由网友投递产生，如有侵权请联系 ，会第一时间为您处理删除。UI 设计师是怎样让前端工程师 100% 实现设计效果的？ - 简书
UI 设计师是怎样让前端工程师 100% 实现设计效果的？
参考来源：知乎
庖丁开发整理编辑
设计师跟程序员那些恩怨情仇（基友情）是永恒不变的话题。很多设计师总是埋怨前端做出来的效果跟自己想象中的相差甚远，其实这是一个创新能力以及跟进还原的问题。今天我们就来说说设计师在实际工作中应该怎么做才能让前端工程师尽可能 100% 实现设计效果。
前期：多方沟通确认
丨原型很重要视觉定稿前的沟通很依赖原型，在正常的项目管理中，视觉稿除了要给产品、策划确认之外，还需要和技术沟通确认。因为设计师天马行空的大脑会迸发出各种奇思妙想，例如一个看起来酷炫的动画，结果跑到工程师面前，工程师很犯难的表示做不了，或者硬着头皮做到最后也发现不尽人意。
所以在原型步骤就要想好对应的图层结构，交互特效，并和开发人员做好交流，是否可以实现，功能的评估一定要细致，否则会浪费大量的人力成本。
丨熟悉设计环境规范在这里提到设计环境是因为如果你的原型不遵循设计规范，那就没有沟通可言。无论是 Web 还是 iOS、安卓等等，都有对应的设计规范文档，如果连最基础的设计规范都不知道就开始做设计，那么你要自己承担项目拖延和被整个开发组人员问责的后果。所以在你动手前，请做好功课，并且在每次环境大升级时跟进关注（例如新的 iPhone6、6+发布的尺寸变更等）。
举个例子，在Web设计下，12 PX以下的中文字体无法被正常显示，文本只支持本地客户端已有字库，iOS的 Tabbar、Topbar 等高度是不能被随意变更任意增减层级等等。这样的稿子如果被交付，并没有强有力的逻辑说服别人，只会让你的团队感受到你的不专业，增加矛盾隐患。
遵循设计规范设计
中期：制定明确的项目设计规范**
前期的视觉稿和项目组相关的上下游确认后，就该做一份详细的视觉规范和页面标注了。视觉规范可以理解成视觉和技术之间的书面沟通，越是复杂的大型项目就越需要一份视觉规范。原因有二，其一是大型项目会有好几个技术来同时实现页面，视觉规范可减少沟通成本；其二是详尽有效的视觉规范可以标出细致的视觉状态供技术参考。
这里推荐一种知友@匡雪婷的做法：
用2个页面解释布局，再用1个页面解释样式
视觉稿完成后，每一个页面拿出来放在左边，再用三个画板来说明它。
横向布局：解释元素左右的外间距、内间距和横向宽度。（这里要考虑到针对不同宽度屏幕的适配，标注是给固定值还是百分比）
纵向布局：解释元素的上下间距和高度。（有时要确保页面里最重要的信息——比如一个 CFA btn——在不同屏幕大小中是否都出现在了首屏，判断标注是向上定位还是向下定位 ）
视觉样式：字体、字号、行高、颜色、透明度、圆角。
单独拎出可复用的组件，统一标注
至于标注说明更是必须的，统一标注的好处不仅是我们自己在后续的设计中可以复用和遵守， 对于 web/iOS/Andriod 的工程师而言，也能提高代码效率同时保持不同平台最终效果的统一，后续迭代的时候也不会出现莫名其妙的样式和代码。
市面上有很多插件可以帮助设计师实现标注，为避免广告嫌疑这里不做推荐，感兴趣的朋友可以自行了解或者来后台跟丁丁讨论交流心（ren）得（sheng）。
后期：还原跟进、反复验收
开发完成视觉部分内容以后，就要开始校对，这时候就需要尽可能给出参照物，这个参照物就是你的高保真原型。对着高保真原型还原跟进最重要的是要有细心和耐心，视觉设计师的细心程度要达到像素级才能高度还原，如果你不够细心，每个页面都有一些元素偏移几个像素，那全部页面会有很多出入。如果你不够细心在测试环境下逐一测试不同的状态页面，那很可能到上线后你才发现有些页面的视觉还原有重要的问题。
综上，「跟进还原能力」对一个设计师来说是很重要的，会做「好看」的设计师 dribbble 上一抓一大把，但能做好商业设计，所需的能力远远不止于此，一个不具备将事情由始至终合格完成的设计师在任何时候都是不及格的，从结果导向上来看，甚至不如一个「你认为比你低级很多」的设计师，拥有全方位的素质才是「稀缺物种」。
最后，想了解产品整个开发流程的朋友可以回复「庖丁开发」公众号「流程」俩字，丁丁带你全面了解瀑布流开发模式与敏捷开发模式分别是怎样的。另外「庖丁开发」每天晚上十点跟大家分享产品、设计、开发的干货（偶尔逗逼~），欢迎拍砖。
简书、微信公众号同名作者。专注于互联网软件项目，为客户提供需求梳理、产品原型、UI 设计、软件...视觉设计师是怎样让前端工程师 100% 实现设计效果的 - 简书
视觉设计师是怎样让前端工程师 100% 实现设计效果的
专栏里正好写到这个话题，总结起来就是：1）做好标注 2）准备好素材 3）和工程师互相信任达成共识。下面先说如何 做一份让工程师泪流满面的标注在搬着小板凳坐工程师 buddy 旁边送果汁送零食的日子里，我受
的启发，折腾出一套自认提高双方沟通效率的标注规则，心情挺好还为此做了模板，最下面有源文件的下载地址。
是的我曾经也很寄希望于 ，参与第一批内测后就写了长长的自带说明配图的邮件给他们，期待 1.0 的发布，那就可以解决我这篇文章里写的所有问题了，以下内容大家就不用看啦。论偷懒工具的重要性啊盆友们……想起昨晚看见
为什么传统的标注方法让人难受？没错，Markman 是传说中的标注神器，看起来也确实方便快捷，但是当一个页面中，要同时标注间距、大小、颜色和字号时，过多的信息一齐扔给工程师，就会让人有些抓狂。比如这样：
这里的标注虽然都有清晰的箭头指示，但却并不具有视觉逻辑，或者说呈现出来的视觉逻辑并不符合开发逻辑。工程师在搭建一个页面的时候，会先去架构布局，一块内容一块内容划分好，接着填充进内容，最后来修改视觉的样式。那么我们也应该按照顺序，先告诉人家每个模块的间距啦大小啦，再告诉人家用什么字体和颜色，也就是先有布局标注，再有样式标注。用2个页面解释布局，再用1个页面解释样式
这就是我的做法，视觉稿完成后，每一个页面拿出来放在左边，再用三个画板来说明它。横向布局：解释元素左右的外间距、内间距和横向宽度。（这里要考虑到针对不同宽度屏幕的适配，标注是给固定值还是百分比）纵向布局：解释元素的上下间距和高度。（有时要确保页面里最重要的信息——比如一个 CFA btn——在不同屏幕大小中是否都出现在了首屏，判断标注是向上定位还是向下定位 ）视觉样式：字体、字号、行高、颜色、透明度、圆角。
标注信息分类之后，我还会给标注本身设置共享样式：块面通常用蓝色的遮罩，区别不同百分比时则用红黄绿的遮罩，数字间距用红底白字，视觉样式则用蓝底白字，这样的好处是：对与设计师，可以快捷修改所有标注样式；对于工程师，快速建立对这套标注视觉语言的认知，明白不同颜色所代表的信息属性，更方便的找到他所需要的信息。单独拎出可复用的组件，统一标注
设计实现之前，就和工程师们一起统一一套样式规范，除了常见的颜色和字体之外，我还会把通用的 UI 组件拿出来，一半是针对系统原生控件的样式定制（alert/toast/radio btn/switch…），一半则是完全自定义的 UI 组件（产品自己的 UI kit）可以是任何会高频复用的产品功能性的东西，比如这里的 SKU 选择器和按钮。在项目进程中，我甚至会和工程师们沟通好，然后在每个组件旁写上这个组件是谁正在实现或已经实现，附在项目共享文件或者邮件里，避免重复劳动。统一标注的好处不仅是我们自己在后续的设计中可以复用和遵守， 对于 web/iOS/Andriod 的工程师而言，也能提高代码效率同时保持不同平台最终效果的统一，后续迭代的时候也不会出现莫名其妙的样式和代码。如果遇到产品的大版本更新，也正好趁此机会和工程师们一起好好梳理一遍现有的样式，清除掉不再使用的样式，指定好新的层级。DOs & DON’Ts始终遵循，视觉逻辑符合工程师的开发逻辑。合理划分，再复杂的页面，用三步也足够能说清楚，信息不要挤在一起。考虑到页面在不同屏幕大小下的变化，间距是否固定，比例是否缩放，图片和按钮宽度是否自适应。任何细节和要求都写清楚写清楚，写，清，楚，不要指望任何人“意会”你的设计，任何决定都要有据可查。每一个标注本身也要注意对齐方式，更干净整洁的标注能让大家一眼找到所需。
好了，看完之后大概会有人吐槽说有必要么这样的标注多浪费时间啊，那么请去看看，get it? 就是要追求极致啊（仰天……在做标注的过程中，你会再次仔细审视自己的设计，总会发现之前被忽略/没考虑周全的细节，比如间距字号颜色是否遵守了统一的规则，比如不同屏幕大小如何适配。耍聪明会偷懒的话，shared style 设置好，插件快捷键背好，能复用的样式提炼出来，你便会发现，虽然投入到标注的时间增加了30%，但是和工程师后期反复沟通的时间减少了80%。他们如果第一次拿 demo 给你看，你还会惊喜的发现有很高的视觉还原度，个别小细节微微调整就好了。大家都讨厌改改改，一次通过多有成就感呢。
最后，这次模板是我自己的一个 redesign concept， 基于，（一家 base 在 Brooklyn 的工作室，手工制作非常有爱的铭牌、项圈等动物饰品）图片素材全部源自其网站和 Instagram，不得转载。至于我的源文件，大家随便用，I don’t give a fuck.
当然，这是一套还不够严谨不够科学的自创标注，设计师盆友们，特别是工程师盆友们！觉得有任何值得改进的地方请随时跟我讨论~ help me improve : PHappy designing~
这是我自己最常用的两个 Sketch 插件：— 目前最好用的标注插件 — 主打功能是帮你自动生成设计稿中的 style guide，但最好用的却是可以智能选择页面中统一样式的文本和图形
记得在 Github 上给作者小星星哟~}