视觉设计与前端开发(视觉中国前端)

本文主要介绍视觉设计与前端开发(视觉)，下面跟着东辰网详细了解一下吧。

这是一个经常被讨论的问题创新设计的跟进和修复能力。这是一个商业设计师而非艺术家的两个技能要素，同等重要，缺一不可。甚至在很多情况下，后者会有更大的力量。毕竟我们还是要做一个商业化的产品，而不是概念稿。这是可以在任何在职商业设计师的能力模型中都不可忽视。

开始，效果实现的难度。设计师s想象力丰富的大脑会想出各种奇思妙想，比如一个看起来很酷的动画。结果，工程师很迷惑，说他可以t做，或者他硬着头皮最后发现不满意。所以前期沟通难度是很有必要的。在很多情况下，酷炫的效果并不是拯救设计的唯一方法。相反，大多数时候我更喜欢用简单的方法解决问题。炫酷的效果往往不是必须的，而是锦上添花，需要量力而行。

第二，随时明确规格，不要不要低估规范的力量。我经常喜欢刚入行的时候不做某段时间的规范，直接搬个凳子给开发工程师指指点点(还好我跟开发关系好，玩的好，不然可能死了，活到今)。看似很有效率，但这种效率只适合单打独斗，涉及团队合作。当几个设计师面临几个甚至更多的发展时，规范的力量就变得充分了。

规格说明书的编写要让开发者尽量少思考，比如唐不要让我思考。唐不要让开发人员花太多精力去理解规范。规格可以越蠢越好。举个例子，如下:

我见过太多设计师标注规格如右图。实际上图片的实际画布大小就是左边蓝框的范围，所以标注规格的时候一定要如左图所示，不然开发者又要重新测量你的空白像素了。

包括在不同的情况下标注不同的规格(doc)，或者在备注栏中告知展开排列(比如控制边距，横向均匀排)。

第三，语言转换将视觉语言转换为开发语言。每个人对身体的感知是不同的。很多设计师都接受过美术培训，对造型比例有一定的了解。他们能感受到细微的视觉差异，但这并不意味着你可以要求发展学生像你一样。在过去的工作经验中，你经常会听到以下对话:

天啊，这两张图完全不一样。你怎么能让他们变成这样？不一样吗？我看起来几乎一样。你瞎了。你可以我看不出有这么明显的区别。。。」

因此，需要对语言进行转换，使开发者能够容易理解，将抽象的感性内容转化为可量化的有理数。比如通过开发来观察动画的轨迹几乎是不可能的，所以你需要转换你的语言，让开发更容易理解。

第四，反复验收每个节点都要验收。反复接受可以让你及时。了解最新动态，有问题及时反馈变化。即使你做到了以上几点，开发者也可以不能完全理解你想表达的内容，所以需要非常频繁地同步信息，而不是做得七七八八。突然发现这里不对劲，然后我就改。时间可能不够。另外，只有做到以上几点，你才能对发展充满信心和责任感，否则，你怎么还有脸去找别人s理论？

综上所述，我相信你已经充分理解了跟进和恢复的能力给一个设计师。有很多设计师可以成为好看在世界上，他们有很多技能来做好商业设计。需要的能力远不止这些。一个没有能力把事情从头到尾做完的设计师，随时都会失败，而且从结果导向来看，比一个自认为比你低很多的设计师还要惨。

——————————我是分割线——————echo0

另外，我附上@的建议丫丫丫丫丫(博客)。

这个问题实际上有两个作用和一个目标:

角色一:视觉设计师角色二:前端工程师(想必Web前端和iOS、Android开发也在)目标:100%还原设计效果。

首先，让我们s看这个目标设定是否靠谱，但是要看这个目标是否靠谱，需要看依赖条件。如果前端工程师不够好，itit’除了提高他的水平之外，试图100%还原设计效果是没有用的。所以我下面说的默认是前端工程师有足够的执行能力。如果能力足够，不能达到设计效果，可能是以下原因:

设计不合理，考虑不周。时间紧或不愿意达成沟通不到位。

