D.界面设计指导规范.doc

基于EXTJS开发的界面设计指导规范

针对前期开发中的界面设计问题，总结了以下一些原则
一． 在实现功能的基础上，让客户以尽量少的步骤完成操作的设计原则：不要把操作设计的太繁琐，以至于客户需要点击很多次操作才能完成功能。
二． 应该从客户的角度及业务流程的顺序来设计界面，而不应该是从开发人员角度、软件功能罗列的方式设计界面：相近和连续的功能要尽量设计在一块，而不要四处分散。另外，要考虑不同身份的客户进入后系统，应该让同一身份操作的模块设计在一块。
三． 限制必须限制的操作，放开不需限制的操作：如表单元素的输入、或者某些操作，通过限制客户的操作，可以防止输入不适当的数据。但是如果客户即使错误输入，也不会影响系统和功能的地方，则尽量不要限制客户的输入
四． 对当前界面元素和界面上操作按钮等能够提供显式或者浮出式的说明文字：要求是客户通过这些说明文字能够了解界面的用途和功能，如：客户的输入限制、操作说明
五． 让客户能够方便的得到帮助：能够在当前操作页面上添加帮助按钮或链接，客户不用离开页面就可以获得帮助
六． 对于不可逆的操作，在执行前一定要提供提示选择对话框，以供客户理解这个操作的严重性
七． 操作成功后，如无必要，不需要弹出操作成功的提示框，可通过界面或者界面数据的改变让客户知道已经操作成功，只有在界面没有变化反馈时才需要弹出提示框
八． 如果某个操作时间会比较长，要求能够显示个进度条等动态效果，让客户知道当前正在进行操作，而不是机器不反应
九． 数据列表显式字段，选择客户关心的字段、能够作为区分与其他记录区别的字段、重要性比较高的字段，对于估计会有很多输入字符的字段（比如：备注、内容等字段），尽量不要显示
十． 列表字段的排列也是按照重要程度字段进行排列，重要的字段排在前面，状态等字段排在后面，操作链接列则放在最后面（有时候如果列有横向滚动条时）
十一． 对于按钮等操作，在客户点击后的执行代码开始要先disable，防止客户重复点击，操作成功后再恢复enable
十二． 尽量让客户的操作为单击操作，而不要是双击操作（因为很多客户不会双击操作），尽量有显眼的标识（比如带下划线的链接样式）让客户知道在这个位置点击
十三． 菜单设计要按照客户业务流程来排列，把常用的操作菜单放在前面，把不常用的操作菜单放在后面（比如：系统设置、系统编码、等等）
十四． 菜单的层级不易设计过多，两级菜单最好，不要超过三级菜单，第一级下也尽量不要放置太多第二、三级菜单，要求以在1024分辨率下不要显示出滚动条来为标准（水平和垂直都不要显示）
十五． 表单字段注意前后顺序和分组，表单中相同性质的元素要排在一块，比如：客户信息中，客户的开户银行和银行帐号就属于相同性质的元素，设计时要让他们在一行上
十六． 表单字段要注意tab键的顺序，tab键跳转顺序要按照表单排列，从左右到右，从上到下，依次跳转。不要让tab跳着字段来跳转。
十七． 表单应该支持回车键切换表单元素
十八． 界面颜色不要过多，要指定一种主色调（比如：蓝色调、或者红色调），然后界面上所有颜色都要基于这个主色调来配色（通过修改主色调的颜色深浅）
十九． 字段的标签名、操作按钮显示文本，尽量设计为4个字符，或者2个字符，如果字符不足，可以在文本的中间添加空格，使其保证文本有同样的宽度和对齐样式
二十． 列表和表单中字段类型对齐定义：文字和日期类型的字段左对齐、或者居中，数值类型的字段右对齐
二十一． 合理调整整个框架中各个区域的大小、以及区域内元素在整个区域的大小，如果区域内元素较少，只能占据一小部分区域，则可以在区域内添加背景图片等元素，让整个布局不至于太小气。元素在区域内布局时要在上下左右留下空白，不要顶到头
二十二． 弹出窗口、表单窗口的大小要适当，要能包裹表单元素信息，尽量让表单内不要出现滚动条，也不要太大，让表单下面留出大块空白。窗口的大小不要太大，不要超出在1024×768分辨率下的显示范围，也不要太小，显得局促
二十三． 用户的操作方式要尽量统一，不要有的操作是按钮、有的是右键菜单，有的是链接点击、有的就是双击
二十四． 对于可编辑和只读字段，要用颜色区分开来，让客户了解那些是能填，那些是不能填的。对于必填字段和可选字段，也能够通过加红色*号等方式区分开来
二十五． 客户输入项应该有醒目的长度限制提示信息。
二十六． 功能模块页面上用词要准确，统一，要在设计开始定义好字典，保证每个模块中的标题、标签名、操作按钮、提示信息、说明文字等文字要统一名称
二十七． 提示信息、说明文字等要求准确、友好、无歧义，能够向客户充分传递你要传递的信息，注意提示信息文字，不要过少，防止提示对话框窗体变形
二十八． 要检查各个地方的文字不要有错别字，不要出现中英文标点同时存在情况
二十九． 后台如果出现异常时返回的错误信息应该是客户能够理解的汉字信息，而不要是程序员才能理解的错误信息
三十． 要求页面布局适应1024×768分辨率，在这个分辨率下为最佳显示效果，但是也要考虑在大分辨率下显示不会有变形、空白等不好的现象发生
三十一． 工具栏按钮文字左边加上图标，图标风格及大小要统一
三十二． 列表中列的宽度要尽量和该列字段可能的字符长度适应（比如：某列为性别列，则只需要留出最多两个字符宽度即可），对于列数比较少的，可以指定某一列为自动扩展列
三十三． 数据格式要求统一。日期格式统一为：yyyy-mm-dd格式，时间格式统一为：yyyy-mm-dd HH:mm，作为计量用的数值格式统一带上千分位，作为顺序或者标识的数值格式不需要千分位，数值都右对齐
三十四． 要求在IE6以上版本中不能出现JS错误、警告，其他浏览器不限制，也不支持
三十五． 每个功能模块页面要求统一有标题，让客户了解当前操作的是那个功能模块
三十六． 提示对话框分为信息提示、警告提示、错误提示，要针对各种提示框设计统一的风格，比如：信息提示框要求标题显示为“提示信息”，在提示框上显示个提示的小图标；错误提示框要求标题显示为“错误信息”，在提示框上显示个错误的小图标。
三十七． 未完成的功能一定不能出现在演示中或对外发布的产品中：开发过程中肯定会有一些功能因为这样或那样的原因而暂停开发。这些功能的连接或相应的操作不能让客户看见。
三十八． 对于某些固定大小内容的弹出框，应该限制不允许修改窗体尺寸，不显示最小化和最大化按钮
三十九． 列表中对于不同状态的记录最好能够通过颜色进行区分，比如：编辑状态的记录为默认黑色、审核状态的记录为蓝色、等等
四十． 对于数据可以复制或者转换生成，系统应该能够提供复制和转换功能，简化客户的录入工作
四十一． 对于一套数据录入的，比如：药监的一个新案，需要录入一批数据的，应该提供模板导出和导入功能
四十二． 对于大数据量录入的应该提供Excel导入功能，例如：批量创建人员、企业、等等
四十三． 查询中的输入框支持末尾敲空格的情况，只不过判断末尾的空格去除之后在查询就可以了。如果可以的话可以像goole一样多字符匹配查询。
四十四． 列表如果有分页时，最好统一定义个默认分页条数，另外，最好允许客户修改每个列表的每页分页条数，亦可修改默认分页条数
四十五． 页面上的弹出窗口，除非有特殊用途，一般使用模态窗口（设置modal :true），防止在弹出窗口时还能操作后面页面的按钮
四十六． 在保存时，应该多提供几种选项，比如：保存并退出，保存并新建、等等