本书主要内容包括UI设计基础、用户体验、UI设计风格、设计原则、设计配色、设计规范、图标设计、App界面设计、网站设计等常见、常用的界面设计制作过程与工作原理。本书以基本概念讲解为基础，结合实际案例分析，搭配设计案例视频制作，帮助初学者熟悉软件环境，消除初学者对设计软件工具难以驾驭的担心。
本书主要面向处于求学阶段的设计学类的学生及由其他专业转向界面设计的人员。本书所涉及的案例均提供相应的讲解视频、PPT文件，为教学互动提供较为全面的技术支持。

第1章 UI设计基础
1.1 认识UI
1.1.1 PC端设计与移动端UI设计的区别
1.1.2 响应式网页设计与自适应网页设计
1.1.3 UI设计基础概念
1.1.4 UI设计常用工具
1.2 UI设计与用户体验概述
1.2.1 交互设计是什么
1.2.2 UX(用户体验)设计概述
1.3 UI设计风格
1.3.1 扁平化
1.3.2 拟物化
1.4 UI设计原则
1.4.1 经典设计法则在UI设计中的应用
1.4.2 格式塔心理学在UI设计中的应用
1.5 基于移动App的设计配色
1.5.1 色彩搭配法则
1.5.2 色彩风格举例
1.6 如何建立一套UI设计规范
1.6.1 色彩控件规范
1.6.2 按钮控件规范
1.6.3 分割线规范
1.6.4 头像规范
1.6.5 文字规范
1.6.6 间距规范
1.6.7 图标规范
第2章 图标
2.1 图标的概念
2.2 图标的类型
2.2.1 工具图标
2.2.2 启动图标
2.3 图标的格式
2.4 图标设计工具Adobe illustrator
2.4.1 文件的创建
2.4.2 矢量图形工具
2.4.3 属性面板
2.4.4 圆角工具
2.4.5 路径查找器
2.4.6 形状生成工具
第3章 工具图标的设计
3.1 工具图标的规范
3.1.1 表意准确
3.1.2 一致性
3.1.3 格线系统
3.2 线性图标的设计
3.2.1 搜索图标
3.2.2 聊天图标
3.2.3 眼睛图标
3.2.4 心形图标
3.2.5 卡券图标
3.2.6 房屋图标
3.3 面性图标的设计
3.3.1 搜索图标
3.3.2 聊天图标
3.3.3 眼睛图标
3.3.4 心形图标
3.3.5 卡券图标
3.3.6 房屋图标
第4章 启动图标的设计
4.1 启动图标的设计规范
4.1.1 启动图标的规格
4.1.2 启动图标的格线系统
4.2 工具型启动图标设计
4.3 文字型启动图标设计
4.4 轻拟物型启动图标设计
第5章 移动端界面设计案例
5.1 认识 App
5.1.1 App的基本设计原则
5.1.2 iOS及Android系统界面设计规范
5.2 App界面设计流程——以图片分享App为例
5.2.1 交互流程设计
5.2.2 风格定位
5.2.3 功能图标设计
5.2.4 界面视觉效果整体优化
5.2.5 应用图标设计
5.2.6 完善App页面
5.3 电商类App设计
5.3.1 首页设计
5.3.2 首页中海报栏的制作
5.3.3 首页中图标区的制作
5.3.4 首页中头条板块的制作
5.3.5 弹出页面设计
5.3.6 个人中心设计
5.4 音乐类App设计
5.4.1 音乐播放页面设计
5.4.2 音乐类App首页设计
第6章 网站界面设计
6.1 网站设计的工作流程
6.1.1 原型图
6.1.2 视觉稿
6.1.3 设计规范
6.1.4 切图
6.1.5 前端代码
6.1.6 视觉走查(走查工具)
6.2 网站类型
6.2.1 门户网站
6.2.2 企业网站
6.2.3 产品网站
6.2.4 电商网站
6.2.5 游戏网站
6.2.6 专题页面
6.2.7 视频网站
6.2.8 移动端H5
6.2.9 后台网站
6.2.10 CRM系统
6.2.11 SaaS服务
6.3 网站组成
6.3.1 首页
6.3.2 二级页面
6.3.3 详情页
6.3.4 广告
6.3.5 Footer区域
6.4 技术原理
6.4.1 基于鼠标的交互
6.4.2 静态网页
6.4.3 前端开发语言
6.4.4 动态网页
6.4.5 雪碧图
6.4.6 视差滚动
6.5 网页设计规范
6.5.1 画板尺寸
6.5.2 文字规范
6.5.3 图片规范
6.5.4 按钮
6.5.5 表单
6.6 网页栅格设计原理和技巧
6.6.1 网页栅格系统的必要性
6.6.2 栅格系统的基础概念
6.6.3 怎样建立网页栅格
6.7 利用栅格系统实现响应式设计
6.7.1 什么是响应式
6.7.2 响应式的目的
6.7.3 为何利用栅格系统进行响应式设计
6.7.4 利用栅格系统实现响应式设计的步骤
6.7.5 栅格化工具推荐
6.7.6 常见问题解答
参考文献