2022年软件界面设计要求规范_V-视觉部分可用 .pdf

标准文档文案大全软件界面设计规范 _V1.01 概要界面设计中一定要保持界面的一致性 。一致性既包括使用标准的控件 ，也指使用 相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。界面力求 简洁明了 ，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。2 色调风格2.1 色调：软件界面设计中常用的主色调包括：蓝色、红色、绿色、黑色蓝色 ：运用的行业较为广泛，如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。红色 ：在政府单位运用比较多。绿色 ：一般运用于教育、医疗、农林等行业。黑色 ：能源、石油、房地产行业有时候会用中性的黑色作为主色调。表现区：通常用浅色，如：白色、淡灰、或者淡蓝之类，因为大面积的文字信息在浅色上便于长时间阅读，不容易形成视觉疲劳。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 13 页 - - - - - - - - - 标准文档文案大全2.2 风格：软件界面的风格通常比较简约。不同行业，使用的环境不同稍有差异。3 登录界面基本元素： logo 、系统名称、输入框、提交按钮。如下：4 页面逻辑结构软件界面通常是上面这样的逻辑结构首页： 宏观预览各项设备管理数据，快速访问期望的数据功能功能页面： 查看某一功能模块的全部数据，查看某一对象的各类相关数据弹出页面： 填写和提交表单，对功能中的某一单项数据进行增加/ 删除 / 查询 / 修改 / 审核 / 打印 / 导出等功能操作。首页功能页面功能页面弹出页面弹出页面弹出页面名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 13 页 - - - - - - - - - 标准文档文案大全5 页面的基本属性页面宽度： 属性值为 auto ，最小值1024 像素。默认状况下无横向滚动条。注意：宽度、位置、边距为不可变数据背景： 页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等，总之是非常接近白色的颜色。注：白色为常用色值，对于特殊个性化页面可根据特殊要求变更色彩；背景色彩尽量少用饱和度高的颜色，减少用户视觉疲劳；背景图片遵循原则尽量选择可复用的图片，减少页面文件量页面位置： 居中页面边距： 上 0px ；下 0px ；左 0 px ；右 0 px ；注意：有时候会专门设置一定数值的边距，这时通常与模块间的间距相同，如上下左右都是5px。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 13 页 - - - - - - - - - 标准文档文案大全6 导航菜单常见的软件导航菜单有：左侧树状菜单、左侧伸缩菜单、windows 标准的定制导航6.1 左侧树状菜单适用于多级结构庞大的软件架构。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 13 页 - - - - - - - - - 标准文档文案大全6.2 左侧手风琴式菜单这种菜单适用于相对小规模的软件架构，简单舒适型。规范1）菜单深度一般不要超过两层2） 导航如不是客户特别要求的定制，均制成类似以上的导航，其中默认分辨率为1024*768。一级菜单：图标32px_32px，字体 14px、不加粗、 #000000；二级菜单：图标20px_20px，字体 12px、不加粗、 #333333；6.3 Windows 标准的定制导航名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 13 页 - - - - - - - - - 标准文档文案大全7 页面结构7.1 基本结构：标准头、内容区、标准尾头部和底部具体的的内容不同的软件设置有所差异，如有些软件将菜单栏设在标准头里边，而有些软件则设置在内容区的左侧，但在不同的同时， 有很多的地方是相同的。这里我们所说的就是共性。7.2 标准头logo& 系统名称 | 基本操作区适用范围：所有常规页面尺寸：宽 100% 高 60px80px 7.3 标准尾技术支持 &版本情况 | 版权信息适用范围：所有常规页面尺寸：宽100% 高 30px50px 7.4 内容区版块元素之间间距为5px 8 窗口风格窗口风格要注意表现的一致性。1）报错页面的风格一致，最好有统一的报错页面200px 100%-200px-5 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 13 页 - - - - - - - - - 标准文档文案大全2）类似功能的窗口打开的风格要一致3）相同功能在不同模块的名称要一致4）子窗体应尽量在显示在主窗体的左上或居中放置5）弹出式窗口尽量在不借助滚动条的情况下显示所有内容6）框边界要与背景有区分，边界要清楚。7）弹出框的文字要有对齐，当不同长度文字的排版出现对对齐不一致的时候，上下文字必须统一右对齐，输入框统一左对齐，如果文字对其空间不够，可考虑换行。9 页面留白无论是在页面中还是在弹出层中，内容距离上下左右的边距都不能太近，这样有助于用户的浏览，给用户浏览以喘息的空间。如下图：顶部留白 10px15px，上下边距10px15px，左右边距15px20px ，行与行输入框距离5px10px。具体留白大小可根据软件的具体情况统一设定，整体保持统一性即可，不可同一软件中不同标准执行。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 13 页 - - - - - - - - - 标准文档文案大全10字体规范10.1字体：软件中所用字体一般是电脑系统的默认字体。汉字：宋体、黑体、微软雅黑。英文： Arial, Verdana。10.2字号：软件中一般用14px 和 12px，14px 文字主要用于一级菜单和板块的标题区标题，12px 文字顶 10PX 左 20PX 右 20PX 上 15PX 下 15PX 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 13 页 - - - - - - - - - 标准文档文案大全10.3字体颜色：通常情况：黑色（#000000）深色背景中：白色（#ffffff）白色背景中：深灰（#333333）表格中链接的默认色：天蓝色（#0059D5）链接的鼠标滑过hover 色：红色（ #ff0000 ）警示性文字的颜色：红色（#ff0000 ）如：必选项的提示符号“*“。11页面元素11.1按钮按钮风格相同，大小相似，字体一致无效按钮要屏蔽。高：24 像素，宽：根据文字长度定；按钮的文字居中，字体统一大小12px、右、下、左的边距分别为：6x,12x,6x,12px，按钮之间的间距统一为 8px；11.2表格表格整体色调采用灰调，便于用户长时间操作部视觉疲劳，表格分为标题部分，主体内容部分。标题部分应该用相应的颜色加以区别，表格隔行应用不同的颜色加以区别。表格选中行应用色调区分，表格的行高为25 像素。表格四周的文字要有空隙padding 属性 2px。不同表格之间必须有对齐。如（图 19）三个表格之间表格的顶部、底部都应该有对齐，表格之间应有空隙，空隙。11.3输入框11.3.1必输项1）必输项中不可为空，不可输入空格2）必输项给出必输项标识（*）名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 13 页 - - - - - - - - - 标准文档文案大全11.3.2字段长度超过数据库规定长度时不允许输入11.3.3多行文本输入、文本区域尺寸：自定义内边距上下左右皆为5px 行距为 1.5em 边框：宽度1px，颜色 #666666 11.3.4格式校验1）身份证号、 E-MAIL、邮箱等特定字段的格式要符合需求的规定11.3.5日期格式1）日期显示格式一致，如：yyyy-mm-dd 2）使用日期控件，尽量不是手工录入3）如需要限制日期选择范围，则超出范围的日期应为灰色不可选状态。11.3.6特殊字符1） 输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括： =$%￥&# 等名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 13 页 - - - - - - - - - 标准文档文案大全11.3.7英文输入英文输入不区分大小写，不可输入汉字、数字及特殊字符11.3.8数值字段只能输入 + - 09及功能键 (BackSpace 光标 ) 11.3.9字符字段1）如果支持日韩文字，则要判断全角假名/ 半角假名单行文本框 / 多行文本框1) 长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。 建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识11.4附件1）可正常添加符合格式的附件2）附件可正常打开和保存，附件名较长时可正常操作3）直接输入错误的附件地址，保存时应给出提示信息4）附件打开 / 保存到本地时，文件名要显示原文件文件名11.5密码输入1）需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的可输入长度2）程序中应给出文字说明密码的可输入长度入无效；对于多行文本框给出最大字符数标名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 13 页 - - - - - - - - - 标准文档文案大全11.6Tab 标签圆角 5px 背景色分设当前选中与非选中状态，边框#ccc 如：11.7图片格式： 原则上尽量使用png 格式图片，特殊图片可使用JPG质量： 图片画面显示清晰，不采用改变显示尺寸的放大或缩小。图片画面（尤其是人物图像）不允许变形。文件大小： 控制在 40KB内为宜。命名规则： 图片按照图片描述直接命名。图片名称均由小写字母、数字和“_”组成，不能有空格或其他字符，放置于images 文件夹中。11.8框架当框架界面长度超过显示终端最大分辨率高度，提供下拉滚动条；框架部分的设计应考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮、菜单、标签、滚动条及状态栏预留位置；主菜单放在左边或上边，滚动条放在右边，以符合用户使用中的视觉流程。列表均采用表格或框架呈现，默认状况下尽量不出现横向滚动。12用户界面行为12.1鼠标1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 13 页 - - - - - - - - - 标准文档文案大全12.2系统响应时间系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：响应时间长度界面设计：1）0-5 秒鼠标显示成为沙漏；2）5 秒以上显示处理窗口，或显示进度条；3）一个长时间的处理完成时应给予完成警告信息。12.3光标定位1）打开新增（修改）页面时，光标初始定位在第一个待输入的文本区2）因输入不正确提示用户重新输入时，光标默认focus 在出错的输入区，并高亮全选该错误输入3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点4）可写控件检测到非法输入后应给出说明并能自动获得焦点12.4TAB键1）界面支持键盘自动浏览按钮功能。即TAB自动切换功能2）Tab 键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 13 页 - - - - - - - - -