如何從零開始學界面設計?

我想學界面設計如何從零開始,我對國外一些牛人的網頁設計,遊戲設計很感興趣,很想學!我沒學過畫畫,顏色,陰影的知識,怎麼弄都很醜!我不怕苦,就是很想學!我該怎麼開始?先看什麼書?然後?求路,謝謝。第一次提問,不太會。總之就是求牛人推薦寫好的書籍,教程,或者是網站,能從基礎開始學起,還有要進階又該看什麼資料!先謝謝了!英文也可以的。


動手去做,只考慮界面怎麼做好就行。其他同學給的答案,估計要把題主嚇壞了。
各種素材、資料只是用作參考,可以看看也可以不看。界面就是界面,不是原畫,有自身不同的規律和思維方式。
我老婆是資深的網頁設計師,她不會原畫,要說畫畫沒有我強。可是做網頁她就是很出色。現在幫我做各種界面,也非常出色,能夠找各種素材過來,加上自己的處理,融合成新的設計。
界面設計是很實用的東西,更多需要考慮的是要如何引導用戶,讓他注意什麼,忽略什麼,目光聚焦在哪裡;不要太把它當成藝術,就容易一步一步做好了。真的畫畫很強就去做原畫,別做界面設計了。
--------------------------
怎麼弄都很醜,得自己想想丑在哪裡,怎麼樣能弄漂亮。
最初呢,掌握各種圖層的屬性,陰影、漸變啥的,自己嘗試著組合起來;有很多細節上是必須一點一點的慢慢調整的,要有耐心。
然後,漸漸會發現...效果不要弄太多,有時候還不如只弄一種,不要太花哨。顏色不要弄太多,一種顏色為主,再搭配一種點綴點綴就行;陰影的方向,必須全局統一,否則怎麼看都彆扭;...
再以後就自己摸索吧,到了這個階段應該已經能自己找到方向堅持下去了。我是做程序的,再多我就說不下去了...
------------------------------------------------------------------
但是最好要有具體的東西去實踐,要有人找你幫忙做網站或者界面設計,這樣進步會很快。否則如果只是看別人的作品自己模仿,會越來越沒有信心、沒有動力。
------------------------------
不要去學習光、陰影啥的理論知識。對於界面,知道保證光源方向一致就足夠了。要學習的是交互設計的理論,和photoshop的基礎使用技巧。然後在實踐中掌握如何使用這些技巧來達到你的目標。
-------------------
需要看書,但是並不是看完哪本書就成為高手了。盯著一本書看,會越來越糊塗。得圍繞自己的目標,反覆通過實踐練習


網頁的界面設計還是要更多地瀏覽各種國外網頁,尤其是一些藝術家的網頁,個人作品集之類的,多模仿著做。
不過靜態的界面和動態的還不是太一樣的,如果只學美術和設計的內容往往只能做出靜態的界面,在交互上無甚創新——儘管可以說在紙上設計好然後交給別人做,但是這種空想的嘗試往往達不到效果。想做好交互漂亮的界面還是最好學習HTML代碼和javascript(jquery),並大量練習,找到自己的風格。
另外推薦一本書:《寫給大家看的設計書》 - The Non-Designer"s Design Book。講一些很基本的原則,作為入門很不錯。


一、UI設計的概念

軟體設計可分為兩個部分:編碼設計與UI設計。UI的本意是用戶界面,是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成,但實際上還包括用戶與界面之間的交互關係。 UI設計分為實體UI和虛擬UI,互聯網說的UI設計是虛擬UI,一般是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。

二、UI設計師

「UI」的本義是用戶界面,是英文User和interface的縮寫。UI設計師簡稱UID(User Interface Designer),指從事對軟體的人機交互、操作邏輯、界面美觀的整體設計工作的人。UI設計師的涉及範圍包括商用平面設計、高級網頁設計、移動應用界面設計及部分包裝設計

工作內容

編輯負責軟體界面的美術設計、創意工作和製作工作;根據各種相關軟體的用戶群,提出構思新穎、有高度吸引力的創意設計;對頁面進行優化,使用戶操作更趨於人性化;維護現有的應用產品;收集和分析用戶對於GUI的需求。

工作經驗

