想自學 UI/UX?42 個新手必備的線上資源,帶你有效學習!

黃若慈・2022-03-16

想自學 UI/UX,但不知道該從何開始?

你的設計小幫手 Eagle 將在本文中一次解決你的所有疑惑!我們將依序為你介紹 UI/UX 的定義及差異,並為初學者精選出 42 個國內外的優質文章、設計部落格、Podcasts 及 YouTube 頻道,讓你在學習路上更省力!


什麼是 UI/UX?

圖片來源:Pixels

圖片來源:Pixels

使用者介面(UI):

UI 的全名為 User Interface,指的是使用者介面,而 UI 設計師的主要工作,就是負責處理各種網頁和應用程式介面上的功能,包括網站中的顏色、字型、字體大小、配置安排,以及使用便利性及互動畫面等,都是由 UI 設計師一手包辦!因此,UI 設計師必須確保產品介面能對用戶產生足夠的吸引力,並且與品牌概念、產品定位相符, 還得確認在視覺上能清楚傳達 UX 設計師所展示的路徑,進一步宣傳與推廣產品。

使用者體驗(UX):

與 UI 概念相似的 UX 指的則是使用者體驗,全名為 User Experience。UX 設計師需要依據使用者的習慣,設計出流暢、直觀、符合邏輯的網頁使用流程,像是內容出現的順序、按鈕的擺放位置等。此外,還必須透過用戶實測後的意見反饋,不斷地修正與優化,有效改善流程,以創造出最佳的使用者體驗!


如何區分 UI 與 UX?

圖片來源:Pixabay

圖片來源:Pixabay

更進一步來說,UI 設計師主要是專注於「產品介面的呈現」,也就是使用時的外在視覺效果,而 UX 設計師則更注重「用戶使用產品或服務的過程」,也就是你在使用時的內在感受,不過最終,兩者還是必須相輔相成,共同設計出更好的使用路徑,讓使用者在體驗時更加輕鬆便利。

接下來,Eagle 團隊還為你整理了眾多高品質 UI/UX學習資源,幫助你釐清想從事的領域,並時刻掌握最新的設計趨勢及技巧,連國外第一手資料也一次打包給你,讓你能更快速上手 UI/UX!

一起來看看吧!

延伸閱讀:

UX 設計師必讀!17 本 UX 書籍推薦清單

【線上課推薦】 24個你不可錯過,含金量超高的 UI/UX 學習課程!


必讀!10 篇給 UI/UX 新手的精選文章

圖片來源:Freepik

圖片來源:Freepik

【中文專區】

1. 學習 UI/UX 設計,給非本科生的 3 個步驟

想成為一名 UI/UX 設計師,但要學習的知識與技能太多,讓你不知如何是好嗎?

作者「喬瑟人夫」根據其過往的經驗,並透過 3 大學習步驟「點、線、面」,帶你從單一頁面設計、介面流程規劃,到整個產品的企劃策略快速上手,讓你的學習事半功倍!

2. 寫給初學者的 UI、UX、GUI 與業界需求 

想再進一步了解「UI/UX 的定義與差異」?別錯過這篇!

沒想到除了 UI、UX 外,還有 GUI?作者 Samuel 將詳細地帶你了解這三者的工作內容及差異,並依據自身經驗說明一些業界實際的需求狀況,讓你一探究竟這個的全新的領域!

3. 給 UX 學習者的入門指南

網路上遍佈著各種教學文章與技巧分享,卻很少有人在探討 UX 的歷史、本質及應學習的內容。

本篇由微軟的資深人因工程師 Steven Dong 撰寫,將與你一起探索 UX 設計,這一系列的入門指南總共分為「上、中、下」3 大部分,手把手帶你了解 UX 的起源、涵蓋範圍,與實際應用。


【英文專區】

4. Complete Beginner's Guide on How to Learn UI Design

透過完整的教學指南,讓你輕鬆學 UI 設計!

