太簡單了!別人要做一小時的頁面,我用這些效率插件一鍵生成

2022-5-12    seo達(dá)人


01 替代重復(fù)繁瑣操作的效率插件

智能填充

做設(shè)計時,同學(xué)們一定遇到過這種情況,某些模塊需要用圖片或文字進(jìn)行展示

用單調(diào)的圖形和隨意的文字占位不夠真實美觀,手動添加圖片編輯文本又太麻煩,能不能有工具幫我一鍵隨機(jī)生成并填充?

當(dāng)然可以,「智能填充」插件就是專門解決這類問題的。

選中任意文本,即可選擇智能填充人名、時間、日期、段落及對話等 9 種不同的預(yù)設(shè)內(nèi)容;選中非文本圖層、分組或畫板,就可以智能填充人物頭像、風(fēng)景、美食等 8 種類型的無版權(quán)圖片。

 

快速復(fù)制

做設(shè)計時,很多同學(xué)會遇到一個頁面中需要出現(xiàn)多個相同模塊的情況,比如商品列表、視頻頁、相冊等等。

處理起來也不難,多按幾次 Ctrl+C 和 Ctrl+V 就行。但復(fù)制出來的模塊經(jīng)常重疊在一起,還需要逐個拖拽排版……時間就是被這樣浪費的。

但其實,這些繁瑣的步驟完全可以用「快速復(fù)制」插件一鍵搞定。

只需做好第一個,選中全部圖層,打開插件,設(shè)定好橫向與縱向的復(fù)制數(shù)量及間距,點下按鈕就能一鍵復(fù)制。

像我演示用的這個即時設(shè)計的插件,復(fù)制完成后,還預(yù)留了按鈕,點一下就能打開「智能填充」,很貼心。

 

? 文本拆分

還有專門用于處理大段文字的「文本拆分」插件,能將一個文本圖層拆分為多個,方便分別設(shè)計排版;也可以將多個文本圖層組合為一個重新編輯。

類似的提高設(shè)計效率的插件還有很多,例如:

「圖標(biāo)尺寸調(diào)整」——可以批量調(diào)整不同 icon 及其外框大??;

「字體替換」——批量替換設(shè)計稿中使用到的所有字體,并保持原有文本樣式屬性;

「查找替換」——能搜索定位文本內(nèi)容并替換,且不改變原有文本樣式。

 

02 整合圖標(biāo)字體的資源插件

各種各樣的免費或付費的素材庫給我們提供了很多便利,但也不是所有類型的資源,都適合下載文件,再導(dǎo)入使用的。

比如圖標(biāo)和字體這兩類,使用頻率非常高,如果每次都需要下載導(dǎo)入安裝,無形中就增加了很多重復(fù)工作。

所以,很需要有一些工具,來讓這兩類資源的取用更加便捷,比如,圖標(biāo)插件和字體插件。

 

海量圖標(biāo)—— iconify、iconfont & IconPark

現(xiàn)在的圖標(biāo)庫都能直接下載 SVG 格式,所以不用太考慮顏色尺寸的問題。

但做設(shè)計久了,就會在電腦里存下許多圖標(biāo)文件,整理起來屬實麻煩,都刪掉了又可惜,萬一哪個還能用到呢?

這時候,如果安裝幾個圖標(biāo)插件,就沒有這些問題了。

點開插件,搜索想要的圖標(biāo),選中圖標(biāo)并修改尺寸和顏色,直接拖拽使用。

國內(nèi)常用的 iconify、iconfont 和 IconPark 都已有插件接入。

 

字體方案——字由插件

做海報、封面、banner 圖的時候,同學(xué)們應(yīng)該經(jīng)常會用到很多不同風(fēng)格的字體。

但經(jīng)常會遇到精挑細(xì)選并下載安裝了好幾款字體后,發(fā)現(xiàn)用在作品里視覺效果并沒有那么好,還得重新找字體并安裝……

面對這種情況,最省事的方式應(yīng)該用類似「字由」的第三方字體插件來管理字體。

安裝字由客戶端后,里面的字體方便查找,點一下就能激活,然后直接在設(shè)計時使用,幫我們省去了很多檢索和下載安裝字體的步驟