主要要求從業人員精通Photoshop、Illustrator、Flash等圖形軟體,1. 負責公司產品在智能電視、PC端、移動端頁面/應用的整體設計;2. 基於用戶體驗、人機交互、圖形化設計、界面設計等前沿理論實現產品風格設計;3. 充分理解產品策劃思路及理念,配合產品經理和研發人員實現產品各種界面的視覺設計;4. 建立和完善產品界面視覺設計規範;5. 根據交互設計及產品規劃,完成產品(iPhone、Android 、Web平台App及網站)相關的用戶界面視覺設計。 6. 配合產品開發中的圖形界面(GUI)設計。 7. 完成產品相關推廣活動的專題頁面、FLASH的設計及製作。 8. 與研發團隊充分溝通協作,確認可控的誤差範圍和視覺效果的最終實現; 9. 根據視覺設計的發展趨勢及用戶研究的結果不斷優化產品的圖形界面(GUI)

UI初學者需具備的知識架構

1、視覺設計部分:首先,視覺設計不僅僅是做ICON,做界面或者界面元素。很多人認為,如果去互聯網公司做視覺方向ui設計,只會簡單做圖標、界面就OK。這是極其幼稚的想法。一般公司如果花錢雇專職視覺設計師的話,那麼整個公司的美術設計工作一般都會給視覺設計做。這就要求你幾乎精通平面設計師所會的所有知識。所以,如果你想今後在視覺領域混,那麼以下幾項技能必不可少:

1)平面構成;

2)色彩構成;

3)版式設計;

4)心理學;

5)美術繪畫;

6)設計意識;

2、交互設計師應該具備的基本能力:

1)了解用戶體驗設計、可用性原則;

2)信息挖掘、用戶調研、數據分析;

3)良好的邏輯能力;

4)心理學;

5)交互設計原則、不同平台的規範;

6)產品視覺感;

7)溝通能力。

三、項目開發流程

圖中也展現了UI設計師在項目開發過程中的工作內容

四、.UI學習/設計步驟

規範基礎-軟體基礎-圖標設計-界面設計-切圖交互-用戶產品 跟著步驟一步步的走。1.自學UI平台:UI設計者 – 一個免費自學UI設計APP

2、UI設計的規範一致性原則堅持以用戶體驗為中心設計原則,界面直觀、簡潔,操作方便快捷,用戶接觸軟體後對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本應用系統。

  • 字體 -保持字體及顏色一致,避免一套主題出現多個字體;   -不可修改的欄位,統一用灰色文字顯示。
  • 對齊   -保持頁面內元素對齊方式的一致,如無特殊情況應避免同一頁面出現多種數據對齊方式。
  • 表單錄入 -在包含必須與選填的頁面中,必須在必填項旁邊給出醒目標識(*);   -各類型數據輸入需限制文本類型,並做格式校驗如電話號碼輸入只允許輸入數字、郵箱地址需要包含「@」等,在用戶輸入有誤時給出明確提示。
  • 滑鼠手勢   -可點擊的按鈕、鏈接需要切換滑鼠手勢至手型;
  • 保持功能及內容描述一致 -避免同一功能描述使用多個辭彙,如編輯和修改,新增和增加,刪除和清除混用等。建議在項目開發階段建立一個產品詞典,包括產品中常用術語及描述,設計或開發人員嚴格按照產品詞典中的術語辭彙來展示文字信息。

準確性原則使用一致的標記、標準縮寫和顏色,顯示信息的含義應該非常明確,用戶不必再參考其它信息源。

  • 顯示有意義的出錯信息,而不是單純的程序錯誤代碼。
  • 避免使用文本輸入框來放置不可編輯的文字內容,不要將文本輸入框當成標籤使用。
  • 使用縮進和文本來輔助理解。
  • 使用用戶語言辭彙,而不是單純的專業計算機術語。
  • 高效地使用顯示器的顯示空間,但要避免空間過於擁擠。
  • 保持語言的一致性,如「確定」對應「取消」,「是」對應「否」。

可讀性原則

  • 文字長度

文字的長度,特別是在大塊空白的設計中很重要,太長會導致眼睛疲憊,閱讀困難。太短又經常會造成尷尬的斷裂效果,斷字的使用也會造成大量的複合詞,這些斷裂嚴重的影響了閱讀的流暢性。

  • 空間和對比度

每個字元同線路長度,間距也是重要的。所以每個字元之間的空間至少等於字元的尺寸,大多數數字設計人員習慣選擇一個最小的文字大小的150%為空間距離,這就可以留下足夠的空間。當每一行中讀取大段的文字,且線路長度過多或線之間的空間太少,都會造成理解困難。

  • 對其方式

