软件UI设计标准规范

软件UI设计规范

目录UI规范 11 用户界面设计理念 51.1 美观 51.2 易理解 71.3 鼓励 71.4 一致 71.5 交互 101.6 效率 131.7 熟悉 141.8 灵活 151.9 容错 161.10 可预测 171.11 简洁 171.12 透明 171.13 权衡 172 通用设计原则 182.1 字体使用原则 182.1.1 中文字体 182.1.2 英文字体 182.2 文字对齐原则 182.3 界面配色原则 202.4 按钮设计原则 212.5 文本校验原则 232.6 兼容性和个性化原则 262.7 键盘响应 272.7.1 TAB键 272.7.2 Enter键 282.7.3 导航键（上下左右） 282.7.4 DEL键 282.8 鼠标 283 各模块设计原则 293.1 启动/登录界面 293.2 主界面 303.3 导航 303.4 窗体布局 323.5 提示信息 333.6 文本框 353.7 弹出框/弹出窗口 373.8 下拉框/单选框/复选框 383.9 列表页面 393.10 报表规范 423.11 附件 423.12 各类控件的标准大小 43建立UI规范目标将阳春白雪式用户体验细化到具体可实施要求，建立各行业线相关界面元素设计及界面布局通用规则及要求，提升公用组件复用度及用户体验，从而增加浪潮软件产品竞争力。用户界面设计理念美观使用可视元素图1.1.1对元素进行分组图1.1.2

对齐图1.1.3图1.1.4（反例）易了解一个系统应该很轻易被用户学会和了解，用户应该知道：1、看什么2、做什么3、何时做4、在哪做5、为何做6、怎样做信息放置次序应该经过深思熟虑，最小化用户记忆和寻求成本必需时候，一步步引导用户进行操作图1.2.1激励一旦用户完成了某个关键操作，要立即通知用户，提升用户信心图1.3.1一致一个系统从头到尾外观，行为，操作应该是一致图1.4.1（反例）图1.4.2（反例）一样行为，应该总是产生一样结果图1.4.3（反例）图1.4.4（反例）相同功效按钮视觉上保持一致，不一样功效按钮视觉上有所区分图1.4.5（反例）交互用户在交互过程中占有绝对主动权1、动作必需是用户请求结果2、耗时较长动作必需能够被打断图1.5.1

从用户需求出发展现上下文图1.5.2图1.5.3（反例）系统能够对用户请求快速地作出响应对用户全部动作提供可视化反馈信息达成目标方法应该是灵活，并和用户技能，习惯，经验，偏好相适应图1.5.4图1.5.5提供反悔或取消机会（undocancel）图1.5.6效率最小化用户眼和手移动幅度图1.6.1

