摘要：随着互联网的飞速发展，为适应移动办公和分布式办公的需求，越来越多的企业应用选择了B/S架构。近年来行业瞬息万变，更美观的用户界面、更优的用户体验成为产品竞争力必不可缺的一部分。今年，海鼎的研发团队主动出击拥抱变化，研发了一套全新的轻量级web框架体系，使用jQuery技术，开发迅速，资源占用低，轻快灵活。同时这套轻量级web框架对于提升海鼎产品的用户体验有着非常重要的意义，它赋予了用户界面设计更高的自由度和更丰富的表现力，对于落实UI设计师的设计提供了强有力的支持。本文撷取一些HDADI财务接口工具界面设计上的亮点和特性，简述下基于轻量级web框架设计用户界面的实践成果。

关键词：轻量级web框架，HDADI财务接口工具，用户界面设计，用户体验

引言

随着互联网的飞速发展，为适应移动办公和分布式办公的需求，越来越多的企业应用选择了B/S架构。只需一台能上网的电脑，打开浏览器，即可以在任何地方进行操作而不用另行安装客户端。而海鼎在多年前就使用rumba框架技术开发了一系列B/S架构的企业应用。近年来行业瞬息万变，更美观的用户界面、更优的用户体验成为产品竞争力必不可缺的一部分。今年，海鼎的研发团队主动出击拥抱变化，研发了一套全新的轻量级web框架体系，使用jQuery技术，开发迅速，资源占用低，轻快灵活。同时这套轻量级web框架对于提升海鼎产品的用户体验有着非常重要的意义，它赋予了用户界面设计更高的自由度和更丰富的表现力，对于落实UI设计师的设计提供了强有力的支持。
应用轻量级web框架播种的首块试验田是HDADI财务接口工具。它是一款体量较小的工具型产品，作用是将企业业务数据转换为财务凭证，发给第三方财务系统进行处理（想具体了解财务接口工具，详见P xx）。有了轻量级web框架的支持，使得我们在用户界面UI设计上得以大施拳脚。原本需要工程师编写代码的工作都实现了界面化操作，同时新设计的用户界面大大降低了使用门槛，即便是业务人员也可以进行维护财务凭证规则等重要功能的操作。在交互设计上完全顺应了web类产品交互特点，把学习成本降到最低并且使用起来便捷高效。同时，在界面的视觉设计上紧跟趋势、与时俱进，谁说企业应用就不能高大上？！下文将撷取一些HDADI财务接口工具界面设计上的亮点和特性，简述下基于轻量级web框架设计用户界面的实践成果。

一、设计思路

1、细分用户，根据用户特性进行针对性的界面设计

财务接口工具的用户分为四类：（1）海鼎业务顾问；（2）海鼎实施人员；（3）客户信息部人员；（4）客户财务人员。

对于海鼎业务顾问：他们只需要掌握财务知识，具备沟通能力，负责与客户沟通业务需求，在HDADI配置合乎要求的会计分录规则。

对于海鼎实施人员：他们只需要具备产品的维护技能，解决产品部署、配置的相关问题，并根据已定义好的规则检查数据结果是否正确。

对于客户信息部人员：他们只需要根据自身业务需求，对已经创建好的会计分录规则进行简单的配置和调整（例如变更科目，修改凭证方向）。

对于客户财务人员：他们只需要关注生成的数据是否符合要求。

通过对用户的细分，我们形成了用户界面的设计需求作为后续设计的依据。

图1 用户分析

2、得力于新框架的支持，全面采用web类产品的界面交互设计，从各方面降低学习成本和使用成本

由于新框架的底层技术使用的是jQuery，而其界面库jQuery UI现已非常纯熟，可定制可扩展性极强，所以说在用户界面的交互设计上，可以说是能想到的设计基本都能实现。在这一大前提下，我们将web常用的用户熟知的交互模式移植或引入部分进来，使用web常见的界面元素，营造出用户熟悉的环境来引导用户执行任务，无需进行冗长的培训即可自行操作，降低学习成本和使用成本。

3、打造全新的用户界面视觉风格，高大上也能触手可得

