网站ui设计规范.docx

网站ui设计规范 　　篇一：新浪网UI设计规范 　　新浪网产品设计指南（含UI规范）  　　摘要: 以下分各模块介绍。设计规范介绍 什么是设计规范？《产品设计部·人机交互界面设计规范 》适用用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设...  　　以下分各模块介绍。  　　设计规范介绍 　　什么是设计规范？ 　　《产品设计部·人机交互界面设计规范 》适用用于WEB产品线的人机交互界面设计方面的指导手册。  　　贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。  　　谁去读设计规范？  　　设计规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营编辑人员的参照。  　　设计理念  　　精于心 简于形  　　通过精心简约的设计,传达先进的技术给用户提供便捷简单的使用体验  　　设计指导原则  　　A 设计规范 逻辑性  　　设计为内容服务，根据逻辑关系通过视觉表现引导用户使用  　　例如：google yahoo搜索结果页通过字体的颜色大小突出重要度  　　扩展性  　　采取模块化设计的可扩展性，减少修改和再开发的成本。  　　例如：奥运项目左右模块尺寸的统一可以方便编辑随时调用修改内容的位置 　　统一性 　　用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承  　　例如：无论每个频道如何追求个性不能脱离新浪整体风格，要有继承和延续保持从属关系 个案除外，个案量应有百分比， 本地化  　　考虑用户的文化背景及习惯，做到设计上本地化。体现人文关怀 例如：google，被搜索文字连接采用红色，及中国传统节日的logo体现。设计上不照搬英文站应根据中文特色，体现中文之美  　　遵循视觉设计原理  　　页面外观  　　页面类型： ① 普通页面 ② 宽带页面 ③ 自适应页面 ④ 其他页面  　　类型说明： 　　① 普通页面 　　基本属性：宽度 750px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：新浪首页 频道首页 频道二级 频道各级 正文页面等及其他非宽带产品线  　　② 宽带页面  　　基本属性：宽度 900px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：宽带频道首页和各级页面 不包括正文页，及其他宽带产品线  　　③ 自适应  　　基本属性：宽度 100 % ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：论坛 聊天 直播 等页面  　　④ 其他页面  　　基本属性：宽度 500px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：提示报错页面  　　指导原则：  　　属性中宽度、位置、边距为不可变数据。  　　属性中背景白色为常用色值，对于特殊个性化频道可根据特殊要求变更色彩或者使用背景图。  　　背景色彩遵循原则选择颜色尽量少用饱和度高的颜色， 减少用户视觉疲劳。  　　背景图片遵循原则尽量选择可复用的图片，减少页面文件量。如果遇到页面整体外描边效果参照图例(01)。 页面结构 　　篇二：简述一个大型网站UI设计架构标准及规范 　　? 简述一个大型网站UI设计架构、标准及规范。 - [work]  　　XX-08-31  　　如题，今天写一写标准和规范的东西，这也是这块工作长期以来的经验总结，而且就这个话题本身来说，确信有必要建立一套ui架构的标准规范比这些规范的内容和如何制定标准更加重要。好像这个问题在同行中意见蛮多的（见），我感觉一个是这个问题浮出水面，大家都来讨论了，说明国内UI行业和运营网站公司发展进步了，二个是大部分网站UI部门的运作都不成熟，从demo设计到最终效果评估、从人员素质（包括产品经理和ui人员的专业知识储备）到工作流程都不成熟，所以关于这个问题在那篇文章中有那么多迷惑的声音。 一句话，要不要标准规范？绝对要！站点大了嘛，内容多了嘛，涉及的方面和参与的人员广了嘛，不建立一套标准和规范怎么行？对这个有异议或不肯定的同行们可去读一读阿里、淘宝、雅虎等的ued博客，国内这些大的网站UI部门运作的相对成熟。  　　产品和UI的前期  　　以我所在单位房价网为例，UI框架标准规范的建立并不是一