不合理的设计上面提到的角色1是视觉设计师。一般来说，视觉设计师利用视觉符号来传达设计的各种信息。纵观各种岗位职责，并没有严格要求视觉设计师具备HTML/CSS/JavaScript技能。事实上，大多数视觉设计师都不会。;不知道技术，比如CSS盒子模型，浮动，绝对定位和相对定位，如果...其他...然后。这是客观情况。如果视觉设计师具备这些知识和技能，自然可以避免一些问题，但是术业有专攻，不能强求。

除了提高你的知识，还有其他方法:

设计审查。当我还是一个交互原型的时候，我邀请了请技术经理和R。

所以当我们团队做一些设计咨询项目的时候，我们会引入技术人员。

如果沟通不到位，把地图剪下来，做好标记。

使用对方能理解的语言。如前所述，很多视觉设计师没有技术基础，但是了解一些术语对于和程序员交流是非常有效的。比如有很多动态效果。你说从这里到那里和稍微慢一点时间长了，而且可能很难达到你想要的效果。但是如果你说，这个动画的张力值，摩擦力(Frictio)值，什么是三次贝塞尔函数，那程序员就更好理解了。

可以参考这个网站找到很多动画效果的名字:形式服从功能。

继续跟进。设计完成后，你可以不要忽视它。代码写完后，你可以自豪地说哦，它没有我不能按照我的设计工作。它也是设计师s的责任是保证设计效果的实现，并建立Bug文档，映射对比，描述清楚，因为不是每个人都是像素眼，对美的理解是不一样的。

总结流程:沟通设计审核交付设计图纸再次沟通跟进。

每份工作都不像看起来那么简单。设计不仅仅是一个为了让东西看起来更好而画画的人。程序员不t只是写代码(在我们团队的一些项目中，很多不合理的设计都被程序员指出来)。最重要的是相互沟通和理解。

其实我建议这个问题的措辞可以修改一下。什么是如何让前端工程师100%达到设计效果？这不仅仅是前端工程师的工作，不是如何让人们实现它，但是如何合作。

这是一个经常被讨论的问题创新设计的跟进和修复能力。这是一个商业设计师而非艺术家的两个技能要素，同等重要，缺一不可。甚至在很多情况下，后者会有更大的力量。毕竟我们还是要做一个商业化的产品，而不是概念稿。这是可以在任何在职商业设计师的能力模型中都不可忽视。

开始，效果实现的难度。设计师s想象力丰富的大脑会想出各种奇思妙想，比如一个看起来很酷的动画。结果，工程师很迷惑，说他可以t做，或者他硬着头皮最后发现不满意。所以前期沟通难度是很有必要的。在很多情况下，酷炫的效果并不是拯救设计的唯一方法。相反，大多数时候我更喜欢用简单的方法解决问题。炫酷的效果往往不是必须的，而是锦上添花，需要量力而行。

第二，随时明确规格，不要不要低估规范的力量。我经常喜欢刚入行的时候不做某段时间的规范，直接搬个凳子给开发工程师指指点点(还好我跟开发关系好，玩的好，不然可能死了，活到今)。看似很有效率，但这种效率只适合单打独斗，涉及团队合作。当几个设计师面临几个甚至更多的发展时，规范的力量就变得充分了。

规格说明书的编写要让开发者尽量少思考，比如唐不要让我思考。唐不要让开发人员花太多精力去理解规范。规格可以越蠢越好。举个例子，如下:

我见过太多设计师标注规格如右图。事实上，图片的实际画布大小。就是左边蓝框的范围，所以标注规格的时候一定要如左图所示，不然开发者又要重新测量你的空白像素了。

包括在不同的情况下标注不同的规格(doc)，或者在备注栏中告知展开排列(比如控制边距，横向均匀排)。

第三，语言转换将视觉语言转换为开发语言。每个人对身体的感知是不同的。很多设计师都接受过美术培训，对造型比例有一定的了解。他们能感受到细微的视觉差异，但这并不意味着你可以要求发展学生像你一样。在过去的工作经验中，你经常会听到以下对话:

