學習UI設計和網頁設計以及web前端分別有什麼樣好的網站推薦？

12-18

最近想自學這三個方向，特別想找到學這些的網站。希望有知友幫忙！

謝邀~

UI設計可以看：UI設計師_學習網站導航
web前端可以看：IT互聯網|程序員學習網站導航

另附網路自學學習榜單，希望對lz有用~ （應該可以找到自己需要的學習網站~）
一、匯總榜單：

公開課_學習網站導航
收錄了網易、多貝、傳課等眾多公開課學習網站
大學生常用_學習網站導航收錄了外語學習、就業、實習、考研等眾多大學生相關的學習網站
IT互聯網_學習網站導航收錄了IT、程序員、web開發、移動開發等眾多互聯網相關的學習網站
IT職業技能_學習網站導航收錄了產品經理、UI設計師、前端、網路安全等互聯網職業技能提升網站
其他網站收錄
收錄了一些稀奇古怪的網站、音樂電台、工具應用、大雜燴

二、適合大學生的：

外語學習提供了英語學習的相關網站
就業 | 實習提供了大學生就業、實習相關的學習網站
考研提供了考研相關的學習網站
國外學習網站收集國外眾多優質學習網站，首先。。你得會英文(⊙o⊙)…
科研|文檔|資料
學霸過來吧~找論文利索~

三、IT互聯網相關的：

IT互聯網IT互聯網學習相關網站
IT程序員IT程序員學習相關網站
IT移動開發IT移動開發學習相關網站
web開發web開發學習相關網站
IT培訓機構
這些培訓機構上可以找到一部分免費的教程

四、IT職業技能相關網站：

產品經理網站導航N多產品經理學習入門學習網站
UI設計師學習網站導航N多UI設計師入門學習網站
WEB前端學習網站導航N多前端初學者學習入門的網站
黑客|網路安全學習網站導航N多黑客入門安全攻防學習資料
科技媒體網站導航
了解互聯網圈內動態，培養互聯網思維~

五、其他：

稀奇古怪的網站不少都是很有意思的，不要錯過~
稀奇古怪工具有些工具可是神器哦~
益智訓練專治大腦生鏽！
舞蹈|藝術妹子可以看看
谷歌代理訪問國外網站學習的利器，提供N多代理
音樂電台N多高質量音樂網站，觸動心靈的音符！
影視動畫|遊戲策劃
電影|動漫
旅遊|攝影|體育|戶外
創意|生活有意思
經管財經電商_學習網站——金融領域的

麻煩點個贊好嘛！

網頁設計與UI設計有諸多類似之處，但也有著各自不同的尺寸規範，但本質上都屬於「視覺設計+交互設計」的範疇。而WEB前端，則是敲代碼的工作，承接在視覺設計的下游，後端製作的上游。以下就分享一兩個最有針對性的網站和教程：

1.網頁設計：網頁設計自學視頻教程，http://t.cn/RcxBPkx

2.UI設計：ui設計視頻教程，學UI網-UI設計師學習教程平台

3.WEB前端：html+css網頁前端課程，前端開發_慕課網課程

一、自學網頁設計之前，你需要知道的4件事。

自學網頁設計，你首先得了解網站的製作流程。在有了全局的概覽後，你才能對接下來所要學習的知識，做到瞭然於胸。然後再做有針對性的學習和訓練，方能夠更高效率的入門網頁設計。當然條條大路通羅馬，方法並非唯一，以下就結合自己的學習和工作經歷做個總結，希望能對初學者有所幫助！

▽圖例：優秀的網頁設計作品。類型：企業站。

1、網頁設計的製作流程

通常情況下，任何一網站的建立，都會經過「分析策劃—交互設計—視覺設計—前端製作—後端製作—測試上線」6個環節。我們平常所說的【網頁設計】與「網頁製作」則分別對應著6個環節中的【視覺設計】與「前端製作」，在實際的工作崗位中，其分別由「網頁設計師」與「前端工程師」去執行完成。

很多初學網頁設計的朋友，對這兩者的關係往往是傻傻分不清楚的狀態，對自己的專業定位沒有清晰的認識。這就導致學設計的同學，後來干到了「前端工程師」的崗位，學前端的孩子開始猛補「設計知識」，這個就是要走偏的節奏。

▽圖例：優秀的網頁/平面視覺設計作品。來源：Behance

在這分工協作越來越明確的年代裡，唯有專精自己所在的領域，才能脫穎而出，泛泛而學，只會變得平庸！如果想要成為多面手，那也得先精通一門核心技能！

2、網頁設計，是以視覺設計為主工作。

