如何自學成為UI設計師?
寫在前面(不缺錢,找個培訓班因該能少走不少彎路,節省不少時間)(我自己沒上過培訓班,但是別人這麼說,我也覺得對) 一、學習基礎軟體操作如果沒有PS 基礎,請百度搜索PS教程。(別人說李濤的ps教程不錯你可以看一下)(一邊看,一邊跟著做,動手很重要)(軟體可以是別的如AI,方法是一樣的)
二、磨練技能,動手練習
找幾個自己喜歡覺得好看的圖標、APP、網站 截圖下來,百分百臨摹複製出來。(不懂就看教程,百度,進各種設計、UI群,問別人,問朋友。百度和教程是第一位的,盡量少問別人。)你平時都是怎樣進行設計技能練習的? - 用戶界面設計 三、提高審美、拓展思路、開闊眼界瀏覽各種設計類的網站(站酷,優設、UI中國。。。)看別人的學習經驗,下載收集設計類的素材。學習 Photoshop 或者網頁設計,有哪些網站值得推薦? - 網頁設計 (Web Design) 四、規範自己的工作流程下載各平台的設計規範(安卓,蘋果,WP)仔細研讀,並在聯繫中加以注意,應用。
以上一 二 三 四 應同時穿插進行,沒有優先順序和那個更重要。自己覺得差不多了,就可以開始對已有的APP,網站進行修改設計,發現優點與不足。變成自己的東西。自己嘗試做自己想法的東西,發表在 你經常瀏覽的設計網站上,接受別人的提意見,贊同,表揚。 五、嘗試自己做相對完整——圖標、APP、網頁這是對之前所學的總結,也是以後找工作的鋪墊準備找實習的工作(這是一邊工作一邊學習的過程,私以為這個階段學習比工資更為重要)簡歷應著重表現你單獨完成的APP、網頁的經歷
作品質量和數量體現-你學習的態度實習的工作 目的不是薪水,是學習。在實習中有了項目經驗,公司對你好,有的學,那就好好乾,對你不好,沒啥好學的,那就跳槽。跳槽的重點,你仍然需要學習,所以盡量不要找只有一個你一個設計師的公司,沒有交流沒有學習不會愉快的。更具體的方法和資料寫在之前:這篇教程內容比較多,如果你是新手,能堅持每個知識點都搞明白的話,起碼要半年的時間~~!、
如果你進來隨便看一看就走了,那不能怪別人,是你自己不努力~!~~已經有很多新人在這裡學完找到了高薪工作。今天來談談這個話題,學UI第一階段到底要掌握哪些知識和技能。
我們先來劃分一下啊,學UI要分幾個階段來學:初級階段——&> 中級階段——&> 高級階段
QQ群里大多數學生都還在入門階段,感到很迷茫,不知道從哪裡開始學起。網上的海量信息,全是教程,都不知道先看什麼,後學什麼。非常的無助。
小編擁有多年UI設計實戰經驗,大大小小也做了很多項目,借這個機會,給新人們指引一個方向,希望能幫助到大家。
入門階段,就像一張白紙一樣,乾乾淨淨,也很茫然。所以才會有那麼多的培訓學校,教給大家的都是最基礎的入門的知識。
很多人在群里會問,我是自學還是報班啊。這個問題回答的嘴都軟了。
答:你如果定性比較弱,需要人逼著才學的進去,又不差錢。那麼就報班吧,這樣入門比較快。選擇學校的時候先去聽聽,在問問大家,不要被忽悠~!~如果你自學能力還不錯,又差錢。那麼還是自學好了。
下面我們來講講自學,因為小編從業多年都是自學。誰叫咱是窮孩子,交不起16800的學費。
話說這錢可以買一台高配的MACBOOK PRO 15
上邊這2篇文章看完以後,是不是大致明白了一些什麼了。
先來說說UI設計入門階段,用什麼軟體。工欲善其事,必先利其器對於入門階段的童鞋來說,不要糾結那麼多,先把Photoshop玩熟練再說吧。因為在日常工作中,用的最多的就是PS了,可以這麼說,做UI界面基本上用它就夠用了。所以入門階段的你,不要瞎操那麼多心了,專心學習PS吧.
軟體安裝(建議購買正版軟體,以下下載僅供學習使用)- Photoshop CS6下載
- Photoshop CC(安裝文件+破解教程+破解補丁)
- 怎樣安裝Photoshop畫筆,形狀,動作,濾鏡等插件
- psd 縮略圖查看插件
配置Photoshop參數,做UI更方便安裝字體
- ios-android-wp 3大系統字體下載(包含中英文)設計師必備
- ios在線預覽字體(ui設計師必備)
photoshop視頻教程
- 傳智播客網頁平面設計學院 Photoshop快速入門視頻教程
- 李濤-photoshop教程
- 李晨公開課視頻教程
- 7天精通Photoshop CS5 UI交互設計
- 杜娟教你如何優秀UI設計師
- 李鳳輝-UI設計教程
- Photoshop CS5實例視頻195集
- 老賀-PS人物面部美化及商業修片技法
- 高志遠-Photoshop UI設計視頻教程-快速掌握水晶質感圖標
- PHOTOSHOP CS 視頻教程完整版(有些老,但是講的還是可以)
還有這幾個也要看看的:
- 45個設計師需要熟記的ps快捷鍵
- PS真正實用技巧
- Ps改進UI設計的一些技巧(必看)
- 設計新手在PS中最常犯的6個錯誤
- 你的PS很卡嗎?來瞧下這10個加速技巧
好了,軟體也安裝好了,視頻看了不少了。接下來就是要做各種練習了。前邊UI到底是什麼一文裡面也說了,UI不光是畫ICON,還要做界面。還有一些交互知識。
入門階段,就先別想那麼多,先畫畫簡單的圖標,做一些簡單的界面吧。
這個時候,逮到什麼畫什麼,比如打開百度的首頁,這個界面不陌生吧,照著畫一個出來。有人說了,這有什麼好畫的啊。你還別不服。很多入門級的新人,還真是做不出來。
有人連字體都做不出來,宋體12號 ,這個地方選無,就好了。
然後輸入框的效果放大看看,用了內陰影。
然後是搜索按鈕,用到了什麼效果了。
漸變+描邊+投影+內陰影做的白色高光(一個圖層樣式完成)
小小的一個按鈕,盡然有這麼多學問在裡面。這就是UI的魅力所在。
UI設計要先把什麼搞明白,哪些PS技巧先學會Photoshop的知識點太多了,用了10年都不敢說精通。每個不同的設計領域用到PS的知識點也不一樣。
比如做CG原畫的,做網頁設計,照相館處理照片的等等用到PS功能都不太一樣。
UI設計 入門階段先要學會以下幾個功能,一定要玩的很熟練第一:圖層樣式上面做的百度這個頁面,看著簡單,卻用到了好幾種的圖層樣式。那麼像下邊這樣的按鈕。
用到的就更多了。所以想打怪升級,還是要把圖層樣式玩的很熟悉,入門階段要分析的出來,用到了什麼效果。
看到什麼好的界面或是ICON,就立馬分析一下,它用到什麼圖層樣式?
相關的教程:
- 一個按鈕有話說(PSD下載)
- 還在擔心按鈕設計嗎?來看看這十條基本準則
- 教你畫一個開關
- 如何與像素打交道
- 透明導航設計講解
第二:圖層的混合模式
- Photoshop的混合模式(詳細解答)
第三:形狀工具
- 玩轉PS形狀圖層UI設計師必看
- 虛線的畫法
第四:學會切圖(常用的切圖辦法就在這裡,先挨個學一遍,然後根據實際的情況選擇相應的切圖方法)
- photoshop切片使用小技巧(切圖)
- PhotoshopCC新功能 生成圖像資源(切圖)
- 【詳細介紹android和ios平台的切圖】
- 做ui必備–PS切圖動作用法(必裝)
- Android切圖小貼士
搞明白一些常規的界面尺寸和視覺規範移動端:
- 移動端界面設計之尺寸篇
- ios視覺設計規範說明
- IOS 7 Ui規範PSD
- Android系統字體規範(含Android系統字體包下載)
- android規範文檔3份PSD下載(新手必學)
- ios7和ios6 2套icon模板下載(ui設計師必備)
- WP7 控制項,WP設計師必備文件。(psd下載)
網頁端:
- 網頁UI是如何標註的?(附帶WEB UI視覺規範文檔)
- 網頁UI視覺設計規範
- 網頁設計基礎技巧
- WEB設計指南!
- 界面設計速成
- 不要讓用戶思考
色彩的學習
設計中關於顏色搭配的一些小經驗
配色秘要:永遠不要使用純黑
PS教你做漸變大背景
PHOTOSHOP操作技巧開始做點什麼(臨摹階段)先來點勵志的
開始練習!先學會技法。
- 還在擔心按鈕設計嗎?來看看這十條基本準則
- 解密IOS7毛玻璃效果
- 輕鬆打造iOS7風格圖標
- PS強大的角度漸變
- 教你如何畫圈圈—–標識設計中輔助參考線入門
常規UI切圖(3種方法,各有各的好)移動端UI切圖必備工具和教程
好了,差不多了,這些都挨個學一遍。就入門UI了。
學UI 要學的真的很多,這些都是基礎的知識,這些掌握了,才能到達 中級階段,加油!少年~~!
整理編寫:TIGER
原文地址
學UI入門階段到底要掌握哪些知識(UI第一階段課程)以上前段時間,關注互聯網行業的朋友應該在朋友圈都刷到了《2016,UI設計失業潮來了!》(2016,UI設計失業潮要來了?)這篇文章,大致意思是說純界面設計的UI的市場已經趨於飽和,如果想要成為offer收割機,只精通頁面設計並不夠。雖然文章有些標題黨,但說的卻是大實話,其實不只是設計行業,現在每個行業都更歡迎複合型人才,想自學成為UI設計師,也需要多方面的儲備知識。1、UI設計師是什麼?
不說UI設計師,就連設計師,很多人都以為只是P圖的美工,這裡有必要先明確一下UI設計師的概念。
維基百科對於UI定義:
UI,也即用戶界面(User
Interface,簡稱UI,亦稱使用者界面)是系統和用戶之間進行交互和信息交換的媒介,它實現信息的內部形式與人類可以接受形式之間的轉換。
因此,UI設計師也就是設計用戶界面的人。
毫不誇張地說,在顏值當道的年代,UI設計師的水平,直接決定了互聯網產品(網站、App、網上店鋪等)的顏值。無論產品的質量怎樣,用戶接觸產品的第一幕,就是UI設計師給產品設計的這張臉,而像我這種「顏狗」,一旦產品的顏值達不到我的標準,下一步就是關閉/卸載。
一個好的UI設計師,能潤物於無聲,在渾然天成的設計中為產品注入新的價值,絕不是普通的打雜美工。
2、UI設計師的基礎修養
·設計總體認知
在進入一個未知的領域前,我總傾向於先梳理這個領域的架構,待有了比較全面認知後再深挖,這其實也是大學專業課程設置的思路,先學習一門導論課,了解基本概念,再進入細分領域。學習UI設計也是一樣,先對整個設計專業有總體認知,再去學技法層面的內容、規則,慢慢把知識庫填充完整,如果有條件,可以嘗試了解一個新的互聯網產品出爐的工作流程。這樣,在局部學習前,就能對重難點、課程框架都心中有數。
·技術基礎
如果說程序員一天中大部分時間都在碼代碼,那麼設計師的時間都留給了Photoshop、Axure、Adobe Illustrator,塗塗修修確實是常態,而這裡,也是「美工」稱呼的發源地。嫻熟的技法,是完美展現設計作品的必備條件,作為UI設計師,也應當熟練掌握這些常用軟體。稍低一點的要求,是至少能精通其中一款軟體,各種操作都已經形成自然反應,其他軟體也能通個七八分。
不過,學完這些軟體之後,切忌炫技,學到這步,你只是學會了修圖,還只在美工的地步,並談不上設計。
·畫圖基礎
有人以為,設計師只要去圖庫網站找一些素材,藉助工具進行修飾即可,其實這隻能鍛煉你的借鑒能力,當你的技法嫻熟到一定程度,就可以嘗試臨摹。通過臨摹,一則用來強化技法層面的能力,二來也能提升初學者的創新能力。
臨摹的內容,可以有兩方面選擇:一種是系統自帶的圖標,比如Mac OX、Windows,或者移動端iOS、Android的原生圖標,都是精心打磨過,既能幫助初學者了解平台設計規則,又能在臨摹中逐漸鞏固常用軟體的技術。另一種則是行業牛人的設計作品,捉摸他們的設計風格、思想和細節,都能加深對設計的認識。
·各平台設計規則
iOS、Android、WP、Windows、Mac OX各個平台都有自己的設計規則和偏好,在移動端,連每款機型的解析度、狀態欄高度、導航欄高度、圖標尺寸、字體、顏色值都有嚴格的規定。這裡貼一個之前看到的iOS和Android的平台規範,整理的比較全面、規範:iOS和Android的app界面設計規範。其他平台的設計規則,在搜索引擎上也都能被檢索到。
·理解能力
作為設計的上游,產品經理常常會直接發需求文檔給設計,能讀懂產品文檔、快速分析需求,定位出風格、色調、元素,最後迅速把產品需求視覺化,就是產品經理們最愛合作的設計師了。
3、UI設計師的進階修養
·審美意識
先來看兩個肥腸火熱地知乎問題:
國內有哪些非常有設計感的 App?國內有哪些非常有設計感的 App? - 應用(軟體)
國外有哪些非常有設計感的 app?國外有哪些非常有設計感的 app? - 應用(軟體)
為什麼我們青睞每日故宮、榫卯、網易雲音樂這類應用?除了應用本身生產的優質內容外,設計感是很重要的一點,君不見多少用戶讚美良心設計。
→_→那麼,什麼是設計感呢?投射到設計師身上,大概就是設計師自身的審美意識了。
至於審美意識要如何培養、提高,這就跟你去問文學家要如何提高寫作能力一樣,他大概也是懵逼的。日積月累地瀏覽、學習、思考、聯繫,大概就是逐漸提升的可能途徑吧。
·用戶體驗
從前,除了設計界面的UI設計師之外,互聯網公司會專門設置專門的用戶研究中心來處理用戶體驗的種種問題,但如今多元的趨勢下,一個互聯網產品的視覺設計,需要懂一點產品、懂一點用戶體驗,才能更有效的推進合作流程,同時也會培養自己多元化的思維方式(用戶研究以縝密的邏輯發展,而UI設計則更加追求審美)。
·交互設計
分不清交互和UI的人,可能一抓一大把,事實上,這還是有區別的。從一般意義上說,UI主要做的是圖形用戶界面,也可以稱為GUI設計師;交互設計主要做處理點事人機互動的界面,任何與機器打交道的過程,都需要交互設計師來參與。
但坦白說,現在的App中,有多少操作能把UI和交互完全清楚地剝離開來呢?一個好的產品,需要美觀的界面和順滑的交互,也就離不開設計師兩種能力的相輔相成了。尤其現在,設計趨向扁平化的時期,只要遵循設計規範,交互設計甚至能出了設計稿後直接給開發去實現,單純UI設計的存在感日益弱化。
·代碼能力
這幾年互聯網產品最火的推廣方式是什麼?
自然是H5!
那麼如果一個設計師既能做好設計,又能完善布局前端代碼,那麼只要有一個簡單idea,經過你的手就能完全實現。這種複合型人才是多少公司爭搶的對象呢?不過這些都是進一步的要求了。
4、資料
說了很多,下面推薦一些適合入門的書籍與網路資源,以供參考。
·書籍
《Don』t Make
Me Think》(點石成金)
這本書已經了好幾版了,能這樣一遍遍修訂出版的,除了學生用的教材,就是業界的聖經了。這本書主要講的是如何通過網站設計來提高網站的可用性,除了網頁設計外,也包括了一些用戶心理研究等內容,語句曉暢,讀起來十分輕鬆。裡面的案例雖然有點久了,但經典的案例永遠不會過時。作為初入學者,能從一本書里看到整個領域的大局,也有逐漸養成設計師的思維,是入門啟迪型書籍。
《寫給大家看的設計書》
一本Robin Williams大師寫的老生常談,本書主要圍繞對比(Contrast)、重複(Repetition)、對齊(Alignment)、親密性(Proximity)四個設計基本原則展開,短短200頁,門外漢讀起來也不費力,但讀完這本書你會明白設計的重要性。另外,這本書的排版、文字編排也很有設計感,讀起來更加舒服。
《破繭成蝶:用戶體驗設計師的成長之路》
前面的書是理論型的,這本是則比較注重實踐,結合本土互聯網公司案例解釋了很多落地的問題,甚至還有具體崗位介紹,面試細節,工作流程等,可以作為工作的工具書。
《設計之下》
通過搜狐新聞客戶端UED團隊的設計過程,完整展現真實的設計流程。全書分為三個部分,第一部分為「交互設計」,主要總結了大局觀、操作流程簡捷、形式新穎且統一、各種特殊情況等交互設計要點。第二部分為「視覺設計」,闡述了界面、顏色、圖標、質感、動畫、等具體方法。第三部分為「他們眼中的優秀設計師」,通過產品經理、程序員、運營、市場經理的視角,闡述了如何成為一名優秀的設計師,同樣是1-2歲的設計師學習的好書。
·網路資源
李濤的PS課程:
試圖學習過PS的同學應該都知道李濤,講課深入淺出、旁徵博引,節奏也合適,聽幾節課下來對PS會有不少新的見解,比自己一個人悶頭搜索效率高多了。
良知塾李濤:Photoshop小技巧:
良知塾李濤:Photoshop小技巧
李濤Photoshop高手之路基礎篇:
李濤Photoshop高手之路基礎篇
李濤Photoshop高手之路提高篇:
李濤Photoshop高手之路提高篇
這三門網易雲課堂上的課程是李濤免費的PS課程,從基礎到提高都有,還比較全面,學的人也都有個幾萬,評價蠻好。
另外,李濤自己也和別人一起創辦了一個在線學習網站:高高手,在他的個人主頁上也有他的課程,部分收費:李濤 - 高高手
完整的設計課程:
從頭開始學的可以考慮網易雲課堂和浙大一起推出的《UI設計師》(UI設計師微專業)
和《交互設計師》微專業(交互設計師微專業)。相比線下培訓班動輒幾萬的價格和固定時間學習,在線學習更加方便點,而且說真的,網易出的那些App,像網易雲音樂、LOFTER還都挺有設計感的,挺欣賞他們對產品認真打磨的態度,所以不自覺的就對他們出的設計課程抱有好感。
外語不錯的也可以去Coursera上學英語授課英文字幕的《interaction-design》交互設計(Specialization)的微型課程,同樣學完七門課和一個畢業設計後可以拿到證書。
理論性課程:
《Design Thinking》(設計思維:https://iversity.org/en/courses/design-thinking-2nd-iteration)是德國MOOC平台上的iversity的一門設計課程,比較注重理論性通識類課程,實踐內容幾乎為零,整體啟發性較強,不過只有英文作為課程語言。
優質網站:
Dribbble:Dribbble - Show and tell for designers
Behance:Behance
站酷:站酷 (ZCOOL)
花瓣:花瓣網_陪你做生活的設計師(發現、採集你喜歡的靈感、家居、穿搭、婚禮、美食、旅行、美圖、商品等)
這類網站就像是設計師的臉書/人人網,大牛設計師都在上面註冊並發表自己的作品,靈感枯竭的時候,覺得自己審美不夠的時候,都可以去上面逛逛,尋找靈感,提高審美,陶冶情操,和諧生活。
另外,真心推薦互聯網公司UED部門博客,乾貨很多,值得學習。
騰訊CDC:http://cdc.tencent.com/
騰訊ISUX :騰訊ISUX – 社交用戶體驗設計
淘寶UED :TaoBaoUED | 做地球上最好的 UED
阿里巴巴UED :阿里巴巴(中國站)用戶體驗設計部博客U一點設計 UED團隊
網易用戶體驗設計中心UEDC:網易用戶體驗設計中心
·各類App:
各種榜單、推薦應用的賬號上新出來的App都可以關注,App集郵能力,就是你資歷的一部分,很多超越也是在巨人的肩膀上改出來的。
4、練手
光說不練假把式啦~
·參加比賽:
現在手機主題設計、App皮膚設計各種比賽到處都是,有一定寄出之後適當參加比賽,都是鍛煉人能力,嶄露頭角的好地方,運氣好就直接拿到offer了。
·接私活:
雖然聽上去有點微妙,但臨摹能力、技術能力,這些都能在接私活中慢慢培養起來,而且還有真實收入。很有可能,你之後面試的作品就是私活帶來的。
·實習:
既然要入行,當然要去裡面自己體會下箇中滋味,如果有幸去了大公司,很好你就能熟悉一套規範的設計工作流程;如果去的是小公司,那你可能就要成為獨當一面的全能手了。總之,出去歷練,是走向社會的第一步。
5、一些醒腦的東西
初入行的你和年薪XX萬的高級設計師之間有多少差距?
這裡貼上facebook的產品設計師總監Julie Zhuo用草圖解釋初級設計師和高級設計師差別的文章,三個對比圖,簡單明了但發人深省,自我感覺良好的時候,可以上來看兩眼醒醒腦。
從工作流程上來看,初級設計師就像亢奮的小精靈;高級設計師則在瘋狂中有規則。
在設計追求上,初級設計師追求設計美感;高級設計師則創造新的價值。
在解決問題上,初級設計師往往脫離實際;高級設計師則更貼近產品實際。
原文地址:
Junior Designers vs. Senior Designers a€」 The Year of the Looking Glass
最後說幾句
很多人說互聯網寒冬來了,眼看著找不到工作的學弟學妹逃離北上廣,縮招裁員越來越明顯,就極力遊說周圍的人別再從事程序員、設計師、產品經理等與互聯網相關的崗位。
其實我始終不太贊同這個觀點,這只是前幾年互聯網過度樂觀膨脹發展後終於回歸理性而已。
回歸理性,意味著已經過了人有多大膽,地有多大產的時代。
回歸理性,意味著行業從野蠻生長逐漸轉向遵循市場規律。
回歸理性,意味著企業對人才需求仍在,但要求漸高。
所以,做一個不那麼恰當的比喻,
多才多藝的設計師就像一線城市的房價,儘管開價很高但還是供不應求。
學藝不精的設計師就像十八線城市的房價,在一路下跌的頹勢再也硬不起來。
核心技能點是人才流通市場上永遠的硬通貨。
雞湯一碗,與君共勉。
當前互聯網經濟時代下,越來越多的人把目光投放到UI設計上來。雖然UI的門檻並不是很高,網路上也有很多零基礎入門的教程可供初學者自學,但想要成為一名真正的UI設計師,不但需要軟體媒介技能的學習,更重要的是對UI設計有一個更為全面和深入地了解,把握UI設計的完整流程,不斷提升專業能力,以下稍作講解。
一、什麼是UI設計
想做UI設計師,首先一定要明確什麼是UI。很多人至今對於UI的理解仍有偏差,認為UI設計師就是使用PS或者AI做界面設計或者設計圖標。事實上,這個說法只是對UI設計中GUI(graphic user interface)部分的最基礎性理解。
除了圖形設計以外,一個真正的UI設計師還需要深入了解交互設計和用戶測試研究方面的內容。設計師要通過多種調研方式了解用戶需求,做出相應的解決方案,掌握好產品的操作流程,讓設計符合人的心理學和操作習慣,最後給出UI模型。
圖片鏈接:https://www.behance.net/gallery/37945467/Alarm-clock-app
二、UI設計師需要掌握什麼
1. 軟體技能
UI設計師需要不斷學習各類軟體技能,熟練掌握工具媒介,從而在設計過程中更好地講自己的設計想法予以實踐。一般來說,基礎性的軟體如PS、AI、AE等是UI設計師必須要掌握的。另外,一些網頁編程類軟體如HTML、CSS等網,也需要深入學習。
圖片鏈接:https://zhidao.baidu.com/question/1690669875013234588.html
2. 美學
想要做好UI,不僅需要軟體技能,也要具備一定的美學基礎。UI設計主要與圖形相關,比較偏向於視覺化呈現的效果,需要考慮的範圍有配色、字體、排版布局等方面,這就要求設計師必須要有一定的審美能力和色彩感,而且要有一定的手繪能力,如果題主沒有專業的平面設計基礎,可以多讀一些配色和手繪基礎相關書籍。
圖片鏈接:https://www.behance.net/gallery/37945467/Alarm-clock-app
圖片鏈接:https://www.behance.net/gallery/42058853/VitPilot-(Mobile-App)
3. UI設計流程
除了軟體基礎和美學知識儲備,UI設計十分注重設計思維和邏輯思維。因此,想要成為一個出色的UI設計師,一定要熟練掌握其設計流程。UI設計一般工作流程為:定位與分析,用戶研究,架構設計,原型設計,界面設計,可用性測試,修改和完善。
1)定位和分析
想要設計出一款好的UI,首先要知道用戶需求。UI作為一款非實物性的產品,其主要功能是用於解決問題。一般情況下,UI設計師會從背景分析開始,針對當下市場,技術,產品進行一個比較全面客觀的了解,去尋找問題作為自己的設計靈感。
圖片來源:https://www.pinterest.co.uk/pin/458382068297462492/
2)用戶研究
通常設計師在設計UI之前,都會做大量的research,並在整個設計流程中貫穿用戶調研和研究。調研方式及其重要性可以參考康石石過往回答:「如何理解設計調研的價值與使用方式? 」,這裡不再贅述。在充分的調研後,設計師會進行數據的總結和歸納,使用mindmap進行頭腦風暴,確定自己的設計方向。
圖片鏈接:https://www.behance.net/gallery/57120591/Vicarious
3)架構設計
接下來便是通過信息可視化的形式對數據的視覺化表達,產品架構設計、功能設計、操作邏輯設計都是在架構設計階段需要進行的。這個階段中,繪製能夠描述模塊之間關係的產品結構圖和產品流程圖是最重要的內容。
圖片來源:http://blog.kui.name/2011/02
4)原型設計
UI的原型設計繪製方法有很多,可以畫手稿圖,也可以用Axure等軟體進行設計,題主可以根據個人繪製偏好來進行工具的選擇。
圖片來源:https://www.pinterest.co.uk/pin/475129829428235703/
5)界面設計
至此才進入大家都熟知的各類圖標的設計、色彩搭配等階段。UI設計師會根據設計產品的屬性和風格對icon或者界面色調進行調節和修改,這個階段會比較考驗設計師的美學功力。題主可以通過閱讀相關書籍或者參考一些出色UI設計師作品獲取靈感。
圖片鏈接:https://www.behance.net/gallery/22981559/Mobile-Interaction-Design
圖片鏈接:https://www.behance.net/gallery/49226037/Web-Design-for-Adidas-Shoes
6)可用性測試
設計的後期會進行可用性測試和最終UI細節上的修改。關於可用性測試,通常有三種方式:一對一用戶測試,啟發式評估,以及焦點小組。測試的主要目的是通過觀察分析用戶來提高產品的質量,讓產品用起來更方便,易懂,易操作。分析觀察能力與邏輯能力,是這個階段必備的能力要求。
圖片來源:https://www.pinterest.co.uk/pin/465067099006777172/
7)修改和完善
最後的階段便是針對於測試出來的問題,進行產品的改善。
圖片鏈接:https://www.behance.net/gallery/46128115/Liment-Website
UI設計雖然入門相對簡單,但絕不是掌握幾種軟體技能或了解入門知識就可以成為一名UI設計師。想要做好UI設計,一定要多看多練,先借鑒,再原創。題主可以利用閑暇時間多瀏覽behance,dribble等設計網站,從他人的設計中獲取經驗和方法,經過細緻的揣摩和思考,應用到自己的設計創作中。在掌握軟體技法,了解設計方法的基礎上,把所學到的知識凝練到自己的創作之中,設計才會更加得心應手。
以上望有幫助,歡迎交流
———————————————————
歡迎關注我的個人官方微信(kang-shishi)
如有藝術留學、院校、專業、作品集方面的問題,可私信康石石諮詢
希望以下這些學習資源,可以讓你很好的入門,以後就不用到處去找UI設計教程了。
通過這些教程的學習,至少能夠讓你達到初級UI設計師的水準。以下學習資源,非常適合預算較少、但想要系統自學UI設計、獲得高質量學習體驗的同學。
在準備學習之前, @酷coo豆 個人覺得還是有必要了解以下知識。至於UI設計到底有沒前途?能否拿到高薪,這些都是個人因素佔主導,我就不在此做過多介紹了。
一、自學UI設計,你應該知道的事。
首先,我個人也是十分贊同自學UI設計的,但題主可能比較迷茫的是:學習UI設計到底該學些什麼?簡單來說:UI設計的知識體系中包括:軟體技法、交互設計、設計規範、圖標設計、界面設計、動效設計幾個部分。
1.軟體技法(你大部分時間都會與軟體打交道)
軟體技法,也就是繪製界面或圖形設計的能力。常用到的工具有PS、Sketch、XD、AE、Principle等,但你並不需要把所有軟體都學得滾瓜爛熟,因為在一個完整的APP或Web項目開發中,你只會用到軟體的部分功能。
做界面通常會用到PS、sketch,做動效可用Principle、AE,做交互原型可用sketch、或XD。建議先把PS軟體學精通後,其他軟體也就是觸類旁通的事了。所以有了一個思維上的高度,你就不會覺得要學的軟體太多而打退堂鼓。
2.交互設計(滿足功能需求,產品否好用的基礎)
交互設計確定了用戶與界面的交互邏輯,以及溝通方式。通常包括了界面中的圖像、文字、icon、按鈕的布局,以及以及頁面間的來回跳轉邏輯。
△圖例,交互設計稿
3.設計規範(這是細緻活兒)
產品經理把交互稿(線框圖》畫好後,作為UI設計師的你,得根據交互稿(線框圖)及不同平台設計規範,去確定頁面的視覺風格,以及視覺元素的具體尺寸、按鈕寬高,繪製界面中的矢量圖標,選好標準字、標準色,確定字體、字型大小、顏色、行距等具體的事宜。
△圖例,京東APP的色彩規範
4.圖標設計(屬視覺範疇)
圖標就是圖標咯,英文叫icon。圖標的應用場景包括:APP的啟動圖標、App Store的展示圖標,APP頁面內的功能性圖標、裝飾圖標等。圖標的風格可以說有千萬種,是很能反應一個APP產品的調性的,所以圖標設計,也一直是UI設計師最熱衷的點。
圖例,新聞微博部分圖標設計
5.界面設計(屬視覺範疇)
按照UI設計規範的一致性,將錯綜複雜的線框圖,完善並優化為一幅幅高保真的視覺設計稿,確保觀感舒適,邏輯層次清晰。UI設計師的大部分時間都耗費於此。
△圖例,新浪微博UI界面布局
6、動效設計(呈現交互邏輯)
把靜態的界面,按一定的規則、邏輯通過相關軟體動態的展示出來,讓其他介面人員更直觀理解UI設計師的成果和理念。
二、學前熱身——40分鐘,掌握設計通識理論。
說完了UI設計的知識體系,接下來就該系統學習設計相關的基礎知識了。UI設計在某種角度而言,算是平面設計的一個分支,其目的都是為了信息的傳達及交流。在具體的視覺設計執行過程中,其就是處理圖像、文字、色彩、這些視覺元素以及排版構成。
如果你未有系統學習過平面設計,你可過一遍以下的設計通識理論,以此完善你的理論知識體系。
1.設計入門:字體排印篇
字體排印,存在於我們閱讀的書籍、網站,以及日常生活之中。掌握以下字體排印需要注意的細節,你便能製作出更好的平面設計。
2.設計入門:色彩理論篇
初學平面設計,總覺得色彩搭配晦澀難懂。不過值得慶幸的是,早有專家學者歸納出了如下的色彩理論,能夠幫助你更好的認識理解色彩。
http://weixin.qq.com/r/lzj85H-EFiJprTuH922F (二維碼自動識別)
3.設計入門:排版構成篇
設計沒有好的排版,信息傳達就會受阻,不但影響閱讀效率,甚至導致頁面凌亂不堪。通過學習本文所講解到的「5個排版構圖基本原則」,很快你就能達到專業設計師的水準。
http://weixin.qq.com/r/lzj85H-EFiJprTuH922F (二維碼自動識別)
4.設計入門:圖像篇
在信息傳播中,圖像是最能吸引受眾的王牌。從氣勢磅礴的電影海報到抽象極簡的UI圖標,正因為有了圖像或圖形的加入,畫面也由此變得生動了起來。
http://weixin.qq.com/r/lzj85H-EFiJprTuH922F (二維碼自動識別)
5.設計入門:設計的基本原理
無數令人驚嘆的設計作品,都離不開線條、圖形、形態、肌理這些最為基礎的視覺元素。接下來,我們就從0開始,學習其中的門道。
http://weixin.qq.com/r/lzj85H-EFiJprTuH922F (二維碼自動識別)
三、技法修鍊——徹底掌握UI設計軟體
這一階段的目的,是掌握UI設計的常用軟體,主要以學習Photoshop為主,熟悉其軟體操作界面,用作UI界面設計繪製。然後AE軟體是用作動效的,也需要你適當了解。如果你有Mac電腦,往後可以再學習一下sketch這款軟體。
PS軟體基礎:photoshop CS6零基礎入門教程 (必學,用於界面設計)
Sketch軟體基礎:Sketch中文用戶手冊(目前只有Mac版本,Win用戶學PS就行了)
AE軟體基礎:AE零基礎中文入門教程(必學,用於UI動效設計)
以上幾個教程非常細緻,能夠幫你一掃軟體知識盲點。
四、理論+實踐——深入學習UI設計核心知識。
這一階段的目的,是掌握UI相關的設計規範,樹立UI設計的思維方式。同時再輔以大量的UI設計臨摹練習,在鞏固軟體技法的同時,加深對UI設計理解,思考UI設計的本質。
1.理論——學習UI設計理論,及設計規範。
掌握UI設計的核心思維方式,學習為什麼要這樣設計,以及怎麼開始UI設計的的背後邏輯,及其指導思想。
書籍:《設計之下》(掌握UI設計流程,以及設計規範)
書籍:《界面設計模式(第2版)》、《交互設計沉思錄》
iPhone尺寸規範
2.實踐—UI圖標設計
深入學習歸納物體材質、光影、透視結構;並用PS軟體繪製表現的技法。
UI圖標設計:《精品ui圖標製作教程》
3.實踐—UI交互設計
UI設計的核心知識一是交互,二是視覺,所以這一部分的知識非常重要!
UI交互:《sketch交互設計入門到精通教程》
4.實踐—UI動效設計
把靜態的界面,按一定的規則、邏輯通過相關軟體動態的展示出來,讓其他介面人員更直觀理解UI設計師的成果和理念。
UI動效設計:《UI動效設計教程-AE軟體》
5.實踐—界面設計,做大量的UI臨摹練習
此階段,你可以參考或CollectionUI,或UI中國,裡面有一些優秀的作品及經驗分享,從中臨摹以提升你的軟體技法,或從中學習別人產品開發流程、以及UI輸出經驗。
五、後期提高——多看優秀設計作品,保持與行業的交流分享。
優秀的設計,源於設計師個人對生活的體驗,以及對美好事物的嚮往。這一階段可以通過多看優秀的設計作品,更多的豐富設計理論知識。保持著長期學習,與時俱進的狀態。
Dribble:Show and tell for designers
Behance:Behance
站酷:打開站酷,發現更好的設計!
書籍:視覺設計書籍推薦(豐富更多的設計理論知識)
以上幾個分享的教程和書籍,完全足夠你掌握UI設計的技能,並找到相應的設計工作。你把上面的所有學習教程買下來,也不會超過1000塊。最後不要忘了,善用搜索引擎,是高效自學UI的關鍵!
關於我
@酷coo豆 ,平面設計學習日記網站長,非科班平面設計師,對自學設計有著深刻的見解。樂於分享自學平面設計的相關書籍、教程、經驗等資源參考,希望和你一起進步,歡迎訂閱我的專欄。
最後推薦:職業平面設計教程、100本設計書單匯總
一、新手如何學習ui設計,軟體學習
ui設計要學的東西很多,軟體是基礎的東西,要想做好出好的ui設計就得先熟練掌握ui設計的基礎軟體,軟體方面有:PS、 AI、AE、ARP,不過對於新手,小編認為還是一定要先把Photoshop學紮實。Ui設計要學的都是比較高級的知識,學習起來也是需要花時間和精力的,所以基礎軟體一定要先學紮實。
二、新手如何學習ui設計,找靈感
如何找靈感,也就是培養審美的能力,首先我們要知道什麼好看,什麼不好看。當我們排斥那些不好看的設計的時候,我們的品味就自然上升了。
再就是要知道去什麼網站上看設計作品。看到不錯的設計要採集下來。說到這裡,小編給大家推薦一些不錯的網站。如:花瓣網、站酷、UI中國、Behance,和有關UI設計的微信公眾號等等…
那麼,如何能快速找到靈感呢,當我們接到一個設計任務的時候,該如何去快速的執行,快速找到靈感呢。平時的素材採集和分類至關重要。一定要整理分好自己的素材文件夾。這對於一個設計來說是非常重要的。
設計師的素材資源庫,就是自己的財富,只有自己整理出來的才有價值。關鍵是自己要記得東西放在哪裡了,不要用的時候找不到。
三、新手如何學習ui設計,懂分析(怎麼思考)
學會分析好的設計作品,主要從下面的幾個方面去分析:
1.是配色上吸引了我們的眼球 還是 版式設計吸引了我們的眼球?
2.細節處理的很有新意嗎?
3.背景烘托的很有檔次嗎?
4.為什麼排版上看著很舒服?
然後再換位思考一下,如果是自己,自己會如何設計,設計手法和細節的處理會不會?創意想法上有沒有給帶來些什麼靈感...
四、新手如何學習ui設計,做筆記(怎麼做)
有沒有發現一個問題,我們每天都在看各種設計作品,真到自己做的時候,一下子全都忘記了,腦子短路了。之前看到那麼多好的設計作品也都白看了,人家的還是人家的,跟自己一點關係也沒有。
所以建議準備一個小本子,養成做筆記的習慣,堅持完成下面三點:
1. 看到了什麼好設計畫一畫。
2. 想到了什麼好點子,寫一寫。
3. 做會了什麼或是想要學點什麼,都記錄下來。
沒事拿出來翻翻看學習的時候積累的心得,精益求精。
今天分享就到這裡啦,如果我的回答對大家有幫助的話要記得幫小編點贊和轉發喲。謝謝大家。
馬上行動,就來得及。朝著成為UI設計師的目標努力吧!
初學者經常遇到的問題:
1.沒有美術基礎,能學好嗎?
2.學了,但總是缺乏自信。
最大的風險就是沒有發現風險,知道最近的不足之處就好辦了:
沒學過畫畫,你是一張白紙,不會有根深蒂固的思想阻礙你進步;
UI是一門綜合學科,在實際工作中手繪用的不多,且一些美術基礎知識、軟體技能,是完全可以在短時間內掌握的。
UI設計零基礎自學指南
1.學會看
生活中隨處可見的物品,認真觀察它了解它的外形,結構,質感,所有吸引你的細節,記下它們;
一定要動手去畫,開始不需要畫得很好,只需將你觀察的用最基本的技法表現出來。每天堅持1個小時,你可以清晰地感覺到自己可以看到越來越多的細節。
推薦書籍:《如何在30天內學會畫畫》
2.學習些基礎的設計知識
3大構成的書讀一讀,懂得一些構圖、色彩搭配的基本原理;
搜集一些構圖、色彩較好的設計作品,做好分類,最好一些常用的風格記憶腦中;
臨摹一些好的設計作品,畫個圖標,畫個LOGO等;
有了積累,可以試著做下自己的創造,例如原創LOGO,海報,小插畫等;
不斷突破自己,挑剔自己的作品,或者找朋友、專業人士點評。
推薦書籍:《寫給大家看的設計書》
3.記憶工作流程,尺寸規範
可以諮詢你身邊做UI的朋友,將流程總結出來,記住它,萬變不離其宗。
4.學慣用戶體驗,交互設計方面知識
各大互聯網公司的官方博客上都有牛人分享,例如騰訊CDC,新浪UED,淘寶UED,百度移動用戶體驗部;
各大設計網站例如UI盒子、UI中國、人人都是產品經理;
平時多玩APP,多使用互聯網產品,每天體驗一款產品並分析總結,日積月累後會發現你對產品的認識會加深很多;
看書,書中與前人的經驗總結,是避免總結踩雷的有效途徑。
推薦書籍(網上可以找到電子版):
《交互設計精髓》
《Don』tMake Me Think》
《瞬間之美》
《用戶體驗要素-以用戶為中心的產品設計》
5.讓自己的軟體更加熟練
建議從Photoshop開始學,接著再去碰Illustrator。設計師通常使用Illustrator製作矢量圖。
網上有無數這兩個軟體教程。可以先從臨摹開始,寫是圖標,炫酷界面都行,有能力原創更好。重要的是去堅持,每天花1-2個小時逐步學習,相信會被自己震驚。
6.加分技能
以上所說是UI設計師標配,懂這些你算是入門,但需要一些人無我有的特質,才能脫穎而出:AE交互動畫;DREAMWAVER Div CSS簡單的網頁布局。
7.好好整理一套作品集
給很醜的網站或APP重新設計,最好不要僅僅放上一堆界面,而是按照標準的UI工作流程,將分析、想法都表現出來。不同方案的設計優缺點分析,這樣你給面試人員的不僅僅是酷炫的界面,還有你對產品的理解,你的思考過程,你解決問題的方式;
參加設計比賽,實戰中鍛煉自己;
免費/收費給一些組織或個人做設計。
堅持以上的學習,
相信你也能和他們一樣,
從無到有完成這些作品!
學UI從臨摹開始,臨摹不僅僅在於提升自己的技能,更重要的是,提升自己的設計感覺,找到感覺做事情就會輕鬆順利很多。而且在臨摹的時候,你知道該建立一張多大的畫布,多少解析度,圖標尺寸應該多大,哪裡適合矢量路徑,哪裡適合點陣圖筆刷,哪種是3D做的,那種是AE做的,等等。做事情不是手腦配合,那麼始終會舉步不前的。
UX設計這個行業的前景是很不錯的, 現在的UX設計行業確實是蒸蒸日上,各大企業都需要招收UX的設計人才。
下面,我列舉的這5點是每個想要轉行UX 的新手們必看的,希望對你們有幫助。切記,不要盲目轉行。
1. 薪資的變化為什麼要把薪資放在最前面呢?首先,大家最關心的還是工資吧。其次,我想對於真正想轉行做UX設計師們來說,這無疑是個保障。 現在UX 設計師的薪資水平已超過程序員的薪資了,Glassdoor文章25 Highest Paying Jobs In Demand指出美國平均UX從業者的薪水是$96,855。當然長期霸佔在排行榜的前幾名依然還是醫生和律師等職業。但不得不說的是UX設計師是一個炙手可熱的職業。而且現在UX Designer的空缺非常大,並且也在穩定的發展中。下面以美國的薪資為例:
並且UX designer也被評為美國最佳的職業第14名。這篇文章也給於了非常中肯的評價:
2. 學習UX多學習總是沒錯的,積累經驗和知識,掌握最新潮流動向,對將來你的設計有很大的幫助。 書籍:Best Books of 2016 for UX Designers 網站:30 Best Online Course Websites to Learn UI/UX 工具:Sketch, Axure, Justinmind, Invision, Mockplus, UXpin. 切記:學習的時候一定要做筆記,做筆記,做筆記,重要事情說三遍。
3. 「熟能生巧」 「光說不練假把式」,理論是實踐的基礎,實踐是理論的證明,有了理論,就要學會如何運用。就像學英語一樣,在學校里背了那麼多的單詞和句子,一看到外國人照樣還是楞在那裡說不出一句來。那就是無用的。不要以為UX 設計就是畫原型圖,既然想成為一名UX 設計師,就要搞清楚UX 是什麼,做什麼的,如何做?大家好好看看這下面的圖示:
(1)分析當前流行的應用程序及網站首先,去下載一些最新的,最熱門的App以及Web, 分析他們的特點及主要的目標用戶群體。再者,分析他們的核心功能,功能的優先順序,分析用戶的使用場景和場景的交互方式等。不要分析太多個APP/Web,只要能細緻地分析一個APP/Web 就足夠了。最後,自己一定要做總結,分析他們的優缺點, 如果是你做這個APP, 你會怎麼做?
(2)好的臨摹是成功的一半臨摹並不是抄襲,即使是大牛,他們也是從臨摹別的大牛一步步過來的,不要覺得臨摹沒用,臨摹是為了能夠把常用的交互方式深深印刻在自己的腦海里,然後吸收轉化成自己的東西,剛開始很難,所以先全盤複製別人的作品,不要嘗試去做任何改動。掌握了優秀的設計方法後,再開始創新。現在網路資源那麼多,Behance,Dribbble,Pinterest都可以去逛逛。
(3)開始設計你的作品萬事開頭難,自己設計的第一個作品一定要認真仔細。不管是設計之前對於目標用戶的確定、市場需求的調研,或者是設計之中對於用戶需求的考慮、交互動作的模擬,都要經過自己的精心考量。而且在完成設計的時候,不要忘記去「炫耀」你的作品。因為只有加強曝光度,得到更多的指導和建議,才能發現不足,修改完善,設計出更好的作品。
4. 擴寬UX人脈圈 社交平台:LInkedIn (天天混跡於此),Facebook (一定要加群組,發發帖子,互動)。 這是我之前列舉的一些活躍度高且資源豐富的群:UI UX Graphic Professionals: Best Facebook and LinkedIn Groups to Join,大家可以加加看。 Twitter(follow一些大師和UX設計師)。 網站:網站就實在太多了。就列舉幾個我平時看的吧:Medium(follow別人,follow的越多,別人也會來follow你。)Behance和Dribbble (多關注一些大牛,給人點點贊,留言,一來二往,人家也就注意到你了。)
5. 設計簡歷和找工作
簡歷的設計要有設計感,一定要突出自己的核心競爭力,帶上自己最好的幾個作品集,對於UX設計師,作品集非常重要,很大程度上能夠決定你是否會被僱傭和錄取,但不要太多,3個足以。既然已經建立了人脈圈, 找工作會相對輕鬆,可以在LinkedIn上發布工作申請,HR看到合適的自然會聯繫你,你的人脈圈是將來能幫助你的一筆財富,一定要好好經營。
說了這麼多,希望你對於想要轉行或者新人有一定的幫助,說實在的,自學UX設計是相當辛苦的,但效果是最好的,如果有大師可以帶帶你,那是極好的。不過「師父領進門,修行在個人」。
祝大家好運!
個人感覺有些學習網站就可以 比如驚喜設計之類的 可以進去看一下 一般都是免費的 比較正規
第一點:學習準備——啟蒙
學習一項技能,尤其是已經有一定沉澱並在各行各業有廣泛應用的技能,就一定要對它先有充分的認知。在開始正式學習前,你需要花足夠的經歷去了解和查閱它的起源、發展、應用、未來。UI作為平面設計的一部分,再往上又從屬與美術學這一大類。因此,首先要先去了解整個美術史的發展。從人類起源各個階段中,美術經歷了什麼樣的變化,在各自的時代發揮了什麼作用,近代美術史又經歷了哪些波折,平面設計藝術是如何發展壯大走進千家萬戶,並且有哪些經驗成功過度到後來的UI設計中。那些享譽中外的藝術大師有何過人之處,他們為美術學發展做出了哪些貢獻,他們的名作到底有何動人之處。
在今天的UI設計群體中,我們作為專業的設計人員,可以和別人侃侃而談雷軍的創業心得,羅胖子的工匠情懷,滴滴快滴的商業模式以及BAT在傳統行業的布局等等,各種其實並不太相干的話題,卻說不出半點藝術見解。
我們看不懂博物館展覽那些畫作,不知道梵高畫了什麼作品,抽象派到底在鬧騰些什麼,更甚者連扁平化的推動有什麼深層次的原因都不明白。
如果說最近很火的二月河說大學生不看《紅樓夢》是恥辱尚有爭議性,那麼設計師無法理解前人藝術成就是絕對的悲哀,無法辯駁的事實。
了解美術史,學會入門的美術鑒賞,目的是以正視聽。學會用多個緯度去思考美學,學會用更深入的方法來看待問題,學會從更宏觀的視角審視行業……這樣,你才能更客觀的去理解UI的發展歷程。這些知識和思想,將為你的職業生涯做出啟蒙,才更容易成為一個有內涵有深度的設計師,這當中還有諸多優點,就得靠你們自己慢慢體會。
下面推薦書目:
《藝術的故事》([英]貢布里希)(重點)
《西方美術簡史》((美)亨德里克?威廉?房龍)
近代設計史(一下搜不到這書的地址,回頭我拍張照片)
《設計心理學3:情感設計》 (有1,2,3,都得看)
以上是我目前看過能想到的最基礎書目,如果有朋友覺得還有合適的請留言補充上來。
哲學有三大哲學問題,「你是誰?」「你從哪裡來?」「你要到哪裡去?」,構成了哲人在探索人世真理時的基礎框架。我們也一樣,要在階段給自己提出三個問題,並花至少一個月的時間尋找答案:
設計是什麼?設計是如何產生的?設計可以做什麼?
第二點:繪畫技巧——洞察
曾經和很多同行爭論過,UI設計,到底需不需要手繪訓練。想必大家都知道,目前國內知名的UI設計師,追波上的大神們,很多都是草根出身,從其它行業空降來的,他們的出色是有目共睹的,似乎從某種層面上證實,不需要有繪畫基礎,也可以做好UI,也可以當大神?
圖樣拿衣服!我們來說說繪畫的問題。
美術高考主要考的三大項:素描、速寫、色彩。就是繪畫入門的三大基礎課題,我們學習的過程也是以這個順序逐步覆蓋的。如果你已經在第一部看完了那些書籍,就會知道,學習基礎繪畫的過程中,我們在紙張上對現實世界的物體進行細緻準確的描繪,也就需要我們更仔細的觀察事物。光照射的角度是如何的,在對應的形狀中表現出什麼明暗分布,在透視原理下杯口厚度的弧形是怎麼變化的。隨著繪畫的深入你就會逐漸培養一雙洞察細節的眼睛,你會對所有設計和形體做出本能的反應,分析它們的美醜,找出核心所在。
我們看看下面這樣的案例:
這是一個很簡潔的小鳥,只用幾個細節就輕鬆的表現出來,但我相信,如果要原圖照抄,有90%以上的UI設計師是畫不出精髓的(不信你們試試)。越是這般簡單的圖形,在弧度、頭身比、重心偏向這類細節上就越關鍵,如果你沒有良好的觀察能力,那麼就連抄也抄不像,你只能做出曲線都歪歪扭扭的貝西貨並自己洋洋得意地四處上傳設計媒體求贊求認可。
前面提到的這批國內的大神,其實就是在遠超常人的勤奮中積累了觀察的經驗,以此可以複製一定的風格,並能發現設計中的細節而不斷做出改正。但這就完了么?當然不是。
你們可以仔細去觀察這些沒有繪畫能力的UI設計師,他們的作品存在著很強的局限性,雖然可以很好完成熟悉領域和流行風格的設計,但是形勢是很單一,並且缺乏真正的創造力。強大的手繪能力,除了提高洞察力以外,就是為你將來創作的多元化提供更多可能,看下面案例:
比如繪製這樣的圖形,私以為沒有手繪技能無異於天方夜譚,而GAME UI的最大門檻就在這裡。你的繪畫技巧會支撐你跨過更多的門檻,在設計的道路上有更多的選擇和可能,也會支撐你走的更遠。
那麼學習繪畫要到什麼程度呢?直到你覺得可以正確繪出靜物為止。推薦去報一些高考培訓的機構,和高三孩紙們一塊兒學畫,你會提升的相當快,這個過程只需要兩三個月的時間。不要覺得可以跳過,將來成為出色設計師的成本將遠低於不學習繪畫的其他人。
還有,最重點要掌握的一個繪畫技能,我覺得是結構素描。
你就可以在紙張上對想繪製的圖形做出快速、準確的打稿,效率和延展性遠勝上機鼠繪。
手繪將貫穿你整個職業生涯,在今後的學習工作中要保持這個習慣,相信我,每到一個合適的時機,它總會給你帶來意想不到的驚喜。
第三點:掌握軟體——手段
這一步就正式開始進入學習軟體的步驟。如果學習的是UI,那麼以下幾種軟體是必不可少的:
PS、AI、DW、Sketch……其餘的根據愛好自己補充。
這裡要先和大家談談,我們都知道美工對於設計師來說已經成為具有侮辱性的貶義詞,設計師們喜歡反駁,你丫才是美工,你全家都是美工。有點小理想的有志青年們都對這個稱謂充滿鄙夷,但我得給大多數人潑冷水,因為大多數設計師連一個合格的美工都夠不上。
我們知道美工代表的是一種技師的稱謂,有一定技巧但沒有創造力。可偏偏就是絕大多數人都沒有掌握足夠的技巧,這就是當前設計行業所需要面對的事實。很多設計師沒有經過前兩個步驟的熏陶的,所以在學習軟體的過程中很容易自滿,明明對軟體的掌握還很膚淺就已經恬不知恥的在簡歷中輸入」精通「二次(哎呀,好像在說我自己!)。他們的視角是狹隘的,只認為學會了PS這些工具,就學會了設計,也忽略了自己遠遠沒有達到美工門檻的界限。下面我來談談怎麼學習這些軟體。
首先看李濤視頻的前三課:李濤Photoshop高手之路基礎篇。另有提高篇,同在雲課堂。http://study.163.com/course/courseMain.htm?courseId=203001
只看前三課!重複強調一遍,先只看前三課,並且做好筆記把所有內容都背到滾瓜爛熟為止(我看了至少五遍以上)。這是整個UI設計行業里最基礎的知識點,光、色、解析度、色彩模式,連這些都沒有掌握你就不要想精通設計軟體和掌握它們的原理。
然後你就開始去看別的視頻教程,這時候可以去淘寶買:PS教程
幾塊錢就有一打的高清入門視頻,不要浪費時間在搜索免費的低質量視頻上。入門教程基本都是相同的,你要完整的看完和跟著學習幾個新手教程,直至對軟體使用有了初步的理解,然後再返回去看李濤的視頻剩下的內容。
那軟體要學到什麼程度?學到你可以用它臨摹出任何使用這種軟體設計的圖形。一定要記住,設計軟體只是我們用來實現設計的一種手段,過度沉迷在軟體的研究中是本末倒置的,但如果你使用軟體連抄都抄不出來,那就是一種不需要反駁的恥辱。例如下圖:
這樣的作品,你有了足夠的觀察力,靠對軟體的掌握度就可以輕鬆臨摹,但很多已經從業數年時間的設計師連這種臨摹都做不到,原因在哪裡你們自己好好想想。軟體的掌握是為你實現更多設計方案提供可能性,不要讓軟體熟悉度這件最簡單容易的技能變成自己的短板,至少我們要成為一個合格的美工!經常自己做一些練習來測試自己對軟體掌握度在哪裡,就很容易發現問題,然後自己去查資料做研究。
好好去理解每個軟體可以實現什麼,優勢是什麼,極限在哪裡。然後你就再!也!不!會!跑去大神評論區里問:好牛逼,請問這是PS做的嗎?請和我默念這是本世紀設計界里最愚蠢的評論,不要讓它們發生在自己身上。
再嘮叨一次,軟體只是一種手段,你還並不懂設計,少吹牛逼!
第四點:設計理論——實踐
廣義上來說,到這步才是真正開始學習設計,也是讓一、二兩點作用開始充分發揮的時候。
因為看過藝術史,所以你會知道,每個時代流行的藝術創作有各自的手法特點,有共性,所以可以被歸納和總結,也就可以教授,培養出相同的作家。換句話說,美術家是可以被量產的。在理論不斷被完善的今天,要做出好的設計一樣是可以通過理論學習——實踐產生,一定不要認為這是天賦上的差距,別人比自己就更有藝術細胞。那些能被歷史銘記的藝術大師,之所以偉大,是因為他們的開創性或者作品所包含的人文精神和偉大的靈魂,而不只是一幅出色的圖畫。
前面的幾點都為你提供了足夠的實踐基礎,所以在這部才能讓你正確看待自己的潛力,不會輕易停下追求進步的腳步。只有最偉大的設計師才需要較量天賦,而成為一個優秀的設計師靠的是努力。設計是勤行,不是設計人,不入設計門。
那麼理論知識我們該學習什麼呢?首先是基礎中的基礎:三大構成(基礎含義)
每個方向都需要閱讀相應的教材,重要性無以復加,你需要在觀看的時候一邊做練習。然後才是具體設計類的書籍,記得不要再買那些無用的通篇告訴你軟體操作的書籍。
還有個差點被我忽略,本來想單當一個步驟說得,後來想想還是歸納到這裡來,那就是對於字體的認識。UI設計師普遍對字體缺乏敬畏,尤其在扁平化盛行的今天,字體的作用更加突出。只有掌握了字體的奧義,才能設計出有力的排版,才能對可讀性和觀賞性文字元號有充分的了解。比如日本二十四節氣網站就是運用字體的優秀案例:日本二十四節氣網站(原網站好像打不開了,只有圖)。推薦書目:
《商業字體設計》(方茜)(一定要看!!)
《好字體》(向玫玫)
《文字設計的原理》([日]伊達千代,內藤孝彥)
接著就是關乎排版,柵格化_百度百科。
這也是UI設計師必須掌握的基礎技巧之一。對柵格化有充分理解,就可以設計出足夠安全而和諧的頁面,下面書目:
柵格排版法(找不到了,我回去翻翻)
《版面設計的原理》([日]伊達千代,內藤孝彥)
《超越平凡的平面設計 版式設計原理與應用》([美]麥克韋德(John McWade))
還有一些相關的基礎推薦書籍:
《形式感+:網頁視覺設計創意拓展與快速表現》(晉小彥)(重點推薦)晉小彥新書好文預覽:
《在你身邊,為你設計:騰訊的用戶體驗設計之道》
設計的理論書籍教會你怎麼設計,你需要在不斷接受知識的同時,馬上對它們做實驗,不停的練習,不停的產生問題並解決。在你的設計觀念足夠成熟前,絕對不要沒事上網看設計的XX法則,如何做好網頁設計你需要掌握的XX個技巧,完全就是設計界的雞湯文,它們看著其實挺有道理,但完全沒辦法給新人提供實踐指南,是用來遺忘的,即使看再多這類雞湯文,你也做不好設計。你的學習過程在每個方面都要系統而有調理,書籍比零碎的閱讀可以給你帶來更多的幫助和進步。
第五點:邏輯取捨——平衡
在這篇文章:《太及時了!視覺設計師怎樣讓前端100%實現設計效果?》已經說很詳細了,作為UI設計師,是必須掌握前端的對應技能的,這不是可以完全無限制的發揮設計技藝的地方,你就要有取捨,要跟的上前端開發的邏輯,做出穩定可以被實現的設計稿。
學會HTML5 CSS3 JQ的入門,安卓、IOS的實現規範!
第六點:鑒賞模仿——超越
特地把這點放到後面,也是有理由的,前面的步奏都是一個設計師基礎素養的實現,而一個出色設計師還需要培養自己的套路和風格——站在巨人的肩膀上。
你要學會如何辨別優秀的作品,可以從多個渠道收集優秀作品和案例,首推使用:
- Behance
- 花瓣網 (又到了求粉的季節,懶惰的可以只看我的花瓣 死翹翹的超人的花瓣個人主頁)
- www.pinterest.com
- SDC設計師網址導航 (其它的可以在導航里逛)
學會看優秀的案例,用它們給你提供設計的燃料,然後你要做的就是抄!抄!抄!用你學過的設計理論在實現中對案例進行分析,只有發現了它們的優點並自己動手實踐實現了,才對你的提升有實際幫助。你每天抄一個案例,BANNER、ICON、APP界面,那麼不出幾個月,你就能對現有的設計形式套路了如指掌,可以設計出安全不會有太大毛病的UI設計稿,你可以輕鬆完成這樣的:
而不會做出這樣的:
同時,必須提醒一點就是,我們在設計過程中對美的追求和實際實現、用戶需要很多時候是不一致的,這是一個坑,需要有足夠的經驗去判斷什麼樣的設計已經足夠了,什麼樣的是過度設計,沒有實際意義。你不止要在網上搜索優秀的案例,一定要持續關注這些那些最簡單,但是最受歡迎的網站和應用。例如:知乎、INS、微信、淘寶等等。去不斷討論、查閱,來理解為什麼是當前的呈現式樣,而不如自己的預期。
你要在練習和思考中進步,不要盲目的追求視覺表現,這樣的UI設計師是很難真正的成長起來。
設計的終極目的是解決問題,而不是盲目的表現自己對美的追求。所以我要新手不要去看那些只上傳飛機稿的網站。
當前主流設計平台的趨勢就是,少數大神驅動龐大的底端設計群體,如果你已經在前幾個步驟得到提升,那麼這些網站的多數設計師已經在思想上沒法和你並駕齊驅,不要去這些地方混跡。這些網站不會有真正有價值對等的交流和見解,只有設計師在自己圈子裡找自信刷存在感的證明,你去掃兩眼評論,就知道不會有「落霞與孤鶩齊飛,秋水共長天一色」這種回答,只有「哎呀,我草,牛逼」,「請問這是用數位板畫的嗎?」,「請問這是AI做的嗎?」。這些大神的飛機稿和普通練習的迅速流傳,很可能會產生諸多的不良印象。
就拿我深深唾棄的追波來說,大量的作品沒有任何實踐價值,尤其為了吸引同行關注而過分秀技巧,秀動效。於是動效的風氣馬上在國內圈子瀰漫開,明明是連基礎排版、配色都做不好,PS都還沒捂熱,就追著趕著學習AE,開始玩轉交高大上交互特效了。具體請看:《設計追波風!值得每個設計師閱讀思考的深度剖析文》
當你抄了兩三個月案例,就已經有足夠多的作品集了,你已經可以打包做簡歷去應聘了。屆時你的水準將超越絕大多有數年經驗的設計師了!
第七點:閱讀思考——擴展
整個UI設計圈,還有一個很致命的缺點,就是對其它行業知識的排斥,科班畢業生尤甚。因為學生時代大多討厭學習,有藝術生這個庇護傘,就可以合理安慰自己不學習不念書那是放蕩不羈愛自由。屎丟皮啊!!
藝術史還要教會你們的一點就是,真正的大師絕對不會只是孤陋寡聞而只專註在手中的筆桿和油墨,他們不斷在認識世界,不斷在研究感興趣的知識和見解。不要做一個只知有設計,不知有數理化的蟾蜍,只能在你自己的井裡蹦躂。
成熟的設計不只是你個性技巧的表達,還有你對解決問題所展示出來的理性和洞見。很多設計師和同層次的其它專業人員比較起來顯得太幼稚和粗淺,癥狀也在這裡。不要只用設計的角度去看世界,去涉獵更多的專業,讓眼界更寬廣,有更多的角度去理解世界,得到的感悟將給你帶來難以估量的升華和進步。
這是可以持續一生的事業和技藝,在正確的方法下,越積累越成熟,老而彌堅。請不要再用膚淺的思想認為它是吃青春飯的過度階段!
設計是一門需要沉澱的技藝,卻恰巧遇見了日新月異的互聯網文化。這讓大家對流行極具敏感度,而開始追趕潮流,輕視正統和法則。這整個流程需要或許需要1整年的時間,但我相信,只要有足夠的耐心,是可以讓一個新手成長成為一名合格的UI設計師,請放慢你的角度,不要急於求成。
【從新人到大牛的交互設計完全修鍊手冊】
菜鳥入門必讀好文! 《網易美女設計主管!交互設計菜鳥如何入門?》
阿里資深設計師手把手帶你認識交互設計! 《交互設計那些事兒(一)》 《交互設計那些事兒(二)》多位資深前輩經驗合集!交互設計師自學指南! 《交互設計師修鍊指南!教你從零開始成為優秀交互設計師》
學習 有規劃的學習 專業的指導 做到這幾點以上就好了
的確可以自學,某寶資源一大堆,但你要確定自己能不能剋制自己靜下心來好好學習,我是最近剛報的培訓班,好動管了,還是需要束縛呀,六個月,加油
謝謝樓主
正在做一個網站叫uid.club寓意就是ui設計師俱樂部,到時候分享一些教程免費給喜歡ui的同學。如果你有更好的意見可以聯繫我微信ui-ziggs。
如果有時間的話,還是從設計史開始看比較好,畢竟這是第一步。我也是門外漢,目前在看《大設計:BBC寫給大眾的設計史》,圖文結合,較易理解,還不錯。
有些網盤的鏈接不存在了。。。不過還是有用。超贊。辛苦啦
我自己就是一個例子,窮女屌絲一枚,原來在室內設計圈混了兩年,前段時間辭職了,現在苦心自學ui,我原來以為設計都是相通的,沒想到完全是不同的領域,自學真的需要極強自覺性,要是沒有覺悟,就還是去報班,我現在自學就是用的火星的教程,還不錯,內容挺全面,但是真的最主要的是要你主動去學習,主動去練習,主動看視頻,一個視屏三小時,真的需要坐的住。如耐得住寂寞!不能分一點心,大家可以一起交流私信我喲!
謝謝樓主啦~~~~
推薦閱讀:
※零基礎的UI設計初學者應如何系統的學習?
※UI設計新手該如何入門?
※23歲女生,零基礎,準備辭職學UI。這樣決定會不會太冒險。?
※這樣的水平在北京能不能找到工作(UI設計)?
※平面設計設師怎麼入行UI設計?
TAG:自學UI設計 |