任何視覺設(shè)計都需要考慮諸多因素，如品牌契合、體驗等。但是，并不是說未來的UI設(shè)
計必須佐以插畫，比如車機(jī)UI設(shè)計，就不適合摻雜過多的插畫，車機(jī)界面講究整潔、交互快
捷、安全。

再談?wù)刄I設(shè)計師從業(yè)問題。大家有沒有感覺到，UI設(shè)計師開始拼學(xué)歷了，大廠招聘的
相關(guān)崗位已經(jīng)從名校碩士起步了，這其實也在一定程度上反映出前面提到的問題：UI設(shè)計
到了瓶頸了。

作為普通高校畢業(yè)生，你如何跟名校設(shè)計師競爭？那一定是要有拿得出手的作品。而當(dāng)
下，立竿見影的提升方式就是插畫 UI。

這就是本書的創(chuàng)作背景。

關(guān)于設(shè)計軟件學(xué)習(xí)

我是一個美術(shù)設(shè)計專業(yè)的畢業(yè)生，當(dāng)我發(fā)現(xiàn)有Photoshop繪圖軟件和Flash動畫軟件時
就開啟了我的軟件學(xué)習(xí)之路。但是，很多優(yōu)秀的設(shè)計作品不僅僅是軟件的運(yùn)用，更多的是內(nèi)
心的表達(dá)和創(chuàng)造。在北京從事設(shè)計工作12年，發(fā)現(xiàn)在軟件學(xué)習(xí)方面全憑工作需要，所以我并
不是一直買教程學(xué)習(xí)，反而是更相信實戰(zhàn)造英雄，所以在這本書里我想分享給大家一種學(xué)習(xí)
習(xí)慣。

這里會有很多人好奇我初的軟件學(xué)習(xí)是如何開始的，這點跟學(xué)校老師要求我們完成
一幅作品、一套作業(yè)有直接關(guān)系，或許這也是很多設(shè)計師的起步。設(shè)計技能的學(xué)習(xí)和提升需
要有一個熱愛的開始。當(dāng)我在計算機(jī)設(shè)計（CG）雜志或《藝術(shù)與設(shè)計》雜志上看到學(xué)

前 言

III

長或一些CG藝術(shù)家的作品時，作為同專業(yè)的設(shè)計者是非常向往的，所以會找一些設(shè)計類網(wǎng)
站或者設(shè)計論壇，爬一些大神的設(shè)計文章，尋求些高效的設(shè)計絕招。工具不在于多，而
在于精。我開始學(xué)習(xí)的軟件不是Photoshop，而是CorelDraw，用得多的操作是鋼筆
或者套索工具，上色用得多的是透明形式的漸變。在起步階段，你會發(fā)現(xiàn)軟件使用技巧的
提升速度與練習(xí)時長成正比，所以那些簡單枯燥的練習(xí)很有必要。如果設(shè)計的內(nèi)容是你感興
趣的，則會錦上添花，甚至?xí)�幫助你提升得更快，而不至于就此終結(jié)你的設(shè)計之路。熟練之
后是發(fā)現(xiàn)問題的開始。這是設(shè)計的第二階段，這個階段需要不斷解決問題，也是開始對自己
作品提出要求的時候。無論是臨摹還是創(chuàng)作，出現(xiàn)的大多問題會來自主體物的形狀與色彩搭
配。這個階段需要設(shè)計者解決自身對形的把控問題，解決問題的辦法有很多，例如借助互聯(lián)
網(wǎng)的素材庫、實物照片，解決設(shè)計中構(gòu)圖、動勢以及配色等問題。如果想設(shè)計出令人印象深
刻的作品，就需要提升自己的整體能力，這就像游戲中通關(guān)的進(jìn)階階段。繼續(xù)熟用軟件，加
強(qiáng)對作品完整度的考慮、畫面質(zhì)感的追求，以及創(chuàng)意邏輯、用戶思維和用戶體驗的深入，都
會讓你成為一個有能力、有擔(dān)當(dāng)、從全局思考的設(shè)計師。設(shè)計的學(xué)習(xí)就像爬樓梯，一個臺階一
個臺階地走，一個腳印一個腳印地留。堅持就是勝利，必須有堅持的過程，方能成就高度。