無論是在文本中心,還是偏左,或者是沿著一個文件的右側對齊,文本的對齊相當重要,可以極大地影響可讀性。一般而言,文本習慣向左對齊,因為它反映了你的閱讀方式 – 從左至右。你熟悉每一行開始和結束的地方。布局合理化原則在進行UI設計時需要充分考慮布局的合理化問題,遵循用戶從上而下,自左向右瀏覽、操作習慣,避免常用業務功能按鍵排列過於分散,以造成用戶滑鼠移動距離過長的弊端。多做「減法」運算,將不常用的功能區塊隱藏,以保持界面的簡潔,使用戶專註於主要業務操作流程,有利於提高軟體的易用性及可用性。

  • 菜單   -保持菜單簡潔性及分類的準確性,避免菜單深度超過3層。   -菜單中功能是需要打開一個新頁面來完成的,需要在菜單名字後面加上「…」。【只適用於C/S架構,B/S請無視】。
  • 按鈕   確認操作按鈕放置左邊,取消或關閉按鈕放置於右邊。
  • 功能   -未完成功能必須隱藏處理,不要置於頁面內容中,以免引起誤會。
  • 排版   -所有文字內容排版避免貼邊顯示(頁面邊緣),盡量保持10-20像素的間距並在垂直方向上居中對齊;各控制項元素間也保持至少10像素以上的間距,並確保控制項元素不緊貼於頁面邊沿。
  • 表格數據列表   -字元型數據保持左對齊,數值型右對齊(方便閱讀對比),並根據欄位要求,統一顯示小數位位數。
  • 滾動條 -頁面布局設計時應避免出現橫向滾動條。
  • 頁面導航(麵包屑導航) -在頁面顯眼位置應該出現麵包屑導航欄,讓用戶知道當前所在頁面的位置,並明確導航結構,如:首頁&>新聞中心&>歐科智能招商服務平台正式發布,其中帶下劃線部分為可點擊鏈接。
  • 信息提示窗口 -信息提示窗口應位於當前頁面的居中位置,並適當弱化背景層以減少信息干擾,讓用戶把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。

目前我還是用的ios7的設計規範,1136*640適配性能還是很好的。

當然如果想用其它規範也可以。

規範基礎 UI設計者

APP設計規範(15圖)_@威廉波波斯收集

UI文章專題-UI中國尺寸規範 - 優閣網(UIGREAT)APP設計尺寸規範大全,APP界面設計新手教程【官方版】

網頁設計規範2014網頁設計尺寸規範? - 莫若

2.軟體基礎PS、AI、Skech、mockingbot、mockplus、chainco、cutman、Axure等等製作原型,界面,圖標製作,素材製作,切圖等等相關步驟的軟體都需學會。當了解的越多會發現,有更多新型提高效率好用的軟體,例如pixate、xmind、AE......以及更多mac上面的國外app製作軟體。

工具-UI中國-專業界面交互設計平台

25學堂-專註APPUI界面設計,分享移動互聯網優秀產品

原型 http://weixin.qq.com/r/cHVtdXTEvCnDrTAW9yBi (二維碼自動識別)

設計工具(165圖)_@威廉波波斯收集自己也收藏了很多新奇的UI設計軟體。

3.圖標設計

圖標設計 UI設計者 當然,也有圖標素材。

Iconfont-阿里巴巴矢量圖標庫中國最大的圖標素材庫,還可以製作iconfont

素材網站(底部有鏈接)

大家根據關鍵詞搜索(自己最近收藏的一些素材網站),應該夠新手用的了

圖標模板製作

圖標模板 – 搜索結果

http://weixin.qq.com/r/cHVtdXTEvCnDrTAW9yBi (二維碼自動識別)

4.界面設計

欣賞臨摹優秀作品

APP界面(83圖)_@威廉波波斯收集

當然,還有UI優秀作品展示平台。

UI中國-專業界面交互設計平台

http://weixin.qq.com/r/UUiWjnzEoCHfrTjt9x1D (二維碼自動識別)

優閣網(UIGREAT)

素材網站:

大家根據關鍵詞搜索(自己最近收藏的一些素材網站),應該夠新手用的了

當然了還有UI網站導航:大家根據關鍵詞搜索(自己最近收藏的一些素材網站)

5.切圖交互

