本书采用项目式编写方式,以通俗易懂的语言、丰富实用的案例、学练结合的讲解方式,系统全面、循序渐进地介绍了网页UI设计的相关知识。全书共10个项目,内容涵盖网页UI设计基础、网页色彩设计、网页布局设计、网页文字与图像设计、网页标志与导航设计、网页图标与按钮设计、网页广告设计、移动端网页UI设计、科技类网页UI设计、电商类网页UI设计。
本书可作为各类院校艺术设计和数字媒体艺术设计等相关专业学生的专用教材,也可供广大网页UI设计爱好者自学使用。
项目1 网页UI设计基础
项目导读
学习目标
项目准备
1.1 网页概述
1.1.1 网站和网页
1.1.2 网页的组成
1.1.3 网页的分类
1.2 网页UI设计概述
1.2.1 网页UI设计的概念
1.2.2 网页UI构成元素
1.2.3 网页UI设计常见尺寸
1.2.4 网页UI设计常用软件
1.3 网页UI设计流程
1.4 网页UI设计原则
1.5 网页UI设计风格
1.6 AIGC在网页UI设计中的应用
项目实施——赏析优秀网页
项目实训
项目考核
项目评价
项目2 网页色彩设计
项目导读
学习目标
项目准备
2.1 色彩三要素
2.1.1 色相
2.1.2 饱和度
2.1.3 明度
2.2 常见的颜色模式
2.2.1 RGB颜色模式
2.2.2 CMYK颜色模式
2.2.3 HSB颜色模式
2.2.4 Lab颜色模式
2.2.5 灰度模式
2.3 色彩的象征意义
2.3.1 红色
2.3.2 橙色
2.3.3 黄色
2.3.4 绿色
2.3.5 蓝色
2.3.6 紫色
2.3.7 黑色
2.3.8 白色
2.3.9 灰色
2.4 网页中的色彩角色
2.4.1 主色
2.4.2 辅助色
2.4.3 点缀色
2.4.4 背景色
2.5 网页配色技巧
2.5.1 同类色搭配
2.5.2 近似色搭配
2.5.3 对比色搭配
2.5.4 互补色搭配
项目实施——设计家居类网页配色 方案并上色
项目实训
项目考核
项目评价
项目3 网页布局设计
项目导读
学习目标
项目准备
3.1 网页布局概述
3.2 常见网页布局类型
3.2.1 单列型布局
3.2.2 国字形布局
3.2.3 拐角型布局
3.2.4 POP型布局
3.2.5 全景型布局
3.2.6 标题文本型布局
3.2.7 对称型布局
3.2.8 分割型布局
3.2.9 组合型布局
3.3 网页布局设计原则
3.4 网页布局设计技巧
3.4.1 延伸
3.4.2 曲线
3.4.3 过渡
3.4.4 隐藏
3.4.5 层叠
3.4.6 错位
项目实施——设计摄影类交流平台的 网页布局
项目实训
项目考核
项目评价
项目4 网页文字与图像设计
项目导读
学习目标
项目准备
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 网页图像设计技巧
项目实施——使用豆包辅助设计电商类网页产品详情页主图
项目实训
项目考核
项目评价
项目5 网页标志与导航设计
项目导读
学习目标
项目准备
5.1 网页标志设计
5.1.1 标志概述
5.1.2 标志设计原则
5.1.3 标志制图方法
5.2 网页导航设计
5.2.1 导航概述
5.2.2 导航在网页中的位置
5.2.3 导航设计注意事项
项目实施1——设计医药类网页标志
项目实施2——设计游戏类网页侧边导航
项目实训
项目考核
项目评价
项目6 网页图标与按钮设计
项目导读
学习目标
项目准备
6.1 网页图标设计
6.1.1 图标概述
6.1.2 图标设计流程
6.1.3 图标设计原则
6.2 网页按钮设计
6.2.1 按钮概述
6.2.2 按钮设计原则
项目实施1——设计购物车图标
项目实施2——设计点击进入按钮
项目实训
项目考核
项目评价
项目7 网页广告设计
项目导读
学习目标
项目准备
7.1 广告概述
7.2 网页广告类型
7.2.1 Banner
7.2.2 悬浮广告
7.2.3 弹窗广告
7.3 网页广告构图方式
7.3.1 对称式构图
7.3.2 对角线构图
7.3.3 平铺式构图
7.3.4 放射式构图
7.4 网页广告设计原则
项目实施——使用即梦AI辅助设计口红标准Banner
项目实训
项目考核
项目评价
项目8 移动端网页UI设计
项目导读
学习目标
项目准备
8.1 移动端网页UI设计概述
8.2 移动端网页UI设计常见尺寸
8.2.1 Android操作系统
8.2.2 iOS操作系统
8.3 移动端网页布局类型
8.4 移动端网页导航类型
8.5 移动端网页广告类型
8.5.1 信息流广告
8.5.2 插屏广告
项目实施——设计创意设计类移动端网页首页
项目实训
项目考核
项目评价
项目9 科技类网页UI设计
项目导读
学习目标
项目准备
项目分析
项目实施
项目评价
项目10 电商类网页UI设计
项目导读
学习目标
项目准备
项目分析
项目实施
项目评价
参考文献