【前端GUI】——网站设计的重要知识点总结&思维导图（二）

前言：设计具有艺术性，但与艺术不同，艺术的服务对象是画家本人，设计的服务对象是用户。在网站设计中设计者要学会合理利用“眼眺”（眯眼保留的是重点）的方式，每个信息目标都是视觉刺激，要保证用户通行无阻。

---

 

一、网页设计中的图形图像

 

 

 

1、图像格式

• GIF格式：适合色彩单纯，层次较少的（透明通道较生硬）
• JPEG：压缩比非常高
• PNG：半透明情况必选（透明通道）

2、图形创意

• 意料之外，情理之中，从视觉转向心理层面的思考
• 以图形作为造型元素的说明性图画形象开始联想

1. 形似
2. 本质的共性，意向联想
3. 相对联想，逻辑意义
4. 因果联想

• 创意方法

1. 异型同构：不合逻辑的物型进行嫁接
2. 换置同构：偷梁换柱，组成部分的替代
3. 异质同构：材质替换

3、图形种类

• 聚集图形：单一形/相近型的反复整合构成新图像
• 无理图形：荒诞，隐藏含义，不现实的变为现实
• 渐变图形：节奏，韵律，逐渐演变
• 减缺图形：单一的视觉图像简化原图
• 文字图形：例如电影名称融入到海报中间

4、前期处理

• 外形处理

1. 方形  →  稳定、严谨
2. 三角形 → 锐利
3. 褪底图（抠图） → 生动活泼

• 面积

1. 大图 → 焦点
2. 小图 → 穿插字群中，简洁精致，点缀、转移视线

• 数量

1. 单幅图 → 突出、安定
2. 多幅图 → 对比、呼应

• 图底关系

1. 对比 → 衬托主要图形
2. 大面积背景虚化 → 突出按钮

• 图像文件的大小

1. 尺寸不影响质量的前提下越小越好（一般72分辨率）
2. 8位（256色）或24位颜色深度已足够

 

二、网页设计中的色彩

 

 

 

1、分类与属性

• 分类

1. 非彩色：黑白灰
2. 彩色：其他所有色彩

• 属性

1. 色相（Hae）：色环表示
2. 明度（Saturation）：明暗度，最高黄色，最低紫色
3. 饱和度（Value）：纯度或彩度、鲜艳程度，灰度越高，纯度越低
4. 纯色加黑，明度下降，纯色加白，明度上升，但纯度不变

• 配合

1. 同类色配合：指色相相同，但明度不同
2. 冷暖色配合
3. 中性色配合：黑、白、灰、金、银可以对互补色，对比较强的色彩进行调和
4. 元素相同，环境不同，底色不同，突出内容不同

2、对比和调和

• 色相对比：相邻色对比弱，相距远的色彩对比弱（对比中有调和）
• 明度对比：更明亮/更昏暗
• 纯度对比：有陪衬更鲜艳

1. 突出部分 → 饱和度增高
2. 背景（衬托）→  饱和度降低（灰、白）
3. 其它部分 →  饱和度降低

• 冷暖对比：对情感的影响很大

1. 冷 → 阴影、透明、镇静、稀薄、流动、远、轻、湿
2. 暖 → 日光、不透明、刺激、浓厚、固定、近、重、干

3、心理特征

• 同一颜色可以传递不同的情感

1. （加光效）紫色 →  魅惑、冷静
2. （加饱和度）紫色 → 平和、可爱、温馨
3. （偏蓝）紫色 → 清晰

• 同一颜色和不同颜色搭配效果不同

 

三、网页设计中的文字

 

 

1、设计排版

• 分类：动态字体、静态字体
• 技术 → 承载物 → 字体
• 骨（甲骨文） → 纸质（书法字体）→ 多媒体（屏幕显示） → 动态
• 编排和组合：文字图形化

2、表现特性

• 对抽象事物的表现能力？文字 VS 图像、图形

1. 主要指除去常规内容阅读文字之外的标题文字，是整个作品的灵魂

• 识别性

1. 适当调整字形笔画，掌握“度”
2. 剪切 → 例如切掉字母的底部，文字放在下面，读者的好奇心会使他们想看见图像的全部

• 艺术性

1. 均衡、统一
2. 页面间的联系，层次级关系

• 思想性

1. 从内容出发，概括精神内涵
2. 拉丁字母  →  饰线体、新罗马体（正文）→ 无饰线体、赫尔维梯卡体（标题）→ 装饰体

 

四、网页设计中的层次感

 

 

 

1、视觉效果

• 第一视觉：文案
• 第二视觉：人物和产品
• 第三视觉：背景

2、摄影原理

• 前实、后虚
• 前虚、中实、后虚
• 近景看虚幻、聚焦点抢眼球、远景看虚幻

3、快速打造空间层次感

• 雪花做个动感模糊
• 飞扬的雪花增加空间感
• 测射的素材
• 主题人物以外剪影化

4、背景处理

• 高斯模糊（底图）
• 叠加一层暗光（底图）
• 加色块（前图）
• 给字体添加特效（前图）
• 背景图冷色最好，冷色感觉远，暖色感觉近

 

---

 注：转载请注明出处