1、UI設(shè)計師入門學(xué)習(xí)知識點總結(jié)UI新手設(shè)計師來充電了！下面的教程是泛藝學(xué)苑老師帶學(xué)員時必講的入門輔導(dǎo)，包括圖標的類別、設(shè)計技法要點以及如何設(shè)計成系列的圖標，教程有作者原創(chuàng)實例演示，簡明易懂，特別值得每一個UI設(shè)計新手學(xué)習(xí)！【UI入門到精通教程>>】UI最重要組建之一就是圖標，隨著扁平化設(shè)計的進展趨勢，越來越注意圖標的簡潔與寓意表達，平面圖標已占主導(dǎo)地位?！綰I設(shè)計需要學(xué)什么？>>】每位設(shè)計師所處的階段所關(guān)注的要點是不一樣的，我把圖標設(shè)計分為2個階段：初階與高階，這樣分是為了有步驟性的學(xué)習(xí)和進階的加強，當(dāng)然，能人的話一步到位，對于新人來講會較難，需要實際工作中輔導(dǎo)與自己閱歷

2、總結(jié)。我不會華麗高大上的語言，但是我可以共享一些實實在在的基礎(chǔ)方法，也是這幾年會給帶的同學(xué)反復(fù)必講的入門輔導(dǎo)，有自己成熟方法表達的設(shè)計師可忽視這里，這里先說初階的設(shè)計關(guān)鍵要點。一、概念類別扁平化圖標大部分無非就是剪影表現(xiàn)，而這里為什么重點是講圖標的外形設(shè)計，而非顏色，由于一切先有形才考慮下一步。形不好再怎么營造整體風(fēng)格都白費勁，好比建筑造型與裝修的關(guān)系，而顏色等營造的風(fēng)格都可另起文章分析 。圖標造型表現(xiàn)上無非就是典型的2種：面與線 。運用這兩種基礎(chǔ)元素去造型也可以進行多種組合不同的表現(xiàn) 。組合造型一般有單體造型、多個元素組合造型，線與面之間的獨立與結(jié)合的變化。簡化的微寫實圖標 這類通常是彩色一

3、體表現(xiàn)，造型和組合上較寫實，不是純剪影，是寫實過渡來的簡化，又接近剪影，扁平簡化設(shè)計，這里主要是利用面和顏色來進行造型的設(shè)計。質(zhì)感風(fēng)格上也有6種（已有人分析），也許是純平面、折疊、輕質(zhì)感、折紙風(fēng)、長投影、微立體。這種相對剪影的好畫很多，也更加容易塑造風(fēng)格，更多是在顏色上有得發(fā)揮和講究，用在界面里也是最為突出的。最近還特別流行用色塊來進行二維、三維的裝飾表達，叫所謂的“低面建?！?感愛好的去搜一下。 上面提到的元素組合，比如下圖這個圖標目前是2個元素信封加信紙，如果還要再加什么功能狀態(tài)示意，最多在右上角加個很小的消息提醒。由于元素越多越簡單，所表達的含義也就越多，同時也會影響造型的調(diào)動。不管多少

4、個元素總有一個最重要的對象，其他為幫助圖形，在塑形大小簡單度上有區(qū)分。剪影的正負形圖標 這類通常是單色表現(xiàn)，當(dāng)然也有綜合彩色的。其更加簡潔抽象， 言簡意賅，高度提煉精華，講究表象意境，具有理解的門檻。所以這才是最難設(shè)計的一關(guān)。特別講究設(shè)計的理性與感性之間在功能傳達上的規(guī)律思維。也是UI界所謂現(xiàn)代極簡主義的代表，注意，沒把握好就會變得很“空虛”，把握好了就是時尚的feel啦負形圖標 是以線繪制的圖形，高度的輪廓概括，就跟畫骨骼一樣的要求精準到位，也叫線形圖標。負形剪影是全部圖標中最講究也最難表達型的一種風(fēng)格，如果畫不好就很容易俗氣和簡陋。正形圖標 是以面繪制的圖形，也有和線綜合表現(xiàn)情況，自己依據(jù)

5、需要進行制造變化吧。通常與負形圖標之間做當(dāng)前狀態(tài)的轉(zhuǎn)換，手機tab上最常見，如ios7。優(yōu)點：簡潔清新優(yōu)雅；極具現(xiàn)代感（雖然遠古時代就有高度概括的符號表達，這里指的范圍是互聯(lián)網(wǎng)上的全新應(yīng)用）；具有設(shè)計與涵義綜合的拓展性；還可以完成一些抽象詞匯的圖形傳達。 圖標為上傳到云端的之意，這里的主對象是云，所以箭頭和云的比例是不同的，上傳箭頭是幫助圖形。了解界定多元素之間的主次關(guān)系，就能夠把握一個整體的造型走向。典型的基礎(chǔ)表現(xiàn)就是上面兩種，然后在實際繪制中依據(jù)自己的喜好和設(shè)計來進行融合，可以得出更加豐富的表現(xiàn)。二、設(shè)計技法要點1、關(guān)鍵節(jié)點繪制法 擬物化設(shè)計就是盡可能的繪制繁瑣細節(jié)，追求豐富和相像度。而剪

