网页设计命名标准
(
美工
)+
网页图片命名
+
网页
文件夹主要建立以下文件夹：
1
、
Images
存放一些网站常用的图片；
2
、
Css
存放一些
CSS
文件；
3
、
Flash
存放一些
Flash
文件；
4
、
PSD
存放一些
PSD
源文件；
5
、
Temp
存放所有临时图片和其它文件；
6
、
copyright
版权信息（可选）
8
、
readme
说明文件
Css
统一命名
注：本
CSS
命名规则只适合物
table
制作模式下
1
、
css
文件统一放在
css
文件夹下；命名
css.css
2
、主样式定义：
body
、
table
、
td
、
tr
、
a
3
、链接样式定义：
link_white
（白色）
；
link_black (
黑色
)
；
link_blue (
蓝色
)
等等；
说明
:
如有重复的后面加阿拉伯数字
;
如
link_red01
有下划线的如
:link_red_
4
、文字样式定义：
font_red (
红色
)
；
font_red_14 (
红色
14
号字
)
；
font_red_14b (
红色
14
号加
粗
)
5
、边框样式定义：
border_red_tblr
(
红色四个边
)
；
border_red_blr(
红色底左右三边
)
；
border_red_lr(
红色左右两个边
)
；
border_red_b (
红色底一个边
)
等等；
6
、
表单样式定义：
text_100 (
文本字段宽为
100)
；
textarea_200_red (
文本区域宽为
200
有红
色边框
)
；
select_100 (
列表宽为
100)
；
button_150 (
按钮宽
150)
；
说明：表单用宽度定义，在命名中最长写到：
"text_100_red"
7
、线的样式定义：
line_X (
横线
)
；
line_Y (
竖线
)
；
line_X_red (
红色横线
)
；
line_X_red2 (
两个像
素的红色横线
)
；说明：在
line
中只定义虚线，实线在
border
中定义
8
、其它样式定义：在这里主要定义一些个性化的样式；
文件命名
head.asp
头文件
foot.asp
底文件
index.asp
首页文件
sort.html
分类嵌套文件
article_channel.asp
文章
_
频道页
article_list.asp
文章
_
列表页
article_detail.asp
文章
_
显示页
注明：如果有多个文章频道
,
则用
article01,article02,article03
等等
exhibit_channel.asp
展会信
息
_
频道页
exhibit_list.asp
展会信息
_
列表页
exhibit_detail.asp
展会信息
_
显示页
product_channel.asp
产品中心
_
频道页
product_list.asp
产品中心
_
列表页
prodect_detail.asp
产品中心
_
显示页
corporation_channel.asp
会员
_
频道页
corporation_list.asp
会员
_
列表页
corporation_detail.asp
会员
_
显示页
information_channel.asp
商机信息
_
频道页
information_list.asp
商机信息
_
列表页
information_detail.asp
商机信息
_
显示页
job_channel.asp
招聘
_
频道页
job_list.asp
招聘
_
列表页
job_detail.asp
招聘
_
显示页
hr_channel.asp
求职
_
频道页
hr_list.asp
求职
_
列表页
hr_detail.asp
求职
_
显示页
job_hr_channel.asp
人才中心
_
频道页
job_hr_lisr.asp
人才中心
_
列表页
job_hr_detail.asp
人才中心
_
显示页
copyright.asp
版权页
图片命名
1
、导航命名：
menu_****.gif
如：
menu_bg .gif(
导航的背景图
)
2
、会员登录：
login_****.gif
如：
login_bg.gif (
会员登陆的背景图
)
3
、搜索命名：
search_****.gif
如：
search_bg.gif (
搜索的背景图
)
4
、小图标：
ico_
数字
.gif
如：
ico_001.gif
5
、线的命名：
line_X_
颜色
.gif
如：
line_X_red.gif(
红色横向虚线
)
说明：
line
只命名虚线
line_Y_red.gif(
红色纵向虚线
)
6
、广告命名：
ad_
数字
.gif
如：
ad_001.gif
7
、其它栏目的图片：以栏目名的第一个字母
_****.gif
如：
xwzx_bg.gif (
新闻中心背景
) cpzx_l.gif (
产品中心的左边图
)
8
、产品与栏目热点图片：
pic_
数字
.gif
如：
pic_001.gif
注：上，下，左，右可以缩写为
T
，
B
，
L
，
R
早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为
了一个非常重要的方面。
以下是一个设计师他参加一个面向质检行业的Web系统界面设计和开发工作的过程，他同时承担了系统开发和界面设计工作。工作内容：
?在需求分析阶段，参与了对客户的访问和调研；
?在概要设计阶段，参与了部分系统设计分析工作；
?在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；
?在代码开发阶段，参与了系统表现层的设计开发。
一般适用原则
·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。
·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。
·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。
·实时帮助原则：用户需要能随时响应问题的用户帮助。
·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。
·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。
·界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感。
B/S构架适用原则
·页面最小：由于Web的网络特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。
·屏幕适应：Web界面需要适应不同用户屏幕大小。
·浏览器兼容：需要适应不同浏览器浏览效果，虽然目前可不考虑不同浏览器差别，但仍需考虑IE浏览器版本差异带来的客户端不同效果。
·最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏。
·禁止水平滚动：由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。
·避免隐藏（右键）操作：浏览器的右键操作不符合用户体验习惯，尽可能避免。
Demo开发
Demo是详细设计阶段的重要成果之一，在对系统进行详细的分析设计之后，开发出界面D
emo原型，主要作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试。
本系统的Demo主要包括界面的设计制作，和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用，Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并在以后的代码编写工作中严格执行。