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

1、4 4设计规范作用及意义设计规范作用及意义 1 12 23 35 5网站界面设计规范标准网站界面设计规范标准 网站目录、文件以及页面链接规范网站目录、文件以及页面链接规范 网站内容、网站内容、UIUI及色彩的设计原则及色彩的设计原则 5 5网站设计规范标准说明书网站设计规范标准说明书 设计规范作用及意义设计规范作用及意义 u 适用于Web产品线的人机交互界面设计，贯穿以用户为中心的设计指导方向u 根据Web产品的特点指定一套规范，以达到提升用户体验，控制产品设计质量、提高设计效率、达到极高的准确的目的。u 统一识别、节约设计时间资源、重复利用、上手简单规范标准的用户规范标准的用户界面设计师用户

2、体验设计师前台技术工程师发布支持人员运营编辑人员不要将所有文件都存放在根目录下子目录的建立，首先按主栏目建立以及图片分类在每个主目录下都建立独立的Images目录目录的层次不要太深，不要超过3层网站目录建立原则网站目录建立原则不要使用中文目录，以英文、拼音为主。所有广告、交换链接、banner等保存到adv目录 文件夹、文件以及表名要规范 以最少的字母表达最容易理解的意义，鼠标感应效果图片命名规范为图片名+_+on/off 索引文件统一用index.html或default.html文件，即桥页，不制作内容，为跳转页和meta标签页如有必要每一目录下包含一个index.html或default

3、.html索引文件 文文 件件 命命 名名文件名称统一用小写的英文字母、数字和下划线的组合来命名，尽量按单词的英语翻译为名称 必须建立网站文件清单及其说明文档 示例分析示例分析（1 1）案例）案例 在一次讨论网站设计规范专题会议上，B公司软件开发部负责人张文讲述了一个发生在以前一个项目开发过程中的一件事。事情的大致情况是说某一天例会上，张文在听取每个小组分别汇报前一天的工作情况时，发现有两个开发小组都在自己功能目录下新建了一个子目录，用来存放图片。一个小组建立了image子目录，而另一个小组建立了images子目录。于是张文严厉地批评了不按规范操作的一个开发小组，责令立即修改且不能延误当天的开

4、发任务。于是张文要求与会者判断哪一个开发小组违反了哪条操作规范。（2 2）分析）分析 首先，依照网站目录建设基本原则，其中明确规定每个主要功能的私有图片只能存放于各自独立目录下的images目录中，可见其中一个开发小组违反了上述规定。其次，即使可以根据具体项目来制定具体的网站目录建立规范，但通常不应该与基本原则相冲突。所以很显而易见，建立image子目录的开发小组违反了操作规范，应该承担相应的责任。示例分析示例分析（1 1）案例）案例 在某一页面上需要放置两张鼠标感应图片，一张是当鼠标滑过时显示的图片，另一张是当鼠标滑出时显示的图片。接到任务后，开发小组立即指派一名美工人员半小时做完了两张图片

5、，并分别命名后放入指定的目录下。假如自己就是那位美工人员，该如何为两张图片文件命名呢？（2）分析 根据上述的命名规范，再结合实际要求，应该将一张鼠标滑过时显示的图片命名为mouse_over_on.gif，另一张鼠标滑出时显示的图片命名为mouse_out_off.gif。1)1)链接结构链接结构 树状链接结构树状链接结构（一对一）星状链接结构星状链接结构（一对多）2)2)链接规范链接规范 新闻、信息类通常用新开窗口方式打开 顶导航、底部导航通常采取在本面打开，特殊栏目和功能可新开窗口 链接带下划线为链接通常的默认网格、顶部导航或特殊位置为观赏性可用样式表取消下划线 链接的颜色可配合主题颜色风

6、格改变，通常蓝色、暗蓝色、黑色,但激活的链接颜色、鼠标移动其上应有所变化 1 1）日期时间和数字）日期时间和数字 2 2）欢迎词）欢迎词 3 3）弹出窗口和引导页面）弹出窗口和引导页面 4 4）新闻和公告信息）新闻和公告信息 5 5）控件）控件 6 6）链接）链接 7 7）主页内容）主页内容 1）首先考虑功能，然后才是表现 2）从用户的视角看问题，使用用户的词汇进行描述 3）不要向用户暴露实现细节 4）使常用的用户任务简单化 5）保持一致性，引导用户的使用习惯 6）设计应响应需求 7）灵活性 8）个性化 基本理念基本理念“整体协调，局部对比整体协调，局部对比”。1）确定主体色、使用相近色、运用

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

8、饱和度变化任何色光均可由红、绿、蓝3种颜色混合而成，而红色是暖色，判断色彩的冷暖主要看红色的成分多少。RGB模式：使用RGB颜色模型，其红（Red）、绿（Green）、蓝（Blue）分量的取值从0到255，共256种强度值。十大行业配色推荐项目一网站设计规范标准分析及风格项目一网站设计规范标准分析及风格 1 1）任务实施）任务实施（2.5学时）网站的主题、UI风格、色彩的分析(确定主体色、相近色、黑白灰等);网站设计规范标准的分析；编写严密的、完整的“网站设计规范标准说明书”包括目的、网站设计界面、存储目录名、文件名规范、代码规范 完成在建设网站中的模块功能目录名、主要文件名的设计及其用途说明

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