简化用户操作步骤图1.6.2（反例）图1.6.3尽可能预料用户想法和需求图1.6.4熟悉尽可能使用用户熟悉概念和语言尽可能使界面自然，模拟用户行为模式完美地兼容老产品灵活系统必需对不一样用户需求很敏锐，而且提供不一样层次类型功效，基于：1、用户知识和技能2、用户经验3、用户个人偏好4、用户习惯5、当初条件图1.8.1容错对于常见人为失误有妥善应对方法图1.9.1当错误发生时，提供建设性提醒图1.9.2不管发生什么错误，尽最大努力确保用户不丢失工作结果图1.9.3可估计用户能够估计到每个任务正常进度图1.10.1全部用户期望达成目标全部应该完成简练尽可能简练用户界面：突出关键功效，隐藏复杂，不常见功效图1.11.1透明让用户关注她任务而不是实现机制计算机内部工作内容应该是不可见权衡最终设计应该是基于一系列设计标准相互权衡结果大家需求总是凌驾于技术之上通用设计标准字体使用标准汉字字体同级菜单，字体大小格式统一。图2.1.1.1使用字体大小要规范：正文通常采取12px。图形字体和标题字体通常采取14px。图2.1.1.2推荐使用“微软雅黑”和“华文细黑”字体。不宜使用艺术字体，如华文彩云、隶书。图2.1.1.3英文字体默认字体使用“Tahoma”，大小12px。标题字体使用“TrebuchetMS。”图2.1.2.1文字对齐标准表单字段名左对齐，或中线对齐。图2.2.1图2.2.2界面配色标准产品背景色表现浪潮品牌蓝色；项目产品背景色表现用户行业品牌色，如深圳药监天蓝色。图2.3.1图2.3.2要统一色调，颜色使用要正确：如安全软件用黄色；高科技软件使用蓝色；环境保护软件易用用绿色。界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字同一页面，不宜采取3种以上颜色。图2.3.3链接应该有3种颜色：未点击，点击中，点击后。图2.3.4按钮设计标准宜使用圆角图标、渐变效果。图标大小通常为8倍数，最小图标12px、16px，顶部24px或32px图片。图2.4.1图标树大小是16px，树大小适合宽度为210px。保持和系统整体特点和风格一致。使用让用户轻易联想到事物，按钮能清楚表示意思。图2.4.2内页中按钮使用平面效果、不使用三维效果图。按钮应含有简练图示效果，应能够让使用者产生功效关联反应，群组内按钮应该风格统一，大小相同，标题字体保持一致，在整个系统中显示位置要统一。功效差异大按钮应该有所区分。图2.4.3按钮应该最少有4种状态效果：点击前鼠标未放在上面时状态；鼠标放在上面但未点击状态；点击时状态；不能点击时状态。图2.4.4按钮上若没有文字，必需提供鼠标悬停提醒信息；按钮上有文字不过不足以正确传达按钮功效时，也应该提供鼠标悬停提醒信息。图2.4.5操作功效按钮向左对齐，根据使用频度（关键程度）从左到右排列；设置功效按钮和帮助按钮向右对齐。图2.4.6折叠菜单标题栏应该做成”展开/折叠”响应区域，方便鼠标点击。图2.4.7有图标和功效说明文字，实现点击图片和说明文字，全部能够达成预期页面图2.4.8相同功效按钮描述一致性表2.4.1统一名称操作描述增加对“新增”“添加”统一描述修改对“修改”、“管理”、“维护”统一描述文本校验标准必填项给出必填标识，使用校验机制确保不为空（包含仅有空格情况）。若必输项未填写完成或填写不符合规则就提交，应给出说明信息并能自动取得焦点。图2.5.1非必填项字段，Null插入数据库不会犯错，读取显示为正常留空（不能显示为Null）。焦点从目前输入框移开后，立即对目前输入框进行校验，不合格则给出提醒，引导用户更正。身份证号、电子邮箱地址等特定字段格式须符合需求要求。图2.5.2全部字段必需有长度限制，并在激活输入框时给出明确提醒，直到焦点从目前输入框移开。若用户在输入字符达成最大许可长度后继续输入，则不再响应超出字符。（粘贴超出给出提醒）密码输入框内容显示为”*”或”•”。图2.5.3用户名输入框应注明是否许可输入汉字等。图2.5.4日期显示格式为：yyyy-mm-dd。尽可能使用时间控件，并屏蔽手动输入。假如许可手动输入，则不许可字符串、汉字、特殊字符等。不许可截止日期小于开始日期。图2.5.5图2.5.6（反例）图2.5.7图2.5.8（反例）没有类型限制输入区域，应可录入汉字、字母、数字、*&%$#@!~等全部类型字符。数值字段只能输入0~9，视情况决定是否能够输入”-”和”.”。兼容性和个性化标准表2.6.1类别操作项基础规范优先级兼容性产品功效向后兼容楼上5各产品兼容楼上3各产品高浏览器兼容IE内核类（IE6、IE8）火狐浏览器Chrome浏览器高Java平台兼容JDK5.0高操作系统兼容Windows（XP、、7）Unix、Linux高应用服务器兼容WebSphere（6.1及以后）WebLogic（9.2及以后）高数据库服务器兼容Oracle（10g及以后）DB2（9.1及以后）SQLServer（及以后）高分辨率兼容1024x7681440x9001366x7681280x800高个性化需求个性化皮肤定制提供2套以上皮肤个性化门户定制提供可定制门户界面常见功效个性化定制提供可定制常见功效键盘响应TAB键界面支持TAB键自动切换功效。Tab键切换次序和控件排列次序要一致，通常情况下采取总体从上到下，行内从左到右方法。Enter键焦点在文本输入框时，按下Enter能够触发查询/提交/确定/实施等操作。导航键（上下左右）选中下拉框某一项后，上下键能够切换邻近选项。选中某一单选项/复选项后，上下左右键能够切换到邻近项。DEL键选中一条或多条能够删除条目，按DEL键能够触发删除事件。鼠标鼠标为不可点击状态时显示为，可点击状态显示为，系统忙时显示为，经过文本框显示为。系统除了文本输入外，其它全部功效全部应该能经过鼠标来完成。