Cutterman - 最好用的切圖工具

UI動效(75圖)_@威廉波波斯收集

6.用戶產品

這個就不多說了,進入公司跟著項目走一遍就知道了。

說一點用戶體驗設計的乾貨吧。
騰訊CDC

騰訊MXD移動互聯網設計中心

攜程設計委員會-Ctrip Design Committee

http://ued.sina.com/

曉生 | 和他的小夥伴們
界面設計相關元素也很重要,比如字體、色彩搭配、布局等等,我只提一下,不細講。

7.字體設計/學習平台

中文字體字體設計欣賞+字體下載:

字體傳奇網-中國首個字體品牌設計師交流網

特別美的中文字體合集中文字體界面設計 - 圖翼網(TUYIYI.COM) - 優秀UI設計師互動平台

·找字網,您的字體管家!免費字體下載,字體設計!

·書法字體轉換器在線轉換-藝術字體在線生成器設計-第一字體網

·字體下載-求字體網提供中文和英文字體庫下載、識別與預覽服務,找字體的好幫手

·書法字典 書法字體生成器 書法字典在線查詢 在線書法字體生成

·藝術字任意生成器 - 藝術字所有參數可控轉換器

·在線書法字體生成網站_書法字體在線轉換_支持在線生成矢量書法家字體(可下載)

英文字體下載

·Tyler FinckBBehance

·Free font downloads - Fontsup.com

·introducing White Pine, a free font

·Hamster Script (Free Font)

·中文字體+英文字體

·Raleway 字體

·字體設計教程字體設計學習_藝術字體,書法字體,PS字體,AI,C4D字體設計_虎課網

· 設計資源下載 - 創意互動 - 精品文章分享、精品APP界面欣賞、優秀資源免費下載 - 為中國設計師加油

·好美!17套美麗時尚輕盈精細字體免費下載 - 設計資源下載 - 創意互動 - 精品文章分享、精品APP界面欣賞、優秀資源免費下載 - 為中國設計師加油

·設計師必備暖品!20款值得擁有的中文字體打包下載 - 設計資源下載 - 創意互動 - 精品文章分享、精品APP界面欣賞、優秀資源免費下載 - 為中國設計師加油

8.色彩搭配
我在網頁設計中怎麼配色? - 莫若的回答

·沒有設計師時,產品經理該如何給產品配色? - 莫若的回答已經非常仔細了,可以看看
·Material Design Color Palette Generator

·Material Design, Daily a€「 MaterialUp

UI設計交流群:414632028

...未完待續

------------------更新免費UI素材下載網站--------------------

1.綜合類UI素材下載平台

·網頁UI免費下載_網頁UI素材免費下載--千圖網www.58pic.com

·ui圖片素材_ui設計模板大全【免費下載】_90設計網

·優秀網頁設計聯盟-SDC-網頁設計師交流平台-聽講座,聊設計,找素材,盡在優設網

·Behance

·Show and tell for designers

·UI中國-專業用戶體驗設計平台

·學UI網-APP截圖站_APP欣賞_APP圖片 | APP截圖欣賞站是以APP設計欣賞,APP圖片展示,APP截圖分類為主APP界面欣賞網站

·黃蜂網-設計優選 - 黃蜂網woofeng.cn·

25學堂-專註APPUI界面設計,分享移動互聯網優秀產品

·方酷 - UI設計|APPUI|手機UI設計分享平台

·UI設計網uisheji.com-專業的ui設計APP界面設計學習分享交流平台 -

·UI設計者 - 一個免費自學UI設計APP

·素材中國_免費素材共享平台www.sccnn.com

·PS飯糰網 psefan.com - 不一樣的素材庫!精選設計師高逼格素材下載

·http://www.tuyiyi.com/

·PS教程,Photoshop教程網 - 思緣教程網

·標誌集合圖片_標誌集合設計素材

·歐萊凱設計網_分享創意設計素材

·平面設計網_平面設計作品欣賞-中國設計網

·我圖網,提供圖片素材及模板下載,專註正版設計作品交易·

創意互動 - 精品文章分享、精品APP界面欣賞、優秀資源免費下載 - 為中國設計師加油

·中國站長網_與站長攜手走向成功_cnzz.cn_站長網

2.UI領域素材下載

·Categories

·SUI Mobile

·AUI-靠譜的移動前端框架

·提供國外資源源文件下載分享

