目录


第1章?网页UI元素设计
1.1　关于UI设计
1.1.1?什么是UI设计
1.1.2?什么是GUI设计
1.1.3?了解UE/UX
1.1.4?移动UI设计的崛起
1.2　网页UI构成元素
1.2.1?文字
1.2.2?图形符号
1.2.3?图像
1.2.4?多媒体
1.2.5?色彩
1.3　网页UI设计原则
1.3.1?以用户为中心
1.3.2?主题明确
1.3.3?视觉美观
1.3.4?内容与形式统一
1.3.5?有机的整体
1.4　网站Logo设计
1.4.1?Logo的特点
1.4.2?Logo的设计规范
1.4.3?Logo的表现形式
1.5　网页图标设计
1.5.1?了解网页图标
1.5.2?图标的设计原则
1.5.3?图标的应用
1.6　网页按钮设计
1.6.1?网页按钮的功能
1.6.2?如何设计出色的网页按钮
1.7　网页导航设计
1.7.1?了解网页导航
1.7.2?导航在网页中的布局位置
1.7.3?网页导航设计的基本原则
1.8　网页广告设计
1.8.1?网页广告的常见类型
1.8.2?如何设计出色的网页广告
1.9　课后练习
第2章?网页UI中的文字排版与图形设计
2.1　网页中的文字
2.1.1?关于字体
2.1.2?网页中常用的中文字体
2.1.3?字符大小
2.1.4?网页中文字的使用技巧
2.2　网页中文字的排版
2.2.1?文字排版的易读性规则
2.2.2?文字排版设计的常用手法
2.3　图形在网页UI中的作用
2.4　网页中的图形设计类型
2.4.1?插图
2.4.2?图形符号
2.4.3?照片
2.4.4?页面分割
2.4.5?立体图形
2.5　网页中图片的排列布局形式
2.5.1?大小统一的矩阵排列布局
2.5.2?大小不一的矩阵排列布局
2.5.3?瀑布流排列布局
2.5.4?下一张图片预览
2.6　课后练习
第3章?网页UI布局基础
3.1　了解网页UI布局
3.1.1?网页UI布局的目的
3.1.2?网页UI布局的操作顺序
3.2　网页UI布局的基本方法
3.2.1?网页UI布局的设计
3.2.2?网页UI布局的构成原则
3.3　网页UI布局的要点
3.4　根据整体内容位置决定的网页UI布局
3.4.1?满屏式布局
3.4.2?两栏式布局
3.4.3?三栏式布局
3.4.4?水平和垂直居中的布局
3.5　根据分割方向决定的网页UI布局
3.5.1?纵向分割布局
3.5.2?横向分割布局
3.5.3?纵向与横向复合型布局
3.5.4?运用固定区域的设计
3.6　初始页面的布局类型
3.7　课后练习
第4章?网页UI布局形态与视觉风格
4.1　网页功能与网页形态哪个更重要
4.2　网页UI布局形态的含义及情感
4.2.1?点
4.2.2?圆
4.2.3?三角形
4.2.4?矩形
4.2.5?菱形
4.2.6?直线
4.2.7?斜线
4.2.8?曲线
4.2.9?自由曲线
4.3　大众化网页UI布局形态
4.4　个性化网页UI布局形态
4.5　常见网页UI视觉风格
4.5.1?极简风格
4.5.2?简洁风格
4.5.3?扁平化风格
4.5.4?插画风格
4.5.5?怀旧风格
4.5.6?照片风格
4.5.7?立体化风格
4.5.8?大字体风格
4.6　课后练习
第5章?网页UI配色基础
5.1　色彩基础
5.1.1?色彩的产生
5.1.2?RGB颜色
5.1.3?CMYK颜色
5.2　色彩的属性
5.2.1?色相表现出不同的色彩印象
5.2.2?明度体现出色彩的明暗程度
5.2.3?纯度决定了色彩的鲜艳程度
5.3　有彩色与无彩色
5.4　影响画面总体色彩印象的要素——色调
5.5　网页UI配色的联想作用
5.5.1?色彩联想和心理效果
5.5.2?红色
5.5.3?橙色
5.5.4?黄色
5.5.5?绿色
5.5.6?青色
5.5.7?蓝色
5.5.8?紫色
5.5.9?黑色
5.5.10?白色
5.5.11?灰色
5.6　UI配色的基本步骤
5.6.1?明确产品的定位与目标
5.6.2?确定目标用户群体
5.6.3?分析竞争对手
5.6.4?产品测试
5.7　课后练习
第6章?网页UI元素的配色
6.1　色彩在网页UI中所扮演的角色
6.1.1?主题色——传递UI主题
6.1.2?背景色——支配UI整体情感
6.1.3?辅助色——营造独特的UI风格
6.1.4?点缀色——强调画面重点信息与功能
6.2　网页元素的色彩搭配
6.2.1?Logo与网页广告
6.2.2?导航菜单
6.2.3?背景与文字
6.2.4?链接文字
6.3　根据受众群体选择网页配色
6.3.1?不同性别的色彩偏好
6.3.2?不同年龄的色彩偏好
6.4　根据商品销售阶段选择网页配色
6.4.1?新产品上市期的网页配色
6.4.2?产品拓展期的网页配色
6.4.3?产品稳定销售期的网页配色
6.4.4?产品衰退期的网页配色
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.6.4?稳定、安静的网站配色
6.6.5?兴奋激昂的网站配色
6.6.6?轻快律动的网站配色
6.6.7?生动活力的网站配色
6.6.8?清爽自然的网站配色
6.6.9?高贵典雅的网站配色
6.6.10?成熟的网站配色
6.7　课后练习
第7章　网页UI配色基本方法
7.1　基于色相的配色方法
7.1.1?基于色相的配色关系
7.1.2?同类色配色
7.1.3?邻近色配色
7.1.4?相反色相、类似色调配色
7.1.5?相反色相、相反色调配色
7.1.6?渐变配色
7.2　基于色调的配色方法
7.2.1　基于色调的配色关系
7.2.2?相同或类似色相、类似色调配色
7.2.3?相同或类似色相、相反色调配色
7.3　融合配色使网页UI表现更加平稳
7.3.1?同明度配色使界面更融合
7.3.2?同纯度配色使界面更和谐
7.3.3?同类色单色调配色
7.3.4?暗浊色调配色
7.3.5?明艳色调配色
7.3.6?灰调配色
7.3.7?层次感配色
7.4　对比配色使网页UI表现更加强烈
7.4.1?色相对比
7.4.2　原色对比
7.4.3?间色对比
7.4.4?补色对比
7.4.5?冷暖对比
7.4.6?面积对比
7.4.7?主体突出的配色
7.5　表现网页UI情感印象的配色
7.5.1?暖色调配色
7.5.2?冷色调配色
7.5.3?高调的配色
7.5.4?低调的配色
7.5.5?健康的配色
7.5.6?警示的配色
7.6　课后练习
第8章　网页UI配色技巧
8.1　UI中色彩的作用与心理感受
8.1.1?UI中色彩的作用
8.1.2?应用色彩感觉进行配色
8.2　突出主题的配色技巧
8.2.1?使用高饱和度色彩烘托主题表现
8.2.2?通过留白突出UI主题
8.2.3?添加鲜艳色彩表现出UI活力
8.2.4?添加点缀色为UI带来亮点
8.2.5?通过色彩明度对比表现出层次感
8.2.6?抑制辅助色或背景
8.3　简约而不简单，黑白灰配色技巧
8.3.1?加入白色调和，使界面更轻盈、透气
8.3.2?加入黑色调和，使界面更稳重、大气
8.3.3?加入灰色调和，使UI更具有质感
8.3.4?综合运用黑白灰搭配
8.4　使用鲜艳的配色方案提升UI设计效果
8.4.1?提升UI内容的可读性和易读性
8.4.2?为交互元素应用鲜艳的色彩
8.4.3?鲜艳的色彩更易识别
8.4.4?营造氛围、传递情绪
8.4.5?网页UI表现更加时尚
8.5　网页UI深色背景的使用技巧
8.5.1?为什么实际应用深色背景的产品不多
8.5.2?深色背景的适用条件
8.5.3?深色背景的视觉风格
8.5.4?哪些类型的产品适合使用深色背景
8.5.5?使用深色背景需要考虑的问题
8.6　课后练习
习题答案