6、影圖標則是相反，以簡練為繪制手段。但是細節(jié)就沒有嗎，不是的，而是更加謹慎專心的注意每一筆，且越來越優(yōu)雅。這里舉例剪影圖標繪制方法技巧，3步驟可以搞定，看似又簡潔又難，簡潔的是只是繪制參照物輪廓，保留基礎(chǔ)識別性，步驟很少；難的是這調(diào)整的過程與產(chǎn)品環(huán)境的融合性，易用性，還有你自己的創(chuàng)意想法。 說簡潔點就是去繁擇簡并經(jīng)過思考改造過的設(shè)計過程。而最基本的最需要犀利眼神抓準的是造型的關(guān)鍵節(jié)點，雛形出來后再依據(jù)想法調(diào)整。提煉精華勾畫輪廓 通常在繪制已有參照物的基礎(chǔ)上去設(shè)計一個圖標，可以依據(jù)你喜愛的造型參照物去進行分析，先抓取到參照物的關(guān)鍵節(jié)點，幾何繪制出來一個相像的基本圖形。調(diào)整線鋒優(yōu)雅得體 基礎(chǔ)雛形出來

7、后就開頭加入自己的想法調(diào)整線鋒，線條走向決定造型。這個時候就得要調(diào)多幾個版本了。設(shè)計師的處女座精細和糾結(jié)情結(jié)就在這里灑汗了，不斷調(diào)整對比，選擇出一個最優(yōu)再進行下一步。增特有細節(jié)出風(fēng)格 最后一步的塑形，就是畫龍點睛！造型的特點就在這一步去完成。 對于新老設(shè)計師來說，這樣的方法都是比較可取好用的，交互設(shè)計師也可以這樣快速入門哦親！尤其是第一步驟，能否特別快速的出雛形。下面是其他案例的設(shè)計方法欣賞，跟我上面總結(jié)的一樣道理。2、精致的基礎(chǔ)要素 精致即精細極致。看似簡潔的圖標其實并不是隨便了事，但知道了這些基本要素你就可以完成一個合格的圖標了。好的圖標是謹慎專心的注意每一筆每一像素每一矢量錨點的，盡可能

8、的往精美優(yōu)雅的方向努力吧騷年犀利清晰 需要熬煉厲害的眼睛，使出你的火眼金星捕獲每個像素之差，像素滿格才能清晰的呈現(xiàn)，細分出來通常會遇到以下3種情況，這也是最影響圖標基本質(zhì)量的問題點。1) 輪廓發(fā)虛圖標肯定要用矢量繪制，但是新手很容易犯的第一個錯誤就是圖標模糊的問題，也不清晰為何會這樣。其實就是矢量邊緣模糊產(chǎn)生的問題，也是個人繪制的不良習(xí)慣造成。避開這個問題，必須在100%畫布上繪制圖形，而且不能直接推動圖標放大縮小，即使這樣轉(zhuǎn)變大小了也要放大畫布調(diào)整路徑的錨點，反復(fù)查看及校正是否對齊1px網(wǎng)格，而不是0.10.9px，正是不滿1px格才會生產(chǎn)虛線。而圓形的繪制保證十字架4個邊緣點對準就可以了。

9、2) 斜形發(fā)虛斜線也是會有模糊與精致之分的，不仔細對比其實是比較難看到問題，可能很多人都會遇到圖形進行傾斜效果時是有鋸齒的，那就是角度的處理問題了，自己進行多角度對比下試試，會發(fā)現(xiàn)哪一個角度最清晰。也可以將圖層進行雙層疊加，會特別犀利哦3) 像素不夠或多余看下來都是像素發(fā)虛與清晰的緣由都是一樣的，下面這個例子是箭頭在小尺寸情況下可點陣矢量像素繪制，如果是大尺寸（如上面最大的箭頭示例）可以直接鋼筆繪制?？偨Y(jié)一下上面的處理方法，堅持最少發(fā)虛原則：比例協(xié)調(diào) 圖形內(nèi)部結(jié)構(gòu)要注意元素構(gòu)成之間的比例，有黃金比例分割也有感性的平衡方法。嚴謹?shù)膱D標比例可參照蘋果IOS圖標規(guī)范案例，打好內(nèi)部統(tǒng)一結(jié)構(gòu)線進行圖形繪制和比例安排。如果頭眼昏花嫌麻煩，也牢靠閱歷感覺快速完成一個具有平衡感的圖標。視差平衡 同一個尺寸規(guī)格，但依據(jù)不同外形的圖標，會導(dǎo)致面積占比引起的視差大小不同，但要在參考尺寸范圍內(nèi)繪制進行調(diào)整。以下圖標示例都是撐滿方框邊緣繪制，按道理這好像是精確的，但由于人的肉眼會有視差問題，所以做的設(shè)計就要臨時拋開科學(xué)，以人的真實情況去推斷再調(diào)整。三、系列成型圖標 能夠生疏掌握完以上基礎(chǔ)要素，恭喜你可以大膽的去制造系列圖標了，當(dāng)個數(shù)圖標設(shè)計確定好后，接力的圖標必須延展其風(fēng)格設(shè)定：造型規(guī)章、樣式、細節(jié)特征等要素統(tǒng)一設(shè)計（繁衍具