·優閣網(UIGREAT) - UI設計師學習交流社區 - Powered By EduSoho

·下載 - 學UI網

·http://www.appui.mobi/

·(2695) Free Mockup Generator - Placeit

·PSDDD.co - Free Photoshop amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Sketch UI Resources

·http://www.uicoc.com/

·UI設計愛好者-UI設計教程,UI設計師的學習交流平台

·UE設計平台-網頁設計,設計交流,界面設計,酷站欣賞

·雲瑞設計-ui設計與體驗博客

·Download premium amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; free design content ~ EpicPxlsFree UI Kit PSD ·FilesFreeUIKits.com

·http://www.teehanlax.com/tools/iphone/

·http://ui-cloud.com/search/APP/?paged=2

·Hand-picked amp;amp;amp;amp;amp;amp;amp;amp;amp;#x27;Icons for iOS amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Macamp;amp;amp;amp;amp;amp;amp;amp;amp;#x27;

·PSD Repo - Free quality PSDs available for download

·Free PSD, Mockup, WordPress Theme and Other Resources

·User Interface Design Inspiration

·網站UI設計說明範本(設計風格指南) - 學UI網

·UI設計/UI界面設計/交互設計 - 作品欣賞 - 設計帝國

·The marketplace for design resources

·Mac UI and Icon Design Inspirations Gallery

·WeUI

·UI中國

·xiaopiu-在線APP原型設計

·AE製作圓球讀取動畫 FeatMax from TinyHouse

·UI動效_UI動畫_AE做ui動效-Uimaker-專註於UI設計

·Free cross-platform UI kit for Photoshop and Sketch

·WE DESIGN amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; BUILD APPLICATION INTERFACES

3.UI原型素材下載

·原型庫 - AxureRP高保真原型案例實戰,原型設計,可以如此簡單!

·axure原型素材 - Axure原創教程網

·教育學習網站常用圖標矢量素材下載-非凡圖庫

·html5模板,html5網頁模板,html5網站模板免費下載_模板王

4.icon(圖標素材下載)

按icon質量順序排名: ·38,100 Free Icons - The Largest Icon Pack Ever

· Iconfont-阿里巴巴矢量圖標庫

·Fontello - icon fonts generator

· Icon Font, SVG, PDF amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; PNG Generator

· icon圖標庫-icon圖標庫|矢量圖標庫-千圖網www.58pic.com

· Free Flat Icons - FlatIcons·

Mac UI and Icon Design Inspirations Gallery

·Iconfinder - 1,300,000+ free and premium icons ·

·Noun Project

·IconPng.com 愛看圖標網,免費中文圖標搜索引擎!

· 千圖網-免費圖標下載,圖標搜索引擎ICON(PNG/ICO/ICNS)圖標下載 ·

DB Freebies Design Resources from Behance and Dribbble

·is hungry PNG、ICO、ICNS 格式圖標搜索下載_easyicon.net

· 打包好了!可能是2015年最不能錯過的圖標素材免費下載

· 特色圖標_68Design ICONS源文件下載-

·圖翼網(TUYIYI.COM) - 優秀UI設計師互動平台

· http://xiaba.shijue.me/search

·Icons set

·搜索結果 icon : PS筆刷吧-筆刷免費下載

·icon下載 - 學UI網

·Icons

· Icons DB - free custom icons

·Foundry ∞

·下載資源搜索_CHINAUI優艾網

·icon - 搜索結果 - 25學堂

·Free icons by first-class designers

·UI設計師靈感庫-優界網

·icon圖片_專題_素材中國

·Transformicons Builder

·Download Free Vectors, Photos, Icons, PSDs and more

·Buy 38,100 icons for iOS 10 and Windows 10. PNG and SVG formats.

·Icons and Vector Graphics

· http://swifticons.com/preview

· iOS8 App圖標模板尺寸規範[4.0]最新出爐

· iOS Icon Gallery

·PrestaShop 官方圖標包開源 含svg、eps和圖標字體格式

·Othericons – Premium Collection of Beautiful Icon Sets

·37個外國高素質圖標網站大合集!

·Evil Icons

·旅行圖標來一發!100+精美旅行圖標集免費下載 - 設計資源下載 - 創意互動 - 精品文章分享、精品APP界面欣賞、優秀資源免費下載 - 為中國設計師加油

·一淘無線圖標庫 - 公開圖標庫 - Iconfont

