网页基础规范-AAA数字教育

1、网页基本设计规范电子商务网站天猫，淘宝、京东、凡客、美丽说，聚美优品 ，苏宁易购等国内大型线上网购平台资讯网站网易、腾讯，搜狐，百度等新闻资讯线上平台企业网站个人公司，国有企业，外资企业，个人网站等线上平台。例如：华为集团，联想集团房地产网站各种房地产楼盘网站等线上平台。例如：保利地产，远洋地产，万科(北京)社区网站各种社区论坛，发表说说，沟通等线上平台。例如：开心谈谈，QQ空间，天涯社区，猫扑，大杂烩，新浪，微博，豆瓣产品类系统软件界面、后台登录界面。例如：国资委系统办公平台 色彩的定义红色： 是一种激奋的色彩，给人以冲动、愤怒、热情和活力的感觉。绿色： 介于冷暖两种色彩的中间，显得和睦、宁

2、静、健康、安全。它和金黄、淡 白搭配，可以产生优雅、舒适的气氛。橙色： 也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。黄色： 充满快乐、希望、智慧和轻快，它也是最亮的一种颜色。蓝色： 是最具凉爽、清新、专业的色彩。它和白色混合，能体现柔顺、淡雅、 浪漫的气息（如天色的色彩） 。白色： 给人以洁白、明快、纯真和干净的感觉。黑色： 通常是深沉、神秘、寂静、悲哀和压抑的代表。灰色： 具有中庸、平凡、温和、谦让、中立和高雅的感觉，它可以和任何一种颜 色进行搭配。网页最常用流行色蓝色冷静、客观，沉静整洁的颜色，较多用于商业网站绿色环保色 ，雅致而有生气，给人清新的感觉，充满活力橙色活泼热烈

3、，标准商业色调暗红宁重、严肃、高贵，需要配黑和灰来压制刺激的红色粉色可爱纯洁，是女性专属的代表色。适合打造女性专属的各类时尚网页,例如：内衣，化妆品，衣服，彩妆等等黑色很酷很神秘，而且看起来较有深度的一种颜色。适合打造个性、时尚网站几种固定搭配蓝白橙蓝为主调。白底，蓝标题栏，橙色按钮做点缀绿白蓝绿为主调。白底，绿标题栏，蓝色或橙色按钮做点缀橙白红橙为主调。白底，橙标题栏，暗红或桔红色按钮做点缀暗红黑暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色色彩的限定请注意我是黑色！请注意我是白色脏，视觉不明显干净明快，视觉明显在整个页面设计中，网页在浏览习惯中，一般都会呈现以下几部分内容：顶部部分：

4、眉页、导航栏、 Banner等内容部分：主要展示所说明的内容。底部部分：包括一些友情链接、版权信息、联系方式，二维码图标等设计版面标准在1280宽（px）范围之内通常适用的尺寸版面范围是这两个参考尺寸1000px 1200px 目前设计手法通常是网页上部分版面（眉页，主导航，banner）都采用自适应屏幕方式（比如聚美优品，banner区域是通栏） 1280（px）通栏通栏构图的基本要素在设计页面中，首先考虑的版面的版心设计尺寸，确定设计版心尺寸开始使用网格标尺来定位版面设计区域。所有左边外框边缘都要左对齐所有右边外框边缘都要右对齐在左边区域的文字或按钮边缘都要左对齐在右边区域的文字或按钮边缘

5、都要右对齐所有横向和纵向的外框都要齐平，上边缘齐平，下边缘也要齐平眉页的设计区域的规范在设计页面中，每个首页的顶部都包括一下简单明了的信息，给用户建立方便快捷的浏览通道或者是信息，主要有以下信息：法律声明 联系我们 登录注册 联系电话 中文版及英文版微信等应用图标或者文字 标志区域图标 文字整体眉页的设计高度，是有设计风格和标志的大小来决定的，基本范围在140px，不得低于120px140px信息框：标准尺寸大约范围在40高（px）搜索框：标准尺寸大约范围在465长x35高（px），高度不得低于20PX， 标准情况都是放在右对齐位置或者中间位置字 体：微软雅黑或者宋体字 号：12号颜 色：标示

