網頁/UI設計師常用資源分享，學習、工具、素材大彙整

網頁/UI設計師常用資源分享，學習、工具、素材大彙整 · 站酷Zcool 中國最具人氣的設計師互動平台，300萬設計師聚集地。

· 花瓣網 · Awwwards · CSS Design ... Skiptocontent(PressEnter) WrittenByJosephPublishedOn2020年6月8日2020年5月26日Category設計資源轉職設計 身為網頁UI設計師，不僅要隨時掌握設計新知、尋找設計靈感，或者因為需要高效率產出，而使用設計素材，正所謂『工欲善其事，必先利其器。

』，這邊要來分享我常用到的設計資源與工具，以及我平常學習的網路資源、Podcast。

內容目錄 一、靈感搜集設計社群平台網頁設計UI設計介面交互配色二、素材影像圖片/ICON字體UI版型其他三、線上工具線上編譯器配色工具擴充套件四、學習網路知識Podcast影片 一、靈感搜集 設計社群平台 Behance、Dribbble、Pinterest這三個已經是設計師最熟知也常用的社群平台，集合非常優秀的設計師作品，下面也介紹幾個優秀的中文社群平台 站酷Zcool中國最具人氣的設計師互動平台，300萬設計師聚集地。

致力於打造伴隨設計創意群體學習、交流、就業、交易、創業各個成長環節的生態體系。

站酷，讓設計更有價值，與創意群體一同進步。

網頁設計、App設計 花瓣網是Pinterest的對岸版本，有非常多的設計師都在這裡收藏設計靈感，在這裡你可以找到非常多中文的設計案例，缺乏靈感時一定要來這裡逛逛！ 網頁設計 Awwwards在這裡你看到來至世界各地超讚的網頁設計，除此之外你也可以看到這個網站在這種各種分析指標的分數！ CSSDesignAwards優秀的網頁設計作品精選，也是許多設計師會將作品投稿至此的指標性網站。

CSSWINNER與上方Awwwards和CSSDesignAwards一樣，同為網頁設計指標性網站。

muuuuu收藏好多好精美的日本網站設計案例！推薦大家去關注！ notefolio主要以蒐集韓國設計為靈感的網站。

OnePageLove專門收藏單頁式網頁設計，這裡收藏的很多網站都非常的有質感。

UI設計 CollectUI包含註冊、結帳、登陸…等167種類別的網頁/應用程式介面設計。

pttrns與CollectUI一樣專注在UI設計上個各種介面。

UIGarage有超過2,553種分類的網頁、平板、手機的UI設計，像首頁、註冊頁面、導航、菜單、搜索…等設計，通通都有。

MuzliCollectionsMuzli是一個專門從各大網站、平台搜集關於設計各樣的知識、靈感圖文，MuzliCollections是以各種設計類型為靈感搜集合集，並且每日持續更新。

UISOURCES集合了非常多知名APP產品的UI設計，很方便可以看到這些產品的設計，就不需要一個個去AppStore下載和截圖 Mobbin跟UISOURCES一樣，專門搜集許多知名APP的UI設計圖，主要以歐美的產品為主 介面交互 UIMovement若你嘗試在尋找更多的介面交互方式，這網站就非常直得推薦給你，裡面集合了很多網頁、APP各樣的互動展示，強烈建議每天都來看一下 配色 LOLColors色票組合靈感，以4色搭配為主。

ColorHunt每日配色靈感，以4色搭配為主，有空就來這裡挖掘神氣的色彩靈感吧！ COOLORS除了顯示熱門色票組合，顏色的搭配從5個到10個都有，而且還有顏色名稱和色碼的搜尋功能，可以更聚焦的去尋找你想要的顏色色票。

順帶一提COOLORS還可以自定義色票顏色。

MuzliColor跟COOLORS一樣，顏色的搭配從5個到10個都有，而且還有顏名稱色和色碼的搜尋功能，只是差別沒有辦法自訂色票顏色 NIPPONCOLORS日本色這網站沒有配色的資訊，而更著重在顏色本身的表現，而且顏色非常多種，且具變化，是蠻好的色彩而外靈感。

