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

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

相关推荐

  • 从Surface Studio聊一聊实体设备上的交互细节

    相信小伙伴们这两天的朋友圈基本躲不过微软大法的霸屏。作为工业设计背景的我,也是被它深深地impress到。所以今天我想来聊聊,实体产品上的交互体验。Handles are better for continuous control (e.g. trombone)
    “手柄”对于连续性的控制更加合适。
    Buttons are better for discrete control (e.g. piano keyboard)
    “按钮”对于状态有显著区别的控制更加合适。
    Handles leave you in control (e.g. opening a car door).
    “手柄”是将控制交付于用户手中。
    Buttons are more likely to trigger something automatic (e.g. opening an elevator door).
    “按钮”更倾向于触发一个自动化的过程。

    2017-05-16
  • 从GUI到CUI,谈谈智能时代的用户体验

    用户体验分为三个层面:有用性、易用性与美观性。有用性是用户体验的根基,美观性属于锦上添花,易用性则与用户对产品的“操作体验”直接相关。User:买一张明天去北京的机票,要国航的;五点前到达,尽量便宜。

    Bot:好的,查到CA XXXX航班,16:00到达,票价XXX元。来自携程。

    User:买了吧。

    Bot:好的。User:订一张明天去北京的机票。

    Bot:好的,还是国航五点前到的最便宜的吧?

    User:对的。

    Bot:好的,已经预定了CA XXXX,16:30到,XXX元。来自携程。

    Bot:另外这次要和上次一样预定当天的万豪酒店吗?

    User:订边上的汉庭,这次公司不报销。

    Bot:好的。User:我要去北京,定个明晚的酒店。

    Bot:好呀好呀,是否要订华贸的万豪酒店?

    User:订边上的汉庭。

    Bot:听起来好杯具,摸摸~

    Bot:话说“边上的汉庭”是什么酒店?

    User:#WTF……(关掉了应用)User:你可爱吗?

    Bot:很可爱呢~

    User:约吗?

    Bot:我们大约有20款车。(难免出现理解不到位的情况)

    User:#hhh果然很SB……User:你可爱吗?

    Bot:您好,这里是XXX汽车经销商,我可以回答你购车相关的问题。

    User:锐腾16款有些什么颜色?

    2017-08-04
  • 气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15
  • 总结:常见的4条用户体验误区

    近年用户体验的概念越来越火热,从事互联网人张口闭口就谈用户体验,用户体验的概念离我们每个人那么的近。但是用户体验是人人都可以做好的吗?答案是否定的,就像人人都是产品经理一样,能做产品经理的依旧是少数,把产品经理做好的更是凤毛麟角。本篇文章总结4条我遇到的用户体验误区。如果一个流程的信息量是12个单位。x*y=12(x=单位页面的信息量  y=路径深度)例如微信发朋友圈即使断网情况下,当用户在点击发送时,朋友圈立刻就显示数据,给用户反馈是动态发送成功,其实是假数据显示,在这个时候后台还在上传。断网场景极少,朋友圈这个设计满足绝大部分用户的操作顺畅,用户体验良好。不为了极少数使用场景而做真数据展示给用户,那样的话给绝大部分用户感觉加载过慢导致不好的体验。

    2017-04-29
  • 设计师的像素眼是怎样炼成的?

    传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,想要练就一双迷人的像素眼,除了常年累月的经验之外,还是有些技巧可以快速掌握的。今天分享7个像素眼的常用场合,按图索骥,用心观察,你也可以修炼成功!

    2017-06-02
  • [转]设计智能推送通知的要点|译文

    当你安装一款新的应用时,有多大比例是允许收到推送通知的呢?我已经被无数的推送通知搞烦了!我甚至有在凌晨被推送通知吵醒的经历!这怎能让我爱上那款应用呢!推送通知的逻辑应该更加智能化才是!本文就阐述了设…

    2016-07-15
  • 社会化分享按钮:一种糟糕的用户体验

    分享按钮被滥用了吗?“通过我们定期的分析,GOV.UK网址被分享到Facebook和Twitter共有14,078次——只占6,800,000总浏览量的0.2%。”“我们删除了FB按钮,Facebook的使用流量增加了。原因如下:用户在其时间表上分享来替代了“喜欢”文章。

    2017-05-03
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04
  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • 沃尔沃自主驾驶概念交互设计欣赏

    沃尔沃自主驾驶的概念交互设计来自设计师Keke Le用户调研 |  HMI设计 |  UE/UI设计 |  HMI培训  |  HMI评测  | 体验咨询

    2018-03-21