前言:网页美术设计具有四大特点,分别为交互性、整合性、多维性以及动态性。完整的网页设计既需要试听元素,也需要版式设计,以求有效的传达信息。在设计的时候,设计者要学会利用框架,也要学会打破框架。


一、优秀网页设计的特征

 

1、主题信息传达明确

      单纯、简练、清晰和精确

  • 符合视觉习惯和逻辑规律、文本条理化、样式化处理
  • 形式美法则,图片色彩版式条理化(空间层次,主从关系,视觉秩序)
  1. 整齐排列
  2. 切割
  3. 整体性和多边性

2、网站内容与视觉形式统一

  • 内容:功能主题文本、图片、视频
  • 形式:版式风格、设计语言
  • 形式美:对比与调和、对称与平衡、节奏与韵脚、留白、美感
  • 将内容元素归类组合是显示内容的一种方式
  1. 结构统一、和谐、关系清晰、突出主次、对称/对齐
  2. 采用倒金字塔的形式:结论在开头,具体分层次

3、鲜明的整体设计风格

  • 以网页的设计为标准,可以评测基于网站性质和功能的使用性、构建策略、构建方法等,并观察其效果。
  1. 细节要素:结构、板式布局、形态、图形、色彩、动态效果
  2. 设计独创性、多样性、实验性:设计策略、网页主题、网页要素
  3. 网页的主要信息及功能的差异性
二、网页设计中的布局

1、链接方式

  • 树状链接结构
  1. 位置明确
  2. 不易相互跳转
  3. 适合小型
  • 星状链接结构
  1. 枢纽连接
  2. 随时跳转
  3. 例如:门户网站
  • 二者结合为宜

2、排版

  • 信息分出主次
  1. 首页应具备的信息:页头、页尾、Email地址、联系信息、版权信息
  • 借助工具
  1. grid(网格类工具)
  2. Frame(框架结构)- 分类
  3. Layer层 - 布局设计
  4. Table表格定位 - 分辨率问题
  • 字体
  1. 一般最小12像素  微软雅黑  特别情况可以到10像素
  2. 16*16点阵的仿宋字体   一行排列不超过35个字
  3. 行距合理  字体风格不要太多种(不超过3种)
三、网页设计中的创意

1、独创性

  • 怀疑因子
  • 抵抗因子
  • 自变因子

2、牵连性

  • 纵向牵连
  • 逆向牵连
  • 横向牵连

3、多向性

  • 散发机制
  • 换元机制
  • 创优机制

4、跃进性

  • 加大思维推理活动的跨度

5、综合性

  • 杂交能力
  • 统摄能力
  • 辩证分析能力
四、网页设计中的几何图形

1、点

  • 无序/规律  →  形成线
  • 定向排列 →  韵律感
  • 分散定向排列的点 → 面
  • 大小不一,沿着相对方向聚合 → 动态效果
  • 大小相同位置整齐 → 均衡
  • 发射状 → 活泼轻松
  • 网页中任何单独而细小的部件,文件/按钮/图形都可以视为点,不仅仅限于图形
  • 注重情感:
  1. 水平对称并置  → 严谨和理性
  2. 曲线散点 → 自由轻松浪漫

2、线

  • 线的联想——平稳、不稳定、条理、圆润
  • 线的种类:直线、折线、抛物线、自由曲线、复合线、垂直、水平、倾斜、几何、自由线
  • 线的疏密变化:
  1. 等距等粗
  2. 粗细不同,距离不同   →  空间感
  3. 粗细相同,距离不同  →  纵深感
  4. 密集排列 →  形成面
  • 线的作用:
  1. 串联
  2. 分割版面
  • 文字也是线
  • 活用斜线是一个活跃页面,丰富版式的技能
  • 注重情感:
  1. 锐角 → 动荡 速度
  2. 平行 → 规律 平稳
  3. 垂直 → 庄严挺拔向上
  4. 曲线 → 流畅柔美

3、面

  • 注重情感:
  1. 几何面 → 规则、平稳、理性
  2. 自然型 → 生动、厚实(例如水果、蔬菜、人,与矢量的单薄产生强烈的反差)
  3. 偶然型 → 自由、活泼、哲理性(例如水、火、手撕状,联想;偶然型还可以破边)
  4. 人造型 → 富含哲理(与几何形形成反差)