天啊，这两张图完全不一样。你怎么能让他们变成这样？不一样吗？我看起来几乎一样。你瞎了。你可以我看不出有这么明显的区别。。。」

因此，需要对语言进行转换，使开发者能够容易理解，将抽象的感性内容转化为可量化的有理数。比如通过开发来观察动画的轨迹几乎是不可能的，所以你需要转换你的语言，让开发更容易理解。

四、反复验收每个节点都要验收。反复接受可以让你及时了解最新动态，如果有问题可以及时反馈。即使你做到了以上几点，开发者也可以不能完全理解你想表达的内容，所以需要非常频繁地同步信息，而不是做得七七八八。突然发现这里不对劲，然后我就改。时间可能不够。另外，只有做到以上几点，你才能对发展充满信心和责任感，否则，你怎么还有脸去找别人s理论？

综上所述，我相信你已经充分理解了跟进和恢复的能力给一个设计师。有很多设计师可以成为好看在世界上，他们有很多技能来做好商业设计。需要的能力远不止这些。一个没有能力把事情从头到尾做完的设计师，随时都会失败，而且从结果导向来看，比一个自认为比你低很多的设计师还要惨。

——————————我是分割线——————echo0

另外，我附上@的建议丫丫丫丫丫(博客)。

这个问题实际上有两个作用和一个目标:

角色一:视觉设计师角色二:前端工程师(想必Web前端和iOS、Android开发也在)目标:100%还原设计效果。

让s先看看这个目标设定是否靠谱。要看这个目标靠谱不靠谱，还要看条件。如果前端工程师不够好，itit’除了提高他的水平之外，试图100%还原设计效果是没有用的。所以我下面说的默认是前端工程师有足够的执行能力。如果能力足够，不能达到设计效果，可能是以下原因:

设计不合理，考虑不周。时间紧或不愿意达成沟通不到位。

不合理的设计上面提到的角色1是视觉设计师。一般来说，视觉设计师利用视觉符号来传达设计的各种信息。纵观各种岗位职责，并没有严格要求视觉设计师具备HTML/CSS/JavaScript技能。事实上，大多数视觉设计师都不会。;不知道技术，比如CSS盒子模型，浮动，绝对定位和相对定位，如果...其他...然后。这是客观情况。如果视觉设计师具备这些知识和技能，自然可以避免一些问题，但是术业有专攻，不能强求。

除了提高你的知识，还有其他方法:

设计审查。当我还是一个交互原型的时候，我邀请技术经理一起回顾。

曾经我们公司在银行做项目的时候，是一个混合应用，就是W。

所以当我们团队做一些设计咨询项目的时候，我们会引入技术人员。

如果沟通不到位，把地图剪下来，做好标记。

使用对方能理解的语言。如前所述，很多视觉设计师没有技术基础，但是了解一些术语对于和程序员交流是非常有效的。比如有很多动态效果。你说从这里到那里和稍微慢一点时间长了，而且可能很难达到你想要的效果。但是如果你说，这个动画的张力值，摩擦力值，三次贝塞尔函数是什么，程序员会更容易理解。

可以参考这个网站找到很多动画效果的名字:形式服从功能。

继续跟进。设计完成后，你可以不要忽视它。代码写完后，你可以自豪地说哦，它没有我不能按照我的设计工作。它也是设计师s的责任是保证设计效果的实现，并建立Bug文档，映射对比，描述清楚，因为不是每个人都是像素眼，对美的理解是不一样的。

总结流程:沟通设计审核交付设计图纸再次沟通跟进。

每份工作都不像看起来那么简单。设计不仅仅是一个为了让东西看起来更好而画画的人。程序员不t只是写代码(在我们团队的一些项目中，很多不合理的设计都被程序员指出来)。最重要的是相互沟通和理解。

其实我建议这个问题的措辞可以修改一下。什么是如何让前端工程师100%达到设计效果？这不仅仅是前端工程师的工作，不是如何让人们实现它，但是如何合作。

了解更多视觉设计与前端开发(视觉前)相关内容请关注东辰网。