现在的位置: 首页 > 综合 > 正文

由【酷狗音乐】所联想到的C/S界面设计

2012年04月18日 ⁄ 综合 ⁄ 共 2263字 ⁄ 字号 评论关闭

这次发文搞错了,竟然先发在QQ空间了,导致所有的图片都挂了。。这里是QQ空间的地址:http://user.qzone.qq.com/87723501/blog/1337499163

进销存系统,是我有史以来做的最认真的一套系统。不管是界面还是操作,都有一定的亮点。算是一个可以拿出手的作品。不过日子久了,看着同一个界面也觉得单调。玩了几天的安卓手机,发现安卓之所以流行,还是有其一定的道理的。使用酷狗听音乐也有一段时间了,感觉酷狗的界面做的也是很不错的,用户体验也很棒。简单分析一下,便有了此文。

 
首先看看酷狗的默认界面:

图片

页面的总体颜色是蓝色。是那种天蓝色。这个很好解释,算是比较经典的颜色。包括Windows,360,QQ等,都是以蓝色为默认颜色。经典耐看。

页面的主基色:蓝色,白色,黑色。主体布局是左右,然后左后又各分成了上下。其中,上部分的高度是固定。

页面入眼,感觉是WindowsPhone7的风格。窗体上的底部的状态栏,是不是和WindowsPhone7上的菜单栏很像呢?

总的来说,酷狗音乐的风格和以iPhone为代表的炫彩派格格不入。他是微软派。界面中能找到一些windows8的影子。比如,他的设置界面:

 

图片

这个是Windows8的设置界面

 

图片

可以看到,色沪指选项导航都被设计到了左侧,而且所使用的颜色不是很多,但是具有很强的突出性。

有很长一段时间,我总是以为,圆角比直角好看。就像,iPhone的图标是圆角的,他一定比WindowsPhone7的“Metro”风格好看一样。不过,后来我觉得自己错了,其实,使用直角,如果你能处理好阴影的话,还是会比圆角好看的。

图片

直角的酷狗,是不是和圆角的QQ不相上下呢?如果这点对比不出来,咱们看看iPhone和WindowsPhone7的对比:

图片

图片的清晰度不是很高,先将就着看吧。很明显,WindowsPhone的“瓷砖”界面的表现力比圆角加tag的表现力要好的多了。

 

作为一个开发人员,经常遇到的问题,就是数据分页,毕竟,如果有上万条数据的化,不管是B/S架构的软件还是C/S的软件,都会遇到这个问题。经常性的做法就是,做一个分页控件,就像是这样:

 

图片

这样做,并没有错,可是你回忆一下,在你使用QQ空间的个人中心时,有没有见到这个东西呢?

在QQ空间中,使用的是“瀑布加载”(暂且这么说吧,也不知道对不对)。意思就是说,这个分页控件不再存在了,当你把数据浏览到将近完成的时候,自动加载下一页的数据。所使用的技术就似乎ajax了,其实这个技术也可以用在C\S架构的软件上,比如,酷狗是这样做的:

 

图片

在浏览到最后一条时,将出现加载中,请稍候字样。如果数据加载完成,那么这一栏就会消失。如果到了最后一行,就会这样:

图片

吐槽下:《我相信》这首歌太流行了。。。

这是一个很棒的用户体验,不用翻页,上一页的信息也不会丢失。 感觉很流畅。

不过,这样也会有一个问题,就是说,如果有新数据了,可定是排在第一页的,但是现在列表已经加载了,这时候可能已经加载到了第三页,第四页,怎么办呢?

腾讯的处理方式,是在列表的顶端做手脚。如果有更新时,就在列表的顶端显示一个:“有xx等几位好友更新日志,点击查看。"如果你点击的化,数据就会从第一页重新加载。就像这样。。。

 

图片

 

在酷狗上,我没有找到对这种情况的处理方式,可能是软件设计者认为,数据更新的不会很频繁吧,所以就没有设计。

其实,在安卓上,早就有了解决方法:“下滑刷新”。

在手机操作中,如果采用”瀑布式数据加载“,我们使用手指上划来查看更多数据。程序自动加载下一页的数据。当有更新时,无论你如何上划,只能看到越来越老的数据。想看最新的怎办呢?很简单,下滑就行了。通过手指下滑,我们来到了第一页数据。再继续下滑,那么列表就会刷新。。效果图?没有。。。你装一个淘金殿堂看看就知道啦。。

 

在很多时候,我们会有对记录的删除操作,经常性的做法就是给某一个数据行添加一个删除按钮。。

 

图片

这样的做法,其实不是太好,如果使用的系统不一样的化,所呈现的效果是不同的,比如,在win2003下可能是这样:

图片

除了丑陋,就是丑陋。虽然,可以使用第三方控件来弥补这一点。但是有些软件有明文规定:不允许使用第三方组件。(二炮,航天测控。。)

那要怎么办?很简单,用图片代替之!效果就是这样:

 

图片

当然,如何实现,还在研究中。。。。

有了删除,那么批量删除神马的就必不可少了。一种方式是将删除按钮放在表头:

 

图片

酷狗的做法是放在了与之对应的状态栏上:

 

 

图片

这个,哪个好那个坏就是一个仁者见仁,智者见智的问题了。不讨论。 

关于底部统计行,说实话,DotNet做的并不好。可以说非常差。原生的不支持就算了,连扩展的控件都相当的挫。。。(这是我遇到的最头疼的问题)。

 

如果使用了“瀑布加载”的话,可能会有改变,可以把统计信息在最后显示。就是在没有更多数据的时候。

 另外一个,就是要实现hover效果,按钮,数据行,甚至图片。。那样的话,效果就会非常nice!

列表hover:

 

图片

按钮hover:

 

图片

 最后一个是关于搜索框的

 

图片

这个,我实在是不敢做点评,确实太强大了。也使用了windows8的风格。

再说一点,就是细节和配色问题。当然,我们搞开发的跟搞UI设计的不一样,可能不会关注这些,但是还是有必要注意一下的。就是色彩变化和光线效果。。体现到界面上就是表格的表头:

 

图片

 可以看出,表头的各个单元格之间的分割线不是一条线拉到头的。。。

 

图片

 吐槽:真的是差别啊,看的我都恶心了。。。

今天就这样啦。。。转载请注明哦,韦氏原创哈。。。

 

 

 

抱歉!评论已关闭.