网页设计技巧与规范

TOP
微软雅黑14px、16px
KV
广wk.baidu.com栏
字体的选择与产品的特征及环境要 相适应
KV
内容
正文12、14宋体
BOTTOM
底栏
这些不是网页的重点，明度调低 亮度的等级变化
字体的运用
同样等级的字体大小统一
朴实正常符合大众口味
以偶数结尾（12、14、16……）
字体的统一性 字间距、行间距（12号字、行间距22-24）
4.视觉的一致性
（间距、边距、元素尺寸）
每个人都有自己的设计风格、望你们尽快找到属于你们自己的特色！！！
包括字体的格式、大小都不是一层不变的
反正就是多多练习吧
2K屏：2060*1440 4K屏：4096*2160、4096*3112、3656*2664、3840*2160 16:9 电视机 显示器
KV端：页面尺寸1920*980（1000*1100*1200）px
网页配色
色彩三要素：色相、饱和度、明度
Ctrl+U
色环：补色180度 对比色120度 中度色90度
网页（web）的基础知识与设计
视觉设计
前端开发
后台开发
网页效果图展示
Html（htm、xhtml）结 尾属于静态页面 Asp、aspx、php结尾的 为动态页面，只能后台 修改
编程
补充：
JS：动画制作，不是很炫，用的地方比较多
H5：功能更加强大，操作更加简单，建立在Flash的基础上，动画表现力比较强
网页 元素
1.文本 2.图像 3.超级链接 4.导航栏 5.动画
种类
1.企业形象 2.电商平台 3.产品展示 4.社区（门户）平台（雅虎） 5.个人展示 6.政府机构
访问机构
首页 栏目页 详细页 专题页
7.行业信息
8.娱乐休闲 9.个性化网站
网站板块
顶部（top）
广告（KV）——banner
内容（con）
网站类型:
自适应网站：缩放时有滚动条，元素大小没有改变，画面变化不大 （被动式响应设计）
响应式网站：缩放时主题元素有所改变，中间元素没有变
（主动式响应设计）
HEML网页布局:
静态布局：即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查
阅被遮掩部分；对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。
使用高对比颜色
避免特殊性颜色（蓝色给人的感觉就是超链接） 字体中间划一杠（避免超链接）
网页中字体的数量不超过3种
网站设计思路
主题
突出方向 关键词提取 发散思维 找素材 强调点
想象场景
http://so.uehtml.com（总站）
内页设计
1.风格，元素的统一 2.顶部，logo、导航、搜索 3.字体、板式、色彩
流式布局：流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题 是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。 适应布局：自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生 改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一 个系列。 响应布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素 宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合
版权（bottom）
px——像素（电脑显示领域、网页设计） Pt——点（打印）
衬线字体——Times news roman（宋、楷） 无衬线字体——Arial Tahoma（黑、幼圆、微软）
等宽字体——courier
手写体——标题，logo 装饰字体——标题、创意性设计
知识进阶
屏幕尺寸：1920*1080、1366*768、1440*900