平面设计师和ui设计师
We’re all familiar with that never-ending battle or rather, the Cold War between engineers and designers. You create a functional UX, a beautiful UI, and the client is excited. Then, after a couple of months when development has reached completion, the feedback you get is totally unexpected. Instead of praise for your excellent work, everyone seems disappointed, and sure enough, when you take a look — your design not only looks unimpressive, it’s also super clunky to use.
w ^ e're所有熟悉永无休止的战斗或者更确切地说，工程师和设计师之间的冷战。 您创建了功能强大的UX，漂亮的UI，并且客户端很兴奋。 然后，在开发完成几个月后，您得到的反馈是完全出乎意料的。 每个人似乎都没有失望，也没有因为出色的表现而称赞他们，而且可以肯定的是，当您看一看时，您的设计不仅看起来令人印象深刻，而且使用起来也很笨拙。
So why is there such a gulf between what you delivered and the final result? Unfortunately, what it comes down to is that your vision and carefully planned design simply doesn’t align with the engineer’s implementation.
那么，为什么您交付的商品与最终结果之间存在鸿沟？ 不幸的是，最终结果是您的愿景和精心设计的设计根本不符合工程师的实现。
为什么有问题？ (Why is there a problem?)
So, you shared the Figma link, Sketch file, Zeplin, Invision, and Avocode, and delivered a comprehensive style guide containing all UI elements and all possible states. You did everything right, even down to sharing that inspect mode link with all the CSS. Yet still, the result is unsatisfactory. So why does this happen?
因此，您共享了Figma链接，Sketch文件，Zeplin，Invision和Avocode，并提供了包含所有UI元素和所有可能状态的全面样式指南。 您所做的一切都正确，甚至可以与所有CSS共享该检查模式链接。 然而，结果仍然不能令人满意。 那么为什么会这样呢？
Engineers (developers) are a special kind of people. They are meticulous and hard-working folks always looking for smart ways to solve problems and are forever determined to discover new ideas, refine their processes, and make even more significant improvements. They are under constant pressure to deliver slicker, smarter solutions to tight deadlines in the highest possible quality.
工程师(开发人员)是一种特殊的人。 他们是一丝不苟，工作勤奋的人们，他们一直在寻找解决问题的聪明方法，并且永远决心发现新想法，完善他们的流程并做出更大的改进。 他们承受着不断的压力，要在紧迫的期限内以尽可能最高的质量提供更智能的解决方案。
If designers are the artists, then engineers are poets, just like Wordpress says:
如果设计师是艺术家，那么工程师就是诗人，就像Wordpress所说的那样：
Code is poetry.
代码就是诗歌。
Never has a truer word been spoken, engineers are masters of the new era poetry. For someone who doesn’t know anything about development, code can appear both complex and nonsensical. At best, a person might think what’s in front of them is a bunch of hacking code.
从来没有说过一个更真实的词，工程师是新时代诗歌的主人。 对于一个对开发一无所知的人，代码看起来既复杂又荒谬。 充其量，一个人可能会认为摆在他们面前的是一堆黑客代码。
The reality is, however, that engineers are masters of their specialty, and conquering code takes huge amounts of energy, dedication, and focus. For anyone that understands coding, observing a good piece of HTML or CSS code is a privilege, it’s no wonder they say, “code is poetry.”
然而现实是，工程师是他们的专业专家，征服代码需要大量的精力，奉献精神和专注力。 对于任何了解编码的人来说，观察一段不错HTML或CSS代码是一种特权，难怪他们会说“代码就是诗歌”。
When designers hand over their work, it can be challenging for engineers to pick up on the small pixels, the tiniest of tweaks that we designers are sensitive to. An engineer’s primary goal is generally to “make it work.” They don’t have the capacity or sensitivity to spend too much time or focus on small pixels and alignments that are invisible to the average person’s eyes.
当设计师移交工作时，对于工程师来说，挑起小像素是一项挑战，这是我们设计师敏感的最小调整。 工程师的主要目标通常是“使其工作”。 他们没有能力或敏感度花费太多时间或专注于普通人的眼睛看不见的小像素和对齐方式。
该如何解决呢？ (How to solve the problem?)
Generally, there isn’t a ‘one size fits all’ approach for designer-engineer communication. The best approach is to ensure clarity and to manage expectations during every step of the process. This kind of problem requires a systematization, which means each part of the process should be defined in detail.
通常，对于设计师与工程师的沟通，没有“一刀切”的方法。 最好的方法是在过程的每个步骤中确保清晰度并管理期望。 这种问题需要系统化，这意味着应该详细定义过程的每个部分。
Just like when an architect designs a building, it is he who creates the vision, but it is the construction workers who bring that vision from paper to life. So it follows that we designers and engineers need to have that process defined too. The initial step towards resolving issues is arming oneself with the right knowledge. In short, a designer should at minimum know the basics of front-end coding.
就像建筑师设计建筑物时一样，是由他创造了愿景，但是由建筑工人将愿景从纸面带入了生活。 因此，我们的设计师和工程师也需要定义该过程。 解决问题的第一步是用正确的知识武装自己。 简而言之，设计人员至少应了解前端编码的基础知识。
It makes sense for an architect to know statics, restrictions and any potential issues before they begin their design, right? Similarly, therefore, a designer must understand what restrictions there are in coding that might impact their vision. If you know what’s possible to code and what’s not, what requires 10 days, and what requires 2 hours to build, you will be able to design accordingly, and also know when you are being taken for a ride.
对于建筑师来说，在开始设计之前就了解静力学，约束和任何潜在问题是有意义的，对吗？ 因此，设计者必须类似地了解编码中存在哪些可能影响其视觉的限制。 如果您知道什么是可能的代码，什么不是什么，什么需要10天，什么需要2个小时的构建，则可以进行相应的设计，还可以知道何时乘车。
A less reputable engineer might respond: “Man, this is possible but requires at least ten days to put together,” when in fact, it would only take one. If you aren’t knowledgeable, then you may end up making slow progress and having to extend deadlines just because you didn’t arm yourself with the right knowledge from the get-go.
一个不太有名望的工程师可能会回答：“伙计，这是可能的，但至少需要十天才能完成。”实际上，只用了一天。 如果您不懂知识，那么您可能会因为自己没有从一开始就掌握正确的知识而最终进展缓慢，并且不得不延长截止日期。
Of course, this is a two-way street, and a good engineer should be familiar with the fundamentals of design such as spacing, paddings, font sizes, colors, and so on. With that knowledge, they will be able to understand the design and comprehend what it is that the designer had in mind. From this, by using their experience and talents, a developer will leverage the design to something that works even better than you could have hoped for!
当然，这是一条双向路，优秀的工程师应该熟悉设计的基础知识，例如间距，填充，字体大小，颜色等。 有了这些知识，他们将能够理解设计并理解设计师的想法。 由此，开发人员将利用他们的经验和才华，将设计运用到比您期望的更好的效果上！
系统化 (Systematization)
A useful approach in solving the designer-engineer problem is to observe the typical obstacles in their communication with one another. We are all familiar with the usual workflow: Designer creates the UX and the UI, designs a style guide with all UI components and their states, and delivers everything to the engineer via Invision, Zeplin, Avocode, Figma or any other tool available.
解决设计师-工程师问题的一种有用方法是观察他们之间相互交流的典型障碍。 我们都熟悉通常的工作流程：Designer创建UX和UI，设计包含所有UI组件及其状态的样式指南，并通过Invision，Zeplin，Avocode，Figma或任何其他可用工具将所有内容提供给工程师。
The engineer receives all the assets and starts to think about the structure and functionalities he needs to implement the design. During that process, very rarely do the designers and engineers commit a kick-off meeting to go through the plans and all the specs that follow. Why? Because on first glance, everything seems straightforward both to the designer and the engineer.
工程师收到所有资产，并开始考虑实现设计所需的结构和功能。 在此过程中，设计师和工程师很少召开启动会议来审议计划和随后的所有规格。 为什么？ 因为乍一看，对于设计师和工程师而言，一切似乎都很简单。
Every engineer has a unique way of translating those neat pixels into code poetry. Unfortunately, because there is no standardized implementation method, this increases the chances of the end product failing expectations, because even a small missed detail may seriously affect the user experience.
每个工程师都有独特的方式将这些整洁的像素转换为代码诗。 不幸的是，因为没有标准化的实现方法，这增加了最终产品达不到预期的机会，因为即使是很小的漏掉的细节也可能严重影响用户体验。
Here is a high level example of systematization in architecture:
这是体系结构中系统化的高级示例：
As you can see in the graph above, every step is strictly defined and depends on the previous one. Each is assigned to a specific role. Some steps can enter a loop and remain there until the criteria required to move to the next one is fulfilled.
正如您在上图中所看到的，每个步骤都是严格定义的，并取决于上一个步骤。 每个都分配有特定的角色。 一些步骤可以进入循环并保持在那里，直到满足移至下一个循环所需的条件为止。
Let’s go back to the architect analogy for a moment. During construction, supervisors have a critical role. Until all their criteria are met, and they are entirely satisfied, the completion of construction will not end. There are many supervising roles during the development and creation of a building. The architect, who designed the building, plays one of the essential functions, and satisfying his or her requirements is very important to accurately translate the original idea into a real functional, tangible thing.
让我们再回到架构师类比上。 在施工期间，主管扮演着至关重要的角色。 在满足所有标准并完全满意之前，施工不会结束。 在建筑物的开发和创建过程中，有许多监督角色。 设计建筑物的建筑师扮演着重要的功能之一，满足他或她的要求对于将最初的想法准确地转化为真正的功能性，有形的东西非常重要。
Similar principles can be applied in UI/UX and development, from a high level this is a proposal of systematization:
可以在UI / UX和开发中应用类似的原理，从较高的角度来看，这是系统化的建议：
In design, the “architect” is the UI/UX designer, and to reach the best possible result, the designer should behave as a supervisor and have much more authority and decision making power. Constant reviews, updates, and refinements may be necessary. However, this shouldn’t be considered as a “battle” between engineers and designers. Both should contribute, using their strengths, and find an effective way of communicating to ensure that their shared goal of delivering a seamless user experience can come to fruition.
在设计中，“架构师”是UI / UX设计人员，为了达到最佳效果，设计人员应充当主管并具有更大的权限和决策权。 可能需要不断进行审查，更新和完善。 但是，这不应被视为工程师和设计师之间的“战斗”。 两者都应利用自己的优势做出贡献，并找到一种有效的沟通方式，以确保实现无缝用户体验的共同目标得以实现。
Communication naturally plays a vital role in the process. It’s just not enough to showcase the design and assume everyone is on board and clear. Engineers need to know all the details and receive precise instructions — because 0.1 seconds can make a difference between something feeling natural to something terrible. Because of this, designers need to think beyond just delivering the design itself.
在此过程中，沟通自然起着至关重要的作用。 仅仅展示设计并假设所有人都参与其中并保持清晰是不够的。 工程师需要了解所有细节并接受精确的说明-因为0.1秒可以使感觉自然和可怕的事情有所不同。 因此，设计师需要思考的不仅仅是交付设计本身。
Every component of the application is essential even if it seems obvious and logical; it is worth having a discussion, so everyone is absolutely on the same page. The designer, in some cases, should provide animated examples of how complex components interact with the user to ensure complete clarity.
应用程序的每个组件都是必不可少的，即使看起来显而易见且合乎逻辑。 值得讨论，因此每个人都绝对在同一页面上。 在某些情况下，设计人员应提供动画示例，说明复杂的组件如何与用户交互以确保完全清晰。
设计师—工程师关系 (Designer — engineer relation)
Good design usually gets left on the table, and it is the responsibility of designers to build excitement and trust early in the process. We live in a world where phrases such as, “no we don’t need that” are excruciatingly common. Because of this, designers need to spend more one-to-one time with engineers and share ideas, as well as both their positive and negative implications for the end-user. Communication, education, and a shared vision are crucial and will result in smoother collaboration and a better result for everyone involved.
好的设计通常会摆在桌面上，设计师有责任在过程中尽早建立兴奋和信任。 我们生活在一个这样的世界中，诸如“不，我们不需要”这样的短语非常普遍。 因此，设计师需要与工程师花费更多的一对一时间并分享想法，以及它们对最终用户的积极和消极影响。 沟通，教育和共同的愿景至关重要，这将使协作更加顺畅，并为每个参与人员带来更好的结果。
Some engineers have a fantastic understanding of design; they will receive it, write a bunch of lines of code and take it to the next level, creating something even better than you ever imagined.
一些工程师对设计有很好的理解。 他们会收到它，编写一堆代码并将其带入一个新的水平，从而创造出比您想象中更好的东西。
Engineering should not be a blocker, engineer should notice and leverage those “little big details” that make all the difference when it comes to creating a truly breathtaking design.
工程学不应成为障碍，工程师应注意并利用那些“小小的大细节”，这些细节在创建真正令人惊叹的设计时会有所不同。
重要要点 (Key Takeaways)
- Introduce systematization and define every step of the process. 介绍系统化并定义过程的每个步骤。
- Designers need to think beyond just delivering the design itself. 设计师需要思考的不仅仅是交付设计本身。
- Designers should spend more one-on-one time with engineers. 设计师应与工程师花费更多的一对一时间。
- Engineers should be familiar with basic fundamentals of designs. 工程师应该熟悉设计的基本原理。
- Designers should act as a supervisors and have much more eligibility in making crucial decisions. 设计师应充当主管，并具有更大的资格来制定关键决策。
The engineer — designer relationship is not one that needs to be fraught with stress and tension. If you are clear from the outset, set out expectations and shared goals, and find ways of collaborating that work for both of you, and communicate effectively from the start, the process could even, dare we say it, be an enjoyable, fruitful and satisfying one!
工程师与设计师之间的关系并不是一个压力和紧张的关系。 如果您从一开始就很清楚，设定了期望和共同的目标，并找到了为您双方合作的方法，并且从一开始就进行了有效的沟通，那么我们甚至敢说，这个过程是愉快的，富有成果的，令人满意的！
翻译自: https://uxdesign.cc/ui-design-implementation-guideline-for-engineers-and-designers-158afbab680a
平面设计师和ui设计师
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
