·页面最小:由于Web的网络特性,尽可能减小单页面加载量,降低图片文件大小和数量,加快加载速度,方便用户体验。
·屏幕适应:Web界面需要适应不同用户屏幕大小。
·浏览器兼容:需要适应不同浏览器浏览效果,虽然目前可不考虑不同浏览器差别,但仍需考虑IE浏览器版本差异带来的客户端不同效果。
·最少垂直滚动:尽可能减少垂直方向滚动,尽可能不超过两屏。
·禁止水平滚动:由于将导致非常恶劣的客户体验,尽可能禁止浏览器水平滚动操作。
·避免隐藏(右键)操作:浏览器的右键操作不符合用户体验习惯,尽可能避免。
本系统应用原则
·瘦客户端要求:由于客户应用环境配置大多较低,除服务器可单独配置较灵活外,应该保证瘦客户端,使用户容易使用。例如尽量不要使用复杂的JS脚本和HTC组件,不要在客户端使用IE整合XML/XSLT等等。
·大数据量表格的水平扩展要求:本系统中存在大数据量的列表,需要较大的交互界面支持,为避免水平滚动,应尽可能获取大的屏幕水平空间。
·桌面面板导航简化操作:为了实现方便简捷的用户操作,应该保证用户绝大多数操作可通过首页桌面面板的导航来实现。
·用户自适应定义:提供较多的可订制功能,尤其对桌面面板提供强大的定制功能;使用户能够将最常用的功能定义到桌面面板,每次登录即可直接使用,简化用户操作。
·用户常用操作记录定义:对某些需定义操作的功能如查询、搜索等,提供系统自动记忆和客户定制功能,系统可自动记忆用户前1~3次操作,或者用户可自定义操作记录,方便以后使用。
·大数据量表格的水平扩展要求:本系统中存在大数据量的列表,需要较大的交互界面支持,为避免水平滚动,应尽可能获取大的屏幕水平空间。
4.系统分析
在概要设计过程中,界面设计人员需要浏览需求分析报告,了解用户的工作流程,和整个系统功能,再根据这些原始需求功能,归纳整理分析,并针对用户交互设计需要,提出意见,参与系统设计。
其中包括对原始功能的分类归纳,提出系统交互需要的新功能,对用户功能实现的优先级进行定义等等。
例如,提出用户自定义快捷面板功能,常用操作自动记录功能等,需要在概要设计时尽早提出,以方便作好系统规划。
另外,需要对整个系统中的常见功能有比较清晰的了解,归纳整个系统界面交互中常见的交互形式,例如在本系统中就包括列表、查询、搜索、填写表单、项目分解、项目选择、审批、报告等等;只有清晰的了解整个系统需求,才能较好的把握整个界面设计的统一性。当然,这也和界面设计人员的经验有很大关系。
4.主界面设计
设计主界面,确定系统基本风格,是概要设计中的工作之一。首页主界面的主要实现功能是导航,它要达到的目的,是尽可能使用户仅通过首页面板就可以完成所有常规任务。
该主界面包含以下部分
用户信息区域 显示当前用户信息
用户导航区域 用户页面导航,收藏功能可以将当前功能页面收藏到快捷功能面板
用户导航功能树 用户页面导航,收藏功能可以将当前功能页面收藏到快捷功能面板
功能树隐藏 可水平扩展页面空间
桌面面板用户帮助导航 用户登录时可根据用户类型,自动加载相关使用帮助或导航。
主任务通知区域 通知用户系统业务流程中的待办事宜;通知用户办公系统相关信息。
用户快捷面板 为了能方便快捷的访问系统功能,避免每次访问树形菜单较深级次的繁琐操作,用户可将通过导航栏中的收藏按钮,将当前页面收藏到该面板中;该面板出现在所有业务页面,用户可以随时访问自己定义的功能页面。该导航在首页以面板形式出现,在其他页面以下拉菜单形式出现。
用户自定义功能区域 用户可将相关查询搜索等功能定义到首页面板,例如:最新完成报告察看、报告搜索、检验流程察看等等
5.典型界面
以下是系统中几个比较典型的界面模型。
在整个系统界面的设计过程中,需要注意整个系统的统一,设计风格要一致,界面中的交互元素,从色彩、样式到排版方式、具体位置都要具备延续性,这样才能使用户尽快习惯整个系统操作。
6.典型交互模式
界面交互中,根据功能不同,有不同的交互方式。应该尽量提取抽象,尽可能减少交互模式的种类,或者把交互方式尽可能设计的类似,以方便用户快速熟悉系统。
下面列举3个系统中比较典型的交互模式,供大家参考。
单项选择
项目分解(GIF动画 4桢)
7.Demo开发
Demo是详细设计阶段的重要成果之一,在对系统进行详细的分析设计之后,主要作用是提供给合作客户,在基本功能、系统组成和易用性上进行测试。
本系统的Demo主要包括界面的设计制作,和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用,Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范,并在以后的代码编写工作中严格执行。
本系统整个Demo包括大约50个页面,耗时月3周。
在后续的开发过程中,仍然要严格控制整个开发过程,保证整个系统界面的统一,并随时维护更新系统界面的设计。
8.结语
太长了……需要对以前很多东西进行回顾,实在很困难。很多细节,包括很多设计、技术上的东西,都已经记忆不清了,文章也显得有些紊乱。
因此,如果大家有什么疑问,或有意见、指正,请提出或来信与我交流。