想自学 UI/UX?48 个新手必备的在线资源,带你有效学习!

Nancy Huang・2022-03-16

想自学 UI/UX,但不知道该从何开始?

你的设计小助手 Eagle 将在本文中一次解决你的所有疑惑!我们将依序为你介绍 UI/UX 的定义及差异,并为初学者精选出 48 个国内外的优质文章、设计博客、博客及 B 站频道,让你在学习路上更省力!


什么是 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!

一起来看看吧!

延伸阅读:

UI 设计师必读!19 本 UI 书籍推荐清单

【在线课推荐】 23个你不可错过,含金量超高的 UI/UX 学习课程!


必读!13 篇给 UI/UX 新手的精选文章

图像来源:Freepik

图像来源:Freepik

【中文专区】

1. UI / UX设计师自学成才超完全路径

想踏入 UI/UX 领域的人日益增加,因此,设计师 Andy Chan 为这些新手们,创建了一套专属的初学路线图,从最基本的定义与理论、知识技巧,到实际应用,帮助你快速上手!

2. 如何培养产品思维和设计思维?

想制作出好的 UI/UX 设计?培养好的产品及设计思维,才是致胜关键!

作者马力认为学习设计的三把剑为「器、术、道」,分别为设计工具、流程与方法、产品及设计思维,带你了解如何发现、定义、分析和解决问题,并给你最有效率的学习模式,让你设计出更符合用户需求的作品!

3. 科普篇:UI、UX、GUI新手指南

没想到除了 UI、UX 外,还有 GUI?

作者将详细地带你了解这三者的工作内容及差异,,让你一探究竟这个的全新的领域!

4. UI / UX黑话入门指南

这篇是由视觉设计师「一只卷耳」将《UI/UX design guide with terms, explanations, tips and trends》进行翻译及改写的入门指南,以浅显易懂的方式让你快速了解 UI/UX 设计,包括基本术语、定义与原则,以及详细的设计步骤,非常适合新手阅读!

5. UX/UI 必懂术语

身为一名交互设计的初学者,是否有因听不懂专业术语而一脸茫然的经历?

本篇由 WELLDESIGN 整理出 13 个常见的专业用语,并将内容分为「界面设计」及「网页开发」两大类,其中包括 Persona、Prototype、SDK 等,一起来认识它们吧!

6. UI 新手布局入门!最容易上手的 6 个布局套路

作为 UI 设计师,该如何让界面有规律地去展示信息内容呢?

「米果电商」在本篇分享了 6 个实用的布局原则,并以实际的设备界面图,手把手教你打造出最吸睛的布局,是 UI 新手不容错过的重要信息!


【英文专区】

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

通过完整的教学指南,让你轻松学 UI 设计!

一篇文章囊括所有自学 UI 所需的知识及资源,包括 UI 的基本概念、需具备的技能和工具,甚至还大方分享了丰富的在线学习资源,相信看完的你一定会感到获益良多。

2. Useful UX Guidelines, Tools and Resources

在踏入 UX 设计领域之前,千万别错过这篇 UX 入门大全。

除了集结众多实用的设计工具、技巧和资源,作者还贴心地释出拟定 UX 策略的成功技巧,并针对用户研究和 UX 著作做进一步的研究与探讨,帮助你高效掌握用户体验!

3. Typography on User Interfaces

无论是平面、视觉、UI、品牌等设计领域,字体设计都是不可缺少的重要元素之一。

看完这篇文章后,创建一套字体将不再是一个复杂的过程,从字体的基本知识学起、到如何设计网页字体,以及该注意哪些细节,进而让你的界面设计变得更加吸睛、动人!

延伸阅读:爱用推荐!39 个设计师必收藏的中文、英文免费字体资源网站

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

一个好的 UI 设计能让每个用户都感到舒适,并顺利到达他们想要的结果。

由知名的 99design 团队一次带你了解何谓用户界面设计、什么是好的 UI 设计以及 4 条必知的入门规则,帮助你产出更优质的 UI 设计!

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

UX 无所不在,然而,你知道有哪些生活中常见的 UX 应用吗?

其概念除了可以用于行动设备、计算机软件等设备,更处处藏在我们的生活细节当中。作者 Amy Harvey 利用简单且详细的方式,探讨「用户体验」的概念与应用范围,证实了 UX 不可忽略的重要性。

