网页设计规范..
网页设计一般规范
网页设计一般规范一、文件组织规范1．首先创建站点文件夹(使用英文字母命名)。
2．按站点栏目在站点文件夹中创建若干相应子文件夹及图片文件夹image。
3．首页创建在站点根文件夹下，文件名必须是inde某.htm或default.htm。
站点根文件夹下，只能有inde某.htm和若干子文件夹。
4.其他网页文件、图片文件、媒体文件等，都放在对应的子文件夹内。
5.所有文件夹、文件(网页文件、图片文件)命名时，不得含有汉字和空格。
6.所有图片文件需放置在image文件夹内。
二、主页制作规范1．使用表格实现布局，在布局的单元格中添加页面内容。
2．分辨率控制为800某600兼容1024某768(页面居中，不能出现水平滚动条)。
3．有清楚完整的页面结构。
头部的CI标志、主题图片或文字、导航栏。
分块合理安排的主体页面内容。
尾部的版权。
4．有恰当的颜色设计和背景设计(颜色控制在三种、背景使用专用背景图片)。
5．导航栏和所有大小标题进行适当的修饰。
三、普通网页制作规范1．必须放置在相应子文件夹内。
不能放置在站点根文件夹下。
2．页面要有基本的布局(页面居中，分辨率控制8OO某600兼容1024某768)。
所有内容安排在布局好的表格中(一般将表格线隐藏)。
3．一般应安排返回主页或父页的链接。
4.文件大小控制在64K以内（含页内图片文件）。
5．注意各种对齐方式的使用(水平对齐、垂直对齐、内容与边框距离的控制等)。
6.不得遗漏“标题名”的设计制作，形成“无标题文档”。
7．网页页面的高度一般控制在三屏以内，超过三四屏应使用书签(锚点)技术。
四、其他一些规范1．站点和网页的主题明确突出，去除与主题无关的一切东西。
所有应用技术服从于内容的需要，禁用妨碍主题内容的技术。
2．站点中所有网页间的链接有清晰的结构，形成易于漫游的导航系统，不得出现任何一页没有相应的链接，让用户点击“后退"按钮3．所有网页不得出现任何一个无效链接和无效图片。
老年网页设计规范
老年网页设计规范在当今数字化的时代，网页已经成为人们获取信息、交流和娱乐的重要平台。
然而，对于老年人这一特殊群体来说，许多网页的设计可能并不友好，给他们的使用带来了困扰。
为了让老年人能够更轻松、便捷地享受网络带来的便利，老年网页设计需要遵循特定的规范。
一、字体与字号老年人的视力往往不如年轻人，因此在字体的选择上要格外注意。
应优先使用清晰易读的字体，避免使用过于花哨或难以辨认的字体。
常见的如宋体、黑体等都是不错的选择。
字号方面，不能过小，建议正文部分的字号不小于 14 磅，标题部分可以适当增大，以突出重点。
同时，要保证字体的颜色与背景有足够的对比度，例如黑色字体搭配白色背景，或者深色字体搭配浅色背景，这样可以让文字更加醒目。
二、页面布局简洁明了的页面布局对于老年人来说至关重要。
避免过多的元素堆砌和复杂的排版，以免造成视觉混乱。
页面的导航栏应该清晰可见，位置固定，方便老年人随时找到。
内容的分区要明确，各个板块之间要有足够的间距，便于区分。
重要的信息和操作按钮要突出显示，例如使用较大的图标或者醒目的颜色。
三、色彩搭配在色彩选择上，要考虑到老年人的视觉特点。
避免使用过于鲜艳、刺眼的颜色组合，而应选择柔和、舒适的色调。
背景颜色应以淡色为主，如浅灰色、米色等，避免使用纯黑色或纯白色，以免造成强烈的视觉反差。
文字颜色要与背景颜色形成鲜明对比，确保清晰可读。
同时，对于一些重要的提示信息或者警示信息，可以使用醒目的颜色，如红色、黄色等，但也要注意适度，不能过于刺眼。
四、图片与图标图片和图标在网页设计中起着重要的辅助作用，但对于老年人来说，图片和图标的清晰度和可理解性至关重要。
图片要保证高质量、清晰，避免使用模糊或者像素化的图片。
图标要简洁明了，能够准确传达其代表的含义，避免使用过于抽象或复杂的图标，以免造成误解。
五、交互设计交互操作要简单易懂，避免复杂的手势和多点触控。
按钮要足够大，方便点击，并且要有明显的按下效果反馈，让老年人知道操作是否成功。
网页设计字体大小规范
网页设计字体大小规范网页设计中，字体大小的规范是非常重要的，它可以影响用户对网页内容的阅读体验，也会直接影响网页的可读性和可访问性。
在进行网页设计时，我们需要遵守一些字体大小的规范，以确保网页内容的清晰度和可读性。
下面是一些常见的网页设计字体大小规范。
1. 主标题（Heading）字体大小应该大于正文内容。
一般来说，主标题的字体大小可以设置为28px到36px之间，根据网页的风格和内容来定。
2. 子标题（Subheading）字体大小应该相对较小，一般可以设置为18px到24px之间。
子标题是对主标题的进一步解释和补充，字体大小要比主标题小一些，以区分层次。
3. 正文（Body）字体大小应该设置为16px到18px之间，这是最常用的正文字体大小。
这个字体大小足够清晰，同时也适合大多数用户阅读。
4. 标注和辅助文本（Caption and Auxiliary Text）字体大小应该相对较小，一般可以设置为14px到16px之间。
这些文本通常是对图片、表格或其他内容的解释或补充，字体大小要比正文小一些。
5. 链接（Link）字体大小应该和正文保持一致，一般可以设置为16px到18px之间。
链接可能是网页中最重要的交互元素之一，字体大小要保持与正文一致，以确保用户能够快速识别并点击链接。
6. 导航菜单（Navigation Menu）字体大小应该设置为18px到20px之间。
导航菜单是用户在网页中进行导航的重要工具，字体大小要稍大一些，以方便用户快速定位和点击。
7. 按钮（Button）字体大小应该设置为16px到18px之间。
按钮是网页中最常见的交互元素之一，字体大小要适中，以便用户能够清晰地看到按钮上的文本内容并点击。
除了以上的字体大小规范，还需要注意以下几点：1. 网页设计中，字体大小的一致性非常重要。
相同类型的文本应该使用相同的字体大小，以保持整体的统一感。
2. 不同层级的标题和文本应该使用不同的字体大小，以区分层次和重要性。
UI设计网页要求规范
1、页面命名每个页面都要有与之模块对应的名称。
2、页面兼容性（1）页面大小兼容o自适应1366*768px及以上的分辨率o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条）（2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。
弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。
（3）浏览器兼容兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。
o文字文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。
具体字号大小和颜色参考UI设计效果图。
o容图片容图片均带1px描边；容图片未加载出来时显示系统默认图片。
1、数据操作显示数据（表格）（1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。
（2）单无格：文字图片容左对齐，数字、金额容右对齐。
（3）操作容原则上均用文字表达，如“编辑-删除”（4）鼠标划过表格单行时，颜色高亮。
（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。
（6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。
选中数据（1）勾选全选则选中当页所有记录（2）去掉当页某个记录的勾选，则全选也去掉勾选。
（3）翻页后，自动去掉已勾选的记录及全选的勾选。
（4）翻页后是否进行选择记录的保留应试具体业务而定。
（5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据（1）新增的记录必须排在新增页的首行；（2）所有列表页面默认按数据新增时间倒序排列。
（3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。
（4）提交成功后自动回到数据列表页。
（5）提交时需对主要标识字段进行重复值、空值（空格）判断。
修改数据（1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。
网页设计规范标准
网页设计规范标准1. 页面布局- 使用响应式设计，确保网站在不同设备上的适配。
- 采用网格布局，并保持一致的栅格系统。
- 合理利用空白区域，使页面整洁有序。
- 页面元素排列有序，遵循阅读顺序和重要性原则。
2. 色彩搭配- 选择合适的配色方案，使页面达到良好的视觉效果。
- 在不同的页面部分使用一致的色彩搭配，保持整体风格的统一。
- 注意色彩的对比度，以确保文字和其他元素易于阅读和辨识。
3. 字体选择- 使用合适的字体组合，使页面文本易于阅读且与整体风格相匹配。
- 字号的大小要适合不同设备上的阅读体验。
- 控制使用的字体种类数量，避免出现混乱和不协调的情况。
4. 图片与图标- 使用高质量的图片和图标，以提升用户体验。
- 优化图片大小和格式，以减小页面加载时间。
- 图片和图标要与页面主题相关，并具有清晰的表达意义。
- 设计简单明了的导航菜单，使用户能够轻松找到所需的信息。
6. 响应交互- 界面元素的交互要及时响应，并反馈给用户。
- 保持一致的界面反馈和动画效果，提升用户体验。
- 控制页面加载时间，提高网站的整体性能。
7. 页面内容- 内容排版清晰明了，段落分明，信息分类清晰。
- 使用简明扼要的语言表达，避免冗长和复杂的句子。
- 注意语法和拼写错误，确保内容的准确性和可读性。
8. 辅助工具- 为用户提供可访问的页面，考虑视觉障碍和其他辅助工具的使用。
- 提供搜索功能，方便用户快速检索信息。
- 确保页面文字和背景的对比度适宜，以满足辅助工具的要求。
以上为网页设计规范标准的一些基本要求。
在设计网页时，应综合考虑用户体验、视觉效果、页面可访问性等方面的因素，以提供优秀的网页设计作品。
网页设计字体大小规范
网页设计字体大小规范网页设计字体大小规范是指在网页设计中使用不同字体大小的规定。
字体大小在网页设计中非常重要，它决定了文字的可读性、页面的布局以及视觉效果。
下面是关于网页设计字体大小规范的一些指导原则。
1. 标题字体大小：- H1标题应该有一个相对较大的字体大小，通常在24px至30px之间。
- H2标题应该比H1标题稍微小一些，通常在20px至24px之间。
- H3标题应该比H2标题更小一些，通常在18px至20px之间。
- H4至H6标题应该比H3标题更小一些，通常在16px至18px之间。
2. 正文字体大小：- 正文的字体大小应该在14px至16px之间，以保证良好的可读性。
- 对于长段落的正文内容，可以使用稍微大一点的字体大小，如18px至20px。
3. 导航栏字体大小：- 导航栏的字体大小应该比正文字体稍大一些，通常在16px至18px之间。
4. 引用、副标题和注释字体大小：- 引用、副标题和注释的字体大小应该比正文稍小一些，通常在12px至14px之间。
5. 按钮和链接字体大小：- 按钮和链接的字体大小应该比正文稍大一些，通常在16px 至18px之间。
6. 标签和标识字体大小：- 标签和标识的字体大小应该比正文字体稍小一些，通常在12px至14px之间。
7. 特殊元素字体大小：- 对于特殊元素，如页面标题、强调文字等，可以使用较大的字体大小，但要确保其与整个页面的风格和布局相符。
总之，在网页设计中，字体大小的选择要考虑到页面的整体布局和风格，保证页面的可读性和用户体验。
字体大小的合理搭配可以提高网页的可视性和吸引力，同时也要注意不要过度使用不同的字体大小，以免造成页面混乱和视觉疲劳。
网页设计规范-中华人民共和国工业和信息化部
附件网页设计规范一、展现布局（一）展现。
1.政府网站应简洁明了，清新大气，保持统一风格，符合万维网联盟（W3C）的相关标准规范要求。
2.政府网站应确定1种主色调，合理搭配辅色调，总色调不宜超过3种。
使用符合用户习惯的标准字体和字号，同一类别的栏目和信息使用同一模板，统一字体、字号、行间距和布局等。
3.按照适配常用分辨率的规格设计页面，首页不宜过长。
在主流计算机配置和当地平均网速条件下，页面加载时长不宜超过3秒。
4.对主流类别及常用版本浏览器具有较好的兼容性，页面保持整齐不变形,不出现文字错行、表格错位、功能和控件不可用等情况。
5.网站内容要清晰显示发布时间，时间格式为YYYY—MM—DD HH∶MM。
文章页需标明信息来源，具备转载分享功能。
6.页面中的图片和视频应匹配信息内容，确保加载速度，避免出现图片不显示、视频无法播放等情况。
避免使用可能存在潜在版权纠纷或争议的图片和视频。
（二）布局。
1.政府网站页面布局要科学合理、层次分明、重点突出，一般分为头部标识区、中部内容区和底部功能区。
2.头部标识区要醒目展示网站名称，可根据实际情况展示中英文域名、徽标（Logo）以及多语言版、搜索等入口，有多个域名的显示主域名。
3.中部内容区要遵循“从左到右、从上到下”的阅读习惯，科学合理设置布局架构。
4.底部功能区至少要列明党政机关网站标识、“我为政府网站找错”监督举报平台入口、网站标识码、网站主办单位及联系方式、ICP备案编号、公安机关备案标识和站点地图等内容。
5.政府网站各页面的头部标识区和底部功能区原则上要与首页保持一致。
（三）栏目。
1.栏目是相对独立的内容单元，通常为一组信息或功能的组合，按照信息类别、特定主题等维度进行编排并集中展现。
2.栏目设置要科学合理，充分体现政府工作职能，避免开设与履职行为、公众需求相关度不高的栏目。
政府门户网站和部门网站应设置机构职能、负责人信息、政策文件、解读回应、工作动态、互动交流类栏目。
网页设计标准
网页设计标准首先，网页设计标准中最基本的要素之一就是网页布局。
良好的网页布局能够使用户更容易地找到他们需要的信息，从而提高用户体验。
在进行网页布局时，应该考虑到网页的整体结构，包括头部、导航栏、内容区域和底部等部分。
合理的布局设计能够提高网页的可读性和美观性，同时也方便网页的维护和更新。
其次，网页设计标准中还包括了对网页颜色和字体的规范。
在选择网页颜色时，应该考虑到用户的视觉感受和对比度，避免使用过于刺眼或对比度不足的颜色。
同时，网页字体的选择也非常重要，应该选择清晰易读的字体，并避免在一个页面中使用过多不同的字体，以免影响用户的阅读体验。
另外，网页设计标准还包括了对网页导航和链接的规范。
良好的网页导航能够帮助用户快速找到他们需要的信息，因此在设计网页导航时应该考虑到用户的浏览习惯和习惯操作。
同时，网页链接的设计也非常重要，应该遵循统一的风格和规范，避免出现死链和错误链接，以提高用户体验和网页的可访问性。
最后，网页设计标准中还包括了对网页响应式设计和可访问性的规范。
随着移动互联网的快速发展，网页响应式设计越来越重要，能够使网页在不同设备上都能够正常展示并保持良好的用户体验。
同时，网页的可访问性也是非常重要的，应该考虑到残障用户的需求，确保网页内容对所有用户都是可访问的。
总之，网页设计标准是设计师在进行网页设计时必须要遵循的规范和要求。
遵循网页设计标准能够提高网页的用户体验、可访问性和可维护性，从而使网页更加专业和规范。
希望本文介绍的一些常见的网页设计标准能够帮助你在进行网页设计时更加规范和专业。
网页设计的尺寸规范
网页设计的尺寸规范许多的网页设计在进行网页布局设计时，进行界面网页的宽度尺寸设计都比较迷茫，800*600尺寸及1024*768尺寸的分辨率下，网页应该设计为多少像素才合适呢?面是小编为大家整理的网页设计的尺寸规范，欢迎参考~网页设计的尺寸规范1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK 以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K1、120*120，这种广告规格适用于产品或新闻照片展示。
2、120*60，这种广告规格主要用于做LOGO使用。
3、120*90，主要应用于产品演示或大型LOGO。
4、125*125，这种规格适于表现照片效果的图像广告。
5、234*60，这种规格适用于框架或左右形式主页的广告链接。
6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
网页设计的尺寸规范
网页设计的尺寸规范许多的网页设计在进行网页布局设计时，进行界面网页的宽度尺寸设计都比较迷茫，800*600尺寸及1024*768尺寸的分辨率下，网页应该设计为多少像素才合适呢?面是小编为大家整理的网页设计的尺寸规范，欢迎参考~网页设计的尺寸规范1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK 以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K1、120*120，这种广告规格适用于产品或新闻照片展示。
2、120*60，这种广告规格主要用于做LOGO使用。
3、120*90，主要应用于产品演示或大型LOGO。
4、125*125，这种规格适于表现照片效果的图像广告。
5、234*60，这种规格适用于框架或左右形式主页的广告链接。
6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
网页规范
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 1.首页顶部通栏，尺寸468*60 2.首页顶部通栏，尺寸760*60 3.首页中部通栏，尺寸580*60 4.内页顶部通栏，尺寸468*60 5.内页顶部通栏，尺寸760*60
以上是以12删格为基础的案例。它的设计原则就是将页面分成12个等分的栏，然 后把页面的内容设计在12栏内。比如左边的一些商品展示它用到了一个删格的单 位；其中的一个最大面积的商品展示它用到了比较多的删格；最右侧的操作信息 用到了四个删格的比例。
用色：256web安全色。RGB 8位 字体字号：网页正文采用宋体12PX,可用黑体做标题 建议用12+14搭配 英文字体从9PX开始就可以清晰显示。10/11/12都是常用字号 字体用系统自带，如Tahoma\Arial\Verdana
响应式设计概念：指的是不同设备、屏幕、分辨率、操作方式（鼠标、键盘、触 摸），保证信息在不同环境下表现一致，保证可交互可操作。
由于页面的宽度发生了变化，进而信息展现也改变了就是响应式设计。直到最后在 手机屏幕上的显示图片信息变成了一列。 1、临界点：当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计 时后台需要知道每一个尺寸的宽度范围在多少时,我们就可以制定出相对应清晰的一 个临界点，制定了临界点之后就知道，当屏幕的宽度范围位于哪一个点的时候，我 们的页面信息该如何展示。 2、删格：将页面分成几栏、几块。
网页设计规范
网页设计规范1. 前言在构建网页时，遵循一些设计规范可以确保页面的一致性、易用性和可访问性。
本文将介绍一些常用的网页设计规范，以帮助设计师创建优秀的网页设计。
2. 颜色选择在网页设计中，正确选择和使用颜色是至关重要的。
以下是一些有助于保持一致性的颜色选择规范：- 使用品牌的主色调作为网页的主要颜色。
- 避免过多的颜色使用，以保持页面简洁和清晰。
- 使用对比强烈的颜色来突出重要内容或交互元素。
- 确保所选颜色在不同设备和浏览器上显示一致。
3. 字体选择选择适合网页的字体也是网页设计的重要方面。
以下是一些字体选择规范建议：- 使用易读的字体，以提高内容的可读性。
- 避免在一个页面中使用太多不同的字体，以保持一致性。
- 使用较大的字号来确保文字在各种设备上可读性良好。
- 考虑字体的版权和许可证情况，避免使用非授权的字体。
4. 布局和导航良好的布局和导航可以帮助用户快速找到所需的信息。
以下是一些布局和导航规范的建议：- 使用响应式设计，以适应不同设备上的不同屏幕尺寸。
- 不要在页面上使用过多的元素和内容，以避免页面拥挤。
- 使用清晰明了的导航菜单，让用户能够快速导航到不同的页面。
- 提供搜索功能，以便用户可以快速找到他们需要的信息。
5. 图片和媒体在网页设计中使用图片和媒体可以增加页面的吸引力和可视化效果。
以下是一些图片和媒体规范的建议：- 优化图片大小和格式，以提高页面加载速度。
- 选择高质量的图片，以确保其在不同屏幕上显示清晰。
- 为图片提供替代文本描述，以提供无障碍访问。
- 控制媒体播放和自动播放，以避免干扰用户体验。
6. 可访问性考虑到各种用户的需求，网页设计应具备良好的可访问性。
以下是一些可访问性规范的建议：- 使用清晰的文本和对比度，以便所有用户都能轻松阅读和理解。
- 提供无障碍选项，如调整字体大小、语言选择等。
- 确保页面元素可以通过键盘进行访问和操作，以满足使用辅助工具的用户需求。
- 通过规范化代码和标记语言，提高页面的可访问性。
网页设计规范
网页常用的配色方式
1.3 邻近色 配色 近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔和过渡看起来 也很和谐。
网页常用的配色方式
1.4 中差色配色 中差色对比相对突出，色彩对比明快。
网页常用的配色方式
2.色调调和而形成的配色方式
这是由同一色调构成的统一性配色。即使 出现多种 色相，只要保持色调一致，画面 也能呈现整体统一性。即：首先确定页面 的整体 色调，再选择几种色相进行调和。
色彩心理学—无彩色
黑色
黑色具有力量、优雅、现代、时尚和神秘感，常用于奢侈品、电影等行 业。
黑白灰，在设计中作为背景与调和色来应用（万能色或百搭色）。
色彩心理学—无彩色
灰色
灰色属于中性色，缺乏活力，也具有保守、冷静。浅灰色常用于金融、 科技行业等。
黑白灰，在设计中作为背景与调和色来应用（万能色或百搭色）。
5. Banner: 为了适应更多的用户群体，banner在页面中的底坐标通常在580px之内; 6. 画面中所有元素都要有直接或间接的统一性或关联性（顶对齐、底对齐、左对齐、右对齐、居
中对齐），这也是画面美观与否的因素之一。设计原则
7. 按钮：常规做一个按钮需要做出他的两种状态，有的需要做出三种状态： (1)正常状态下 (2)鼠标划过状态 (3)点击状态
图像也同样能够起到很好的平衡效果。
通过上述演示得出：
【平衡的关键就是重心平稳与位置关联】 让整个画面更像是一个整体，
而不是每个元素都各自为政，成为独立的个体。
网页的框架结构
1. 分栏式 2. 区域划分 3. 其它结构
网页的框架结构
根据人们的视觉习惯，人们在阅读时通常是遵循从上至下、从左至右的习 惯进行阅读的。 因此网页各板块主次关系按照从上至下、从左至右的原则进行区分。将重 要的部分放在上边和左边。 网页框架的形式是多变的，它根据网站的信息内容划分，有重点地突出和 排列信息。 网页框架结构可归为3类：分栏式、区域划分、自由式。
网页设计字体规范
网页设计字体规范在网页设计中，字体的选择和应用是非常重要的，它直接影响到网页的整体风格和用户体验。
下面是一些网页设计字体规范的建议，帮助您选择和运用合适的字体。
1. 简洁明了：选择简洁清晰的字体，使得网页内容易于阅读和理解。
避免使用过于花哨或复杂的字体，以免造成视觉混乱或干扰用户阅读。
2. 多样性：在网页设计中，可以使用两种字体，一种用于标题和重要信息，一种用于正文和辅助信息。
这样可以增加整体设计的层次感和美观度。
3. 字体大小：字体的大小和行间距需要根据不同的内容和字体类型进行合理的设置。
标题和重要信息一般要比正文大一些，行间距也可以适当加宽，提高可读性。
4. 字体颜色：字体颜色需要与背景颜色形成对比，以便用户快速辨识文字内容。
一般来说，黑色的字体在白色背景上最为清晰，但也可以根据整体设计的需要使用其他颜色。
5. 避免使用纯色：在网页设计中，可以使用色彩渐变、阴影或半透明效果来提升文字的效果和吸引力。
但请注意，不要过度使用这些效果，以免影响阅读和用户体验。
6. 考虑可用性和无障碍性：在选择字体时，考虑到不同用户的需求和偏好。
避免使用过小或过大的字体，确保文字对所有用户都是可访问和可读的。
7. 适当使用特殊字体：有时，特殊字体（如手写体或装饰性字体）可以用于一些突出的标题或设计元素中，增加网页的独特性和吸引力。
但要注意，不要在整个网页中大量使用特殊字体，以免造成视觉混乱。
8. Web安全字体：为了保证网页在不同的浏览器和操作系统下都能正常显示，建议使用Web安全字体，如Arial、Helvetica、Verdana等。
这些字体在不同的设备和平台上都有很好的兼容性。
9. 字体的加载速度：对于字体文件较大或较多的网页，需要考虑到字体的加载速度。
可以通过压缩字体文件、优化网页代码或使用浏览器缓存等方式来提高网页的加载速度。
10.测试和反馈：在完成网页设计后，及时测试字体的可读性和效果。
如果用户反馈字体有问题，及时做出调整和改进。
企业网站设计规范
企业网站设计规范
1.页面设计宽度不宜超过1003PX;
2.在1003PX以外的背景尽量少用无规则图形做背景，可使用平铺图
形；
避免使用径向渐变作为网页背景，使用线性渐变。
3.框架尽量使用直线设计非必要不使用或避免弧线以及不规则图形
设计。
4.文本字符中文简体不能小于12号繁体版和英文版字符不能小于
10号字号选用用复整数
如：12 14 （16） 18 （20）（22） 24 （26）（28）30（32）（34）36
简体正文使用宋体 >无英文使用Arial >无
正文非必要不使用除宋体黑体 Arial 外其他字体
字体正文颜色尽量使用 #333333 #6666666 #999999 #000000 #FFFFFF
5.图片和框架除圆角外特别是结构交接处精确到1PX;
6.首页推荐产品图片与产品列表页产品还有大图显示的产品长宽比
例应该保持一致。
7.页面共用部分可增减模块但总体应该尽量保持一致。
8.非必要不设计JS和FLSH模块。
不使用音乐播放。
9.框架文字尽量不要加特效。
如导航菜单文字。
10. 表单尽量用系统默认样式。
通用模块（如翻页、按钮等）样式应尽量一致。
网站设计规范模板
网站设计规范模板一、概述在如今数字化时代，网站已经成为企业与用户进行信息传递和沟通的主要渠道之一。
一个好的网站设计不仅能够吸引用户的注意，还能提升用户体验并带来更多的商业机会。
本文将介绍一份网站设计规范模板，以帮助设计师和开发人员在设计网站时遵循一系列标准。
二、界面设计1. 布局：- 采用响应式网页设计，以适应不同设备和屏幕尺寸的用户访问。
- 页面布局清晰简洁，保持一致性，确保用户易于导航和浏览。
2. 色彩搭配：- 使用品牌色彩和主题色彩，以保持统一性。
- 避免过多的颜色使用，以免干扰用户视线。
3. 图像和图标：- 使用高质量的图像和图标，以提升页面的视觉吸引力。
- 优化图片大小，以保证页面加载速度。
三、导航设计1. 导航栏：- 在页面的顶部或侧边设计导航栏，提供清晰的导航标签。
- 使用可见的导航状态，以帮助用户追踪自己的位置。
2. 面包屑导航：- 提供面包屑导航，以帮助用户了解自己的位置，并方便返回上一层。
3. 搜索功能：- 在页面显眼位置提供搜索框，以便用户快速找到所需信息。
四、内容呈现1. 页面结构：- 使用清晰明了的标题、段落和小节，以帮助用户快速浏览和理解内容。
- 使用有序列表、无序列表和表格等元素，以清晰呈现数据。
2. 字体和排版：- 使用易于阅读的字体，确保足够的字号和行间距。
- 加粗、斜体、下划线等样式应谨慎使用，以增强重点信息的可读性。
3. 多媒体元素：- 合理使用图片、视频和音频等多媒体元素，但避免过多影响页面加载速度。
五、交互设计1. 用户注册和登录：- 提供便捷的用户注册和登录功能，减少用户的操作步骤。
- 安全性考虑，使用加密措施保护用户信息。
2. 表单设计：- 表单输入框和按钮设计要清晰明了，减少用户填写和提交的障碍。
- 对用户输入进行合理的验证和反馈，提高用户体验。
3. 页面反馈：- 用户与页面元素进行交互时，提供明确的反馈，以增强用户的操作响应感。
六、响应速度和兼容性1. 页面加载速度：- 优化图片和脚本的加载，以减少页面加载时间。
网页设计命名规范
⽹页设计命名规范⼀.⽹站设计及基本框架结构:⽹页设计命名规范1. Container“container“ 就是将页⾯中的所有元素包在⼀起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.2. Header“header” 是⽹站页⾯的头部区域，⼀般来讲，它包含⽹站的logo和⼀些其他元素。
这部分还可以命名为:“page-header” (或 pageHeader).3. Navbar“navbar“等同于横向的导航栏，是最典型的⽹页元素。
这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.4. Menu“Menu”区域包含⼀般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.5. Main“Main”是⽹站的主要区域，如果是博客的话它将包含的⽇志。
这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar“Sidebar” 部分可以包含⽹站的次要内容，⽐如最近更新内容列表、关于⽹站的介绍或⼴告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.7. Footer“Footer”包含⽹站的⼀些附加信息，这部分还可以命名为: “copyright“.⼆.需要注意的⼏点:1.尽量考虑为元素命名其本⾝的作⽤或”⽤意”，达到语义化。
不要使⽤表⾯形式的命名.如:red/left/big等。
2.组合命名规则:[元素类型]-[元素作⽤/内容]如:搜索按钮: btn-search登录表单:form-login新闻列表:list-news3.涉及到交互⾏为的元素命名:凡涉及交互⾏为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:⿏标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited三.Photoshop图层结构规范:Photoshop图层命名遵循树形结构，凡某元素组成的图层⼤于3层，即可形成组，所有图层尽量避免使⽤默认命名(图层+编号)。
PC网页设计尺寸规范
PC网页设计尺寸规范引导语：网页的设计尺寸需要考虑浏览器的版本兼容性问题，以下是店铺整理的网页设计基本尺寸规范，欢迎参考阅读!固定的内容：1.PS中设计分辨率为：72像素/英尺（图片质量的像素点）2.颜色模式RGB 8位（显示器的三原色红，绿，蓝为RGB）不固定的内容：一、网页背景a.纯色背景平铺（自适应浏览器）b.渐变色或底纹平铺背景（自适应浏览器）目前网页设计中都会做通栏大图，以方便吸引客户，增加网站整体美观c.通栏大图二、屏幕分辨率1.标准分辨率：1024px*768px（目前10%-20%的用户在用）主体设计内容宽度：1000px（常用宽度：960px，1170px，980px，1100px，1200px）首屏高度大约在700px2.常用分辨率：1280px*768px主体设计内容宽度：1200px（常用宽度：1190px，1170px，1100px，1200px）首屏高约：750px3.系统分辨率统计三、设计文档大小1.PS中新建文档宽要大于主体设计内容的宽度（目的为了表现设计意图，展示背景效果，左右宽度最少200px）2.设计到通栏大图片新建文档的宽度：1920px，所有的设计文档宽1920px主体内容根据具体情况而定（主体内容要是想要适应所有用户必须低于1000px）网页设计的设计阶段网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的`重要。
由于企业需要通过网站呈现产品、服务、理念、文化，或向大众提供某种功能服务。
因此网页设计必须首先明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。
专业的网页设计，需要经历以下几个阶段：需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。
以业务目标为中心进行功能策划，制作出栏目结构关系图。
以满足用户体验设计为目标，使用axure rp或同类软件进行页面策划，制作出交互用例。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2012-10-5
目录
一、 基础规范
01 网页宽度
02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 04 广告设计规范 05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
好吧，我们开始。
1.像素分隔线
• • •
1.选取铅笔工具（不要选错为画笔）,大小调为1px 2.选取一个较背景色更深的颜色，如图中的深蓝色，按住Shift画 3.选取一个较浅的颜色，再画一条直线。OK 出一条直线
分隔线技巧的例子
2.像素边缘
首先我们看一张没有加“像素边缘”的 原图： 接下来是加上后的： 看出来区别了吗？没关系，接下来 请看放大下的图片：.
可以看出在有阴影下，文字立体感得到加强，特别在文字的背景较复杂，比较多噪点时使用该技巧会使文件比较突出。 而加上阴影方法很简单，只需双击图层名称，添加“投影”的图层样式。然后按下图设置参数： 接下来我们看看一些使用该技巧的例子：
完
Thanks
Arial字体 优点:比例及字重（weight）和Helvetica极之相近 ; 没有下划线贴边的问题；Q字没尾巴；字高整齐 缺点:大写I与小写L无法区分 下划线:
Tahoma字体 优点:字宽较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字“方块字”点阵字；能区分大写I与小写L 缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐 下划线:
当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。
五、文字的编排与设计
3．文字行距：
视觉最佳行距是字体大小的1.3-1.6倍
12号宋体，我们一般使用的行距为8-9个像素。 14号宋体，我们一般使用的行距为10-11个像素。 正文多采用14号字，行距可适当调整为10-16个像素。 4．英文字体的使用：
可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇，而有一种灯光反射（高亮）的效果。使得白色 块的边缘更加突出。而方法跟第1个技巧是一样的，就是用铅笔工具画1px的线。需要注意颜色的选择，一般选择比背景色更浅的颜色，才能制造 高亮的效果。
3.像素阴影
这是3个技巧里面最容易实现的，但它一样特别实用，甚至经常会用到。照例我们先看图片：
英文建议使用Arial：Arial与Helvetica / Univers并列为目前的标准无衬线字体（Sans Serif），字型依据Unicode标准包含多国语言文字在内。 Arial比例及字重和Helvetica(mac上用的字体)极之相近 系统自带并能与汉字匹配的点阵字比较:
五、文字的编排与设计
二、搜索框设计规范
c. 搜索button规范文字为“搜索”避免采用其他描述。比如：
d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况： 文字形式： 搭配使用： 图形形式：
• 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO
•同一个web产品中搜索的位置和表现形式尽量保持一致
二、搜索框设计规范
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用960的网页宽度，与腾讯网首页统一尺寸。
特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:
应用案例
五、文字的编排与设计
5．文字链接：
文字链接形式不得超过3种颜色（规定其中一种为主链接色）。 显性链接：
• • •
需突出的内容部分、新闻标题、栏目标题等多使用14号字体 广告内容、辅助信息或介绍性文字等多使用12号字体 避免大面积使用加粗字体
五、文字的编排与设计
特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以辨认。多采用14号加粗
2．文字颜色： • 同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色 • 一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。
七、模块化表现
设计准则：同一个网站采用的模块化表现应该是全部统一的。
模块化的几类参考表现： • 单线 • 3-5个像素的圆角 • 内边修饰 ……..
八、页脚信息
• 页脚信息按照从上到下的排列次序为:
1、内部导航
2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ©” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO
三、页码设计规范
2. 小型页码翻页的表现方法： • 链接页码为简明独立，不加任何修饰的数字形式 • 链接颜色由当前页面设计决定 • 数字大小建议为12-14px ,以易于点击为原则.
五、文字的编排与设计
总体原则：提高文字的辨识性和页面的易读性
1. 文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。
• 对齐 网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。
六、整齐的概念和应用
• 首页上摘要无须空格。
内容正文应该空两格。
六、整齐的概念和应用
• “豆腐块”四周应该空留均匀适当的间隔
五、文字的编排与设计
• 正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前，首先要明确一这个判断的衡量标准。我们是以Ps的颜色系统为讨论基础的。 灰黑色 当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。 当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。 因为不同纯色亮度不同，黄色亮度最高，蓝色/紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。
详细参考《图标设计规范》
四、图标表意
详细参考《图标设计规范》
五， PS加强网页设计中像素化细节的技巧
在网页设计中细节的处理十分重要，我个人也经常观摩外国佬的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里 分享给大家的小技巧很简单，但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。并且你 会留意到这些技巧都围绕一个词，就是“像素化”，简单地说就是一些1px，2px的小线。
• 各链接间隔统一使用”| ”
• 建议采用12号字， 禁止使用加粗字体
目录
一、 基础规范
01 网页宽度
02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 04 广告设计规范 05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。
隐性链接： 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。
六、整齐的概念和应用
类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。
建议使用：
五、文字的编排与设计
深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有
建议使用天蓝色的：
纯蓝色：
五、文字的编排与设计
其他颜色
三、页码设计规范
1.普通页码翻页的表现方法：
• 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳 转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。
• 链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、页面修饰
1。简单的光影效果
2。质感表现 基本采用简单的渐变，不需要繁杂的修饰
一、页面修饰
3. 透明效果
四、图标表意
详细参考《图标设计规范》
四、图标表意
2. 应用场景
强表现方式：
• 加大搜索框的显示，输入框内采用大字体（14号） • 突出搜索button的表现，更直观，更有点击欲
• 位置放在页头的中间并明显标示
二、搜索框设计规范
2. 应用场景 弱表现方式：
•输入框内采用小字体（12号） •长度大约以刚好放完提示文字为基准 • 弱化搜索button的表现，可考虑用icon（图标格式 ）代替 •搜索框通常放在页头的右上角