UI像素的艺术 从零开始学UI设计 基础篇

课程1 学习前的准备

1 掌握Sketch软件（视频教学） /015

2 掌握Illustrator软件（视频教学） /015

3 掌握Principle软件（视频教学） /016

4 掌握After Effects软件（视频教学） /016

5 掌握Keynote软件（视频教学） /017

6 掌握Photoshop软件（视频教学） /017



课程2 学习设计的通用方法

1 从临摹到创造的设计学习通路 /019

2 纠正设计学习的误区 /020

3 作业：临摹一组控件 /022



课程3 开脑洞！设计师必须看完的信息源

1 站酷网 /025

2 Dribbble /026

3 Behance /027

4 花瓣网 /028

5 Unsplash /028

6 The FWA /029

7 作业：设计一款App的功能 /030

8 作业：制作登录注册界面（UI100Day） /030



课程4 了解行业

1 UI＆UE /036

2 UI设计的基本工作流程 /036

3 互联网产品的团队组成及其工作内容 /040

4 UI的分类 /042

5 UI设计师的多种职业定位 /044

6 用户体验（UE）设计师的**技能 /045

7 UE工作落地内容 /048

8 UE设计师成长须知 /053

9 中国互联网产品现状 /055

10 作业：制作聊天界面（UI100Day） /057



课程5 有源设计

1 什么是有源设计 /062

2 审美要用“好图”来“养” /062

3 看过之后要归纳总结——设计风格整理 /070

4 从画面中挖掘出更多的信息——设计细节的把控 /075

5 提升设计能力的必然路径——有源设计 /076

6 UI中的有源设计 /079

7 作业：制作工作规划界面（UI100Day） /083

8 作业：制作天气界面（UI100Day） /087

9 作业：制作日历界面（UI100Day） /093



课程6 构图和色彩

1 什么是构图 /098

2 构图心理学 /099

3 构图的技巧 /101

4 排版原理 /102

5 色彩 /109

6 色彩搭配在界面中的运用 /113

7 配色灵感捕获 /116

8 配色网站推荐 /117

9 作业：临摹“好好住”App的界面 /118



课程7 图标设计

1 图标的分类 /127

2 图标的发展趋势 /128

3 图标设计需遵循的要点 /132

4 图标案例分析 /132

5 图标设计规范 /133

6 Dribbble上一些值得推荐的图标设计大咖 /138

7 如何临摹装饰性图标 /139

8 作业：微信图标Redesign /144

9 作业：制作30个图标 /150

10 作业：制作快递进度查询界面（UI100Day） /155

11 作业：制作10个图标 /160

12 作业：制作6个装饰性图标 /166

13 作业：制作装饰性头像 /171

14 作业：制作启动页（UI100Day） /174

15 作业：制作视频播放器界面（UI100Day） /179



课程8 字体设计

1 中西文字体的分类 /185

2 GUI的起源 /193

3 UI字体需要注意的问题 /194

4 界面字体 /200

5 艺术字体推荐 /205

6 栅格化设计 /206

7 英文字体设计 /209

8 中文字体设计 /210

9 为什么总说中文排版比英文排版更难 /214

10 中文字体在设计中的应用原则 /216

11 常用的字库推荐 /218

12 字体相关的网站推荐 /221

13 作业：字体测量 /227



课程9 Banner设计

1 Banner的设计目的 /232

2 Banner的构图方式 /232

3 Banner的配色技巧 /234

4 Banner的字体选择 /236

5 Banner的文字排版 /239

6 文字排版的视觉效果优化技巧 /243

7 装饰搭配 /248

8 Banner修改前后的对比 /249

9 情绪版Banner /251

10 作业：制作Banner原型 /254

11 作业：设计制作Banner1 /255

12 作业：设计制作Banner2 /256

13 作业：设计制作Banner3 /257

14 作业：制作Banner规范 /274