在《UI设计》的课程中,博赛讲师会分三个阶段对学生进行系统性训练,迅速提升学生的实战能力。
第一阶段:软件基础与平面设计熟练使用软件可以说在UI设计过程当是首要,也是最为重要的基础。为此该阶段将对Photoshop和AdobeIllustrator两款软件进行系统学习。平面设计作为设计的基石,可以说在UI设计中有着不可或缺的重要作用,所以该阶段将采用平面的实际商业案例对软件及手法进行详细解读。
第二阶段:webUI&前端此阶段需要学员掌握网站构成与设计理念,同时掌握前端代码的书写,前端与网站设计相辅相成。对字体设计、色彩搭配、版式布局进行系统的讲解,同时加入新的设计软件CINEMA4D打造banner场景以及立体效果的实现。当然,课程也会对当前社会中的主流网站进行真实案例的讲解,后期会通过真实的商业项目进行项目实训。项目实训结束紧跟前端代码,其重点需要掌握web标准、HTML+CSS完成pc端页面布局,同时了解当下最流行的H5以及CSS3的新功能,掌握弹性盒、媒体查询以及响应式网站的实现。前端结点部分则需要重点掌握WebApp的布局规范、切图技巧最终完成WebApp的界面实现。
第三阶段,讲解产品流程以及UI与UE第三阶段是UI课程中最为重要的阶段,在产品、UI设计和UE设计中细节决定成败,细节主要体现在图标、版式、色彩等方面。对于ios与android规范以及设计,首先需要对图标大力度的讲解,后期做android主题项目提升学员的创意能力以及效果实现的能力并作出项目提案。基础打牢之后课程会针对产品方向做一系列的讲解,之后课程会对当下企业需求的动效设计师重点进行讲解,学员需掌握软件AaobeAfftereffects,了解AaobeAfftereffects软件的功能与特点。产品以及交互学课程之后是界面设计,重点掌握ios和android平台的设计规范,了解ios与android平台设计以及交互上的相同与不同,后期通过商业案例实训掌握ios与android平台的界面设计方法。商业项目实训之后针对切图标注在实际工作当中的应用做了重点讲述。对于此阶段Mac端软件应用以及设备使用,则重点掌握sketch软件,了解Mac设备的使用以及Mac端效率工具的应用。
| 序号 | 项目(或情境、任务、模块) | 知识点 | 技能训练 | 教学重点(思政元素融入) | 教学设计(或教学情景) | 建议学时 |
|---|---|---|---|---|---|---|
| 1 | 1、UI介绍 | 什么是UI | UI设计的概念、设计师就业前景、设计的思路/遵循原则 | 学好本专业专业知识、掌握专业理论、提升专业技能 | 多媒体演示法 讲授法 实验法 | 2 |
| UI设计师就业前景 | ||||||
| UI设计的思路/遵循原则 | ||||||
| 2 | 2、图标设计基础 | 图标的概念 | 图标设计基础相关知识点的理解和使用方式 | 养成科学思维、具备科学思想、养成细心观察、用心领会、注重细节的习惯 | 情景教学 多媒体演示法 讲授法 实验法 巡回指导法 归纳总结法 | 6 |
| 图标的分类 | ||||||
| 启动图标 | ||||||
| 功能图标 | ||||||
| 图标设计原则 | ||||||
| 识别性原则 | ||||||
| 统一性原则 | ||||||
| 差异性原则 | ||||||
| 原创图标 | ||||||
| “潜规则” | ||||||
| 常见图标设计风格 | ||||||
| 剪影图标 | ||||||
| 扁平图标 | ||||||
| 微扁平和轻写实图标 | ||||||
| 3 | 3、图标设计进阶 | 启动图标 | 掌握图标设计进阶及字体图标的知识 | 加强社会的沟通能力、培养从事UI设计的职业素养 | 多媒体演示法 讲授法 实验法 巡回指导法 归纳总结法 作业 | 10 |
| 启动图标的灵感来源 | ||||||
| 常见的几种启动图标设计手法 | ||||||
| 功能图标的灵感来源 | ||||||
| 吉祥物 | ||||||
| 启动图标特征 | ||||||
| VI色 | ||||||
| 直接引用 | ||||||
| 建立统一风格的图标 | ||||||
| 描边样式 | ||||||
| 色值 | ||||||
| 圆角半径 | ||||||
| 图标大小 | ||||||
| 使用相同的元素 | ||||||
| 字体图标 | ||||||
| 4 | 4、图标设计实战 | PS中的设置 | 掌握图标设计实战及布尔运算 | 养成科学思维、具备科学思想、培养较强的动手实操能力、提高自己的审美观 | 多媒体演示法 讲授法 实验法 巡回指导法 归纳总结 作业 | 10 |
| 工具设置 | ||||||
| 单位与标尺 | ||||||
| 对齐边缘 | ||||||
| 钢笔工具 | ||||||
| 网格和参考线 | ||||||
| 新建文档 | ||||||
| 新建图层 | ||||||
| 合并形状 | ||||||
| 减去顶层形状 | ||||||
| 与形状区域相交 | ||||||
| 排除重叠形状 | ||||||
| 合并形状组件 | ||||||
| 5 | 5、 UI设计基础 | 产品思维导图 | 掌握UI设计基础及主流设计界面 | 培养学生对生活美学的认识、提高对界面设计的审美 | 情景教学 多媒体演示法 讲授法 实验法 巡回指导法 归纳总结 作业 | 10 |
| 主流设计界面介绍 | ||||||
| App页面类型 | ||||||
| 聚合类 | ||||||
| 列表类 | ||||||
| 内容类 | ||||||
| 功能类 | ||||||
| App包含哪些界面 | ||||||
| 启动页 | ||||||
| 引导页 | ||||||
| 首页 | ||||||
| 登录/注册 | ||||||
| UI界面设计的布局 | ||||||
| 状态栏 | ||||||
| 导航栏 | ||||||
| 主体内容 | ||||||
| 标签栏 | ||||||
| UI界面设计的颜色 | ||||||
| 6 | 6、UI设计进阶 | 开始做一个产品 | 掌握UI设计进阶及UI设计的思路 | 引导学生主动探索、与同学讨论沟通能力、培养学生对本课程的兴趣 | 情景教学 多媒体演示法 讲授法 实验法 巡回指导法 归纳总结 作业 | 10 |
| 和甲方斗智斗勇 | ||||||
| UI设计的思路 | ||||||
| 颜色 | ||||||
| 字体 | ||||||
| 分割线 | ||||||
| 图标 | ||||||
| 排版 | ||||||
| UI设计配色 | ||||||
| UI色彩认知 | ||||||
| 配色原则 | ||||||
| 配色工具 | ||||||
| 颜色搭配6-3-1法则 | ||||||
| 推荐几款有用的颜色工具 | ||||||
| 7 | 7、UI设计实战 | 绘制思维导图 | 掌握UI设计实战 | 养成科学思维,具备科学思想、培养较强的动手实操能力和培养自己的审美观 | 情景教学 多媒体演示法 讲授法 实验法 巡回指导法 | 4 |
| 设计UI低保真界面 | ||||||
| 设计UI高保真界面 | ||||||
| 8 | 8、UI设计也要小插画 | 插画的概念 | 掌握插画的概念及Adobe Illustrator的工具的使用 | 激发自己的创新能力、动手能力、提高自己的独立思考和判断能力 | 情景教学 多媒体演示法 讲授法 实验法 巡回指导法 作业 | 12 |
| 插画灵感的获取 | ||||||
| 采集 | ||||||
| 重构 | ||||||
| Adobe Illustrator简介 | ||||||
| 工作界面 | ||||||
| 文档新建和输出 | ||||||
| 钢笔工具 | ||||||
| 剪刀工具 | ||||||
| 形状工具 | ||||||
| 吸管工具 | ||||||
| 混合工具 | ||||||
| 渐变工具 | ||||||
| 对齐面板 |


