WEB设计规范(2016.10.31)

1、WEB设计规范版本V 1.02016.10.31版本说明文档名称技术中心UI设计-（网页UI设计规范）.doc文档编号文档类型技术文档密级非保密文档版本文档作者完成日期版本说明审核人V1.0卢偲2016-10-31初始版本目录1.简介51.1目的51.2整理视觉规范的几个原则51.3参考资料62.界面尺寸72.1关于画布尺寸72.2关于布局72.3关于导航73.文档规范整理保存83.1文档命名83.2文件命名84.文字使用规范104.1字体104.2字号（这里举例大多数情况，特殊情况可以特殊处理）105.图标设计规范115.1图标绘制115.2小图标类型136.按钮设计规范（WEB手机通用）1

2、56.1按钮的状态156.2按钮的形状166.3按钮的大小167.LOGO178.检查产品设计以及页面需要遵循的交互原则（WEB手机通用）188.1尼尔森十大可用性原则189.单独项目的网页设计整理规范229.1单一网页端项目UI规范需要的规范文档2210.结语251.简介本文定义了关于公司设计工作方面的诸多规范，以及基本设计思考原则。用于提高今后的工作效率，和工作质量。1.1目的（1）解决多人协作时控件混乱问题（2）解决开发效率、代码冗余问题（3）解决产品迭代中品牌形象会走样问题1.2整理视觉规范的几个原则（1）需要掌握好创建的时机每一个独立的项目都需要单独创建规范文档，规范建立的时机很重要

3、，太早或者太晚都会给后续迭代带来很多麻烦。最佳时机是在完成风格定位后做规范，可以承上启下高效完成工作。（2）只对非重要界面进行规范设定整理规范时，应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。不是所有的页面和元素都需要严格按照规范设计制作。（3）规则需要弹性采用28原则，只针对产品80%的界面进行规范。这里讲的80%和20%是一个相对的概念，80%代表色彩、按钮、字体、间距等重要内容，这些内容需要进行详细的规范说明。另外的20%是指某些控件是不可复用并且不重要的，这种20%的内容不需要花费精力做进规范里。这个28原则需要设计师根据具体情况具体分析，作出更适合当下的设计。（4）

4、规范要有迭代如果设计师没有跟着产品改版的节奏去迭代视觉规范，一般会出现两种情况：一是被原规范的旧样式束缚，死板的遵循最初的规范，长久下去会出现视觉样式过时的问题。二是改版中用了新的视觉风格，没有及时总结归纳成规范，这样一来又会出现品牌形象走样的问题。（5）规范要有执行力有两种规范是缺乏执行力的：第一、规范内容不具体，缺少对核心模块的细节说明。各个模块缺少必需的说明，比如色彩模块中有主色却缺少辅助色的说明，按钮模块中缺少滑过、点击、不可点状态的说明，字体模块缺少字体磅数的分布设定。这种没有核心内容的规范，没有参考价值，规范的作用几乎等于零，其他参与项目的设计师还得找制作规范的设计师要相关的规范才

5、能进行下去，所以这种类型的规范是没有执行力的。第二、规范太全面死板太臃肿，无从看起，对后续设计有束缚。对所有界面的所有元素进行规范，连不重要的元素也强行归纳进来，多达几十页的规范文档。造成三方面的影响，一是会增加大量没必要的工作时间来制作规范，二是设计师和程序员需要花很多时间精力去看无关紧要的内容，增加了很多负担。三是设计本来就不是一件绝对的事，需要20%的灵活空间，不然后面遇到新的页面，死板的把规范用在新的页面上，出来的效果可能并不好。1.3参考资料用合适字号提升用户体验：http:/helloweb.wang/yonghutiyan/505.html尼尔森十大可用性原则： 网易设计规范透视

6、详解： 2.界面尺寸2.1关于画布尺寸页面设计尽量采用栅格系统，主流阅览器的宽度在1024px-1336px，其中滚轮大约有20几个像素的宽度。（21px IE阅览器滚轮宽度）所以，保险一些，实际内容区域为1170px像素，窄版为1000px像素。2.2关于布局目前很多网站因为想要做成自适应宽度的效果，会采用栅格系统设计页面，比较出名的如960px网格系统（http:/960.gs/）等，前两年这是非常流行的设计方法，但这两年，貌似网页设计又从新回归了比较随意的排版方式，可能是因为近两年手机UI的崛起，大部分网站会针对手机制作专门的网页，不会像前几年那样一稿适配，所以，个人观点，如果一稿适配手

7、机和web端，那就用栅格系统设计设计稿，如果手机端单独设计，那就随意。2.3关于导航不同于移动端，网页端的设计因为栏目的众多，导航的样式就尤为重要。我这里说一些可以注意的地方。首页内容较多，以及滚屏的网站，可以固定导航栏在窗口，或者在网页右边添加回到顶部的跳转按钮，方便用户跳转栏目。二级菜单较多的网站，需要注意菜单展开的方式。3.文档规范整理保存3.1文档命名文档的建立和命名规范这里以我自己的方式写，如果有更科学合理的规范，可以进行修改。每个项目开始的时候，需要建立一个以项目名称命名的文档。每个项目文档里面加分文件夹（1），资料文件夹放项目原形文档，资料图片，等等准备工作文件，有时我也喜欢把图

