想自学 UI/UX?48 个新手必备的在线资源,带你有效学习!
想自学 UI/UX,但不知道该从何开始?
你的设计小助手 Eagle 将在本文中一次解决你的所有疑惑!我们将依序为你介绍 UI/UX 的定义及差异,并为初学者精选出 48 个国内外的优质文章、设计博客、博客及 B 站频道,让你在学习路上更省力!
什么是 UI/UX?
图像来源:Pixels
用户界面(UI):
UI 的全名为 User Interface,指的是用户界面,而 UI 设计师的主要工作,就是负责处理各种网页和应用进程界面上的功能,包括网站中的颜色、字型、字体大小、配置安排,以及使用便利性及互动效面等,都是由 UI 设计师一手包办!因此,UI 设计师必须确保产品界面能对用户产生足够的吸引力,并且与品牌概念、产品定位相符, 还得确认在视觉上能清楚传达 UX 设计师所展示的路径,进一步宣传与推广产品。
用户体验(UX):
与 UI 概念相似的 UX 指的则是用户体验,全名为 User Experience。UX 设计师需要依据用户的习惯,设计出流畅、直观、符合逻辑的网页使用流程,像是内容出现的顺序、按钮的摆放位置等。此外,还必须通过用户实测后的意见反馈,不断地修正与优化,有效改善流程,以创造出最佳的用户体验!
如何区分 UI 与 UX?
图像来源:Pixabay
更进一步来说,UI 设计师主要是专注于「产品界面的呈现」,也就是使用时的外在视觉效果,而 UX 设计师则更注重「用户使用产品或服务的过程」,也就是你在使用时的内在感受,不过最终,两者还是必须相辅相成,共同设计出更好的使用路径,让用户在体验时更加轻松便利。
接下来,Eagle 团队还为你整理了众多高品质 UI/UX学习资源,帮助你厘清想从事的领域,并时刻掌握最新的设计趋势及技巧,连国外第一手资料也一次打包给你,让你能更快速上手 UI/UX!
一起来看看吧!
延伸阅读:
必读!13 篇给 UI/UX 新手的精选文章
图像来源: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、品牌等设计领域,字体设计都是不可缺少的重要元素之一。
看完这篇文章后,创建一套字体将不再是一个复杂的过程,从字体的基本知识学起、到如何设计网页字体,以及该注意哪些细节,进而让你的界面设计变得更加吸睛、动人!
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 新手们不容错过的学习资源!
3. 学 UI 网
图像来源:学 UI 网
学 UI 网是一个中国的高质量 UI 学习平台,常会在在线发布优质的设计教程和分享设计经验,并从学习方法、配色教程、流行趋势,到面试技巧,给你最完整、丰富的学习资源,吸引大批 UI 初学者的青睐和喜爱。
想快速收藏 UI 灵感?用 Eagle 的「整页截图」一键保存网页,让你快速上手 UI!
【英文专区】
1. Medium
图像来源:Medium
Medium 是由 Twitter 的共同创始人 Evan Williams 所创办的在线发布平台,你可以在这分享超过 280 个字符的想法和故事,而且,观看者也不再仅限于你的朋友或追踪者,为你大幅增加文章曝光度!
平台上,你可以看到各种皮肤类型的文章,而 UI/UX 就是其中的热门的话题之一,举凡基本概念、技巧、最新趋势、职涯经验分享,甚至是进阶的设计技巧皆应有尽有,接下来,一起来看看有哪些值得追踪的 UI/UX 设计作者吧!
追踪推荐:
- UX Collective:搜集有关 UX 设计、视觉设计、产品设计的故事及议题
- Collect UI:每天从 Dribbble 提供最新的设计资源懒人包,成为设计师寻找灵感的来源之一
2. Smashing Magazine
图像来源: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 Patterns
UI-Patterns 收集了许多在网页设计时,可能出现的「用户界面」( User Interface ),除了依照皮肤分门别类以外,还有提供丰富的 UI 的图标、使用方式、解决的问题与多篇相关的文章,帮你有效解决学习 UI 所遇到的疑难杂症!
4. UsabilityGeek
图像来源:UsabilityGeek
Usability Geek 是一个非常有深度的设计博客,在多种设计领域中提供实用的建议与见解,像是 UI/UX 设计、电子商务、HCI 等。更好康的是,同样是由 Usability Geek 所运营的 The Interaction Design Foundation,提供丰富且高质量的 UX 设计在线课程,并授予你完课证书,如此一来,不仅可以丰富你的履历,还能大幅提升竞争力!
5. Inside Design
图像来源:Inside Design
InVision 是全球大型的视觉协作平台,曾与多家知名企业合作过,而 Inside Design 则是他们的专属设计博客,涵盖的皮肤包括设计资源、时事、技巧、灵感,以及 UI&UX 等。
想了解最新的设计趋势、工具或社区活动吗? Inside Design 是你的最佳设计伙伴!
6. 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 提供一系列的设计资源,帮你激发设计灵感,除此之外,也有许多业界优秀的 UX 专家会在此分享见解,主要探讨的内容包括重大议题、实际案例、未来趋势等。不论你是新手小白还是 在 UX 各方面都精通的专业人士,都非常推荐给你!
8. UX Movement
图像来源:UX Movement
UX Movement 是以 UX 设计为皮肤的博客,通过分享技巧、技术和实际案例应用,教你如何掌握软件、网页和行动设备界面的用户体验。更方便的是,你可以利用网站上的快捷键,快速挑选喜欢或感兴趣的皮肤。
9. UXPin
图像来源:UXPin
UXPin 是一个全端开发的 UX 设计平台,其博客提供丰富的优质文章,拥有超过 20 种皮肤类别,包括 UI/UX、行动设备、桌上型、网页设计和案例研究等,是初学者的最佳学习资源之一。此外,它也有提供免费的电子书,以及举办在线研讨会,成为你学习路上的垫脚石!
10. UXstudio
图像来源:UXstudio
Uxstudio 是一家设计与研究公司,其博客以 UX 为核心,分享一系列相关的设计文章,像是行动设备、网页、产品管理和 UX 案例研究,都是其热门皮肤之一。 除此之外,他们也会在 UX 设计交流平台分享有用的设计技巧与新知,以及举办专业的 UX 课程,帮助你产出更强大、优质的 UX 设计创作!
11. UX Magazine
图像来源:UX Magazine
UX Magazine 是一个专门探讨如何优化用户体验的非营利平台,每个月都会从各大博客和媒体中,挑选出最优质的设计文章,推出一本在线设计杂志,内容涵盖 UX 设计、策略、技巧和新知等多项实用皮肤,让你快速掌握 UX 设计的入门诀窍!
12. XD Ideas
图像来源:XD ideas
XD Ideas 是 Adobe 旗下的 UI/UX 设计博客,你可以从中得到基础知识、设计流程、最新趋势,以及资深用户体验设计师的独家见解,除了丰富的文章,如果你想学习如何使用 Adobe XD,这里也为你提供最详细的教学指南,让你轻松学习!
15 个必听的 UI/UX Podcasts
【中文专区】
1. UX Coffee 设计咖
图像来源:UX Coffee 设计咖
UX Coffee 设计咖是由 4 位在硅谷工作的中国设计师,所经营的华语 UX 设计节目,经营至今已制作快 100 集节目,每集都会邀请业界大咖的设计师来分享他们的设计思路、求职经历、管理经验等,可以帮助你更熟悉中国的设计产业与国际的设计现况!
2. 设想电台
图像来源:设想电台
由两位在上海担任设计师的 Alex、Ping、还有一位从魔术师改行的设计师 Patrick 所创立,秉持着轻松、愉快的心情来主持每集的设计谈话节目,还会不定期邀请不同背景的设计师,聊聊对于设计的观点和想法,一起来听他们讲故事吧!
3. Anyway.FM 设计杂谈
图像来源:Anyway.FM 设计杂谈
Anyway.FM 设计杂谈是由 UI 设计师 JJ Ying 和 Leon Gao 所主持的设计类博客,希望能通过声音抒发自己的热情,与你分享各种不同的设计见解。
目前频道上有对谈、访谈、评测等类型的节目,谈论的内容从移动设备设计、软件设计,到网页设计,并衍生出了安妮薇时报 Anyway.News、术语小词典 Anyway.ABC、浏览器插件 Anyway.Tab 等周边服务,为你提供最完整的学习资源!
4. 字谈字畅
图像来源:字谈字畅
「字谈字畅」是全球首家用华语制作的字体排印皮肤播客,节目内容专注于字体、排印和其他文本设计等相关的内容,涵盖历史知识和新闻轶事。此外,还会不定期邀请嘉宾及友台节目,带给你更多元化的皮肤探讨与经验分享,非常推荐给想学习字体设计或相关印刷技术的人!
学字体设计必备!从设计草稿、素材,到最终成品,Eagle 帮你一键管理!
图像来源:Eagle
【英文专区】
1. UI Breakfast
图像来源:UI Breakfast
UI Breakfast 拥有大量且高品质的 Podcast 内容,通过邀请业界优秀的设计师,以皮肤式的询问方式一问一答,让你每周只要利用不到 45 分钟的时间,就能吸收最精华的设计知识,像是定价、文案、插图、技巧教学,以及书籍与工具推荐等多样化的内容,相信你一定从中获益良多!
2. 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 将是你的第一首选!
每集以 30 分钟的时间,采访一位经验老道的知名设计师、探讨相关设计文章,并给予建议或来自专家的见解,为你提供最丰富的 UI/UX 学习资源,非常适合让新手设计师快速累积实力。
4. User Defenders
图像来源:User Defenders
User Defenders 是由 Jason Ogle 所创办的知名 UX Podcast,以 UX 设计和个人成长为核心内容,策划了从 UI/UX、网页设计、产品设计到设计思维等丰富皮肤。在每集中,主持人跟嘉宾之间所进行的娱乐性、教育性的深度谈话,总让人不禁想一集接着一集的听下去。
不过,每集的内容时间较长,适合空闲时间较多时收听,或者你也可以利用 User Defenders 所整理的关键字时间参数,快速跳到想听的特定片段。
5. 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 是一个有趣且富有洞察力的 Podcast,主持人会分享他设计生涯中的有趣故事,并谈论如何打造出色的产品界面设计,每集都可以从中得到实用的建议与回馈,使你成为优秀的用户体验设计师!
7. Design Details
图像来源:Design Details
如果你喜欢听设计师闲聊或开玩笑,那你一定会喜欢 Design details!
Design details 是由 Marshall Bock 和 Brian Lovin 所主持的每周 Podcast,主持人会邀请来自「用户体验」、「视觉设计」、「产品设计」和「游戏设计」等领域的顶尖设计师,进行有趣的访谈及对话,是相对轻松、休闲的教育性节目!
8. The Big Web Show
图像来源:The Big Web Show
Big Web Show 是 Jeffrey Zeldman 所主持的谈话性 Podcast,经营至今,已采访过数位优秀的网页设计师,每次访谈的皮肤包括网页发布、艺术指导、内容策略、布局、技术等多种类型。
最后想推荐的是,节目常会邀请知名的顶尖设计师,进行长达一小时的问答环节(Q&A),听完后一定让你收获满满!
9. Shop Talk
图像来源:Shop Talk
Shop Talk 的每一集中,主持人 Chris Coyier 和 Dave Rupert 都会邀请一位嘉宾,来谈论前端网页设计、开发和 UI/UX 设计,帮你快速掌握业界的时事,并教你如何应对最新趋势。
另外,如果你有任何设计相关的疑问或困难,Shop Talk 也提供发问的管道,并在节目中选出几个常见问题来帮大家解答。
10. Wireframe
图像来源:Wireframe
Wireframe 是由 Adobe 和 Gimlet Creative 所经营的 UX Podcast,每集以 20 分钟左右的时间,分享许多交互设计背后的故事,此外,整体也以偏重概念性的方式去介绍,因此,无论你是 UI/UX、平面设计师,还是任何对设计感兴趣的人,这个 Podcast 都非常适合让你快速激发设计灵感和洞察力!
11. 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 教学频道,每个视频都只有 1 分钟左右,为你快速解说实用的设计技巧与新知,从设计基础、思维,到效率灵感,一次传授给你最扎实的 UI 基本功!
3. 恒恒战神
图像来源:恒恒战神
想用 Figma 打造绝佳的 UI/UX 吗?由「恒恒战神」带你轻松从零学起!
恒恒战神是一名美国湾区的设计师,频道上除了有许多 Figma 的教程与实际应用外,还分享了制作设计作品集的技巧及自身的职涯经验,是一个对初学者非常实用的 B 站频道!
4. 格格学姐Redesign
图像来源:格格学姊Redesign
格格学姊是由一名资深的 UI 设计师所创建的频道,分享一系列 UI/UX 的教学视频,包含技巧、思维,甚至最新的设计趋势,让你能快速掌握最完整的设计知识!
5. 设计自修室
图像来源:设计自修室
「设计自修室」以设计教学为主,目前累积提供了超过 20 部教程,虽然数量还不多,但其中像是「UI 设计:从零基础入门到精通」、「UI 高级教程:Sketch」等视频,都拥有近 2 万次的浏览量,可见其内容具有一定的水准,想学习入门知识的朋友们,欢迎去浏览看看!
想进一步提升竞争力?让 Eagle 来帮你!
除了以上的 UI/UX 学习资源,使用这款强大的生产力工具 — Eagle,也能帮你大幅提升设计力!
无论是图像、音频、视频,或文本档等,都可以通过加入标签、评分、笔记、筛选器等功能,让 Eagle 来帮你轻松管理,再也不怕在茫茫大海中捞不到你想要的,让你的创作事半功倍!
Eagle 不只是素材管理神器,Eagle 博客更提供你好用的设计资源、信息懒人包,让你成为更好的设计专业工作者! 最后,如果你觉得缺乏灵感或创作动力,请到 Eagle 设计资源社区走走,这里有着数千万计的设计师分享好用工具、灵感网站,Eagle 就是要帮助你在设计之路上更省力!