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

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

相关推荐

  • 优秀的移动端UI,应当如何用微交互打磨细节?

    你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘的产品,靠的是这一个个精致到位的细节堆出来的。

    2017-05-19
  • MacBook Pro 真机上手:Touch Bar 究竟是不是好设计?

    9 年前,iPhone 的诞生,多点触控开始成为一种全新的人机交互方式。 4 年前,当一票“超极本”不加思索地把触控移植到电脑屏幕上,时任苹果工业设计师的 Jonathan Ive 说: 多点触控放在笔记本的显示屏上……不太适合。…

    交互设计 2023-03-03
  • CDS Sketch Practise ! 今天教你画卡车!

    很多学员在一开始接触汽车设计的时候掌握不准比例的确,汽车的比例非常特殊抓不准比例草图非常容易走形我们之前的推送搬运过H-Point的车型比例讲解链接在文章底部掌握比例需要大量的练习如果你急于做项目可以先从比例易于掌握的卡车入手卡车侧视图设计手绘教程卡车的座舱可以视为一个大的体量相比较于其他车型更容易表达而且设计一个单体量车型的过程可以锻炼自己塑形和表达形体的能力是很好的汽车设计入门练习视频解析确定座舱的外轮廓用较浅的线条勾勒出来初步想法...

    2018-04-08
  • 【干货】学交互设计,毕业以后该做些什么呢

    大家对于交互设计有没有基本的认识,上一次的文章中给大家有过简单的介绍。平时和朋友同学之间再聊到交互设计,会觉得,交互设计都是app网站,但是随着科技的发展交互设计行业涉及很多方面,也有很多新的变化。所以在2018年之后,交互设计会有新的一些行业趋势。全感官体验因为未来找设计会越来越脱离我们所认知的app界面,会从app界面转移到其他的媒介上面去和其他设备上去做交互。全感官体验,因为平时我们都是从视觉上面去或者其他界面上做一个新的交互设计...

    2018-04-25
  • 未来所有的产品都要围绕人性去思考

    过去的记忆 回顾计算机和互联网的发展,计算机的编程语言从C语言开始,到C++,到最近的go语言,不断地进化,趋势是Code越来越接近人的方面,Code是从计算机端向人端的进化,计算机的编程语言也诠释了科技的发展,以…

    交互设计 2014-12-17
  • 现在!极限UI设计的时间到了

    毫无疑问,数字设计其增长突飞猛进超过过去五年和服务设计更是如此。合并用户体验、 客户体验、 交互设计和技术创新有助于更好,并协助组建健壮的规则、 模式和人民已经认识到的用户界面语言。然而,我不禁感到东西死了前进的道路。

    2014-12-28
  • 什么是交互设计?这篇文让你彻底弄清!

    达内UI设计,中国UID课程标准制定者通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽...

    2018-04-08
  • Sketchelp·2018暑期ACCD手绘造型工作坊

    今年暑期份的ACCD手绘造型工作坊又来啦!没错,主讲老师还是你们的E神。2013年,这个可爱的湾湾人带着他的一大摞手绘本来到大陆,二话不说就将自己在Art Center勤学苦练之所得倾囊相授,默默帮助了一届又一届的学生打开手绘大门。没脾气、没架子,却还是位高级汽车设计师。-有关 ArtCenter College of Design美国艺术中心设计学院(ARTCENTER COLLEGE OF DESIGN)坐落于美国洛杉矶的帕萨迪纳市...

    2018-05-03
  • 陌陌:不全面商业化 不伤害用户体验

    关注订阅号“电商大世界”,海量电商资讯文章打包阅读以下文章数据,由电商大世界 "AI-贝贝",采集、分拣,由编辑 北风整理发布。电商本周要闻:阿里慧聪两大人事变动阿里巴巴B2B事业群总裁戴珊接任速卖通阿里巴巴集团合伙人、B2B事业群总裁戴珊将直接负责全球速卖通业务,而原阿里巴巴全球速卖通总经理沈涤凡,将出任阿里健康CEO。据了解,全球化战略是阿里未来20年的三大核心战略之一。业内人士认为,戴珊此次接任速卖通业务,不仅说明以速卖通为代表的...

    2018-04-01
  • 你离用户的距离,只差一个好的体验

    研究表明,90%的用户下载的App只使用一次,然后就会删除。

    2017-05-18