浅谈网页设计.ppt

浅谈 ByMargaret 网页设计 基本元素基本规范参考指南案例欣赏 目录 基本元素 基本规范 1 网页基本宽度 保守设置 1024x768台式电脑 平板电脑 960px一般设置 1280 x800 1366x768笔记本 1000px大屏设置 分辨率大于1280 x800 1200px 案例 淘宝 1000px 京东 1210px 花瓣 1407px 基本规范 2 文字 文本规范 总体原则 提高文字的辨识性和页面的易读性 文字大小 建议使用12号 14号字体的混合搭配 13号也可酌情考虑 因为13号字体的不对称性 目前非主流 需突出的内容部分 新闻标题 栏目标题等多使用14号字体广告内容 辅助信息或介绍性文字等多使用12号字体避免大面积使用加粗字体 特别注意 菜单尽量不使用12号加粗 这样会导致复杂的文字难以辨认 多采用14号加粗 基本规范 2 文字 文本规范 总体原则 提高文字的辨识性和页面的易读性 2 文字颜色 同一网站需要定出主文字颜色 特殊情况下可以有2种左右的辅助文字颜色 一般情况下字体变化不要超过三种 若有需要 可以尽量采用统一字体的不同字族 正文的文字颜色多采用深蓝色或深灰色 当使用其他颜色作为正文主色调时 安全起见可采用明度数值 B 不大于30 的颜色 建议使用 基本规范 2 文字 文本规范 总体原则 提高文字的辨识性和页面的易读性 4 字体的选择中文字体 宋体 微软雅黑 幼圆英文字体 Arial 比例及字重 weight 和Helvetica极之相近 没有下划线贴边的问题 Q字没尾巴 字高整齐 基本规范 2 文字 文本规范 总体原则 提高文字的辨识性和页面的易读性 5 文字链接 文字链接形式不得超过3种颜色 规定其中一种为主链接色 显性链接 大面积链接的网站 比如门户首页 内容列表页 多采取灰黑色 蓝色做全篇的链接色 默认时不显示下划线 光标经过时才显示下划线 隐性链接 对于混杂在页面文字中零散出现的文字链接 为了便于识别 默认时候可以出现下划线或使用辅助链接色 光标经过的时候 样式不变 基本规范 2 文字 文本规范 总体原则 提高文字的辨识性和页面的易读性 6 对齐网页设计中的 对齐 同传统的印刷排版中的对齐概念是一样的 并且同等重要 并不是说一切都应该在一条直线上 而是尽可能的保持一贯的整齐 不仅左对齐 也要尽量右对齐 首页上摘要无须空格 内容正文应该空两格 豆腐块 四周应该空留均匀适当的间隔 基本规范 3 模块化表现 总体原则 同一个网站采用的模块化表现应该是全部统一的 模块化的几类参考表现 单线3 5个像素的圆角内边修饰 基本规范 4 页脚信息 页脚信息按照从上到下的排列次序为 1 内部导航2 外部导航3 各类许可证 授权声明4 英文版权信息 Copyright 5 中文版权信息6 各类网络安全 工商证明 技术支持LOGO各链接间隔统一使用 建议采用12号字 禁止使用加粗字体 基本规范 5 搜索框设计规范 文本框a 搜索框文本框的长度应适中 至少应提供显示10个中文字符的宽度b 搜索组件中使用的文本框必须为单行文本框c 高度不得低于18个像素帮助信息限定标签提示 标示性文字 热门关键词提示搜索按钮a 搜索按钮一般包含图标形式和文字形式两种b 使用图标形式时只能使用放大镜的图标 而不能采用其他元素 文字形式 搭配使用 图形形式 基本规范 6 广告设计规范 禁止模仿任何windows标准控件 windows标准控件包括但不限于 鼠标指针 按钮以及窗口控制按钮等 不要使用按钮作长句广告 参考指南 1 网页基本版面设计类型 一 骨骼型骨骼型是一种规范的理性的分割方法 常见的骨骼有竖向通栏 双栏 三栏 四栏和横向通栏 双栏 三栏和四栏等 一般以竖向分栏为多 在图片和文字的编排上则严格按照骨骼比例进行编排配置 给人以严谨 和谐 理性的美 骨骼经过相互混合后的版式 既理性 条理 又活泼而具弹性 参考指南 1 网页基本版面设计类型 二 满版型版面以图象充满整版 主要以图象为诉求 视觉传达直观而强烈 文字的配置压置在上下 左右或中部的图象上 满版型给人以大方 舒展的感觉 是商品广告常用的形式 参考指南 1 网页基本版面设计类型 三 上下分割型把整个版面分为上下两个部分 在上半部或下半部配置图片 另一部分则配置文案 配置有图片的部分感性而有活力 而文案部分则理性而静止 上下部分配置的图片可以是一幅或多幅 参考指南 1 网页基本版面设计类型 四 左右分割型把整个版面分割为左右两个部分 分别在左或右配置文案 当左右两部分形成强弱对比时 则造成视觉心理的不平衡 这仅仅是视觉习惯上的问题 也自然不如上下分割的视觉流程自然 不过 倘若将分割线虚化处理 或用文字进行左右重复或穿插 左右图文则变得自然和谐 参考指南 1 网页基本版面设计类型 五 中轴型将图形做水平或垂直方向的排列 文案以上下或左右配置 水平排列的版面给人稳定 安静 和平与含蓄之感 垂直排列的版面给人强烈的动感 参考指南 1 网页基本版面设计类型 六 曲线型图片或文字在版面结构上作曲线的编排构成 产生节奏和韵律 参考指南 1 网页基本版面设计类型 七 倾斜型版面主体形象或多幅图版做倾斜编排 造成版面强烈的动感和不稳定因素 引人注目 参考指南 1 网页基本版面设计类型 八 对称型对称的版式给人稳定 庄重理性的感觉 对称有绝对对称和相对对称 一般多采用相对对称 以避免过于严谨 对称一般以相对对称居多 参考指南 1 网页基本版面设计类型 九 中心型重心有三种概念 1 直接以独立而轮廓分明的形象占据版面中心 2 向心 视觉元素向版面中心聚拢的运动 3 离心 犹如将石子投入水中 产生一圈圈向外扩散的弧线运动 重心型版式产生视觉焦点 使强烈而突出 参考指南 1 网页基本版面设计类型 十 三角形在圆形 四方形 三角形等基本形态中 正三角形 金字塔形 是最具安全稳定因素的形态 而圆形和倒三角形则给人以动感和不稳定感 参考指南 1 网页基本版面设计类型 十一 并置形将相同或不同的图片作大小相同而位置不同的重复排列 并置构成的版面有比较 说解的意味 给予原本复杂喧嚣的版面以次序 安静 调和与节奏感 参考指南 1 网页基本版面设计类型 十二 自由型自由行结构是无规律的 随意的编排构成 有活泼 轻快之感 参考指南 2 网页配色 色彩的三要素 色相 明度 纯度 参考指南 2 网页配色 配色方法 选出主色和辅助色根据网站功能 面向对象确定网站格调根据格调确定主色和辅助色改变主色和辅助色的明度和纯度 丰富色彩配合不同明度纯度的黑白灰作为补充色在小范围内选取与主色对比大的颜色作为强调色 参考指南 2 网页配色 对比原则 色相对比 主色与辅助色 强调色对比 明暗对比面积对比 参考指南 2 网页配色 对比调整 对比恰当 对比过强 减弱对比 增加隔阂 分离元素 对比过弱 对比浑浊 加大对比 增加隔阂 分离元素 参考指南 2 网页配色 根据主题选择蓝色调 页面整体清爽简洁 色 单色搭配 色彩丰富协调 橙色 黄色区块醒目不突兀色 类似色搭配 参考指南 2 网页配色 参考指南 2 网页配色 色