【前端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】——网站设计的重要知识点总结&思维导图(一)的更多相关文章
- UNIX系统编程知识点总结——思维导图
根据考纲整理了一下本学期系统编程课的知识点,并且做成了思维导图便于理解和记忆 主要都是一些比较入门的知识点,UNIX博大精深,每一个知识点其实都能深挖 因为博客园不可能直接出思维导图,本文的主要内容都 ...
- JavaScript常用知识点整理——思维导图
如图 思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/b8327462051289 有道云笔记图片链接 http://note.youdao.com/ ...
- 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
- web前端开发初学者必看的学习路线(附思维导图)
很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取.看完网友高等游民白乌鸦无私分享的原标题为<写给同事的前端学习路线>这篇文章,相信你会有所收获 ...
- unity知识点思维导图
写了个思维导图,总结了下学习unity的知识点感觉还有其他很多的没写到,等我慢慢在工作中完善它,这是下面的链接,后续会根据他的每一个细节来丰富我的博客. 详细地址: http://naotu.baid ...
- vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图
vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现.目前已实际应用于滴滴四大金融业务板块的1 ...
- XPath知识点简单总结(思维导图)
XPath是一种用于在XML文档中查找信息的语言,其对HTML也有很好的支持,所以在网络爬虫中可用于解析HTML文档.参考链接. 下图是XPath知识点的简单总结成思维导图:
- FS系统开发设计(思维导图)
FS系统开发设计(思维导图) 最近做了一个小系统,公司应急,要对各个部门进行费用成本核算分摊,做运维,苦于无奈,简简单单的设计了一下,模仿用友ERP软件,首先对DB进行了初步设计,总体如下: 未完 ...
- 思维导图工具 & 原型设计工具
最近需要画出系统流程架构什么的,就用到了几个思维导图工具 1. XMind -- 思维导图工具 2. MindManager -- 思维导图工具 3. AXURE RP --原型设计工具
随机推荐
- Unity Destory
Object.Destroy public static function Destroy(obj: Object, t: float = 0.0F): void; public static ...
- PHP数组运算符
PHP数组预算符有==(等于),===(恒等于),!=(不等于),<>(不等于),+(联合): 注意:没有-(减号)运算符: $a=array("a"=>&quo ...
- oracle sql*plus常用命令
一.sys用户和system用户Oracle安装会自动的生成sys用户和system用户(1).sys用户是超级用户,具有最高权限,具有sysdba角色,有create database的权限,该用户 ...
- 前后端分离,接口API,契约
前后端分离了,然后呢? http://icodeit.org/2015/06/whats-next-after-separate-frontend-and-backend/ Swagger - 前后端 ...
- 转自知乎(JAVA后台开发可以纯粹用JAVA SE吗?)
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:巴多崽链接:http://www.zhihu.com/question/29663744/answer/45154839来源: ...
- Docker入门之三容器
上一篇博客学习了下镜像,今天来学习容器.容器类似一个手机中的沙盒环境,用来运行app实例.和镜像一样也是对容器的创建.删除.导出等. 由于我买的参考书中的例子好多都是基于linux的,所以我将dock ...
- xcode7.3 iTunes Store operation failed解决
使用apploader上传程序 提示:如果您安装了XCode开发环境.在/Applications/XCode.app/Contents/Applications目录中可以找到Application ...
- Springmvc学习笔记(一)
一.sprinvmvc的介绍 1.1.Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全 ...
- unset与unlink
unset() -- 释放给定的变量 详见->http://www.kuqin.com/php5_doc/function.unset.html unlink() --删除文件 常用于用户 ...
- S2_SQL_第五章
UNIQUE|FULLTEXT|SPATIAL:分别表示唯一索引,全文索引和空间索引,为可选参数index_name;指定索引名称table_name;指定创建索引表名colymn_name;指定需要 ...