8、标设计源文件放在这里。设计稿文件夹则放页面设计稿。设计稿文件夹内可以直接放设计文件，也可以像我一样分PSD源文件和JPG格式两个不同的文件夹，方便管理。（1）（2）3.2文件命名如图，每个页面为了方便后期按照顺序查看，我都会在前面加上编号，登录页是0，后面依次按照导航菜单来分，一级菜单为整数1 2 3（如果一级菜单数量多过10，为了防止1和11这样的排序干扰，则写成01 02 - 03）等等往后排列，二级菜单为小数0.1 - 0.2 - 0.3等等依次排列，二级菜单内的页面按照先后顺序我会再加上0.01 - 0.02 0.03 这样的排序，这样，在后期查看页面顺序的时候，就不会出现顺序错位的麻

9、烦了。除了编号，中文命名就直接用菜单栏和每一页的功能名称就好。注意：PSD源文件请设计师在设计的时候，就注意分组命名，这是一个良好的设计习惯，也方便其他同事查看修改。4.文字使用规范4.1字体网页中因为电脑自带字体的限制，所以凡是文字部分都需要使用电脑自带字体。如：微软雅黑，黑体，宋体。特殊字体只能切成图片。注意：因为设计版权等原因，特殊字体也请避开方正等版权字体，防止字体侵权。4.2字号（这里举例大多数情况，特殊情况可以特殊处理）（1）文字的字号尽量选择12、14、16等偶数字号，文字最小不能小于12号。（很多阅览器甚至为了保证不能因为字号太小影响阅读，小于12号的文字全都强制显示12号大小

10、。）（2）导航文字及头部底部文字的字号：页眉（Header）导航文字12号或14号；菜单（Menu）导航文字1418号；工具条（Sidebar）文字12号或14号，一级菜单使用14号、二级菜单使用12号，或一级菜单使用12号加粗、二级菜单使用12号； 页脚（Footer）文字12号或14号。（3）正文：大标题文字2432号；标题文字16或18号；正文文字12号或14号。可根据实际情况加粗。（4）按钮文字：比如登录、注册页面按钮或其他按钮，文字1416号，可根据实际情况调整大小或加粗。（5）广告语及特别情况则需根据文字的实际情况设计字号。（6）同一层级的字号搭配应该保持一致。比如，同一层级的版块

11、中标题文字和内容文字大小的一致性。5.图标设计规范网页设计内小图标的引用没有移动端设计中应用那么广泛，但是具体色设计规范都是一样的。都需要风格统一，视觉统一。5.1图标绘制图标须遵图标循栅格系统规范图标举例：5.2小图标类型同一产品中，尽量使用同种类型风格的小图标。同一栏目小图标则要求完全统一类型和风格。其中扁平线性正负形图标经常成对出现，表示点击前和点击后两种状态。线性图标举例：小图标绘制方法不限，一般以PS布尔运算和AI描边为主要绘制方法，需要精确控制线条的粗细统一。请注意小图标的图形务必保留矢量图形，不能用位图，不然后期切图适配各种屏幕尺寸图形会变虚。6.按钮设计规范（WEB手机通用）6

12、.1按钮的状态按钮一共有四种状态。normal：正常情况下的状态。Highlighted/Press：突出显示，按压，即用户点击按钮不放时按钮的状态。Selected/Hover：选中状态，鼠标悬停状态。Dissbled/Inactive：不可用，失效状态。很多按钮只需要定义正常和按下两种状态就够了，部分按钮需要单独区分选中状态和不可用状态。例子：6.2按钮的形状相同功能的按钮尺寸和圆角度数虚要保持统一。6.3按钮的大小手机端因为需要保证按钮的最佳点击区域，所以一般按钮的点击范围至少都要在高度30px以上。具体大小还会根据实际情况变化。 7.LOGO网站中一般会着重强调品牌形象，这时候需要提前

13、定义Logo在各种场合的排布方式。例子：8.检查产品设计以及页面需要遵循的交互原则（WEB手机通用）8.1尼尔森十大可用性原则（1）状态可见原则用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。 开始时间、执行百分比动态显示（2）环境贴切原则网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。iPhone人机交互指南里提到的隐喻与拟物化是很好的实践。此外，还应该使用易懂和约定俗成的表达。 使用用户熟悉的表述和名词（3）撤销重做原则为了避免用户的误用和误击，网页应提

14、供撤销和重做功能。撤销也要保存用户曾经的信息（4）一致性原则同一用语、功能、操作保持一致。（5）防错原则通过网页的设计、重组或特别安排，防止用户出错。（6）易取原则好记性不如烂笔头。尽可能减少用户回忆负担，把需要记忆的内容摆上台面。动作和选项应该是可见的。 不应该让用户记住操作路径和目标位置（7）灵活高效原则中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。 为大多数用户设计，兼容少部分特殊用户（8）易扫原则互联网用户浏览网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。（9）容错原则帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404。如果用户“反悔”，可以直接在回收站恢复内容。（10）人性化帮助原则帮助性提示最好的方式是：1、无需提示；