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 （注：如是iPhone X高度增加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。标题字体使用“Trebuchet MS"

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

界面配色：

1. 配色要求：主色调+次主色调+辅色；
2. 要统一色调，颜色的使用要正确：如安全软件用黄色，高科技软件使用蓝色，环保软件宜用绿色
3. 界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字；
4. 同一页面，不宜采用3种以上颜色。
5. 链接应该有3种颜色：未点击，点击中，点击后。

按钮设计：

1. 宜使用圆色图标、渐变效果；
2. 图标大小通常为8的倍数，最小图标12px，16px，顶部24px或32px图片；
3. 图标树的大小是16px，材的大小适合宽度为210px
4. 保持与系统整体特点以及风格一致；
5. 使用让用户容易联想到的事物，按钮能清晰表达意思；
6. 内页中按钮使用平面效果，不使用三维效果图；
7. 按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。功能差异大的按钮应该有所区别；
8. 按钮应该至少有4种状态效果：点击前鼠标未放在上面时的状态；鼠标放在上面但未点击的状态；点击时状态；不能点击状态；
9. 按钮上若没有文字，必须提供鼠标悬停提示信息；按钮上有文字但是不足以准确传达按钮的功能时，也应该提供鼠标悬停提示信息；
10. 操作功能按钮向左对齐，按照使用频度（重要程度）从左到右排列；设置功能按据和帮助按钮向右对齐；
11. 折叠菜单的标题栏应该做成”展开/折叠“的响应区域，方便鼠标点击；
12. 有图标和功能说明文字的，实点击图片和说明文字，都可以达到预期的页面；
13. 相同功能按钮的描述一致性。

文字校验：

1. 必填项给出必填标识，使用校验机制确保不为空（包括仅有空格的情况）。若必输项未填写结或者填写不符合规则就提交，应给出说明信息并能自动获得焦点；
2. 非必填项字段，Null插入数据库不会出错，读取显示为正常留空（不能显示为Null）
3. 焦点从当前输入框移开后，立即对当前输入框进行校验，不合格则给出提示，引导用户更正，身份证号、电子邮箱地址等特定字段的格式须符合需求的规定；
4. 所有字段必须有长度限制，并在激活输入框时给出明确提示，直到焦点从当前输入框移开，若用户在输入字符达到最大允许的长度后继续输入，则不再响应超出字符。（粘贴超出给出提示）
5. 密码输入框内容显示为”*“或者“.”；
   
6. 用户名输入框应注明是否允许输入汉字等；
7. 日期显示格式为：yyyy-mm-dd。尽量使用时间控件，并屏蔽手动输入，如果允许手机输入，则不允许字符串、汉字、特殊字符等。不允许截止日期小于开始日期；
8. 没有类型限制的输入区域，应可录入汉字、字母、数字、特殊字符；
9. 数值字段只能输入0~9，视情况决定是否可以输入”*“以及”."

 协作平台

前端团队协作平台统一使用“蓝湖”