章
|
节
|
知识点
|
授课时间(天)
|
课程目标
|
阶段
图标设计
|
图标入门
|
图标认识
|
什么是图标
|
1.0
|
通过学习两个平台图标的设计规范从而达到图标的视觉统一
|
图标与标识的区别
|
常见的移动应用图标
|
图标规范
|
iOS图标的规范
|
Android图标规范
|
图标的设计要素
|
APP图标
|
图标的特点
|
图标的设计流程
|
APP图标的设计方法
|
基础图形
|
圆形图标的绘制
|
方形图标的绘制
|
圆角矩形图标的绘制
|
组合图形的绘制
|
图标结构
|
图标型的把握
|
1.0
|
通过学习一些基本图形的绘制来掌握简单图标的绘制方法
|
图标的大小以及设计规范
|
透视、光源以及阴影
|
元素的组合
|
视觉的均衡
|
2D图标
|
线性图标
|
剪影图标
|
课程案例: 一套功能图标
|
图标设计原则
|
图标设计原则
|
可识别性原则
|
1.0
|
通过学习让学生了解图标的可识别、差异性、一致性等一系列的设计原则。让学生熟练掌握扁平化风格图标的绘制方法
|
差异性原则
|
风格统一性原则
|
原创性原则
|
图标创意
|
图标创意
|
界面需求
|
图标的创意元素
|
创意图标的特点
|
图标设计与软件操作
|
扁平化图标
|
图层样式的运用
|
图标设计方法及技巧
|
扁平化图标的绘制
|
课程案例: 一套扁平化风格图标
|
质感图标设计
|
立体透明图标的绘制技巧
|
1.0
|
通过学习图层样式来了解拟物图标的绘制技巧
|
毛绒图标的绘制技巧
|
3D图标
|
绘制3D图标技巧
|
写实图标
|
金属质感的绘制技巧
|
1.0
|
逼真食物图标的绘制技巧
|
|
课程案例
|
1.无字表图标
|
|
|
2.开关按钮图标
|
3.相机图标
|
4.ps药丸图标
|
5.金属日历图标
|
6.透明图标
|
7.金属图标
|
8.毛绒图标
|
9.透视图标
|
10.播放器制作
|
项目案例
|
1.启动图标设计
|
2.风手机主题
|
3.扁平化手机主题
|
4.拟物化手机主题
|
第二阶段APP设计
|
初识APP
|
APP的概念
|
什么是APP
|
3.0
|
分别从iOS、Android、Windows移动设备的主流系统软件来设计移动应用
|
APP的开发流程
|
APP的开发流程
|
常见的手机操作系统
|
主流操作系统
|
APP设计要点
|
设计要点
|
移动UI的经典案例
|
移动UI经典案例
|
智能手机的屏幕
|
手机规格
|
英寸
|
像素
|
分辨率
|
移动主流平台基本原则
|
iOS平台和设计的基本原则
|
iOS屏幕分辨率
|
iOS设计尺寸
|
Android平台和设计的基本原则
|
Android屏幕分辨率
|
Android设计尺寸
|
Windows平台和设计的基本原则
|
Windows屏幕分辨率
|
Windows设计尺寸
|
课程案例: iOS手机界面扁平化风格制作
|
两大平台之间的区别
|
导航机制
|
硬件特性
|
1.0
|
通过学习了解iOS与Android之间的差异方式,来熟悉不同平台的设计方式
|
iOS导航
|
Android导航
|
界面布局
|
两大平台间结构差异
|
方式不同
|
推送方式
|
通知方式
|
操作方式
|
文字规范
|
文字规范
|
iOS系统文字规范
|
Android系统文字规范
|
课程案例: Android手机界面扁平化风格制作
|
设计要点
|
风格
|
什么是设计风格
|
1.0
|
熟悉确定设计风格以及配色方式
|
如何确立设计风格
|
颜色
|
认识色彩
|
颜色搭配基础
|
常见APP颜色
|
颜色的性格
|
界面设计
|
导航设计
|
扁平导航
|
1.0
|
通过学习分析导航、界面布局、和操作方式等来更加规范的设计移动应用
|
列表式导航
|
其他导航
|
首页设计
|
搜索栏
|
标签栏
|
卡片式设计
|
楼层设计
|
详情页设计
|
消息列表
|
1.0
|
瀑布流
|
个人中心
|
头像区域
|
个人信息
|
启动页
|
品牌宣传类
|
首页样式类
|
情感故事类
|
节日气氛类
|
引导页
|
功能说明类
|
1.0
|
使用说明类
|
情感故事类
|
课程案例
|
1.手机时钟设置界面
|
|
2.手机音乐应用界面
|
3.手机天气应用界面
|
4.平板主题界面设计
|
5.安卓系统主题界面设计
|
设计适配
|
iOS系统
|
iOS系统适配方法
|
1.0
|
通过学习,熟悉众多尺寸的一个设计规格,并通过一定的比例换算去适应不同分辨率的需求以及适配
|
Android系统
|
Android系统适配方法
|
标注设计
|
标注设计
|
标注方法
|
切图
|
点九图
|
什么是点九图
|
如何制作点九图
|
界面切图
|
界面切图
|
图标切图
|
命名规则
|
第三阶段
交互设计
|
原型APP
|
原型设计
|
什么是原型设计
|
1.0
|
通过学习,了解Axure
|
原型设计工具
|
Axure基础交互
|
了解Axure
|
工作界面
|
Axure文件格式
|
团队项目
|
工作环境
|
自定义工作区
|
站点地图
|
部件操作
|
部件概述
|
部件操作
|
页面样式
|
交互基础
|
事件
|
用例
|
动作
|
课程案例: 登录低保真原型的登录
|
母版操作
|
母版基础
|
1.0
|
通过学习,熟悉Axure的一些基础交互,并能设计出低保真原型图
|
使用母版
|
动态面板应用
|
状态改变时
|
拖动时
|
滚动时
|
改变大小时
|
载入时
|
流程图
|
流程图概述
|
创建流程图
|
生成流程图
|
课程案例
|
1.“百度”登录原型设计
|
|
2.“大众点评”打分效果
|
3.淘宝首页幻灯
|
Axure交互
|
条件逻辑
|
条件逻辑概述
|
2.0
|
通过一些条件和逻辑判断设计出一些高保真原型图
|
交互和条件逻辑概述
|
多条件用例
|
设置部件值
|
变量
|
变量概述
|
创建和设置变量值
|
使用变量值
|
全局、局部变量的使用
|
课程案例
|
1.登录列表页面跳转
|
|
2.全局变量在不同页面间与动态面板的交互
|
触发事件
|
触发事件
|
1.0
|
熟悉交互事件、逻辑判断
|
交互条件
|
新建、删除条件和条件之间的关系
|
条件设置
|
交互条件应用
|
切换用户
|
用户界面文档规范
|
规范文档
|
规范文档的概述
|
1.0
|
用户界面的文档规范
|
Axure规范文档
|
生成器和输出文件
|
生成器和输出文件
|
部件注释
|
自定义注释集合
|
添加注释
|
多部件添加、编辑、删除注释
|
页面注释
|
自定义页面注释字段
|
页面注释
|
生成规范文档
|
配置一个或多个部件表
|
配置布局
|
课程案例
|
电商原型设计
|
|
1.登录功能的实现
|
2.首页基本布局
|
3.制作菜单效果
|
4.制作幻灯片轮播效果
|
5.制作搜索栏随滚动条上下滚动效果
|
|
APP微信高保真原型设计
|
1.微信登录功能
|
2.软件进入动画效果
|
3.导航菜单切换效果
|
4.给好友发送聊天内容
|
5.上下拖动微信页面内容
|
6.显示隐藏按钮的下拉菜单
|
项目实战
|
项目实战(一)
|
题材
|
|
掌握企业项目实战的
流程和技术
|
1.美食类低保真原型设计
|
五选一
|
2.旅游类低保真原型设计
|
3.新闻类低保真原型设计
|
4.音乐类低保真原型设计
|
5.社交类低保真原型设计
|
通过原型设计成相对应的一套视觉设计稿
|
|
项目实战(二)
|
题材
|
|
自己设计一款APP(类型不限,尽量选取你所倾向的行业)
|
|
1.用户调研
|
|
2.设计低保真原型
|
|
3.交互文档
|
|
4.通过原型设计成相对应的一套视觉设计稿
|
|
5.设计规范文档
|
|
项目实战(三)
|
一套手机主题(icon图标)
|
|
项目实战(四)
|
设计一套企业网站
|
|
项目实战(五)
|
作品集设计
|
|