HDADI在视觉设计上紧跟主流趋势，采用了简洁扁平化的视觉风格。同时，在技术上做到css样式和页面结构代码分离，使得在配色上可以根据具体客户的需求进行定制化的修改，配色方案改成客户VI的主题色也是可以的哟。

二、HDADI财务接口工具界面设计亮点及新特性

1、映入眼帘的“高大上”——焕然一新的登录界面设计

登录页是产品的“脸面”，首先映入用户眼帘的就是登录界面，所以视觉设计变得尤为重要，必须给用户一个良好的第一印象。为实现“高端、大气、上档次”的设计目标，我们采用了简约的扁平化风格，虚化背景图及大片留白更突出了中间的登录面板，吸引着用户的视觉焦点。

图2 登录界面

2、贴心首页：醒目的待处理提醒、直观的生成作业统计及快捷入口

醒目的待处理提醒：告知财务人员待记账的正常分录有多少，待排查的异常分录有多少，点击数字即可进入相应页面处理分录作业。
       直观的生成作业统计：用可视化图表呈现不同时间范围内分录生成作业情况，无需日日登录，亦可尽在掌握，让系统来告诉你离开的时候发生的一切。
       快捷入口：登录系统进入首页，仅需一次点击就能跳转至常用页面或者进行常用操作。

图3 首页

3、针对不同用户分别设计业务数据界面

对于业务数据这个功能模块，有两类用户会使用：客户财务人员以及海鼎实施人员，但是这两类用户对于业务数据提供的功能诉求以及关注点是大不相同的。在分析了两类用户的需求后，我们分别设计了界面。系统会根据当前登录用户的角色权限，呈现对应的界面。让客户财务人员看到的是财务视角的界面，让海鼎实施人员看到的是工程视角的界面。财务只看财务应该关注的，工程师只看他需要做的，互不干涉，各得所需。

图4 客户财务所用界面

图5 工程师所用界面

4、将大任务分解成小任务，流程化引导用户设置分录生成规则

设置分录生成规则是财务接口工具中极为重要的核心操作。但是设置分录生成规则不是一个简单的任务，其中要设置和维护的内容非常多，对准确性的要求也非常高。所以在设计时，把需要设置的内容分成了三大块：（1）概要及数据来源；（2）生成设置；（3）规则明细，将这个大任务分解成了三个子任务并且由界面化的流程引导串联起来。在设置生成规则的整个过程中，在界面上都会显示流程进度条，用于告知用户需要做什么、已做过什么、正在做什么、接下来做什么，起到了一个引导的作用，一步步辅助用户完成分录生成规则的设置。
同时由于完成整个设置的过程会很长，在完成第一个子任务即维护好概要及数据来源后，执行第二第三个子任务时，系统会提供定时自动保存的功能，避免在设置过程中因意外情况导致数据丢失而白干一场。

图6 设置会计分录生成规则

5、支持移动设备访问，做到随时随地，有网即用

财务接口工具目前支持在移动设备上的访问和使用，只要有网络和移动设备，随时随地就能使用。后续如果有明确的产品需求，会考虑补充设计更适应移动端操作的用户界面，就当前的用户界面而言显然在较大物理尺寸的设备上的使用体验会更佳。

图7 财务接口工具可在移动设备上使用

结语

HDADI财务接口工具是应用轻量级web框架设计和开发的第一款产品，也可以说这个轻量级web框架是伴随着财务接口工具的诞生而逐步成长和完善起来的。从财务接口工具业已成功实施上线了的数个客户的情况和收集到的反馈来看，成果是显著的，效果是喜人的。但这套全新框架的使用前景绝不仅于此，事实上在财务接口工具之后，海鼎的研发团队紧接着已开始将这个框架应用在我们的拳头产品上来进行全方位的升级改造，致力于让产品的用户体验有质的飞跃。
      海鼎作为业内领先的零售信息化专家，积极拥抱变化，凝聚了研发设计团队心血的轻量级web框架正是积极应对行业发展的产物。这是一个开始，接下来海鼎的产品研发团队将继续完善和拓展这个框架，使其拥有更多可能和更广阔前景，丰富和优化海鼎产品。

文/李亦多