只需1個(gè)細(xì)節(jié)修改就能突破個(gè)人作品上限
本次的指導(dǎo)老師皮總：
案例來源于我們的學(xué)員“大雁”，她在來葉子學(xué)堂之前做了2年的服裝陳列展示工作。是一位效率高，手速快，有韌勁，努力認(rèn)真，對自己要求非常嚴(yán)格的小姐姐。
這套帶有神秘、奇幻色彩的卡通風(fēng)格作品，從元素的運(yùn)用到文字的選擇都有了很大進(jìn)步。作品設(shè)計(jì)過程中不斷的追求完美，將這種神秘的氣息都非常準(zhǔn)確的傳達(dá)了出來。上對比圖！
其實(shí)，這套作品的設(shè)計(jì)過程也并非一帆風(fēng)順。大雁在經(jīng)歷了幾個(gè)版本的迭代后，才得到現(xiàn)在這個(gè)效果。所以我們在作圖的時(shí)候，一定要放平心態(tài)“慢工出細(xì)活”。
確定主題風(fēng)格出了幾版風(fēng)格稿（下面為篩選后的A、B方案）并與皮皮老師討論后，最終決定在方案A的基礎(chǔ)上繼續(xù)推進(jìn)。因?yàn)榉桨窤的“神秘”氣息更濃，故事感更強(qiáng)。
方案A
方案B
通常的登陸界面一般是由場景圖+LOGO組成的，如《陰陽師》《忘川風(fēng)華錄》《哈利波特》等。也有一些以LOGO為主，背景做極簡處理，如《明日方舟》《原神》等。
好的UI作品對文字都有較高要求。這里還有個(gè)趣事：我們不定時(shí)會和大廠的團(tuán)隊(duì)做交流訪問。恰好一次某美的UI負(fù)責(zé)人來我們這里想了解學(xué)生作品，結(jié)果一下子就看中了我們4位學(xué)員的作品圖。這些圖打動(dòng)他的原因就是文字的設(shè)計(jì)~甚至把一些效果為賣點(diǎn)的圖都比下去了~可見文字設(shè)計(jì)對界面設(shè)計(jì)的重要性~
當(dāng)然，游戲不止登錄、Banner這些展示型界面，還有一些列表型界面，這些界面里的標(biāo)題字（標(biāo)題字在設(shè)計(jì)上比系統(tǒng)字高一個(gè)層級）和系統(tǒng)字同樣也需要符合我們的主題風(fēng)格。在傳達(dá)信息的同時(shí)，還可以為主題氣質(zhì)加持，那叫一個(gè)“般配”！
你可能會問，字體種類這么多要怎么選擇才合適呢？今天我們就帶大家認(rèn)識一下字體。
我們大體上可以把字體歸納為3個(gè)種類：
1.?襯線體（中文的代表是宋體）
字形特點(diǎn)是筆畫上會有裝飾，筆畫粗細(xì)對比明顯；襯線體是在書寫體的基礎(chǔ)上發(fā)展起來的，所以它自帶一種歷史感。特點(diǎn)與感受如下表：
（以上來自網(wǎng)絡(luò)）
（以上來自往屆學(xué)員作品）
2.?非襯線體（中文的代表是黑體）
字形特點(diǎn)是去掉了襯線體的裝飾，筆畫粗細(xì)基本一致，變得簡潔很多。因?yàn)樵从诂F(xiàn)代，所以更簡潔易讀。特點(diǎn)與感受如下表：
（以上來自網(wǎng)絡(luò)）
（以上來自往屆學(xué)員作品）
3. 手寫體：
相對于前面兩種類型，手寫體更加有個(gè)性。手寫體因?yàn)闀鴮懝ぞ叩牟煌L(fēng)格感受也不同。特點(diǎn)與感受如下表：
以毛筆書寫感覺為代表的手寫體：
（以上來自往屆學(xué)員作品）
其他書寫感覺的手寫體：
（以上來自往屆學(xué)員作品）
以上三種字體在“感受”上是不同的，是什么感受呢？你感受一下。
回到大雁的這套圖，根據(jù)前面講的知識點(diǎn)，選擇襯線體最為合適~是不是挺簡單的？
圖中為選擇不同的字體，感受一下襯線體和非襯線體的氣質(zhì)。
那么字體選好了，問題也來了。設(shè)計(jì)感不足，完成度不夠。怎么辦？
要點(diǎn)1：不要面目全非，只要按需調(diào)整
a.在自己的字體庫中找個(gè)合適的現(xiàn)成字體，之后在其基礎(chǔ)上做設(shè)計(jì)。因?yàn)楝F(xiàn)成字體本身已經(jīng)過設(shè)計(jì)，視覺感舒適，以它為基礎(chǔ)會更高效~
Tips：平時(shí)多留意好看的字體，積累自己的字體庫，避免“字到用時(shí)方恨少”。
b.找到一個(gè)符合界面氣質(zhì)的海報(bào)或視覺作品中的字體做參考。把參考的風(fēng)格特點(diǎn)用到自己的字體中并替換文案。這是葉子學(xué)堂訓(xùn)練營里的方法，非常好用。（悄悄告訴大家：葉子學(xué)堂各位老師的花瓣分享里有大量優(yōu)秀的素材，還不快關(guān)注一波？）
大雁就是用這個(gè)方法參考了下圖這個(gè)字體。
要點(diǎn)2：添加符合風(fēng)格的裝飾
通常我們會在參考中提取關(guān)鍵元素，然后讓它從你界面的全世界路過……無孔不入的那種！文字作為重要內(nèi)容同樣需要。在這里我們提取的元素是“荊棘”。我們需要先對荊棘的輪廓造型進(jìn)行加工，使他的生長特征可以匹配文字中你想要替換的筆畫走勢。
畫！
換！
Piapiapia就完成啦~ 拿起我手中的小皮鞭！
很簡單有沒有？如此簡單、高效又出效果的方法交給你，應(yīng)該學(xué)會了吧~
來看看效果：
但是！簡單的辦法也有禁忌：
不要雨露均沾！要把他們看成一個(gè)整體，選取個(gè)別進(jìn)行重點(diǎn)刻畫即可~海王沒有好下場！
設(shè)計(jì)雖重要，但文字傳達(dá)信息的基本作用不要忘。識別度仍然是不可忽略的。如果你加了設(shè)計(jì)識別度卻下降了，那你做文字是干嘛嘞？
要點(diǎn)3：整體的排版節(jié)奏
簡單來說就是位置、大小等排版上的處理。這是一個(gè)即便你的文字沒有做設(shè)計(jì)，也能通過排版的節(jié)奏感提升字體整體逼格的方法！
a.突出你要表達(dá)的詞匯，確定你心中的“C”位。注意英文的斷句處理~不要為了C而C，強(qiáng)扭的瓜不甜。
b.整體大感覺做好后，再微調(diào)字間距。
c.調(diào)整“C”位節(jié)奏，做出前凸后翹的曲線美，讓它更閃耀！
d.上點(diǎn)小質(zhì)感！加點(diǎn)小氣氛！補(bǔ)充點(diǎn)裝飾文字豐富層次。到這里基本就完成啦。~撒花~
最后看一下對比效果~
除了文字之外，這種對輪廓造型的修改思路，能不能用到界面的其他內(nèi)容中呢？當(dāng)然可以啦！讓我們再次祭起前面提到的“從你界面的全世界路過”大法。
1.角色界面的頭像區(qū)，之前大雁只考慮到了功能，而缺少元素的結(jié)合。荊棘的造型在這里就可以為功能服務(wù)一下，還可以與其他界面作整體呼應(yīng)。
2.在組隊(duì)界面中也同樣利用荊棘替代原本的造型特征——可以說荊棘的使用無處不在。背景暗紋、信息框、交互控件等等。這種方式會極大加深觀看者對界面統(tǒng)一性的感受。
Tips：在一個(gè)界面里字體最好不要超過3個(gè)，但Logo這種特殊字體除外。
3.只要能想到的地方都可以使用關(guān)聯(lián)元素。在和大雁溝通的時(shí)候，皮皮老師給到的建議是要根據(jù)界面功能和需求去做設(shè)計(jì)，發(fā)揮自己的想象力?？梢宰鲆恍┯腥さ男≡O(shè)計(jì)，讓原本比較刻板的控件與主題之間的聯(lián)系更緊密。
其實(shí)對于荊棘造型的利用，不只限于控件這些小東西。在界面背景的處理上同樣可以運(yùn)用起來。在這個(gè)過程中，皮皮老師給到大雁的建議是盡量打開思路，多做嘗試。
如果我們作圖遇到了思路卡殼，可以去葉子學(xué)堂各位老師的花瓣里找靈感~ 前面辛苦畫的素材可不能浪費(fèi)，用起來?。ㄔ俅翁嵝眩鲌D時(shí)需要根據(jù)特定的界面需求做相應(yīng)的設(shè)計(jì)。不可以無腦的復(fù)制粘貼）
除了背景和界面的功能底圖中出現(xiàn)的荊棘元素外，“霧氣”作為另外的設(shè)計(jì)元素也起到了烘托氣氛的作用。是不是神秘感MAX?。?/p>
這里文字“WIN”的設(shè)計(jì)思路同前面講到的一樣。結(jié)合荊棘圖形，保證界面的統(tǒng)一性。
最后一張是活動(dòng)banner圖。只要確保符合整套界面的主題，那么在處理上就可以更跳脫一些。比如我們要做一個(gè)萬圣節(jié)活動(dòng)。那么僵尸手臂、南瓜燈、小蝙蝠，月圓之夜都是萬圣節(jié)必不可少的元素！
在皮皮老師的幫助下，大雁通過這套作品的迭代也完成了一次在UI設(shè)計(jì)道路上的蛻變。思考方式、解決問題的方式都有了進(jìn)步，思路也更開闊，對整體的把控也有了顯著的提升。
那么本次分享到這里就結(jié)束了，也歡迎大家隨時(shí)聯(lián)系葉子學(xué)堂，我們一直都在這里等你哦~~
