网站ui设计规范.doc

《网站ui设计规范.doc》由会员分享，可在线阅读，更多相关《网站ui设计规范.doc（11页珍藏版）》请在金锄头文库上搜索。

1、网站ui设计规范篇一：新浪网UI设计规范新浪网产品设计指南（含UI规范）摘要: 以下分各模块介绍。设计规范介绍 什么是设计规范？产品设计部人机交互界面设计规范 适用用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设.以下分各模块介绍。设计规范介绍什么是设计规范？产品设计部人机交互界面设计规范 适用用于WEB产品线的人机交互界面设计方面的指导手册。贯穿以用户为中心的设计指导方向，根据新浪产品自身的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。谁去读设计规范？设计

2、规范手册适合界面设计师，用户体验设计师，前台技术工程师，发布支持人员，运营xx人员的参照。设计理念精于心 简于形通过精心简约的设计,传达先进的技术给用户提供便捷简单的使用体验设计指导原则A 设计规范 逻辑性设计为内容服务，根据逻辑关系通过视觉表现引导用户使用例如：google yahoo搜索结果页通过字体的颜色大小突出重要度扩展性采取模块化设计的可扩展性，减少修改和再开发的成本。例如：奥运项目左右模块尺寸的统一可以方便xx随时调用修改内容的位置统一性用统一的视觉规范，变化不能超越统一的尺度，个性化内容要有统一风格的继承例如：无论每个频道如何追求个性不能脱离新浪整体风格，要有继承和延续保持从属关

3、系 个案除外，个案量应有百分比， 本地化考虑用户的文化背景及习惯，做到设计上本地化。体现人文关怀 例如：google，被搜索文字连接采用红色，及中国传统节日的logo体现。设计上不照搬英文站应根据中文特色，体现中文之美遵循视觉设计原理页面外观页面类型： 普通页面 宽带页面 自适应页面 其他页面类型说明： 普通页面基本属性：宽度 750px 背景 白色#FFFFFF 位置 居中 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：新浪首页 频道首页 频道二级 频道各级 正文页面等及其他非宽带产品线 宽带页面基本属性：宽度 900px 背景 白色#FFFFFF 位置 居中 边距

4、上 5px；下 20px；左 0 px；右 0 px 适用范围：宽带频道首页和各级页面 不包括正文页，及其他宽带产品线 自适应基本属性：宽度 100 % 背景 白色#FFFFFF 位置 居中 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：论坛 聊天 直播 等页面 其他页面基本属性：宽度 500px 背景 白色#FFFFFF 位置 居中 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：提示报错页面指导原则：属性中宽度、位置、边距为不可变数据。属性中背景白色为常用色值，对于特殊个性化频道可根据特殊要求变更色彩或者使用背景图。背景色彩遵循原则选择颜色尽量

5、少用饱和度高的颜色， 减少用户视觉疲劳。背景图片遵循原则尽量选择可复用的图片，减少页面文件量。如果遇到页面整体外描边效果参照图例。 页面结构篇二：简述一个大型网站UI设计架构标准及规范简述一个大型网站UI设计架构、标准及规范。 - work20XX-08-31如题，今天写一写标准和规范的东西，这也是这块工作长期以来的经验总结，而且就这个话题本身来说，确信有必要建立一套ui架构的标准规范比这些规范的内容和如何制定标准更加重要。好像这个问题在同行中意见蛮多的（见），我感觉一个是这个问题浮出水面，大家都来讨论了，说明国内UI行业和运营网站公司发展进步了，二个是大部分网站UI部门的运作都不成熟，从de

6、mo设计到最终效果评估、从人员素质（包括产品经理和ui人员的专业知识储备）到工作流程都不成熟，所以关于这个问题在那篇文章中有那么多迷惑的声音。 一句话，要不要标准规范？绝对要！站点大了嘛，内容多了嘛，涉及的方面和参与的人员广了嘛，不建立一套标准和规范怎么行？对这个有异议或不肯定的同行们可去读一读阿里、淘宝、雅虎等的ued博客，国内这些大的网站UI部门运作的相对成熟。产品和UI的前期以我所在单位房价网为例，UI框架标准规范的建立并不是一开始就花时间做这个东西，而是网站发展过程中逐步制定和完善起来的，早期，在产品策划上可能是个模糊未很成型的东西，这时候ui是与产品及公司高层的详尽沟通下，尽可能的了

7、解他们的愿望及暂时可用的质料对产品进行定位，比如是做行业门户、新闻资讯、企业形象、社区、电子商务、功能服务等等，各种类型的网站在UI设计的思想上都不同，进而在后面细节上都有非常大的区别和取向。这个定位是个大方向上的，这点最好公司上下不要含糊。然后分析网站的受众和服务群体，美工在脑中初步对设计风格、色彩有个把握。有了这些酝酿和准备，再根据提供的产品原型设计出平面稿，待产品和高层审稿修改确认后制作demo，如果有UE人员，将对demo进行评审，确认后交由功能开发上线。 制定标准规范的时机这个阶段是网站最初版本上线，设计开发告一段落，那这个时候是做标准规范的时机，因为早点时候所有东西都是新的未经受用

