`

UI界面规范,可作界面测试的参考 (转)

阅读更多

UI色彩与字体
1UI字体、色彩要一致
2)整体色彩搭配要融为一体,起提示作用的部分要清楚醒目

3)不可修改的字段,统一使用灰色文字显示

窗口风格
1)所有窗口最大化、最小化风格要一致
2)报错页面的风格一致,最好有统一的报错页面
3)类似功能的窗口打开的风格要一致
4)相同功能在不同模块的名称要一致
5)子窗体应尽量在显示在主窗体的左上或居中放置
6)弹出式窗口尽量在不借助滚动条的情况下显示所有内容
7)窗体最小化/最大化时,控件也要随着窗体而缩放

布局
1)窗体控件布局和间距尽量与Windows标准保持一致
2)尽量采用Dock和锚点来让布局合理
3)尽量让窗体中显示大部分常用功能

菜单深度
1)菜单深度一般不要超过三层
2)菜单层次太多时应给出返回主窗口、主分支的快捷链接。

按钮
1)按钮风格相同,大小相似,字体一致
2)无效按钮要屏蔽

控件
1)各复选框和选项框按选择几率的高低而先后排列
2)复选框和选项框要有默认选项,并支持Tab选择
3)界面空间较小时使用下拉框而不用选择框
4)选项数较少时使用选项框,相反使用下拉列表框


文本框输入

必输项
1)必输项中不可为空,不可输入空格
2)必输项给出必输项标识(*

字段长度
超过数据库规定长度时不允许输入

格式校验
1)身份证号、E-MAIL等特定字段的格式要符合需求的规定

日期格式
1)日期显示格式一致,如 yyyy-mm-dd
2)使用日期控件,尽量不是手工录入

特殊字符
1)输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括:'"=~$%^%&#@

英文输入
英文输入不区分大小写,不可输入汉字、数字及特殊字符

数值字段
只能输入+ - 0~9及功能键(BackSpace 光标)

字符字段
1)如果支持日韩文字,则要判断全角假名/半角假名

单行文本框/多行文本框
1) 长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识

附件
1)可正常添加符合格式的附件
2)附件可正常打开和保存,附件名较长时可正常操作
3)直接输入错误的附件地址,保存时应给出提示信息
4)附件打开/保存到本地时,文件名要显示原文件文件名
5) 附件上传时应作格式和大小的检查,如果格式不对或者附件大小超过最大值,页面应有提示。页面上要有支持上传附件格式和大小的标识。

密码输入
1)需在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写,密码的可输入长度
2程序中应给出文字说明密码的可输入长度

鼠标
1)鼠标为不可点击状态时显示箭头,可点击状态显示手型;系统忙时显示沙漏形状

光标定位
1)打开新增(修改)页面时,光标初始定位在第一个待输入的文本区
2)因输入不正确提示用户重新输入时,光标默认focus在出错的输入区,并高亮全选该错误输入
3)若必输项未填写完毕就提交,应给出说明信息并能自动获得焦点
4)可写控件检测到非法输入后应给出说明并能自动获得焦点

TAB
1)界面支持键盘自动浏览按钮功能。即TAB自动切换功能
2Tab键的顺序与控件排列顺序要一致,一般情况下总体从上到下,同时行间从左到右的方式

分享到:
评论

相关推荐

    移动UI界面设计(微课版)源文件

    移动UI界面设计是现代数字产品开发中的核心环节,特别是在Android和iOS两大主流操作系统平台上,优秀的UI设计能够极大地提升用户体验,使应用或网站更加易用、美观。本资源为"移动UI界面设计(微课版)源文件",包含...

    ui设计规范大全

    "UI界面设计概念教程——从无到有界面设计畅想曲.docx"深入探讨了设计的概念,从零开始构建一个完整的界面,包括概念构思、草图绘制、模型制作到最终的实施。这个过程有助于设计师提升创新思维和实践能力。 六、UI...

    UI测试用例设计

    6. **主菜单结构及主要界面测试集**:验证主菜单结构和主要界面的一致性与美观性。 - **TC-UIDO-06001**:测试主菜单界面的整体布局。 - **TC-UIDO-06002**:确认九宫格主菜单结构是否正确。 - **TC-UIDO-06003**...

    UI设计(界面)规范

    #### 三、UI界面用户体验设计原则与规范 **1、基本原则** - **一致性原则**: 无论是控件使用、提示信息措辞,还是颜色、窗口布局风格,都应该遵循统一的标准。这样做可以提高用户的使用效率,减少用户的学习成本,...

    界面测试的方案和设计流程

    界面测试是软件质量保证的重要环节,它关注用户与软件系统交互的部分,确保用户界面(UI)的易用性、功能性、视觉一致性以及响应速度符合预期。本文将深入探讨界面测试的方案和设计流程,帮助读者全面理解这一过程。 ...

    ui 图像化界面参考资料 包括ppt 例子

    UI图像化界面设计是现代软件和应用程序开发中的关键部分,它直接影响到用户的体验和产品的市场接受度。这个压缩包文件提供了丰富的参考资料,包括PPT演示文稿和实例,旨在帮助设计师深入理解并提升UI设计技能。 ...

    UI资源界面设计

    以上这些知识点都是UI资源界面设计中所涵盖的,无论是对于120621还是120620这样的文件,都可能包含这些设计元素的示例、模板或者参考资料,帮助设计师在实际工作中获取灵感和指导。在设计过程中,不断学习和实践这些...

    类似今日头条界面UI源码

    - **Android UI设计原则**:理解Android Material Design指南,这是一套设计规范,包括颜色、图标、布局和交互等方面,是构建Android应用界面的基础。 - **BottomNavigationView的使用**:如何配置和自定义Bottom...

    CS软件用户界面设计规范

    本文档为前端开发和测试提供参考,文档定义了开发组件的标准说明,各种开发组件的规范定义,对于前端开发想要做到更优秀可以参考这个文档,养成习惯有助于今后长久的工作。测试页可以参考这个文档去把控产品质量的哦...

    UI界面设计中的工具[汇编].pdf

    12. **User Interface Design Patterns**: 该网站收集了大量的用户UI界面设计模式,分类详尽,是设计过程中寻找灵感和规范的好去处。 13. **Patternry**: Patternry是一个用户界面设计模式库,旨在解决常见的设计...

    界面测试经验总结(转)

    在软件开发过程中,界面测试是确保用户界面(UI)符合设计规范、提供良好用户体验的关键步骤。本文将深入探讨由natureyxu分享的界面测试经验,旨在为软件测试工程师和开发人员提供宝贵的参考与指导。 #### 知识点一:...

    SSM-ZTE-AndroidUI-SDS-1.0 软件文档规范2

    《SSM-ZTE-AndroidUI-SDS-1.0 软件文档规范2》是一份关于中兴Android系统界面软件设计与开发项目的详细文档规范,旨在为项目的开发过程提供标准化的指导。该规范主要关注软件文档的编制、管理和使用,确保软件开发的...

    Android应用源码之奇艺高清UI界面源代码.zip

    "Android应用源码之奇艺高清UI界面源代码.zip"提供了一个很好的学习资源,它涵盖了奇艺高清应用程序的用户界面设计和实现细节。这份源码对于想要深入理解Android UI设计原则、布局管理以及自定义视图的开发者来说,...

    小程序UI界面, 参考。 里面包含基本控件。.zip.zip

    本文将深入探讨“小程序UI界面,参考。里面包含基本控件。.zip.zip”这个压缩包文件中可能包含的内容,并分享一些关于小程序UI设计与实现的相关知识点。 1. **基本控件**: - **按钮(Button)**: 小程序中的按钮...

    软件开发界面规范技巧和注意事项

    界面规范旨在确保用户界面的一致性、易用性和美观性。以下将详细阐述几个关键点: 首先,遵循一致的准则。这涉及到界面的各个元素,如控件的使用、提示信息的措辞、颜色和窗口布局。一致性可以提高用户的学习效率,...

    界面规范相关(通用界面指南)

    ### 界面规范相关(通用界面指南):深入解析与应用 #### 一致性与标准化:构建用户友好体验的基石 在界面设计领域,遵循一致性的准则对于提升用户体验至关重要。这不仅涉及控件的使用、提示信息的措辞,还包括...

    20B_基于Scrapy的WebUI开发_测试需求规格说明书v1.1.01

    测试的目的是验证WebUI的各项功能是否按照设计规范正确工作,并且满足用户需求。测试背景是针对Scrapy框架构建的Web应用程序,它通常用于数据抓取和处理。测试范围包括WebUI的所有功能模块,以及性能、安全性、兼容...

    macos 高清图标,UI设计参考

    "macos高清图标,UI设计参考"这个主题聚焦于为MacOS系统设计的图标,这些图标通常是PNG格式,具备高清晰度和丰富的细节,适用于设计师们进行界面设计时作为参考。 PNG(Portable Network Graphics)是一种无损压缩...

Global site tag (gtag.js) - Google Analytics