自學網頁設計的核心任務是學習「視覺設計」相關的知識點。如何更加高效的傳達版面信息？如何規劃頁面路徑？用什麼樣的排版，或者富有創意的表現形式？用什麼樣的顏色，以及多大的字型大小？這是新手學習網頁設計應該畫下的重點。

▽圖例：優秀的網頁/平面視覺設計作品。來源：Behance

一個網頁被設計出來，是給人用，給人看的。要好看（簡潔）、要好用（高效）這才是一個設計師需要反覆考慮的。視覺+交互，是網頁設計師的核心競爭力。

其中「視覺設計」的依據，源於前面的策劃和交互設計。最後出具的「視覺設計稿」得符合品牌定位，滿足生產運營、以及用戶需求，這是網頁設計師必修的基本功！

3、網頁製作，是以前端代碼為主。

網頁製作在流程上，是在設計之後。這部分工作通常是由WEB前端工程師來完成的，工程師通常會運用到HTML、CSS、以及JavaScript、jQuery等前端代碼，來還原網頁設計師的「視覺設計稿」，以及交互動畫等。

「前端工程師」除了要配合網頁設計師外，還要配合做後端工程師，做好網頁端的數據收集處理等工作。如果你要勵志成為一個優秀的網頁設計師，請牢記自己的崗位職責和學習重點，在沒有認清「視覺設計」前，要當心自己是不是越位到Web前端開發這個坑裡去了。

▽圖例：優秀的電商網頁設計作品，視覺合成。作者：尚雲

再比如優化網站所需的SEO、Ajax等技術，雖無需你動手實踐，但能做到了解一二，也是不錯的加分項。在設計的時候，也可充分利用這些規則和技術來規劃你的版面，使其更加的專業友好。

4、那麼問題來了，新手學習網頁設計要學些什麼？

(1).首先要精通設計軟體，把Photoshop玩轉，這是網頁設計的主力工具！

(2).深入學習排版設計、色彩構成，掌握視覺基礎規律（構成、透視、光影）

(3).掌握網頁設計規範，了解常見的網頁布局形式，學習交互設計等基礎知識。

(4).了解前端代碼HTML、CSS、JS、JQuery的運用，學一款代碼編輯軟體（如：Dreamweaver）

(5).了解你設計網站的公司及產品，熟悉這個公司及其產品面向的人群！

(6).拓展學習網站優化、開發、後台數據處理常識（加分項目！）

前四個是基本功，後面的是加分項。越靠前越重要！

二、通過視頻教程和書籍，來系統學習網頁設計。

1.網頁設計書籍推薦

(1).網頁設計實踐暢銷：《界面設計模式(第2版)》

(2).設計入門啟蒙書籍：《寫給大家看的設計書(第4版)》

(3).色彩搭配實踐書籍：《互聯網產品(Web/移動Web/APP)視覺設計·配色篇》

(4).網頁交互設計經典：《簡約至上：互動式設計四策略》

(5).如何製作響應式網頁：《響應式Web設計實踐》

2.網頁設計視頻教程

學習路線參考：http://www.xxriji.cn/career/7.html

(1).【基礎】視覺設計基礎理論：學習三大構成、素描基礎。

(2).【基礎】必備網頁設計軟體：學習Photoshop視頻教程、Dreamweaver視頻教程。

(3).【核心】網頁設計專業知識：學習網頁設計設計概述、製作流程、視覺元素、色彩搭配、以網頁布局排版、切圖、交互知識等。

(4).【核心】網頁設計視覺提高：學習網頁設計思路，將文案創意到視覺化呈現的全過程，以及畫面光影細節刻畫的技能提高。

(5).【拓展】更好的團隊協作：學習HTML+CSS網頁前端課程。

其中視頻教程和書籍，裡面涉及到的知識點有少許重合，開卷有益，希望大家學有所成！真誠推薦，望以對初學者有所啟發！

(完)

未經許可禁止轉載，侵權必究！

web前段、UI設計、網頁設計幾乎是三個不同的職業崗位，你所有都學沒有側重點的話學不精哦。我是做網頁設計的，上面所述的UI設計、web前段這一塊都會有所涉及，但側重點主要是網頁設計這個方向。
我是從做傳統的平面設計轉向網頁設計的，工作中也涉及到手機網站的UI界面設計，也因此習得了些Web前段的知識，做了一個自己的博客網站：「平面設計學習日記網」裡面有分享一系列整套的平面設計、網頁設計教程，教程更多的是側重設計方面，也有幾門教程涉及到Web前段的基礎知識。如下圖：

1.透過DW軟體，入門學習Web前段基礎知識

其中的Dreamweaver CC零基礎入門教程，裡面涉及到了部分Web前段的HTML、CSS3以及JS、JQuery知識等，當然如果是要作為一個web前段工程師來學習，肯定是遠遠不夠的，但作為一個側重設計的網頁設計師來學習也足夠了。

