UI/UX 设计原则

本课程是 Microsoft Front-End 开发人员专业证书的一部分

位教师： Microsoft

访问权限由 New York State Department of Labor 提供

2,567 人已注册

4个模块

深入了解一个主题并学习基础知识。

初级等级

推荐体验

3 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

4个模块

深入了解一个主题并学习基础知识。

初级等级

推荐体验

3 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

您将获得的技能

您将学习的工具

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

28 项作业

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累移动和网络开发领域的专业知识

本课程是 Microsoft Front-End 开发人员专业证书专项课程的一部分

在注册此课程时，您还会同时注册此专业证书。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
通过 Microsoft 获得可共享的职业证书

该课程共有4个模块

本课程介绍关键的用户界面/用户体验设计概念和工具。您将学会创建以用户为中心的响应式设计，使用线框设计、原型设计和 Microsoft Copilot 来增强 CSS 和改进工作流程。通过本课程的学习，您将能够...... 定义 UI/UX 设计、设计工具和响应式设计的基本概念。

在本模块中，您将深入了解 UI/UX 设计的基本原则及其在创建直观、用户友好界面中的应用。你将学习设计的基本概念，包括以用户为中心的方法和关键的可访问性考虑因素。课程结束时，您将了解设计思维过程，以及如何实施这些原则来打造引人入胜的包容性用户体验。

涵盖的内容

25个视频12篇阅读材料9个作业1个非评分实验室1个插件

25个视频总计106分钟

课程介绍2分钟
讲师介绍2分钟
课程内容3分钟
完成指导性实验室4分钟
AI 工具介绍：Microsoft Copilot3分钟
如何成功参加本计划5分钟
项目介绍4分钟
用户界面/用户体验原则简介2分钟
什么是用户界面/用户体验设计？4分钟
用户界面和用户体验之间的关系7分钟
UI/UX 设计的重要性6分钟
平衡与对比7分钟
对齐和邻近5分钟
层次和重复3分钟
前端开发中的用户需求4分钟
创建和使用用户角色4分钟
可用性设计5分钟
用户界面/用户体验中的无障碍设计6分钟
前端工程师无障碍指南4分钟
实用无障碍技术6分钟
使用 CSS 和 HTML 增强现有网页的无障碍访问能力7分钟
前端工程师的设计思维5分钟
设计思考过程的各个阶段3分钟
将设计思维应用于现实世界的前端挑战4分钟
总结：用户界面/用户体验设计原则2分钟

12篇阅读材料总计180分钟

课程大纲10分钟
完成指导性实验室30分钟
Microsoft 前端开发工具10分钟
UI/UX 设计概念10分钟
UI/UX 设计的基本原则10分钟
活动：前端工程中的 CSS - 答案要点30分钟
活动：创建用户角色 - 答案要点30分钟
前端工程师以用户为中心的设计原则10分钟
前端工程师无障碍指南10分钟
实用无障碍技术10分钟
你来试试使用 CSS 和 HTML 增强现有网页的无障碍性 - 答案要点10分钟
在前端开发中应用设计思维10分钟

9个作业总计245分钟

分级测验：UI/UX 设计原理50分钟
练习测验：用户界面/用户体验设计概念20分钟
活动：前端工程中的 CSS30分钟
练习测验：用户界面/用户体验设计的基本原则20分钟
活动：创建用户角色30分钟
实践测验：前端工程师以用户为中心的设计原则20分钟
实践测验：前端工程师的无障碍最佳实践25分钟
活动：应对用户界面/用户体验挑战30分钟
实践测验：在前端开发中应用设计思维20分钟

1个非评分实验室总计60分钟

你来试试使用 CSS 和 HTML 增强现有网页的无障碍性60分钟

1个插件总计15分钟

指导下的实验室：使用 CSS 和 HTML 增强现有网页的无障碍性15分钟

本模块探讨原型设计和交互设计的基本原则，重点是 Figma 和 Adobe XD 等工具。您将学习如何创建线框、设计高保真模型，以及如何利用设计工具进行协作和共享。课程结束时，您将能够运用行业标准技术和工具，构建和完善以用户为中心的设计。

涵盖的内容

17个视频6篇阅读材料9个作业

17个视频总计76分钟

