项目31-网站设计标准课件

网站建设与管理网站建设与管理14设计规范作用及意义

1235网站界面设计规范标准网站目录、文件以及页面链接规范

网站内容、UI及色彩的设计原则

5网站设计规范标准说明书

教学内容4设计规范作用及意义1235网站界面设计规范标准网站目录2网站设计规范及意义网站设计规范及意义3设计规范作用及意义

适用于Web产品线的人机交互界面设计，贯穿以用户为中心的设计指导方向根据Web产品的特点指定一套规范，以达到提升用户体验，控制产品设计质量、提高设计效率、达到极高的准确的目的。统一识别、节约设计时间资源、重复利用、上手简单设计规范作用及意义4规范标准的用户界面设计师用户体验设计师前台技术工程师发布支持人员运营编辑人员规范标准的用户界面设计师前台技术工程师发布支持人员5网站界面设计规范标准网站界面设计规范标准6项目31-网站设计标准课件7项目31-网站设计标准课件8项目31-网站设计标准课件9项目31-网站设计标准课件10项目31-网站设计标准课件11项目31-网站设计标准课件12项目31-网站设计标准课件13项目31-网站设计标准课件14项目31-网站设计标准课件15项目31-网站设计标准课件16项目31-网站设计标准课件17项目31-网站设计标准课件18项目31-网站设计标准课件19不要将所有文件都存放在根目录下子目录的建立，首先按主栏目建立以及图片分类在每个主目录下都建立独立的Images目录目录的层次不要太深，不要超过3层网站目录建立原则不要使用中文目录，以英文、拼音为主。网站存储目录分配

所有广告、交换链接、banner等保存到adv目录不要将所有文件都存放在根目录下子目录的建立，首先按主栏目建立20文件夹、文件以及表名要规范以最少的字母表达最容易理解的意义，鼠标感应效果图片命名规范为"图片名+_+on/off"索引文件统一用index.html或default.html文件，即"桥页"，不制作内容，为跳转页和meta标签页如有必要每一目录下包含一个index.html或default.html索引文件文件命名文件名称统一用小写的英文字母、数字和下划线的组合来命名，尽量按单词的英语翻译为名称必须建立网站文件清单及其说明文档网站文件命名

文件夹、文件以及表名要规范以最少的字母表达最容易理解的意义21示例分析

（1）案例在一次讨论网站设计规范专题会议上，B公司软件开发部负责人张文讲述了一个发生在以前一个项目开发过程中的一件事。事情的大致情况是说某一天例会上，张文在听取每个小组分别汇报前一天的工作情况时，发现有两个开发小组都在自己功能目录下新建了一个子目录，用来存放图片。一个小组建立了image子目录，而另一个小组建立了images子目录。于是张文严厉地批评了不按规范操作的一个开发小组，责令立即修改且不能延误当天的开发任务。于是张文要求与会者判断哪一个开发小组违反了哪条操作规范。（2）分析首先，依照网站目录建设基本原则，其中明确规定每个主要功能的私有图片只能存放于各自独立目录下的images目录中，可见其中一个开发小组违反了上述规定。其次，即使可以根据具体项目来制定具体的网站目录建立规范，但通常不应该与基本原则相冲突。所以很显而易见，建立image子目录的开发小组违反了操作规范，应该承担相应的责任。示例分析（1）案例（2）分析22示例分析（1）案例在某一页面上需要放置两张鼠标感应图片，一张是当鼠标滑过时显示的图片，另一张是当鼠标滑出时显示的图片。接到任务后，开发小组立即指派一名美工人员半小时做完了两张图片，并分别命名后放入指定的目录下。假如自己就是那位美工人员，该如何为两张图片文件命名呢？（2）分析根据上述的命名规范，再结合实际要求，应该将一张鼠标滑过时显示的图片命名为mouse_over_on.gif，另一张鼠标滑出时显示的图片命名为mouse_out_off.gif。

示例分析（1）案例（2）分析231)链接结构◆树状链接结构（一对一）◆星状链接结构（一对多）2)链接规范◆新闻、信息类通常用新开窗口方式打开◆顶导航、底部导航通常采取在本面打开，特殊栏目和功能可新开窗口◆链接带下划线为链接通常的默认网格、顶部导航或特殊位置为观赏性可用样式表取消下划线◆链接的颜色可配合主题颜色风格改变，通常蓝色、暗蓝色、黑色,但激活的链接颜色、鼠标移动其上应有所变化网站存储目录分配

1)链接结构网站存储目录分配241）日期时间和数字

2）欢迎词

3）弹出窗口和引导页面

4）新闻和公告信息

5）控件

6）链接

7）主页内容

网站内容选择原则1）日期时间和数字网站内容选择原则251）首先考虑功能，然后才是表现2）从用户的视角看问题，使用用户的词汇进行描述3）不要向用户暴露实现细节4）使常用的用户任务简单化5）保持一致性，引导用户的使用习惯6）设计应响应需求7）灵活性8）个性化UI设计原则分析1）首先考虑功能，然后才是表现UI设计原则分析26

