网页设计入门规范教学方案
2022-10-21 15:38:58 0 举报AI智能生成
网页设计入门规范教学方案
作者其他创作
大纲/内容
网页规范
网页宽度为1920 高度不限，有效可视区：950px~1200px宽度，具体尺寸根据项目，客户要求以及用户群决定
首屏高约为700-750PX 主体内容区域1200
文档建立：文件宽度为1920PX 高度不限，RGB颜色模式， 分辨率72
字体规范
中文常用字体：宋体-字体样式(无)、微软雅黑-字体样式(Windows LCD)、苹方(MAC)
英文常用字体：Times NewRoman、Arial、sans
导航文字大小：14px、16px、18px、20px
正文内容：12px、14px
标题：22px、24px、26px、28px、30px
辅助信息：12px、14px
英文字常用字号
标题和内容文字10-16px;中英文结合最小12px
全英文网站最小10px
段落字体格式
网页页面等级
首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
注意：网站的首页只能有一个
二级页面：从首页点击进入之后的页面叫做二级页面
三级页面：从二级页面点击进入的页面
网页常见板块划分
头部区域-----top或header，Logo、主导航、搜索、注册、登录、版本等信息
主视觉区----banner，展示公司品牌形象、新品宣传、主题活动等轮播大图
主要内容区---main，新闻动态、产品与服务、公司介绍等
底部信息区---footer，网站地图、联系我们、版权信息、ICP备案号等信息
网页的颜色
来自于LOGO的颜色
来自于环境的颜色
来自于产品的颜色
公式：随意选择四个颜色，调整四个颜色的明度和直线色相
选择一个符合你产品的任意颜色图片，然后在这个图片中提出出来四中颜色，来作为网页的主色调
网页设计需注意的问题
高清大图，图片不能有水印
有图片的位置最好配有文字说明不要大篇幅的图片摆放
文字排版，标点符号不能在一行的第一个，不要一个文字为独立的一行
如果色块中有文字，文字必须在色块的中心，不能上或者下留有太多空白空间
如果箭头朝下必须有下拉菜单，如果下拉菜单是合起的状态，箭头朝右
banner不能是现成的图片，需要进行合成和设计，也需要有文字的极差关系和对比
产品分类中必须有不同的产品体现
在每一个板块中都必须体现明显的连接
在网页设计中不要有重复图片，每个图片必须有一个部分是完整的
图片素材不要直接用设计好的图片
在板块中不要有纯图片的设计，一定有文字解释，有链接
一个版块内的图片要选择同一种类型
图片距离文字不要过近
布局的原则
协调
一致
流动
均衡
强调
行为（JavaScript）
表现（CSS）
作用
改变颜色、大小、背景、外观
语法格式
使用方式
内联样式表
文档样式表
外部样式表
选择器
基本选择器
元素选择器
类选择器
ID选择器
组合选择器
通用选择器
复杂选择器
层次选择器
属性选择器
伪类选择器
属性
文字属性
文本属性
颜色和背景
结构（HTML）
分类
内容
数据
文本
图片
网页设计中的几何图形
点
无序/规律 → 形成线
定向排列 → 韵律感
分散定向排列的点 → 面
大小不一，沿着相对方向聚合 → 动态效果
大小相同位置整齐 → 均衡
发射状 → 活泼轻松
网页中任何单独而细小的部件，文件/按钮/图形都可以视为点，不仅仅限于图形
注重情感
水平对称并置 → 严谨和理性
曲线散点 → 自由轻松浪漫
线
线的联想——平稳、不稳定、条理、圆润
线的种类：直线、折线、抛物线、自由曲线、复合线、垂直、水平、倾斜、几何、自由线
线的疏密变化
等距等粗
粗细不同，距离不同 → 空间感
粗细相同，距离不同 → 纵深感
密集排列 → 形成面
线的作用
串联
分割版面
文字也是线
活用斜线是一个活跃页面，丰富版式的技能
注重情感
锐角 → 动荡 速度
平行 → 规律 平稳
垂直 → 庄严挺拔向上
曲线 → 流畅柔美
面
注重情感
几何面 → 规则、平稳、理性
自然型 → 生动、厚实（例如水果、蔬菜、人，与矢量的单薄产生强烈的反差）
然型 → 自由、活泼、哲理性（例如水、火、手撕状，联想；偶然型还可以破边）
人造型 → 富含哲理（与几何形形成反差）
网页设计中的创意
独创性
怀疑因子
抵抗因子
自变因子
牵连性
纵向牵连
逆向牵连
横向牵连
多向性
散发机制
换元机制
创优机制
跃进性
加大思维推理活动的跨度
综合性
杂交能力
统摄能力
辩证分析能力
网页设计中的布局
链接方式
树状链接结构
位置明确
不易相互跳转
适合小型
星状链接结构
枢纽连接
随时跳转
例如：门户网站
二者结合为宜
排版
信息分出主次
首页应具备的信息：页头、页尾、Email地址、联系信息、版权信息
借助工具
grid（网格类工具）
Frame（框架结构）- 分类
Layer层 - 布局设计
Table表格定位 - 分辨率问题
字体
一般最小12像素 微软雅黑 特别情况可以到10像素
16*16点阵的仿宋字体 一行排列不超过35个字
行距合理 字体风格不要太多种（不超过3种）
优秀网页设计的特征
主题信息传达明确
单纯、简练、清晰和精确
符合视觉习惯和逻辑规律、文本条理化、样式化处理
形式美法则，图片色彩版式条理化（空间层次，主从关系，视觉秩序）
整齐排列
切割
整体性和多边性
网站内容与视觉形式统一
内容：功能主题文本、图片、视频
形式：版式风格、设计语言
形式美：对比与调和、对称与平衡、节奏与韵脚、留白、美感
将内容元素归类组合是显示内容的一种方式
结构统一、和谐、关系清晰、突出主次、对称/对齐
采用倒金字塔的形式：结论在开头，具体分层次
鲜明的整体设计风格
以网页的设计为标准，可以评测基于网站性质和功能的使用性、构建策略、构建方法等，并观察其效果
细节要素：结构、板式布局、形态、图形、色彩、动态效果
设计独创性、多样性、实验性：设计策略、网页主题、网页要素
网页的主要信息及功能的差异性
网页布局
“国”字型
拐角型
标题正文型
封面型
“T”结构布局
“口”型布局
“三”型布局
对称对比布局
POP布局
注意问题
页面内容新颖
及时更新网页
注意视觉效果
随时注意升级
善用表格布局
考虑浏览器兼容性
网页风格统一
网页具有交互功能
设计流程
主题明确
设计思路
简洁实用
实用方便
整体性好
网站形象突出
交互性强
版式设计
色彩作用
三维空间的构成
导向清晰
反馈与沟通
测试改进
内容更新
设计分类
功能型网页设计
形象型网页设计
信息型网页设计
0 条评论
下一页
