Needle福利分享·

Figma免費(fèi)好用插件分享！景觀項(xiàng)目中的交互程序也要顯得專業(yè)~

制圖 | 交互 | 用戶界面

從Needle前幾期競賽圖紙的分享中，可以看到給予通訊，網(wǎng)絡(luò)技術(shù)的交互程序作為一種景觀解決手段在景觀競賽與作品集項(xiàng)目中出現(xiàn)的頻率越來越高，在這里分享幾個(gè)適用于景觀項(xiàng)目的figma插件，包括一些常用的圖標(biāo)庫，快速繪制效果，分析其他網(wǎng)站設(shè)計(jì)元素，顏色控制，風(fēng)格化地圖填充等等，并附帶使用說明與安裝教程，歡迎大家領(lǐng)取好用插件與名稱！

Needle競賽星球

#0* 景觀趨勢

隨著Needle分享給大家的競賽圖紙?jiān)絹碓蕉?，我們發(fā)現(xiàn)有個(gè)很有趣的趨勢：應(yīng)用程序，交互元素在景觀競賽項(xiàng)目中出現(xiàn)的越來越頻繁。這種解決方式通常被成為Engage，泛指人們對項(xiàng)目的參與和互動(dòng)，而在互聯(lián)網(wǎng)背景下，無論是當(dāng)下比較火的元宇宙，亦或是幾年前“互聯(lián)網(wǎng)+”概念，都被吸納成為景觀項(xiàng)目的解決方案，基于移動(dòng)端的應(yīng)用程序與景觀產(chǎn)業(yè)或景點(diǎn)結(jié)合。不僅僅在學(xué)術(shù)項(xiàng)目中，在近年來的落地項(xiàng)目實(shí)踐中，對于基于交互程序的ar，vr與實(shí)體場景的結(jié)合也變得越來越多。

以2020 ALSA 通訊類榮譽(yù)獎(jiǎng)項(xiàng)為例，在項(xiàng)目“*52 To YOU || An Approach for a Collective Voice”中，設(shè)計(jì)師團(tuán)隊(duì)與來自全球設(shè)計(jì)公司 Sasaki 的數(shù)據(jù)分析和編程專家合作設(shè)計(jì)，讓那些無法參加 *52 to You 社區(qū)參與活動(dòng)的人有機(jī)會(huì)分享他們的河流體驗(yàn)，以及改善河流通道的反饋和想法在他們的社區(qū)。通過設(shè)計(jì)了基于地理空間的交互程序?qū)?RiverLine 試點(diǎn)項(xiàng)目的居民進(jìn)行了教育，然后分析了他們的反應(yīng)以制定試點(diǎn)項(xiàng)目的建議。這些互動(dòng)向農(nóng)村觀眾展示了景觀設(shè)計(jì)師的范圍，他們在這些練習(xí)之前可能不了解該領(lǐng)域 考慮到現(xiàn)代網(wǎng)絡(luò)環(huán)境，綜合視角結(jié)合服務(wù)設(shè)計(jì)，作為景觀項(xiàng)目中全面的溝通和公眾參與戰(zhàn)略，值得學(xué)習(xí)。

▲ 圖片來源：

John Dustin Toothman , Student ASLA; Wesley Lamberson; Whitney Brothers

Faculty Advisors: Brad Collett, ASLA

University of Tennessee at Knoxville

而在非農(nóng)業(yè)，生產(chǎn)領(lǐng)域，我們設(shè)計(jì)好一個(gè)交互程序也能夠?yàn)閳龅卦O(shè)計(jì)提供更多元化的實(shí)踐與解決方案，比如打卡點(diǎn)，對于場地聲音的回放，ar虛擬場景甚至是線下主題活動(dòng)。

▲ 圖片來源 ：拯救動(dòng)物園 哈爾濱工業(yè)大學(xué)建筑學(xué)院 賀潔 馬琳 劉月 點(diǎn)此獲取艾景獎(jiǎng)高清圖紙

#02 關(guān)于Figma 與figma插件

好的交互程序離不開好的用戶研究與用戶界面設(shè)計(jì)，這也是常說的UX （User rescher）和UI （User Interface）。目前市面上主流的用戶界面與原型設(shè)計(jì)軟件有Figma，sketch 與Adobe XD以及國內(nèi)平臺(tái)Pixso。而figma相對來說教程眾多，上手難度低，插件庫生態(tài)好而被更多人選擇。

▲ Figma 自截

▲ Pixso 自截

▲ Sketch 自截

同樣，專業(yè)的事情由專業(yè)負(fù)責(zé)，與Photoshop 與 Illustrator 這類圖形處理軟件相比，F(xiàn)igma提供了快速的組件與效果設(shè)定，例如按鈕，動(dòng)效等等。以及不同的原型機(jī)尺寸，能夠快速的讓我們制作一個(gè)交互程序原型并導(dǎo)出，豐富項(xiàng)目的表現(xiàn)力。

