百度、虾米、音悦台网站交互设计浅析

苹果“Mac之父”Jef Raskin曾经说过：“对于消费者而言，界面就是产品。”界面是用户体验我们产品最直观的接触。把界面做好，将极大的提高用户使用我们产品的愉悦感。所以我们长期以来都在不断追求界面设计的进步，以期在众多的相似产品中脱颖而出。下面我将通过对目前排名比较靠前的几家音乐网站界面做一些简单的分析，阐述一些我对于交互设计的感悟。

站长网排名前三的国内音乐网站分别是：百度音乐，虾米音乐，以及音悦台，我将从页面的简洁性，美学性，色彩搭配以及细节处理几个方面进行分析。

百度音乐：

简洁性：★★

页面过多的不必要的内容堆砌，例如客户端的二维码，中间的广告以及百度搜索框，使整个页面给人杂乱的感觉。过多的文字堆砌而成的音乐分类，似乎还停留在传统网页的水准上，使得界面显得很密集。

美学性：★★★

页面使用了**金分割的布局结构，也采用了现在十分流行的扁平化设计，加上推荐音乐的小动效，美学性倒也有几分讲究。

色彩搭配：★★

小编并没有看出有什么明显的色彩搭配设计，主要是契合百度整个色彩的调调。

细节处理：★★

小编并没有发现什么特别好的细节处理，百度推广无处不在倒是真是让小编很反感。

虾米音乐：

简洁性：★★★

虾米音乐相比百度音乐来说没有一堆文字的堆砌，密集感没有了。色块与色块之间通过留白的方式进行区分，效果还是很不错的。但是色块偏小，色块较多，没有一种大气简约的感觉。

美学性：★★★★

虾米音乐也是使用的**金分割的布局结构，集中在屏幕中间两边留白，主要是这样可以集中用户的视觉，抓住焦点。卡**式的色块分布很符合现在的流行趋势，也是现在最重要的模块设计思想之一。

色彩搭配：★★★★

页面虽然没有大面积使用橙色，但是整个页面给人的感觉确实以暖色调为主，人们习惯先入为主，在颜色的整体性上面还算是做得不错的。橙色的波长居于红和**之间，是十分活泼的光辉色彩，是最暖的色彩，给人以华贵而温暖、兴奋而热烈的感觉，应用于音乐网站，还是**比较迎合用户的心情的。

细节处理：★★★

界面是产品与用户的交互，细节是能够很打动用户的，虾米音乐有一个细节我很喜欢。

今日音乐人这个小卡**的形式非常的俏皮可爱，每一天的图**都处理得非常精美，感觉就像虾米音乐每一天都送给你一张漂亮的明信**一样。“听完吱一声”，有没有萌萌哒。

音悦台：

简洁性：★★★★★

音悦台的界面设计算是国内设计得比较好的。一张大图作为背景，整个界面显得十分的简洁，不仅具有很强的视觉冲击力，还对网页的内容作了非常好的补充，而大背景这种设计手法在国外的网站运用是很普遍的。页面通过留白的方式区分板块与板块，显得很干净

美学性：★★★★

垂直滚动式的页面展现方式，用户在使用的时候很方便，这迎合了移动端的发展，同时在美学上也有很好的表达。整个界面浑然一体，从上到下保持着一样的风格，每一个板块分类也做得很分明，具有相当好的一致性和整体性。这样的设计能够让用户对你的网站印象深刻，甚至不需要刻意去记忆，我们就能够记住音悦台的网页结构是怎么样的，完美的塑造了品牌效应。

色彩搭配：★★★★

黑色和绿色搭配的色调设计。绿色是柔美的自然之色，黑色是沉稳之色，两者结合网站的色调显得稳重而柔美，清新而高贵。让用户有一种平和的心态，很宁静，很舒适。

细节处理：★★★★★

萌萌哒的直到顶部设计

因为是采用的垂直的网站分布结构，所以用户可能**下拉到很下面，在下拉到一定位置的时候这个可爱的小吉祥物就**出现啦，我们在需要的时候请求它的帮助就能够立即回到顶部，是不是**级可爱呢？

用户体验极好的登录验证码

http://www.geetest.com/

音悦台使用的是近段时间比较火的极验验证推出的滑动验证码，用户只需要拖动滑块完成拼图就可以了，验证完成时间只需要不到两秒。不仅美观而且方便的极验验证码是不是显得音悦台对待用户的心格外真诚呢？

通过上面的分析，小编给大家总结一下几点：

1. 如何能够设计出简洁精炼的网页呢，采用现在流行的扁平化设计，通过简单的图形，文字和颜色的组合，去除冗余厚重而繁杂的装饰，来达到直观而简洁的设计效果。例如我们可以在网站使用大背景，不仅能够达到很绚丽的效果，如果图**能够选取的好还能够非常准确而深刻的向你的用户表达网站的主题。大标题也是一个不错的选择，简单而大气的文字效果，能够集中用户的注意力，同时这样并不**让你的网站看起来密密麻麻的。
2. 卡**的模块表达方式似乎是现在非常受欢迎的一种，这要得益于移动互联网的普及。卡**式设计能够让我们的网站更加有序，图**的放置不是凌乱的而是整齐有序的，这样也使得我们网站的易读性增强了，用户可以通过浏览图**很容易找到他们喜欢的内容。通过研究发现人们在浏览网页的时候更加喜欢图**多过文字，图**通过卡**式的设计方式呈现给大家能够非常有效的提升用户体验。
3. 我们知道颜色是可以直接影响用户的情绪的，红色代表热烈，**色代表温暖，橙色很活泼，黑色很沉稳，绿色很自然，灰色很安静，白色很纯洁。单色调背景，通过阴影和颜色的深浅变幻能够让页面具有流动性的美。绚丽夸张的色彩能够带来很强的视觉冲击力，同时让网页充满了艺术气息。想让你的网站呈现给用户一种怎样的感觉，就需要认真去考虑应该使用什么样的颜色搭配。
4. 通过对细节的处理我们可以让用户体验到网站背后的设计人员的用心之处，那么投桃报李，用户则**更加忠诚于我们的网站。细节是需要在生活中去发现和积累的，比如上面可爱的吉祥物引导，或者换上极验验证的滑动验证码这些细节都是可以借鉴的。

本文由 @颜小菲 原创发布于人人都是产品经理 ，未经许可，禁止转载。