应用系统易用性设计浅析

56FINANCIAL COMPUTER OF CHINA开发测试DevelopmentandTesting应用系统易用性设计浅析国家��银行信息科技局李金良1.页面视觉效果一、应用系统易用性分析57中国金融电脑2012.4DevelopmentandTesting开发测试表1视觉角度易用性要点分类易用性要点页面风格1.系统页面的布局、色彩、文字要繁简适中，页面风格不宜过于简单、也不宜过于炫目美观，给人以舒适的感觉为宜2.系统页面整体风格要保持一致，相同或相近页面风格要接近或一致，例如：报错页面风格要一致，最好要有统一的报错页面3.页面内容布局要合理,不宜过于密集，也不能过于空旷，合理利用界面空间4.若同一页面中承载信息较多时，可通过框体或分割线进行适当划分，并应有标题或功能说明；若承载内容较多时，应以上下滑动条为主，避免出现左右滑动条5.若页面支持缩放，缩放前后页面风格要一致且其包含的控件及控件上字体也应随之缩放；切忌只缩放页面而忽略控件的缩放，若无法实现控件及其字体缩放，一般应设置为不支持页面缩放或通过水平、垂直滑动条实现展示6.单层弹出窗体的中心位置应在屏幕对角线交点附近，无需缩放功能，且尽可能不借助水平和垂直滚动条显示其内容；多层弹出窗体可在界面左上角显示，依次向右下方偏移，以显示出上级窗体（或页面）的标题为宜7.若弹出窗体对上级页面或窗体有功能或数据制约，应保持在最顶层，避免因未操作置于后端而致使上级页面或窗体功能发生操作错误8.页面按钮数量要合理，过多按钮容易产生错误操作且也不美观，原则上同一页面按钮数不超过10个，过多时可考虑功能拆分或分页实现色彩文字1.色彩搭配要合理，前景与背景色搭配要协调，主色调以柔和为主，反差不宜过大，少用过深、过亮色彩，如大红、大绿等，常用色调应尽可能与Windows色调保持一致，否则容易引起视觉疲劳2.页面中所包含文字字体通常选用宋体，大小要与界面比例协调，同一层级字体字号应一致，一般以9~12号较为合适（五号字体为10.5磅）3.涉及图形中文字以系统名称等特殊情况，可艺术化处理或使用艺术字体，但注意字体比例和色彩要与页面风格一致4.菜单上文字通常选用五号宋体，字数一般以4个字为宜且尽可能字数相同，原则上应使用常用词语，个别涉及专业性较强内容可适当使用专业术语5.工具栏或菜单可适当使用图标，但图标要直观、易懂且其色彩要与页面风格一致，图标高度应与字体高度保持一致6.页面中字体、框体的色彩或线条应根据焦点位置变化而变化，方便用户快速定位鼠标或键盘键入位置7.页面中涉及说明、提示、警告、错误等帮助信息文字时，应采用通用词语，并清晰、简洁，同一层级字体、字号应相同，可对关键字用醒目颜色或字号标记菜单工具1.页面上菜单纵深、菜单层级、菜单横排都应适中，纵深一般应控制在七个以内，层级一般应控制在三层以内，横排应尽可能控制在单排排列且不超过屏幕宽度2.某一组菜单纵深或层级过长或过深时，可通过调整菜单横排方式进行适当控制，工具栏（条）要与业务菜单有清晰界限，且样式应有较明显区别3.若一组菜单无顺序要求，应按照菜单项使用频率和重要性进行排列，通常采用“常用——主要——次要——工具——帮助”的顺序进行横排，若因业务规则有顺序要求或有向导作用，应按照业务规则顺序进行横排4.对左侧设有导航树的页面，导航树所属框体大小应有默认值，且可手工拖动边框来调整框体大小5.若界面中显示功能菜单层级时，对层级过多的内容应给出返回主页面、主窗口、主分支的快捷链接6.下拉菜单长度过长时，应根据业务要求进行分组、排列，并用横线隔开7.菜单应可见即可用，对无权限操作菜单应隐藏或者屏蔽的方式加以处理，仅显示可用菜单，或采用动态加载方式只显示需要使用的菜单帮助信息1.对系统较为复杂的或不易于一般用户理解的功能点或操作，页面上应有一定帮助信息或提示2.对系统运行过程中出现问题而引起错误的提示信息，应尽可能让用户清晰问题或错误点，避免形成模糊判断，例如：登录异常时，应避免“用户名或密码错误”之类的提示，应尽可能提示是用户名不存在还是密码错误3.帮助文档中的功能介绍与说明要与系统功能配套一致，当系统有升级或变更时应及时更新帮助文档，否则使用者会困惑4.在界面上调用帮助时应能及时定位到与该操作相对的帮助位置，帮助要有针对性，且用户可通过关键词或主题词搜索所需帮助；5.帮助中应提供清晰、可用的技术支持方式，帮助用户在遇到困难时，通过快捷的方式解决问题58FINANCIAL COMPUTER OF CHINA开发测试DevelopmentandTesting2.控件操作分类易用性要点输入控件1.必输项应给出清晰的标识，例如框体后使用红色的星号（*）2.对必输项或有校验规则的输入项，在失去焦点时，应采用Ajax等技术实现无刷新的自动校验，若不符合校验规则应给出简单易懂的提示并自动获得焦点，例如：将输入内容变为红色字体并提示错误原因3.对输入内容前、后有空格时，系统应能自动判断并除去空格后将数据保存，非必输项内只有空格时，应能自动识别并去除后保存数据，对于输入内容为汉字或数字（不含字母）及组合时，若中间有空格，系统应能自动去除空格后将数据保存4.对身份证号码、手机号码、电子邮件等具有通用校验规则的输入项应有清晰、正确的校验规则，如涉及身份证号输入时，15位或18位皆为正确位数并能自动进行身份证号校验位验证5.对日期输入项，要采用简便易用的日期控件，并支持手工输入，对于具体格式应给出简单易懂的提示，对于输入截止日期小于开始日期时应给出提示，且同一系统中日期格式应保持一致，如：YYYY-MM-DD6.应当尽可能避免用户重复录入隐含的重复信息或者无意录入无效的数据，例如：用户已录入了身份证号码，已无需再录入性别、出生年月等信息7.对录入的数字、字母应仅能以半角输入限制全角输入，或对全角字符进行识别并自动转化作为半角字符进行保存，例如：输入为“Ａ１３９”或“Ａ139”都应识别并转化为“A139”进行存储8.对录入字母能自动识别大小写并按照统一格式进行存储，例如：用户录入身份证号码末位为字符Ｘ时，不管录入者是大写还是小写，都统一按照大写存储和读取；9.若录入内容包含系统保留字符或可能引起错误字符时，系统应能自动识别、转化、保存并正确读取，若无法实现应加以限制并应提示选择控件1.需使用选择控件时，应根据页面空间大小及界面整体风格，确定使用下拉式还是排列式，当界面空间较小时，使用下拉式，相反使用排列式2.使用单选框时，若需选择内容较少且界面内容较少时，可采用排列式将选择项摆放于界面上，进行选择，若选择项较多或界面内容较多时，可采用下拉式进行选择；例如：性别选择“男、女”时，根据实际选用排列式还是下拉式3.使用复选框时，应根据页面空间大小及整体布局要求，确定是下拉式选择还是展示性窗体选择，对于已选中的选择项应在备选项中消除4.对于通过复选方框打勾方式进行复选时，若选择项较多，应提供全选、反选、清空等操作按钮5.下拉式选择框选择项较多时，应支持输入字符查询式选择方式6.选择框中内容应按照业务要求或选择几率的高低进行先后排序，可设置默认选项也可出现“请选择”提示项，并支持上下指向键选择表2控�操作易用性要点59中国金融电脑2012.4DevelopmentandTesting开发测试3.业务流程优化二、围绕易用性进行系统详细设计原则分类易用性要点按钮控件1.按钮在整个系统中的显示位置要统一，避免空旷的界面上放置很大的按钮以及放置按钮后留有很大空缺2.按钮风格要相同，按钮的大小要与界面的大小和空间相协调，按钮过小不易于使用，按钮过大视觉感较差，其上字体、字号应保持一致，忌用太长的名称3.错误使用容易引起界面退出或关闭的按钮不应该放在易点击位置，横排前端或后端与竖排末尾为易点击位置4.对可能发生严重后果的操作要有补救操作按钮，用户可回退至原正确状态，例如：对易产生错误操作或可能造成数据无法恢复的编辑内容保存或提交时，应提供确认信息,给用户保存或者取消等操作5.对于等待时间较长的操作，应有进程信息提示并且应有取消功能按钮6.按钮要遵循可见即可用原则，对无权限操作按钮应加以屏蔽或采用置灰的方式表示该按钮不可用快捷键1.一般情况下页面中应有默认按钮，且默认按钮要支持Enter键及操作，即按Enter后自动执行默认按钮对应操作2.页面应支持键盘自动浏览按钮功能，按Tab键自动切换功能，Tab键的顺序与控件排列顺序要一致，一般情况下为总体从上到下及行间从左到右的方式3.常用菜单应有命令快捷键，常用功能应有组合快捷键，快捷键应避免Windows保留键，例如：Ctrl+F4为关闭窗口，Shift+F1为上下文相关帮助等4.系统若支持右键弹出快捷菜单时，所弹出快捷菜单应与系统菜单保持一致（表2续）60FINANCIAL COMPUTER OF CHINA开发测试DevelopmentandTesting分类易用性要点业务功能1.业务操作与管理功能要有机结合，尽可能通过业务操作实现工作管理功能2.不同系统中相同功能及相同功能在不同界面下名称及操作应保持一致，尽可能后台实现数据同步3.相同或相近功能界面中，所涉及的业务事项排序应尽可能保持一致，易于用户操作，可根据业务逻辑或者重要程度进行排序4.针对各类用户，系统应对其必做工作、需做工作和须知工作应在功能上有所区分，方便用户快速定位必做工作5.流程控制要详略得到，即体现出管理要求，又减少不必要的控制6.根据业务要求及使用习惯，注意数据输入的顺序，查询的方便和显示格式，用户对有权查看的数据应有必要的统计分析功能7.系统应对业务员误操作提供用户自行补救措施，例如：业务操作时，用户分派的任务在下一结点未处理时应能选择收回8.同一系统或相近系统应减少相似功能的数量，尽可能将相似功能进行整合9.系统应支持用户个性化定制主页面，尽可能采用一定的富客户端技术使用户可裁剪、配置菜单表3业务功能易用性要点迭代开发与优化界面可见即可用业务详细设计易用性基本元素库样式技术详细设计控件页面模板图1围绕系统易用性的详细设计框架1.遵循迭代优化式开发模式61中国金融电脑2012.4DevelopmentandTesting开发测试开始查询赋值查询逻辑角色判断查询页面赋值获取逻辑维护界面insert删除网页查询updateSubmit进驻申请添加结束界面赋值角色判断查询逻辑删除逻辑图2初始页面流设计updateinsertSubmit更新逻辑一…获取逻辑approvalExit获取逻辑获取逻辑退出审批界面批量修改逻辑结束界面赋值角色判断查询逻辑赋值Lijinli…增加了批量导入页面流查询逻辑赋值角色判断查询页面赋值获取逻辑单挑维护界面进驻申请添加更新逻辑删除逻辑导入获取逻辑批量导入界面导入添加逻辑updateBatchSubmitapprovalJionSubmitupdateSubmit网页查询exitQuery删除图3多次迭代后的页面流设计查询approvalJionupdateBatchupdateinsertinsertBatchgetBatchinsertBatchSubmitapprovalExitSubmitinsertSubmit62FINANCIAL COMPUTER OF CHINA开发测试DevelopmentandTesting2.BET思路是良好详细设计的保障3.界面内容可见即可用的设计原则FCC栏目编辑：杨洁[e-mail]