网站设计的重要知识点总结&思维导图(二)

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


 

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

 

 

 

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、背景处理

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

本文转自:https://www.cnblogs.com/ljq66/p/7784170.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注