6. The Beginner’s Manifesto

「Manifesto」即宣言,是一篇给初学者的信心喊话。

根据研究显示,有多达 80%的 UI/UX 初学者,都曾在自学期间感到迷茫、缺乏信心。这时要记得,每个人都是从基础开始的,不要怀疑自己或你所具备的能力,相信自己!

7. The Importance of Designing for Readability

无论是任何设计创作,「易读性」都是重要的议题之一,而在 UI/UX 中又更为重要。

通过阅读本篇文章,你可以更了解什么是易读性、4 个提升作品易读性的小技巧与工具,以及超过2,000,000 个在线设计资源,一起来学习吧!


如何有效整理设计笔记?用 Eagle 标签、评分、智能分类,帮你精准整理、效率学习!



15 个实用的 UI/UX 设计博客

【中文专区】

1. 优设网

圖片來源:優設網

图像来源:优设网


优设网是国内知名的设计师学习平台,除了拥有海量的 UI/UX 设计和产品设计相关的皮肤文章之外,还包含了各种设计风格的作品展示,及 PS、AI、布局等多元的设计教程,是设计师们在互联网中学习成长的必备优秀站点!

2. UI 中国

圖片來源:UI 中國

图像来源:UI 中国


UI 中国是著名的设计知识分享互动平台,包办所有你在学习 UI 时所需的设计资源,像是教程、软件工具、书籍、竞赛、免费素材等通通都有。另外,平台上也有提供类似博客的专区,为你集结众多的设计教学文章,是 UI 新手们不容错过的学习资源!

3. 学 UI 网

圖片來源:學 UI 網

图像来源:学 UI 网


学 UI 网是一个中国的高质量 UI 学习平台,常会在在线发布优质的设计教程和分享设计经验,并从学习方法、配色教程、流行趋势,到面试技巧,给你最完整、丰富的学习资源,吸引大批 UI 初学者的青睐和喜爱。


想快速收藏 UI 灵感?用 Eagle 的「整页截图」一键保存网页,让你快速上手 UI!



【英文专区】

1. Medium

图像来源:Medium

图像来源:Medium

Medium 是由 Twitter 的共同创始人 Evan Williams 所创办的在线发布平台,你可以在这分享超过 280 个字符的想法和故事,而且,观看者也不再仅限于你的朋友或追踪者,为你大幅增加文章曝光度!

平台上,你可以看到各种皮肤类型的文章,而 UI/UX 就是其中的热门的话题之一,举凡基本概念、技巧、最新趋势、职涯经验分享,甚至是进阶的设计技巧皆应有尽有,接下来,一起来看看有哪些值得追踪的 UI/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 所遇到的疑难杂症!

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,这里也为你提供最详细的教学指南,让你轻松学习!


15 个必听的 UI/UX Podcasts

【中文专区】

1. UX Coffee 设计咖

圖片來源:UX Coffee 設計咖

图像来源:UX Coffee 设计咖


UX Coffee 设计咖是由 4 位在硅谷工作的中国设计师,所经营的华语 UX 设计节目,经营至今已制作快 100 集节目,每集都会邀请业界大咖的设计师来分享他们的设计思路、求职经历、管理经验等,可以帮助你更熟悉中国的设计产业与国际的设计现况!

2. 设想电台

圖片來源:設想電台

图像来源:设想电台


由两位在上海担任设计师的 Alex、Ping、还有一位从魔术师改行的设计师 Patrick 所创立,秉持着轻松、愉快的心情来主持每集的设计谈话节目,还会不定期邀请不同背景的设计师,聊聊对于设计的观点和想法,一起来听他们讲故事吧!

3. Anyway.FM 设计杂谈

圖片來源:Anyway.FM 設計雜談

图像来源:Anyway.FM 设计杂谈


Anyway.FM 设计杂谈是由 UI 设计师 JJ Ying 和 Leon Gao 所主持的设计类博客,希望能通过声音抒发自己的热情,与你分享各种不同的设计见解。

目前频道上有对谈、访谈、评测等类型的节目,谈论的内容从移动设备设计、软件设计,到网页设计,并衍生出了安妮薇时报 Anyway.News、术语小词典 Anyway.ABC、浏览器插件 Anyway.Tab 等周边服务,为你提供最完整的学习资源!

4. 字谈字畅