這里需要提出的是,Sketch 和 XD、PS 這些本地軟件應(yīng)該都是支持字由的,在線工具的話,目前只有「即時設(shè)計」支持字由,F(xiàn)igma 也是完全沒辦法用的。

當(dāng)然,即時設(shè)計的字體方案還是值得一說的,其實之前也提過挺多次了,“本地+云端”的多種方案,最大的亮點是:

1. 個人設(shè)計師不止可以使用本地安裝的字體和「字由」的字體,還能免費上傳自己的字體文件到云端和其他人一起使用。

2. 團(tuán)隊的版權(quán)字體還可以直接上傳到團(tuán)隊共享庫,所有團(tuán)隊成員都能隨時在線使用,完全不用下載安裝。

 

03 提供圖形配色方案的插件

圖形生成——不規(guī)則圖形

我經(jīng)常給星球的同學(xué)們布置一些作業(yè),而在設(shè)計過程中最常用的裝飾元素之一,就是不規(guī)則圖形,看起來簡約又高級。

需要不規(guī)則圖形時,最常見的做法是用鋼筆工具自己畫一個,但還有更快捷的方法,用「不規(guī)則圖形」插件隨機(jī)生成斑點或者波浪

這類插件一般包含很多預(yù)設(shè)方案,點一下就能隨機(jī)生成。

如果覺得隨機(jī)“搖”出來的圖形不合心意,還可以自己調(diào)節(jié)修改。斑點的錨點和曲率,波浪的高度、層數(shù)、峰數(shù)都支持自定義。

雙擊生成的不規(guī)則圖形,還能繼續(xù)拖拽修改形狀。這么一通修改下來,只有復(fù)制粘貼才能得到兩個完全相同的圖形了。

 

色彩使用——漸變色

同學(xué)們在設(shè)計作品中,經(jīng)常會用到漸變色,但是很多同學(xué)不擅長調(diào)出好看的漸變色,做出來的圖看起來很臟,尤其是顏色跨度較大的時候。

這種情況下,一個收錄若干經(jīng)典配色的「漸變色」插件就能幫上大忙。

如圖我用的這個漸變色插件,就收錄了來自 WebGradients 的 180 種線型漸變配色,可以一鍵快速填充;給出的漸變色方案,也都很具備學(xué)習(xí)參考的價值。

 

? 色彩搭配——圖片取色

我還找到了一個非常適合用來參考和使用色彩搭配的插件——「圖片取色」。

優(yōu)秀的攝影或設(shè)計作品中都具有極為豐富且和諧的色彩搭配,而「圖片取色」這個插件可以識別圖片中 5 種主要顏色,方便我們學(xué)習(xí)配色、汲取靈感。

用起來也很方便,選中圖片,再點一下「圖片取色」,就能精準(zhǔn)識別圖片中配色,并按照顏色占比依次展示。

 

04 點一下秒安裝/卸載

今天的插件就先分享這些了,上面的演示我都是用「即時設(shè)計」做的,Sketch、Figma 應(yīng)該也都可以找到不少類似的插件。

如果想要快速感受一下的話,可以直接打開即時設(shè)計,插件廣場里還有很多,安裝卸載也很方便,點一下就行。

安裝完回到編輯頁面就能直接使用,展開的列表里,每個插件在名字旁邊還配有簡單易懂的圖標(biāo),一眼看過去就能更快地定位自己想要的插件。


總結(jié)

提高效率減少重復(fù)操作,到整合常用資源讓取用更順手,再到圖形色彩的方案提供

即時設(shè)計充分照顧到設(shè)計過程中最常見的一些問題,已經(jīng)能滿足我大部分的需求了。

除了已有的這些,即時設(shè)計還在持續(xù)上新,官方還表示之后也會像 Sketch、Figma 一樣開放第三方插件。

現(xiàn)在只想喊他們快點開放,我已經(jīng)迫不及待想看看,國內(nèi)的大神能做出什么樣更好用的插件工具了!

鏈接我放在下面了,對這些插件感興趣的同學(xué)們,可以去體驗一下~

即時設(shè)計插件廣場:

https://js.design/pluginSquare

 

原文地址:菜心設(shè)計鋪(公眾號)

作者:菜心

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》太簡單了!別人要做一小時的頁面,我用這些效率插件一鍵生成

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



分享本文至:

日歷

鏈接

個人資料

存檔