现在hen多小年轻们喜欢kan追波上大神们的动效， 于是设计的时候光静态稿件不甘心，也来Zuo个AE特效玩玩，压根没有考虑IOShuo者安卓在实现这样的效果时需要哪些运行机制，有没有这样的控件支持，会不会不流畅等等！自己用了一整晚的时间搞了个这么酷炫高大上的动画，开发这些土鳖居然告诉我不Neng实现恩？？撕逼ING.........，何苦呢？

后来啊对比调适

再普遍点的， 是不是每次前端开发完你发现绝大多数元素和字体dou不对，没有对齐，大小加粗等细节没有注意，dan是开发拿设计稿就是没办法100%实现的借口的来搪塞你？？

熟悉设计环境规范

下面推荐两软件：

再者， 假如我们填满这个设计稿：

好了~一下午打了那么多内容，还有砖要去搬了~~还有hen多内容没空放上来以后一点点geng新，hen多疏漏之处，欢迎指正。说了这么多，就是要告诉suo有ZuoUI设计的同行新手们，Neng正确的分析问题，从自身的知识Neng力出发来kan待问题。我们和程序dou是项目的施行人， 需要相互间的磨合和协助共同输出产品，在对方的后来啊不尽人意时请先从上面的几个点力反思，自己有哪些不足，再和对方讨论，这样不但给自己带来进步，也为团队节省geng多的时间。

比方说：主色色值、按钮的大小边框、各文字类型颜色大小、模块间隔距离等等。

标注的作用何其重要， 开发人员dui与元素的间距和文字大小还有透明元素的参数设置，是没有耐心一点点查kan和检测的， 原来小丑是我。 你不好好把这些制作成文件白纸黑字，那么这个Zui重要的还原环节上出差错的几率也是Zui多的，往后修改Zui困难的。

掌握前端切图流程

操作一波。 先说说,作为一个设计师,特bie是UI设计师,请跟我一起大声念:必须掌握前端切图流程!!无论你所在的公司在项目人员配置上如何贴心到位,但如guo你自己没有掌握这些知识点,就不要妄想再说说实现环节上Neng顺利收尾,主要原因是你从出发点开始和程序员的认知就不对称,这些不对称是矛盾和偏差的根源。.这也是提升效率和整体视觉和谐感的重点,你要在大框架下建立小体系,这是你展示自己个性的部分， 记得也要用文档记录下来在以后的改版和开发过程中，严格遵守规范的参数，减少沟通成本。

请kan这个：@souhlin采集到设计规范_花瓣UI 交互设计

重点

主要原因是在水平线上无法直接延伸平铺的设计， 在前端部分你让开发人员怎么帮你填补这两个区域的空白，你从设计初就不知道在对应设计类型下应该创建的画布大小，那进入切图环节我Yi经Neng脑补出你和开发人员是怎么撕逼的盛况了。

知乎问题：视觉设计师是怎样让前端工程师 % 实现设计效果的？

比方说WEB设计下 12PX以下的中文字体无法被正常显示，文本只支持本地客户端Yi有字库，IOS的TABBAR、TOPBAR等高度是不Neng被随意变geng任意增减层级等等。这样的稿子如guo被交付，并没有强有力的逻辑说服别人，只会让你的团队感受到你的不专业，增加矛盾隐患。SO， 好好kankan这些文章：

高保真原型

一定要有标注说明

掉链子。 我觉得重要的还是多沟通吧,让你的想法Neng够被前端理解。主要原因是网页和设计稿不一样,有些效果是实现不了的， 比如一些文字,颜色,阴影等,...

简介:此文档是guan与视觉设计师怎样让前端100实现设计效果的docx文档,编号为102963003,其中主题是guan与专业资料、行业资料的内容展示

欧了！ 先说说,作为一个设计师,特bie是UI设计师,请跟我一起大声念:必须掌握前端切图流程!!这可Neng意味着你得学会HTML+CSS,huo者要长时间和IOShuo者安卓...

设计前请审核原型

比如水平可平铺的背景是怎么Zui优化导出的？安卓适应多屏幕分辨率下点九图是怎么进行标记和拉伸的，应该使用什么工具？需要应用透明背景的图片知道应该使用什么格式？你必须设计出自己独立也Neng完成切图工作的设计稿， 再要求开发Neng够完整实现，而不是让他们又来找你抱怨哪里哪里是不行的你得重Zuo，公正地讲...。

markman：index.title

huo者PSPLAY， 这个请访问官网kan详情，也是可yi在移动设备直接查kan设计文件的工具，不过geng适合设计过程中使用，但不妨的时候Zuo对比

乱弹琴。 下面是知乎用户的回答，小编觉得hen多价值，感兴趣的读者可yikan一kan，领悟一下。

来一波... 用它们Zuo出详尽的标注文件，交付开发，再说说如guo出现偏差，就有凭据可yi找出是谁的问题了。

如guo开发计划Yi指定,一边研发人员也认可交付时间点,那么在开发任务内的计划,视觉设计师撒泼打滚躺地卖萌,晓之以情动之以理,怎么打动前端工程师,网上也有hen多同仁的经验技巧,总是Neng实现的.，冲鸭！

三、 语言转化 将视觉语言转化为开发语言,每个人对形体的观感是不同的,设计师hen 躺平... 多接受过美术方面训练,对造型的比例有一定认知,可yi感觉细微的视觉差异,但不...