2.專業的網頁設計教程
另外裡面推薦的網頁設計高級教程（上篇），則是正兒八經的網頁設計教程了，專業性極強且系統全面，是由騰訊高級設計師Gordan錄製在此Repost課程大綱如下：（註：騰訊的設計師按經驗實力分為初級、中級、高級、專家級）。上篇課程總共分為九章：

第一章網頁設計概述

對網頁設計的分類、應用範疇進行詳細分析。

第二章網頁設計組成元素

包括色彩、排版、人像、靜物處理以及交互處理等。

第三章色彩搭配及配色誤區

不同行業、不同類型的網頁，在色彩基調選擇上的規律。

確定主色調之後，我們通過何種方式來進行色彩搭配，不同的顏色會給人怎樣的視覺效果等。

第四章網頁設計構圖及形式感的打造

內容包括：設計構圖的方式有哪些？形式感如何打造？以及構圖形式的適用範圍等。

第五章網頁中的文字處理

文字部分在網頁設計中佔有舉足輕重的地位，它是網頁信息傳達的主要載體。

我們通過分析文字的排版、圖文混排的方式，以及標題文字排版三個方面來講解。

第六章交互處理

隨著網路和新技術的發展，各種新產品和交互方式越來越多，人們也越來越重視對交互的體驗。

那麼本章節我們就針對網頁設計中常用的交互方式進行分析，同時還講解到了「分割法」以及響應式頁面的概念。

第七章圖像處理

通過一個地產頁面向大家演示和講解了網頁圖象，如何調整色相、飽和度和明度，從而塑造畫面的景深關係、透視關係以及畫面的層次感。

第八章人像處理

我們通過細部刻畫人物的光影關係，來塑造人物的立體感。根據需求，打造場景氛圍。

第九章逆光效果製作

在素材不完美的情況下，如何通過逆光效果，來突出氛圍？逆光效果具有哪些特徵？場景又該怎樣塑造？這些，我們都會在課程中一一為大家解答。

以上就是網頁設計高級教程（上篇）的全部內容，課程通過理論結合實踐的方式進行講解，相信學完之後，大家會對網頁設計有更深刻的認識，也能做出更加優秀的作品。更多詳細內容，大家可以去正式課程參加學習。除此之外，其網頁設計高級教程（下篇）則有更加豐富的是實例教程可供學習。

3.UI設計類的兩套教程推薦

這兩套教程UI設計教程主要是講授UI圖標設計，適合中高級提高的設計師學習，不足以餵飽一個0基礎一心想要從事UI設計行業的小夥伴學習。

裡面的這套UI主題圖標設計案例教程，講解了用PS繪製不同風格圖標，由UI設計師韓銳主講。

比較推薦的是這套精品ui圖標製作教程，由站酷推薦設計師李世欽主講，課程案例圖標非常精美，裡面學到的繪製技法可以沿用到你的其他設計作品當中，感興趣的可以學習一下。

上面推薦的教程集中在勤學網，其主要側重於設計類教程，提供全面的網頁設計教程知識，以及部分的web前段知識，UI圖標設計知識等穿插其中，如果要學習裡面的課程，可以去註冊會員。

UI設計和前端設計學習的平台和網站在精不在多，掌握幾個比較精髓的教程就好，等入門UI之後便可自選適合自己的學習方法。

------------------分割線----------------------

UI設計學習網站

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

①UI優秀作品

②UI經驗_文章_教程分享UI經驗/文章/教程分享-UI中國

③UI文章專題UI文章專題-UI中國

④UI設計書籍_雜誌_圖書雜誌/圖書 - UI中國

⑤UI設計線下/線上活動活動-UI中國-專業界面交互設計平台

⑥UI設計線下/在線培訓課堂培訓-UI中國-培訓頻道

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

學習更多可點擊網站頂部導航欄（各種關於UI設計的內容、資料、技巧、培訓、作品等等）

2.這個網站把UI設計分為6個版塊供自學者學習：規範基礎，軟體基礎，圖標設計，界面設計，切圖交互，用戶產品UI設計者 – 一個免費自學UI設計APP

3.UI培訓-像素范兒的學習官網

4.UI設計資源特別多學ui網—ui設計師學習教程平台

5.UI+前端學習網站：黃蜂網 - 設計分享生活

