QQ Live 大界面改版背景
左右分体模式使得播放器和视频库均受到限制,视频库尺寸小,用户找片不方便。
QQ Live原来版本为分体式左右两个模块结构(播放器宽565,视频库宽490,总高511)占据分辨率为1280×1024的屏幕不足50%的空间。
一、四种用户场景
二、尝试设计方案稿
我们尝试了几个配色方案之后,最终确定了采用含有Logo品牌色的暖色调的配色方案。整体皮肤为深色,是保证用户在观影的时候图像周围有一个安静稳定,无干扰的环境,让视线只专注于影片。
最终方案效果:
三、看片与找片的切换表现
我们尝试了几种切换表现方式,来探索更加理想的看片和选片的方案:
方案一 借鉴电视节目的画中画方式
方案二 button/tab的切换方式
四、尝试的几种播放控制条方案
第一种是形式独立于窗体的浮层式控制条,带有半透明效果,在鼠标停留在画面上一段时间的情况下才出现,鼠标离开响应区域后则自动消失。这样的处理方式使的播放控制区域面积小,比较轻盈和有灵动;不过这种浮层式的最好有一定的透明度,但这在XP系统下比较难以实现;
第二种是类似Windows media player的播放控制方式,这里通栏的进度条能让用户对影片进行精准的控制和定位,但是这种进度条和控制按钮分离,控制按钮独立浮层的方式在画面上看起来会稍显零乱;
第三种方式是现在选定的方案,继续延用了原来的方式,窗口底部的控制bar和顶部的head bar上下呼应,使播放器整体感更强,而且控制按钮在实体的bar上,当窗口拖拉缩放时它们的位置变化会给用户有一个稳定的心理预期。
五、宽屏尺寸的确定
根据现在用户各分辨率显示器的使用比例,经讨论决定视频库窗口选取最主要一些分辨率屏幕的大概80%宽度,根据多个分辨率型号的显示器进行平均计算,得出一个宽度值是998。
另外想到我们Live的官网页面内容的宽度为960,上面计算的宽度为998,相差不大,如果我们视频库大尺寸宽度选960那视频库内嵌页面几乎可以调用官网现成的资源使用,节省大量投入。然后考虑视频库内嵌页面960的 宽度,右边还有15pixel的滚动条以及窗口边框厚度,(此外还参考RealOne 、iTunes、Zune、PPs 等一些产品的默认尺寸都为1000pixel 左右的大界面),所有考虑宽度定为980;但是另外那39% 分辨率1024的用户980的宽度会觉得充得太满,不过还考虑到1024以上分辨率的用户占到了50%以上,而且用户显示器分辨率使用的趋势是越来越大的,这个更新速度现在也很快,所以适当超前一点的设计也是可以的。
六、在Windows7下的系统窗框的尝试效果
这次QQLive更换大界面是一次很重要的改版。在设计前,我们列出了用户每一项操作的步骤以及使用场景清单,并根据清单进行了焦点小组讨论,集思广益,在众多的解决方案中寻求平衡,在平衡中挖掘亮点,找到最优方案。大到切换模式、按钮形式、列表样式、信息弹出窗的内容,小到对按钮位置、数量以及冒泡的停留时间都做了相应的设计规划,进而才投入设计,并在一次又一次方案中不断优化打磨,最终成型。最终成果是项目团队成员共同倾力付出的结晶,这里诚邀大家参与体验,希望大家一如既往的关注QQLive、提出您的建议,伴QQLive继续成长。