UI设计自学视频教程该怎么选？

自学UI设计是一条非常可行的道路,关键在于找到系统、优质的学习资源，并辅以大量的实践。

下面我为你整理了一份非常全面的UI设计自学视频教程指南,从学习路径、资源推荐、必备工具到学习建议，希望能帮你高效入门。

自学UI设计的完整学习路径

在看具体视频前,先明确你需要学什么，这样选择课程时才能有的放矢。

理论基础与审美培养（地基）

1. 设计基础理论：

   • 色彩理论：学习色彩搭配、色彩心理学、色轮、对比度等。
   • 版式设计：学习对齐、对比、重复、亲密性（CRAP原则）、栅格系统、字体层级等。
   • 设计心理学：了解用户如何感知和交互，让你的设计更懂用户。

2. UI设计规范：

   • 了解主流平台的设计规范,如 Google Material Design 和 Apple Human Interface Guidelines (HIG)，这是确保你的设计专业、可落地的关键。

3. 审美提升：

   
   • 多看多分析：养成逛优秀设计网站的习惯，如 Dribbble, Behance, Pinterest, Mobbin, Awwwards。
   • 拆解分析：看到好的设计，不要只收藏，要思考它为什么好？色彩、布局、动效是如何运用的？

软件技能学习（工具）

UI设计最主流的工具是 Figma，其次是 Sketch 和 Adobe XD。

• 强烈推荐从 Figma 开始：它免费、在线、协作功能强大，是目前行业的主流。
• ：
  • 界面操作：熟悉工具栏、图层、画板等。
  • 核心功能：钢笔工具、布尔运算、组件、自动布局、响应式设计、变体等。
  • 协作与交付：学习如何使用 Dev Mode 与开发者协作，如何切图、标注、交付设计稿。

项目实战（核心）

这是将知识转化为能力最重要的一步,不要只看不练！

1. 临摹：

   • 选择一个你喜欢的App界面（如微信、抖音、B站），1:1地完整复刻出来，这个过程能让你熟悉软件操作，并理解一个界面的构成。

2. 再设计：

   

   选择一个你觉得体验不好的App,分析其问题所在，然后提出你的改进方案，并用Figma重新设计，这能锻炼你的分析和解决问题的能力。

3. 原创项目：

   • 从0到1设计一个完整的App，这是最能体现你综合能力的作品。
   • 选题建议：天气App、番茄钟App、食谱App、读书笔记App等，功能简单，适合新手。
   • 完整流程：
     • 需求分析：这个App是给谁用的？解决什么问题？
     • 竞品分析：市面上有哪些同类产品？它们的优缺点是什么？
     • 用户画像：为你的典型用户画个像。
     • 信息架构：App有哪些页面？页面之间如何跳转？（画流程图）
     • 线框图：用最简单的方框画出每个页面的布局，不考虑视觉。
     • 视觉设计：确定色彩、字体、图标风格，进行高保真设计。
     • 交互原型：将页面连接起来，模拟用户操作流程。

作品集与求职（升华）

1. 整理作品集：

   • 挑选2-3个你最满意的项目，整理成作品集。
   • 展示重点：不要只放最终效果图，要展示你的设计思路，包括需求分析、竞品分析、线框图、设计稿和最终原型，让面试官看到你的思考过程。
   • 平台：使用 Figma, FigJam, 或专门的网站（如站酷、Behance）来展示。

2. 准备简历和面试：

   • 简历突出你的项目经验和技能。
   • 准备好阐述你作品集中的每一个项目。

推荐的免费/付费视频教程资源

国内资源 (B站是首选)

B站是自学者的天堂,有大量免费且优质的UP主。

1. 入门综合类 (适合零基础)

   • 【推荐】优设大课堂：UI/UX设计领域的权威，系统化的课程非常多，从基础理论到软件教学，再到项目实战，应有尽有，搜索“优设 UI设计”能找到很多系列课。
   • 【推荐】B站设计师小A：非常受欢迎的设计师，他的UI设计系统课程口碑很好，从零开始，循序渐进，非常适合新手。
   • 【推荐】G学姐很接地气，有很多实战项目和设计技巧分享，风格活泼，容易理解。

2. 软件技能类 (Figma为主)

   • Figma中国：官方账号，有官方的入门教程和技巧分享。
   • SilkSilk：Figma大神，有很多关于Figma高级功能（如组件、自动布局）的深度教程，非常硬核。
   • 直接在B站搜索 “Figma教程”，选择播放量高、评价好的视频跟着学即可。

3. 灵感与审美提升

   • 直接关注 Dribbble, Behance, Mobbin 等网站，多看多分析，比看任何教程都有效。

国外资源 (英文资源，质量极高)

如果你有一定的英语听力能力,强烈推荐学习国外的教程，他们的课程体系非常成熟。

1. 综合平台 (付费为主，但常有折扣)

   • Udemy：全球最大的在线课程平台之一。
     • 推荐课程："UI Design with Figma: From Beginner to Pro" by Joe Parys Academy，这是一门评价极高、内容全面的入门到进阶课程，涵盖了UI设计的所有方面。
   • Coursera：与顶尖大学合作。
     • 推荐课程："Google UX Design Certificate"，虽然是UX课程，但前半部分包含了大量UI设计的基础知识、Figma软件教学和项目实战，非常系统，完成还能获得谷歌认证。
   • Skillshare：订阅制，可以学习大量设计课程。
     • 推荐讲师：Mariana Teixeira，她的Figma和UI设计课程非常受欢迎，风格清晰易懂。

2. YouTube (免费宝藏)

   • Figma：官方频道，发布新功能教程和官方教程。
   • Mieke.com：频道主Mieke de Ketelaere是Figma的布道师，教程质量极高，尤其擅长组件和设计系统。
   • Jesse Showalter：有很多关于UI设计流程和Figma实战的教程。
   • Tutvid：除了Figma，还有很多Photoshop、Illustrator等Adobe软件的教程，帮你补充设计基础。

必备工具推荐

1. 设计软件：

   • Figma：首选！ 免费、在线、功能强大。
   • Sketch：Mac端老牌王者，插件生态丰富。
   • Adobe XD：与Adobe全家桶无缝衔接，适合用PS/AI的用户。

2. 辅助工具：

   • 灵感收集：Pinterest, Dribbble, Behance, Mobbin (看真实App界面)。
   • 原型与流程图：Figma (自带), FigJam (Figma团队出品，非常好用), ProcessOn (国内在线工具)。
   • 图标库：Iconfont (阿里巴巴矢量图标库), Flaticon, The Noun Project。
   • 图片素材：Pexels, Unsplash (免费可商用高清图)。

给自学者的重要建议

1. 坚持输出，不要只输入：看10小时视频，不如亲手做一个项目，动手能力是UI设计的核心。
2. 建立作品集思维：从你做的第一个小练习开始，就要想着如何把它放进作品集，你的每一个作品都应该能讲出一个故事。
3. 不要怕丑，完成比完美重要：新手阶段，最重要的是把想法实现出来，不要因为追求完美而迟迟不动手。
4. 加入社群，与人交流：可以加入一些UI/UX设计的QQ群、微信群或Discord社区，多和别人交流作品，获取反馈，能让你快速成长。
5. 保持耐心，循序渐进：UI设计是一个需要长期积累的技能，不可能一蹴而就，制定好学习计划，每天坚持一点点，几个月后你会看到巨大的进步。

祝你自学顺利,早日成为一名优秀的UI设计师！

标签： 实战性 资源整合