网站设计制作规范

我们一贯坚持，网站是一个工具，是给浏览者使用的，网站的一切都必须围绕浏览者来展开，一切以用户为中心。只有浏览者觉得好，用得好，体验得好，那才是一个好网站。一个运营型的行业门户网站，我们会对四个方面进行用户体验的策划及设计：
一、浏览体验：即网站的栏目和内容的体验，包括：页面导航、页面速度、页面容量、页面结构、内容安排、内容更新、内容形式、内容呈现方式和路径记录这9个方面；

二、视觉体验：即网站给用户在视觉上的体验，包括：整体风格、网站LOGO、页面布局、页面色彩、页面大小、动画效果、图片展示、图标使用、广告设置和声音设置这10个方面；

三、互动体验：即网站各功能给用户操作上的体验，包括：会员申请、会员注册、表单填写、点击提示、错误提示、在线问答、在线搜索、页面效果、新开窗口和路径设计这10个方面；

四、信任体验：怎么通过细节提升用户的信任体验，包括：友情链接、底部信息、关于我们、联系方式、帮助中心、网站备案、内容格式、内容订阅、网站地图、加入收藏、用户登录和论坛人气这12个细节；

下面，我们来具体说明一下，我们在建设网站时，对这四类体验的理解和制作的规范。

一、关于“信任体验”
信任体验，重在细节斟酌，强调稳定性。

1、底部信息：网站底部信息内容是网站中每个页面都共同的内容，底部信息为浏览者提供了很多建立信任体验的内容，例如网站的建立时间、是否备案、是否经营性网站、是否有网警标示、隐私声明、网站的归属关系（如：xx旗下的网站）这部分是细节的内容，容易忽视，但它们又是最为标准化和普遍的内容，需要留心设计。

2、友情链接：用户对网站信任的判断不仅建立在对网站设计的和功能体验的基础上，而且还有一个对同类或者其他相关网站的评估上。友情链接的价值不仅在于搜索优化上，也是一个网站用户定位的重要体现，如果网站链接的都是不知名的小网站，用户对它的评级也不会太高。在首页上做友情链接时，数量不宜过多，要特别注重这些链接的分量，哪怕是做些单向链接（知名行业网站、行业协会网站、相关政府类网站），也要显示自己的实力。

3、联系方式：全面、详细的联系方式及联系人，比较容易给浏览者建立踏实、信任的感觉，让人觉得放心、有问题能够找到人。如果网站的最终目的是为了客户打电话过来咨询，那么，需要将联系方式表现得更加明显，更加容易记住。

4、关于我们：这是一个用户了解网站背景最直接途径。也是网站经营者展示自己做事态度和风格的一个途径。网站经营者必须原创一个自我介绍的内容，并对页面内容做特色规划和设计。

5、网站备案：备案是最基本也是必须的一道程序，有了这个，才能证明我们网站是的合法的。网站的备案众多，不同的网站，需要的备案也各不相同，经营者需要一一查看并进行申请，越完善的备案，越能杜绝意外的发生；

6、帮助中心：网站技术日新月异，而浏览者对网站的了解程度不同，所以设置一个内容翔实的帮助中心，或者FAQ栏目是非常必要的。千万别想当然的认为浏览者对新东西一看就会，新东西总会有出问题的时候。此外，帮助中心的功能和内容丰富程度也是网站客户服务意识的一种体现，值得重视。

7、内容订阅：无论是用Feedsky、Rss、还是传统的邮件新闻列表，设置内容订阅，不仅仅是为了提高用户的黏度，推动用户再次访问，而且也是大型网站和正规网站的重要标示，只有那些有实力和细心的网站才会提供定期的资讯服务；此外，通过订阅功能，也能活跃一定的注册用户。

8、内容格式：内容的规范程度也是网站建立信任体验的重要方面，主要体现在资讯类内容标准化展现上。一方面每条信息是否包含了来源、作者、编辑、发布时间、还有点击量和评论。全面的辅助信息能提高该信息的可信度和权威性，进而提升网站的可信度。现在会把这几点完全列出来的网站越来越少了，原因很多，但建议重视并完善；对于点击量，设置一些数值，营造气氛；热门的资讯，可以用些马甲评论一下。另一方面就是个性化细节，例如设置页面颜色、设置字体大小、点击直接发送到邮箱，复制页面地址等，这些也是影响用户体验的重要方面。