一篇文章囊括所有自學 UI 所需的知識及資源,包括 UI 的基本概念、需具備的技能和工具,甚至還大方分享了豐富的線上學習資源,相信看完的你一定會感到獲益良多。

5. Useful UX Guidelines, Tools and Resources

在踏入 UX 設計領域之前,千萬別錯過這篇 UX 入門大全。

除了集結眾多實用的設計工具、技巧和資源,作者還貼心地釋出擬定 UX 策略的成功技巧,並針對用戶研究和 UX 著作做進一步的研究與探討,幫助你高效掌握用戶體驗!

6. Typography on User Interfaces

無論是平面、視覺、UI、品牌等設計領域,字體設計都是不可缺少的重要元素之一。

看完這篇文章後,創建一套字體將不再是一個複雜的過程,從字體的基本知識學起、到如何設計網頁字體,以及該注意哪些細節,進而讓你的介面設計變得更加吸睛、動人!

延伸閱讀:愛用推薦!41 個設計師必收藏的中文、英文商用免費字體資源下載

7. User Interface Design: 4 Rules You Need to Know

一個好的 UI 設計能讓每個使用者都感到舒適,並順利到達他們想要的結果。

由知名的 99design 團隊一次帶你了解何謂用戶界面設計、什麼是好的 UI 設計以及 4 條必知的入門規則,幫助你產出更優質的 UI 設計!

8. User Experience: What Is It and Why Should I Care?

UX 無所不在,然而,你知道有哪些生活中常見的 UX 應用嗎?

其概念除了可以用於行動裝置、電腦軟體等設備,更處處藏在我們的生活細節當中。作者 Amy Harvey 利用簡單且詳細的方式,探討「用戶體驗」的概念與應用範圍,證實了 UX 不可忽略的重要性。

9. The Beginner’s Manifesto

「Manifesto」即宣言,是一篇給初學者的信心喊話。

根據研究顯示,有多達 80%的 UI/UX 初學者,都曾在自學期間感到迷茫、缺乏信心。這時要記得,每個人都是從基礎開始的,不要懷疑自己或你所具備的能力,相信自己!

10. The Importance of Designing for Readability

無論是任何設計創作,「易讀性」都是重要的議題之一,而在 UI/UX 中又更為重要。

透過閱讀本篇文章,你可以更了解什麼是易讀性、4 個提升作品易讀性的小技巧與工具,以及超過2,000,000 個線上設計資源,一起來學習吧!

如何有效整理設計筆記?用 Eagle 標籤、評分、智慧分類,幫你精準整理、效率學習!

影片來源:Eagle


12 個實用的 UI/UX 設計部落格

【中文專區】

1. Medium

圖片來源:Medium

圖片來源:Medium

Medium 是由 Twitter 的共同創辦人 Evan Williams 所創辦的線上發布平台,你可以在這分享超過 280 個字符的想法和故事,而且,觀看者也不再僅限於你的朋友或追蹤者,為你大幅增加文章曝光度!

平台上,你可以看到各種主題類型的文章,而 UI/UX 就是其中的熱門的話題之一,舉凡基本概念、技巧、最新趨勢、職涯經驗分享,甚至是進階的設計技巧皆應有盡有,接下來,一起來看看有哪些值得追蹤的 UI/UX 設計作者吧!

追蹤推薦:





  • 中文

    • UX 四神湯:每週定期發布文章,內容涵蓋、互聯網巨頭與新創公司的工作內容、設計趨勢及 UX 實務技能分享
    • 獸群之心 / Soking:提供大量的教學文章,引導你體驗 UX 領域的專業知識





  • 英文

    • UX Collective:蒐集有關 UX 設計、視覺設計、產品設計的故事及議題
    • Collect UI:每天從 Dribbble 提供最新的設計資源懶人包,成為設計師尋找靈感的來源之一





延伸閱讀: 設計師必逛!44 個找靈感網站推薦:UX、網頁設計、國外網站等資源