6、性文字” 可设置灰色(#cccccc)显示标 志：标准情况都是放在左对齐位置图 标：标准情况都是应用企业色为点缀色主导航的设计规范在页面设计中，主导航的起到非常重要的视觉效果作用，它的实现的好坏决定整个网页的好坏和交互体验，在设计中，要求主导航的“高度，颜色，字体，细节处理，排版”等都必须设计到位。主导航中包括以下几点设计内容：菜单文字（首页，走进哈药等）下拉菜单文字和外框点击状态按钮菜单条菜单条：高度标准范围在35-50px之间，不得低于30px45px28px字体：常用流行字体微软雅黑，不使用12号加粗，这样会导致复杂的文字难 以辨认字号：14-16号之间，不得低于12号微软雅黑1416p

7、xBanner的设计规范在页面设计中，banner的起到非常重要的视觉效果作用，“颜色的应用，广告语的位置和排版方式，画面的创意设计想法，构图，素材图片的优化”等的变现手法都非常的重要。banner中包括以下几点设计内容：设计画面广告文字画面衮动交互按钮登录窗口菜单列表新闻滚动框1000px版面设计区域目前流行的banner通常设计成通栏形式，采取响应式布局。根据屏幕的大小配置尺寸。所有设计元素都要在自定的版面范围之内，不得超出版面设计区域广告语画面滚动交互按钮首页中的banner的设计高度，基本范围在250-450px，不得低于250px二级页面中的设计高度，基本范围在150300px，特殊

8、情况可以自定高度：450px高度：250px为了更直观的说明网站的分类，所以通常使用菜单列表，一般在购物网站和社区网站使用的表现手法。菜单列表在banner的设计宽度，基本范围在200-300px，不得宽于300px版面的划分区域的基本规范在设计版面中，首先要搭建版面的结构，什么样的结构就会呈现什么样的设计画面，模块的划分好坏，决定你整个网页的梳理性。三分之一版 分栏之间隔开15-25像素距离三分之一版 分栏之间隔开15-25像素距离平铺版 分栏之间隔开15-25像素距离板块排版在视觉上要符合纵向分割，横向模块间距统一，纵向可根据页面需求适当区分版面整齐的基本规范版面的“豆腐块”排列“豆腐块”

9、的文字排列，在大型网站中尤为重要。将文字块当作图片一样来排版优化，来平衡页面。才可以将大量繁杂的信息分割和组织好。如何使文字排列成“豆腐块”，需要在PS设计软件中的文字段落对话框里设置以下几点：文字“T”在画面中框一个区域拷贝文字CTRL+T，打开对话框开始设置最后一行左对齐上面有，就不写了正文文章因为它的文章信息量大，字节非常多，由很多段落组成，为了使文章内容更具有梳理性，经常会分段落来排版。所以在设计中，要求段落文章前空两格。通常在网页页面设计中，常会遇到图片和文字相结合的版面设计，通常在设计中我们文字排版上开始位置无须空格。只要遵循左对齐和右对齐，保持文字和图片之间适当的间距就可以了。列

10、表页是网页设计最重要的设计表现手法，设计的好坏决定页面的效果，列表的设计规范主要遵循以下几点：一般列表为5-10行字节控制在10-30个字节左右，多字节影响画面效果的使用“”来表示如果设计日期，日期要求右对齐通常行间距控制在24点正文的文字颜色多采用灰色K:60%-80%或者#333333标题框右角加入“更多”按钮前面加入修饰按钮，如“小圆点”“小三角”“小方块”文章页设计规范主要遵循以下几点：主标题字号要大于正文字号通常字体统一图片和正文之间适当留间距，最多不得低于10px主标题和正文之间适当留间距，最多不得低于10px图片和视频的设计规范主要遵循以下几点：通常设计为一栏或半栏设计，必须在版面设计区域范围之内一栏为排版5张交互按钮为“”版权页是一个网页设计的底部部分，主要是一些辅助信息，是一个独立的版面，设计手法简单，重点在于排版的整体性，版权页的信息按照从上到下的排列次序为:内部导航外部导航各类许可证、授权声明英文版权信息“Copyright ”中文版权信息各类网络安全/工商证明/技术支持 LOGO各链接间隔统一使用”| ”建议采用12号字， 禁止使用加粗字体版权页在页面设计中有一定的规范，通常设计结构为半栏和通栏俩种形式，具体规范有以下几点：半栏要控制在版面设计区域