9、论坛人气：网站如果有论坛，那么一定要营造人气很旺的氛围，多挂几个在线用户，设置多些热点内容，不然，浏览者很容易直接就把整个网站否定掉了。因此，要么不做，做了，就要将人气带上去，哪怕用“马甲”每天狂灌水。

10、网站地图：对web2.0的网站，无论网站规模大小，一定要做个网站地图，一方面搜索引擎容易抓取到网站信息，而且浏览者使用起来也会很快了解到整站架构，又是细节，但很重要。

11、加入收藏：“加入收藏”和“设为首页”是传统网站设计中必有的功能，但现在，“设为首页”的意义基本没有了，而加入收藏还相当重要的，一般是在网站的右上方，最好将加入收藏的位置放在最前面，用醒目的颜色标注。

二、关于“互动体验”
互动体验，重在路径设计，强调易用性。

1、会员注册：web2.0网站最好设计多级注册方式，只填写注册名、邮箱、密码等就可以完成第一层次注册，让后再进一步吸引用户补充内容，第一层主次，务必要流程清晰、简洁，为用户节省时间。更为关键的还在于后面，如何吸引用户补充全面的信息？那就要让浏览者明确他们补充信息的价值在哪。此外，还要注意提示用户信息的完整程度。

2、会员申请：会员申请务必要贯穿在网站的每个页面，将随机性用户转变成注册用户是提高网站流量和用户黏度的重要一环，会员申请的按钮或者位置最好设计的醒目一些。此外，会员功能的核心是权限控制，网站必然要有一些只有注册用户或者是高级用户才能浏览到的内容，但还要保证展现给非注册用户的信息也具有一定的吸引力，否则，浏览者怎么会有动力去注册呢？在建设之前，我们就要考虑清楚：用户为什么要注册？用什么吸引用户注册？用什么稳定注册用户的定期访问？

3、点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。对于图片，最好设置图片标注，鼠标滚动到图片时能显示图片标题。

4、表单填写：表单填写有多种方式，选项也可以有很多，但要将必填的选项标明清楚，而且分阶段（或分页）显示，避免让用户觉得填写是非常麻烦的事情。提交成功后，感谢提示页面务必要精心设计，尤其应该说明，注册后的用户接下来要做什么，可以做什么？感谢页面在内容和形式上要设置得个性化一些。

5、在线问答：在线问答目前有很多种形式，根据需要选择，一般建议配合客服中心的“常见问题”“F＆Q”一起，因为很多时候，我们不能做到24小时在线回答提问，可以引导客户先自己找答案，如果找不到答案，再联系或者留言（不在线的话）。在线问答除了解答疑问，还可以担当一个重要的角色：收集各种信息。这需要设置在线问答流程和话术，增加一些收集信息的问题，比如网站评价、满意度询问、改进建议等。对于用户提出的新问题，要进行汇总分析，并将其补充到“常见问题”或“F＆Q”中。

6、错误提示：一定要做一个“错误提示页面”，对发生错误的页面给予合适的引导。因为浏览者对于在网站上遇到了错误页面肯定会非常不爽，甚至会直接关闭网站。设计这个页面时，要充分考虑到用户当时的访问心理，要有真诚的解释说明，合适的图片，最重要的是，给出解决方案，最后，将浏览者重新引向网站。

7、页面效果：web2.0在技术层的特色是很多最新的技术能方便快捷地整合进来，并能很快应用到网站上，尤其是在页面层的应用最为明显，例如ajex，lightbox js等，我们互王结合本身就是“技术研发中心”的优势，时刻关注这些技术的应用，并不断开发一些新的，合适的功能，应用到网站上，始终带领潮流，紧跟潮流；

