01 替代重復(fù)繁瑣操作的效率插件
? 智能填充
做設(shè)計(jì)時(shí),同學(xué)們一定遇到過這種情況,某些模塊需要用圖片或文字進(jìn)行展示。
用單調(diào)的圖形和隨意的文字占位不夠真實(shí)美觀,手動添加圖片編輯文本又太麻煩,能不能有工具幫我一鍵隨機(jī)生成并填充?
當(dāng)然可以,「智能填充」插件就是專門解決這類問題的。
選中任意文本,即可選擇智能填充人名、時(shí)間、日期、段落及對話等 9 種不同的預(yù)設(shè)內(nèi)容;選中非文本圖層、分組或畫板,就可以智能填充人物頭像、風(fēng)景、美食等 8 種類型的無版權(quán)圖片。
? 快速復(fù)制
做設(shè)計(jì)時(shí),很多同學(xué)會遇到一個(gè)頁面中需要出現(xiàn)多個(gè)相同模塊的情況,比如商品列表、視頻頁、相冊等等。
處理起來也不難,多按幾次 Ctrl+C 和 Ctrl+V 就行。但復(fù)制出來的模塊經(jīng)常重疊在一起,還需要逐個(gè)拖拽排版……時(shí)間就是被這樣浪費(fèi)的。
但其實(shí),這些繁瑣的步驟完全可以用「快速復(fù)制」插件一鍵搞定。
只需做好第一個(gè),選中全部圖層,打開插件,設(shè)定好橫向與縱向的復(fù)制數(shù)量及間距,點(diǎn)下按鈕就能一鍵復(fù)制。
像我演示用的這個(gè)即時(shí)設(shè)計(jì)的插件,復(fù)制完成后,還預(yù)留了按鈕,點(diǎn)一下就能打開「智能填充」,很貼心。
? 文本拆分
還有專門用于處理大段文字的「文本拆分」插件,能將一個(gè)文本圖層拆分為多個(gè),方便分別設(shè)計(jì)排版;也可以將多個(gè)文本圖層組合為一個(gè)重新編輯。
類似的提高設(shè)計(jì)效率的插件還有很多,例如:
「圖標(biāo)尺寸調(diào)整」——可以批量調(diào)整不同 icon 及其外框大?。?
「字體替換」——批量替換設(shè)計(jì)稿中使用到的所有字體,并保持原有文本樣式屬性;
「查找替換」——能搜索定位文本內(nèi)容并替換,且不改變原有文本樣式。
02 整合圖標(biāo)字體的資源插件
各種各樣的免費(fèi)或付費(fèi)的素材庫給我們提供了很多便利,但也不是所有類型的資源,都適合下載文件,再導(dǎo)入使用的。
比如圖標(biāo)和字體這兩類,使用頻率非常高,如果每次都需要下載導(dǎo)入安裝,無形中就增加了很多重復(fù)工作。
所以,很需要有一些工具,來讓這兩類資源的取用更加便捷,比如,圖標(biāo)插件和字體插件。
? 海量圖標(biāo)—— iconify、iconfont & IconPark
現(xiàn)在的圖標(biāo)庫都能直接下載 SVG 格式,所以不用太考慮顏色尺寸的問題。
但做設(shè)計(jì)久了,就會在電腦里存下許多圖標(biāo)文件,整理起來屬實(shí)麻煩,都刪掉了又可惜,萬一哪個(gè)還能用到呢?
這時(shí)候,如果安裝幾個(gè)圖標(biāo)插件,就沒有這些問題了。
點(diǎn)開插件,搜索想要的圖標(biāo),選中圖標(biāo)并修改尺寸和顏色,直接拖拽使用。
國內(nèi)常用的 iconify、iconfont 和 IconPark 都已有插件接入。
? 字體方案——字由插件
做海報(bào)、封面、banner 圖的時(shí)候,同學(xué)們應(yīng)該經(jīng)常會用到很多不同風(fēng)格的字體。
但經(jīng)常會遇到精挑細(xì)選并下載安裝了好幾款字體后,發(fā)現(xiàn)用在作品里視覺效果并沒有那么好,還得重新找字體并安裝……
面對這種情況,最省事的方式應(yīng)該用類似「字由」的第三方字體插件來管理字體。
安裝字由客戶端后,里面的字體方便查找,點(diǎn)一下就能激活,然后直接在設(shè)計(jì)時(shí)使用,幫我們省去了很多檢索和下載安裝字體的步驟。
這里需要提出的是,Sketch 和 XD、PS 這些本地軟件應(yīng)該都是支持字由的,在線工具的話,目前只有「即時(shí)設(shè)計(jì)」支持字由,F(xiàn)igma 也是完全沒辦法用的。
當(dāng)然,即時(shí)設(shè)計(jì)的字體方案還是值得一說的,其實(shí)之前也提過挺多次了,“本地+云端”的多種方案,最大的亮點(diǎn)是:
1. 個(gè)人設(shè)計(jì)師不止可以使用本地安裝的字體和「字由」的字體,還能免費(fèi)上傳自己的字體文件到云端和其他人一起使用。
2. 團(tuán)隊(duì)的版權(quán)字體還可以直接上傳到團(tuán)隊(duì)共享庫,所有團(tuán)隊(duì)成員都能隨時(shí)在線使用,完全不用下載安裝。
03 提供圖形配色方案的插件
? 圖形生成——不規(guī)則圖形
我經(jīng)常給星球的同學(xué)們布置一些作業(yè),而在設(shè)計(jì)過程中最常用的裝飾元素之一,就是不規(guī)則圖形,看起來簡約又高級。
需要不規(guī)則圖形時(shí),最常見的做法是用鋼筆工具自己畫一個(gè),但還有更快捷的方法,用「不規(guī)則圖形」插件隨機(jī)生成斑點(diǎn)或者波浪。
這類插件一般包含很多預(yù)設(shè)方案,點(diǎn)一下就能隨機(jī)生成。
如果覺得隨機(jī)“搖”出來的圖形不合心意,還可以自己調(diào)節(jié)修改。斑點(diǎn)的錨點(diǎn)和曲率,波浪的高度、層數(shù)、峰數(shù)都支持自定義。
雙擊生成的不規(guī)則圖形,還能繼續(xù)拖拽修改形狀。這么一通修改下來,只有復(fù)制粘貼才能得到兩個(gè)完全相同的圖形了。
? 色彩使用——漸變色
同學(xué)們在設(shè)計(jì)作品中,經(jīng)常會用到漸變色,但是很多同學(xué)不擅長調(diào)出好看的漸變色,做出來的圖看起來很臟,尤其是顏色跨度較大的時(shí)候。
這種情況下,一個(gè)收錄若干經(jīng)典配色的「漸變色」插件就能幫上大忙。
如圖我用的這個(gè)漸變色插件,就收錄了來自 WebGradients 的 180 種線型漸變配色,可以一鍵快速填充;給出的漸變色方案,也都很具備學(xué)習(xí)參考的價(jià)值。
? 色彩搭配——圖片取色
我還找到了一個(gè)非常適合用來參考和使用色彩搭配的插件——「圖片取色」。
優(yōu)秀的攝影或設(shè)計(jì)作品中都具有極為豐富且和諧的色彩搭配,而「圖片取色」這個(gè)插件可以識別圖片中 5 種主要顏色,方便我們學(xué)習(xí)配色、汲取靈感。
用起來也很方便,選中圖片,再點(diǎn)一下「圖片取色」,就能精準(zhǔn)識別圖片中配色,并按照顏色占比依次展示。
04 點(diǎn)一下秒安裝/卸載
今天的插件就先分享這些了,上面的演示我都是用「即時(shí)設(shè)計(jì)」做的,Sketch、Figma 應(yīng)該也都可以找到不少類似的插件。
如果想要快速感受一下的話,可以直接打開即時(shí)設(shè)計(jì),插件廣場里還有很多,安裝卸載也很方便,點(diǎn)一下就行。
安裝完回到編輯頁面就能直接使用,展開的列表里,每個(gè)插件在名字旁邊還配有簡單易懂的圖標(biāo),一眼看過去就能更快地定位自己想要的插件。

總結(jié)
從提高效率減少重復(fù)操作,到整合常用資源讓取用更順手,再到圖形色彩的方案提供。
即時(shí)設(shè)計(jì)充分照顧到設(shè)計(jì)過程中最常見的一些問題,已經(jīng)能滿足我大部分的需求了。
除了已有的這些,即時(shí)設(shè)計(jì)還在持續(xù)上新,官方還表示之后也會像 Sketch、Figma 一樣開放第三方插件。
現(xiàn)在只想喊他們快點(diǎn)開放,我已經(jīng)迫不及待想看看,國內(nèi)的大神能做出什么樣更好用的插件工具了!
鏈接我放在下面了,對這些插件感興趣的同學(xué)們,可以去體驗(yàn)一下~
即時(shí)設(shè)計(jì)插件廣場:
https://js.design/pluginSquare
原文地址:菜心設(shè)計(jì)鋪(公眾號)
作者:菜心
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》太簡單了!別人要做一小時(shí)的頁面,我用這些效率插件一鍵生成
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司