▲ Adobe 自截

#03 Figma的使用與安裝

Figma 適用于任何運(yùn)行網(wǎng)絡(luò)瀏覽器的操作系統(tǒng)。無論是Mac還是Windows PC，甚至 Chromebook 都可以與 Figma 一起使用。它是同類產(chǎn)品中唯一可以做到這一點(diǎn)的設(shè)計(jì)工具，每個(gè)人仍然可以共享、打開和編輯 Figma 文件。所以要使用只需要前往Figma官方網(wǎng)站即可創(chuàng)建賬號(hào)并使用。（需要翻墻技能）

▲ 自截

當(dāng)然，F(xiàn)igma已經(jīng)被Adobe收購，日后我們可能就是以這樣的方式使用了。

▲ 來自網(wǎng)絡(luò)

#04 插件分享

/ 安裝與使用插件 /

在分享插件之前，先簡單介紹下插件的安裝與使用。插件的入口「Plugins」位于首頁的左上方，用戶可以在該頁面瀏覽、搜索所有插件。相比傳統(tǒng)的安裝與更新插件的方式，你只需要鼠標(biāo)輕輕點(diǎn)擊下「Install」，插件立馬安裝完成，即可上手使用，而且插件的更新也是毫無感知，設(shè)計(jì)師唯一需要關(guān)注的只有設(shè)計(jì)本身，插件管理、文件存儲(chǔ)、同步、協(xié)同的問題都無需再投入任何精力。

▲ Figma 自截

使用 Figma 插件的方法主要有三種：

*. 從系統(tǒng)的頂部菜單欄上的「Plugins」入口選擇插件；

2. 在文件內(nèi)右鍵呼出菜單，從「Plugins」入口選擇插件；

3. 快捷鍵 ? + / 呼出搜索，輸入插件名。

▲ Pixso 自截

這里分享四個(gè)個(gè)最基本的和適合景觀項(xiàng)目的插件，能夠讓同學(xué)們快速上手操作。

A. Iconify

Iconify 內(nèi)有 50 個(gè)圖標(biāo)庫，包含超過 40,000 個(gè)圖標(biāo)。如果要找圖標(biāo)直接搜索，然后「add icon 」即可。用 iconify 來處理搭建原型階段的圖標(biāo)需求再好不過，也省去了打開 iconfont 網(wǎng)頁找圖標(biāo)的麻煩。

02*yin.com/figma-plugin

B. Chroma colors

Chroma colors 可以通過選中多個(gè)對象快速創(chuàng)建 Color styles，省去了為每個(gè)顏色手動(dòng)創(chuàng)建 style 的重復(fù)勞動(dòng)，在搭建組件庫初期幫助很大。能夠很好的讓你的應(yīng)用程序界面與設(shè)計(jì)主題匹配的上。

02*yin.com/figma-plugin

C. Blush

插畫藝術(shù)是很受歡迎的一種視覺表現(xiàn)形式，通過Blush可以在豐富多彩的圖庫中找到你所需要的插畫。Blush內(nèi)置有海量世界各地的藝術(shù)家的漂亮插畫，支持下載SVG格式，方便你更好地控制圖層、顏色、濾鏡等，同時(shí)可以自定義插圖的每個(gè)變量，以創(chuàng)建自己獨(dú)特的構(gòu)圖。

02*yin.com/figma-plugin

D. Mapsicle

好用的地圖生成插件，可以修改它的很多屬性得到你想要的實(shí)時(shí)地圖截圖，風(fēng)格選擇也比較多，例如暗色系地圖。對于我們做景觀，建筑，規(guī)劃一些經(jīng)常與地圖相關(guān)的同學(xué)，這個(gè)插件十分必要，免于操勞在到處找地圖風(fēng)格，再截圖到 figma。

02*yin.com/figma-plugin

Final Part

相比于之前分享的各種類型插件，figma的插件無疑是最友好的之一，因此我們這次只是簡單介紹一下交互界面的設(shè)計(jì)軟件以及一些方便大家快速使用的插件，起一個(gè)拋磚引玉的左右，同樣同學(xué)們可以思考一下在作品集中多種維度呈現(xiàn)自己對于設(shè)計(jì)的思考以及解決場地問題。如果有同學(xué)們對這一方面更感興趣，歡迎聯(lián)系我們，日后考慮出有關(guān)方面更深入的教程與福利。

最后所有的插件網(wǎng)站都放在文末啦，需要的同學(xué)們快來收藏保存吧！

Iconify

02*yin.com/community/plugin/7350983902727**38*

Blush

02*yin.com/community/plugin/8389595**4*758*040

Chroma colors

02*yin.com/community/plugin/7392370584505299*9

加入Needle競賽交流群，

關(guān)注最新競賽資訊！

加群請備注

“競賽交流+就讀院校+專業(yè)年級(jí)”。

wechat：mysteriousmr_quin

Needle主頁君 莊莊