圖片來源:字談字暢

图像来源:字谈字畅


「字谈字畅」是全球首家用华语制作的字体排印皮肤播客,节目内容专注于字体、排印和其他文本设计等相关的内容,涵盖历史知识和新闻轶事。此外,还会不定期邀请嘉宾及友台节目,带给你更多元化的皮肤探讨与经验分享,非常推荐给想学习字体设计或相关印刷技术的人!


学字体设计必备!从设计草稿、素材,到最终成品,Eagle 帮你一键管理!

图像来源:Eagle

图像来源:Eagle


【英文专区】

1. UI Breakfast

图像来源:UI Breakfast

图像来源:UI Breakfast

UI Breakfast 拥有大量且高品质的 Podcast 内容,通过邀请业界优秀的设计师,以皮肤式的询问方式一问一答,让你每周只要利用不到 45 分钟的时间,就能吸收最精华的设计知识,像是定价、文案、插图、技巧教学,以及书籍与工具推荐等多样化的内容,相信你一定从中获益良多!

2. The hacking UI

图像来源:The hacking UI

图像来源:The hacking UI

The Hacking UI 是由设计师 David Tintner 和开发人员 Sagi Shrieber 共同主持的精彩 Podcast。在平台上,你不仅可以收听两位主持人针对 UI/UX 设计、易用性、研发及开发等皮肤的有趣谈话,还提供丰富且多样化的实用设计文章,包括交互设计、灵感发想、进阶技巧,及深度议题探讨等,广受 UI/UX 设计师们的喜爱!

3. Ramblings of a Designer

图像来源:Ramblings of a Designer

图像来源:Ramblings of a Designer

想获得最新的图像设计新闻,Ramblings of a Designer 将是你的第一首选!

每集以 30 分钟的时间,采访一位经验老道的知名设计师、探讨相关设计文章,并给予建议或来自专家的见解,为你提供最丰富的 UI/UX 学习资源,非常适合让新手设计师快速累积实力。

4. User Defenders

图像来源:User Defenders

图像来源:User Defenders

User Defenders 是由 Jason Ogle 所创办的知名 UX Podcast,以 UX 设计和个人成长为核心内容,策划了从 UI/UX、网页设计、产品设计到设计思维等丰富皮肤。在每集中,主持人跟嘉宾之间所进行的娱乐性、教育性的深度谈话,总让人不禁想一集接着一集的听下去。

不过,每集的内容时间较长,适合空闲时间较多时收听,或者你也可以利用 User Defenders 所整理的关键字时间参数,快速跳到想听的特定片段。

5. UX Podcast

图像来源:UX Podcast

图像来源:UX Podcast

UX Podcast 是由 James Royal-Lawson 和 Per Axbom 所主持的双周节目,致力于通过谈话突破学习上的孤岛,并邀请从事 UX 的设计师分享自身经验,因此,其讨论的皮肤不仅限于 UX 的内容,还提供商业、技术,以及相关设计议题的探讨。每集的时间介于 30~40 分钟,且内容可大致被分为以下 4 类:链接节目、嘉宾节目、皮肤节目和活动节目,是非常具多元性的 Podcast 之一。

6. What is Wrong with UX

图像来源:What is Wrong with UX

图像来源:What is Wrong with UX

What is Wrong with UX 是一个有趣且富有洞察力的 Podcast,主持人会分享他设计生涯中的有趣故事,并谈论如何打造出色的产品界面设计,每集都可以从中得到实用的建议与回馈,使你成为优秀的用户体验设计师!

7. Design Details

图像来源:Design Details

图像来源:Design Details

如果你喜欢听设计师闲聊或开玩笑,那你一定会喜欢 Design details!

Design details 是由 Marshall Bock 和 Brian Lovin 所主持的每周 Podcast,主持人会邀请来自「用户体验」、「视觉设计」、「产品设计」和「游戏设计」等领域的顶尖设计师,进行有趣的访谈及对话,是相对轻松、休闲的教育性节目!

8. The Big Web Show

图像来源:The Big Web Show

图像来源:The Big Web Show

Big Web Show 是 Jeffrey Zeldman 所主持的谈话性 Podcast,经营至今,已采访过数位优秀的网页设计师,每次访谈的皮肤包括网页发布、艺术指导、内容策略、布局、技术等多种类型。