【英文專區】

2. Smashing Magazine

圖片來源:Smashing Magazine

圖片來源:Smashing Magazine

作為世界上備受歡迎與推崇的「網頁設計」與「網頁開發」部落格之一,Smashing Magazine 為網頁設計師和開發人員提供大量可靠且實用的文章,包括網頁設計、圖形設計和用戶體驗。

快把它加入書籤來更了解更多 UI/UX 的奧秘吧!

UX 初學者的文章推薦:

3. UI Patterns

圖片來源:UI Patterns

圖片來源:UI Patterns

UI-Patterns 收集了許多在網頁設計時,可能出現的「使用者介面」( User Interface ),除了依照主題分門別類以外,還有提供豐富的 UI 的圖示、使用方式、解決的問題與多篇相關的文章,幫你有效解決學習 UI 所遇到的疑難雜症!


想快速收藏 UI 靈感?用 Eagle 的「整頁截圖」一鍵保存網頁,讓你快速上手 UI!



4. UsabilityGeek

圖片來源:UsabilityGeek

圖片來源:UsabilityGeek

Usability Geek 是一個非常有深度的設計部落格,在多種設計領域中提供實用的建議與見解,像是 UI/UX 設計、電子商務、HCI 等。更好康的是,同樣是由 Usability Geek 所運營的 The Interaction Design Foundation,提供豐富且高質量的 UX 設計線上課程,並授予你完課證書,如此一來,不僅可以豐富你的履歷,還能大幅提升競爭力!

5. Inside Design

圖片來源:Inside Design

圖片來源:Inside Design

InVision 是全球大型的視覺協作平台,曾與多家知名企業合作過,而 Inside Design 則是他們的專屬設計部落格,涵蓋的主題包括設計資源、時事、技巧、靈感,以及 UI&UX 等。

想了解最新的設計趨勢、工具或社群活動嗎? Inside Design 是你的最佳設計夥伴!

6. Nielsen Norman Group

圖片來源:Nielsen Norman Group

圖片來源:Nielsen Norman Group

Nielsen Norman Group 以分享「UX 知識」與「研究內容」為核心目標,為用戶體驗領域提供扎實的教學指導,並在其部落格中分享超過 1500 篇教學及研究文章,包括入門指南、UX 技巧和研究成果等,堪稱「UX 界的線上圖書館」,讓你僅需透過一個網站,就可獲得高品質的設計資源!

精選文章推薦:

Empathy Mapping: The First Step in Design Thinking:談論如何在「同理心地圖」中可視化用戶的態度和行為,在設計發想初期,可以有效幫助設計團隊更深度了解終端使用者,並從中得到見解

7. UXmatters

圖片來源:UXmatters

圖片來源:UXmatters

UXmatters 提供一系列的設計資源,幫你激發設計靈感,除此之外,也有許多業界優秀的 UX 專家會在此分享見解,主要探討的內容包括重大議題、實際案例、未來趨勢等。不論你是新手小白還是 在 UX 各方面都精通的專業人士,都非常推薦給你!

8. UX Movement

圖片來源:UX Movement

圖片來源:UX Movement

UX Movement 是以 UX 設計為主題的部落格,透過分享技巧、技術和實際案例應用,教你如何掌握軟體、網頁和行動裝置介面的用戶體驗。更方便的是,你可以利用網站上的快捷鍵,快速挑選喜歡或感興趣的主題。

9. UXPin

圖片來源:UXPin

圖片來源:UXPin

UXPin 是一個全端開發的 UX 設計平台,其部落格提供豐富的優質文章,擁有超過 20 種主題類別,包括 UI/UX、行動裝置、桌上型、網頁設計和案例研究等,是初學者的最佳學習資源之一。此外,它也有提供免費的電子書,以及舉辦線上研討會,成為你學習路上的墊腳石!

10. UXstudio

圖片來源:UXstudio

圖片來源:UXstudio