我并不是職業(yè)網(wǎng)師，但是12年的互聯(lián)網(wǎng)和移動端工作經(jīng)驗告訴我有些事情是可以做的，
例如替一些設(shè)計者解惑。在過去3年的教學(xué)經(jīng)歷中，我見過很多設(shè)計者：有的人求知，有的
人求技，有的人打醬油。UI行業(yè)的飛速發(fā)展，帶來的業(yè)內(nèi)薪資優(yōu)勢大家有目共睹，這是一
個很好的學(xué)習(xí)目標(biāo)。有的人帶著熱情，作為能力并不全面的設(shè)計者在學(xué)習(xí)網(wǎng)絡(luò)課程中不斷完
善自我，從而能更好地創(chuàng)作出具有創(chuàng)意性的作品，這類設(shè)計者的共同特點是堅持不懈。任何
事就怕半途而廢，每次學(xué)一點停一點，走走停停之后好像你什么都懂一點，其實什么都沒深
入，也沒了高度。所以這本設(shè)計書會讓大家從每個完整的案例中學(xué)會一個簡單的操作軌跡，
時間不長，難度不高，操作軌跡相同卻又能推出不同的視覺效果，這也是設(shè)計的活學(xué)活用。
經(jīng)過反復(fù)練習(xí)你就會發(fā)現(xiàn)，當(dāng)你能打出一套組合拳的時候，量變到質(zhì)變的提升效果終將浮出
水面。

本書的創(chuàng)新性

1. 本書的前三章分別介紹了作為視覺設(shè)計師需要了解的UI行業(yè)流程，扁平風(fēng)格插畫的
不同形式，以及扁平風(fēng)格設(shè)計作品在多種藝術(shù)形式下的衍生品。這三章內(nèi)容的介紹就像找對
象，你需要先大致了解對象的基本條件，例如身高、體重、樣貌和家庭條件。緊接著是接
觸，兩個人合不合適需要互相接觸，在接觸的過程中你會發(fā)現(xiàn)在生活中對方有很多與你并不

UI視覺與插畫

相同的經(jīng)歷，但終的三觀是一致的。

2. 這是一本針對UI視覺設(shè)計中插畫部分所做的案例教程。案例部分做了細(xì)分，例如第4
章人物部分，不僅講人物從頭到腳的設(shè)計思路以及人物姿態(tài)，還會將人物與場景結(jié)合，生成
完整的Banner案例。卡通形象部分設(shè)計中，會講從扁平風(fēng)格到手繪風(fēng)格的輕松轉(zhuǎn)換。在第5
章場景部分除了讓大家學(xué)會量化素材，還有如何去拓展思路，通過欣賞其他設(shè)計師的作品得
到更多靈感。

3. 打好基礎(chǔ)，學(xué)會獨立面對項目。本書中的案例除了對常規(guī)UI設(shè)計中圖標(biāo)、頁面的講
解，在后半部分還非常詳盡地講解了設(shè)計項目從初思考的草稿，到之后一步步搭建，再
到調(diào)整完成的過程，以及掌握必要的字體設(shè)計技巧，例如修改字體和手寫字、3D字體的設(shè)
計。行業(yè)內(nèi)有句話是技多不壓身，但技能多且更具備專業(yè)性，才是作品完整度的良好
基礎(chǔ)。

希望大家不要荒廢時光，即便是疫情期間，也要多學(xué)習(xí)，多讀書，多思考。如果要永葆
設(shè)計的青春，那就一起加油吧！

業(yè)精于勤荒于嬉，行成于思?xì)в陔S。后希望大家能深刻理解這句經(jīng)典名言，點亮自己
心中的目標(biāo)，義無反顧，勇往直前。

付堯（扶搖直上）于沈陽

本書約定

y
y
本書寫作和操作基于蘋果電腦（Mac），軟件界面與PC基本一致。提醒注意：在快
捷鍵的使用上，Mac的Com鍵=PC的Ctrl鍵。
y
y
本書中，Photoshop簡稱為PS，Illustrator簡稱為AI。
y
y
本書部分素材和部分源文件，請掃碼下載。

y
y
本書內(nèi)容盡可能保留干貨，操作步驟僅保留關(guān)鍵步驟，比如帶參數(shù)的步驟，具體操
作請到相關(guān)章節(jié)中掃碼觀看操作視頻。