8、户客户的考验，许多东西没法做成定标准和规范，而再往后就会进入东西多头绪乱甚至回头修改设计和代码以符合标准的状态。所以这个时候制定UI框架的标准和规范比较合适，可能这个标准的制定会耗很长的时间和资源，甚至某些组件没法制定标准，这都是值得并且有必要去做的，这是个最初UI的构想和规范，是要后面不断去完善的。磨刀不误砍柴功!标准规范的内容有了最初版本的上线，这时候就要花些时间好好把规范标准整理出来文档化了。内容包括UI视觉设计和前端代码相关，制定标准规范的准则是整站UI统一性、可用及易用性、可扩展性、兼容性、重用性。UI视觉设计具体有：logo、标准色、主色调及配色、排版布局、导航、按钮、表单、ico

9、n、布局模块、tab、列表前端代码相关包括 css样式规范和html代码结构规范，具体有：1文字样式（链接、字符串、文本段落）2框架样式3模块样式（包括各类边距等细节、 写一个规范代码）4链接样式5图片样式6标签样式7表单样式html代码结构规范的原则是：尽量少的代码量规范且规律的写法实现设计效果，标签使用上尽量保持页面元素其原本涵义（如该用h、p、table、hr等标签的地方用相应标签，不能用div用上瘾了），及照顾到seo的写法。想想看有了这些标准规范，ui人员还时常痛苦吗？产品人员还迷惑吗？大家还要为些小细节争吵不休吗？简要列一些房价网的标准规范内容：布局logo 色彩 及文字等模块样式

10、模块Tab模块内容按钮 列表篇三：开发部web界面设计规范开发部Web界面设计规范版本修订历史1. 目录结构规范1) 2) 3) 4) 5) 6)目录建立原则：以最少的层次提供最清晰的访问结构。 目录的命名以小写英文字母、下划线组成。根目录一般只放已经其他必须的系统文件。 根目录下的images用于存放各页面都要使用的公用图片。 所有JS等脚本存放在根目录下的scripts或js目录。 所有CSS文件存放在根目录下的style或css目录。2. 设计命名规范页面基本框架结构navbarcontainer就是将页面中的所有元素包在一起的部分header是页面的头部区域，一般来讲，它包含网站的lo

11、go和其他一些元素 navbar等同于横向的导航栏，是最典型的页面元素，也可以命名为nav menu此区域包含一般的链接和菜单，也可以命名为subNav,links main是网站的主要区域，也可以命名为contentsidebar此区域包含网站的次要内容，例如最近更新内容列表等。 footer包含一些附加信息，也可以命名为copyright命名规则注意点1) 尽量考虑为元素命名其本身的作用或用意，达到语义化不要使用表面形式命名，如：red/left/big等2) 组合命名规则：元素类型-元素作用/内容。如搜索按钮btn-search、登录表单form-login。 3) 凡涉及交互行为的元素

12、通常会有正常、悬停、点击和已经浏览等不同样式。参考：搜索按钮btn-search、btn-search-hover、btn-search-visited图片命名规则1) 图片名称分为头尾两部分，用下划线隔开。禁止用中文名。 2) 头部分表示此图片的大类性质。例如：放置在顶部的长方形图片可以取名banner；标志图片取名logo；位置不固定并且带有链接的小图片取名button；做栏目链接的图片取名menu；不带链接表示标题的取名title；装饰的照片取名pic；等。3) 尾部分用来表示图片的具体含义，用英文字母表示，如banner_ logo_button_4) 有onmouse效果的图片，两张

13、分别在原有文件名后加”_on”和”_off”命名。3. 布局规范推荐使用CSS+DIV来布局页面，少用table，table只用于数据处理。优势如下：1. 表现和内容相分离，将布局放在一个独立的样式文件中，html文件只存放文本信息。2. 提高页面浏览速度，采用CSS+DIV结构的页面容量比table的页面容量小得多，且标签要等下载完后才可以显示，而使用CSS+DIV标签不用等待下载好就可以显示，所有速度快。3. 易于维护和改版，只要简单的修改几个CSS文件就可以重新设计整个网站的页面。例如4. 边距规范页、表格都应该有边距，避免紧贴边沿的情况发生，最小边距值为“3px”，默认边距值应在CSS

14、中设定。5. 字体规范1) 字体尺寸使用pt为单位，对象和线条使用px为单位。基准字体为9pt；2) 字体尽量采用Verdana, Arial, Helvetica, sans-serif, 宋体。一个页面最多包含两种字体； 3) 所有字体设定应该在CSS中完成。6. 颜色规范1) 尽可能通过选择合适的主题颜色或系统颜色来选择颜色；2) 不要混用颜色类型。也就是说，不要同时运用多个主题颜色。使用主题颜色外的颜色时最好从主题颜色派生，而不是硬编码颜色值； 3) 尽量限制色彩的数目。4) 应当根据对象的重要性来选择颜色，重要对象用醒目的颜色表示；5) 使用颜色的时候应当保持一致性，如错误提示用红色表示就要在其他时候保持一致；7. 输入框规范1) 当打开一个页面时光标默认停留在第一个输入的文本框。2) 当选择下拉框存在默认值时要默认选中。不存在默认值时，则默认为“请选择”，不要空着。3) 必填项必须以红色*号标识。4) 当必填项没有填写时，可在光标移走时在文本框后以红色文字提示。