在这里强烈推荐——Invision在线原型工具，呃...

Free Web & Mobile Prototyping and UI Mockup Tool

开发完成视觉部分内容以后要开始校对，那么尽可Neng给出参照物，参照物是什么呢？

不错。 这也是提升效率和整体视觉和谐感的重点， 你要在大框架下建立小体系，这是你展示自己个性的部分，记得也要用文档记录下来在以后的改版和开发过程中，严格遵守规范的参数，减少沟通成本。

这可Neng意味着你得学会HTML+CSS，huo者要长时间和IOShuo者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么Neng去学码农的东西，设计人员对这些kan似高深的源码有本Neng的畏惧和厌恶。无论你所在的公司在项目人员配置上如何贴心到位， 但如guo你自己没有掌握这些知识点，就不要妄想再说说实现环节上Neng顺利收尾，主要原因是你从出发点开始和程序员的认知就不对称，这些不对称是矛盾和偏差的根源。

前人Yi经栽好了树，你需要Zuo的就是在既定框架内完成设计即可。你要牢记自己的设计是基于相应的运行环境的， 没有足够的Neng力前，不要有认为这套体系下的设计douhen“土”，你是一个要成“大神”的男人，打破限制和规范是你的嗜好和品位。如有以上想法，请对着镜子里的自己说：Navie，我晕...！

再类似这样的案例：

传送门——Ps Play – 移动设计零阻力

这也行？ 主要原因是在水平线上无法直接延伸平铺的设计,在前端部分你让开发人员怎么帮你填补这两个区域的空白,你从设计初就不知道在对应设计类型下应该创建...

无论是WEB还是IOS、 安卓、WP等等，dou有对应的设计规范文档，我下面会帖出来。如guo连Zui基础的设计规范dou不知道就开始Zuo设计，那么你要自己承担项目拖延和被整个开发组人员问责的后果。在你动手前，请好好的Zuo完功课，bing且在每次环境大升级时跟进关注，调整一下。。

撕逼ING……… 再普遍点的， 是不是每次前端开发完你发现绝大多数元素和字体dou不对，没有对齐，大小加粗等细节没有注意，dan是开发拿设计稿就是没办法100%实现的借口的来搪塞你?? 下面就来讲重点~~~ 一、设计前请审核原型 在原型步骤就想好对应的图层结构，交互特效，并和开发人员Zuo好交流，是否可yi实现，醉了...

这些没有内容被红线框出的背景区域再说说怎么呈现出来？这里面几个主要的倾斜图形上面还叠加了对应内容、 图片、文字，还有前后关系，别指望前端设计人员Neng轻松实现， 尊嘟假嘟？ 如guo你用一张背景图填充，那这张背景图的大小控制得住？加载过程要多久？导出WEB用途格式图片是选择“连续”还是“优化”？

让我们来举举例子：

先说说 作为一个设计师，特bie是UI设计师，请跟我一起大声念：必须掌握前端切图流程！！

传送门——InVision

我满足了。 在原型步骤就想好对应的图层结构， 交互特效，并和开发人员Zuo好交流，是否可yi实现，功Neng的评估一定要细致，否则会浪费大量的人力成本。还有原型是挺严肃一玩意儿， dan是大多数团队huo者设计dou没有认识到它们的价值，在这里不展开原型的细节了这还可yi再写一个长评，你们懂意思就好拉，画在纸上的手稿也比没有强。

制定项目设计规范

来日方长。 ios&安卓设计标准规范 iPhone APP设计规范/iPad

只有同意平台下可运行的高保证原型可yiZui直观对比设计到实现之间有什么偏差，并以此检查参数设置上的错误，逐个调整，切记...。

对吧，你看。 比方说你设计了这么个样式，倾斜、层叠，你有没有在设计的过程中考虑过这么设计的后果？你在当前宽度画布中设计效果似乎还不错，这注定该是个填满浏览器显示区域的设计，dan是放大后呢？1920宽下怎么办，难道得是这个模样？？

pixcook:FancyNode - PxCook

UI设计师不仅要擅长视觉设计,还需要掌握前端技Neng,以确保设计在实现过程中Neng够。本文将揭秘UI设计师必备的前端技Neng,帮助设计师从设计到实现实现完美蜕变。 中肯。 .Photoshop:用于视觉设计,UI设计师需要掌握图层、路径、选区、色彩调整等基本操作。

问题补充：发现自己设计的app和网页，在前端显示总是和设计效果偏差hen远。和工程师沟通却说不可Neng100%呈现的，但其实吧80%dou没达到。想了解下各位设计界的前辈是怎么Zuo的，才Neng让前端显示尽量和设计效果一致，走捷径。。

可yi制作APP和WEBSITE， 并分享远程连接在手机和别的电脑上预览， 一言难尽。 下面放我之前Zuo过一个小项目的实例：

下面放我自己平时Zuo的原型：

擦！！突然发现一些收藏不见了~~后面慢慢geng，人间清醒。

我一直认为Zuo完PSD还是SKETCH文件， 往开发那边一扔，任务搞定的想法，是相当不负责任的一种行为。主要原因是设计不合理的部分导致导出切图的工作变困难， 因你的烂摊子，开发效率降低，wan全是主要原因是你的失误，不要抱怨和找ren何借口，可不是吗！。

为设计师量身打造的DPI指南

传送门——Bohemian Coding

基础知识学起来！