注:转载请注明出处

【前端GUI】——网站设计的重要知识点总结&思维导图(一)的更多相关文章

  1. UNIX系统编程知识点总结——思维导图

    根据考纲整理了一下本学期系统编程课的知识点,并且做成了思维导图便于理解和记忆 主要都是一些比较入门的知识点,UNIX博大精深,每一个知识点其实都能深挖 因为博客园不可能直接出思维导图,本文的主要内容都 ...

  2. JavaScript常用知识点整理——思维导图

    如图 思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/b8327462051289 有道云笔记图片链接 http://note.youdao.com/ ...

  3. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  4. web前端开发初学者必看的学习路线(附思维导图)

    很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取.看完网友高等游民白乌鸦无私分享的原标题为<写给同事的前端学习路线>这篇文章,相信你会有所收获 ...

  5. unity知识点思维导图

    写了个思维导图,总结了下学习unity的知识点感觉还有其他很多的没写到,等我慢慢在工作中完善它,这是下面的链接,后续会根据他的每一个细节来丰富我的博客. 详细地址: http://naotu.baid ...

  6. vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图

    vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现.目前已实际应用于滴滴四大金融业务板块的1 ...

  7. XPath知识点简单总结(思维导图)

    XPath是一种用于在XML文档中查找信息的语言,其对HTML也有很好的支持,所以在网络爬虫中可用于解析HTML文档.参考链接. 下图是XPath知识点的简单总结成思维导图:

  8. FS系统开发设计(思维导图)

      FS系统开发设计(思维导图) 最近做了一个小系统,公司应急,要对各个部门进行费用成本核算分摊,做运维,苦于无奈,简简单单的设计了一下,模仿用友ERP软件,首先对DB进行了初步设计,总体如下: 未完 ...

  9. 思维导图工具 & 原型设计工具

    最近需要画出系统流程架构什么的,就用到了几个思维导图工具 1. XMind -- 思维导图工具 2. MindManager -- 思维导图工具 3. AXURE RP --原型设计工具

随机推荐

  1. composer设置忽略版本匹配

    composer install 时遇到错误: Your requirements could not be resolved to an installable set of packages. 原 ...

  2. python 脚本开发实战-当当亚马逊图书采集器转淘宝数据包

    开发环境python2.7.9 os:win-xp exe打包工具pyinstaller 界面tkinter ============================================= ...

  3. TCHAR

    定义 TCHAR :通过define 定义的字符串宏 因为C++支持两种字符串:常规的ANSI编码 (使用""包裹).Unicode编码(使用L" "包裹).因 ...

  4. java数据库编程之数据库的设计

    第一章:数据库的设计 1.1:为什么需要规范数据库的设计 1.1.1:什么是数据库设计 数据库设计就是将数据中的数据实体及这些数据实体之间的关系,进行规范和结构的过程. 1.1.2:数据库设计非常重要 ...

  5. d01

    基础 <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf- ...

  6. (转)Python-正则表达式

    在前面我们已经搞定了怎样获取页面的内容,不过还差一步,这么多杂乱的代码夹杂文字我们怎样把它提取出来整理呢?下面就开始介绍一个十分强大的工具,正则表达式! 1.了解正则表达式 正则表达式是对字符串操作的 ...

  7. 使用Kotlin开发第一个Android应用

    直奔主题 第一步:为AndroidStudio安装Kotlin插件 在线安装步骤:File—>Settings—>Plugins—>Install JetBrains plugin… ...

  8. C# 使用itextsharp 读取pdf中文字坐标

      程序调用: using iTextSharp.text.pdf; using System; using System.Collections.Generic; using System.Linq ...

  9. Hadoop(九)Hadoop IO之Compression和Codecs

    前言 前面一篇介绍了Java怎么去查看数据块的相关信息和怎么去查看文件系统.我们只要知道怎么去查看就行了!接下来我分享的是Hadoop的I/O操作. 在Hadoop中为什么要去使用压缩(Compres ...

  10. win10 uwp 如何让一个集合按照需要的顺序进行排序

    虽然这是 C# 的技术,但是我是用在 uwp ,于是就把标题写这个名.有一天,我的小伙伴让我优化一个列表.这个列表是 ListView 他绑定了一个 ObservableCollection 所以需要 ...