前端视角(前端效果图)

本文主要介绍前端透视图(前端效)，下面跟着东辰网详细了解一下吧。

作为一名设计师，尤其是UI设计师，请跟我一起大声念:你必须掌握前端的图纸裁剪流程！！这可能意味着你必须学习HTMLCSS，或者花很长时间与IOS或Android开发者讨论他们如何在屏幕上排列图片和文本。唐不要总是抱怨如何通过设计来学习代码农业。设计师对这些看似深奥的源代码有着本能的恐惧和厌恶。无论你的公司在项目人员配备方面考虑得多么周到，如果你不。;不要自己掌握这些知识点。;不要期望最终的实现环节会顺利结束，因为你和程序员是不对称的。;这是矛盾和偏差的根源。

让让我们举个例子:

比如你设计了这样的风格，倾斜，层叠。在设计过程中有没有考虑过这样设计的后果(请不要国内外不加入本专)？看起来你在当前宽度画布上的设计效果还不错，注定是一个填满浏览器显示区域的设计，但是放大后呢？1920的宽度下该怎么办？一定要这样吗？？

因为你可以。;t直接在横线上延伸平铺设计，在前面部分，你怎么能要求开发商帮你填补这两个区域的空白呢？你不t从设计之初就不知道对应设计类型下应该创建的画布大小(全屏响应式设计要准备两个或两个以上的)，所以我已经能弥补我进入剪图环节时你和开发者如何撕毁的盛况了。

再者，如果我们填这个设计稿(咳咳，大致填一):

这些用红线框住的没有内容的背景区域最后是怎么出现的？有几个主要的倾斜图形，上面叠加了相应的内容、图片、文字、语境。唐不要指望前端设计师能轻松实现。如果你用背景图片填充它们，你能控制这个背景图片的大小吗？装货过程需要多长时间？选择连续or优化以W《ios安卓设计标准规范》《iPhoneAPP设计规范/iPad》《基础知识学起来！为设计师量身打造的DPI指南》三世。制定项目设计规范。这也是提高效率和整体视觉和谐的关键点。你要在大框架下建立一个小体系，这是展现你个性的部分。记得用文档记录下来。在以后的修订和开发过程中，严格遵守规范的参数，降低沟(s)和通信(b)的成本。

比如:主色值，按钮的大小边框，每种文字类型的颜色大小，模块之间的距离等等。

请看这个:@souhlin收集的设计规范(图7)_花瓣UI交互设计

第四，学会切图。我一直认为，把PSD或者草图文件做完，扔给开发方来完成任务，是相当不负责任的。由于设计不合理，很难导出切割图。因为你的，开发效率降低完全是因为你的失误。唐不要抱怨，不要找任何借口。

比如如何优化水平平铺背景的导出？Android适应多屏分辨率，九分图怎么标注拉伸，要用什么工具？需要应用背景透明的图片。你知道用什么格式吗？你一定要设计出你能独立剪图的设计稿，然后要求开发完全实现，而不是让他们来找你抱怨(s)做不到的事情你还要重做。

第五，一定要有注解，说明注解有多重要。开发者没有耐心去检查和测试元素的间距和文本大小以及透明元素的参数设置(是的，大多数情况下会以——为准！！有感觉！！睡觉)，如果你不不要把这些文件做成白纸黑字，那么这个最重要的还原环节出错的机会最多，以后修改起来也最困难。

推荐以下两个软件:

Markeelpixelch——Invision在线原型工具这里强烈推荐。

Invision可以制作应用程序和网站，并共享远程连接，以便在手机和其他计算机上预览。下面是我以前做过的一个小项目的例子(最好才能更快地访):

门户——InVision

或者PS玩，详情请访问官网。也是一款可以在移动设备上直接查看设计文档的工具，但更适合在设计过程中使用，不过你不妨在最后做一个对比。

参见《腾讯ISUX移动终端设计神器：PsPlay！移动设计零阻力》的教程。

还有儿童的鞋的MAC，使用素描和。;我赢了这里就不赘述了，还有最近风头正劲的设计软件。

参见《想要一稿过不加班？Sketch绝配神器Mirror抢先体验》的教程。

好了~一下午打了这么多内容，还有砖要搬~~还有很多内容没时间放上来。稍后我会更新一下，有很多遗漏。欢迎指正。说了这么多，我想告诉所有做UI设计的新手，可以正确的分析问题，从自己的知识和能力去看待问题。我们和程序都是项目的执行者，需要磨合，互相帮助，共同输出产品。当对方s成绩不尽如人意，请先反思以上几点，再与对方讨论，这样不仅能给自己带来进步，也能为团队节省更多时间。

请大家一起为更好的产品而努力！！

——————————————分割线————————————————echo14

@谁富士山下的s:完成了视觉稿的定稿和审核，并不代表视觉工作已经完成。视觉定案只是视觉工作进度的75%，直到后期视觉还原上线才能算100%完成。

我跟踪了一些W测试的不同状态页面，很可能在上线后才发现某些页面的视觉还原存在重要问题。此外，您需要耐心地将检测到的可视化BUG写入文档并提交给技术部门。视觉bug多的时候可能写几十个，够半天了。It不耐烦真的不好。

