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

苹果“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

相关推荐

  • 译文|一个好故事在用户体验设计中的力量

    “细心的观众/听众会很有可能会与这个故事中的人物的情感产生共鸣,并在故事结束后模仿这些人物的感情和行为。这也就解释了为什么你看了詹姆斯邦德拯救世界之后而产生的支配感觉,看了斯巴达300勇士之后就有了外出工作打算。”
    ——保罗J.扎克,经济学家“故事是激活部分大脑的唯一的方式,使听者把经验变成他们自己的东西
    一个单一的故事可以让我们的整个大脑工作。比较这个层级的参与,只阅读要点或无关的文本只能让我们大脑的某些区域工作。然后我们很快就忘记了这些信息,因为对于这些信息来说,我们没能联系到我们自己的经验,也没有积累任何情绪的连接”“精心设计的东西也不足以单独取得成功。整个生态系统及其相关交互点也必须如同产品本身一般被设计过,这也是可持续设计的要求”
    ——罗伯特布鲁纳,Ammunition Group创始人“许多商家其实已经发现在实际意义上讲故事的力量,他们已经观察到了一个精心构造的叙事是可以多么的令人信服。并且最近的科学研究也很好的阐释故事是如何在某些方面影响我们的态度、信念和行为。”

    2017-05-29
  • 3D Touch 会为 iOS APP 的交互和界面带来什么变化?

    知乎最新关于3D Touch的讨论 仪思奇,爱好摄影的软件工程师的回答 从官方的应用案例来看,有三个特点: 可以Press的元素一定可以Tap。 触发的界面大多是隐藏式的。 触发的功能大多是非刚性的。 第一点很好理解,因…

    交互设计 2015-09-14
  • 开始自己的建筑笔记 | Sketch Journal 作品展示

    大家是否在网络时常看到精美的建筑师手绘本?是否也准备打造一本属于自己的建筑笔记?今天为大家带来笔者大一阶段的Sketch Journal。笔记虽不算精美,但却是自己一年辛勤努力后的结果,它记录的不只是这一年的想法,更是自己一年的学习历程。相信这也是大家在不断完成自己的建筑笔记时最享受的一个过程吧。建筑笔记的几点心得:慎用大尺度手绘本!笔者本科第一年的Sketch Journal选择了A3尺寸,结局是很悲惨的。你需要付出比常人多的时间去完...

    2018-04-21
  • Sketchbox:会画图就能使用的AR建模应用

    在目前的情况下设计虚拟现实和增强现实产品并不容易,仍存在挑战。Unity和Epic Games可以说是现在比较常用的编辑应用,帮助用户以非常精确的方式去编辑虚拟现实内容。但需要指出,这两者都是为已掌握相关技术的人群所提供的技术项目,虽然没必要会写代码,但是了解一些简单的原理和技术能达到的界限也还是需要的,从这方面看,设计VR或AR产品的门槛相对还是比较高的。最近,Y Combinator的最新一期项目中的Sketchbox可以帮助设计师...

    2018-03-23
  • 一个精美的手机的原型怎么产生的-第二集

    阿西录了下视屏尝试下最直接的方式 ,你看着阿西怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-2 在线播放! 第二集: 第一集下载地址:点我点我 第二集下载地址:点我点…

    交互设计 2014-09-06
  • 谈谈人类学民族志这一高端用研方法

    前几天参加起点学院的“产品总监修炼之道”北京站培训,K叔的用户研究课程中提到了“人类学民族志”这一“很上流”的用研方法,由于时间关系老师当时并没有展开来说,只是讲了一个小小的例子。正好我对民族研究也很感兴趣,最近又读了一本《我的凉山兄弟》,也就不揣冒昧来谈一谈人类学民族志这一高端用研方法。不妥之处,还请各位指教。

    2017-05-24
  • 网页设计中的极简风格—无的力量

    作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

    2017-05-25
  • Material design 这20个大牌应用已经用上了!

    自从去年google在android新版本Lollipop提出的material design概念后,在世界各地疯狂地掀起一阵material design热。Material design不仅看起来令人惊叹,也是一个前所未有的设计理念。不仅对设计师的影响深大,对…

    交互设计 2015-08-26
  • 用户体验提升才是“蔚来”

    nEqual 是业界领先的赋能“智慧商业”的数据智能技术提供商,是精硕科技集团下专注数据技术的事业部。nEqual以数据和技术为支撑,为企业实现营销自动化、智能新零售、AI人工智能等“智慧商业”模式打造和运营,帮助企业提升营销体验、销售体验及服务体验等全面的超级用户体验,进而助力企业构建可持续发展的商业竞争力。近年来,人工智能迅速占领大家视野,虽然业界已经探索了几十年,但近五年来才开始飞速发展,这得益于数据和技术的进步。近日,朋友圈被蔚...

    2018-01-30
  • 我的设计流程|学会这3招,跟反复改稿Say No!

    设计师要想摆脱反复改稿的噩梦,自身就必须要更加专业以及见多识广,要么你能选择去跟一群专业的人共事,要么是你能用你的专业引导或配合别人按你的思路走。

    2017-05-15