Uxstudio 是一家設計與研究公司,其部落格以 UX 為核心,分享一系列相關的設計文章,像是行動裝置、網頁、產品管理和 UX 案例研究,都是其熱門主題之一。 除此之外,他們也會在 UX 設計交流平台分享有用的設計技巧與新知,以及舉辦專業的 UX 課程,幫助你產出更強大、優質的 UX 設計創作!

延伸閱讀:想拓展設計圈人脈嗎?20 個 UI/UX 設計師愛用的社群媒體推薦

11. UX Magazine

圖片來源:UX Magazine

圖片來源:UX Magazine

UX Magazine 是一個專門探討如何優化用戶體驗的非營利平台,每個月都會從各大部落格和媒體中,挑選出最優質的設計文章,推出一本線上設計雜誌,內容涵蓋 UX 設計、策略、技巧和新知等多項實用主題,讓你快速掌握 UX 設計的入門訣竅!

12. XD Ideas

圖片來源:XD ideas

圖片來源:XD ideas

XD Ideas 是 Adobe 旗下的 UI/UX 設計部落格,你可以從中得到基礎知識、設計流程、最新趨勢,以及資深用戶體驗設計師的獨家見解,除了豐富的文章,如果你想學習如何使用 Adobe XD,這裡也為你提供最詳細的教學指南,讓你輕鬆學習!


12 個必聽的 UI/UX Podcasts

【中文專區】

1. 設計遊牧

圖片來源:設計遊牧

圖片來源:設計遊牧

設計遊牧堪稱是華語圈最國際化的 UX Podcast,是由兩位來自台灣的主持人,透過訪談和閒聊的形式,聽來自各地的海外遊子們以不同的觀點,分享關於 UX 設計的留學經歷、工作故事、設計新知等,一起來收聽以感受不同的 UX 工作體驗吧!


【英文專區】

2. UI Breakfast

圖片來源:UI Breakfast

圖片來源:UI Breakfast

UI Breakfast 擁有大量且高品質的 Podcast 內容,透過邀請業界優秀的設計師,以主題式的詢問方式一問一答,讓你每週只要利用不到 45 分鐘的時間,就能吸收最精華的設計知識,像是定價、文案、插圖、技巧教學,以及書籍與工具推薦等多樣化的內容,相信你一定從中獲益良多!

3. The hacking UI

圖片來源:The hacking UI

圖片來源:The hacking UI

The Hacking UI 是由設計師 David Tintner 和開發人員 Sagi Shrieber 共同主持的精彩 Podcast。在平台上,你不僅可以收聽兩位主持人針對 UI/UX 設計、易用性、研發及開發等主題的有趣談話,還提供豐富且多樣化的實用設計文章,包括交互設計、靈感發想、進階技巧,及深度議題探討等,廣受 UI/UX 設計師們的喜愛!

4. Ramblings of a Designer

圖片來源:Ramblings of a Designer

圖片來源:Ramblings of a Designer

想獲得最新的圖像設計新聞,Ramblings of a Designer 將是你的第一首選!

每集以 30 分鐘的時間,採訪一位經驗老道的知名設計師、探討相關設計文章,並給予建議或來自專家的見解,為你提供最豐富的 UI/UX 學習資源,非常適合讓新手設計師快速累積實力。

5. User Defenders

圖片來源:User Defenders

圖片來源:User Defenders

User Defenders 是由 Jason Ogle 所創辦的知名 UX Podcast,以 UX 設計和個人成長為核心內容,策劃了從 UI/UX、網頁設計、產品設計到設計思維等豐富主題。在每集中,主持人跟嘉賓之間所進行的娛樂性、教育性的深度談話,總讓人不禁想一集接著一集的聽下去。

不過,每集的內容時間較長,適合空閒時間較多時收聽,或者你也可以利用 User Defenders 所整理的關鍵字時間參數,快速跳到想聽的特定片段。

6. UX Podcast

圖片來源:UX Podcast

