前端GUI——网站设计的重要知识点总结&思维导图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端GUI——网站设计的重要知识点总结&思维导图相关的知识，希望对你有一定的参考价值。
前言：网页美术设计具有四大特点，分别为交互性、整合性、多维性以及动态性。完整的网页设计既需要试听元素，也需要版式设计，以求有效的传达信息。在设计的时候，设计者要学会利用框架，也要学会打破框架。
| 一、优秀网页设计的特征 |
1、主题信息传达明确
单纯、简练、清晰和精确
- 符合视觉习惯和逻辑规律、文本条理化、样式化处理
- 形式美法则，图片色彩版式条理化（空间层次，主从关系，视觉秩序）
- 整齐排列
- 切割
- 整体性和多边性
2、网站内容与视觉形式统一
- 内容：功能主题文本、图片、视频
- 形式：版式风格、设计语言
- 形式美：对比与调和、对称与平衡、节奏与韵脚、留白、美感
- 将内容元素归类组合是显示内容的一种方式
- 结构统一、和谐、关系清晰、突出主次、对称/对齐
- 采用倒金字塔的形式：结论在开头，具体分层次
3、鲜明的整体设计风格
- 以网页的设计为标准，可以评测基于网站性质和功能的使用性、构建策略、构建方法等，并观察其效果。
- 细节要素：结构、板式布局、形态、图形、色彩、动态效果
- 设计独创性、多样性、实验性：设计策略、网页主题、网页要素
- 网页的主要信息及功能的差异性
| 二、网页设计中的布局 |
1、链接方式
- 树状链接结构
- 位置明确
- 不易相互跳转
- 适合小型
- 星状链接结构
- 枢纽连接
- 随时跳转
- 例如：门户网站
- 二者结合为宜
2、排版
- 信息分出主次
- 首页应具备的信息：页头、页尾、Email地址、联系信息、版权信息
- 借助工具
- grid（网格类工具）
- Frame（框架结构）- 分类
- Layer层 - 布局设计
- Table表格定位 - 分辨率问题
- 字体
- 一般最小12像素 微软雅黑 特别情况可以到10像素
- 16*16点阵的仿宋字体 一行排列不超过35个字
- 行距合理 字体风格不要太多种（不超过3种）
| 三、网页设计中的创意 |
1、独创性
- 怀疑因子
- 抵抗因子
- 自变因子
2、牵连性
- 纵向牵连
- 逆向牵连
- 横向牵连
3、多向性
- 散发机制
- 换元机制
- 创优机制
4、跃进性
- 加大思维推理活动的跨度
5、综合性
- 杂交能力
- 统摄能力
- 辩证分析能力
| 四、网页设计中的几何图形 |
1、点
- 无序/规律 → 形成线
- 定向排列 → 韵律感
- 分散定向排列的点 → 面
- 大小不一，沿着相对方向聚合 → 动态效果
- 大小相同位置整齐 → 均衡
- 发射状 → 活泼轻松
- 网页中任何单独而细小的部件，文件/按钮/图形都可以视为点，不仅仅限于图形
- 注重情感：
- 水平对称并置 → 严谨和理性
- 曲线散点 → 自由轻松浪漫
2、线
- 线的联想——平稳、不稳定、条理、圆润
- 线的种类：直线、折线、抛物线、自由曲线、复合线、垂直、水平、倾斜、几何、自由线
- 线的疏密变化：
- 等距等粗
- 粗细不同，距离不同 → 空间感
- 粗细相同，距离不同 → 纵深感
- 密集排列 → 形成面
- 线的作用：
- 串联
- 分割版面
- 文字也是线
- 活用斜线是一个活跃页面，丰富版式的技能
- 注重情感：
- 锐角 → 动荡 速度
- 平行 → 规律 平稳
- 垂直 → 庄严挺拔向上
- 曲线 → 流畅柔美
3、面
- 注重情感：
- 几何面 → 规则、平稳、理性
- 自然型 → 生动、厚实（例如水果、蔬菜、人，与矢量的单薄产生强烈的反差）
- 偶然型 → 自由、活泼、哲理性（例如水、火、手撕状，联想；偶然型还可以破边）
- 人造型 → 富含哲理（与几何形形成反差）
注：转载请注明出处
以上是关于前端GUI——网站设计的重要知识点总结&思维导图的主要内容，如果未能解决你的问题，请参考以下文章