UI UX 設計入門

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

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


什麼是 UI/UX?

UI UX 設計入門

圖片來源:Pixels

使用者介面(UI):

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

使用者體驗(UX):

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


如何區分 UI 與 UX?

UI UX 設計入門

圖片來源:Pixabay

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

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

一起來看看吧!

延伸閱讀:

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

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


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

UI UX 設計入門

圖片來源: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 的起源、涵蓋範圍,與實際應用。

  • 給 UX 學習者的入門指南(上) — UX 的起源
  • 給 UX 學習者的入門指南(中) — 了解 UX 與 UCD
  • 給 UX 學習者的入門指南(下) — 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

UI UX 設計入門

圖片來源: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

UI UX 設計入門

圖片來源:Smashing Magazine

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

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

UX 初學者的文章推薦:

  • A Comprehensive Guide To User Experience Design:由 UX 顧問 Christopher 所撰寫的 UX 入門指南。
  • 13 Tenets of User Experience:一位 UX 專家,分享他在過去職業生涯中,所領悟到的 13 項重要原則。

3. UI Patterns

UI UX 設計入門

圖片來源:UI Patterns

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


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


4. UsabilityGeek

UI UX 設計入門

圖片來源:UsabilityGeek

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

5. Inside Design

UI UX 設計入門

圖片來源:Inside Design

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

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

6. Nielsen Norman Group

UI UX 設計入門

圖片來源:Nielsen Norman Group

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

精選文章推薦:

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

7. UXmatters

UI UX 設計入門

圖片來源:UXmatters

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

8. UX Movement

UI UX 設計入門

圖片來源:UX Movement

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

9. UXPin

UI UX 設計入門

圖片來源:UXPin

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

10. UXstudio

UI UX 設計入門

圖片來源:UXstudio

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

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

11. UX Magazine

UI UX 設計入門

圖片來源:UX Magazine

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

12. XD Ideas

UI UX 設計入門

圖片來源:XD ideas

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


12 個必聽的 UI/UX Podcasts

【中文專區】

1. 設計遊牧

UI UX 設計入門

圖片來源:設計遊牧

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


【英文專區】

2. UI Breakfast

UI UX 設計入門

圖片來源:UI Breakfast

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

3. The hacking UI

UI UX 設計入門

圖片來源:The hacking UI

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

4. Ramblings of a Designer

UI UX 設計入門

圖片來源:Ramblings of a Designer

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

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

5. User Defenders

UI UX 設計入門

圖片來源:User Defenders

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

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

6. UX Podcast

UI UX 設計入門

圖片來源:UX Podcast

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

7. What is Wrong with UX

UI UX 設計入門

圖片來源:What is Wrong with UX

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

8. Design Details

UI UX 設計入門

圖片來源:Design Details

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

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

9. The Big Web Show

UI UX 設計入門

圖片來源:The Big Web Show

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

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

10. Shop Talk

UI UX 設計入門

圖片來源:Shop Talk

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

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

11. Wireframe

UI UX 設計入門

圖片來源:Wireframe

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

12. UXpod

UI UX 設計入門

圖片來源:UXpod

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


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

1. High Resolution

UI UX 設計入門

圖片來源:High Resolution

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

2. The Futur

UI UX 設計入門

圖片來源:The Futur

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

3. Jesse Showalter

UI UX 設計入門

圖片來源:Jesse Showalter

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

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

4. NNgroup

UI UX 設計入門

圖片來源:NNgroup

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

5. UX Salon

UI UX 設計入門

圖片來源:UX Salon

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

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

6. UX Mastery

UI UX 設計入門

圖片來源:UX Mastery

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

7. Maex

UI UX 設計入門

圖片來源:Maex

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

8. AJ & SMART

UI UX 設計入門

圖片來源:AJ&Smart

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


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

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

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

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