HYETEC--UI设计规范

1一.UI设计基本概念1.1目的为使公司开发的软件产品流程规范化，明确UI设计师在进行界面设计时所需要遵循的准则和方法、界面中各个元素的规格及要求，确保页面在风格、结构和功能上的基本统一，提高工作效率，便于团队合作开发，特制定此UI设计规范。1.2应用范围软件界面设计、平面设计及办公辅助文档美化等工作。此文档用于软件开发项目中的程序开发人员、UI设计人员、软件测试人员作为界面调试参考之用途。1.3概述UI设计包括交互设计，界面设计，用户体验三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。设计师应负责以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。21.4基本介绍1.4.1获取需求阶段（UI设计师、需求分析师）软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。1.4.2分析设计阶段（UI设计师）通过不断与需求分析人员沟通得出的需求，UI设计师进入设计阶段。也就是方案形成阶段。设计出几套不同风格的界面用于被选。1.4.3调研验证阶段（UI设计师、需求分析师、项目管理人员）几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。测试阶段开始前设计师应该对测试的具体细节进行清楚的分析描述。调研阶段需要从以下几个问题出发：31)用户对各套方案的第一印象；2)用户对各套方案的综合印象及单独评价；3)选出最喜欢的和其次喜欢的；4)对各方案的色彩，文字，图形等分别打分；5)结论出来以后请用户说出最受欢迎方案的优缺点；1.4.4方案改进阶段（UI设计师）经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么其他不足之处等，这样我们就可以进行下一步修改了。这时设计师可以把精力投入到一个方案上，将方案做到细致精美。1.4.5用户验证阶段（UI设计师、项目管理人员、销售人员）修改以后的方案，设计师可以将方案交给开发人员实施。但是设计并没有结束，待项目上线以后设计师还需要及时获取用户反馈，了解用户实际使用时的感想和意见，为以后的升级版本积累经验资料。二.UI设计岗位职责2.1项目支持1)负责根据产品需求，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。2)负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计。43)负责与开发人员沟通，推进界面及交互设计的最终实现。4)负责软件界面的美术设计、创意工作和制作工作。5)负责对页面进行优化，使用户操作更趋于人性化。6)负责维护现有的应用产品完成界面的升级与更新迭代。2.2办公辅助1)负责UI资料库的建设。●负责提供文档模版（如PPT模版、word模版等）。●负责提供日常工作中使用的图标、图形。●负责普及简单的设计知识与设计方法。2)负责为其他部门工作用文档提供页面美化支持。3)负责公司印刷宣传品的设计支持。4)负责办公室内部美化设计（如墙面、玻璃门美化）等工作。三.UI界面设计规范3.1应该遵循的基本原则无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。这样得到的好处：1)使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解；2)降低培训、支持成本，支持人员不会行费力逐个指导；53)给用户统一感觉，不觉得混乱，心情愉快，支持度增加；3.2颜色使用规范3.2.1使用原则整体色彩不宜超过4种，并遵循对比原则，突出色彩层次感。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。整个界面色彩尽量少的使用类别不同的颜色。当页面需要加边框时，边框的颜色最小值为底色颜色深度的200%，最大为300%，具体如下：3.2.2颜色代码规范在CSS中，所有颜色都以16进制色值来进行书写，如：#a0a0a063.3字体使用规范3.3.1使用原则1)字体以不超过2种字体为准，特殊情况除外。；2)字体大小号的选择以12px、14px、16px等偶数字体大小为准；3)中文采用标准字体：“宋体”、“黑体”，英文采用“Arial”或“verdana”，不能使用特殊字体(如隶书、草书等，特殊情况、广告图片中可以使用图片替代)，保证用户使用中的正常显示；4)另外所有控件尽量使用大小统一的字体属性，除了特殊提示信息，加强显示等列外情况；3.3.2标题文字1)“黑体”为主，“宋体”为辅的使用原则，用加粗的方式表达加强突出效果。2)菜单标题字体大小：最小取14px，最大取16px。3)正文标题字体大小：最小取24px，最大取32px。3.3.3正文字体1)“黑体”为主，“宋体”为辅的使用原则。2)一般情况下，正文字体大小以12px为准，特殊情况下可以加粗或取14px大小的字体。3.3.4按钮字体1)字体大小以14px-16px为准。“宋体”需加粗，“黑体”可视页面具体情况面定。72)为突出，按钮字体可添加1px的阴影以增加立体感。3)链接字体颜色不超过2种，即鼠标移入颜色与正常显示颜色。4)header中的导航文字：12px或14px。Menu中的导航文字：14px或18px，视具体情况选择。侧边栏中的文字：12px或14px，如一级菜单使用14px、二级菜单使用12px，或一级菜单使用12px加粗、二级菜单使用12px。Content中的文字：12px或14px。footer中的文字：12px。3.3.5广告语及特别情况1)尽量使用识别度比较高的字体，异形字体杜绝使用。2)在生成html页面时用图片的方式来展现，以保证不同用户，不同浏览器显示的效果基本一致。3.4字体排版样式3.4.1行距与间距1)标题：取默认行距，正文取：2倍行距，如下：font-size:12。line-height:24px。2)取默认字体间距，特殊情况除外。3.4.2字段框与文字的排列1)4个字以内的文字与字段框平行排列。82)4个字以上的文字与字段框分行排列，原则上文字行宽度不超过字段框宽度，并且统一以左(left)对齐的方式排列。3.4.3文字与表格\边框的边距1)文字在页面中的left、right方向对齐时，与边框或表格的距离最小为10px，最大以不超过20px为准，如果在特殊版面下情况下，可再另行考虑。2)文字在页面中的top、bottom方向对齐时，文字与其top边距最小边距为0.5倍字体大小，或者采取top、bottom方向居中对齐的方式，具体如下：3.5图形图标3.5.1使用原则图形图标包括图片、按钮、图形框等,遵循常用标准，绝对不能出现意义不明、不易理解的图形图标。在很多情况需要系统发送一些必要的提示信息到页面显示给用户，这些信息的分类有：功能信息、警告信息、禁止信息、操作执行成功信息、操作执行失败信息、错误信息。93.5.2图标尺寸1)在制作图标时，尺寸以偶数尺寸为准，如：16px,32px等等。2)为保证图标的显示效果，绝对最小图标尺寸为14px，最小尺寸为16px。3)为保证Web页面的整体效果，图标的最大使用以不超过48px为准。4)特殊情况下可不受此标准限制。3.6图片3.6.1图片格式1)原则上图片都使用png\jpg\gif格式。滚动图片动画则使用多张png\jpg\格式图片，使用程序进行轮换显示。2)图片文件在命名时统一使用如：●“banner_001.png\banner_001.jpg\banner_001.gif”,其中”001”代表此类文件序号。●如需对“banner_001.png”同一图片进行尺寸大小不一的多次使用时，可在文件名后再加序号的方式来加以区分,如：“banner_001_01.png”，“banner_001_02.png”，“banner_001_03.png”......。3)为保证速度，图片大小以保证图片质量的前题下越小越好。4)图片大小上限以100kb为准，超出100kb的，可考虑分成多张图片显示。5)以不超过最大屏幕显示为准，如在Web页面设计中考虑会最大显示为1920×1080，则图片的最大宽度不要超过1920px。在制作图片时，图片尺寸单位统一以像素(px)为单位，图片分辨率统一为72像素/英寸。103.6.2图片大小、尺寸、分辨率1)在制作图标时，尺寸以偶数尺寸为准，如：16px,32px等等。2)为保证图标的显示效果，绝对最小图标尺寸为14px，最小尺寸为16px。3)为保证Web页面的整体效果，图标的最大使用以不超过48px为准。4)特殊情况下可不受此标准限制。3.7页面布局3.7.1主要分辨率目前显示器分辨率主要有16:9：1920×1080、1600×900、1366×76816:10：1920×1200、1680×1050、1440×9004:3：1024×768IOS：640x1136、1334×750、1242x2208安卓：1280×768、1920×10801)为了更好的适应不同的宽度，在布局时以自适应宽度为主。2)最小显示宽度统一为980px3)一个完整的web页面必须由以下三部分构成：头部区域header、主体区域main、底部区域footer，有时出于布局需要，在“Header”下面还会加上用于页面功能导航的“Menu”。113.7.2页面布局方式在页面的布局中，各个区域大小的定义方式如下图：3.7.2.1头部区域1)header区域在布局时，宽度按照100%设置，高度采用固定像素值来确定。2)header区域无menu区时，高度一般设置到50px-60px3)header区域有menu区时，高度设置到70px-80px，特殊情况，可再不影响整体美观及操作的前提下作特殊处理。4)header内的Menu区与header的配置要求基本一样，宽度按照%比来设置，高12度结合header的高度设置来确定，当Menu区为图标形式按钮时，header区域高度相应增加。3.7.2.2主体区域1)sidenav区域宽度结合“content”之间的黄金切分比例，按照固定像素的方式确定，高度按照比例方式来设置。2)content区域高度和宽度方向布局都是按照比例方式来设置。3.7.2.3底部区域1)底部区域内容包含”友情链接”、“版权信息”等，宽度按照100%设置2)度采用所占的固定像素值来确定，具体调度视内容而定。3.7.2.4菜单布局1)主菜单数目不应太多，以单行布置为准。2)菜单结构以：单行式、下拉式、树形目录式为主，菜单前的图标以24px为基准，可进行大小调节。3)主菜单的宽度要做到基本接近，字数最好不应多于4个，不少于2个。4)菜单深度层级要求控制在三层以内。5)下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列3.7.3边距为避免页面元素紧贴边沿的情况发生，WEB页面和其中的表格都应该设定边距，最小边距值为“3px”。133.7.4对齐方式3.7.4.1表格1)表格内部文字及数据，都以左对齐为准。2)表格内内容在左对齐时应当与左边表格边距保持至少10px的位置。3)表格各个单元格宽度的设置应采用百分比方式来进行，特殊情况按固定值处理。3.7.4.2图片以居中或居左对齐为准，同一内容区域内的图片要做到大小统一，对齐方式