零基礎(chǔ) UI 入門｜UI設(shè)計師避不開的軟件學(xué)習(xí)（第三彈）
1.1 為什么不選 PS 和 AI
在今天，UI 界面設(shè)計的主力工具是 Figma、Sketch 或 XD，而不是老牌設(shè)計工具 Adobe Photoshop 和 Illustrator。
具有三十幾年歷史的 PS、AI，不僅包含海量的用戶基礎(chǔ)，也擁有深不見底的功能性。我們今天設(shè)計的扁平化界面，使用 PS、AI 也全都能實現(xiàn)得出來。
但是，為什么這兩個巨頭在 UI 領(lǐng)域沒有成為大家的主要選擇？
因為 PS 和 AI 實在太復(fù)雜了……
復(fù)雜不完全是貶義詞，是這兩個軟件功能強(qiáng)大的側(cè)面證明。但相對而言，UI 界面又太簡單了……主流的扁平界面在頁面實現(xiàn)上沒有難度可言。
更細(xì)致點說明，PS 是一款針對照片調(diào)節(jié)（修圖）、合成、排版的 “位圖” 工具，它可以用來實現(xiàn)各種復(fù)雜的平面視覺效果，只有你想不到的，沒有它做不到的。
而 AI 和 PS 不同的是，它是一個 “矢量繪圖“ 工具。它的主要目標(biāo)，是用矢量工具來實現(xiàn)復(fù)雜的矢量圖形輸出，包括插畫、字體、紋路圖案等。
它們想要做界面一樣可以，但對于簡單 UI 界面來說，功能就太臃腫了。騎自行車可以代步去家附近的超市，但顯然我們沒必要為此開一輛歐洲重卡……
Figma 等工具的目標(biāo)，就是專注 UI 界面，提供最最高效、最便捷的功能。它們不僅軟件安裝體積是 PS 的幾十分之一，而且系統(tǒng)資源消耗少，讀取速度快，功能更有針對性。
在面對一個畫布有幾十上百個界面的常見需求下，具備 PS、AI 無法比擬的效率。
所以，新手一定要認(rèn)清，軟件是有針對性的。PS、AI 雖然也要學(xué)習(xí)，但它們處理的東西并不是 UI 界面而是其它關(guān)聯(lián)的設(shè)計類型。
需要設(shè)計界面的時候，我們就要從專業(yè) UI 設(shè)計軟件中挑選，而我主要推薦 —— Figma。
1.2 為什么是 Figma
UI 設(shè)計軟件有非常多，因為開發(fā)難度并不大。從最早的 Sketch 開始，到今天有一定用戶基數(shù)的國內(nèi)外工具已經(jīng)接近 10 種。
只要稍微接觸下這些軟件，就會發(fā)現(xiàn)其實它們同質(zhì)化是非常嚴(yán)重的。因為 UI 所需的功能就那么一點，軟件是無法在功能上做出太多文章的。
正常情況下，只要我們掌握了其中一款，其它軟件就不用再重新學(xué)習(xí)。
而這么多軟件中，為什么我沒有推薦 Adobe XD 或者知名度更高的 Sketch，也是有原因的。雖然核心功能差不多，但是 Figma 本質(zhì)是一個 Web App，它是在瀏覽器中可以直接加載和操作的云端設(shè)計軟件。
云端帶來的好處就是支持團(tuán)隊協(xié)作，多人實時管理項目文件，共同修改、編輯設(shè)計內(nèi)容，分享設(shè)計畫布，而不用像傳統(tǒng)的設(shè)計軟件一樣需要將設(shè)計文件傳來傳去。
除此以外，F(xiàn)igma 的另一個隱藏優(yōu)勢就是圖形渲染效率和性能優(yōu)化。當(dāng)一個畫布中置入大量頁面和位圖以后，能以遠(yuǎn)超同類工具的速度完成渲染，并且對 CPU、內(nèi)存的占用可以控制在合理的范圍，遠(yuǎn)勝于 Sketch 這種內(nèi)存黑洞。
這兩個優(yōu)勢是新手很難感知到的，但它們對項目產(chǎn)生的實際影響卻意義重大，這才是越來越多大廠團(tuán)隊選擇 Figma 的原因，而不是單單因為 Figma 的自動布局、線上社區(qū)、在線插件等特色功能。
并且 Figma 目前對于個人用戶學(xué)習(xí)和使用基本都是免費(fèi)的，我們無需破解或是一開始學(xué)習(xí)就支付高昂的軟件費(fèi)用，遠(yuǎn)比 XD 或者 Sketch 友好。
當(dāng)然，F(xiàn)igma 也不是只有優(yōu)點。目前 Figma 最大的使用阻力就是必須要聯(lián)網(wǎng)來使用，斷網(wǎng)就無法登錄。根據(jù)反饋，可能部分非電信寬帶的用戶可能很難流暢登錄，需要使用 VPN 進(jìn)行加速。
2.1 Figma的軟件安裝
Figma 的安裝使用和其它工具有點不太一樣，還是需要簡單說明一下。Figma 包含了兩種使用場景，網(wǎng)頁和客戶端。
客戶端安裝沒啥好說的（Figma專用網(wǎng)頁瀏覽器），登錄下面的網(wǎng)址，下載對應(yīng)系統(tǒng)的客戶端再安裝并注冊登錄就行了。
https://www.figma.com
Figma 官方?jīng)]有中文版本，如果想要漢化，那么就要使用國內(nèi)第三方制作的中文版本了，可以到下面鏈接中下載（不是太建議）。
https://www.figma.cool/cn
如果不裝客戶端，想要用網(wǎng)頁版本的，直接在官網(wǎng)注冊并登錄就行了。但一定要記得在 Figma 下載頁面中安裝第三列的桌面字體插件，這樣才可以讓網(wǎng)頁讀取本地的字體庫。
安裝好 Figma 并打開應(yīng)用能加載完整的界面，就證明安裝成功，可以開始后續(xù)操作學(xué)習(xí)了。
2.2 Figma 的主要功能
Figma 是一個非常簡單的軟件，不要報太大的壓力來接觸。我將 Figma 的主要功能拆分成下面幾類，方便大家理解：
文件管理系統(tǒng)
界面設(shè)計功能
布局響應(yīng)功能
樣式組件功能
連線交互功能
團(tuán)隊協(xié)作功能
只要你們把功能拆開來學(xué)習(xí)，掌握起來是特別快的，它甚至還沒有 Word 和 Powerpoint 復(fù)雜。下面我們對每個模塊做一個簡單的介紹。
2.2.1 文件管理系統(tǒng)
Figma 的文件管理系統(tǒng)，主要包含個人文件和團(tuán)隊文件管理兩個模塊。
個人文件基本都會存放在界面列表中的 Crafts 文件夾內(nèi)，所有創(chuàng)建的設(shè)計文件都會自動進(jìn)行保存。而每個創(chuàng)建的設(shè)計文件中，還包含若干的 Page 分頁，可以理解成一個設(shè)計文件下包含多個畫板可以快速進(jìn)行切換。
然后，才是具體的頁面、分組、圖層結(jié)構(gòu)。在 Figma 中，一個 Page 是可以包含多個頁面的。也就是正常文件層級是：
Craft - 文件 - Page - 畫板 - 分組 - 圖層
而團(tuán)隊文件管理，則是在創(chuàng)建團(tuán)隊以后的文件系統(tǒng)，每個團(tuán)隊下還可以包含不同的項目，它的層級為：
團(tuán)隊 - 項目 - 文件 - Page - 畫板 - 分組 - 圖層
免費(fèi)版本中，只允許用戶創(chuàng)建一個團(tuán)隊，一個團(tuán)隊下包含一個項目，一個項目中最多三個文件，每個文件內(nèi)最多三個 Page。付費(fèi)版本則允許在一個團(tuán)隊內(nèi)創(chuàng)建沒有數(shù)量限制的項目、文件和 Page。
2.2.2 界面設(shè)計功能
然后，就是界面設(shè)計功能了，如何把一個界面正常做出來的相關(guān)功能。Figma 設(shè)計頁面的邏輯其實非常非常簡單：
置入元素 - 調(diào)整屬性 - 完成排版
說通俗點，就是把元素丟進(jìn)畫板中，改下顏色尺寸樣式，再移動到合適的位置……
置入元素就 Figma 上方工具欄中的幾個圖標(biāo)，包含置入畫板、切片、圖片、矢量元素。
調(diào)整屬性，則是修改這些元素的相關(guān)參數(shù)，選中后在右側(cè)面板就能看見。包含基本參數(shù)、文字設(shè)置、圖層設(shè)置、填充色、描邊、效果等設(shè)置內(nèi)容。只要動手嘗試下基本都能明白怎么回事，基本沒有操作難度。
最后完成排版，就是調(diào)整元素的位置了。Figma 位置布局的調(diào)節(jié)中最重要的就是間距的標(biāo)識，移動圖層會顯示它和其它同級元素的邊距，以此確定自身的位置。
除了這些以外，還值得注意的功能，就只有蒙版和布爾運(yùn)算了。蒙版就是創(chuàng)建一個幾何區(qū)域，將所有元素顯示到這個區(qū)域的功能，用來裁切圖片尺寸。布爾，則是完成多個幾何圖形之間進(jìn)行合并、相減、相交、去重的功能，主要用在圖標(biāo)上。
以上這幾樣功能，可以幫助你實現(xiàn)所有扁平化設(shè)計的頁面，后續(xù)的所有其它內(nèi)容，只是增加設(shè)計的效率，對于設(shè)計的樣式本身沒有任何影響。
2.2.3 布局響應(yīng)功能
UI 中包含了大量重復(fù)、類似的元素，而 Figma 提供了一個神器 —— Auto layout 自動布局功能。這部分的功能，是專門針對排版的進(jìn)階功能。
該功能可以幫助我們實現(xiàn)背景隨內(nèi)容調(diào)整、列表項目任意移動、列表間距快速調(diào)整等需求。
UI 和平面不同的是，我們設(shè)計的很多元素的尺寸在真實項目環(huán)境中不是固定的，而是會變動的。即我們所謂的頁面響應(yīng)、適配，將一個畫布的設(shè)計應(yīng)用到不同尺寸中去。
適配不是等比的縮放，有不同的對齊和放大原則，F(xiàn)igma 也可以很好的對元素進(jìn)行響應(yīng)式的設(shè)置，來滿足畫面或組件的尺寸變更效果。
雖然其它軟件也有類似功能，但 Figma 是完成度最高，且體驗最好的。這些功能極大改善了項目設(shè)計的效率，讓元素繁雜的頁面調(diào)整起來更得心應(yīng)手。
2.2.4 樣式組件功能
在一個專業(yè)項目中，會包含一些固定的色彩、字體、控件、組件。我們雖然可以通過規(guī)范設(shè)計的參數(shù)并背下來，完成內(nèi)容設(shè)計。但是，這種做法效率太低。
Figma 允許我們對色彩、字體、效果進(jìn)行預(yù)設(shè)，然后讓頁面的元素綁定這些預(yù)設(shè)好的效果，修改預(yù)設(shè)的參數(shù)，所有綁定元素也會同時修改。
換句話說，你定了一個價格字體是 24 號，大紅色，綁定了快 200 個價格元素。下個需求改版要改成20 號的橙色，你只需要修改樣式預(yù)設(shè)，就能統(tǒng)一修改那 200 個價格元素，不用手動調(diào)整。
而組件 Component，則是把整個元素、編組做成預(yù)設(shè)。比如上面看到的列表，雖然它們的圖標(biāo)、文字不一樣，但本質(zhì)上它們是同一種東西。
只要我們創(chuàng)建一個組件，然后批量復(fù)制出來，你就可以通過修改原始組件控制其它組件的樣式。這是 UI 項目規(guī)范實踐的必備功能，幫助我們管理全局組件樣式。
2.2.5 連線交互功能
Figma 作為設(shè)計軟件，也支持一些基本的交互動演示和動畫效果實現(xiàn)。我們可以通過連線的功能，來完成頁面跳轉(zhuǎn)和功能演示。
雖然 Figma 的交互動畫效果比其它設(shè)計軟件完善，但不要把它想的太復(fù)雜或太高級。它僅僅是為了比較直觀的幫助我們作出頁面跳轉(zhuǎn)的示意，但不是創(chuàng)建出精巧有趣的動畫細(xì)節(jié)。
創(chuàng)建好的演示，可以比較輕松的分享出去，讓其它人通過鏈接快速查看跳轉(zhuǎn)演示，了解項目內(nèi)容。
2.2.6 團(tuán)隊協(xié)作功能
最后，就是團(tuán)隊協(xié)作功能了。因為這基本是一個付費(fèi)功能，所以只簡單介紹下。Figma 在創(chuàng)建團(tuán)隊后可以邀請其他成員加入，共同編輯項目內(nèi)容。
除此之外，藍(lán)湖（沒聽過的可以忽略）有的功能基本上我們都可以通過 Figma 的協(xié)作功能實現(xiàn)，包括頁面標(biāo)記、留言，參數(shù)參看，切圖導(dǎo)出，代碼查詢等等。
一般靠譜點的公司都會使用付費(fèi)功能，一方面正常啟用團(tuán)隊協(xié)作，另一方面，我們不用再中間再多一道藍(lán)湖的上傳了。
Figma 是一個上手難度極低的工具，前兩個知識點，是一天內(nèi)就能掌握完的，有 PS、AI 基礎(chǔ)甚至一兩個小時就能掌握的。而后面的功能，則是需要在具體項目實踐中才有使用價值的。
目前我們錄制了一套新的 Figma 教學(xué)，已上傳到 B 站，可以幫助大家快速入門。
點擊跳轉(zhuǎn)：零基礎(chǔ)Figma快速入門
建議的學(xué)習(xí)路徑如下：
首先看完上方的教學(xué)，完成課程演示案例，對 Figma 整體操作、功能有一個初步的認(rèn)識
完成 10-20 個線上案例的臨摹，熟練掌握基礎(chǔ)功能和相關(guān)快捷鍵的應(yīng)用
開始學(xué)習(xí) UI 項目設(shè)計的實操，用基礎(chǔ)功能完成 2-3 套的界面，并總結(jié)
用自己做的項目，去創(chuàng)建響應(yīng)式布局、樣式組件、連線交互，總結(jié)功能實戰(zhàn)用法
在工作實戰(zhàn)中，再根據(jù)項目推進(jìn)效率研究和團(tuán)隊協(xié)作有關(guān)的功能
上面是我站在實用性角度上給的建議，對于新手，很多功能在短期內(nèi)是沒有實用性的，尤其是關(guān)于樣式、組件相關(guān)的功能。
尤其是變體 Variants、團(tuán)隊庫 Libraries 這類復(fù)雜功能，咋一看很高級很厲害，但是要有效應(yīng)用進(jìn)項目中是有一定門檻的。如果不具備模塊化設(shè)計和項目規(guī)范應(yīng)用意識，強(qiáng)行使用只會成為實踐過程的累贅。
再說通俗一點，就是學(xué)習(xí) UI 的前期，你只要用懂 Figma 基礎(chǔ)功能，做的出界面就可以了。進(jìn)階功能應(yīng)用，必須建立在一定數(shù)量的項目實踐基礎(chǔ)上，不然毫無價值。
最后一點，就是對于 Figma 插件的態(tài)度了。不要把插件想得太萬能，插件是用來輔助我們解決特定問題的，不是為了使用插件而使用插件。除了頭像插件外，不建議前期學(xué)習(xí)過多關(guān)注插件，徒增煩惱。
只要理解 Figma 相關(guān)功能模塊，和學(xué)習(xí)流程的步驟原因，就完全不會把軟件變成學(xué)習(xí) UI 的阻力。
不用擔(dān)心工作實際場景中使用哪款界面設(shè)計工具，只要掌握 Figma，那么其它 Sketch、XD、Js Design 等工具也就可以一看就懂，一用就會。
除了軟件課程中準(zhǔn)備的案例外，也從簡單到難準(zhǔn)備了 10 張臨摹的素材，圖標(biāo)、圖片、文字要大家自己查找和置入（學(xué)習(xí)的一部分）。
想要獲取免費(fèi)素材，在超人的電話亭公眾號中回復(fù) “Figma臨摹” 即可。
有問題可以在評論區(qū)留言，下篇再見！
本系列其他文章傳送門：
零基礎(chǔ) UI 入門｜解析UI設(shè)計概念和就業(yè)形勢（第一彈）
零基礎(chǔ) UI 入門｜UI設(shè)計師的技能要求和學(xué)前必備素材（第二彈）
