实验性项目IMIS系统(类WebQQ)

去年(2011年)还在波特集团深圳总部上班的时候,负责研究过公司集成管理信息系统(IMIS)的交互和用户体验,今天决定写下来,平时忙于工作,很少抽时间写这些东西,从现在开始,抽时间好好整理一下,当是总结吧!IMIS管理系统有点类似腾讯的WebQQ,这里是一个简单的原型:http://blog.luozhihua.com/imis/desktop/login.html,有兴趣的朋友可以看看。

原来的IMIS系统开发完成于早些时候,已经使用过几年,浏览器兼容性及用户体验比较差,那时候我还没有加入波特,进入波特的时候还有些让人回味的,承蒙波特集团当时的技术总监蒋士军蒋总错爱,没经过复试直接让我第二天就过去上班了,记得蒋总当时是这么说的:“是骡子是马,拉过来溜溜就知道你是不是牛了!”说来挺幸运的,因此后来才让我有机会从事此项研究。

公司的产品团队人员配置不完善,一个产品的诞生就是依靠产品、设计狮、前端攻城狮和运营在一起头脑风暴,再到原型,到设计,到交互实现、后端实现,没有独立的用户体验和交互设计岗位,所以很多相关的工作都由产品策划和前端代替了(我是前端),不过那段时间学到的东西非常多,对用户体验的认识更加广泛和深入。

对于IMIS的研究,其实主要是用户体验和交互上面,用户体验存在的一些不足之处非常多,界面设计不友好、交互流程繁杂无序、对主流浏览器兼容性不够等等方面,用户体验的优化也重点从这些方面着手,重新设计界面、梳理流程、解决兼容性问题是最主要的工作;

而交互效果上面用到了相当多的CSS3的效果,这是一个非常令人关注的地方,比如CSS3动画、CSS 3D变幻,在支持CSS3标准的浏览器里面浏览效果还是非常绚丽的,CSS3的动画效果很多网站都有用到,比如QQ空间的时光轴,在滚动页面页面时右侧的年龄显示的渐入淡出效果就是通过CSS3的动画+文字阴影实现的,效果如左下图;Qzone时光轴右侧年龄显示效果

而CSS 3D变幻效果的应用相对比较少看到,这可能主要是浏览器对3D支持不一致,实际应用还不太成熟,各浏览器下的变换效果有差别或支持不完整,3D变幻的矩阵计算在执行动态变化时存在比较大的差异,特别是IE10下的效果显得很僵硬的感觉,同样的数值,在不同浏览器的表现也大相径庭,以前个人认为随着HTML5的逐渐普及,各浏览器会慢慢的统一标准,但是现在看来似乎比较困难。

回到正题,对于3D效果,Web QQ在Chrome下面的屏幕切换时是有3D效果的,但是也不是很逼真,效果可以使用最新版的Chrome登录Web Q+浏览,点击页面顶部中间的1、2、3、4、5中的任意一个,切换效果就是3D的。

下面就着重讲一下CSS 3D在IMIS项目中的应用,IMIS内的交互很多都用到了模拟弹窗,弹窗的显示和关闭就用到了3D效果,IE10+及其他主流浏览器都得到了支持,类似于翻转的效果,大致效果如下图。

此外,IMIS的主界面小应用支持划选、拖动等操作,拖到底部回收站可删除、拖到菜单栏可打开、拖到分屏链接上可自动切换到对应的分屏,支持IE7+/FF/Chrome/Safari/Opera, 支持部分Android端浏览器,iOS系列设备未详细测试,这些功能不一一详叙,有兴趣的可以在我之前留下来的一个高保真原型看到效果,这里是原型地址: http://blog.luozhihua.com/imis/desktop/login.html ,因为是静态页面,用户名和密码可输入任意字符,不为空就行。下面附上一些页面截图:

登录界面:

登录等待界面:

右键菜单:划选操作:划选操作

拖动操作:拖动操作

沟通工具:沟通工具

个人资料设置:个人资料设置

添加应用到主界面:添加应用