8、在线搜索：首先是搜索条位置的设置，最常见的位置是在右上方，资讯类网站一般中上方显要位置；其次是搜索操作的设置，提供精确搜索和模糊搜索；精确搜索，是指先选择信息的分类，例如信息栏目、作者或者信息标题等（采用下拉菜单形式），然后输入关键字；模糊搜索就是直接输入关键字进行搜索；默认为全文检索；最后还要考虑搜索结果的呈现方式；呈现方式有很多细节的地方，包括搜索结果数量、信息排列的标准及方式（标题、标题加简要内容）、关键词颜色等。

9、路径设计：说到体验，最直接的就是用户在网站上产生的有效点击，每一次点击也意味着一个新体验的开始，而在众多点击之间，路径的设计和记录也体现了web2.0个性化服务的精神。每个网民的访问习惯和浏览习惯都有所不同，第一要设计最直接有效的浏览路径；第二要记录网民的浏览路径，便于随时返回；第三，要试图寻找与网民浏览路径的匹配。

10、新开窗口：现在用maxthon、firefox、TT等的多线程浏览器的浏览者越来越多，所以，在进入最终页面浏览时，多采用新窗口打开，方便用户浏览信息，二期节省返回时间和再次查找的时间。

三、关于“视觉体验”
视觉体验，重在UI设计，强调舒适性。
1、网站LOGO：LOGO的设计水平直接体现了网站建设者的审美水平。LOGO是网站整体风格的主导，也是网站对外传播的形象标示，对于明确的LOGO，设计师会仔细斟酌，将LOGO的特性融入到网站的风格中；如果没有LOGO，需要重新设计，那么设计师会根据网站的定位和目标，结合行业的特色等，进行设计；一般简洁得体的LOGO比较受浏览者认同。

2、整体风格：风格是指网站给浏览者的第一印象，主要体现在两方面，一是网站质量的权衡，浏览者第一次看到网站后，首先会根据视觉的感受对网站有个上、中、下的心里评判，二是网站类型的归属，例如是行业资讯、品牌宣传、网上贸易等。因而网站在设计之前，我们的策划会先明确目标客户群体，分析目标客户的审美预期和审美喜好，确定网站的类型归属，然后，设计师才有针对性地进行设计；

3、页面色彩：六个规范:网站必有一个主题色；协调页面冷暖色调的搭配，不单一色调；严格把握主色调、辅助色的使用数量，不花俏；保持网站整体形象相统一；使用渐变色，营造色彩层次感（从上到下，从左到右……）；调节色彩的明度和亮度；

4、页面布局：布局首先是要突出重点，主次分明，图文并茂，声画全面。网站的有效空间是有限的，网站的第一屏画面是我们设计规划的重点，在页面布局时还要考虑与网站营销目的的结合，将最能吸引用户的内容，通过合适的表现形式，放置在最重要的位置。

5、动画效果：首先考虑的是动画的放置位置，然后是呈现方式，再次是加载速度，最后也是最关键的是内容的表现形式。动画效果是为了在第一时间吸引用户的关注，但关注不是最终目的，而是要让用户接受动画所传达的内容。所以，在动画表现形式及内容设计时，我们注重内容与动画节奏的协调，以内容为中心制作动画效果。

6、页面大小：主要是根据核心用户群来设置，这也是为什么要做用户调查的原因之一，不同的用户使用习惯不同，比如，据调查，30岁以上用户，还是用800*600的居多，如果网站的主要用户群是这类人，那么就必需做调整。一般情况下，大小为1024*768，并设置成为自动适应的页面，如果无法修正，页面主要内容以偏左设置，这样那些使用800*600的用户，也方便一些。

7、图标使用：图标的设计一定要与页面的整体风格统一，其次是简洁、明了、易懂、准确，最后可以尝试增加一些动态、3D效果，让图标更有动感。

8、图片展示：首先我们考虑的是放置图片的位置，考虑与整体网站比例协调，是否符合一般用户的浏览习惯；其次是选择图片的展示形式，现在图片的展现形式非常多，可以采用flash、Lightbox效果等；最后还要考虑使用的图片的大小，缩略图的比例，是否符合网站的风格、是否清晰等。