圖片來源:UX Podcast

UX Podcast 是由 James Royal-Lawson 和 Per Axbom 所主持的雙週節目,致力於透過談話突破學習上的孤島,並邀請從事 UX 的設計師分享自身經驗,因此,其討論的主題不僅限於 UX 的內容,還提供商業、技術,以及相關設計議題的探討。每集的時間介於 30~40 分鐘,且內容可大致被分為以下 4 類:鏈接節目、嘉賓節目、主題節目和活動節目,是非常具多元性的 Podcast 之一。

7. What is Wrong with UX

圖片來源:What is Wrong with UX

圖片來源:What is Wrong with UX

What is Wrong with UX 是一個有趣且富有洞察力的 Podcast,主持人會分享他設計生涯中的有趣故事,並談論如何打造出色的產品介面設計,每集都可以從中得到實用的建議與回饋,使你成為優秀的用戶體驗設計師!

8. Design Details

圖片來源:Design Details

圖片來源:Design Details

如果你喜歡聽設計師閒聊或開玩笑,那你一定會喜歡 Design details!

Design details 是由 Marshall Bock 和 Brian Lovin 所主持的每周 Podcast,主持人會邀請來自「用戶體驗」、「視覺設計」、「產品設計」和「遊戲設計」等領域的頂尖設計師,進行有趣的訪談及對話,是相對輕鬆、休閒的教育性節目!

9. The Big Web Show

圖片來源:The Big Web Show

圖片來源:The Big Web Show

Big Web Show 是 Jeffrey Zeldman 所主持的談話性 Podcast,經營至今,已採訪過數位優秀的網頁設計師,每次訪談的主題包括網頁發布、藝術指導、內容策略、排版、技術等多種類型。

最後想推薦的是,節目常會邀請知名的頂尖設計師,進行長達一小時的問答環節(Q&A),聽完後一定讓你收穫滿滿!

10. Shop Talk

圖片來源:Shop Talk

圖片來源:Shop Talk

Shop Talk 的每一集中,主持人 Chris Coyier 和 Dave Rupert 都會邀請一位嘉賓,來談論前端網頁設計、開發和 UI/UX 設計,幫你快速掌握業界的時事,並教你如何應對最新趨勢。

另外,如果你有任何設計相關的疑問或困難,Shop Talk 也提供發問的管道,並在節目中選出幾個常見問題來幫大家解答。

11. Wireframe

圖片來源:Wireframe

圖片來源:Wireframe

Wireframe 是由 Adobe 和 Gimlet Creative 所經營的 UX Podcast,每集以 20 分鐘左右的時間,分享許多交互設計背後的故事,此外,整體也以偏重概念性的方式去介紹,因此,無論你是 UI/UX、平面設計師,還是任何對設計感興趣的人,這個 Podcast 都非常適合讓你快速激發設計靈感和洞察力!

12. UXpod

圖片來源:UXpod

圖片來源:UXpod

UX pod 是經營最久的 UX Podcast 之一,由澳洲的 UX 顧問 Gerry Gaffney 於 2006 年創立。節目中的內容,累積至今已達近 30 個主題,包括 Global UX、User research、UX writing,以及更多的設計相關領域,它的目標是希望為從業者或其他對 UX 感興趣的人,提供一個整合性的討論及學習平台。


8 個優質英文 UI/UX YouTube 頻道推薦

1. High Resolution

圖片來源:High Resolution

圖片來源:High Resolution

High Resolution 是一個以「產品設計」和「設計思維」為主的 YouTube 頻道,每週邀請許多國外知名公司,像是 Facebook、Airbnb、微軟、IBM 等團隊中的 UI/UX 設計師和大家分享經驗和技巧,而節目的主要模式,是由兩名主持人 Bobby Ghoshal 和 Jared Erondu 以提問的方式進行訪談,透過觀看這個頻道,能讓你進一步了解大公司是如何以設計思維經營,並以設計前輩的視角看得更深、更遠,達到最佳的學習成效!

