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

这次发文搞错了，竟然先发在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设计的不一样，可能不会关注这些，但是还是有必要注意一下的。就是色彩变化和光线效果。。体现到界面上就是表格的表头：

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

 吐槽：真的是差别啊，看的我都恶心了。。。

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