9、声音设置：网站的声音一般分为两种，一是背景音乐，属于自动播放的声音，不断循环；二是点击音乐，需要鼠标移动或点击到特定的地方（多数用于导航）才会有声音出现；对于背景音乐，除非是形象推广类的主题网站，或者某些活动推广可以设置，一般都不建议设置，而且要设置独特的音乐而不是流行的音乐。网站有设置背景音乐时，还要将开关按钮及音量控制放在显要位置，免的浏览者因为厌烦，又找不到控制按钮而立刻关掉页面。点击音乐，给人的感觉是灵动、活泼、时尚，我们也要根据实际的情况选择是否采用，采用什么声音，在哪里采用比较合适；

10、广告设置：首先还是要考虑广告位的选择和内容的展现方式。最起码不能让广告影响了浏览，不能让用户对广告产生反感。有些广告位置及表现形式是一般浏览者都认可的，例如页面中上方的banner条，页面两边的对联广告，页面右下方的文字广告等。

四、关于“浏览体验”
浏览体验，重在合理规划，强调吸引性。

1、页面速度：视频、动画、图片的大量应用，对网站的浏览速度也影响巨大。而网页的浏览速度，已经决定了浏览者对这个网站的满意度和再次浏览及几率。所以，除了选择一家稳定的服务器托管商外，还要考虑以后发展，比如在浏览量不断增加后，怎么应对高峰期，怎么南北互通等；

2、页面导航：网站导航如同楼房的地基，是整个网站基础和框架，一切内容和服务都是从导航中延伸出去。页面导航的有两个层次，一是形式层：即导航位置、表现形式（文字、图片、flash等）等，二是内容层：即内容的分类和概括。所以，在策划及设计导航时，我们强调动感、简洁及清晰的表现形式；并会结合客户行业的特色，规范、条理地分类各种信息；栏目名称尽量简短、明晰，栏目层次也尽量少，以内容为中心；

3、页面结构：页面结构是指放置页面内容的框架。现在的网站越来越多，网站的页面结构也基本形成了一些浏览者惯用、熟悉的模式。主要是“同”字型、“司”字型、“三”字型、“F”型等。我们在设计时会遵循这些基本模式，而且会在这些基础上做创意创新，但保证不打破用户的浏览预期。

4、页面容量：主要指首页的页面容量，一般的企业网站，首页内容不建议超过两屏，让用户不用滚动鼠标就可以浏览到整个页面。页面的设计要考虑：1、页面文字和图片的搭配；2、不同字号、字体、颜色的搭配；3、网站内容与空白的搭配，避免页面造成视觉抵制（心理学家做过实验，人眼每秒摄入的有效字符最多只有20个，要是页面全是细密的文字，效果就可想而知了）；

5、内容更新：主要从内容来源、更新频率、更新数量、内容质量这几个方面来考虑。我们更多强调如何调动用户的积极性，让用户参与信息的更新，共享自己的信息；内容更新已经不仅仅是对网站编辑者的考量，也是对网站用户价值的衡量；频率和数量根据实际情况来规划；对于内容质量，主要是从原创、转载、内容本身价值等方面权衡；

6、内容安排：首先突出重点内容，用大标题，大图片塑造视觉冲击；其次是协调内容，每一个栏目应确保足够的信息量，避免栏目无内容情况出现；然后是内容形式，兼顾视频、图片、文字的比例和页面协调。

7、路径记录：记录用户的浏览路径，访问记录等，方便用户随时返回和查找；对一些重点栏目和页面可以设置快速链接或者设置页面底部导航，为用户提供明确的快速入口。

8、内容形式：将信息立体化，将视频、图片、文字、评论都在一个页面中展示，而且评论即时更新；对于文字部分，字体大小可以根据需要设置（一般是大中小三个选择），可以对信息内容进行“关键字”标注，给“关键词”设置链接等；信息页面一般不超过两屏，较长的信息采用多页浏览；

9、内容呈现方式：考虑更方便、更完善的细节内容，包括新文章的标记、文章导读、相关内容的推荐、还有网友推荐、打印页面、E-MAIL发送给好友、复制网址等。

本文发布于北京网站建设公司尚品中国http://www.sino-web.net/