使用 Figma 或 Adobe XD 等设计工具制作模型介绍2分钟
原型设计4分钟
交互设计原理3分钟
前端开发原型4分钟
设计工具介绍6分钟
Figma 和 Adobe XD 的主要功能5分钟
使用设计工具进行开发5分钟
线框在设计中的作用4分钟
创建线框的工具和技术4分钟
线框设计最佳实践3分钟
从线框到高保真模型6分钟
高保真模型的关键要素6分钟
创建高保真模型的工具5分钟
合作在设计中的重要性5分钟
协作和反馈工具5分钟
合作设计的最佳实践5分钟
结论：使用 Figma 或 Adobe XD 等设计工具制作模型2分钟

6篇阅读材料总计80分钟

前端工程师的原型设计和交互设计原则10分钟
利用设计工具进行 UI/UX 开发10分钟
活动：使用 Microsoft Copilot 生成 UI/UX 代码片段 - 答案要点30分钟
为 UI/UX 设计创建有效的 Wireframe10分钟
为逼真的用户界面设计高保真模型10分钟
有效协作和共享 UI/UX 设计10分钟

9个作业总计255分钟

分级测验：使用 Figma 或 Adobe XD 等设计工具制作模型50分钟
实践测验：前端工程师的原型设计和交互设计原则20分钟
活动：使用 Microsoft Copilot 生成用户界面/用户体验代码片段30分钟
实践测验：利用设计工具进行用户界面/用户体验开发20分钟
活动：创建线框30分钟
实践测验：为用户界面/用户体验设计创建有效的线框图30分钟
活动：高保真模拟30分钟
实践测验：为逼真的用户界面设计高保真模型25分钟
练习测验：有效协作和共享用户界面/用户体验设计20分钟

在本模块中，您将学习响应式设计的核心原则以及如何使用 CSS 应用这些原则。你将探索媒体查询、移动优先设计策略以及创建自适应布局的技术。最后，您将了解如何测试和完善您的设计，以确保它们能在各种设备和屏幕尺寸上无缝运行。

涵盖的内容

19个视频8篇阅读材料7个作业2个非评分实验室2个插件

19个视频总计88分钟

简介：使用 CSS 实施响应式设计1分钟
响应式设计4分钟
描述实施响应式设计的主要优势3分钟
响应式设计方法与自适应设计方法的区别6分钟
媒体查询6分钟
媒体查询的常见用例4分钟
编写媒体查询的最佳实践5分钟
使用媒体查询创建响应式网页4分钟
使用 Flexbox 进行响应式设计6分钟
使用 CSS 网格进行响应式设计6分钟
结合 Flexbox 和网格实现复杂布局6分钟
使用 Flexbox 和网格构建响应式布局5分钟
什么是移动优先设计？3分钟
移动优先设计的优势4分钟
在实践中实施移动优先设计9分钟
测试响应式设计的工具6分钟
响应式测试的最佳实践5分钟
记录并解决响应问题5分钟
总结：使用 CSS 实施响应式设计1分钟

8篇阅读材料总计80分钟

响应式设计原则10分钟
掌握响应式设计的媒体查询10分钟
你来试试使用媒体查询创建响应式网页--答案要点10分钟
使用 Flexbox 进行响应式设计10分钟
使用 CSS 网格进行响应式设计10分钟
你来试试使用 Flexbox 和网格构建响应式布局--答案要点10分钟
移动优先设计原则10分钟
测试和验证响应式设计10分钟

7个作业总计175分钟

分级测验：使用 CSS 实现响应式设计50分钟
实践测验：响应式设计原则20分钟
练习测验：掌握响应式设计的媒体查询20分钟
练习测验：构建响应式布局的技巧15分钟
实践测验：移动优先设计原则20分钟
活动：测试响应式布局30分钟
实践测验：测试和验证响应式设计20分钟

2个非评分实验室总计120分钟

你来试试使用媒体查询创建响应式网页60分钟
你来试试使用 Flexbox 和网格构建响应式布局60分钟

2个插件总计30分钟

指导下的实验室使用媒体查询创建响应式网页15分钟
指导性实验室：使用 Flexbox 和网格构建响应式布局15分钟

在本模块中，您将学习如何使用 Microsoft Copilot 简化 CSS 和设计工作流程。您将探索如何生成和增强 CSS 代码、创建响应式设计建议，以及如何利用 Copilot 的智能辅助功能改进 UI/UX 设计。最后，您将能够将 Copilot 集成到您的设计流程中，并将其功能应用于实际的设计挑战。