当前位置:主页 > PS教程 > 设计教程 >

微音乐网页界面设计

  • 2012-05-16 13:39
  • 来源/作者:站酷/微博UDC
  • 己被围观

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

 

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

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

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

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

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

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


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

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

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

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

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

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

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


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

对于音乐盒,产品的要求就是:简洁!突出大封面的优势!

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

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

 

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

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

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

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

还能再多点什么?

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

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

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

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

最后呢,希望大家多多支持微音乐,地址在此 http://ting.weibo.com


(责任编辑:PS家园网)

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

分享到:

标签(TAG)

更多精彩内容

  • 电商产品PS修图:金属质感 电商产品PS修图:金属质感
  • PS打造变换颜色中特效汽车 PS打造变换颜色中特效汽车
  • PS制作一款科技感的立体插 PS制作一款科技感的立体插
  • 图文排版设计的8大神奇法 图文排版设计的8大神奇法