最后想推荐的是,节目常会邀请知名的顶尖设计师,进行长达一小时的问答环节(Q&A),听完后一定让你收获满满!

9. Shop Talk

图像来源:Shop Talk

图像来源:Shop Talk

Shop Talk 的每一集中,主持人 Chris Coyier 和 Dave Rupert 都会邀请一位嘉宾,来谈论前端网页设计、开发和 UI/UX 设计,帮你快速掌握业界的时事,并教你如何应对最新趋势。

另外,如果你有任何设计相关的疑问或困难,Shop Talk 也提供发问的管道,并在节目中选出几个常见问题来帮大家解答。

10. Wireframe

图像来源:Wireframe

图像来源:Wireframe

Wireframe 是由 Adobe 和 Gimlet Creative 所经营的 UX Podcast,每集以 20 分钟左右的时间,分享许多交互设计背后的故事,此外,整体也以偏重概念性的方式去介绍,因此,无论你是 UI/UX、平面设计师,还是任何对设计感兴趣的人,这个 Podcast 都非常适合让你快速激发设计灵感和洞察力!

11. UXpod

图像来源:UXpod

图像来源:UXpod

UX pod 是经营最久的 UX Podcast 之一,由澳洲的 UX 顾问 Gerry Gaffney 于 2006 年创立。节目中的内容,累积至今已达近 30 个皮肤,包括 Global UX、User research、UX writing,以及更多的设计相关领域,它的目标是希望为从业者或其他对 UX 感兴趣的人,提供一个集成性的讨论及学习平台。


5 个 UI/UX 新手必追踪的 B 站频道

1. 设计师的睡前毒物

圖片來源:設計師的睡前毒物

图像来源:设计师的睡前毒物


「设计师的睡前毒物」是由一位资深的 UI 设计师所经营,频道内容包括设计技巧、思维,及实际应用外,还每周为你精选出最高质量的 UI/UX 动效设计灵感,以及最新的 Adobe XD 设计工具教程,让你学习无烦恼!

2. 蓝胖丨新像素 UI 设计

圖片來源:藍胖|新像素 UI 設計

图像来源:蓝胖|新像素 UI 设计


由新像素团队的陈实老师所经营的 UI 教学频道,每个视频都只有 1 分钟左右,为你快速解说实用的设计技巧与新知,从设计基础、思维,到效率灵感,一次传授给你最扎实的 UI 基本功!

3. 恒恒战神

圖片來源:恒恒戰神

图像来源:恒恒战神


想用 Figma 打造绝佳的 UI/UX 吗?由「恒恒战神」带你轻松从零学起!

恒恒战神是一名美国湾区的设计师,频道上除了有许多 Figma 的教程与实际应用外,还分享了制作设计作品集的技巧及自身的职涯经验,是一个对初学者非常实用的 B 站频道!

4. 格格学姐Redesign

圖片來源:格格學姊Redesign

图像来源:格格学姊Redesign


格格学姊是由一名资深的 UI 设计师所创建的频道,分享一系列 UI/UX 的教学视频,包含技巧、思维,甚至最新的设计趋势,让你能快速掌握最完整的设计知识!

5. 设计自修室

圖片來源:設計自修室

图像来源:设计自修室


「设计自修室」以设计教学为主,目前累积提供了超过 20 部教程,虽然数量还不多,但其中像是「UI 设计:从零基础入门到精通」、「UI 高级教程:Sketch」等视频,都拥有近 2 万次的浏览量,可见其内容具有一定的水准,想学习入门知识的朋友们,欢迎去浏览看看!


想进一步提升竞争力?让 Eagle 来帮你!

除了以上的 UI/UX 学习资源,使用这款强大的生产力工具 — Eagle,也能帮你大幅提升设计力!

无论是图像、音频、视频,或文本档等,都可以通过加入标签评分笔记筛选器等功能,让 Eagle 来帮你轻松管理,再也不怕在茫茫大海中捞不到你想要的,让你的创作事半功倍!


Eagle 不只是素材管理神器,Eagle 博客更提供你好用的设计资源、信息懒人包,让你成为更好的设计专业工作者! 最后,如果你觉得缺乏灵感或创作动力,请到 Eagle 设计资源社区走走,这里有着数千万计的设计师分享好用工具、灵感网站,Eagle 就是要帮助你在设计之路上更省力!