微音乐是新浪微博的基础功能型产品，为用户提供基于微博的音乐服务，基于用户关系的音乐互动服务；为音乐人提供上传、分享作品的渠道、帮助音乐人推广自己的作品。

微音乐包括两部门内容：
全球首发：艺人发新歌打榜的地方,他们把自己的音乐第一时间在这里发歌，用户第一时间在这里听到新歌 ，同时还能跟艺人进行小互动。
音乐盒： 电台+音乐盒。可以根据用户的喜好推送符合口味的音乐，也可以搜索自己喜欢的歌曲制作自己的专辑。

刚看到首发音乐UE的时候会发现与其他音乐网站并无它异。有导航，有播放器，有banner，有好友的feed，还有专辑列表。

先不着急开工，无论是产品交互还是视觉，在设计网站时都要首先解决掉下面这三个问题：

1.这是一个什么网站？（logo、标题、banner的说明）
2.对我有什么用处？（明星的吸引，兴趣爱好的驱动）
3.我该如何使用？（引导流程清晰）

如果网站在首页解决上面三个问题，在使用上基本是合格了。其实这些问题既是自己动手设计前的思考，也是帮助产品和交互去梳理。多多沟通，多提问题，会大大减少返工的几率。在动手设计之前越多的问题被解决，设计的效率就会越高。

扫除一系列问题障碍后，就要开始思考视觉的问题来：这个网站应该是给用户什么感觉？基调是什么？气氛是什么？

当我们做一个全新设计的时候，视觉模型有时会起到关键的作用。从一个准确的模型中，我们可以提炼色调，气氛，和质感。

那音乐网站应该是哪样的呢？

它可以是这样的：蓝天绿草，闭上眼睛，静静的聆听音乐。小清新，应该就是这个感觉。

同时，它也可以这样：紫色，红色，蓝色。多彩绚烂的灯光，演唱会high翻的气氛，万人之上享受欢呼的舞台感觉。

两种模型，两种完全不同的气氛。对应出下面两种风格的草稿。

一个是小清新，一个更突出氛围，配合“全球首发”的概念，下面的感觉更适合一些。继续细化，把banner更加突出，移开比较冲突的播放器，重新梳理布局，终稿基本就是如下这个样子了。

说完首发音乐，再说说微音乐下领一个一脉相传的产品：音乐盒。

对于音乐盒，产品的要求就是：简洁！突出大封面的优势！

布局上说，微博音乐盒更像是一个介于GUI和webUI的产品。上部分的播放器类似桌面客户端的播放器，下部分的结构又更像web上的操作布局。

如何把两部分结合起来，如何跟当前主流的音乐盒做出差异化，是我们微博音乐盒要解决的问题。
先看下周围的同类产品：

总结下规律就是：简单，而且基本都是以浅色白色为主。

或许我们可以尝试下的黑色风格~~

和白色相比，使用黑色有几个优势：深色可以烘托出播放器的气氛，质感表现上也更加容易。其次对于各式各样的封面既能突出还可百搭。

现在越来越多的网站和界面都或多或少用一些仿生设计，音乐盒也尝试在这方面做了一些尝试，比如背景的布纹效果处理，简单的点缀让整个设计显得赏心悦目同时又不失简单。

还能再多点什么？

其实音乐盒设计到这里应该基本算完成了，但是在设计完成后总觉得可以再多些有一些锦上添花的惊喜。刚刚说到了仿生设计，于是又从音乐这两个字着手，看看有没有可以提炼的元素。

提到音乐我们可以想到什么？乐器？磁带？音符？CD？还是。。唱片？

加入唱片的元素是个好主意~ 老唱片的古典和DJ唱片的时尚绝对是一个很好的概念，再加上唱片本身的造型刚好可以和播放器做一个结合，用唱片转动来表示播放的状态。再加上其他的歌单分类搜索等内容，大功告成。

好吧，以上就是微音乐的完整设计过程。多观察，多思考，是我们每个视觉师必备的能力~也许灵光就在一瞬间出现。：）