作为一名设计师，尤其是UI设计师，请跟我一起大声念:你必须掌握前端的图纸裁剪流程！！这可能意味着你必须学习HTMLCSS，或者花很长时间与IOS或Android开发者讨论他们如何在屏幕上排列图片和文本。唐不要总是抱怨如何通过设计来学习代码农业。设计师对这些看似深奥的源代码有着本能的恐惧和厌恶。无论你的公司在项目人员配备方面考虑得多么周到，如果你不。;不要自己掌握这些知识点。;不要期望最终的实现环节会顺利结束，因为你和程序员是不对称的。;这是矛盾和偏差的根源。

让让我们举个例子:

比如你设计了这样的风格，倾斜，层叠。在设计过程中有没有考虑过这样设计的后果(请不要国内外不加入本专)？看起来你在当前宽度画布上的设计效果还不错，注定是一个填满浏览器显示区域的设计，但是放大后呢？1920的宽度下该怎么办？一定要这样吗？？

因为你可以。;t直接在横线上延伸平铺设计，在前面部分，你怎么能要求开发商帮你填补这两个区域的空白呢？你不t从设计之初就不知道对应设计类型下应该创建的画布大小(全屏响应式设计要准备两个或两个以上的)，所以我已经能弥补我进入剪图环节时你和开发者如何撕毁的盛况了。

再者，如果我们填这个设计稿(咳咳，大致填一):

这些用红线框住的没有内容的背景区域最后是怎么出现的？有几个主要的倾斜图形，上面叠加了相应的内容、图片、文字和上下文。唐不要指望前端设计师能轻松实现。如果你用背景图片填充它们，你能控制这个背景图片的大小吗？装货过程需要多长时间？选择连续or优化以W《ios安卓设计标准规范》《iPhoneAPP设计规范/iPad》《基础知识学起来！为设计师量身打造的DPI指南》三世。制定项目设计规范。这也是提高效率和整体视觉和谐的关键点。你要在大框架下建立一个小体系，这是展现你个性的部分。记得用文档记录下来。在以后的修订和开发过程中，严格遵守规范的参数，降低沟(s)和通信(b)的成本。

比如:主色值，按钮的大小边框，每种文字类型的颜色大小，模块之间的距离等等。

请看这个:@souhlin收集的设计规范(图7)_花瓣UI交互设计

第四，学会切图。我一直认为，把PSD或者草图文件做完，扔给开发方来完成任务，是相当不负责任的。由于设计不合理，很难导出切割图。因为你的，开发效率降低完全是因为你的失误。唐不要抱怨，不要找任何借口。

比如如何优化水平平铺背景的导出？Android适应多屏分辨率，九分图怎么标注拉伸，要用什么工具？需要应用背景透明的图片。你知道用什么格式吗？你一定要设计出你能独立剪图的设计稿，然后要求开发完全实现，而不是让他们来找你抱怨(s)做不到的事情你还要重做。

第五，一定要有注解，说明注解有多重要。开发人员没有耐心检查和检测元素的间距和文本大小以及透明元素的参数设置(没有错了，在大多数情况下，——会依赖它！！有感觉！！睡觉)，如果你不不要把这些文件做成白纸黑字，那么这个最重要的还原环节出错的机会最多，以后修改起来也最困难。

推荐以下两个软件:

Markeelpixelch——Invision在线原型工具这里强烈推荐。

Invision可以制作应用程序和网站，并共享远程连接，以便在手机和其他计算机上预览。下面是我以前做过的一个小项目的例子(最好才能更快地访):

门户——InVision

或者PS玩，详情请访问官网。也是一款可以在移动设备上直接查看设计文档的工具，但更适合在设计过程中使用，不过你不妨在最后做一个对比。

参见《腾讯ISUX移动终端设计神器：PsPlay！移动设计零阻力》的教程。

还有儿童的鞋的MAC，使用素描和。;我赢了这里就不赘述了，还有最近风头正劲的设计软件。

参见《想要一稿过不加班？Sketch绝配神器Mirror抢先体验》的教程。

好了~一下午打了这么多内容，还有砖要搬~~还有很多内容没时间放上来。稍后我会更新一下，有很多遗漏。欢迎指正。说了这么多，我想告诉所有做UI设计的新手，可以正确的分析问题，从自己的知识和能力去看待问题。我们和程序都是项目的执行者，需要磨合，互相帮助，共同输出产品。当对方s成绩不尽如人意，请先反思以上几点，再与对方讨论，这样不仅能给自己带来进步，也能为团队节省更多时间。

请大家一起为更好的产品而努力！！

——————————————分割线————————————————echo14

@谁在富士山下:测试的不同状态页面，很可能在上线后才发现某些页面的视觉还原存在重要问题。此外，您需要耐心地将检测到的可视化BUG写入文档并提交给技术部门。视觉bug多的时候可能写几十个，够半天了。It不耐烦真的不好。

了解更多前端透视图(前端效果)相关内容请关注东辰网。