指尖上的“艺术”—移动端UI设计
指尖上的“艺术”—移动端UI设计
2万+ 人选课
更新日期:2025/05/18
开课时间2025/01/21 - 2025/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
在信息技术迅速发展的今天,各种智能终端设备正在迅速的走进人们的生活,并且改变着人们的生活方式。与此同时,能满足用户各种需求的移动数字产品快速兴起,一个友好美观、操作舒适的用户界面将是移动数字产品存亡的关键,由此UI设计师岗位应运而生,并且日趋火热。《移动端UI设计》课程围绕UI 设计师岗位能力要求,深度挖掘用户需求、详细剖析行业标准、不断夯实设计技能。在这里我们将带领你深入了解UI设计的行业知识,熟悉界面设计的配色规范、学习版式与字体设计的方法、掌握界面元素设计的技巧、提升页面布局设计的能力,从而见证移动数字产品从无到有的过程,体验界面设计的流程,感受指尖上的“艺术”魅力。
课程大纲

在线教程

章节简介教学计划
界面设计的那些事儿——界面设计基础
学习资料 登录后可预览视频
知识准备篇
什么是UI设计?
李英
UI设计的工作流程
李英
什么是视觉设计
李英
什么是交互设计
李英
什么是用户体验
李英
UI设计中常用的单位
李英
UI设计中常用的图片输出格式
李英
技能准备篇
UI设计中常用的软件工具
李英
PhotoShop在UI设计中的必备基础
李英
Illustrator在UI设计中的常用功能
李英
带你玩转布尔运算
李英
案例01:QQ浏览器图标制作
李英
案例02:微信图标制作
李英
案例03:谷歌图标制作
李英
让“美”变得有章可循——界面设计要素
学习资料
配色设计篇
色彩的属性
朱丽兰
色环配色法
朱丽兰
色彩情感配色法
朱丽兰
色彩功能取色法
朱丽兰
APP色彩规范和用色技巧
朱丽兰
版式布局篇
什么是构图?
冯燕妮
构图方法1
冯燕妮
构图方法2
冯燕妮
什么是黄金比例?
冯燕妮
黄金比例的应用
冯燕妮
构图&布局
冯燕妮
案例:界面设计
冯燕妮
字体设计篇
界面中的字体
冯燕妮
文字排版的技巧
冯燕妮
字体选择的原则
冯燕妮
字体设计的方法
冯燕妮
界面元素的设计之道——界面元素设计
学习资料
图标设计篇
图标的介绍及分类
王丽梅
图标的设计技巧和规范
王丽梅
功能图标之面性图标设计
王丽梅
功能图标之线性图标设计
王丽梅
启动图标之扁平化图标设计
王丽梅
启动图标之拟物化图标设计
王丽梅
图标的导出与优化
王丽梅
控件设计篇
按钮设计
冯燕妮
案例:色块按钮设计
冯燕妮
滑块设计
冯燕妮
案例:极简风格滑块设计
冯燕妮
搜索框设计
冯燕妮
界面版式的编排之道——页面布局设计
学习资料
组件分析篇
界面组件分析
于丽丽
导航栏设计
于丽丽
Banner设计
于丽丽
布局层级设计
于丽丽
文字层级
于丽丽
文字层级设计
于丽丽
图片流设计
于丽丽
卡片流设计
于丽丽
页面分析篇
首页设计
于丽丽
详情页设计
于丽丽
个人中心页设计
于丽丽
一个APP产品的诞生——APP项目设计
学习资料
APP认知篇
认识APP
李英
APP的构成元素
李英
APP实战篇
项目定位
李英
启动图标设计
李英
引导页设计
李英
登录页设计
李英
首页设计
李英
集市页设计
李英
切图与标注
李英
  • 第一章界面设计的那些事儿——界面设计基础

    本章主要介绍了UI设计的必备的知识与技能,要求理解UI设计的概念、了解UI设计的工作流程、常用设计单位、设计软件及图片输出格式,掌握PhotoShop、Illustrator设计软件的常用功能,能够运用布尔运算法实现图标形状的设计,为今后的学习奠定基础。

  • 1.1知识准备篇

    本节主要学习UI设计的概念、工作流程及主要的工作内容,要求了解视觉设计、交互设计和用户体验主要内容,能够区分界面设计中常用的设计单位,能够合理的选择常用图片的输出格式 。学习UI设计的常用设计软件及必备的操作技能,要求了解UI设计常用的软件工具 ,掌握Photoshop和Illustrator设计常用的功能,学会使用布尔运算实现logo或图标的设计。

  • 1.2技能准备篇

    本节主要学习UI设计的常用设计软件及必备的操作技能,要求了解UI设计常用的软件工具 ,掌握Photoshop和Illustrator设计常用的功能,学会使用布尔运算实现logo或图标的设计。

  • 第二章让“美”变得有章可循——界面设计要素

    本章主要介绍了UI设计的版式与字体,要求了解版式和字体在界面中的重要作用,理解黄金比例的概念和字体选择的原则,掌握常用的构图方法和常见页面布局、字体排版技巧以及字体设计的方法,能够熟练实现界面构图、页面布局并进行字体的选择、排版以及设计,为今后的学习奠定基础。

  • 2.1配色设计篇

    本节主要介绍了UI设计的版式与字体,要求了解版式和字体在界面中的重要作用,理解字体选择的原则。

  • 2.2版式布局篇

    本节主要学习构图的概念、常用的构图方法、黄金比例在构图中的应用以及常见的页面布局,要求了解构图和布局的重要作用,理解常用构图方法以及黄金比例,能够进行界面构图和布局。

  • 2.3字体设计篇

    本节主要介绍了界面中如何应用字体,要求了解字体在界面设计的重要作用,掌握字体的排版技巧和字体的选择原则,学会字体设计的方法。

  • 第三章界面元素的设计之道——界面元素设计

    本章第一部分主要介绍了图标设计的必备知识与操作技能,要求理解图标的概念、了解图标的分类,掌握图标设计的技巧、规范和原则,能够设计制作功能图标和启动图标,掌握图标导出和优化的方法。第二部分主要介绍了UI设计中常用控件的必备知识与设计技能,要求了解按钮、滑块和搜索框的基础知识及设计要点,要求能够独立完成按钮、滑块、搜索框的制作,为今后的学习奠定基础。

  • 3.1图标设计篇

    本节主要学习图标的概念和分类,图标设计的技巧、规范和原则,要求掌握面性图标和线性图标的设计与制作方法,掌握扁平化风格和拟物化风格图标的设计与制作方法,以及掌握图标导出和优化的方法。

  • 3.2控件设计篇

    本节主要介绍了UI设计的常用控件按钮、滑块和搜索框的基础知识及设计要点,要求了解按钮、滑块和搜索框的基础知识,能够独立完成按钮、滑块、搜索框的制作。

  • 第四章界面版式的编排之道——页面布局设计

    本章主要是从组件化的角度,对风格内容多样化的界面进行分析,介绍了导航栏、banner、布局层级、文字层级、图片流以及卡片流,在设计和制作中的一些注意事项和设计技巧。并针对首页、详情页和个人中心页,这三种比较常见的页面,分析它们的功能目的,从组件的角度进行拆分,分析了设计过程中的注意事项和细节处理。

  • 4.1组件分析篇

    本节先对繁杂的界面进行分析,提出了组件化分析的重要性。重点介绍了导航栏、banner、布局层级、文字层级、图片流以及卡片流,在设计和制作中的一些注意事项和设计技巧。在前面组件学习的基础上,针对几乎是所有app都会有的首页、详情页和个人中心,进行功能分析和页面拆分,并详细讲述了各个页面在设计制作中的注意事项和细节处理。

  • 4.2页面分析篇

    本节是在前面组件学习的基础上,针对几乎是所有app都会有的首页、详情页和个人中心,进行功能分析和页面拆分,并详细讲述了各个页面在设计制作中的注意事项和细节处理。

  • 第五章一个APP产品的诞生——APP项目设计

    本章主要介绍了APP产品的从无到有的设计过程,要求了解APP的概念、优势以及分类,掌握整个APP的构成元素,能够运用PhotoShop、Illustrator等设计软件根据具体设计规范实现APP启动图标、引导页、登录页、首页、详情页等页面的制作,并能够完成界面的切图与标注等界面输出的工作。

  • 5.1APP认知篇

    本节主要学习APP设计的相关知识,要求了解APP的概念、优势、熟悉APP的常见的分类,掌握APP的构成要素,为后期APP的实战操作打下理论基础。

  • 5.2APP实战篇

    本节主要通过实战操作完成一套APP界面的设计制作,要求能够运用Photoshop和Illustrator等设计软件完成启动图标、引导页、登录页、首页、详情页等页的制作,学会使用CutterMan、MarkMan等工具实现界面的切图、标注等一系列的输出工作。

  • 开始学习
  • 第一章  作业测试
    第一章 界面设计的那些事儿——界面设计基础

    1.1 知识准备篇

    1.2 技能准备篇

    视频数14
  • 第二章  作业测试
    第二章 让“美”变得有章可循——界面设计要素

    2.1 配色设计篇

    2.2 版式布局篇

    2.3 字体设计篇

    视频数16
  • 第三章  作业测试
    第三章 界面元素的设计之道——界面元素设计

    3.1 图标设计篇

    3.2 控件设计篇

    视频数12
  • 第四章  作业测试
    第四章 界面版式的编排之道——页面布局设计

    4.1 组件分析篇

    4.2 页面分析篇

    视频数11
  • 第五章  作业测试
    第五章 一个APP产品的诞生——APP项目设计

    5.1 APP认知篇

    5.2 APP实战篇

    视频数9
  • 期末考试