任务2 解析UI设计要素
上一节
下一节
素质目标：
鼓励学生探求美的来源，树立正确的审美意识，理解色彩联想对心理影响的重要意义。
知识目标：
1．了解常见的 UI 界面布局方式；
2．掌握色彩的使用方法。
技能目标：
1．能够根据 App 主题进行界面布局；
2．能够熟练运用色彩相关知识进行色彩搭配。
王俏
目录
暂无搜索结果
-
项目一 UI设计入门：AI时代的设计思维与基础
-
● 知识图谱
-
● 背景故事——UI设计之门：从零到一的奇幻之旅
-
● 任务1 走进UI设计
-
● 情境导入：初探UI设计的奥秘
-
● 知识探索
-
● 1.1 UI设计介绍
-
● 1.1.1 UI设计的概念
-
● 1.1.2 UI设计原则
-
● 1.1.3 UI设计分类
-
● 1.1.4 UI设计尺寸相关知识
-
-
● 1.2 UI设计流程
-
● 1.2.1 需求分析
-
● 1.2.2 原型设计
-
● 1.2.3 视觉设计
-
● 1.2.4 图与标注
-
-
● 1.3 UI设计图像
-
● 1.3.1 图像类型
-
● 1.3.2 图像格式
-
-
● 1.4 UI设计风格
-
● 1.4.1 扁平化风格
-
● 1.4.2 几何风格
-
● 1.4.3 拟物化风格
-
● 1.4.4 玻璃风格
-
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● 任务2 解析UI设计要素
-
● 情境导入：解构设计要素的魔法法则
-
● 知识探索
-
● 2.1 UI设计布局
-
● 2.1.1 宫格布局
-
● 2.1.2 列表布局
-
● 2.1.3 卡片布局
-
● 2.1.4 瀑布流式布局
-
● 2.1.5 多面板布局
-
-
-
● 2.2 UI设计色彩
-
● 2.2.1 色彩的构成
-
● 2.2.2 色彩的混合
-
● 2.2.3 色彩的调和
-
● 2.2.4 色彩的推移
-
● 2.2.5 色彩的联想
-
● 2.2.6 色彩的心理应用
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● 任务3 探索移动端操作系统
-
● 情境导入：揭秘移动系统的核心世界
-
● 知识探索
-
● 3.1 iOS
-
● 3.1.1 主题明确
-
● 3.1.2 色彩一致
-
● 3.1.3 留白设计
-
● 3.1.4 良好布局
-
-
● 3.2 Android操作系统
-
● 3.2.1 布局灵活
-
● 3.2.2 色彩艳丽
-
● 3.2.3 操作便捷
-
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● UI设计入门阶段性闯关
-
-
项目二 UI图标设计：智能终端符号标准化设计
-
● 知识图谱
-
● 背景故事——像素秘境：图标艺术的探险之旅
-
● 任务4 设计移动App应用图标
-
● 情境导入：解锁图标基础的精髓
-
● 知识探索
-
● 4.1 图标基础概念
-
● 4.1.1 图案的概念
-
● 4.1.2 图标的概念
-
● 4.1.3 图标的分类
-
-
● 4.2 图标设计流程
-
● 4.2.1 明确主题
-
● 4.2.2 提炼核心形状
-
● 4.2.3 草图绘制
-
● 4.2.4 选择标准色
-
● 4.2.5 图标设计
-
● 4.2.6 切图输出
-
-
● 4.3 图标设计初探
-
● 【课堂案例 4-1】时钟图标绘制
-
● 【课堂案例 4-2】学位帽图标绘制
-
● 【课堂案例 4-3】折页图标绘制
-
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● 任务5 塑造移动App图标风格
-
● 情境导入：探寻风格演变的无限可能
-
● 知识探索
-
● 5.1 剪影图标设计
-
● 5.1.1 线性剪影图标设计
-
● 【课堂案例 5-1】线性天气图标绘制
-
● 【课堂案例 5-2】线性开关图标绘制
-
● 【课堂案例 5-3】线性删除图标绘制
-
● 5.1.2 面性剪影图标设计
-
● 【课堂案例 5-4】面性确认图标绘制
-
● 【课堂案例 5-5】面性设置图标绘制
-
● 【课堂案例 5-6】面性笑脸图标绘制
-
● 【课堂案例 5-7】面性相机图标绘制
-
● 【课堂案例 5-8】面性文档图标绘制
-
-
● 5.2 扁平化图标设计
-
● 5.2.1 纯平面扁平化图标
-
● 【课堂案例 5-9】纯平面扁平化电池图标设计
-
● 5.2.2 折纸风扁平化图标
-
● 【课堂案例 5-10】折纸风扁平化信封爱心未读图标设计
-
● 【课堂案例 5-11】折纸风扁平化信封爱心已读图标设计
-
● 5.2.3 长投影扁平化图标
-
● 【课堂案例 5-12】长投影下载图标设计
-
● 5.2.4 轻折叠扁平化图标
-
● 【课堂案例 5-13】轻折叠多媒体图标设计
-
● 【课堂案例 5-14】轻折叠扁平化计算器图标设计
-
● 5.2.5 微立体扁平化图标
-
● 【课堂案例 5-15】微立体定位图标设计
-
-
● 5.3 拟物化图标设计
-
● 5.3.1 拟物化图标特点
-
● 5.3.2 拟物化图标案例
-
● 【课堂案例 5-16】拟物化旋转按钮图标设计
-
● 【课堂案例 5-17】拟物化卡包图标设计（横版）设计
-
● 【课堂案例 5-18】拟物化卡包图标设计（竖版）设计
-
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● UI图标设计阶段性闯关
-
-
项目三 UI界面设计：场景界面设计与用户体验
-
● 知识图谱
-
● 背景故事——界面迷宫：控件与美学的协奏曲
-
● 任务6 开发界面控件库
-
● 情境导入：驾驭控件的逻辑与美学
-
● 知识探索
-
● 6.1 滑块设计
-
● 6.1.1 滑块构成
-
● 6.1.2 滑块分类
-
● 【课堂案例 6-1】线条滑块设计
-
● 【课堂案例 6-2】旋转滑块设计
-
-
● 6.2 表单设计
-
● 6.2.1 表单类型
-
● 6.2.2 下拉列表框设计
-
● 【课堂案例 6-3】类目下拉子菜单设计
-
● 6.2.3 搜索栏设计
-
● 【课堂案例 6-4】移动端APP搜索框设计
-
● 6.2.4 选择器设计
-
● 【课堂案例 6-5】日历界面设计
-
● 6.2.5 开关设计
-
● 【课堂案例 6-6】开关设计
-
-
● 6.3 按钮设计
-
● 6.3.1 按钮类型
-
● 6.3.2 简约按钮设计
-
● 【课堂案例 6-7】简约确认按钮设计
-
● 6.3.3 水晶确认按钮设计
-
● 【课堂案例 6-8】水晶按钮设计
-
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● 任务7 布局规划App界面
-
● 情境导入：绘制多元界面的蓝图
-
● 知识探索
-
● 7.1 启动页
-
● 7.1.1 启动页的意义
-
● 7.1.2 启动页的特点
-
● 【课堂案例 7-1】启动页案例分析
-
-
● 7.2 闪屏页
-
● 7.3 引导页
-
● 7.3.1 引导页的意义
-
● 7.3.2 引导页的特点
-
● 【课堂案例 7-2】引导页案例分析
-
-
● 7.4 首页
-
● 7.5 登录注册页
-
● 7.5.1 注册登录页的意义
-
● 7.5.2 注册登录页的特点
-
● 【课堂案例 7-3】注册登录页案例分析
-
-
● 7.6 子页
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● UI界面设计阶段性闯关
-
-
项目四 UI交互实战：智能界面交互设计与优化
-
● 知识图谱
-
● 背景故事——界面双星：iOS与Android的创意交响曲
-
● 任务8 iOS界面设计
-
● 情境导入：雕琢iOS的极简美学
-
● 知识探索
-
● 8.1 iOS界面设计规范
-
● 8.2 iOS字体设计规范
-
● 8.3 iOS 音乐 App 界面设计实战
-
● 8.3.1 音乐App项目分析
-
● 8.3.2 音乐App原型设计
-
● 8.3.3 音乐App风格分析
-
● 【项目实战8-1】设计音乐App启动图标
-
● 【项目实战8-2】设计音乐App主题界面
-
● 【项目实战8-3】设计音乐App启动页
-
● 【项目实战8-4】设计音乐App引导页
-
● 【项目实战8-5】设计音乐App注册登录页
-
● 【项目实战8-6】设计音乐App首页
-
● 【项目实战8-7】设计音乐App播放页
-
● 【项目实战8-8】设计音乐App歌词页
-
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● 任务9 Android系统界面设计
-
● 情境导入：铸造Android的开放生态
-
● 知识探索
-
● 9.1 Android系统界面设计规范
-
● 9.2 Android字体设计规范
-
● 9.3 Android系统宠物 App 界面设计实战
-
● 9.3.1 宠物App项目分析
-
● 9.3.2 宠物App原型设计
-
● 9.3.3 宠物App风格分析
-
● 【项目实战9-1】设计宠物App启动图标
-
● 【项目实战9-2】设计宠物App引导页
-
● 【项目实战9-3】设计宠物App登录页
-
● 【项目实战9-4】设计宠物App首页
-
● 【项目实战9-5】设计宠物App宠物圈页面
-
● 【项目实战9-6】设计宠物App购物车页面
-
● 【项目实战9-7】设计宠物App设置页面
-
-
-
● 任务实践
-
● 任务考核
-
● 知识拓展
-
● 课后实训
-
-
● UI交互实战阶段性闯关
-
-
UI爱好者社会培训
-
● UI设计入门培训
-
● icon图标设计
-
● 剪影图标设计
-
● 扁平化图标设计
-
● Android系统常用图标设计
-
● iOS系统常用手机图标设计
-
-
● UI设计项目实战进阶培训
-
● 食坊APP登录图标
-
● 食坊APP登录界面
-
● 食坊APP主视觉界面
-
● 食坊APP饭圈界面
-
● 食坊APP闪屏界面
-
● 食坊APP首页界面
-
● 食坊APP我的界面
-
● 食坊APP下厨界面
-
● 食坊APP二级界面
-
● 食坊APP三级界面
-
-
-
综合能力评估测试
-
● 测试
-
-
拓展——UI设计创意工坊
-
● 图标精选集
-
● 静态图标
-
● 动态图标
-
-
● 界面创作坊
-
● 创作指导文件
-
● 创意素材
-
● 创意文案
-
-