基本理念“整体协调，局部对比”。

1）确定主体色、使用相近色、运用黑白灰2）色彩要有可读性：尽量减小屏幕刺激，减轻视觉疲劳，文本要易读，图像易于区别3）色彩要鲜明：鲜艳明亮，能用彩色的就不用无彩4）色彩要独特：色彩符合所属类型网特点的，并有自己的独特性5）色彩有相关性：考虑色彩的象征意义和色彩意象，体网站的网面色彩主题特色和内涵，符合访问者的类型、社会背景、心理需求等的要求。6）色彩要协调统一：一个网站可用多种色彩，不至于单调，但必有一种或两种主题色，否会迷方向，但不是给人轻浮、花销的感觉。

网站配色的原则基本理念“整体协调，局部对比”。网站配色的原则27色彩意象用来描述人眼看到色彩后产生的心理感觉。色彩分类与属性色彩可分为非彩色和彩色两大类彩色具有色相、明度、饱和度3个属性。色相变化明度变化饱和度变化网页配色的设计色彩意象用来描述人眼看到色彩后产生的心理感觉。色相变化明度变28任何色光均可由红、绿、蓝3种颜色混合而成，而红色是暖色，判断色彩的冷暖主要看红色的成分多少。网页配色的设计网页配色的设计29RGB模式：使用RGB颜色模型，其红（Red）、绿（Green）、蓝（Blue）分量的取值从0到255，共256种强度值。网页配色的设计网页配色的设计30十大行业配色推荐网页配色的设计十大行业配色推荐网页配色的设计31项目一网站设计规范标准分析及风格

1）任务实施（2.5学时）①网站的主题、UI风格、色彩的分析(确定主体色、相近色、黑白灰等);②网站设计规范标准的分析；③编写严密的、完整的“网站设计规范标准说明书”包括目的、网站设计界面、存储目录名、文件名规范、代码规范完成在建设网站中的模块功能目录名、主要文件名的设计及其用途说明；课堂任务实践项目一网站设计规范标准分析及风格课堂任务实践322）学习成果评估（0.5学时）①是否完成网站的风格的确认(可选择典型网站进行参考)，写入到网站设计规范标准说明书；②是否形成详细的、严密的、完整的“网站设计规范标准说明书”(网站设计界面、网站存储目录名、文件名规范)，完成在建设网站的模块功能目录名、主要文件名的设计及其说明；③以小组为单位PPT内容展示，要求每组交流时间20分钟以内，完成组员代表阐述以及其他组员补充说明，其他小组提出看法及改进意见；④检查项目成员是否明确网站设计的核心规范。课堂任务实践2）学习成果评估（0.5学时）课堂任务实践33在互联网上下载一整套免费的的网站源程序代码，分析其网站目录建设、网站文件命名、数据字典命名、网页head区代码、网站代码编写是否规范，得到规范的内容，以及不规范的内容。本课的纪律、学习主动性的评价。对每个小组开展情况进行简要点评。提出要求：小组讨论要积极参与，增加主动性，才能有所收获。作业小结在互联网上下载一整套免费的的网站源程序代码，分析其网站目录建34网站建设与管理网站建设与管理354设计规范作用及意义

1235网站界面设计规范标准网站目录、文件以及页面链接规范

网站内容、UI及色彩的设计原则

5网站设计规范标准说明书

教学内容4设计规范作用及意义1235网站界面设计规范标准网站目录36网站设计规范及意义网站设计规范及意义37设计规范作用及意义

适用于Web产品线的人机交互界面设计，贯穿以用户为中心的设计指导方向根据Web产品的特点指定一套规范，以达到提升用户体验，控制产品设计质量、提高设计效率、达到极高的准确的目的。统一识别、节约设计时间资源、重复利用、上手简单设计规范作用及意义38规范标准的用户界面设计师用户体验设计师前台技术工程师发布支持人员运营编辑人员规范标准的用户界面设计师前台技术工程师发布支持人员39网站界面设计规范标准网站界面设计规范标准40项目31-网站设计标准课件41项目31-网站设计标准课件42项目31-网站设计标准课件43项目31-网站设计标准课件44项目31-网站设计标准课件45项目31-网站设计标准课件46项目31-网站设计标准课件47项目31-网站设计标准课件48项目31-网站设计标准课件49项目31-网站设计标准课件50项目31-网站设计标准课件51项目31-网站设计标准课件52项目31-网站设计标准课件53不要将所有文件都存放在根目录下子目录的建立，首先按主栏目建立以及图片分类在每个主目录下都建立独立的Images目录目录的层次不要太深，不要超过3层网站目录建立原则不要使用中文目录，以英文、拼音为主。网站存储目录分配

