1.1 UI設(shè)計(jì)師的技能組成
要成為一名優(yōu)秀的設(shè)計(jì)師菩咨，包含兩部分能力，一部分是顯性的陡厘，一部分是隱性的抽米。
顯性能力即一些容易系統(tǒng)學(xué)會(huì)并輸出的技能，如軟件水平糙置、界面設(shè)計(jì)云茸、動(dòng)效設(shè)計(jì)等。隱性能力谤饭，是不容易展示且比較難展開(kāi)學(xué)習(xí)的技能标捺，包含理論掌握、規(guī)范認(rèn)識(shí)揉抵、團(tuán)隊(duì)協(xié)作等亡容。
在經(jīng)過(guò)認(rèn)真的篩選后，我們將 UI 設(shè)計(jì)師在前期需要掌握的這兩部分技能制作成圖冤今，大家可以看下技能圖：
雖然每個(gè)細(xì)分領(lǐng)域的技能都可以無(wú)窮無(wú)盡的進(jìn)行深入闺兢，但我們不可能把有限的時(shí)間投入到無(wú)限的學(xué)習(xí)里。
所有技能的掌握戏罢，都是為了滿足在真實(shí)項(xiàng)目中有效輸出和落地屋谭，后續(xù)的分享我們也將圍繞在這個(gè)目標(biāo)中展開(kāi)脚囊。先掌握每個(gè)領(lǐng)域的必要基礎(chǔ)內(nèi)容，對(duì)完整的輸出流程有概念以后桐磁，再開(kāi)始深入某個(gè)領(lǐng)域?qū)Ｑ谢谠牛@才是正確的學(xué)習(xí)方式。
1.2 顯性技能介紹
UI 設(shè)計(jì)師的顯性技能必然是我們首先要掌握的東西所意，雖然想法、思路催首、經(jīng)驗(yàn)都很重要沒(méi)錯(cuò)扶踊。但是想讓別人了解你靈魂前，他們肯定更在意外貌……
作為設(shè)計(jì)師郎任，UI 產(chǎn)出物最直觀的就是我們每天都會(huì)看見(jiàn)的圖標(biāo)和界面秧耗。
圖標(biāo)即出現(xiàn)在界面中的圖形標(biāo)識(shí)符號(hào)以及應(yīng)用的啟動(dòng)圖標(biāo)。圖標(biāo)雖然有大量的素材可以用舶治，但是想滿足項(xiàng)目自身需求分井、風(fēng)格統(tǒng)一的圖標(biāo)，基本只能依靠獨(dú)立繪制來(lái)完成霉猛。
界面設(shè)計(jì)尺锚，則是輸出界面的視覺(jué)能力，我們定義的界面視覺(jué)能力是在不受外力干擾下惜浅，你可以輸出符合規(guī)范瘫辩、基本交互、平面要素的美觀界面坛悉，簡(jiǎn)稱(chēng)就是飛機(jī)稿輸出能力伐厌。
動(dòng)效設(shè)計(jì)，是在輸出靜態(tài)頁(yè)面基礎(chǔ)上裸影，豐富使用體驗(yàn)的手段挣轨。通過(guò)增加一些有趣、簡(jiǎn)單的動(dòng)效轩猩，來(lái)讓操作效果更生動(dòng)卷扮，或者作為情感化設(shè)計(jì)的一部分。
在項(xiàng)目設(shè)計(jì)中均践，拋開(kāi)產(chǎn)品画饥、體驗(yàn)這些內(nèi)容和基本視覺(jué)樣式，最讓人關(guān)注的東西是對(duì)項(xiàng)目設(shè)計(jì)規(guī)范的搭建與應(yīng)用浊猾。如何在多個(gè)頁(yè)面中保持視覺(jué)風(fēng)格的一致性抖甘。
最后骂际，就是前面這些內(nèi)容都輸出完了孝治，需要將設(shè)計(jì)的內(nèi)容提交給程序員進(jìn)行樣式的開(kāi)發(fā)胞谈，那么就要實(shí)現(xiàn)對(duì)設(shè)計(jì)內(nèi)容進(jìn)行標(biāo)注和切圖文件的輸出填具。顯性技能對(duì)于新手來(lái)說(shuō)，最大的優(yōu)點(diǎn)就是知識(shí)點(diǎn)是相對(duì)固定的艰额，練習(xí)方法也是固定的澄港，只要通過(guò)刻意練習(xí)的方法，就可以積累和提前柄沮。
1.3 隱性技能
隱性技能相對(duì)就是一些比較抽象的能力回梧，它們不再像顯性的這些這么容易進(jìn)行訓(xùn)練和制定客觀的標(biāo)準(zhǔn)。
首先就是理解規(guī)范祖搓，沒(méi)有規(guī)范是必然輸出不了界面的狱意。但移動(dòng)端的設(shè)計(jì)規(guī)范，并不是你們想的官方準(zhǔn)備個(gè)文檔拯欧，里面數(shù)值寫(xiě)清楚了详囤，你背下來(lái)就行。而是理解哪些規(guī)范是必須要遵守的镐作，哪些是可以靈活變動(dòng)的（而可以自定義的是大多數(shù)）藏姐。
交互思維，則是如何讓產(chǎn)品和界面操作起來(lái)合理的思維能力该贾。平心而論羔杨，這種能力是只能依靠自己的 “多學(xué)多看” 積累的。交互書(shū)籍帶來(lái)的幫助只是解釋你留意到的現(xiàn)象原因杨蛋，但不會(huì)告訴你遇到問(wèn)題的時(shí)候具體應(yīng)該怎么做问畅。
團(tuán)隊(duì)協(xié)作能力，則需要比較具體的工作經(jīng)驗(yàn)和技術(shù)認(rèn)知了六荒。我們?nèi)绾斡行У睦斫庠O(shè)計(jì)的需求护姆，將設(shè)計(jì)的意圖傳遞給別人，高效的評(píng)審和過(guò)稿掏击，都是團(tuán)隊(duì)協(xié)作能力的體現(xiàn)卵皂。
審美水平，是一個(gè)設(shè)計(jì)師的品味砚亭。品味的高低是可以在作品集中感受出來(lái)的灯变，怎么布局，怎么用配圖捅膘，怎么選用設(shè)計(jì)風(fēng)格添祸。審美的落差很多時(shí)候可以填補(bǔ)技術(shù)上的缺陷。
最后就是理論掌握了寻仗，基本上上面所有講過(guò)的細(xì)分技能點(diǎn)都有各自的理論刃泌、術(shù)語(yǔ)。設(shè)計(jì)領(lǐng)域中，不管多有用的理論耙替，脫離實(shí)踐都毫無(wú)意義亚侠。理論掌握的正確時(shí)機(jī)是在實(shí)踐過(guò)程中查找并融匯貫通的。
隱性技能都是在實(shí)踐過(guò)程中逐步積累的俗扇，在后續(xù)的分享里硝烂，我會(huì)將各種觀點(diǎn)、理論铜幽，融入到具體的案例和實(shí)踐步驟中說(shuō)明滞谢。盡可能幫助大家增長(zhǎng)這方面的知識(shí)。
2.1 學(xué)習(xí) UI 用的設(shè)備建議
相對(duì)其它設(shè)計(jì)類(lèi)型來(lái)說(shuō)除抛，UI 設(shè)計(jì)對(duì)硬件的要求可以說(shuō)相當(dāng)?shù)牡褪ㄑ睿灰幸慌_(tái)不是太老的電腦，無(wú)論是蘋(píng)果 Mac 還是 Windows镶殷，對(duì)前期學(xué)習(xí)來(lái)說(shuō)是毫無(wú)壓力的禾酱。
下面簡(jiǎn)單介紹下做 UI 所需的電腦配置和系統(tǒng)微酬，如果已經(jīng)滿足這個(gè)條件绘趋，可以在前期不用考慮買(mǎi)新電腦的事。盡量在未來(lái)掌握好基礎(chǔ)軟件特性颗管，明確的知道配置不夠用時(shí)陷遮，再根據(jù)需要升級(jí)電腦，降低前期的經(jīng)濟(jì)壓力垦江。
CPU：15年以后購(gòu)買(mǎi)的 i5 以上的 CPU
內(nèi)存：不低于 8G帽馋，如果能升級(jí)可以換成 16G
硬盤(pán)：只要是固態(tài)硬盤(pán)就可以，對(duì)速度沒(méi)有太大要求
顯卡：對(duì)顯卡沒(méi)有要求比吭，只要正常能用就行
可以說(shuō)绽族，如果是蘋(píng)果電腦用戶，15 年以后的 Macbook Pro 筆記本衩藤、一體機(jī)都沒(méi)有問(wèn)題吧慢。而 Windows 用戶只要不是之前買(mǎi)早期上網(wǎng)本的也大多可以滿足。
如果實(shí)在是想換設(shè)備赏表，就只建議購(gòu)買(mǎi) Mac 了检诗，雖然 Windows 有些軟件可以替代，但更多的 UI 生產(chǎn)力工具只有 Mac 才有瓢剿。
Mac 電腦中逢慌，主要推薦 Macbook Air M1 和 Mac Mini M1，M1 芯片的性能完全能滿足從學(xué)習(xí)到工作的生產(chǎn)力性能需求间狂，盡量把內(nèi)存加到 16G 即可攻泼。而且相對(duì)來(lái)講價(jià)格更便宜，到某寶或者 PDD 找第三方渠道會(huì)比官網(wǎng)便宜很多。
最后建議一定要配一塊 24 寸以上的外接顯示器坠韩，至少有 1080P 以上的分辨率距潘，更大的內(nèi)容區(qū)域?qū)τ谠O(shè)計(jì)軟件的學(xué)習(xí)和輸出來(lái)說(shuō)至關(guān)重要。至于具體應(yīng)該什么型號(hào)沒(méi)有限制只搁，對(duì)色彩也沒(méi)有要求音比，自己外觀看著喜歡的即可。
2.2 所需學(xué)習(xí)軟件安裝
UI 設(shè)計(jì)相關(guān)的軟件主要包含三大類(lèi)：圖形氢惋、界面洞翩、動(dòng)效。
圖形軟件主要指的就是 Adobe 的 PS 和 AI焰望，用來(lái)處理復(fù)雜圖形樣式的軟件骚亿，例如復(fù)雜的圖標(biāo)、字體熊赖、H5視覺(jué)等来屠。是每個(gè)平面相關(guān)設(shè)計(jì)師都繞不開(kāi)的兩座大山。
界面軟件震鹉，就是設(shè)計(jì) UI 界面和排版的專(zhuān)用軟件俱笛。目前市場(chǎng)主要使用的工具有 Sketch / Figma / Adobe XD 三個(gè)，Sketch 只支持 Mac 系統(tǒng)传趾，Adobe XD 因?yàn)楦绿δ芴儆ぃ呀?jīng)不建議再花時(shí)間了解。所以主要建議從 Figma 開(kāi)始學(xué)習(xí)浆兰。
動(dòng)效軟件磕仅，則是用來(lái)處理交互動(dòng)效的工具。新手多數(shù)以為動(dòng)效必須由 Adobe Effect 來(lái)完成簸呈，其實(shí)它最適合制作的是動(dòng)效中的矢量動(dòng)畫(huà)榕订，但不能輸出完整的動(dòng)效原型。目前市面上做的最好蜕便，Windows 也支持的動(dòng)效工具是 Protopie劫恒，掌握它就可以忽略類(lèi)似 Principle、Origami 等其它同類(lèi)軟件玩裙。
軟件的安裝可以看我們下一篇準(zhǔn)備發(fā)布的前期學(xué)習(xí)的說(shuō)明合集兼贸。
至于不是直接涉及到 UI 產(chǎn)出的工具，類(lèi)似待辦事項(xiàng)吃溅、番茄溶诞、筆記工具，就根據(jù)大家自己喜好決定决侈。
2.3 相關(guān)材料準(zhǔn)備
還有螺垢，一些必備的素材喧务、資料也提前幫大家做了篩選，包括下面這些內(nèi)容枉圃。
首先就是蘋(píng)果 iOS 規(guī)范功茴，我們制作了一個(gè)獨(dú)立的翻譯 PDF 文件，大概有 200 頁(yè)孽亲，是前期必定要看完的坎穿，以及 iOS 官方提供的組件庫(kù)。
然后就是針對(duì)安卓系統(tǒng)的資源返劲，因?yàn)榘沧康囊?guī)范變動(dòng)非常頻繁玲昧，所以沒(méi)有做翻譯，大家可以打開(kāi)下面的規(guī)范官網(wǎng)篮绿，通過(guò)瀏覽器翻譯來(lái)查看孵延。同時(shí)，我們安卓所需的官方組件素材等我們也提供出來(lái)了亲配。
然后就是字體文件尘应，包含蘋(píng)果官方要求的蘋(píng)方中文字體，SF 系列英文字體吼虎，以及安卓的思源黑中文字體犬钢，以及 Roboto 英文字體。
最后鲸睛，就是常用的圖標(biāo)素材庫(kù)了娜饵，這里建議收藏 iconfont 和 iconpark 兩個(gè)網(wǎng)站坡贺，它們提供了大量的開(kāi)源圖標(biāo)素材官辈，可以直接應(yīng)用。
https://iconpark.oceanengine.com/home
https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
2.4 相關(guān)書(shū)籍推薦
最后遍坟，就是和 UI 有關(guān)的書(shū)籍推薦了拳亿。首先要聲明一下，看書(shū)僅僅是用來(lái)拓展我們的眼界愿伴，提供給我們一些視角和方法肺魁，只靠看書(shū)是無(wú)法獲得有效提升的。
所以隔节，我不打算推薦一個(gè)滿滿當(dāng)當(dāng)?shù)臅?shū)目鹅经，而是對(duì)于讀者現(xiàn)階段最有用的幾本。排名不分先后怎诫，大家可以自己根據(jù)喜好閱讀瘾晃。
以上推薦書(shū)籍可以到網(wǎng)上書(shū)店購(gòu)買(mǎi)，我們也另外準(zhǔn)備了對(duì)應(yīng) PDF 的電子版本幻妓，也在本篇分享內(nèi)容的素材包中蹦误，可以自行查找。
最后，就是順便推薦下我自己出版的《寫(xiě)給大家看的UI設(shè)計(jì)書(shū)》强胰，在京東可以直接找到舱沧，感興趣的同學(xué)可以購(gòu)買(mǎi)支持一哈！
以上內(nèi)容就是本系列第二篇偶洋，新手應(yīng)該認(rèn)識(shí)和做的準(zhǔn)備內(nèi)容熟吏。到下篇開(kāi)始我們就要具體針對(duì)軟件展開(kāi)說(shuō)明，介紹 Figma 的具體應(yīng)用邏輯和學(xué)習(xí)要點(diǎn)玄窝。