5.UI設計導航平台(每個導航都有上百個UI設計+網頁設計+前端+各種相關的網站鏈接),點進去之後,你一定會回來點贊的!:

1.設計導航 - 精選最好的設計網站大全

2.SDC設計師網址導航

3.牛大拿_最貼心的設計師導航_Niudana.com 4.輕設計 - 飛屋設計 5.UI設計師導航網 6.1納米學習網站導航 7.歡迎訪問 祝快樂 8.資源集-墨加 9.設計網站 平面設計 網址導航 10.快搜 — 搜索快人一步 11.設計之家 - 傳播先進設計理念 推動原創設計發展 12.設計師導航-圖翼網(TUYIYI.COM) 13.Judas.n個人導航,YouMeek導航

6. UI專屬論壇社區

·UI中國

· UCD大社區 - 以用戶為中心的設計

· Show and tell for designers

· UI設計者 - 一個免費自學UI設計APP

·掘金

· 優閣網(UIGREAT) - UI設計師學習交流社區

·http://app.xueui.cn/ http://www.appui.mobi/

·設計經驗技巧知識分享 - 黃蜂網woofeng.cn

·EpicPxls

·25學堂-專註APPUI界面設計,分享移動互聯網優秀產品

· http://www.fondcool.com/

·設計心得-UI設計網uisheji.com - 設計理念-

·圖翼網(TUYIYI.COM) - 優秀UI設計師互動平台

· MobileUI莫貝網 - 移動設備界面設計專業網站.

·雲瑞設計-ui設計與體驗博客

· UE設計平台-網頁設計,設計交流,界面設計,酷站欣賞

·AUI - 高性能移動前端框架

·設計達人 | 愛設計,愛分享。

·axure原型素材 - Axure原創教程網

· 原型庫 - AxureRP高保真原型案例實戰,原型設計,可以如此簡單!

·UI設計_UI_UI教程-Uimaker-專註UI設計

·蜜豆首頁

· 作品流 | 騰訊原創館

·Material Design, Daily - MaterialUp

·花瓣 Pinterest

· 十五言 - 每個人都在創造

· UI設計/UI界面設計/交互設計 - 設計欣賞 - 設計帝國

·少數派 - 高質量應用推薦媒體

7.UED相關

·騰訊CDC

·騰訊MXD移動互聯網設計中心

·騰訊ISUX - 社交用戶體驗設計

·TGideas-騰訊遊戲官方設計團隊

· 百度用戶體驗中心

· http://ued.taobao.org/blog/

·攜程設計委員會-Ctrip Design Committee

· 新浪UED | 一個關注用戶體驗、關注工作流、關注作品質量的有愛團隊

· 曉生 | 和他的小夥伴們

·騰訊遊戲官方設計團隊

·TGideas

· 騰訊網UED

· 阿里巴巴中國站用戶體驗設計部

·阿里巴巴國際UED

·阿里媽媽MUX

·網易用戶體驗設計中心

·FEX 做最專業的前端

·百度EUX企業產品用戶體驗中心

·奇舞團 360旗下前端開發團隊

·攜程設計委員會

·暢遊視覺設計中心

8.平面素材下載(設計UI過程中還是會多多少少用到平面素材)

·Free PSD amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Graphics, Illustrations

·PSD素材,PSD素材免費下載,PS素材,PS素材下載-站長素材

·圖片網_背景圖片素材網_qq空間圖片素材_圖片大全_素材中國17素材網

·素彩網-素材天下,ps素材,矢量素材,psd素材免費下載,ppt模板,素材中國,免費素材網

·素材天下網-PSD素材免費下載-矢量素材-PPT模板-中國素材免費下載網站

·愛圖網 - 圖片素材,PSD素材,矢量素材,設計圖庫,淘寶素材,設計素材圖片網

·素材搜索-設計素材搜索聚合

·紅動中國免費素材網_中國最大的免費素材網!

·大圖網 - 影樓素材,PSD素材,矢量素材,高清圖片素材,高品質設計素材共享

·68Design_網頁設計師|UI設計師|電商設計師

·http://sansheji.com/sucai

·iMS素材共享平台|Arting365 - 分享,發現好素材

·設計本-中國室內設計師網_室內設計聯盟_裝修設計公司大全

·經典版式設計,包裝設計,字體設計欣賞,最新平面設計軟體,ps濾鏡,在線書法字體,日韓文字體,coreldraw教程免費下載_億品元素