CHINESECOLORS 中國色跟上方日本色一樣在主題性顏色的呈現，只是這次主題是中國用色風格。

WebGradients有非常多種漸層色的搭配，而且還提供各式的顏色色碼一鍵複製，尋找漸層色靈感絕不能錯過它。

二、素材 影像 Pexels免費可商用圖庫，支援繁體中文搜尋 Pixabay免費可商用圖庫，支援簡體中文搜尋 Unsplash提供無著作權（CC0）高解析度圖片，你可以任意運用在任何地方，無須付費，也不用標註原作者名稱。

iStock需付費的商用素材圖庫，從照片、向量圖、影片、音樂都有，素材質量大部分也都比免費圖庫更好，收費方式有提供針對少量需求的點數制度，也有以固定數量的訂閱制方案。

Shutterstock主打更多高質量的影像素材，付費方式以固定數量的訂閱制方案為主。

AdobeStockAdobe旗下的素材網站，以影像、圖片為主，當然也包含了一些影片、3D圖型。

付費方式以固定數量的訂閱制方案。

圖片/ICON Freepik這應該是我最常使用到的網站，裡面有超多各式各樣的設計向量素材，從ICON、插畫、背景…等等素材都有，也有少量不錯的影像素材，且大部分的素材都是可免費使用（需標注出處），但還是有少量更精緻的素材需要成為付費會員才能夠下載。

Freebies素材主要以UI設計相關為主，並且用各種不同軟體、工具作為分類，可以依照你常用的工具去選擇適合的素材，非常貼心。

NounProject以ICON為主的素材庫，提供非常多類型的ICON，並且主打搜尋ICON功能，讓你更能聚焦在要找的ICON類型，我常常在作ICON發想時後，來這輸入關鍵字看會找到什麼圖形，非常好用。

mixkit藝術插畫資源，有人像、自然、食物、動物、城市等分類。

可免費使用，支援PNG下載。

unDraw插畫素材資源，網站中的素材都可以免費用於商用，也提供SVG、PNG等格式。

字體 dafont常用的免費字體素材，字體非常多可下載。

fonts2u跟dafont一樣為常用的免費字體素材。

GoogleFontsGoogle提供的字體服務，不僅可下載安裝到本機電腦，並能線上字體的方式供網站連接取用，且目前為免費，非常之推薦。

myfonts需付費的字體素材網站，但不得不說字體的質量比免費的字體素材又更好、更多，付費方式以直接購買為主，沒有提供套裝訂閱制服務。

UI版型 UPlabs有UI套件，圖標，樣板可以下載，每月6.99美元可以無限量下載，可商用，不想付費的話，也有部分是免費的。

其他 CSSAuthor專門分享各種設計資源懶人包，從素材、工具、軟體外掛、樣板都有，若需要什麼設計資源都可以來這找找。

Codrops這裡搜集了非常多網頁設計特效動畫的展示，動畫效果的特殊性都非常得高，並且還公開的程式碼作分享，若對網頁動畫需要些靈感，就可以來這邊找找。

三、線上工具 線上編譯器 codepen主要以線上編譯器為核心功能，對於網頁設計使相當實用的工具，能夠線上編譯HTML、CSS、Javascript，而且codepen也是個社群機制平台，許多人會將他們的作品放在平台上做分享，特別是許多網頁效果動畫，若你有需要網頁動畫的靈感這邊或許可以來看看。

配色工具 AdobeColorAdobe旗下的顏色配置工具，裡面提供各式各樣的色彩搭配組合，可以根據你的主色來配置適合的色票，並且也提供一些熱門的色票作為靈感。

COLOURlovers討論配色的社群，可根據顏色再去搜尋色票，你可以在這看到來自四面八方的色彩靈感！ Muzlicolors可以用顏色去尋找色票，或是點擊相近的顏色色塊，進行色票的搜尋，非常方便。

uiGradients一款簡單好用的漸層產生工具，你可以用他來產生各種漂亮的漸層背景，而且還直接複製CSS程式碼套用在你的網站上！ colorsupplyyy可以直接將色票套用在一些圖案應用上，幫助你更可以想像這些顏色的應用。

