有哪些新的UI設(shè)計(jì)工具可以提高您的工作效率?

目前的設(shè)計(jì)工具有很大的問題,因?yàn)榛ヂ?lián)網(wǎng)UI設(shè)計(jì)的業(yè)務(wù)和10年前有了很大變化,工作流程和交付方式也和以前完全不一樣了??赡懿簧僭O(shè)計(jì)師已經(jīng)在實(shí)際工作中感觸很深,基于 image-based 的傳統(tǒng)設(shè)計(jì)工具漸漸不能滿足業(yè)務(wù)需求了,不管你用什么工具,和工程師的配合都會(huì)產(chǎn)生各種各樣的問題,設(shè)計(jì)和開發(fā)之間的 gap 永遠(yuǎn)存在。

design tools 1.jpeg


基于這樣的大趨勢和背景下,F(xiàn)ramer X 橫空出世了,當(dāng)時(shí)全新的理念確實(shí)讓整個(gè)互聯(lián)網(wǎng)設(shè)計(jì)圈為之興奮。但它在很多方面仍存在很大的致命問題,對設(shè)計(jì)師也不夠友好。于是受到 Framer X 的啟發(fā),這類新的設(shè)計(jì)工具突然一夜之間井噴式的爆發(fā)了。


上期 AnywayFM也提到了這個(gè)話題,高老師還因?yàn)槲业囊粋€(gè)觀點(diǎn) diss 了一些自己的觀點(diǎn)。當(dāng)然本文并不討論誰對誰錯(cuò)(等改天新開個(gè)話題再好好寫一篇 diss 回去),我想說的是之前他們的某期播客上,把現(xiàn)在的設(shè)計(jì)工具稱為后現(xiàn)代設(shè)計(jì)工具,而以 Framer 為首的這些,我把他們稱之為前沿設(shè)計(jì)工具。

design tools 2.jpeg


讓我們來看看目前有哪些新的工具出現(xiàn)了:


Interplay

Interplay 是一家位于愛爾蘭和澳大利亞的創(chuàng)業(yè)公司,上次介紹 Figma 插件有一個(gè) design system 的插件就是他們家開發(fā)的。和 Framer 不同的是,它號(hào)稱同時(shí)支持 React, Angular 和 Vue,并且可以讓你從 Git 倉庫直接導(dǎo)入,同時(shí)也有類似組件庫的概念。


design tools 3.jpeg

design tools 4.jpeg




Modulz

前 Invision 的設(shè)計(jì)師創(chuàng)業(yè)項(xiàng)目,大概是目前口碑最好的一款,最早在 Kickstarter 上面眾籌,已經(jīng)開放給眾籌用戶內(nèi)測很長時(shí)間了。最近剛剛拿到了 420 萬美金投資,并且馬上要發(fā)送內(nèi)測邀請給申請的用戶了。它的口號(hào)是:close the gap between design and code??梢娨靶姆浅4?。

design tools 5.jpeg

design tools 6.jpeg



Hadron

另一個(gè)類似的產(chǎn)品,因?yàn)榛?web,所以同時(shí)支持 OSX, Windows, and Linux 平臺(tái)。并且也支持 React 和 Vue,另外它還號(hào)稱支持任何前端框架。


design tools 7.jpeg




Shift

這個(gè)可以說是 Framer X 的增強(qiáng)版,一款自稱 Create production-ready design systems 的原型設(shè)計(jì)工具。提供了很多內(nèi)置的組件,也有一個(gè)組件商店。同時(shí)也支持 React 和實(shí)時(shí)協(xié)作。更變態(tài)的是還可以和大部分后端語言框架連接起來。


design tools 8.jpeg

design tools 9.jpeg




Alva

這款產(chǎn)品從界面上看很像網(wǎng)頁設(shè)計(jì)工具,并沒有圖像編輯工具。它只是提供了各種組件給用戶自由拖拽,也沒有代碼編輯界面,只能通過屬性欄更改屬性和增加動(dòng)效。


design tools 10.jpeg




Merge

UXPin 旗下將要推出的一款同類產(chǎn)品,界面很像 Adobe XD。亮點(diǎn)是設(shè)計(jì)組件可以直接同步到 Github,還可以自動(dòng)生成在線的 Design System 文檔庫。題外話:UXPin 這家公司的設(shè)計(jì)產(chǎn)品看起來做得很好,但為啥沒什么人用人氣也不高,一直是個(gè)迷。


design tools 11.jpeg

design tools 12.jpeg





Relate

計(jì)劃在 2020 年上線的另一款產(chǎn)品,目前 50% off 預(yù)售中??唇貓D不難看出,它支持各種前端語言,基于 React,擁有高度可視化的工具欄,還可以連接 Github 和云端。


design tools 13.jpeg


可以看出來,這類所謂的前沿設(shè)計(jì)工具針對的人群并不僅僅是設(shè)計(jì)師,而是設(shè)計(jì)師和工程師可以一起使用,目的就是打通兩者之間的壁壘。就像 Modulz 的愿景那樣:close the gap between design and code。


之前看到一位設(shè)計(jì)師在 Twitter 上說:


design tools 14.jpeg


我覺得很有感觸,未來是不是只有這三種設(shè)計(jì)師不敢保證,但針對 UI 設(shè)計(jì)領(lǐng)域,在產(chǎn)品界面越來越趨同化,組件越來越成熟的未來,也許我們真的只是一個(gè) design systems builder,我們的主要工作就是創(chuàng)建和維護(hù)可復(fù)用的一個(gè)個(gè) UI 組件。


目前的設(shè)計(jì)工具產(chǎn)能非常過剩,幾乎每周都有一些新工具出現(xiàn)。以上這些工具只是剛剛起步,最后誰會(huì)火起來誰也不知道,甚至這個(gè)趨勢是不是能被廣大設(shè)計(jì)師接受并真正成為下一個(gè)趨勢,都很難說。但可以肯定的是,新工具的不斷涌現(xiàn),人們的不斷討論,足以說明大家對現(xiàn)有傳統(tǒng)設(shè)計(jì)工具的不滿足,即使 Sketch、Figma 這些主流設(shè)計(jì)工具已經(jīng)把 Adobe 在 UI 設(shè)計(jì)領(lǐng)域的市場份額蠶食的所剩無幾,人們還是在不斷探索并創(chuàng)造更好用更符合現(xiàn)代 workflow 的新工具。至于誰會(huì)笑到最后,誰又會(huì)取代誰,讓我們拭目以待吧。





每天更新,
全站高品質(zhì)素材免費(fèi)下載!