关于微博中的用户体验提升的点滴

最近在家天天都在做自己的毕业设计——Flowg微博系统。

先献丑放出一张系统的logo，自己用PS的钢笔做出来的（能说出这个logo的意思的有奖！呵呵，玩笑）

 

好，接下来进入正题，对于微博中的一些用户体验的提高写一些感想，这次的毕业设计的前端部分全部是自己用jQuery库+自己编写的插件实现的。在做系统之前对新浪微博，TX微博还有淘宝的掏浆糊进行过体验。

总结出几点需要实现的。

今天我想说的是体验中的视觉就近原则：

 

在TX微博和新浪微博中都可以看到点击删除按钮时的情景：

 

 

 

上面的confirm框是比较好的体验，体现在两个方面：

其一是鼠标焦点就近；

其二是用户视觉焦点的就近；

 

上述的两点便是我想说的就近原则的核心体验原则。

 

 

而上面的收藏成功toast框也是遵循了视觉的焦点就近的原则。

 

以前很长一段时间都是用JavaScript自带的confirm控件，而再后来则是通过js库控件产生的仿JavaScript自带的confirm，如下：

 

 

上面的是jAlert控件，通过在document节点上增加一个coverdiv达到用户不能操作除了confirm框以外的东西的目的，这种方式确认有两个局限：

其一是在用户做决定的时候限制用户的行为，这种实际上体验极其不佳；

其二是该confirm框与触发action的按钮可能距离过远，鼠标移动距离过大

 

综上述TX和sina的体验是不错的，实现阶段可以采用jQuery插件解决，推荐一款国人开发的浮动框插件jPowerFloat

(http://www.zhangxinxu.com/wordpress/?p=1328)感谢鑫旭同学提供该插件。

 

 

下面还有个就近原则的实例，是我的淘宝中的健康生活助手这项功能（http://i.taobao.com/third/app.htm?appKey=12165740）

 

里面的健康测试是一个比较有意思的体验组件：

 

 

每次答完一题，这个frame会往下滚动大概一题的高度，这样用户不必下拉滚动条就能在刚才的位置继续答题，这个体验的确很不错，实现的话是通过scrolltop和height来控制滚动，有兴趣可以做一下。不过我发现这个组件的height可能是定死的，到后来加入题目很长，会有焦点跑开的现象。

 

接下来在说一下相关的也处于就近原则的自主滚动的组件——淘花网首页（http://hua.taobao.com/）：

 

 

 

可以看到点击这三个按钮时页面会往下滚动，区别于锚点定位，这个过程不是瞬间完成的，而是一段加速减速的过程，带来用户体验就明显会提升，用户鼠标的焦点始终在三个按钮区域，同样体现了就近原则的两点。

 

 

好了，今天说的都是我作为一个普通体验用户从一系列网站中的体验的感想，对以后的UED工作也有一定的启发与帮助。