如何在四小時內學會用 Ai 做 UI？
整個問題的初衷在於看到了@黎敏 的回答，產品經理新人是否有必要學習Photoshop？ 我這個問題主要在於希望一些新人能速度的進入AI操作，而不必花時間去找教程，需要這個問題回答的人不少。再次謝謝 @黎敏。
唔，多謝邀請。
其實這算 產品經理新人是否有必要學習Photoshop？ 的續集。
因為蠻多人私信問過，到底怎樣才能快速學會。因為特別費時間，就一直拖著。
最後看到變成公開提問，終於狠心決定用大段時間來回答這個問題。
視頻地址在文章最後，來不及的孩子直接拖到最後吧。
好吧…… 其實真的很快。只是為了APP出界面的話（不許掐我哈～堅決沒黑設計師，從實用，工程師快速出界面，出切圖方向給的建議）。
先放一張圖嗯。這樣世界簡單多了吧？
第一次還沒開始答題，就被贊和收藏嗯嗯～～壓力很大，熬夜也趕完視頻嗯嗯～～
放視頻教程裡面，APP界面圖：
學會的使勁蹭蹭屏幕表示感激吧～～
跳過吃飯聊天講八卦互毆（再另外2個小時）直接講劇情了～～
沒學會的可以試試Google，或者點擊「豬頭樓主被雷劈+1」
補充說明，這是2014年一個老答案，部分圖形已過時不用，內容供參考。
矢量可試試：矢量圖素材_懶人圖庫。
標準UI設計，官方會有大量標準圖案供下載，官方文檔會有更多信息。
我個人偏好AI，因AI可用於插畫創作，而且蘋果和win用戶都能用，用途廣泛且方便。
若有其他遺漏信息，試試Google一下，應該有最新解答。
如下是原來答案，祝學習愉快~ 嗷~~
順便把Android 矢量圖標放這裡：
android4.0圖標.ai
IOS矢量圖這裡：
iphone ui vector elements.ai
手勢示意圖，方便標註手勢：
http://vdisk.weibo.com/s/yXbndbgZnaYd6
http://vdisk.weibo.com/s/yXbndbgZnaYcM
網頁界面也一樣，有大量能重用的素材。
http://vdisk.weibo.com/s/yXbndbgZnaYcy
網路都可以下載到，還有更多更多類似的。
這樣超快速重用已經造好的輪子，快速出圖～第一次錄製，經驗不足，講解應該可以更有條理來著～～
各種廢話跑題感言完畢～ 視頻在這裡嗯嗯～～
記得重看最上面的大圖，只需要記得那幾個功能，足夠了。
2小時學會用AI做UI視頻
看完視頻再問自己一次：
會保存，導出了么？
會畫矩形，圓形，線條並更改顏色了么？
會使用其他人的素材了么？
會快速搭配顏色了么?
知道從哪裡找到所需素材了么？
嗯嗯～就這些，夠用了。
——————補充——————
我用的CS6，但是版本不影響。因為這是最少最少的功能了。排列方式等等，每一個版本都是一樣。
如果可能，盡量使用最新版，因為網路素材，尤其是韓、美國那些，常常是最新版，低版本偶爾無法打開高版本設計的圖。
教程送給工程師朋友，希望他們能跳過設計界面的痛苦，不許掐我嗯嗯～
另外，賣萌圖片等等，一樣可以搜索矢量圖。可愛的天氣圖標，吃豆子的圖標等等～
我想說的只是，重複利用素材，就像代碼開發時，使用人家成熟模塊一樣。
一切從零開始會有點慢。嗯嗯～～
比如你只想要界面中的按鈕，卻只能選中所有，看屬性裡面「編組」表示這一對編組在一起。
右鍵（跟word等等一樣）選擇取消編組就好了。編組就是把一堆東西捆在一起了。方便一起移動。
解除編組後就能單獨移出了。
單選，多選，多選後取消某個選項，快捷鍵跟win系統一樣。Ctrl + 滑鼠單擊。
總是就是，軟體設計者不是壞人，他們會最大程度重用大家熟悉的手勢，熟悉的快捷鍵。
看到評論了，關於我的APP，全部開源，代碼在這裡：
root-tools/ActivityCalendar at master 路 rarnu/root-tools 路 GitHub
GooglePlay裡面有APP簡介：
活動日曆 - Google Play 上的 Android 應用
嗯，由於工程師太忙沒有時間維護（他有自己項目在忙）。
我只能繼續維護後台數據，沒辦法更新前端了。
嗯，如果有人喜歡，拿去用吧。但是裡面手繪的豬頭不可以用~~
嗯嗯~~因為我很喜歡豬頭~~那是我的豬頭~~
別的隨便用嗯嗯~~~
抱歉，四小時是學不會的。
▽一頁出色的App界面。作者：孔晨Point_Vision（站酷）
▽一枚精緻的icon。作者： @酷coo豆 （知乎）
▽一組優雅的圖標。作者：何柏鋼。
▽一組精緻的圖標。作者：羅子雄。
最近我從一套完整的APP中學習，嘗試著總結一套像樣的UI規範出來，花去了我整整兩天的時間。如果四小時就能學會用AI做UI？那豈不是：
四小時就能學會用word寫小說？
兩小時就能學會用毛筆寫書法？
30秒學會100米衝刺賽過博爾特？
所以，對待學習這件事上，
時間長短不是問題，心態擺正才至關重要。
軟體操作不會就先學軟體，理論不懂就買書來看，眼界不夠開闊就多上Dribble、站酷、或者Behance，花費同樣的時間做最有效的訓練，這才是正確的學習方式？
如果要報培訓班，也十分建議熟練操作軟體後（注意不要被騙，特別是打著保證就業、貸款報名的機構）！因為UI設計學科內，要學習的排版構圖、色彩搭配、交互常識、平台規範的理論知識一大堆，課堂上沒有誰有那麼多時間精力來教你軟體怎麼使，所以，熟悉軟體基本操作是學習設計最最基礎的必要條件。
1.必備條件
PS軟體基礎：photoshop CS6零基礎入門教程
AI軟體基礎：illustrator新手輕鬆入門教程
AI軟體進階：illustrator案例提高教程
2.入門準備
UI入門書籍：《設計之下》、《界面設計模式(第2版)》、《交互設計沉思錄》
UI學習網站：UI中國-專業用戶體驗設計平台
3.後期提高——設計作品交流分享
站酷：站酷 (ZCOOL) - 設計師互動平台 - 打開站酷，發現更好的設計！
Dribble：Show and tell for designers
Behance：Behance
望以上淺顯分享，對自學者有所啟發！圖片版權歸原作者所有！
關於@酷coo豆
平面設計學習日記網創始人。致力為自學設計的朋友提供優質的書籍、教程、經驗等資源參考。目前收集了100本人氣設計書籍和一些設計/插畫視頻教程，可供設計學習者參考。
更多自學問題，歡迎與我私信。
用AI做UI的關鍵在於，首先要明白AI做設計做的是哪些東西。對於USER INTERFACE 最重要的一個方面就是對於ICON 的設計，其次才是界面的設計，在設計的過程中，首先要對於交互界面做一個了解，懂得分析界面的具體設計流程。同時，也要對AI軟體的操作做到了解。所以在設計一個UI之前，設計師要知道如何去做，如何用不同的命令設計一個界面。
作者：Adi Dizdarevic
鏈接：Behance
出處：http://behance.net
以這個界面為例，設計師在製作這個界面的時候要明確這個界面中標題欄和左邊的icon在設計的時候效果是不一樣的，中間每個頭像的點選也是不同的，同時注意每個對象之間的間隔線，還有就是三大背景的主要選擇，以及點選符號。
分析完了界面那麼下一步應該開始弄清楚如何去用AI進行設計了。在學習AI的過程中，首先要了解具體給他功能界面的意圖。首先是菜單欄，其次是左邊的工具欄，還有就是輔助工具欄等。
除此之外，那麼在設計上述界面的時候，要分析到具體的命令。綠色背景的標題欄中，分兩個色塊，所以在用到AI的時候主要是點選鋼筆工具或是矩形框來操作。兩端的ICON可以採用不同的線的形式去操作。其次在設計左邊的ICON的時候，要注意每個作品的行間距，最好有一定的尺寸標註，那麼在設計的時候就比較容易統一風格。
作者：Alex Forrest
鏈接：Iconography
出處：http://pinterest.com
對於右邊個人頭像下邊的漸變效果，可以採用AI 漸變效果來設計，同時界面中的字體設計可以採用圖片的是與ICON做一個組合放到一起。在用AI設計UI作品的時候最重要的不是完成交互設計師所需求的東西更重要的是懂得如何去審視什麼是好的設計作品。其次，AI只是一種設計工具，所以就AI如何入門而言可以把他當成基本的繪圖軟體。再次，對於一些特殊的藝術效果，AI的操作方法其實沒有PS的效果好，如果對於PS的效果要求沒有那麼嚴格的話，其實可以採用PS的形式。
作者：tao huang
鏈接：login.png by Prakhar Neel Sharma
出處：http://pinterest.com
鏈接：http://huaban.com/pins/548674479/
出處：http://huaban.com
以上述的作品為例，在設計的過程中，對於中間的白色區域元素，其實可以採用矢量圖的形式，同時對於後邊的背景漸變可以採用點陣圖。如果對於界面的效果有特殊要求，如背景是一張圖片而且是作用於這個界面的時候，這時可以採用PS的方式解決。所以，對於說如何去入門並且用AI去做UI最重要的不是如何去學，而是認清楚，在設計的時候最重要的是用哪種方法去做，去設計，和懂得如何去分析幾個界面的基本構成等。
———————————————————
歡迎關注我的個人官方微信（kang-shishi）
如有藝術留學、院校、專業、作品集方面的問題，可私信康石石諮詢
首先我要說的是，想要在四小時內學會用AI做UI，基本上是很難實現的，除非你掌握了AI軟體操作，有一些美術的基礎，做出一個UI界面圖是可以的，或者說你跟著視頻教程做出一個一模一樣的UI設計，但是這種方法是不實際的，沒有基礎學的東西很快就會忘記，所以如果你是零基礎學習AI，建議還是老老實實的先把基礎學紮實，欲速則不達，一步登天基本是很難的，當然如果你有驚人的智商也是可以的。
做出一個UI設計掌握的軟體一般是Photoshop、illustrator（AI）等等的圖形工具，在這裡我就不介紹Photoshop了，因為題主問的是AI，想要了解PS的也可以自行參考Photoshop基礎教程實用技能精講，其次需要的就是美術的功底了，比如色彩的選擇、排版等等，都是做UI不能少的。
—————————————我是分割線—————————————————
上面介紹的是做UI具備的一些基本條件，我就不多說了，先進入正題，說到AI軟體，還沒有熟悉的可以自學參考一些教程或者書籍，畢竟四小時學習AI做UI是一件有點難的事情。
AI基礎教程入門
Illustrator CC零基礎入門教程
下面我先引一個AI製作扁平化圖標的例子，先來感受一下UI設計的一部分。
1.車輪兒
STEP 1：我們先從自行車的基本部件開始：車輪兒。首先用橢圓工具（L）畫一個150px*150px的圓，填充色選無，描邊顏色是深紫羅蘭色，粗細是8pt。
STEP 2：通過對象-擴展-描邊，把圓形轉成曲線，我們就有了一個環形的路徑。
下面的步驟是為了給輪子加點陰影，這樣就顯得比較立體。複製這個圓環並「貼在上面」兩次（Control-C &> Control-F &> Control-F）。選擇最上層的圓環，用方向鍵向右平移，我移動了4px。（可以把這個圓環轉換成描邊填充，這樣比較容易看到平移的效果）。
選擇剛才我們移動的圖層以及它下面的圖層，選擇路徑查找器-減去頂層，這樣我們就剩下了兩片月牙的形狀了，調整混合模式為正片疊底，並調整顏色，色值為H-320.8，S-24.02，B-80，從而得到淡淡的陰影。
之後的其他步驟中也會用到這種方法。
STEP 3:複製這兩個圖層（即月牙形路徑和原始的圓環路徑），並「貼在後面」（Control-C &> Control-B），縮小這兩個剛剛複製的路徑（我縮小到直徑145px）。
然後調整這兩個路徑的顏色為米黃色，色值H:39.13，S:19.83，B:90.98。輪圈就做好了。
STEP 4：接下來是加上輻條。使用直線工具（）,按住Shift鍵，畫一條垂直的線，描邊3pt，顏色使用剛才的數值。需要注意的是，這條線段要相對之前的路徑居中對齊。
接下來，選中這條線段，雙擊工具面板上的旋轉工具，在彈出的面板里進行如下圖的參數設置，並點擊複製，這樣就有了兩條相交的線段了。
然後就是做更多的輻條。選中這兩條相交的線段，再次雙擊旋轉工具，按照下圖設置，點擊複製。在這裡，360/20的意思是把360°分成20份，AI會自動計算合適的角度。重複這個操作幾次，就得到下圖。
STEP 5：接下來是擋泥板。畫一個和車輪一樣大的黑色的圓，置於頂層，蓋住輪子。改填充模式為描邊(Shift-X)，8pt，具體設置如下圖。
點擊剪刀工具（C），在這個圓圈的左右兩個錨點上各點一下，這樣就把一個圓分為兩半了，刪掉下面那半。
STEP 6：①選中這半個圓，選擇對象-擴展，填充一個比較粉嫩的顏色，我填的是#ef77a0；②+③然後通過之前做車輪陰影一樣的步驟，給擋泥板也加上點陰影。④畫一個25px*25px的圓，放在車輪中心的位置。
2.給我們的自行車加上其他部件兒
STEP 1：這步是加後軸。用矩形工具（M）畫一個長方形，填個鮮亮的寶石綠色，#6ad6b6。然後用直接選擇工具（A）選中矩形右上角的錨點，垂直上移一點，右下角的錨點下移。
選中這個矩形，選擇效果-風格化-圓角，選擇適當的半徑，達到如下的效果。
STEP 2：選中粉色的圓，複製並移動到矩形的右側，稍稍放大。
接下來的步驟需要實現如下圖的效果。在這需要說明一下，原教程作者用的應該是最新版AI，我的版本里沒有那個先進的功能，所以實在是沒看懂他說的啥，就只要用自己的笨方法實現了類似的效果。我的步驟是複製右側的圓，放大到與下面的矩形相交，通過路徑查找器-分割，然後刪掉多餘的圓角部分。
我的方法如下：
然後複製一個圓，貼在上面，我的色值是#ff8ab4。
STEP 3：用直線或鋼筆工具畫一個斜線段，描邊5pt，色值#875474。
再用矩形工具或者圓角矩形工具，加一個踏板。這裡原作者給後軸和踏板加上了陰影，但是沒有過程，大家可以參考做輪子時的步驟。
STEP 4：畫一個斜線段，描邊10pt，作為車座的支架。添加另一個較細的線段，與這個較粗的線段形成三角形。然後用圓角矩形工具在上方加上車座。
STEP 5：選擇整個車輪，複製並平移到右邊，前輪就出現了。
然後我們把前輪擋泥板的角度調一下。選擇旋轉工具（R），按住Alt的同時點擊車輪的中心點，在彈出的面板里按下圖調節，點確定。
複製支撐車座的斜線段，並平移到前輪的位置。
STEP 6：接下來就是把手了。先用鋼筆工具（P）畫一個折線，然後選中轉角的錨點，將它轉為平滑。
STEP 6：接下來就是把手了。先用鋼筆工具（P）畫一個折線，然後選中轉角的錨點，將它轉為平滑。
STEP 7：增加兩個橫樑。用鋼筆工具給上面的線段加點弧度。
STEP 8：接著就是加點細節的時間。選擇後軸，點擊對象-路徑-偏移路徑，進行如圖所示的設置，這樣就得到一個新的路徑。把這個新的路徑調的深一點，還可以根據自己的喜好添加其他的元素。
為了整個畫面有更好的效果，可以加個淡米黃色的背景，再加一些陰影在輪子和車的周圍。
STEP 9：最後，我們可以加點雲朵。用橢圓工具（L）畫幾個圓，相互重疊，然後使用橡皮擦工具（E），去掉下方多餘的部分，就大功告成啦。
最終成果如下：
看完上面的例子，相信入門的學員都會感覺到熟悉AI軟體的重要性，著急吃不了熱豆腐，紮實基礎才是走向成功的唯一指標。
網上也有很多矢量圖標的素材，踏上UI的道路，除了熟悉軟體，矢量圖標也是UI必備的。
最後我來總結一下，想要真正掌握AI做UI，需要的不是快速學習，而是紮實的把AI的基礎學好，還有就是對自己的美術功底也要有提升，多參考一些設計類的網站，學習配色、排版等的知識，總歸一句話：有目標的學習總是好的。
對排版有興趣的可以參考
indesign cc2017專業排版零基礎入門教程 · 第一卷
indesign cc2017專業排版零基礎入門教程· 第二卷
設計師套裝
基礎入門——三軟齊發
首先你要很熟悉ai……然後自然就會了……可能不需要四個小時
三小時就能把sketch搞熟了，為啥要用ai
我可以1小時內讓你做出一個UI 但是你只是能做出來 也就是說 知其然 不知其所以然
我求您了，您要是學會了我還吃什麼啊。。。。
咱們這智商差異也太大了點，我覺得我就是一個腦殘。
工作幾年了我都只敢說我會用AI，用AI做UI（擬物類）我想都不敢想啊！
畢竟不會網格
為什麼要四小時呢學會呢？打電話跟客戶說遲一點交貨不就可以嗎？你老闆叫你做的嗎？那你告訴他你既不會 Ai 也不會 UI，四小時怎麼做。
好了，四小時內學不學會 Ai 不是重點，重點是為什麼要選 Ai？用 Ai 做 UI 可以，就如你可以用「小畫家」畫 Icon。題主大概不是要做最終的 Visual Design 吧（設計一個完整的 App 或網站，四小時也做不完，找些素材什麼拼貼一起不算是在「做」吧），只是做 UI 流程或是要展示你的 UI 概念，那用你本身熟悉的工具就好，Keynote（可做簡單動畫）、OmniGraffle（做 wireframe 蠻好用的），其他人提出的 PowerPoint、Word、Fireworks 也可以，會 HTML、Javascript、CSS 的可把整個互動的介面做出。甚至可以在紙上畫，配合 POP App 就可以在設備上展示。
沒必要執著於 Ai 吧！或者可以先花時間學學 UI 。呵呵看到Ai做Ui我就笑了。就像在問怎麼開車渡長江，工具都錯了……
會用，和會做UI是兩個概念。
四個小時教會你大概，我估計沒有大問題。
但是如何靈活運用，如何升華稱自己的想法實現出來，這就不是四個小時能完成的。可能四個月都不一定能夠。裡面包含著個人理解能力、創新能力和持之以恆的練習。
很多人會PS，但是原畫插畫畫得好的人，還是這麼少。一樣的道理。簡直是天大的笑話。每個人都會用word這個工具，但是會用word就能寫好文章？
是，你可以四小時學怎麼用word，但是好文章是日復一日的閱讀和幾十年的人生閱歷才寫得出的東西。怎麼大家會有「會軟體=出作品」這麼奇葩的邏輯？別人搞藝術的被熏陶審美都是白熏陶的？文學大師光會打字，好文章就能出來了？
AI就用來改顏色了（DOWN了矢量素材之後）。。。。。
想多了吧，雖然無數得入門教材都會評價AI是簡單易學，但也沒這麼玩得好嘛。
就我個人經驗的話，每天下班到家之後八點到十二點玩AI，包括在公司的八小時。合計每天大約10小時在這上面，三禮拜左右玩得比較熟練。之前PS水平之前很渣。
無非就是看視頻，跟著教程一步一步走，然後自己來一遍，期間記得做筆記。
最重要得一點，千萬要頂住來自外界得冷嘲熱諷：「哇，你個彩筆連這都不會。」
你說一個學三維得去廣告公司湊什麼熱鬧，還投遞平面設計師的簡歷。為什麼要限定於AI。
如果只是產品經理用的話。。。
前面很多人都提過找個原型設計軟體。。
搜索了下 居然沒人推薦 這貨！！
Sketch ！！！！！
簡單的引用了一段介紹。
Sketch 是為圖標設計和界面設計而生的。它是一個有著出色 UI 的一站式應用，所有你需要的工具都觸手可及。在 Sketch 中，畫布將是無限大小的，每個圖層都支持多種填充模式；我們有最棒的文字渲染和文本式樣，還有一些你一定會愛上的文件導出工具。
不覺得為了ui而生嘛！這貨相對來說非設計行業的從業人員就能輕鬆上手啊！
不要啊英雄，那可是我學了6年才會的...
分割線君
=======================================
這個破回答竟然也能收集到贊..哈哈，不是我笨，是本科+研究生+實習了六年的設計，Ai都是私活兒逼出來的
我給大家講個笑話：
《21天精通C++》
其實吧，史上最簡單的做界面設計的軟體是PPT。。。。。。百試不爽。
之前還用PPT做過VISUAL。。。
做交互模型流程 其實EXCEL很好用 哈哈。。
首先我先簡單說一下我自己，我不是專業的網頁設計、交互設計。我的主要職業是傳統平面設計，網頁我也做，AI非常熟悉，幾乎天天都在用，但從來沒用AI做網頁或者APP。
個人非常反感與排斥用AI做網頁，只是經常會遇見朋友、同事用AI做網頁，所以從中發現過一些問題。
在我認識的朋友中，大部分的網頁設計、交互設計師都不會用AI。大部分的平面設計師雖然AI、PS都很熟，但是卻做不好網頁。特別是用AI做網頁的時候經常犯一些低級錯誤。（比如說：字體選用、色彩模式、解析度、出現有小數點的像素....）
我的回答可能跟排名第一 @黎敏 的回答有些相似，但是我的一些點可能與她不太相同。我可能比較多的關注做網頁或app時用ai和ps之間的相似與不同。以及用AI做網頁時應該注意的一些地方。
--------------------------------------------------------------------------------------------------
題主是想要在4小時內學會用ai來做ui?那麼我覺得題主應該已經會用ps做ui界面了。而且做這個ui之前，想必已經做好原型，考慮好配色了，準備好icon了。
如果你沒有ps的基礎。。那麼算了，就算4個小時能做好，也很容易出錯的。
如果你沒有做好原型。。那麼算了，可能做個原型都不止4個小時吧。
如果你沒考慮好配送。。那麼算了，別一個字體的顏色就調上個把小時。
如果你沒準備好icon。。那麼算了，有的icon幾個小時都不一定能畫好。
假如下面這張圖↓↓↓↓↓↓↓↓↓，就是題主腦海中想要得到的結果，那麼如何用ai快速的把他實現呢？（素材齊備的情況下，大10-20分鐘即可）
我用AI先畫了個原型（昨天電腦剛裝的系統，所以很多軟體都沒裝，不過就算裝了AxureRPPro，我也不是很會用。。畢竟咱不專業- -！）
這貨是原型↓↓↓↓↓↓↓↓↓
我從以下幾點來解答。
1.哪些工具是會用到的？
移動工具
矩形工具
文字工具
路徑查找器
倒角
對齊與排列
剪切蒙版
...
2.哪些操作是和ps相似的？
atl移動來進行複製
shift鍵的功能
對錨點的操作
文字工具
移動工具
路徑查找器
對其與排列
...
3.哪些點是需要特別注意的？
a.在像素視圖下進行設計，並確保像素為單位，不出現小數點的像素長度（用ai做網頁或者ui時，這點真的是非常非常重要的。我經常遇到一些設計師出這樣的錯誤。CS6好像不太容易出這樣的錯）
....
類似答案參考：
《21天學懂C++，Java，Object-C and Python》
《21天如何當上總經理，出任CEO，贏取白富美，走向人蔘巔峰》
推薦閱讀：
TAG:平面設計 | 用戶界面設計 | AdobeIllustrator |