·Free PSD Files and best photoshop Freebies

·http://xiaba.shijue.me/stuff/?ref=main_nav

Search for amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;APPamp;amp;amp;amp;amp;amp;amp;amp;amp;quot; - Freebies Booth

·Free amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Premium Design Resources

·懶人圖庫 - 矢量圖,JS代碼,網頁素材 - 學會偷懶,懶出境界!

·Free Vectors amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; PSD Graphics 527240 graphics in one place!

·Free PSD, AI, Fonts and more

·設計達人 | 愛設計,愛分享。

·矢量圖 - PSD矢量,AI矢量,EPS矢量,矢量素材下載 - 第7頁 - 素材集市

·Free Clipart, Illustrations, Graphics amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Vectors

·素材中國|素材之家|淘寶素材|素材天下|psd素材|高清圖片素材免費下載sc.jb51.net

·優設記 - 最全jquery插件下載 - 高質量網頁素材

·微信小程序模板下載_免費微信小程序圖片設計素材_【包圖網】

·Showcase Vectors, Photos and PSD files | Free Download

·The Best Resources for Designers, Every Day.

UI設計交流群:414632028


------------------分享些優秀回答--------------------------

·如何做設計月薪上萬? - 莫若的回答

·沒有設計師時,產品經理該如何給產品配色? - 莫若的回答

·學習UI設計和網頁設計以及web前端分別有什麼樣好的網站推薦? - 莫若的回答

·UI 設計初學者應該怎樣入門? - 莫若的回答


-


不怕苦已經是好開端了。
直接提供書籍資料,我一時湊不多,先給個學習步驟,將就著看看。
找各種書籍有些可以有針對性地挑,多逛書店,多到論壇淘好作品。

  • 第一,先收集大量別人的優秀設計作品作學習資料。

別人的優秀設計作品和遊戲概念設定圖片,包括他們的設計創意手稿,這些草圖往往提供了這些高手們思考創意的方式和路徑,是非常值得學習的東西。而別人的優秀作品就是給我們一個優秀標準的參考(只能是參考,因為自己逐漸進步後,審美水平提高了,自身對優秀的標準也會提高)。所以要不斷搜羅更高水平的設計作品,學習他們的藝術理念,從他們的作品裡學高階的設計創作。
要學會去美術書店淘,會有一些價格昂貴的某些設計大師的設計作品畫冊,或者遊戲設定原畫集,這些東西很有用,荷包鼓的話可以揀一些作品上乘、印刷清晰的帶回家,不然就隨身帶些紙筆,坐在書店裡把這些作品約略臨摹下來,一是省錢,二是學習,順便練手繪。(畫不出只好用手機拍下來再拿回家參考)

《暗黑破壞神 3》場景設計草圖

西班牙概念設計師Alberto Mielgo矢量設計作品
(網頁設計等平面視覺設計就可以參考這手,構圖、色彩、藝術形式、概括手段都值得學習)

《波斯王子》遊戲場景設定過程

中國概念設計師鄭彧(也有地方寫做鄭春明或鄭明春)作品 電影《溫故·一九四二》分鏡概念設計

(以上圖片多是從網上淘來。如今大部分做數碼藝術或動漫的夥計,都有自己多年保存的圖片資料庫,他們之間偶爾也互通有無。和他們關係好的話可以問他們Copy一份存檔作學習參考)

  • 其次,是美術設計的基礎技能訓練。

這些基礎技能不單是手繪技能,還有各種繪圖製圖軟體的操作和組合運用。
(軟體使用教程在書店都有賣,不過這種東西大同小異,而且軟體操作主要靠自己的摸索鑽研,不全靠看書。前面幾張圖片就是手繪加上Photoshop、3D軟體建模以及Painter之類的繪圖軟體繪製)
手繪最好先從臨摹開始。
很多人會建議先寫生,對此我持反對意見。在還不懂得怎麼觀察怎麼下筆怎麼取捨怎麼經營布局構圖怎麼藝術處理……的時候,倉促寫生,其間會走很多彎路才能有一點進步,徒然浪費時間,得不償失。我有前車之鑒。
找些好的范畫,抽晚上玩網遊或看電視的時間,用心臨摹,會學到不少技巧,不僅是觀察、技法,還有藝術創意。
我會說一切得從蘋果開始,但不要找太基礎的范畫去臨,浪費時間。對繪畫物象塑造的理解要從掌握形體結構開始,蘋果總好過幾何形體的圓球,畢竟蘋果表面起伏有變化,同時有色彩、光感影響,難度高於圓球,對掌握結構、陰影、色彩、光感都更有幫助,也很鍛煉觀察能力。在此基礎上學習立方體、圓柱等各種幾何形體的變化和繪製,以後看到所有的繪畫對象,只要把他們理解成各種幾何形體的組合,比較容易理解也容易畫。素描、色彩基本都是這規律。