擴充套件 MuzliDesignInspiration設計師必裝ChromeExtension，隨時隨地了解設計圈發生的大小事！ Panda與Muzli類似功用類似，以找到最好的內容來保持靈感為目的。

已有130,000多個設計師使用。

注意：Muzli和Panda安裝後都會成為Chrome開啟的預設頁面，但兩者無法同時顯示和切換，所以建議可以用不同瀏覽器做安裝，或是純粹使用網頁版本 四、學習 網路知識 設計大舌頭分享許多業界不同領域的產品設計，還有關於UI/UX設計知識的實際應用與落實方式分享。

AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

UX四神湯UX四神湯是四位臺灣清大畢業的UX海外工作者所建立的內容平台，由於四位作者的職能與公司規模都不同，內容涵蓋美國與大陸的工作環境、互聯網巨頭與新創公司的組織方式與UX實務技能分享。

CONVERSIONLABConversionLab的成員來自不同背景和國家，藉著分享知識、觀點與實作技巧，期望對華語圈的使用者經驗設計資訊品質有所貢獻。

UXCollective分享比較多有關UX、視覺和產品設計的知識內容，是個刺激設計思維和提申洞察角度的好地方。

UXPlanet主要提供用戶體驗相關的知識內容，從案例剖析、使用者經驗研究、知識分享都有。

SidebarSidebar主要會搜集關於設計的內容，每日都只發布5則，小量時間就可以閱讀完內容，非常值得利用的平台，能夠每日都有新的設計新知養分吸收。

Muzli各種設計內容的彙整，不論是從靈感搜集、設計知識、工具分享、案件分析等等都一應俱全，可以說是設計師不可不知道的平台。

UIPatterns提供使用者介面的設計模式與標準參考點，像是輸入欄、下拉選單、文章列表、日曆…等等的細節設計都有，告訴你設計時該注意些什麼要點。

Podcast 設計遊牧一個分享UX設計工作、留學、創業、產業新知的節目，透過UX研究員、產品設計師與他們的朋友的聊天過程，讓你輕鬆獲得多元的UX觀點與想法 科技職涯科技職涯是由CakeResume創立的Podcast節目，專門邀請在科技、數位和新創領域的工作者來分享他們的職涯趣事。

科技島讀科技島讀是會員制媒體，專注於分析國際事件，解讀科技、商業與社會趨勢。

因為從台灣出發，因此取名「島」讀。

嚼嚼設計Designchewchew一個介紹設計書籍的podcast節目，每週更新都會帶來新的分享。

Anyway.FM 設計雜談由兩位UI設計師主播的podcast，主題包括但不限於視覺設計，入選2015年Apple最佳播客榜單。

UXCoffee設計咖節目以”設計無處不在“概念。

試圖通過和設計這個世界的人們交談，去探尋創造的過程、感受設計的力量。

影片 UXUITubeUI/UX界的Youtube，集合了超多精選的UI/UX設計影片內容，非常推薦的學習資源。

延伸閱讀：線上作品集網站不求人，8個設計師常用的方法提升設計效率？網頁UI設計師必裝的7個Chrome擴充插件 若你喜歡我的這篇文章，麻煩拍5次下面小手給予我支持與鼓勵喔！ JosephHi👋，我是Joseph 我是一名從理工界踏入設計圈的UI/UX設計師，同時也是一位人夫和新手爸爸，在這裡我不僅會分享轉職經驗、實物設計，也會分享一些我個人喜愛的事物。

PostNavigation PreviousArticleNextArticle 相關文章 2020年8月9日2020年8月9日 2020年5月20日2019年7月6日 2020年8月9日2020年4月27日 6Comments 有很多好用的工具 感謝您的資源介紹！ 最近在修改網站很有幫助 回覆 很高興聽到你的回饋並能對你有幫助：） 回覆 Thanksforyoursharing!!!🙂 回覆 You’rewelcome：） 回覆 超棒的分享！感謝尼！！！ 回覆 感謝回覆：） 回覆 發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*CommentName* Email* Website 在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

Δ