软件界面设计规范_V1.0 - 视觉部分
- 格式:docx
- 大小:341.79 KB
- 文档页数:13
软件UI界面设计规范——软件II原则一、易用性按钮名称应该易懂,用词准确,摒弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知义最好。
理想情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则:1)完成相同或相近功能的按钮用Frame框括起来,常用按钮要支持快捷方式。
2)完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
3)按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题4)界面要支持键盘自动浏览按钮功能,即按Tab键能自动顺序切换功能,总体为从上到下,同时行间为从左到右的方式。
5)同一界面上的控件数最好不要超过10个,多余10个时可以考虑使用分页界面显示。
6)分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab7)默认按钮要支持Enter操作,即按Enter后自动执行默认按钮对应操作。
8)可写控件检测到非法输入后应给出说明并能自动获得焦点。
9)复选框与选项框按选择几率的高低而先后排列。
10)复选框与选项框要有默认选项,并支持Tab选择。
11)选项数相同时,多用选项框而不用下拉列表框。
12)界面控件较小时使用下拉框而不用选项框。
13)选项数较少时使用选项框,相反则使用下拉列表框。
14)专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。
二、规范性通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应就越好,小型软件可不提供工具箱。
规范性细则:1)常用菜单要有快捷方式。
2)完成相同或相近功能的菜单用横线隔开放在同一位置。
3)菜单前的图标能直观的代表要完成的操作。
4)菜单深度一般要求最多控制在三层以内。
5)工具栏要求可以根据用户的需求自己选择定制。
6)相同或相近功能的工具栏放在一起。
7)工具栏中的每一个按钮要有工具提示。
APP界面UI设计规范应用程序(UI)设计规范是指开发应用程序的界面时需要遵循的一系列设计原则、指导准则和最佳实践,以提供一致、可靠和易于使用的用户界面。
一个好的应用程序界面设计规范可以帮助开发人员创建用户友好、一致性强、易于理解和操作的应用程序。
在设计应用程序界面时,设计人员需要考虑以下方面:1.一致性:应用程序的各个界面应该保持一致性,包括颜色、字体、图标、按钮和布局等。
这样可以使用户在不同界面间切换时能够更容易地适应和理解。
2.可视化引导:在设计界面时,应该使用可视化引导技术,如箭头、颜色提示和动画等,以引导用户完成操作。
这可以减少用户的迷茫感和错误操作,提升用户的操作效率和满意度。
3.易于辨识:应用程序界面中的元素应该能够被用户轻松地辨识和理解。
例如,按钮和图标应该具有明确的含义和作用,以便用户快速识别并进行相应操作。
4.响应性:应用程序的界面应该能够对用户的操作做出及时的响应,例如,按钮点击后应该有明显的反馈效果,界面刷新和加载时应该有合理的动画提示。
5.可定制性:应用程序界面的设计应该允许用户根据自己的喜好和需求进行定制,例如,颜色主题、字体大小和布局等。
这样可以提升用户的个性化体验和满意度。
7.错误处理:应用程序界面应该能够及时、明确地提示用户操作存在的错误,并提供解决方案和反馈机制。
例如,使用弹出窗口或警告框来提示用户输入错误或操作不当。
8.可访问性:应用程序的界面设计应该考虑到不同用户群体的特殊需求和能力。
例如,为视力障碍用户提供屏幕阅读器支持,为听力障碍用户提供文字提示和字幕等。
9.性能优化:应用程序界面的设计应该尽量减少对系统资源的占用,以提升程序的运行速度和系统的稳定性。
例如,使用合适的图像压缩和文件压缩技术,避免过多的网络请求和数据加载。
10.文档化:设计人员应该及时、清晰地记录应用程序界面的设计规范和指导准则,以便开发人员和维护人员参考和使用。
这可以保证应用程序的界面设计在不同版本和不同开发环境下的一致性。
UI设计(界面)标准规范UI设计(用户界面设计)是指针对人机交互,设计安排各种功能模块和信息元素,进行合理布局,使用户可简单、直接、高效地使用诸如网站、软件、游戏等应用系统的界面设计。
UI设计界面的标准规范主要是为了确保用户可以直接理解用户界面设计。
本文将为您介绍一些UI设计界面的标准规范。
1、视觉设计UI设计视觉设计是一个很重要的环节,包括颜色、图片、字体的选择,以及各种设计元素的定义等。
UI设计的颜色设计应尽量遵循配色原则,不过分使用过于鲜艳或暗淡的颜色。
图片的选择应该是高质量、清晰的图片,能够吸引用户目光。
字体的选择应该是清晰、易读的字体,注重排版和字号的搭配,确保内容的易读性和视觉效果。
2、布局设计UI设计布局设计要求布局合理,页面整洁。
布局的形状应选择合适的几何形状,避免过多的复杂线条和图形。
在内容排版上,应该注意文字与图片之间的搭配和间距的设置,以及网页设计时应该遵循“三秒原则”,让用户能够在三秒内理解页面的主要内容。
3、导航设计UI设计导航设计要求导航栏清晰、明确。
导航栏位置应该在页面的顶部、左侧或右侧,导航栏元素排布应该尽量简化,避免使用过多,多余的导航元素。
导航栏中的元素应该按照其在网站中的内容层级和页面优先级划分,描绘网站的主线和次线。
导航栏中的字体要尽可能的易读,重要元素要有显著的区别。
4、表单设计UI设计表单设计应该侧重于用户体验、易用性和准确性。
表单中的每个字段应该有清晰的标签和容易理解的提示信息,应该感知到如何填写每个字段的目的。
在表单中使用输入提示作为默认字段值,可以增强用户体验。
表单填写结束后,应该启用表单验证,确保表单填写的准确性。
5、交互设计UI设计交互设计的目的在于使用户能够易于理解设计,使用户可以轻松完成任务。
对于用户交互设计的要求,应该尽量避免重复交互,确保确认和撤销等操作的明确性和易用性。
对于页面和功能的动效设计,应该根据页面的主要功能和用户预期的反应,不过分使用多余的动效和动画,以及在页面切换时适度减缓动效,确保用户操作的顺畅性和流畅性。
软件界面设计规_V1.01概要界面设计中一定要保持界面的一致性。
一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。
功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之,复杂的功能操作使用操作向导来辅助客户完成。
2色调风格2.1色调:软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。
红色:在政府单位运用比较多。
绿色:一般运用于教育、医疗、农林等行业。
黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。
表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。
2.2风格:软件界面的风格通常比较简约。
不同行业,使用的环境不同稍有差异。
3登录界面基本元素:logo、系统名称、输入框、提交按钮。
如下:4页面逻辑结构软件界面通常是上面这样的逻辑结构首页:宏观预览各项设备管理数据,快速访问期望的数据功能功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。
5页面的基本属性页面宽度:属性值为auto,最小值1024像素。
默认状况下无横向滚动条。
注意:宽度、位置、边距为不可变数据背景:页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等,总之是非常接近白色的颜色。
注:白色为常用色值,对于特殊个性化页面可根据特殊要求变更色彩;背景色彩尽量少用饱和度高的颜色,减少用户视觉疲劳;背景图片遵循原则尽量选择可复用的图片,减少页面文件量页面位置:居中页面边距:上 0px;下 0px;左 0 px;右 0 px;注意:有时候会专门设置一定数值的边距,这时通常与模块间的间距相同,如上下左右都是5px。
app界面设计规范应用界面设计规范(UI Design Guidelines)一、概述应用界面设计规范是为了提供一致的用户体验,减少用户学习成本,提高用户使用效率而制定的标准化规范。
本文档旨在为应用界面设计人员提供详细的设计指导和规范要求。
二、布局设计规范1. 布局要合理:应用界面应根据功能模块和信息层级进行布局,使用户可以快速找到所需信息。
2. 控件位置要合理:常用的功能按钮和交互控件应放置在用户易于触及和操作的位置,并保持一定的统一性。
3. 色彩搭配要合理:应用界面的色彩搭配应符合用户习惯和品牌风格,并且能够提高信息的可读性和识别度。
三、交互设计规范1. 操作一致性:相同类型的操作在不同页面中应保持一致,例如相同的功能按钮应具有相同的样式和位置。
2. 避免误操作:应用界面应减少对用户的误操作机会,例如提供撤销、确认和验证功能等。
3. 提示信息清晰:错误提示、成功提示和帮助文本应清晰明了,避免用户产生困惑。
4. 导航逻辑清晰:应用界面的导航逻辑应清晰明了,用户能够很容易地找到自己的位置和目标。
四、字体和图标设计规范1. 字体选择要恰当:应用界面的字体应选择易于阅读和识别的字体,同时需要考虑字体的风格与品牌一致。
2. 字体大小要合适:应用界面的字体大小应根据不同位置和用途进行调整,以便用户能够轻松阅读。
3. 图标样式要一致:应用界面的图标样式应统一,避免使用不同风格的图标对用户造成困扰。
五、界面美观设计规范1. 色彩选择要科学:应用界面的色彩选择应遵循色彩搭配原则,以提高用户体验和美感。
2. 美观布局要简洁:应用界面的布局应简洁美观,避免过多的装饰和样式干扰用户的使用。
3. 图片使用要合理:应用界面中的图片应具有明确的用途,且不应过于花哨和复杂。
六、响应式设计规范1. 考虑不同屏幕尺寸:应用界面的设计应考虑不同屏幕尺寸的适配性,以保证在不同设备上都能有良好的显示效果。
2. 响应速度要快:应用界面应做到快速响应用户的操作,减少用户等待时间。
软件UI设计规范标准一、设计原则1.1 用户导向UI设计应以用户为中心,关注用户需求,提供简洁、直观的操作界面,提升用户体验。
1.2 一致性保持界面元素的一致性,包括图标、按钮、颜色、字体等,有助于用户快速熟悉和上手。
1.3 美观性界面设计应美观大方,符合审美潮流,为用户带来愉悦的视觉体验。
1.4 可用性确保界面布局合理,操作便捷,提高软件的易用性。
二、布局规范2.1 分栏布局采用固定分栏布局,如一栏、两栏、三栏等,使内容分布更加清晰。
2.2 模块划分将功能模块进行合理划分,便于用户快速找到所需操作。
2.3 留白处理适当留白,避免界面过于拥挤,提高阅读体验。
2.4 对齐方式保持元素对齐,使界面看起来更加整洁。
三、色彩搭配3.1 色彩选择根据品牌调性选择主色调,搭配辅助色,形成和谐统一的视觉感受。
3.2 色彩对比保证文字与背景色的对比度,提高可读性。
3.3 色彩情感运用色彩传达情感,如蓝色代表稳重、红色代表热情等。
四、图标设计4.1 形状规范图标形状应简洁明了,易于识别。
4.2 尺寸规范保持图标尺寸一致,便于用户快速理解。
4.3 风格统一图标风格应与整体界面风格保持一致,形成统一的视觉语言。
五、字体规范5.1 字体选择选择易读性强的字体,如微软雅黑、Arial等。
5.2 字号规范根据内容重要性和阅读场景,设置合适的字号。
5.3 字体颜色确保字体颜色与背景色对比明显,提高可读性。
六、交互设计6.1 反馈机制为用户提供明确的操作反馈,如按钮、输入框等。
6.2 动效设计合理运用动效,提升用户体验,但不过度装饰。
6.3 逻辑流程设计简洁明了的操作流程,降低用户学习成本。
七、界面元素设计7.1 按钮设计按钮形状:采用圆形、方形或长方形,确保形状一致性;按钮大小:根据功能重要性和操作频率设置合适的大小;按钮间距:保持适当的间距,避免按钮过于紧凑或稀疏;按钮颜色:主按钮采用品牌色,次按钮采用辅助色,区分不同功能。
软件UI界面设计规范
一、总体设计原则
1、用户友好。
设计良好的界面,简洁明了,让用户更容易理解,使
用成本最低。
2、安全便捷。
界面应尽量提供安全保障,而且操作步骤要简单实用,可以给用户最大便捷。
3、合理美观。
让用户在使用软件时得心应手,界面要美观大方,让
用户有良好的视觉感受。
二、样式设置
1、背景:界面背景采用淡雅的颜色,让整个界面更加清新,以给用
户一种舒适的使用感受;
2、色彩:除了背景以外,整个界面只采用相近的色彩,让整体界面
有质感,使用者可以很容易记住,让界面协调统一;
3、字体:首页的字体大小采用一致格式,一般采用黑色,让可读性
更强,让用户看起来不太累;
4、图片:软件界面设计采用无缝融合的形式,应尽量使用免费的图
片或自行制作,让整个界面更加美观。
三、功能分析
1、功能模块设计:界面设计尽量简洁有序,划分模块功能明显,让
用户便捷地完成操作,而不是看到一堆功能让他们迷失;
2、功能按钮:一些功能操作可以通过相应的按钮来实现,如完成任务、确认信息等,这些按钮要注意设计大小、形状、颜色,让用户参考使用;。
界面设计测试规范目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,以下规则是应该被重视的。
➢1:易用性:按钮名称应该易懂,用词准确,摒弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知义最好.理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则:1):完成相同或相近功能的按钮用Frame框括起来,常用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
3):按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。
4):界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。
5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置.6):同一界面上的控件数最好不要超过10个,多于10个时可以考虑使用分页界面显示。
7):分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab。
8):默认按钮要支持Enter操作,即按Enter后自动执行默认按钮对应操作。
9):可写控件检测到非法输入后应给出说明并能自动获得焦点.10):Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。
11):复选框和选项框按选择几率的高底而先后排列。
12):复选框和选项框要有默认选项,并支持Tab选择.13):选项数相同时多用选项框而不用下拉列表框。
14):界面控件较小时使用下拉框而不用选项框.15):选项数较少时使用选项框,相反使用下拉列表框。
16):专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。
➢2:规范性:通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键快捷菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应就越好.小型软件一般不提供工具箱。
规范性细则:1):常用菜单要有命令快捷方式。
软件界⾯设计要求规范_V0-视觉部分软件界⾯设计规范_V1.01概要界⾯设计中⼀定要保持界⾯的⼀致性。
⼀致性既包括使⽤标准的控件,也指使⽤相同的信息表现⽅法,如在字体、标签风格、颜⾊、术语、显⽰错误信息等⽅⾯确保⼀致。
界⾯⼒求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统⼀。
功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单⼀功能的操作⽬的明确,符合易⽤性原则,避免不必要的信息显⽰⽽对⽤户造成视觉⼲扰;⼒求操作简单,简单的功能⼀步完成,⽐较复杂的功能三步之内,复杂的功能操作使⽤操作向导来辅助客户完成。
2⾊调风格2.1⾊调:软件界⾯设计中常⽤的主⾊调包括:蓝⾊、红⾊、绿⾊、⿊⾊蓝⾊:运⽤的⾏业较为⼴泛,如通讯、电⼦、房产、钢铁、⽣产管理等⾏业⼤部分以蓝⾊为主⾊调来设计软件。
红⾊:在政府单位运⽤⽐较多。
绿⾊:⼀般运⽤于教育、医疗、农林等⾏业。
⿊⾊:能源、⽯油、房地产⾏业有时候会⽤中性的⿊⾊作为主⾊调。
表现区:通常⽤浅⾊,如:⽩⾊、淡灰、或者淡蓝之类,因为⼤⾯积的⽂字信息在浅⾊上便于长时间阅读,不容易形成视觉疲劳。
2.2风格:软件界⾯的风格通常⽐较简约。
不同⾏业,使⽤的环境不同稍有差异。
3登录界⾯基本元素:logo、系统名称、输⼊框、提交按钮。
如下:4页⾯逻辑结构软件界⾯通常是上⾯这样的逻辑结构⾸页:宏观预览各项设备管理数据,快速访问期望的数据功能功能页⾯:查看某⼀功能模块的全部数据,查看某⼀对象的各类相关数据弹出页⾯:填写和提交表单,对功能中的某⼀单项数据进⾏增加/删除/查询/修改/审核/打印/导出等功能操作。
5页⾯的基本属性页⾯宽度:属性值为auto,最⼩值1024像素。
默认状况下⽆横向滚动条。
注意:宽度、位置、边距为不可变数据背景:页⾯整体为⽩⾊背景#FFFFFF 或者浅灰、浅蓝等,总之是⾮常接近⽩⾊的颜⾊。
注:⽩⾊为常⽤⾊值,对于特殊个性化页⾯可根据特殊要求变更⾊彩;背景⾊彩尽量少⽤饱和度⾼的颜⾊,减少⽤户视觉疲劳;背景图⽚遵循原则尽量选择可复⽤的图⽚,减少页⾯⽂件量页⾯位置:居中页⾯边距:上 0px;下 0px;左 0 px;右 0 px;注意:有时候会专门设置⼀定数值的边距,这时通常与模块间的间距相同,如上下左右都是5px。
软件界面设计规范_V1.01概要界面设计中一定要保持界面的一致性。
一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。
功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。
2色调风格2.1色调:软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。
红色:在政府单位运用比较多。
绿色:一般运用于教育、医疗、农林等行业。
黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。
表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。
2.2风格:软件界面的风格通常比较简约。
不同行业,使用的环境不同稍有差异。
3登录界面基本元素:logo、系统名称、输入框、提交按钮。
如下:4页面逻辑结构软件界面通常是上面这样的逻辑结构首页:宏观预览各项设备管理数据,快速访问期望的数据功能功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。
5页面的基本属性页面宽度:属性值为auto,最小值1024像素。
默认状况下无横向滚动条。
注意:宽度、位置、边距为不可变数据背景:页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等,总之是非常接近白色的颜色。
注:白色为常用色值,对于特殊个性化页面可根据特殊要求变更色彩;背景色彩尽量少用饱和度高的颜色,减少用户视觉疲劳;背景图片遵循原则尽量选择可复用的图片,减少页面文件量页面位置:居中页面边距:上0px;下0px;左0 px;右0 px;注意:有时候会专门设置一定数值的边距,这时通常与模块间的间距相同,如上下左右都是5px。
6导航菜单常见的软件导航菜单有:左侧树状菜单、左侧伸缩菜单、windows标准的定制导航6.1左侧树状菜单适用于多级结构庞大的软件架构。
6.2左侧手风琴式菜单这种菜单适用于相对小规模的软件架构,简单舒适型。
规范1)菜单深度一般不要超过两层2)导航如不是客户特别要求的定制,均制成类似以上的导航,其中默认分辨率为1024*768。
一级菜单:图标32px_32px,字体14px、不加粗、#000000;二级菜单:图标20px_20px,字体12px、不加粗、#333333;6.3Windows标准的定制导航7页面结构7.1基本结构:标准头、内容区、标准尾头部和底部具体的的内容不同的软件设置有所差异,如有些软件将菜单栏设在标准头里边,而有些软件则设置在内容区的左侧,但在不同的同时,有很多的地方是相同的。
这里我们所说的就是共性。
7.2标准头logo&系统名称| 基本操作区适用范围:所有常规页面尺寸:宽100% 高60px~80px 7.3标准尾技术支持&版本情况| 版权信息适用范围:所有常规页面尺寸:宽100% 高30px~50px 7.4内容区版块元素之间间距为5px8窗口风格窗口风格要注意表现的一致性。
1)报错页面的风格一致,最好有统一的报错页面2)类似功能的窗口打开的风格要一致3)相同功能在不同模块的名称要一致4)子窗体应尽量在显示在主窗体的左上或居中放置5)弹出式窗口尽量在不借助滚动条的情况下显示所有内容6)框边界要与背景有区分,边界要清楚。
7)弹出框的文字要有对齐,当不同长度文字的排版出现对对齐不一致的时候,上下文字必须统一右对齐,输入框统一左对齐,如果文字对其空间不够,可考虑换行。
9页面留白无论是在页面中还是在弹出层中,内容距离上下左右的边距都不能太近,这样有助于用户的浏览,给用户浏览以喘息的空间。
如下图:顶部留白10px~15px,上下边距10px~15px,左右边距15px~20px,行与行输入框距离5px~10px。
具体留白大小可根据软件的具体情况统一设定,整体保持统一性即可,不可同一软件中不同标准执行。
10 字体规范10.1 字体:软件中所用字体一般是电脑系统的默认字体。
汉字:宋体、黑体、微软雅黑。
英文:Arial, Verdana 。
10.2 字号:软件中一般用14px 和12px ,14px 文字主要用于一级菜单和板块的标题区标题,12px 文字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)必输项给出必输项标识(*)11.3.2字段长度超过数据库规定长度时不允许输入11.3.3多行文本输入、文本区域尺寸:自定义内边距上下左右皆为5px行距为1.5em边框:宽度1px,颜色#66666611.3.4格式校验1)身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定11.3.5日期格式1)日期显示格式一致,如:yyyy-mm-dd2)使用日期控件,尽量不是手工录入3)如需要限制日期选择范围,则超出范围的日期应为灰色不可选状态。
11.3.6特殊字符1)输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。
特殊字符包括:'"=~$%^%¥&#@等11.3.7英文输入英文输入不区分大小写,不可输入汉字、数字及特殊字符11.3.8数值字段只能输入+ - 0~9及功能键(BackSpace 光标)11.3.9字符字段1)如果支持日韩文字,则要判断全角假名/半角假名单行文本框/多行文本框1) 长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。
建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识11.4附件1)可正常添加符合格式的附件2)附件可正常打开和保存,附件名较长时可正常操作3)直接输入错误的附件地址,保存时应给出提示信息4)附件打开/保存到本地时,文件名要显示原文件文件名11.5密码输入1)需在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写,密码的可输入长度2)程序中应给出文字说明密码的可输入长度入无效;对于多行文本框给出最大字符数标11.6Tab标签圆角5px 背景色分设当前选中与非选中状态,边框#ccc如:11.7图片格式:原则上尽量使用png格式图片,特殊图片可使用JPG质量:图片画面显示清晰,不采用改变显示尺寸的放大或缩小。
图片画面(尤其是人物图像)不允许变形。
文件大小:控制在40KB内为宜。
命名规则:图片按照图片描述直接命名。
图片名称均由小写字母、数字和“_”组成,不能有空格或其他字符,放置于images文件夹中。
11.8框架当框架界面长度超过显示终端最大分辨率高度,提供下拉滚动条;框架部分的设计应考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮、菜单、标签、滚动条及状态栏预留位置;主菜单放在左边或上边,滚动条放在右边,以符合用户使用中的视觉流程。
列表均采用表格或框架呈现,默认状况下尽量不出现横向滚动。
12用户界面行为12.1鼠标1)鼠标为不可点击状态时显示箭头,可点击状态显示手型;12.2系统响应时间系统响应时间应该适中,响应时间过长,用户就会感到不安和沮丧,而响应时间过快也会影响到用户的操作节奏,并可能导致错误。
因此在系统响应时间上坚持如下原则:响应时间长度界面设计:1)0-5秒鼠标显示成为沙漏;2)5秒以上显示处理窗口,或显示进度条;3)一个长时间的处理完成时应给予完成警告信息。
12.3光标定位1)打开新增(修改)页面时,光标初始定位在第一个待输入的文本区2)因输入不正确提示用户重新输入时,光标默认focus在出错的输入区,并高亮全选该错误输入3)若必输项未填写完毕就提交,应给出说明信息并能自动获得焦点4)可写控件检测到非法输入后应给出说明并能自动获得焦点12.4TAB键1)界面支持键盘自动浏览按钮功能。
即TAB自动切换功能2)Tab键的顺序与控件排列顺序要一致,一般情况下总体从上到下,同时行间从左到右的方式。