* 應@苗政的善意提醒,設計的基礎三大構成(平面構成、色彩構成和立體構成),可以在書店尋找相關書籍。

對設計的學習,得多靠筆頭。買回來的設計大師作品不能當擺設,要多臨摹,哪怕用馬克筆簡單臨摹他們的設計造型,也能把他們的優點變成自己的。
別覺得寫生很了不起,寫生其實也是一種臨摹,只是在寫生時藝術創作比重更大些
很多美術理論知識只有在運用時才能理解,理論必須結合實踐,包括結構、明暗、光感、色彩冷暖、構圖布局等。
雖說做設計對手繪要求不高,主要用來畫創意草圖,但手繪能力強,對設計來說如虎添翼。
(臨摹的書就先去書店找找吧)

  • 另外,務必補充專業美術素養。

不少優秀藝術設計師也擅長某種純藝術,比如油畫、水彩、雕塑之類。學設計的人如果把自己的專業認知僅局限在設計領域內,絕對愚蠢。搜集資料時別只看設計作品畫冊,看到好的純美術畫冊也別太心疼銀子,該出手時就出手,學習資料多多益善。學設計,印象派和一些抽象派繪畫作品對自己幫助會很大。
有些設計師的畫冊實在買不起,或實體書店找不到,用google image試試(google被屏了就用百度,不過用百度得有心理準備,可能至少要檢索10頁及以上。或者用google的時候翻個牆試試,估計效果會好很多),按藝術家的名字找,找到趕緊存下來。收集的圖片不是壓硬碟的,得拿來用。列印太貴就直接在電腦上看,為了記得住也可以拿紙筆臨下來,一舉多得。
交流經驗的話,國內也有一些概念設計、動漫藝術、美術設計類的論壇,用搜索引擎輸入「美術+設計+概念設計+遊戲設定+論壇」,能找到很多。

一些具體操作得真正開始學習後才能確定,比如實際臨摹、寫生、創作等,遇到困難挨個解決就是。

先這些吧,有問題再問。

PS:
見過一些原先學數學、計算機等理科專業的傢伙,現在他們在做數碼藝術插圖師、概念設計師或漫畫家。只要想學,什麼時候開始都不會太晚


知乎答案現在不靠譜的比例越來越高了
樓主最好是進入一個公司,跟著實際項目學習。由於你什麼都不會,可以以實習生的身份進去,不求回報,只為學習。進去後再怎麼做你就知道了
自己學的話 。給樓主推薦四個網站可以去看看。 iconfans 站酷 dribbble behance
直接找你喜歡的風格去臨摹。


需要完整的跟一套設計,從頭到尾,要理解裡面的體驗,在設計中發現問題,解決問題。理解,想法很重要,設計能力可以培養。


題主現在工作如何,我和你的差不多,工作好找嗎


北京新出的uxd+遊戲ui課程不知道你聽過沒,包含了界面設計、遊戲圖標設計應該更適合學生學習,緊隨時代發展。


個人感覺,應該挖掘自己擅長的東西,分析清楚自己是不是一時興起想學學,還是真的要做好...我相信你看到得那些很牛得網站絕對都是資深得設計師做出來的東西,想要達到那樣的水平還是先學畫畫吧。素描、速寫,學好了畫畫,做那些界面、遊戲界面、網站,基本上就是換個工具得問題,把鉛筆換成了photoshop罷了,道理是相通的!


你要不要看下這個?
DirectX 9.0 3D 遊戲開發編程基礎


推薦閱讀:

3A大作如今是否愈發同質化了?
如果為王者榮耀設計一款新英雄,怎麼樣設計才能體現腦洞?
讓人廢寢忘食慾罷不能的遊戲有哪些共性和特點?
為什麼以春秋戰國為背景的電腦遊戲非常少呢?

TAG:網頁設計 | 遊戲 | 設計 | 遊戲設計 | 繪畫 |