UI設(shè)計(jì)隨著近幾年互聯(lián)網(wǎng)的發(fā)展，已然變成了一個(gè)熱門專業(yè)，經(jīng)常能被各位學(xué)設(shè)計(jì)的同學(xué)cue出來。

為了給各位想要學(xué)UI設(shè)計(jì)的同學(xué)指條明路，今天就來和大家說說怎么入門。

一." 知己知彼 "

第一步是要"知己知彼"，知道UI設(shè)計(jì)需要掌握什么能力，才能有針對性的學(xué)嘛～

在平面設(shè)計(jì)方面，UI設(shè)計(jì)師應(yīng)掌握以下方面的基礎(chǔ)能力：

1. 顏色構(gòu)成

就是怎么搭配顏色好看，舒服，懂得突出重點(diǎn)和淡化無關(guān)要素。

2. 格式排版

沒有規(guī)矩不成方圓，頁面也一樣，統(tǒng)一的格式風(fēng)格會讓人瀏覽的更有效率。

3. 畫面構(gòu)成

頁面設(shè)說白了也是一種平面，因此要知道版面中的圖片和文字等怎樣分布才是舒服合適的。

4. 心理學(xué)

怎么排版吸引人眼球？什么顏色適合app的風(fēng)格？這些問題都需要對人的心理有所了解。

5. 設(shè)計(jì)思維

綜合考慮一下，以上的搭配結(jié)果是合適的么？設(shè)計(jì)思維能讓你更好的對自己的作品做出判斷。

在交互設(shè)計(jì)方面，UI設(shè)計(jì)師應(yīng)掌握以下方面的基礎(chǔ)能力：

熟悉用戶體驗(yàn)設(shè)計(jì)原則

信息挖掘，用戶研究和數(shù)據(jù)分析

優(yōu)秀的邏輯思考能力

?

心理學(xué)

?

設(shè)計(jì)思維

二." 刻苦練習(xí) "

第二步是要"刻苦練習(xí)"了，知道了UI設(shè)計(jì)需要掌握什么能力，這下一步就是要知道怎么掌握這些能力了。

首先，精通原型軟件

現(xiàn)在制作交互原型的軟件很多，例如Axure，Invision，Mockplus等等……實(shí)際上，這些軟件之間并沒有明顯的優(yōu)缺點(diǎn)差異，每個(gè)人用著方便的軟件也會不一樣，沒必要把每一個(gè)都學(xué)一遍。

其中，強(qiáng)烈建議初學(xué)者使用Mockplus。Mockplus是一種具有簡潔功能的易于操作的原型設(shè)計(jì)工具，適合在軟件開發(fā)團(tuán)隊(duì)或個(gè)人軟件開發(fā)的設(shè)計(jì)階段使用。

以下是我在設(shè)計(jì)過程中使用的工具：

Sketch : 界面設(shè)計(jì)

Figma : 協(xié)作界面設(shè)計(jì)

PS or AI : 低保真線框

Adobe XD : 界面設(shè)計(jì)和原型設(shè)計(jì)

Principle : 動態(tài)互動動畫

Invision : 原型設(shè)計(jì)和協(xié)作的 Invision

其次，閱讀設(shè)計(jì)規(guī)范

研究設(shè)計(jì)規(guī)范對于初學(xué)者來說非常有用。在各種平臺上可以找到大量有關(guān)設(shè)計(jì)規(guī)范的文章。甚至Apple，Google和其他公司都有免費(fèi)的系統(tǒng)規(guī)范UI模版可以下載，例如iOS的Human Interface Guidelines和Android的Material Design，都是高質(zhì)量的。

這些規(guī)范一方面詳細(xì)說明了如何使用控件以及如何轉(zhuǎn)移到視圖，另一方面還闡述了許多設(shè)計(jì)思想。

除了系統(tǒng)的設(shè)計(jì)規(guī)范，很多app在發(fā)展的過程中也形成了自己的風(fēng)格規(guī)范，提前有規(guī)范意識也會讓你在工作中得心應(yīng)手。

三.以優(yōu)秀的設(shè)計(jì)為基準(zhǔn)

經(jīng)常瀏覽其他設(shè)計(jì)師的設(shè)計(jì)可以大大提高新手的審美。完成設(shè)計(jì)后，你應(yīng)該以這些出色，成熟的作品為基準(zhǔn)，并通過比較找出差距。這樣你也許還是不知道什么是好的設(shè)計(jì)以及你所處的水平，別著急，這個(gè)時(shí)候你可以在互聯(lián)網(wǎng)上找到很多一流作品(例如Dribble，Behance或者各種論壇)與您的作品進(jìn)行比較，這樣你就知道哪些方面是你的不足了。

此外，還可以閱讀一些杰出設(shè)計(jì)師撰寫的知識和經(jīng)驗(yàn)分享，會給你新的啟發(fā)。

了解設(shè)計(jì)原則是最基礎(chǔ)的，但這并不夠，你還必須訓(xùn)練眼睛，看到好的設(shè)計(jì)和糟糕的設(shè)計(jì)。

訓(xùn)練眼睛最有效方式是通過學(xué)習(xí)別人的作品。在打開一張空白的畫布并凝視半小時(shí)之前，要知道，唯一的創(chuàng)造性方法是通過研究。有時(shí)頭腦無法獨(dú)立創(chuàng)作，你不得不先看看其他設(shè)計(jì)，再開始創(chuàng)建自己的設(shè)計(jì)，尤其是當(dāng)你是初學(xué)者的時(shí)候。

因此，看看其他設(shè)計(jì)師在Dribbble上做了什么，當(dāng)你遇到喜歡的設(shè)計(jì)或與你的項(xiàng)目相關(guān)的東西，保存在你的筆記中，你也可以截屏。素材的積累對于設(shè)計(jì)師很重要，很多時(shí)候一些不相關(guān)的事物或者以前保存的作品會對你現(xiàn)在的設(shè)計(jì)啟發(fā)很大。

四.培養(yǎng)繪畫能力

成為優(yōu)秀的UI設(shè)計(jì)師必不可少的就是繪畫能力。為什么？一方面，在紙上繪圖比在軟件上繪圖更快，因此可以提高效率。

另外，徒手素描可以使表現(xiàn)設(shè)計(jì)師的風(fēng)格，甚至從他們不知不覺的涂鴉中啟發(fā)設(shè)計(jì)師。您可能會擔(dān)心，如果您不是藝術(shù)或繪畫專業(yè)的畢業(yè)生，您的繪畫能力可能會不足。那怎么辦呢？沒啥好辦法，只能多多練習(xí)。

五.多看書，多看論壇

在互聯(lián)網(wǎng)上搜索并找到一些與用戶體驗(yàn)和界面設(shè)計(jì)相關(guān)的高分讀物。仔細(xì)閱讀這些書，系統(tǒng)地學(xué)習(xí)專業(yè)知識，然后進(jìn)行大量練習(xí)；此時(shí)，再次閱讀這些書，就會有不同的收獲。

以下是我最喜歡的網(wǎng)站靈感：

onepagelove.com

awwwards.com

dribbble.com

pttrns.com

uimovement.com

三.多 練 習(xí)

對于UI設(shè)計(jì)師，你需要由基礎(chǔ)圖標(biāo)到完整界面開始進(jìn)行學(xué)習(xí)，然后進(jìn)行嘗試。對于交互設(shè)計(jì)師，你需要找到一些典型的產(chǎn)品來推導(dǎo)它的設(shè)計(jì)思路，并且應(yīng)該勾勒出信息體系結(jié)構(gòu)，交互框架，主流線程和其他基礎(chǔ)知識的輪廓。

此外，你還需要評估交互中存在的問題，并提出具體的解決方案。下一步是找到一個(gè)或兩個(gè)特定頁面或流程路徑，以對細(xì)節(jié)進(jìn)行詳細(xì)改進(jìn)并集中精力。

當(dāng)然，還要留意細(xì)節(jié)的設(shè)計(jì)，取長補(bǔ)短。我們都知道熟能生巧，當(dāng)我們找不到客戶，或者沒有工作的時(shí)候，怎么練習(xí)呢？

很簡單，我們可以找找自己覺得用戶體驗(yàn)不好的app，試著去改進(jìn)它，通過這種訓(xùn)練打破沒有項(xiàng)目做的循環(huán)，設(shè)計(jì)一些假項(xiàng)目來享受其中的樂趣～

或者，花時(shí)間選擇你已經(jīng)使用的網(wǎng)站或應(yīng)用程序，并重新設(shè)計(jì)它。它可能是任何你認(rèn)為可以變得更好的app，也可以加入自己的交互需求。通過這種練習(xí)，你一定可以熟練地掌握交互規(guī)范，也能通過這樣的練習(xí)找出自己的創(chuàng)作風(fēng)格。

七.尋求專業(yè)指導(dǎo)

學(xué)習(xí)設(shè)計(jì)的另一種好方法是找到愿意提供幫助的設(shè)計(jì)導(dǎo)師或設(shè)計(jì)師朋友，他們將幫助您加快學(xué)習(xí)過程，讓這件事情事半功倍。

有經(jīng)驗(yàn)的設(shè)計(jì)師能看到你作品的優(yōu)點(diǎn)和缺陷，并盡可能給出他們的意見，就像一條捷徑。他們也會給你一些經(jīng)驗(yàn)中學(xué)到的提示和技巧，踩在巨人的肩膀上，不強(qiáng)也被帶強(qiáng)了。

總之，UI設(shè)計(jì)并不像你想的那么難，只是學(xué)的知識比較寬泛，需要你掌握的熟練而精確。