2. The Futur

圖片來源:The Futur

圖片來源:The Futur

The Futur 針對設計師和創作者,提供一系列從 UX 設計、品牌設計到商業設計的實用節目,探討關於設計的各種未來性與可能性,帶領觀眾跳脫框架地跨領域思考,甚至還提供豐富的設計資源,而且,其專業又有趣的教學方式,也使其深受用戶體驗設計師的歡迎!

3. Jesse Showalter

圖片來源:Jesse Showalter

圖片來源:Jesse Showalter

如果你是 UI/UX 設計師、網頁設計師或前端開發人員,這個頻道就非常推薦給你。

Jesse Showalter 是一個以「數位設計」和「網頁開發」為主要領域的頻道,分享實用的工具、技術和實際的專案經驗,其主題內容包含平面設計、UI/UX 設計、網頁設計,以及一系列的 Adobe 軟體教學,幫助創作者設計出更優質的創作!

4. NNgroup

圖片來源:NNgroup

圖片來源:NNgroup

NNgroup,全名為 Nielsen Norman Group,是設計師的優質線上學習資源之一,對初學者和已有經驗的設計師來說都非常適合。目前擁有超過 500 隻影片,內容主要來自專家的實質建議與經驗分享,包括用戶體驗(UX) 研究、培訓計畫和訪談諮詢等,讓你輕鬆學 UI/UX!

5. UX Salon

圖片來源:UX Salon

圖片來源:UX Salon

無論你是 UX 設計的新手或專家,這個頻道都對你有幫助!

UX Salon 致力於聚集全球各地專業 UX 設計師的心聲,透過每集採訪不同的設計師,讓你能快速了解許多設計細節、技巧,以及未來趨勢,所有的訪談精華都收錄在「UX on Coffee」的播放列表,一起來看看吧!

6. UX Mastery

圖片來源:UX Mastery

圖片來源:UX Mastery

UX Mastery 是專門提供給初學者學習的 UX YouTube 頻道之一,有別於以往的教學課程,他們是用手繪插圖的方式,來教大家 UX 的實用技巧。 可惜的是,這個頻道已經不再更新,但高品質的內容還是值得推薦,一起來將這些厲害的 UX 技能應用在你的設計創作上吧!

7. Maex

圖片來源:Maex

圖片來源:Maex

這個頻道是由個人設計師 Maex 所經營,特別適合初學者或想學習新技巧的人。擁有 300 多個 UI/UX 教學影片,包括 Sketch、Adobe XD、InVision 等熱門設計工具,也有比較偏談話性質的設計經驗分享,是 UI/UX 新手不容錯過的頻道之一哦!

8. AJ & SMART

 圖片來源:AJ&Smart

圖片來源:AJ&Smart

AJ&Smart 是一家位於德國柏林的「產品設計與創新」的工作室,主要是在幫助公司以最小的預算更快地製作出更優質的產品。在他的每週頻道中,你可以學到「何謂 Design Sprint」、「如何做出好的設計策略」,以及設計相關書籍的講評,幫你建立一套完整的設計思維,進而成為更加優秀的創作者!


想進一步提升競爭力?讓 Eagle 來幫你!

除了以上的 UI/UX 學習資源,使用這款強大的生產力工具 — Eagle,也能幫你大幅提升設計力!

無論是圖片、音樂、影片,或文字檔等,都可以透過加入標籤評分筆記篩選器等功能來幫你輕鬆管理,再也不怕在茫茫大海中撈不到你想要的素材,讓你的創作事半功倍!


除此之外,Eagle 部落格更提供你好用的設計資源、資訊懶人包,讓你成為更好的設計專業工作者! 如果你還是覺得缺乏靈感或創作動力,歡迎到 Eagle 設計資源社區走走,這裡有著數以萬計的設計師分享好用工具與靈感網站,Eagle 就是要幫助你在設計之路上更省力!