UI前端设计
袁安翠

1
2
3
4
5
6
7
8
9

配套教材视频

发布时间:2021-07-15 11:30   发布人:袁安翠   浏览次数:182

【 配套教材视频 】

项目名

任务

视频文件

案例效果

UI设计基础

任务1 HTML5 的基本语法

1、HTML5的基本语法1qvod.jpg

2、HTML5的基本语法2qvod.jpg


image.png








图标按钮设计







网页界面设计

任务1 canvas基本语法

1、canvas基本语法1qvod.jpg

2、Canvas基本语法2qvod.jpg


image.png


任务2 canvas坐标与颜色的定义

1、不同颜色线宽的平行线的绘制qvod.jpg

2、镂空正方形的绘制1qvod.jpg

3、镂空正方形的绘制2qvod.jpg


image.png





手机界面设计

任务1 电商APP界面首页设计

1、首页各区块的划分qvod.jpg

2、导航栏图标绘制qvod.jpg

3、搜索框qvod.jpg

4、Tab栏1qvod.jpg

4、Tab栏2qvod.jpg

5、Banner图qvod.jpg

6、金刚区图标绘制1qvod.jpg

6、金刚区图标绘制2qvod.jpg


                         image.png

任务4 电商APP购物车页设计

1、拖放元素1qvod.jpg

2、拖放元素2qvod.jpg

3、拖放元素3qvod.jpg


image.png


任务5 电商APP个人主页设计

1、个人主页头部的绘制qvod.jpg

2、个人主页卡片区绘制qvod.jpg

3、个人主页列表布局qvod.jpg

image.png


项目输出展示

任务1 标注与切图

1、PS切图qvod.jpg

2、Pxcook标注qvod.jpg

3、Pxcook切图qvod.jpg

4、蓝湖标注qvod.jpg

5、蓝湖切图qvod.jpg



image.png