篇一：网页程序界面开发规范
网页程序界面开发规范
目录
第一章 前言 .................................................................................................................................... 3
一.编写目的 .................................................................................................................................. 3
二.编写背景 .................................................................................................................................. 3
三.文章注释 .................................................................................................................................. 3
第二章 目录结构规范 .................................................................................................................... 3
第三章 HTML代码编写规范 ....................................................................................................... 5
一.字符、段落规范： .................................................................................................................. 5
二.HEAD规范： ........................................................................................................................... 6
三.表格和列表的使用： .............................................................................................................. 8
四.图片：.................................................................................................................................... 10
五.其他：.................................................................................................................................... 11
第四章 网页内容、布局规范....................................................................................................... 12
一.设计原则： ............................................................................................................................ 13
二.内容规范： ............................................................................................................................ 14
三.布局规范： ............................................................................................................................ 19
四.文字与用语： ........................................................................................................................ 24
五.颜色的使用 ............................................................................................................................ 25
第五章 CSS样式表编码规范 ...................................................................................................... 26
第一章 前言
一.编写目的
本文件的编写和发布目的在于提高网络项目质量和可维护性,通过对规范的推行，形成统一的编码风格。
二.编写背景
为了提高源程序的质量和可维护性，提高软件产品质量，有必要对软件产品的源程序的编写风格做出统一的规范约束。
本规范的内容包括：网站工程、目录结构、HTML、脚本、图片、多媒体等。
三.文章注释
? 文中出现的公式，以中括号“[ ?]”括起来的部分，是可选部分。
? 文中出现蓝线浅灰色的文字部分，表示演示代码、代码说明。
第二章 目录结构规范
创建目录的原则是：对工程中所有的资源进行归类存放，并考虑可能存在的各种业务需求，例如访问权限。同时，当代码交付于另一个开发者时，对方能非常明确的知道各个目录的意义，能方便快捷的
查找到相关的资源文件。
? 目录结构
应开设 /images，/css，/script 三个文件夹，分别存放图片资源、CSS样式表定义文件和脚本，有些项目还使用了其他的一些网页相关的资源，如flash、avi、rm、include等，可开设 /common 目录来存放这些资源。images目录中放不同栏目的页面都要用到的公共图片，如果图片较多，可按图片的职能类型，再划分子目录。
? 根目录一般只存放首页，以及其他必须的系统文件，每个主要栏目开设一个相应的独立目录。
? 目录命名规范
除非有特殊情况，目录的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导。名字结构参照微软的命名习惯，以多个单词连接形成，其中第一个单词首字母小写，后面的单词首字母大写，例如：systemManage。对于过长的单词，可采用常规缩写，例如department 的常规缩写是dept，原则上以他人能迅速理解为准。
? 网页的命名规范
指导思想：一是使得每一个成员能够方便的理解每一个文件的意义，二是当在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便查找、修改、替换、计算负载量等等操作。禁止使用中文命名。
? 静态Html网页，为了统一拓展名，规定为 htm，而不是 html；
? 图片的命名规范：应将相同类型的图片，让它们放置在一起，
类型参照下面的定义；
◇ 广告、装饰图案等图片取名：banner ，或 bar
◇ 标志性的图片取名为：logo
◇ 在页面上位置不固定并且带有链接的小图片取名为
button，或 btn
◇ 在页面上某一个位置连续出现，性质相同的链接图片取名：
menu
◇ 装饰用的照片取名：pic
◇ 不带链接表示标题的图片取名：title
◇ 依照此原则类推。
? 命名的方法为：
例如 button_searchUser.gif， memu_sendNotice.gif，禁止使用中文命名。
第三章 HTML代码编写规范
必须考虑到客户浏览器兼容性、可维护、可拓展升级等要素。
一.字符、段落规范：
? 为了保证不同浏览器上字号保持一致，字号用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文
篇二：Web app界面设计的8个实用技巧
Web app界面设计的8个实用技巧
HTML5技术的强势发展，为互联网带来的最大改变就是： web从“已死”的预言中回过头来给Native app一记沉重的回马枪，web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗，并试图建立以自己为中心的”云“服务平台，企图在web app时代到来的时候充当霸主。
本文将围绕web app的设计，与大家讨论几点设计技巧。
什么是web app?
Web app是一种通过网络(如互联网或内联网)访问的应用程序;也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言(如JavaScript)并 依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及，以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护，具有支持跨平台的内在属性，是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。
Web app的优点
◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤;
◆浏览器应用程序几乎不需要客户端上的磁盘空间;
◆新功能从服务器自动传递给用户，用户自己不必升级程序;
◆可以轻松整合进入其他服务类web程序;
◆跨平台的兼容性
现阶段web app还很难有一个设计原则
HTML5技术仍在发展中且发展尚不完善， web app作为该技术的产物自然也是在不断试验中进步;此外，web app还要依赖兼容性浏览器更强大的渲染能力，俗话说“皮之不存毛将焉附”，在大家都期待的强大浏览器出现之前谁也难以预言web app需要做成什么样才算是一个合格的产品。在这种行业背景下，web app还难以有一个所谓的设计原则，起码现在还不构成总结一个合理设计原则的条件。
其实，所谓的设计原则本就是从已有的、典型的设计作品中倒推得出的。比如，解构主义设计风格的提出不是之前就有的，是理论家在分析总结了建筑设计师 盖里、埃森曼、特斯楚米等大师的典型设计作品，结合这几位大师的设计理念后定义的一个流派名称。所谓的解构主义设计原则也是从权威大师典型作品中归纳总结 的; 设计原则出现后继而可以对之后的设计起一定的指导作用。
因此本文不谈所谓的web app设计原则，现从已经上线的优秀产品中选择典型设计元素与大家讨论分享，寻找可以借鉴的地方，并借此增进对web app产品设计的认识。
Web app界面设计的8个实用技巧
Web app用户界面设计，核心是web设计;不过与一般意义上的web设计相比较，web app更加注重功能。为了在与桌面应用程序的竞争中展现其优势，web app需要提供简洁、直观、快速响应的用户界面，以便于用户在任务操作中节省精力和时间。
1.界面元素随需而变
力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多，用户需要寻找和思考的时间也就越多。同样，界面中存在的选项越少，可用功能就越明显、越容易浏览。不过简化界面并非轻而易举，尤其是你不想减少应用程序功能的情况下。
以Kontain搜索模块为例，在搜索框中有一个下拉菜单，帮助用户细化搜索范围。
用户可以通过菜单选择自己想要寻找的内容。该网站通过这些选项简化了搜索框。
将高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最经常用的是哪些功能，然后把其他功能隐藏处理。这些可由下拉式菜单和控件完成。例 如，搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。当用户需要这些过滤器的时候只需要几次点击就可以使用。决定哪些功能保留展示哪些需要隐藏起 来，并不是一个简单的工作，需要取决于功能控件的重要程度和被使用的频繁程度。
擅长如此处理的还有CollabFinder， 如上图。用户点击搜索链接后并没有被马上带到其他页面;搜索框控件下拉下来，允许用户在当前页面内直接进行搜索操作。这样的设计方式，既保持了用户视觉焦点的稳定，又使得整个页面在不使用某个特定功能的情况下简洁清爽。
2.为模态窗口增加边缘阴影
弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸，有助于将菜单或窗口从背景中区别开来;另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。
这个技巧根植于传统桌面程序，帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来，阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上，于是拉近了模态窗口与用户的距离。
如上图，Digg的登录窗口边缘拥有厚厚的阴影，对下面内容的视觉噪音起到了有效的屏蔽作用。
为实现这样的效果，设计师往往将透明的PNG背景图片作为容器，再把内容填充到容器中，同时等距离填充弹出框各边缘。或者使用具有透明边框的背景图 片，并将内容框绝对定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3
中的 drop shadows命令，但需要注意浏览器是否支持。
3.空白状态时告诉用户可以做什么
当设计web app的时候，不仅需要关心一般情况下的信息展示，还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候，可以在空白区域放 置一条帮助信息告诉用户如何开始。例如，一个项目管理的应用程序主页会列出用户的项目，假如还没有什么项目信息，可以为用户提供一个项目创建页面的链接。 即使这个页面上已经存在了这样一个功能按钮，一个额外的帮助并不会有什么妨碍。
如上图，Campaign Monitor在右边方向提供了一个建立新信息的快速入口。 Wufoo的表单页面有醒目的、友好的信息鼓励用户去创建新的表单。
这个技巧可以有效地鼓励用户试用该服务，并在注册后立即进行使用。通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。
此外，只为用户展示最重要的功能选项也很关键。一股脑的将众多功能倾泻给用户并没有什么实际意义。需要牢记的是，用户通常想从应用中获得或多或少的信息，但却不想跳进细节中，用户没有时间也没有兴趣。
在空白状态中激励用户，可以显著地降低用户的流失率，并帮助潜在的用户更好的理解程序系统是如何工作的。
4.Button状态积极反馈
许多web app拥有自定义样式的按钮。默认的输入按钮可能不适合某些情景，文字链接有时候看起来又太含蓄。需要注意的是，把链接做成Button样式的时候，它们 就应该有button的表现形式。比如，在点击button的时候它们应该会出现被“压”过的样子。这不仅仅是纯粹的视觉变化。及时反馈给用户，可以使 web app感觉起来更灵敏，与桌面应用程序的用户体验更接近。
可以使用CSS添加按钮的“pressed”等状态，实现在不同状态下显示不同背景图片的功能。
例如Highrise中的按钮，在鼠标指针点击的时候会呈现 “pressed”状态效果，为用户提供了灵敏的反馈感受。
5.使用上下文情境导航
在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件，因为用户不是在任何情况下都需要它们。
上下文情境导航最好的一个例子就是Office 2007中，原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能，如编辑图形、校对或者简单书写。
Web app可以从这种上下文情境导航中获益，仅展示用户需要的、而不是所有可用的功能，从而保持用户界面的整洁清爽。
例如上图中，Lighthouse 有非常典型的tab导航菜单;然而，在tab导航栏的下方它还有二级导航，在这个二级导航中只显示网站活跃部分的相关条目。
6.更加重视关键功能
并不是所有的控件都拥有相同的重要性。例如创建一个新的条目，页面中会有“创建”“取消”两个button. 这里的“创建”就要更加重要些，因为这是大多数情况下用户即将要做的事情。极少的情况下用户才会去点击取消。虽然这两个控件并排放置，但是不要给予相同的 重视程度。
为了将注意力引导到“创建”上，我们可以尝试使用不用的风格或样式。一种方式是将“创建”设计成button样式，“取消”设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色，并使button略有凸起的效果。这样便于抓住用户的目光。
篇三：网站界面设计应该注意的情况
网站界面设计应该注意的情况！
网站用户界面（Website User Interface）指网站用于和用户交互的外观、元素和程序等等。
如果你经常上网，就会看到很多网站设计很朴素，看起来给人非常舒服的感觉；有的网站很有创意，常常给人带来意外的惊喜和视觉的冲击；但相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。
网站界面设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站界面设计变成了一门独特的艺术。通常，企业网站用户界面的设计一般应遵循以下几个基本原则：
一．用户导向原则（User oriented）
设计网页首先要明确到底谁是这个网页的使用者，要站在用户的观点和立场上来考虑和设计网站。要做到这一点，就必须要和用户来沟通，了解他们的需求、目标、期望以及偏好等。网页的设计者要清楚，用户之间的差别是很大的，他们的能力也各有不同。比如有的用户可能会在视觉方面有所欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也可能会有些障碍，对于网站的语音提示反应比较迟钝；而且相当一部分用户的计算机使用经验还很初级，对于复杂一点的操作就会感觉到很费力。另外，用户使用的计算机机器配置是千差万别的，如显卡、声卡、内存、网速、操作系统以及浏览器等都会有所不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成错乱。
二．简洁和易于操作原则（Keep It Simple And Stupid - KISS）
KISS原则就是"Keep It Sample And Stupid"的缩写，简洁和易于操作是网页设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没必要在网页上设置过多的操作，堆积很多复杂和花哨的图片。此原则的一般要求：
1、网页的下载不要超过6秒钟（普通的家庭宽带为2M的，速度一般在220kb/s）；
2、网页尽量使用文本链接，而减少大幅图片和动画的使用，从而加快网页的打开时间；
3、操作设计尽量简单，并且有明确的操作提示；
4、网站所有的内容和服务都尽量在显眼处向用户予以说明等。
三．布局控制（Layout）
在网页排版布局方面，很多网页设计者还不够重视，网页界面设计排版过于死板，甚至照抄他人。如果网页的布局凌乱，仅把大量的信息堆集在页面上，就会干扰浏览者的阅读。一般在网页界面的版式设计上所要遵循的原则有：
1、7±2的Miller公式。
根据心理学家George A.Miller的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 7±2 比特。这一原理被广泛应用于网站建设中，一般网页上面的栏目选择最佳在5～9个之间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。然而很多国内的网站在栏目的设置远远超出这个区间。
2、分组处理。
上面提到，对于信息或栏目的分类，不能超过9个。但如果你的内容实在是太多，超出9个，就需要进行分组处理。如果，你的网页上有几十篇文章的链接，需要每隔7篇加一个空行或平行线做以分组。如果你的网站内容栏目超出9个，如腾讯公司的网站或其它几个比较知名的门户，有很多个栏目，超过了9个。为了不破坏7±2的Miller公式，在设计时把比较有代表性的分类加粗，然后再按性质分组。
四．视觉平衡（Visual balance）
网页设计时，各种元素（如图形、文字、空白）都要有视觉平衡作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，设计网页时需要以更多的文字来平衡一张图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个原则。例如，你的很多的文字是采用左对齐，需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。通常情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分通常放置一些Banner广告或导航条及网站LOGO，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值；网页上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该网站的形象。在网页设计上，适当的地方增加一些留白，精炼和升华你的网页的形象及美感，使得页面变得简洁。
五．色彩的搭配及文字的可阅读性（Colors and text can be read）
颜色是影响网页的重要因素之一，不同的颜色对人的感觉有不同的影响，比如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网页设计选择最恰当的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。
为了方便阅读网站上的信息资讯，可以借鉴参考报纸及杂志的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另外一种能够提高文字可读性的因素是字体的选择，通用的字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。这类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。
六．和谐与一致性（Harmony and consistency）
通过对网站的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。或者说，网站的众多独立网页看起来更像一个整体。网站界面设计上要保持一致性，这是很重要的一点。一致的网站结构设计，可以让浏览者对网站的形象有深刻的记忆与印象；一致的导航设计，可以让浏览者迅速而又有效的进入在网站中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个网站的各种功能操作。如果破坏这一原则，就会误导浏览者，并且让整个网站显得杂乱无章，给人留下不良的印象。
当然，网站设计的一致性并不意味着刻板和一成不变，有的网站在不同栏目使用不同的风格，或者随着时间的推移不断的改版网站，会给浏览者带来新鲜的感觉。
七．个性化（Individualization）
1、符合网络文化
企业网站不同于传统的企业商务活动，要符合Internet网络文化的要求。首先，网络最早为非正式性、非商业化的，只是科研人员用来交流信息的。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具备隐蔽性，谁都不知道对方的真实身份和信息。此外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。此时访客的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候是截然不同的。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在网站上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围就会使网站的访问量大增。
2、塑造网站个性
另外，网站的整体风格和整体气氛表达要同企业形象相符合并且应该很好的体现企业CI。
八．网页的均衡规划与选择（Planning and selection）
1、尺寸
·800*600能照顾到所有网友的电脑，但相当是张“小报”。
·1024*768渐成主流。1024*768能比800*600多出一栏的信息。
·正文页采用自适应设计，能在正文页做更多相关内容。首页也可以尝试自适应的设计。自适应设计的核心是要留出宽度伸缩自如的栏。
·在1024*76模式下，页面的长度不易超过10屏。
·随着电脑升级换代，分辨率提高，电脑屏幕能够提供的面积越来越大，这是一种难得的资源，要充分利用。“小报”改“大报”要增加一倍的纸张成本，网站改“宽版”，成本的增加却要小得多。
2、字体字号
·目录页用小字号，为的是放更多的标题。 ·正文页用大字号。为的是让读者读得舒坦。 ·慎用不容易看清楚的楷体。楷体的作用等于图片，主要起美化版面的作用。 ·多用对搜索引擎友好的标粗，来表示重点。
3、颜色
·同一个页面的颜色不要超过4种。眼花缭乱，容易产生视觉疲劳。
·颜色对比不要反差太大。网页版面不是美术作品，要避免形式对内容的喧宾夺主。·文字+底色能够起到很好的突出作用，在视觉变化上相当于图片的作用。
4、静态化
·访问量大的页都应该静态化，以便减少服务器压力，增强网站稳定性。访问不到的网页是最差的网页。
·动态化和静态化在一个页面中结合使用，能同时得到轻负荷和即时交互性的好处。·哪些页面的哪些地方需要静态化要在一开始就考虑，访问量大了之后，再高考虑，就迟了，由动态化转为静态化，会有很多历史问题。
5、分栏
·首页选4栏？还是3栏？
·正文页多用2栏。
·“纵向逻辑”是指将相近的内容从上至下排列，而不是从左向右排列。如果读者对这
方面内容感兴趣，他会从上至下，逐行阅读。这样可充分力利用首屏，让首页增多从上至下阅读的可能。
·避免一栏太强，一栏太弱。通过图片、套红等手段进行调控。平均使用读者主意力。使读者不敢放过左中右任何一栏。
6、图片
·有图有真相，一图胜千言。十分必要时才用。因为图片的编辑成本和带宽成本都比较文字高很多。
·在目录页的图，小点，再小点，多用特写；小分辨率，能看就行。在正文页的图，保证清晰，美观。正文页有的是版面。
·正文页在5屏之内，尽量不要分页。让读者一次读完。
7、导航条与网站地图
·导航条是网站的门牌号码，不能随意更改。否则，读者会迷路，找不到他原来看的内容。
·导航条上的分类名的前后次序要兼顾重点和读者阅读逻辑，即归类摆放。·导航条最多三行。最好二行。太多行显重。
·导航的更多，就是网站地图。网站地图的摘要版可以放在网站底部，成为底部导航。网站的底部导航，很有必要。其好处是：一、可放多行；二、可形成网站底部的阅读重点。将读者从首屏带到最后一屏，期间会增加很多点击。
·主导航和频道导航：主导航每页都有，频道导航只在本频道页面出现。
8、首页更新成本
·首页设计不能只考虑美观、协调，要考虑24小时更新一遍之要求。更新是网站的生命，一定要最大限度地降低首页更新成本。
·交叉自动同步更新的设计，可有效降低各种首页更新成本，给读者内容丰富即时的感觉。
·更新即时的首页是网站的资源，因为是资源，更多的标题会拥上这个首页。如此，正循环，这个首页也就火了。更新不即时的首页是网站的鸡肋，会越来越寂寞，最终会被荒废。
·每个首页的设计成至少要有一个读者点击进去的理由。即时更新比独家内容成本低。
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有