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ū)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)玄窝。