为什么现在是设计师学习编程的好时机 我坚信当今设计师需要做的不仅仅是设计美观的用户界面。设计师的角色已经发生了变化，现在我们需要弥合创造力和技术之间的差距。 为了实现这一目标，我们可以在工具包中添加最好的技能之一？ 。 编码 现在，关于设计师是否 。我认为设计师和开发人员之间的旧有分工已经行不通了。它不符合当今 需求。任何人，即使是开发人员，只要从事界面工作，都应该具有很强的设计感。 是否应该学习编码 产品开发的 同时，设计决策不应该局限于那些不了解以下内容的人制定的严格规则或手册： 相互作用， 科技，或 编码。 在此过程中，设计（右侧）和实际实施（左侧）通常如下所示： 而你们（设计师）是唯一可以解决这个问题的人。我为你们提供代码——作为完成你们梦想的 UI 的灵丹妙药。 毕竟，有人正确地说过， 设计不是一个人，而是一种功能。 编码让我们更适应设计市场的变化 设计瞬息万变，我们需要的技能也同样如此。现在，我并不是说我们很快就会看到一个正式的职位，叫做“产品设计师-开发人员”，但雇主肯定在寻找能够跳出传统设计圈子的人。他们想要的设计师应该具备以下素质： 理解 ， 人类行为 可以跨团队协作， 并且贡献不仅仅局限于创造视觉效果。 懂编程的设计师拥有独特的优势。他们更擅长跨团队合作。他们可以将创意转化为实用、引人入胜的解决方案，满足真正的用户需求。 传统的 UI 设计是不够的。了解事物的构建方式（框架、代码库和支持我们设计的系统）有助于我们创造不仅美观而且与驱动它们的技术无缝协作的体验。我们不再只是制作“视觉盛宴”屏幕。 例如，在最近的一个项目中， ，一个从单一代码库构建应用程序的开源框架，我意识到编码知识对于做出明智的设计选择有多么重要。 扑 如果不了解技术，设计在开发团队的限制范围内工作的动画、过渡或运动元素就会困难得多。 由于我学会了如何编码，我为 的 的动画成为可能。 德国园丁制作 Veggie Grower iOS 应用   https://dribbble.com/shots/14455168--Slider-for-Veggie-Grower-iOS-App-for-Germany-gardeners?embedable=true 编程的好处不仅仅在于技能。它甚至可以改变大脑的运作方式。每一次编程挑战都会激发我大脑中的新连接。它会适应和发展，帮助我在其他领域取得进步。 科学表明，当我们学习一些困难或不熟悉的东西时，比如编码或演奏乐器，就会形成新的神经通路。新技能不仅能扩展我们的能力，还能重塑我们的大脑。面对挑战，我们的适应力和韧性都会增强。 编码有助于了解开发人员的观点 会编程的设计师可以简化与开发人员的协作。这可以使流程更顺畅，产品更优质。编程可以帮助我们创建更实用、更现实的设计。它使开发人员的工作更轻松，并减少团队之间的摩擦。当我们理解代码时，我们可以更好地交流我们的想法，并将创意愿景转化为可行的解决方案。 我将向我的“孩子” Veggie Grower 应用进行更多解释。我最大的错误是让 UI 过于复杂，因为客户坚持要有“令人惊叹的因素”。我们想给人留下深刻印象，但却没有达到目标——应用商店中的实际 UI 效果不佳（请参阅上文的封面）。 这让我明白设计师确实需要充当开发人员的第一道防线。当商业理念开始偏离现实时，我们必须予以反击，保护产品和用户体验不会变得过于复杂。我们设法找到了一些巧妙的解决方法来发布应用程序。我混合使用了 Lottie 动画和一些我自己创建的动画——我的编码技能在这里绝对派上了用场。它帮助我们完善了一些东西，使发布得以顺利进行。 学习编程彻底改变了我看待设计的方式。我开始从开发人员的角度看待事物，了解他们面临的挑战——比如在复杂功能和预算限制之间取得平衡，以及在宏大构想和实际可行性之间找到一个现实的中间地带。 理解开发人员的痛苦 vs 知道何时坚持自己的立场 编码让我对流程的开发方面有了同理心。 重要的是要认识到，开发人员经常面临巨大的压力，需要让产品功能正常运作。经过几天的调试后，他们最不想做的就是处理复杂的设计元素，因为这些元素会增加不必要的麻烦。 这正是我们作为设计师需要介入解决问题的地方。我们必须努力实现简单和清晰——在形式和功能之间取得平衡，以服务于用户和开发人员。 这并不意味着将所有设计简化到平淡无奇的程度。而是意味着要有策略性，将界面分解为易于管理、可构建的组件，以便开发人员理解和实施。 现在，我们来谈谈所谓的“守门”。如今，在用户体验中，它通常被视为一种负面特征。守门： 控制并通常限制对某些事物的一般访问的活动。 但在设计中，担任“守门人”是工作的重要部分。我们是产品上线前的一道防线。我们的角色是确保我们帮助创造的一切都能真正改善用户的旅程。 这种“把关”并不是为了难度。而是为了确保用户的需求是最重要的。而这时，懂一点代码就能起到很大的作用。 当你了解开发方面时，你就能更好地表达为什么某些设计细节很重要。 假设您正在开发一项功能，需要特定的动画来引导用户的注意力，但开发人员希望跳过它以节省时间。如果您知道如何通过简单的 CSS 调整或使用现有的 JavaScript 库来实现该动画，那么您可以有效地提出您的主张，开发人员也更有可能听取您的意见。 这是关键：了解如何编码对于以建设性的方式争论你的观点且不会让任何一方感到沮丧至关重要。 编码让我们看到了“惊喜因素”背后的魔力 https://vimeo.com/494748581?embedable=true 底部的“牛油果小伙”显示正在加载其他项目。这对开发人员来说有点棘手，所以我使用 Lottie 将其转换为 JSON——这使得集成变得无缝，而且只用了 15 分钟，而不是几天。 在我们注重使事物实用的同时，我们不能忘记“惊喜因素”。 动画的流畅度或 UI 颜色的完美平衡都能带来难忘的体验。这种情感联系对于让产品不仅好用而且令人愉悦至关重要。 当他们发现界面具有视觉吸引力时。毕竟，美观的设计比功能性设计更容易成功。 用户对微小的可用性问题更加容忍 然而，“令人惊叹的效果”并非凭空而来。它要求我们与开发人员密切 ，以确保我们对这些时刻的设想能够转化为最终产品。Lottie 或 动画等工具使我们能够向开发人员准确展示我们的意图，帮助实现过渡和交互。 合作 CSS 编码帮助我们理解什么是可能的 学习编码可以帮助我们了解什么是可行的，什么可能只是一种延伸。当然，一个令人惊叹的 Dribbble 作品集是很棒的。但是，如果这些设计无法开发，它们就只是数字艺术，而不是功能性产品。 当我们了解一些编码基础知识时，我们开始看到什么是可能的，这意味着我们可以发挥创造力，而不会让开发人员被不切实际的想法所淹没。 以设计登录屏幕的微交互为例。假设您想要一个微妙、令人满意的动画。它应该在用户输入密码时提供反馈。例如，当满足正确的格式时，该字段应该发出绿光。如果不了解一点 CSS 或 JavaScript，您可能会提出过于复杂的东西，开发团队需要花费数小时才能构建。有了一些编码知识，您就会知道哪些效果是现实的。这将帮助您提出既酷又可实现的想法。 设计师应该“像水一样”——适应性强、流动性强（谢谢你的这句话， ）我们仍然可以突破创意的界限，但我们会对眼前的限制做出反应。 布鲁斯 最好的设计激发灵感 而不会超出实际建造的范围。 用户和开发者 携手打造富有影响力的设计 设计不关乎美学。它是一个解决问题的过程，旨在改善人们对您提供的产品和服务的体验，并最终改善您的品牌的体验。 如今，我们不仅仅是设计师，我们还是问题解决者、用户体验的倡导者，最重要的是，我们还是合作者。通过将我们的创造力与技术洞察力相结合，我们正在为未来的产品铺平道路——这些产品不仅美观，而且对用户来说真正有意义且有效。 作为设计师，我们的工作不仅仅是制作精美的原型，还要与开发人员携手合作，将愿景变为现实。这意味着我们要参与整个开发过程，克服技术挑战，在必要时进行设计调整，并保持沟通渠道畅通。正是这种持续的合作将好的设计变成卓越的产品。 随着设计的不断发展，编码的重要性只会越来越高。在设计和技术的交叉点上，存在着巨大的创新潜力——但这需要思维方式的转变。将编码作为一项核心技能，设计师可以创造出不仅视觉上令人惊叹，而且功能齐全、开发人员友好且具有影响力的产品。 我知道你想什么，你想要这些色彩缤纷的蔬菜卡。我准备了一个开放的 为您提供的资源文件： 附言： Figma   https://www.figma.com/community/file/1090901197925018121/fruits-and-vegetables-cards?embedable=true

This story contains new, firsthand information uncovered by the writer.

Read My Stories

該音頻是用故事的原始語言製作的！

开始开发你的设计（字面意思）

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

State of the Noonion: Green Clock Strikes Noon

数字游民请注意：您需要了解泰国新推出的 DTV 签证

Claude Sonnet 3.5 系统提示泄漏：法医分析

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

State of the Noonion: Green Clock Strikes Noon

数字游民请注意：您需要了解泰国新推出的 DTV 签证

Claude Sonnet 3.5 系统提示泄漏：法医分析

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps