2015年的時候围辙，曾結(jié)合自己的UI自學(xué)經(jīng)歷我碟，

回答了知乎上一個比較熱門的話題【從零基礎(chǔ)如何自學(xué)UI設(shè)計】

這3年多來，UI設(shè)計行業(yè)發(fā)生了巨大的變化姚建，個人的思考視角的廣度和深度也發(fā)生了變化矫俺。

所以，希望重新對這個熱門話題，重新編輯一些答案厘托。

----------------------------------以下是原文回答-----------------------------

文章很長友雳，但貨很硬，不雞湯铅匹，不光有方法和經(jīng)驗押赊，更重要的告訴你為什么要用這些方法。

首先包斑，知識是有時效性的流礁，

脫離了時間和場景限制的知識，是沒有價值的罗丰。

15年的時候神帅，曾根據(jù)自己的UI自學(xué)經(jīng)歷，回答了一次萌抵。

那會正是UI設(shè)計行業(yè)最火爆的時期找御，

基本上會PS，臨摹幾個圖標(biāo)和界面谜嫉，就可以找到一份不錯的UI設(shè)計工作萎坷。

所以，當(dāng)時這個話題的回答沐兰，基本都是結(jié)合自己的自學(xué)經(jīng)驗哆档，

教你怎么學(xué)PS軟件技能的，怎么畫圖標(biāo)（寫實類圖標(biāo)）的住闯。

現(xiàn)在瓜浸，3、4年過去了比原。 UI設(shè)計行業(yè)發(fā)生了非常巨大的變化：

1.流行設(shè)計風(fēng)格：之前是寫實風(fēng)格（對設(shè)計軟件技能要求高）插佛，現(xiàn)在是扁平化、極簡設(shè)計風(fēng)格（對軟件技能要求降低）量窘。

2. 行業(yè)競爭：之前是坑多人少雇寇、錢多人傻一片藍海，現(xiàn)在是僧多肉少蚌铜、高度競爭的一片紅海锨侯。

3.設(shè)計師能力要求：之前是單一UI（畫圖能力）技能，現(xiàn)在是綜合技能UE（交互體驗）冬殃、UXD（產(chǎn)品體驗）囚痴。

時間在變，行業(yè)在變审葬，設(shè)計師的能力要求在變深滚。

而這個話題的回答奕谭，大部分（包括高票的）依然停留在3、4年前的場景痴荐。

按照過時的經(jīng)驗和方法血柳，零基礎(chǔ)、自學(xué)出來的UI設(shè)計能力蹬昌，

在當(dāng)前的行業(yè)環(huán)境下混驰，是缺乏競爭力的，是很難找到一份合適的UI設(shè)計工作的皂贩。

那么栖榨，站在今天這樣的時間、場景下明刷。應(yīng)該如何從零基礎(chǔ)婴栽、自學(xué)UI設(shè)計呢？

一切回到本源辈末。時間和場景在變愚争，但是本源不會變。

回到這個問題的本身挤聘，這個問題其實是還包含了2個隱藏問題轰枝。

1.什么是UI設(shè)計？

2.UI設(shè)計需要具備哪些能力组去？

3.零基礎(chǔ)鞍陨，如何學(xué)習(xí)，才能掌握這些能力从隆？

這2個隱藏的問題诚撵，就是UI的本源。

但是键闺，你可以發(fā)現(xiàn)寿烟，這里面所有的回答， 基本都沒有去解釋這2個問題辛燥，

都是從第3個問題開始筛武，直接給經(jīng)驗，給方法挎塌，這樣的經(jīng)驗和方法是有局限性的畅铭。

事實上，如果你搞明白了前面2個問題勃蜘，

你再去零基礎(chǔ)、自學(xué)UI設(shè)計假残，會發(fā)現(xiàn)非常非常的簡單缭贡。

反之炉擅，你看的教程越多、方法越多阳惹，越容易混亂谍失，

而且看似學(xué)會了很多，但實際出去面試時莹汤，很難達到面試招聘的能力要求快鱼。

第一個問題：什么是UI設(shè)計

這個是百度百科和維基百科給出的專業(yè)定義

從這兩張圖里面，可以捕獲的信息點有：

1.UI設(shè)計的定義是：用戶界面設(shè)計纲岭。

簡單來講抹竹，一切帶屏幕的、可以和人互動的止潮，都可以稱為用戶界面窃判。

比如我們用的手機界面、電腦界面喇闸、電視界面袄琳、銀行ATM機、網(wǎng)站燃乍、APP等等唆樊。

從這些界面又可以總結(jié)出：所有的界面都是由文字、圖形刻蟹、顏色三大視覺元素組成的逗旁。

2.UI設(shè)計內(nèi)容包括：界面美觀、軟件操作邏輯座咆、人機交互痢艺。

簡單來講就是，UI設(shè)計不只是設(shè)計視覺層面（界面外觀）介陶，還要設(shè)計用戶使用操作層面（邏輯和交互）堤舒。

也就是說：外觀視覺設(shè)計只是UI設(shè)計的一部分！２肝亍舌缤！沒有美術(shù)基礎(chǔ)一樣可以做UI設(shè)計！Ｄ巢小国撵！

3.UI設(shè)計的目的是：讓用戶在完成自己的任務(wù)時，與軟件/系統(tǒng)/產(chǎn)品之間的交流盡可能地簡單玻墅、高效介牙。

簡單來講就是，UI設(shè)計的目的是：讓產(chǎn)品或系統(tǒng)或軟件的視覺層面-顏值高（好看澳厢、舒服环础、個性）囚似、操作層面-好用（簡單易懂、操作高效）线得。

前面是抽象的理論部分饶唤，為了便于大家的理解，我以APP購買火車票為例子：

第一個是被吐槽的12306官方APP購買火車票核心頁面UI：首頁-列表頁-下單頁

第二個是美團APP-購買火車票的核心頁面UI：首頁-列表頁-下單頁

在這個兩個案例里面：

UI設(shè)計的目的是：讓用戶快速的購買到滿意的火車票贯钩。

UI設(shè)計的內(nèi)容有：

1. 邏輯交互層面：輸入火車票信息募狂，從搜索結(jié)果里面，選擇合適的火車票角雷，然后填寫乘客信息祸穷，下單購買。

2.界面視覺層面：信息文字的大小谓罗、顏色粱哼、間距，圖標(biāo)檩咱、按鈕揭措、表單的呈現(xiàn)樣式（大小、顏色刻蚯、布局）绊含。

那么問題來了，同樣是購買火車票流程的界面UI炊汹，哪個的設(shè)計好躬充？好在哪里？

這個問題讨便，是UI面試必問的問題充甚，兩個設(shè)計，哪個好霸褒，好在哪里伴找？為什么？

目的就是考察設(shè)計師對UI設(shè)計的理解能力废菱。

第二個問題：UI設(shè)計需要具備什么樣的能力

前面說了技矮，UI設(shè)計是設(shè)計產(chǎn)品或系統(tǒng)或軟件的界面。目的是讓產(chǎn)品/系統(tǒng)好用殊轴、還顏值高衰倦。

那么一個產(chǎn)品是怎樣開發(fā)設(shè)計出來的？UI設(shè)計師又在這個流程中扮演什么角色旁理？ 工作角色決定能力要求樊零。

一般來講，一個互聯(lián)網(wǎng)產(chǎn)品的設(shè)計開發(fā)流程是這樣的：

1.需求：公司老板孽文、市場運營驻襟、產(chǎn)品經(jīng)理等十性，提出抽象的產(chǎn)品需求想法。

2.產(chǎn)品：PM產(chǎn)品經(jīng)理把這些抽象需求塑悼，變成具象的低保真原型圖。

3.設(shè)計：UI設(shè)計師和PM就原型圖進行需求溝通（邏輯交互細節(jié)楷掉、視覺風(fēng)格等）厢蒜，然后用設(shè)計軟件（PS/Sketch），變成高保真效果圖烹植。

4.開發(fā)：程序員（RD/FE）拿到設(shè)計師交付的高保真效果（包括切圖標(biāo)注）斑鸦，進行代碼程序開發(fā)。

5.測試：測試程序員進行程序測試草雕，UI設(shè)計師進行UI效果實現(xiàn)驗收巷屿。

6.上線：提交蘋果和安卓應(yīng)用市場，進行發(fā)布墩虹，用戶下載使用嘱巾。

在這個流程里面，設(shè)計師扮演者翻譯的角色诫钓，

目的是把產(chǎn)品經(jīng)理抽象的需求想法（低保真原型圖）旬昭，轉(zhuǎn)換成用戶容易理解的、容易操作的高保真效果圖菌湃。

這個怎么理解问拘？還是舉個例子來說。

一般來說惧所，產(chǎn)品經(jīng)理交付給設(shè)計師的低保真原型圖是這樣的

最后骤坐，設(shè)計師交付給程序員的高保真效果圖是這樣的

兩者的差異在哪里？

低保真原型圖：描述需求的有哪些功能模塊下愈，以及功能模塊之間的交互流程纽绍。

高保真效果圖：定義界面視覺呈現(xiàn)（文字、圖形驰唬、顏色顶岸、版式），定義各頁面之間詳細的交互形式叫编，并完善異常交互場景辖佣。

所以，UI設(shè)計師需要具備哪些能力搓逾，就非常容易知道了卷谈。

1.軟件技能：畫圖能力，就是能用設(shè)計軟件霞篡，將低保真的原型圖世蔗，翻譯成高保真效果圖端逼。

2.審美素養(yǎng)：美學(xué)能力，知道什么樣的界面是顏值高的污淋，并能用軟件繪制出來顶滩。目的是讓產(chǎn)品顏值高。

3.邏輯思維：核心能力寸爆，能理解產(chǎn)品的抽象邏輯和想法礁鲁，以及用戶場景和用戶心理，并應(yīng)用到界面視覺信息呈現(xiàn)赁豆、頁面之間的交互關(guān)系仅醇。目的是讓產(chǎn)品好用。

第三個問題：零基礎(chǔ)魔种、如何自學(xué)UI設(shè)計

前面兩部分都是講UI設(shè)計的本源析二，屬于邏輯部分，接下來就是很簡單的方法和操作了节预。

1.軟件技能如何培養(yǎng)

設(shè)計軟件是最基礎(chǔ)的叶摄、也是最不重要的能力。

從我多年的UI設(shè)計經(jīng)驗來講心铃，以PS設(shè)計軟件來講准谚，雖然PS工具有20多個，但是UI常用到的工具就5個：

1.文字工具：設(shè)計文字類型去扣、大小柱衔、粗細、顏色愉棱、行間距等等

2.矩形工具：通過圓唆铐、矩形等基礎(chǔ)圖形，運用布爾運算奔滑，設(shè)計出復(fù)雜的艾岂、新的圖形形狀

3.調(diào)色板：給字體、圖形賦予顏色變化

4.移動工具：通過移動字體朋其、圖形的位置王浴，達到舒適的排版、組合效果

5.圖層樣式：所有的文字梅猿、圖形的設(shè)計氓辣，都是基于圖層來實現(xiàn)的

所以如果聚焦于UI設(shè)計，只需要熟練掌握這幾個功能就夠用了袱蚓，

如果精力旺盛的話钞啸，也可以看網(wǎng)上其他的關(guān)于PS的教程。

這個是我給一個親戚家大學(xué)生錄制的一個關(guān)于UI設(shè)計PS軟件技能的教程。

零基礎(chǔ)3天學(xué)會PS做UI設(shè)計 - 網(wǎng)易云課堂

大家有興趣的也可以看看体斩。很系統(tǒng)梭稚、目的性也很強，可以讓你少走很多彎路絮吵。

2.美學(xué)素養(yǎng)如何培養(yǎng)

這個是UI設(shè)計師賴以吃飯的技能弧烤，需要長期的積累才能培養(yǎng)的。

我的經(jīng)驗是：多看設(shè)計網(wǎng)站蹬敲，多采集好看的界面設(shè)計扼褪。

設(shè)計網(wǎng)站不需要看那么多，只需要看3個就夠用了粱栖。

1.dribbble：國外知名的界面設(shè)計網(wǎng)站

2.behance：國外知名的綜合設(shè)計網(wǎng)站（可以選擇只看用戶界面和用戶體驗部分）

3.花瓣：國內(nèi)知名的設(shè)計素材靈感網(wǎng)站

3.邏輯思維如何培養(yǎng)

這個是最難的一部分，不光需要長期的積累脏毯、還需要經(jīng)常的對比闹究、反思、總結(jié)食店。

最好的方法就是：看一些專業(yè)的書籍渣淤，多體驗行業(yè)一些優(yōu)秀的、垃圾的APP吉嫩。

書籍1：設(shè)計元素：平面設(shè)計樣式（視覺類的書价认，只需要看這一本就夠了！Ｗ悦洹用踩！各種設(shè)計原理的邏輯都有！ＣηāＦ瓴省）

書籍2：iPhone 人機界面設(shè)計規(guī)范（蘋果官方出的，非常的經(jīng)典ｆ⑷印惠奸！很多的交互原則和邏輯都有！Ｇ∩摇）

書籍3：用戶體驗要素（如果時間和精力允許佛南，可以看看，越是資深的設(shè)計師嵌言，越覺得這本書牛逼Ｐ峄亍！）

最重要的是：多體驗APPＱ揭场Ｂ璋琛！（熟讀唐詩三百首，不會作詩也會吟尘分，你體驗的APP足夠多了猜惋，也能說出個好壞一二三！Ｅ喑睢）

橫向看：同類APP設(shè)計的差異和優(yōu)劣著摔，比如電商類，淘寶定续、天貓谍咆、京東、拼多多私股，首頁的差異是什么摹察，哪家的設(shè)計好一些，為什么倡鲸？搜索列表頁供嚎、商品詳情頁的差異又是什么...

縱向看：同一個APP各個頁面之間的視覺和交互關(guān)系是怎樣的，從首頁到列表頁到詳情頁是怎么交互的峭状，視覺呈現(xiàn)是怎么統(tǒng)一和銜接的...

最后克滴，如果還有什么疑問的地方，歡迎留言評論优床！或者加扣扣630360759咨詢～