软件UI设计规范方案Word格式文档下载.docx
- 文档编号:17496400
- 上传时间:2022-12-06
- 格式:DOCX
- 页数:29
- 大小:25.01KB
软件UI设计规范方案Word格式文档下载.docx
《软件UI设计规范方案Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《软件UI设计规范方案Word格式文档下载.docx(29页珍藏版)》请在冰豆网上搜索。
22
文本校验原则..................................................................................
24
兼容性和个性化原则.......................................................................
27
键盘响应.........................................................................................
28
TAB键..................................................................................
Enter键.................................................................................
29
导航键(上下左右)..............................................................
DEL键..................................................................................
鼠标
3
各模块设计原则.......................................................................................
30
启动/登录界面30
主界面31
导航31
窗体布局33
提示信息34
文本框36
弹出框/弹出窗口38
下拉框/单项选择框/复选框39
列表页面41
报表规范43
附件43
各种控件的标准大小44
成立UI规范的目的
将阳春白雪式的用户体验细化到详细的可履行的要求,成立各行业线对于界
面元素设计及界面布局的通用规则及要求,提高公用组件复用度及用户体验,从
而增添浪潮软件的产品竞争力。
1用户界面设计理念
雅观
使用可视元素
图
对元素进行分组
对齐
图1.1.4(反例)
易理解
一个系统应当很简单被用户学会和理解,用户应当知道:
1、看什么
2、做什么
3、何时做
4、在哪做
5、为什么做
6、怎样做
信息的搁置次序应当经过深谋远虑,最小化用户记忆和找寻的成本
必需的时候,一步步指引用户进行操作
鼓舞
一旦用户达成了某个重点操作,要实时见告用户,提高用户的信心
一致
一个系统重新到尾的外观,行为,操作应当是一致的
图1.4.1(反例)
图1.4.2(反例)
相同的行为,应当老是产生相同的结果
图1.4.3(反例)
图1.4.4(反例)
相同功能的按钮视觉上保持一致,不一样功能的按钮视觉上有所差别
图1.4.5(反例)
交互
用户在交互过程中据有绝对主动权
1、动作一定是用户恳求的结果
2、耗时较长的动作一定能够被打断
从用户的需求出发表现上下文
图1.5.3(反例)
系统能够对用户的恳求迅速地作出响应
对用户的全部动作供给可视化的反应信息
达成目标的方式应当是灵巧的,并和用户的技术,习惯,经验,偏好相
适应
供给后悔或撤消的时机(undocancel)
效率
最小化用户眼和手的挪动幅度
简化用户操作的步骤
图1.6.2(反例)
尽可能料想用户的想法和需求
熟习
尽可能使用用户熟习的观点和语言
尽可能使界面自然,模拟用户的行为模式
完满地兼容老产品
灵巧
系统一定对不一样用户的需求很敏锐,而且供给不一样层次种类的功能,基
于:
1、用户的知识和技术
2、用户经验
3、用户的个人偏好
4、用户的习惯
5、当时的条件
容错
对于常有的人为失误有妥当的应付举措
当错误发生时,供给建设性的提示
不论发生什么错误,尽最大努力保证用户不丢掉工作成就
可展望
用户能够展望到每个任务的正常进度
所实用户希望达成的目标都应当达成
简短
尽可能简短的用户界面:
突出重要的功能,隐蔽复杂的,不常用的功能
透明
让用户关注他的任务而不是实现体制
计算机内部的工作内容应当是不行见
衡量
最后的设计应当是鉴于一系列设计原则互相衡量的结果
人们的需求老是高出于技术之上
2通用设计原则
字体使用原则
中文字体
同级菜单,字体大小格式一致。
使用的字体大小要规范:
正文一般采纳12px。
图形字体与标题字体一般采
用14px。
介绍使用“微软雅黑”和“华文细黑”字体。
不宜使用艺术字体,如华文彩云、隶书。
英文字体
默认字体使用“Tahoma”,大小12px。
标题字体使用“TrebuchetMS。
”
文字对齐原则
表单字段名左对齐,或许中线对齐。
界面配色原则
产品背风景表现浪潮品牌的蓝色;
项目产品背风景表现客户行业品牌色,如
深圳药监的天蓝色。
要一致色彩,颜色的使用要正确:
如安全软件用黄色;
高科技软件使用蓝色;
环保软件易用用绿色。
界面配色要有对照,在淡色背景上使用深色文字,深色背景上使用淡色文字
同一页面,不宜采纳3种以上颜色。
链策应当有3种颜色:
未点击,点击中,点击后。
按钮设计原则
宜使用圆角图标、渐变成效。
图标大小往常为8的倍数,最小图标12px、16px,顶部24px或32px图片。
图标树的大小是16px,树的大小合适宽度为210px。
保持与系统整体特色以及风格一致。
使用让用户简单联想到的事物,按钮能清楚表达意思。
内页中按钮使用平面成效、不使用三维成效图。
按钮应具备简短的图示成效,应能够让使用者产生功能关系反响,群组内按
钮应当风格一致,大小相像,标题字体保持一致,在整个系统中的显示地点
要一致。
功能差别大的按钮应当有所差别。
按钮应当起码有4种状态成效:
点击前鼠标未放在上面时的状态;
鼠标放在
上面但未点击的状态;
点击时状态;
不可以点击时状态。
按钮上若没有文字,一定供给鼠标悬停提示信息;
按钮上有文字可是不足以
正确传达按钮的功能时,也应当供给鼠标悬停提示信息。
操作功能按钮向左对齐,依据使用频度(重要程度)从左到右摆列;
设置功
能按钮和帮助按钮向右对齐。
折叠菜单的标题栏应当做成”睁开/折叠”的响应地区,方便鼠标点击。
有图标和功能说明文字的,实现点击图片和说明文字,都能够达到预期的页
面
相同功能按钮的描绘一致性
表
一致名称操作描绘
增添对“新增”“增添”的一致描绘
改正对“改正”、“管理”、“保护”的一致描绘
文本校验原则
必填项给出必填表记,使用校验体制保证不为空(包含仅有空格的状况)。
若必输项未填写完成或许填写不切合规则就提交,应给出说明信息并能自动
获取焦点。
非必填项字段,Null插入数据库不会犯错,读取显示为正常留空(不可以显示
为Null)。
焦点从目前输入框移开后,立刻对目前输入框进行校验,不合格则给出提示,
指引用户改正。
身份证号、电子邮箱地点等特定字段的格式须切合需求的规定。
全部字段一定有长度限制,并在激活输入框时给出明确提示,直到焦点从当
前输入框移开。
若用户在输入字符达到最大同意的长度后持续输入,则不再
响应高出字符。
(粘贴高出给出提示)
密码输入框内容显示为”*”或许”?
。
”
用户名输入框应注明能否同意输入汉字等。
日期显示格式为:
yyyy-mm-dd。
尽量使用时间控件,并障蔽手动输入。
如
果同意手动输入,则不一样意字符串、汉字、特别字符等。
不一样意截止日期小
于开始日期。
图2.5.6(反例)
图2.5.8(反例)
没有种类限制的输入地区,应可录入汉字、字母、数字、*&
%$#@!
~等全部
种类字符。
数值字段只好输入0~9,视状况决定能否能够输入”-”以及”.”。
兼容性和个性化原则
类型
操作项
基本规范
优先级
产品功能向后兼容
楼上5各产品兼容楼上
3各
高
兼容性
产品
阅读器兼容
Java平台兼容
操作系统兼容
应用服务器兼容
数据库服务器兼容
分辨率兼容
个性化皮肤定制
个性化需求个性化门户定制
常用功能个性化定制
键盘响应
2.7.1TAB键
IE内核类(IE6、IE8)
火狐阅读器
Chrome阅读器
Windows(XP、2003、7)
Unix、Linux
WebSphere(6.1及此后)
WebLogic(9.2及此后)
Oracle(10g及此后)
DB2(9.1及此后)
SQLServer(2005及此后)
1024x768
1440x900
1366x768
1280x800
供给2套以上的皮肤
供给可定制的门户界面
供给可定制的常用功能
界面支持TAB键自动切换功能。
Tab键的切换次序与控件摆列次序要一致,一般状况下采纳整体从上到下,
行内从左到右的方式。
2.7.2Enter键
焦点在文本输入框时,按下Enter能够触发查问/提交/确立/履行等操作。
导航键(上下左右)
选中下拉框的某一项后,上下键能够切换周边选项。
选中某一单项选择项/复选项后,上下左右键能够切换到周边的项。
2.7.4DEL键
选中一条或多条能够删除的条目,按DEL键能够触发删除事件。
鼠标
鼠标为不行点击状态时显示为,可点击状态显示为,系统忙时显示
为,经过文本框显示为。
系统除了文本输入外,其余全部功能都应当能经过鼠标来达成。
3各模块设计原则
启动/登录界面
软件启动封面要高清楚度的图像
软件启动封面大小多为主流显示器分辨率的1/6大(微软标准)
LOGO要弱化、系统名要加强
插图要存心义、象征性强
一般正文使用12px,图标文字或标题使用14px
图像的格式宜使用gif和png
插图宜使用独立版权的图片
使用拍照图像时应当进行数位办理,比方做高斯模糊办理等
翻开新增(改正)页面时,光标初始定位在第一个待输入的文本区。
主界面
依据的体:
航先、分示、功能按重要度排序。
主界面比率狭型宜,最正确比率16:
9
界面配色要形成比:
背景和远景要比,如背景复+远景,远景深
色+背景白色(或是淡色系)
banner宜用平面
色使用:
宜使用白色、淡色,如浅色、浅色等;
不建大范的使用
深色系的色
导航
航方式有部航、部航+左航、部+右航、航等
航中示主要功能,最多不超8个;
不常用功能加“更多⋯”来示
假如有下菜有下箭符号示
导航中有选中状态和未选中状态要有划分,选中状态要突出、高亮或不一样颜
色显示
不一样功能区间应当用线条切割或是用空白切割
菜单深度一般尽量不超出三层,菜单层次太多时,应给出返回主窗口、主分
支的快捷链接。
目录树中,鼠标悬停于非叶子节点时出现子节点,减少用户点击数。
将重要信息放在上面和左侧,左上角最简单吸引用户的注意力。
窗体布局
窗体进行最大化操作和最小化操作以及随意改正窗体大小时,页面排版均正
常。
窗体缩放时,窗体内的控件也要随窗体进行缩放。
窗体有最小化、最大、封闭按钮
控件对齐:
控件水平摆列成一行时,采纳水平中对齐,控件间隔按要求基本
保持一致;
行与行之间间隔相同;
窗体界限距离应大于行间间隔
控件对窗体的覆盖率以不高于75%为宜
按钮与窗体上、下、左、右之间的间距为14px,按钮之间的间距为6px
并列关系的控件间应当左对齐,同行的控件应当横向对齐,有附属关系的应
该缩进。
提示信息
提示信息尽量不强抢用户的操作权益,尽量不强迫用户进行操作。
通知类的
信息(不需要用户反应信息),不可以强迫用户进行操作。
图3.5.1(正反例对照)
用户进行危险性操作或损坏性操作、运转状态错误时,系统应当有简短易懂、
口语化的提示信息。
全部含有计算机专业术语的提示信息都应当根绝(特别
是诸如SQL错误,空指针异样等信息)。
图3.5.2(正反例对照)
同一系统内同类交互信息(提示信息、咨询信息、警示信息、错误信息)风
格要一致,防止大批使用大红色。
图3.5.3(反例)
耗时的操作系统有反应信息,在进行长时间的操作时,要有等候光标、进度
条或其余的可视反应。
四种种类的交互信息的颜色选择
a)系统提示信息:
提示需要让用户注意的问题。
用蓝色
b)咨询信息:
如能否持续某个操作。
c)警示信息:
如提示某个安全问题。
用橙色
d)错误信息:
系统运转时出现的错误信息。
用红色
文本框
假如单行文本框能够知足需求,就不采纳多行文本框。
图3.6.1(反例)
单行文本框不宜过长或太短,以可完好显示最大可输入内容为最正确。
多行文本框录入内容超出文本框宽度能够自动换行。
图3.6.4(反例)
多行文本框录入内容超出页面显示地区,显示转动条,可转动显示。
交互信息页面的风格一致,最好有一致的交互页面。
不行改正的字段,一致使用灰色文字显示。
输入域无特别说明一律左对齐(金额可右对齐)。
搜寻框显示搜寻建议。
弹出框/弹出窗口
交互不复杂的状况下,尽量不使用弹出窗口,而在目前页面达成交互。
图3.7.2(反例)
弹出式窗口应尽量在不借助水平易垂直转动条的状况下显示全部内容。
下拉框/单项选择框/复选框
下拉框的长度与实质显示的数量一致,不可以有空白行。
下拉框不可以超出20
行,假如选项超出20个,应当在下拉框中加入转动条,或许依据层级关系
采纳多个下拉框联动方式实现。
下拉框的宽度与实质需求般配,不行出现某行内容显示不全的状况,也不行
出现宽度大大高出需求的状况。
下拉框要有默认选项,假如的确不需要默认选项,则默认选中“请选择”或许
“-”。
列表中,单项选择框和复选框的不可以同时运用在同一地区中。
图3.8.3(反例)
下拉内容少于等于3项,用单项选择框取代。
界面空间拥堵时,使用下拉框而不用单项选择框。
假如下拉框能够输入,则下拉框中的内容要依据输入内容进行动向调整。
复选框中选项个数比许多,建议采纳悬浮复选的形式
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 软件 UI 设计规范 方案