Oct 03 2008

简述一个大型网站UI设计架构、标准及规范

分类： Web Standards, 原创笔记, 设计理论 — admin @ 23:03

如题，今天写一写标准和规范的东西，这也是这块工作长期以来的经验总结，而且就这个话题本身来说，确信有必要建立一套ui架构的标准规范比这些规范的内容和如何制定标准更加重要。好像这个问题在同行中意见蛮多的（见http://uitony.com/?p=50），我感觉一个是这个问题浮出水面，大家都来讨论了，说明国内UI行业和运营网站公司发展进步了，二个是大部分网站UI部门的运作都不成熟，从demo设计到最终效果评估、从人员素质（包括产品经理和ui人员的专业知识储备）到工作流程都不成熟，所以关于这个问题在uitony.com那篇文章中有那么多叽叽喳喳的声音。

一句话，要不要标准规范？绝对要！站点大了嘛，内容多了嘛，涉及的方面和参与的人员广了嘛，不建立一套标准和规范怎么行？对这个有异议或不肯定的同行们可去读一读阿里、淘宝、雅虎等的ued博客，国内这些大的网站UI部门运作的相对成熟。

产品和UI的前期
以我所在单位房价网为例，UI框架标准规范的建立并不是一开始就花时间做这个东西，而是网站发展过程中逐步制定和完善起来的，早期，在产品策划上可能是个模糊未很成型的东西，这时候ui是与产品及公司高层的详尽沟通下，尽可能的了解他们的愿望及暂时可用的质料对产品进行定位，比如是做行业门户、新闻资讯、企业形象、社区、电子商务、功能服务等等，各种类型的网站在UI设计的思想上都不同，进而在后面细节上都有非常大的区别和取向。这个定位是个大方向上的，这点最好公司上下不要含糊。然后分析网站的受众和服务群体，美工在脑中初步对设计风格、色彩有个把握。有了这些酝酿和准备，再根据提供的产品原型设计出平面稿，待产品和高层审稿修改确认后制作demo，如果有UE人员，将对demo进行评审，确认后交由功能开发上线。

制定标准规范的时机
这个阶段是网站最初版本上线，设计开发告一段落，那这个时候是做标准规范的时机，因为早点时候所有东西都是新的未经受用户客户的考验，许多东西没法做成定标准和规范，而再往后就会进入东西多头绪乱甚至回头修改设计和代码以符合标准的状态。所以这个时候制定UI框架的标准和规范比较合适，可能这个标准的制定会耗很长的时间和资源，甚至某些组件没法制定标准，这都是值得并且有必要去做的，这是个最初UI的构想和规范，是要后面不断去完善的。磨刀不误砍柴功!

标准规范的内容
有了最初版本的上线，这时候就要花些时间好好把规范标准整理出来文档化了。
内容包括UI视觉设计和前端代码相关，制定标准规范的准则是整站UI统一性、可用及易用性、可扩展性、兼容性、重用性。
UI视觉设计具体有：logo、标准色、主色调及配色、排版布局、导航、按钮、表单、icon、布局模块、tab、列表
前端代码相关包括 css样式规范和html代码结构规范，具体有：
1．文字样式（链接、字符串、文本段落）
2．框架样式
3．模块样式（包括各类边距等细节、写一个规范代码）
4．链接样式
5．图片样式
6．标签样式
7．表单样式
html代码结构规范的原则是：尽量少的代码量规范且规律的写法实现设计效果，标签使用上尽量保持页面元素其原本涵义（如该用h、p、table、hr等标签的地方用相应标签，不能用div用上瘾了），及照顾到seo的写法。

想想看有了这些标准规范，ui人员还时常痛苦吗？产品人员还迷惑吗？大家还要为些小细节争吵不休吗？

简要列一些房价网的标准规范内容：