mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
62 lines
4.7 KiB
Markdown
62 lines
4.7 KiB
Markdown
|
[#]: subject: "Merge design and code with Penpot"
|
|||
|
|
[#]: via: "https://opensource.com/article/23/1/merge-design-code-penpot"
|
|||
|
|
[#]: author: "Seth Kenlon https://opensource.com/users/seth"
|
|||
|
|
[#]: collector: "lkxed"
|
|||
|
|
[#]: translator: "geekpi"
|
|||
|
|
[#]: reviewer: "wxy"
|
|||
|
|
[#]: publisher: "wxy"
|
|||
|
|
[#]: url: "https://linux.cn/article-15549-1.html"
|
|||
|
|
|
|||
|
|
用 Penpot 弥合设计和代码之间的鸿沟
|
|||
|
|
======
|
|||
|
|
|
|||
|
|
![][0]
|
|||
|
|
|
|||
|
|
> 用 Penpot 这个开源的设计工作空间来弥合编程和设计之间的鸿沟。
|
|||
|
|
|
|||
|
|
在计算机编程的大部分历史中，在创建应用的代码的程序员和创建应用的用户体验（UX）的设计师之间一直存在着鸿沟。这两个学科接受的培训大不相同，他们使用的工具也不同。程序员使用文本编辑器或集成开发环境来编写代码，而设计师则经常绘制小部件布局和潜在交互的示意图。虽然一些 IDE，像 [Eclipse][1] 和 [Netbeans][2]，有界面设计组件，但它们通常专注于小部件的位置而不是小部件的设计。开源设计应用 [Penpot][3] 是一个协作式设计和原型设计平台。它有一套新的功能，使设计师和开发者可以很容易地用熟悉的工作流程协同工作。Penpot 的设计界面可以让开发者在设计过程中和谐地编写代码，这是其他工具所无法做到的。自从我们 [上次介绍它][4] 以来，它已经有了长足的进步。它的最新功能不仅改善了你使用 Penpot 的体验，还推动了开源的 Penpot 应用超越类似的专有工具。
|
|||
|
|
|
|||
|
|
### 用 Penpot 做原型
|
|||
|
|
|
|||
|
|
在设计应用的最佳工作方式时，常见问题之一是在设计的时候这个应用还不存在。设计师可以通可视化和故事板来帮助设计团队和程序员了解目标是什么。但这是一个需要迭代和反馈的过程，当开发人员开始实施 UX 设计，设计会发生变化以应对对代码的实际变化。
|
|||
|
|
|
|||
|
|
使用 Penpot，你可以为你的网络或移动应用创建一个“可用”原型。你可以将按钮与特定的行动联系起来，根据用户的输入触发布局的变化。而这一切都可以在项目的代码存在之前完成。
|
|||
|
|
|
|||
|
|
但是，这方面最重要的不是模拟的能力。在 Penpot 中为应用的设计所做的一切都有可用的布局数据，开发人员可以在最终的项目中使用它们。Penpot 不仅仅是一个出色的绘图和布局工具。它为编码过程提供了信息。
|
|||
|
|
|
|||
|
|
Penpot 现在不仅仅是提供了一个设计师特定元素的视觉列表，如属性、颜色和排版，而是将代码输出直接整合到设计工作区（就像 Web 浏览器中的开发者工具）。设计师和开发人员共享设计和前端开发的相同空间，以他们需要的任何格式获得规格。
|
|||
|
|
|
|||
|
|
![Image of the current Penpot interface][5]
|
|||
|
|
|
|||
|
|
### 内存解锁
|
|||
|
|
|
|||
|
|
许多在线设计工具使用专有技术来提供一些花哨的功能，但代价是基本上成为一个应用，你只能运行它，而不能通过浏览器访问。不过 Penpot 使用开放的网络标准，并由你的网络浏览器渲染。这意味着 Penpot 可以访问浏览器可用的最大内存，使得 Penpot 成为第一个具有设计扩展性的在线原型和布局应用。你可以提供更多的选项、更多的模型，和更多的场地。此外，你可以向更多的并发协作者开放你的设计空间，而不必担心应用的内存耗尽。
|
|||
|
|
|
|||
|
|
### 自我托管和 SaaS
|
|||
|
|
|
|||
|
|
Penpot 是开源的，所以你不用必须在云上使用它，如果这不适合你的工作流程。你可以在一个容器中轻松地自我托管 Penpot，在你自己的工作站上作为一个本地应用使用，或者在你自己的服务器上为你的组织托管它。
|
|||
|
|
|
|||
|
|
### 开源设计
|
|||
|
|
|
|||
|
|
我以前写过一篇 [Penpot 的介绍性文章][6]，自那以后，这个应用变得更好了。如果你想把程序员和相关人员带入你的设计过程中，那么请试试 Penpot。
|
|||
|
|
|
|||
|
|
--------------------------------------------------------------------------------
|
|||
|
|
|
|||
|
|
via: https://opensource.com/article/23/1/merge-design-code-penpot
|
|||
|
|
|
|||
|
|
作者：[Seth Kenlon][a]
|
|||
|
|
选题：[lkxed][b]
|
|||
|
|
译者：[geekpi](https://github.com/geekpi)
|
|||
|
|
校对：[wxy](https://github.com/wxy)
|
|||
|
|
|
|||
|
|
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
|||
|
|
|
|||
|
|
[a]: https://opensource.com/users/seth
|
|||
|
|
[b]: https://github.com/lkxed
|
|||
|
|
[1]: https://opensource.com/article/20/12/eclipse
|
|||
|
|
[2]: https://opensource.com/article/20/12/netbeans
|
|||
|
|
[3]: http://penpot.app
|
|||
|
|
[4]: https://opensource.com/article/21/9/open-source-design
|
|||
|
|
[5]: https://opensource.com/sites/default/files/2022-07/Current%20Penpot%20interface.png
|
|||
|
|
[6]: https://opensource.com/article/21/12/open-source-design-penpot
|
|||
|
|
[0]: https://img.linux.net.cn/data/attachment/album/202302/17/143544u59tzeqplyhpt08h.jpg
|