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

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

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

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

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

百度音乐:

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

简洁性:★★

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

美学性:★★★

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

色彩搭配:★★

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

细节处理:★★

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

虾米音乐:

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

简洁性:★★★

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

美学性:★★★★

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

色彩搭配:★★★★

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

细节处理:★★★

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

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

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

音悦台:

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

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

简洁性:★★★★★

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

美学性:★★★★

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

色彩搭配:★★★★

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

细节处理:★★★★★

萌萌哒的直到顶部设计

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

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

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

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

http://www.geetest.com/

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

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

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

 

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30471/

(0)
CatherineCatherine
上一篇 2017-05-28 23:51
下一篇 2017-05-29 01:49

相关推荐

  • 交互设计师的60日计划之第一天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 线上广告更加吸引人的5个思路

    今天说讲述的5个思路是不同的,内容决定设计,留白,故事都和这种填鸭式的广告不是一个路子。而线上广告和传统广告最大的不同在于,它可以创造体验。

    2017-05-04
  • 一个至今没做出靠谱好产品的产品经理是这样活着的

    本文来自一位女性PM,她自称X小姐,08年开始入行折腾 我是一个没做过成功产品的产品经理,至今负责过的项目并不少,但不是夭折就是已经奄奄一息。我不是王兴,不是张小龙,不是老罗,更不是乔布斯。夜深人静的时候…

    交互设计 2014-12-24
  • 这7个趋势,也许是2017年电商用户体验设计的关键

    沉浸式体验,虚拟助手,个性化的购物体验,这些都是未来的购物方式的进化方向,影响用户购买的因素更加复杂,而大数据则能够在各个不同的环节帮助电商从业者预测用户的行为与口味。所有这些因素都和用户体验相关,同时,它们也意味着,电商行业任重而道远。

    2017-05-13
  • 三八XX节专题页设计该怎么玩?看这篇就够了!

    在本文中,作者将带大家看下,那些围绕着妇女节的专题页面可以怎么玩?一起来look~look~

    2017-05-07
  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 【用户体验】机器人教练:第三季!

    【本文转自:哈尔滨腾达集团驾校】WELCOME TO TENGDA我们的腾达欢迎来到腾达驾校机器人教学活动已经举办了两期,机器人教学俨然已经成为了一种时尚热潮,同时也在学员中树立了良好的口碑,学员反响热烈,有越来越多的学员通过此次活动认识了机器人教练,并且想来体验一下机器人教练的庐山真面目。近一周的科二学习,可累坏了学员们、也累坏了教练。在此对大家说一句:大家辛苦了!经过几天风吹日晒,我们的科二学习已经正式接近尾声,本周最后一个科目的练...

    2018-04-23
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 多款智能手表的对比

    终于 Apple Watch 将要在下个月上市了。在目前还不知道这款产品售价的情况下,相信设计会成为不少消费者朋友选择产品的重要标准之一。Apple Watch 已经获得了 iF 设计金奖,不过可能有人觉得这无法令他们信服,他们…

    交互设计 2015-03-10
  • 字体的性格【转】

    任何字体都有其独特的风格,有的让人感觉现代、古典;  柔美、刚毅; 迅速、缓慢;  稳重、轻盈… 在设计时,通常为表达某种情感而选择字体。对字体情感的产生是因为对某种字体的内在韵律,而产生的视觉反应。 另外,…

    2014-09-18