6.25學堂-專註APPUI界面設計,分享移動互聯網優秀產品
7.方酷 - UI設計|APPUI|手機UI設計分享平台
8.UI設計網-專業探討ui設計_ui設計培訓
9.優界網,提供UI圖標及UI psd素材免費下載,專註UI精品設計素材下載
10.UI設計愛好者-UI設計教程,UI設計師的學習交流平台
11.UI設計綜合網站圖翼網(TUYIYI.COM)
12.CHINAUI優艾網
13.MobileUI莫貝網
14.UE設計平台-網頁設計，設計交流，界面設計，酷站欣賞
15.雲瑞設計－ui設計與體驗博客
16.UI設計/UI界面設計/交互設計
17.站酷 (ZCOOL)
18.優設-UISDC: 優秀網頁設計聯盟-SDC-網頁設計師交流平台
19.設計資訊 : PS筆刷吧
20.設計達人 | 愛設計，愛分享。
21.矢量圖 - PSD矢量,AI矢量,EPS矢量,矢量素材下載
22.前端+UI：懶人圖庫 - 矢量圖,JS代碼,網頁素材
23.素材,素材中國,圖片素材,設計素材,素材網
24.圖片網_背景圖片素材網_qq空間圖片素材
25.http://sansheji.com/sucai
26.iMS素材共享平台|Arting365
27.http://xiaba.shijue.me/stuff/?ref=main_nav
28.經典版式設計,包裝設計,字體設計欣賞,最新平面設計軟體,ps濾鏡,在線書法字體,日韓文字體,coreldraw教程免費下載
29.http://www.yuanxingku.com/
30.axure原型素材
31.教育學習網站常用圖標矢量素材下載
32.Showcase Vectors, Photos and PSD files
33.html5網頁模板下載，網站模板下載
34.網頁設計師聯盟--國內網頁設計綜合門戶

精選UI設計綜合學習網站：
1.站酷 (ZCOOL)
2.UI中國-專業界面交互設計平台
3.威廉波波斯的花瓣個人主頁
4.https://www.pinterest.com/
5.飛特網-做最好的設計學習、設計交流平台
6.Behance
7.Dribbble - Show and tell for designers
8.圖翼網(TUYIYI.COM)
9.優界網,提供UI圖標及UI psd素材免費下載,專註UI精品設計素材下載
10.優設-UISDC: 優秀網頁設計聯盟-SDC-網頁設計師交流平台
11.設計達人 | 愛設計，愛分享。

前端學習平台：

1.doyoudo

2.前端觀察
3.前端網（W3Cfuns）
4.素材家園-js代碼_psd素材
5.翼狐網（原翼虎網）
6.http://cssbuttons.tumblr.com/
7.Free Responsive Mobile Website Templates Designs
8.視頻教程：CSS3動畫屬性實用技巧教程
9.Free iPhone Mockup Generator amp; App Demo Videos by Placeit
10.TVtalk.cn

線上課堂：

1.https://qidianla.ke.qq.com/

2.網易公開課
3.人人都是產品經理

導航平台（每個導航都有上百個UI設計+網頁設計+前端+各種相關的網站鏈接），點進去之後，你一定會回來點贊的！：

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

2.SDC設計師網址導航

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

UI設計交流群：414632028

------------------設計相關回答----------------------

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

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

GoodUI
Ui Parade – User interface design inspiration design tools
UI-Patterns.com
Web Fundamentals
...

謝邀，如果想學頁面設計（個人把這些都叫頁面設計）的話，那就是多看圖，多別人優秀的作品，國內有很多網站可以看，例如站酷花瓣黃蜂此類
如果是想學開發的，那直接上我要自學網-視頻教程，很多教程可以學習

推薦一個配色網站：NIPPON COLORS 無論是色彩還是設計我都被它美哭

不是做UI和前端，但相關的也會涉及，UI相關常去花瓣，還有http://findicons.com找圖標素材，直接透明背景可以貼到axure裡面用。
學前端，請一定從w3cschool開始。
另外建議有側重點，都學學不精，像樣點的公司，UI設計和前端開發是分開的。

親，別怪我黃婆賣瓜哦，我的網站你可以去看看學習下，有很多網頁前端模板資源可看可下載
素材火

Website Awards
這裡囊括了世界上很多頂尖設計精良的網頁

居然沒有人說dribbble.

UI設計去站酷；網頁設計去w3c；web前端去極樂網。不過最好確定其中一個方向，都想學的結果就是都學不好…………學霸除外

smashing magazine！乾貨絕對！（中文版的「優秀網頁設計」也是不錯的有部分轉載翻譯sm的好文）

直接關注我吧，我這邊可以免費教的，如果你非要看一些學習資料的話給你推薦一個網站「眾創緣」，裡面什麼樣的學習資料都有！

知乎 nonobo

自學初級階段可以看看騰訊課堂，各方面的都有。中級階段可以找一下國外的設計網站。比如那些需要翻牆才能看的，或者找一些大師作品多看多體會。

兩個字：站酷

多看多做多交流，UI還是很好學的~~~

Nonobo

好多乾貨呀，謝謝

可以看看這個
Coolors – 超級快速配色方案生成器