WEB设计规范(2016.10.31).docx

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手机通用）156.1按钮的状态156.2按钮的形状166.3按钮的大小167.LOGO178.检查产品设计以及页面需要遵循的交互原则（WEB手机通用）188.1尼尔森十大可用性原则189.单独项目的网页设计整理规范229.1单一网页端项目UI规范需要的规范文档2210.结语251.简介本文定义了关于公司设计工作方面的诸多规范，以及基本设计思考原则。用于提高今后的工作效率，和工作质量。1.1目的（1）解决多人协作时控件混乱问题（2）解决开发效率、代码冗余问题（3）解决产品迭代中品牌形象会走样问题1.2整理视觉规范的几个原则（1）需要掌握好创建的时机每一个独立的项目都需要单独创建规范文档，规范建立的时机很重要，太早或者太晚都会给后续迭代带来很多麻烦。最佳时机是在完成风格定位后做规范，可以承上启下高效完成工作。（2）只对非重要界面进行规范设定整理规范时，应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。不是所有的页面和元素都需要严格按照规范设计制作。（3）规则需要弹性采用28原则，只针对产品80%的界面进行规范。这里讲的80%和20%是一个相对的概念，80%代表色彩、按钮、字体、间距等重要内容，这些内容需要进行详细的规范说明。另外的20%是指某些控件是不可复用并且不重要的，这种20%的内容不需要花费精力做进规范里。这个28原则需要设计师根据具体情况具体分析，作出更适合当下的设计。（4）规范要有迭代如果设计师没有跟着产品改版的节奏去迭代视觉规范，一般会出现两种情况：一是被原规范的旧样式束缚，死板的遵循最初的规范，长久下去会出现视觉样式过时的问题。二是改版中用了新的视觉风格，没有及时总结归纳成规范，这样一来又会出现品牌形象走样的问题。（5）规范要有执行力有两种规范是缺乏执行力的：第一、规范内容不具体，缺少对核心模块的细节说明。各个模块缺少必需的说明，比如色彩模块中有主色却缺少辅助色的说明，按钮模块中缺少滑过、点击、不可点状态的说明，字体模块缺少字体磅数的分布设定。这种没有核心内容的规范，没有参考价值，规范的作用几乎等于零，其他参与项目的设计师还得找制作规范的设计师要相关的规范才能进行下去，所以这种类型的规范是没有执行力的。第二、规范太全面死板太臃肿，无从看起，对后续设计有束缚。对所有界面的所有元素进行规范，连不重要的元素也强行归纳进来，多达几十页的规范文档。造成三方面的影响，一是会增加大量没必要的工作时间来制作规范，二是设计师和程序员需要花很多时间精力去看无关紧要的内容，增加了很多负担。三是设计本来就不是一件绝对的事，需要20%的灵活空间，不然后面遇到新的页面，死板的把规范用在新的页面上，出来的效果可能并不好。1.3参考资料http://helloweb.wang/yonghutiyan/505.html用合适字号提升用户体验：http://helloweb.wang/yonghutiyan/505.htmlhttp://helloweb.wang/yonghutiyan/505.html尼尔森十大可用性原则：/nelson-usability-design-principles/nelson-usability-design-principles 网易设计规范透视详解：/163-design-principle-and-guideline/163-design-principle-and-guideline 2.界面尺寸2.1关于画布尺寸页面设计尽量采用栅格系统，主流阅览器的宽度在1024px-1336px，其中滚轮大约有20几个像素的宽度。（21px IE阅览器滚轮宽度）所以，保险一些，实际内容区域为1170px像素，窄版为1000px像素。2.2关于布局目前很多网站因为想要做成自适应宽度的效果，会采用栅格系统设计页面，比较出名的如http://960.gs/960px网格系统（http://960.gs/）等，前两年这是非常流行的设计方法，但这两年，貌似网页设计又从新回归了比较随意的排版方式，可能是因为近两年手机UI的崛起，大部分网站会针对