在計(jì)算機(jī)編程的大部分歷史中，在創(chuàng)建應(yīng)用的代碼的程序員和創(chuàng)建應(yīng)用的用戶體驗(yàn)（UX）的設(shè)計(jì)師之間一直存在著鴻溝。這兩個(gè)學(xué)科接受的培訓(xùn)大不相同，他們使用的工具也不同。程序員使用文本編輯器或集成開發(fā)環(huán)境來編寫代碼，而設(shè)計(jì)師則經(jīng)常繪制小部件布局和潛在交互的示意圖。雖然一些 IDE，像 ??Eclipse??? 和 ??Netbeans???，有界面設(shè)計(jì)組件，但它們通常專注于小部件的位置而不是小部件的設(shè)計(jì)。開源設(shè)計(jì)應(yīng)用 ??Penpot??? 是一個(gè)協(xié)作式設(shè)計(jì)和原型設(shè)計(jì)平臺(tái)。它有一套新的功能，使設(shè)計(jì)師和開發(fā)者可以很容易地用熟悉的工作流程協(xié)同工作。Penpot 的設(shè)計(jì)界面可以讓開發(fā)者在設(shè)計(jì)過程中和諧地編寫代碼，這是其他工具所無法做到的。自從我們 ??上次介紹它?? 以來，它已經(jīng)有了長(zhǎng)足的進(jìn)步。它的最新功能不僅改善了你使用 Penpot 的體驗(yàn)，還推動(dòng)了開源的 Penpot 應(yīng)用超越類似的專有工具。

用 Penpot 做原型

在設(shè)計(jì)應(yīng)用的最佳工作方式時(shí)，常見問題之一是在設(shè)計(jì)的時(shí)候這個(gè)應(yīng)用還不存在。設(shè)計(jì)師可以通可視化和故事板來幫助設(shè)計(jì)團(tuán)隊(duì)和程序員了解目標(biāo)是什么。但這是一個(gè)需要迭代和反饋的過程，當(dāng)開發(fā)人員開始實(shí)施 UX 設(shè)計(jì)，設(shè)計(jì)會(huì)發(fā)生變化以應(yīng)對(duì)對(duì)代碼的實(shí)際變化。

使用 Penpot，你可以為你的網(wǎng)絡(luò)或移動(dòng)應(yīng)用創(chuàng)建一個(gè)“可用”原型。你可以將按鈕與特定的行動(dòng)聯(lián)系起來，根據(jù)用戶的輸入觸發(fā)布局的變化。而這一切都可以在項(xiàng)目的代碼存在之前完成。

但是，這方面最重要的不是模擬的能力。在 Penpot 中為應(yīng)用的設(shè)計(jì)所做的一切都有可用的布局?jǐn)?shù)據(jù)，開發(fā)人員可以在最終的項(xiàng)目中使用它們。Penpot 不僅僅是一個(gè)出色的繪圖和布局工具。它為編碼過程提供了信息。

Penpot 現(xiàn)在不僅僅是提供了一個(gè)設(shè)計(jì)師特定元素的視覺列表，如屬性、顏色和排版，而是將代碼輸出直接整合到設(shè)計(jì)工作區(qū)（就像 Web 瀏覽器中的開發(fā)者工具）。設(shè)計(jì)師和開發(fā)人員共享設(shè)計(jì)和前端開發(fā)的相同空間，以他們需要的任何格式獲得規(guī)格。

Image of the current Penpot interface

內(nèi)存解鎖

許多在線設(shè)計(jì)工具使用專有技術(shù)來提供一些花哨的功能，但代價(jià)是基本上成為一個(gè)應(yīng)用，你只能運(yùn)行它，而不能通過瀏覽器訪問。不過 Penpot 使用開放的網(wǎng)絡(luò)標(biāo)準(zhǔn)，并由你的網(wǎng)絡(luò)瀏覽器渲染。這意味著 Penpot 可以訪問瀏覽器可用的最大內(nèi)存，使得 Penpot 成為第一個(gè)具有設(shè)計(jì)擴(kuò)展性的在線原型和布局應(yīng)用。你可以提供更多的選項(xiàng)、更多的模型，和更多的場(chǎng)地。此外，你可以向更多的并發(fā)協(xié)作者開放你的設(shè)計(jì)空間，而不必?fù)?dān)心應(yīng)用的內(nèi)存耗盡。

自我托管和 SaaS

Penpot 是開源的，所以你不用必須在云上使用它，如果這不適合你的工作流程。你可以在一個(gè)容器中輕松地自我托管 Penpot，在你自己的工作站上作為一個(gè)本地應(yīng)用使用，或者在你自己的服務(wù)器上為你的組織托管它。

開源設(shè)計(jì)

我以前寫過一篇 ??Penpot 的介紹性文章??，自那以后，這個(gè)應(yīng)用變得更好了。如果你想把程序員和相關(guān)人員帶入你的設(shè)計(jì)過程中，那么請(qǐng)?jiān)囋?Penpot。