设计规范介绍  

UI设计标准规范个人总结  

  设计规范是适用于人机交互界面设计师，用户体验设计师，前端技术工程师，发布人，支持人员以及运维编辑人员参考，贯穿以用户为中心的设计指导方向，根据界面的特点统一的规范，以达到提升用户体验，控制产品设计质量，提高效率的目的。  

  制定标准的意义  

  统一设计风格；色彩；布局。  

  舒适的色彩搭配；结构布局；操作流程。  

  整体效果的美观。  

  便捷：能点选就不输入；能少层级就不多；界面元素一目了然。  

  web设计的标准  

  宽度：如果是1280的分辨率，网页设置成1258的会安全一些，正文宽度调整为980px，涉及到有背景图案的专题页时，宽度可设置成1440px，正文宽度调整为980px。  

  颜色：设计时请使用256web安全色，在photoshop新建文件中最好选择RGB/8位，因为其他模式的色域很宽，颜色范围很广，在不同显示屏失色现象较为严重些。活动专题可根据需求进行调整。  

  字体：网页正文一律采用宋体12号（12px）字体，标题采用黑体，建议使用12号+14号的混合搭配，英文字体从9px开始就能清晰显示，选择空间很大，10px/11px/12px/13px都是常见的字体大小，字体请使用系统自带字体。例：Tahoma\Aruak\Verdaba(注：建议使用)  

  布局：版块排版在视觉上尽量符合纵向分割，横向模块间距统一，纵向可根据页面需求适当区分。  

  栅格：栏目间距8px-10px；产品宽度160px产品间距30px-40px（PS：间距40px应用于二级类目，间距30px应用于三级类目）  

  iPhone界面尺寸  

  推荐尺寸：手机端750*1334px（注：如是iPhoneX高度增加40px）  

  PAD端1024*768px、2048*1536px  

  PC端一般网站为996px  

  在PS设计时一般参考iPhone的尺寸进行设计，其他系统的手机尺寸也遵循了iPhone的设计原则，技术只需要在原效果对其进行同比例缩放即可。  

  手机/PAD字体标准  

  标题大小：28像素；字体：微软雅黑  

  内容大小：22像素；字体：微软雅黑  

  时间大小：16像素;字体：微软雅黑  

  菜单大小：36像素;字体：宋体  

  字体色号：尽量使用同样数字色值来区分深浅如（#000，#333，#999等）  

  线条色号：尽量使用同样英文字母如（#aaa，#ccc，#ddd等）  

  图标  

  在设计图标时公共重复使有频率比较高的icon尽量使用PS中形状制作  

  软件UI设计标准（pc端）  

  字体：【中文字体】同级菜单，字体大小格式统一，正文一般采用12px，图形字体与标题字体一般采用14px。推荐使用“微软雅黑”和”华文细黑“字体。不宜使用艺术字体，如华文彩云、隶书。【英文字体】默认字体使用“Tahoma”，大小12px。标题字体使用“TrebuchetMS"  

  文字对齐：表单字段名左对齐，或者中线对齐。  

  界面配色：  

  配色要求：主色调+次主色调+辅色；  

  要统一色调，颜色的使用要正确：如安全软件用黄色，高科技软件使用蓝色，环保软件宜用绿色  

  界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字；  

  同一页面，不宜采用3种以上颜色。  

  链接应该有3种颜色：未点击，点击中，点击后。  

  按钮设计：  

  宜使用圆色图标、渐变效果；  

  图标大小通常为8的倍数，最小图标12px，16px，顶部24px或32px；  

  图标树的大小是16px，材的大小适合宽度为210px  

  保持与系统整体特点以及风格一致；  

  使用让用户容易联想到的事物，按钮能清晰表达意思；  

  内页中按钮使用平面效果，不使用三维效果图；  

  按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。功能差异大的按钮应该有所区别；  

  按钮应该至少有4种状态效果：点击前鼠标未放在上面时的状态；鼠标放在上面但未点击的状态；点击时状态；不能点击状态；  

  按钮上若没有文字，必须提供鼠标悬停提示信息；按钮上有文字但是不足以准确传达按钮的功能时，也应该提供鼠标悬停提示信息；  

  操作功能按钮向左对齐，按照使用频度（重要程度）从左到右排列；设置功能按据和帮助按钮向右对齐；  

  折叠菜单的标题栏应该做成”展开/折叠“的响应区域，方便鼠标点击；  

  有图标和功能说明文字的，实点击和说明文字，都可以达到预期的页面；  

  相同功能按钮的描述一致性。  

  文字校验：  

  必填项给出必填标识，使用校验机制确保不为空（包括仅有空格的情况）。若必输项未填写结或者填写不符合规则就提交，应给出说明信息并能自动获得焦点；  

  非必填项字段，Null插入数据库不会出错，读取显示为正常留空（不能显示为Null）  

  焦点从当前输入框移开后，立即对当前输入框进行校验，不合格则给出提示，引导用户更正，身份证号、电子邮箱地址等特定字段的格式须符合需求的规定；  

  所有字段必须有长度限制，并在激活输入框时给出明确提示，直到焦点从当前输入框移开，若用户在输入字符达到最大允许的长度后继续输入，则不再响应超出字符。（粘贴超出给出提示）  

  密码输入框内容显示为”*“或者“.”；  

  用户名输入框应注明是否允许输入汉字等；  

  日期显示格式为：yyyy-mm-dd。尽量使用时间控件，并屏蔽手动输入，如果允许手机输入，则不允许字符串、汉字、特殊字符等。不允许截止日期小于开始日期；  

  没有类型限制的输入区域，应可录入汉字、字母、数字、特殊字符；  

  数值字段只能输入0~9，视情况决定是否可以输入”*“以及”."  

Powered by Froala Editor