各模块设计标准开启/登录界面软件开启封面要高清楚度图像软件开启封面大小多为主流显示器分辨率1/6大(微软标准)LOGO要弱化、系统名要强化图3.1.1插图要有意义、象征性强使用字体大小要规范：通常正文使用12px，图标文字或标题使用14px图像格式宜使用gif和png插图宜使用独立版权图片使用摄影图像时应该进行数位处理，比如做高斯模糊处理等打开新增（修改）页面时，光标初始定位在第一个待输入文本区。图3.1.2主界面遵照总体规则为：导航优先、分层显示、功效按关键度排序。主界面百分比狭长型为宜，最好百分比为16:9界面配色要形成对比：背景和前景要对比，如背景复杂+前景简单，前景深色+背景白色（或是浅色系）banner图标宜用平面图图3.2.1色调使用：宜使用白色、浅色，如浅蓝色、浅绿色等；不提议大范围使用深色系纯色导航导航方法有纯头部导航、头部导航+左侧导航、头部+右侧导航、图标导航等导航中显示关键功效，最多不超出8个；不常见功效加“更多…”来显示假如有下级菜单应该有下级箭头符号标示图3.3.1导航中有选中状态和未选中状态要有区分，选中状态要突出、高亮或不一样颜色显示不一样功效区间应该用线条分割或是用空白分割图3.3.2菜单深度通常尽可能不超出三层，菜单层次太多时，应给出返回主窗口、主分支快捷链接。目录树中，鼠标悬停于非叶子节点时出现子节点，降低用户点击数。图3.3.3将关键信息放在上边和左边，左上角最轻易吸引用户注意力。图3.3.4窗体布局窗体进行最大化操作和最小化操作和任意更改窗体大小时，页面排版均正常。窗体缩放时，窗体内控件也要随窗体进行缩放。窗体有最小化、最大、关闭按钮控件对齐：控件水平排列成一行时，采取水平中对齐，控件间隔按要求基础保持一致；行和行之间间隔相同；窗体边界距离应大于行间间隔图3.4.1控件对窗体覆盖率以不高于75%为宜按钮和窗体上、下、左、右之间间距为14px，按钮之间间距为6px图3.4.2并列关系控件间应该左对齐，同行控件应该横向对齐，有隶属关系应该缩进。图3.4.3提醒信息提醒消息尽可能不抢夺用户操作权利，尽可能不强制用户进行操作。通知类消息（不需要用户反馈信息），不能强制用户进行操作。图3.5.1（正反例对比）用户进行危险性操作或破坏性操作、运行状态错误时，系统应该有简练易懂、口语化提醒信息。一切含有计算机专业术语提醒信息全部应该杜绝（尤其是诸如SQL错误，空指针异常等信息）。图3.5.2（正反例对比）同一系统内同类交互信息（提醒信息、问询信息、警告信息、错误信息）风格要统一，避免大量使用大红色。图3.5.3（反例）耗时操作系统有反馈信息，在进行长时间操作时，要有等候光标、进度条或其它可视反馈。图3.5.4四种类型交互信息颜色选择a) 系统提醒信息：提醒需要让用户注意问题。用蓝色b) 问询信息：如是否继续某个操作。用蓝色图3.5.5c) 警告信息：如提醒某个安全问题。用橙色d) 错误信息：系统运行时出现错误信息。用红色文本框假如单行文本框能够满足需求，就不采取多行文本框。图3.6.1（反例）单行文本框不宜过长或过短，以可完整显示最大可输入内容为最好。图3.6.2多行文本框录入内容超出文本框宽度能够自动换行。图3.6.3图3.6.4（反例）多行文本框录入内容超出页面显示区域，显示滚动条，可滚动显示。图3.6.5交互信息页面风格一致，最好有统一交互页面。不可修改字段，统一使用灰色文字显示。图3.6.6输入域无特殊说明一律左对齐（金额可右对齐）。搜索框显示搜索提议。图3.6.7弹出框/弹出窗口交互不复杂情况下，尽可能不使用弹出窗口，而在目前页面完成交互。图3.7.1图3.7.2（反例）弹出式窗口应尽可能在不借助水平和垂直滚动条情况下显示全部内容。图3.7.3下拉框/单选框/复选框下拉框长度和实际显示数目一致，不能有空白行。下拉框不能超出20行，假如选项超出20个，应该在下拉框中加入滚动条，或根据层级关系采取多个下拉框联动方法实现。下拉框宽度和实际需求匹配，不可出现某行内容显示不全情况，也不可出现宽度大大超出需求情况。图3.8.1下拉框要有默认选项，假如确实不需要默认选项，则默认选中“请选择”或“-”。图3.8.2列表中，单选框和复选框不能同时利用在同一区域中。图3.8.3（反例）下拉内容少于等于3项，用单选框替换。界面空间拥挤时，使用下拉框而不用单选框。假如下拉框能够输入，则下拉框中内容要依据输入内容进行动态调整。图