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

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

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

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

關于設計軟件學習

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

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

前 言

III

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

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

本書的創(chuàng)新性

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

UI視覺與插畫

相同的經歷，但終的三觀是一致的。

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

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

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

業(yè)精于勤荒于嬉，行成于思毀于隨。后希望大家能深刻理解這句經典名言，點亮自己
心中的目標，義無反顧，勇往直前。

付堯（扶搖直上）于沈陽

本書約定

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

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