所有广告、交换链接、banner等保存到adv目录不要将所有文件都存放在根目录下子目录的建立，首先按主栏目建立54文件夹、文件以及表名要规范以最少的字母表达最容易理解的意义，鼠标感应效果图片命名规范为"图片名+_+on/off"索引文件统一用index.html或default.html文件，即"桥页"，不制作内容，为跳转页和meta标签页如有必要每一目录下包含一个index.html或default.html索引文件文件命名文件名称统一用小写的英文字母、数字和下划线的组合来命名，尽量按单词的英语翻译为名称必须建立网站文件清单及其说明文档网站文件命名

文件夹、文件以及表名要规范以最少的字母表达最容易理解的意义55示例分析

（1）案例在一次讨论网站设计规范专题会议上，B公司软件开发部负责人张文讲述了一个发生在以前一个项目开发过程中的一件事。事情的大致情况是说某一天例会上，张文在听取每个小组分别汇报前一天的工作情况时，发现有两个开发小组都在自己功能目录下新建了一个子目录，用来存放图片。一个小组建立了image子目录，而另一个小组建立了images子目录。于是张文严厉地批评了不按规范操作的一个开发小组，责令立即修改且不能延误当天的开发任务。于是张文要求与会者判断哪一个开发小组违反了哪条操作规范。（2）分析首先，依照网站目录建设基本原则，其中明确规定每个主要功能的私有图片只能存放于各自独立目录下的images目录中，可见其中一个开发小组违反了上述规定。其次，即使可以根据具体项目来制定具体的网站目录建立规范，但通常不应该与基本原则相冲突。所以很显而易见，建立image子目录的开发小组违反了操作规范，应该承担相应的责任。示例分析（1）案例（2）分析56示例分析（1）案例在某一页面上需要放置两张鼠标感应图片，一张是当鼠标滑过时显示的图片，另一张是当鼠标滑出时显示的图片。接到任务后，开发小组立即指派一名美工人员半小时做完了两张图片，并分别命名后放入指定的目录下。假如自己就是那位美工人员，该如何为两张图片文件命名呢？（2）分析根据上述的命名规范，再结合实际要求，应该将一张鼠标滑过时显示的图片命名为mouse_over_on.gif，另一张鼠标滑出时显示的图片命名为mouse_out_off.gif。

示例分析（1）案例（2）分析571)链接结构◆树状链接结构（一对一）◆星状链接结构（一对多）2)链接规范◆新闻、信息类通常用新开窗口方式打开◆顶导航、底部导航通常采取在本面打开，特殊栏目和功能可新开窗口◆链接带下划线为链接通常的默认网格、顶部导航或特殊位置为观赏性可用样式表取消下划线◆链接的颜色可配合主题颜色风格改变，通常蓝色、暗蓝色、黑色,但激活的链接颜色、鼠标移动其上应有所变化网站存储目录分配

1)链接结构网站存储目录分配581）日期时间和数字

2）欢迎词

3）弹出窗口和引导页面

4）新闻和公告信息

5）控件

6）链接

7）主页内容

网站内容选择原则1）日期时间和数字网站内容选择原则591）首先考虑功能，然后才是表现2）从用户的视角看问题，使用用户的词汇进行描述3）不要向用户暴露实现细节4）使常用的用户任务简单化5）保持一致性，引导用户的使用习惯6）设计应响应需求7）灵活性8）个性化UI设计原则分析1）首先考虑功能，然后才是表现UI设计原则分析60

基本理念“整体协调，局部对比”。

1）确定主体色、使用相近色、运用黑白灰2）色彩要有可读性：尽量减小屏幕刺激，减轻视觉疲劳，文本要易读，图像易于区别3）色彩要鲜明：鲜艳明亮，能用彩色的就不用无彩4）色彩要独特：色彩符合所属类型网特点的，并有自己的独特性5）色彩有相关性：考虑色彩的象征意义和色彩意象，体网站的网面色彩主题特色和内涵，符合访问者的类型、社会背景、心理需求等的要求。6）色彩要协调统一：一个网站可用多种色彩，不至于单调，但必有一种或两种主题色，否会迷方向，但不是给人轻浮、花销的感觉。

网站配色的原则基本理念“整体协调，局部对比”。网站配色的原则61色彩意象用来描述人眼看到色彩后产生的心理感觉。色彩分类与属性色彩可分为非彩色和彩色两大类彩色具有色相、明度、饱和度3个属性。色相变化明度变化饱和度变化网页配色的设计色彩意象用来描述人眼看到色彩后产生的心理感觉。色相变化明度变62任何色光均可由红、绿、蓝3种颜色混合而成，而红色是暖色，判断色彩的冷暖主要看红色的成分多少。网页配色的设计网页配色的设计63RGB模式：使用RGB颜色模型，其红（Red）、绿（Green）、蓝（Blue）分量的取值从0到255，共256种强度值。网页配色的设计网页配