童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

2月22日 拭朱砂投稿
  苹果“Mac之父”JefRaskin曾经说过:“对于消费者而言,界面就是产品。”界面是用户体验我们产品最直观的接触。把界面做好,将极大的提高用户使用我们产品的愉悦感。所以我们长期以来都在不断追求界面设计的进步,以期在众多的相似产品中脱颖而出。下面我将通过对目前排名比较靠前的几家音乐网站界面做一些简单的分析,阐述一些我对于交互设计的感悟。
  站长网排名前三的国内音乐网站分别是:百度音乐,虾米音乐,以及音悦台,我将从页面的简洁性,美学性,色彩搭配以及细节处理几个方面进行分析。
  百度音乐:
  简洁性:
  页面过多的不必要的内容堆砌,例如客户端的二维码,中间的广告以及百度搜索框,使整个页面给人杂乱的感觉。过多的文字堆砌而成的音乐分类,似乎还停留在传统网页的水准上,使得界面显得很密集。
  美学性:
  页面使用了黄金分割的布局结构,也采用了现在十分流行的扁平化设计,加上推荐音乐的小动效,美学性倒也有几分讲究。
  色彩搭配:
  小编并没有看出有什么明显的色彩搭配设计,主要是契合百度整个色彩的调调。
  细节处理:
  小编并没有发现什么特别好的细节处理,百度推广无处不在倒是真是让小编很反感。
  虾米音乐:
  简洁性:
  虾米音乐相比百度音乐来说没有一堆文字的堆砌,密集感没有了。色块与色块之间通过留白的方式进行区分,效果还是很不错的。但是色块偏小,色块较多,没有一种大气简约的感觉。
  美学性:
  虾米音乐也是使用的黄金分割的布局结构,集中在屏幕中间两边留白,主要是这样可以集中用户的视觉,抓住焦点。卡片式的色块分布很符合现在的流行趋势,也是现在最重要的模块设计思想之一。
  色彩搭配:
  页面虽然没有大面积使用橙色,但是整个页面给人的感觉确实以暖色调为主,人们习惯先入为主,在颜色的整体性上面还算是做得不错的。橙色的波长居于红和黄之间,是十分活泼的光辉色彩,是最暖的色彩,给人以华贵而温暖、兴奋而热烈的感觉,应用于音乐网站,还是会比较迎合用户的心情的。
  细节处理:
  界面是产品与用户的交互,细节是能够很打动用户的,虾米音乐有一个细节我很喜欢。
  今日音乐人这个小卡片的形式非常的俏皮可爱,每一天的图片都处理得非常精美,感觉就像虾米音乐每一天都送给你一张漂亮的明信片一样。“听完吱一声”,有没有萌萌哒。
  音悦台:
  简洁性:
  音悦台的界面设计算是国内设计得比较好的。一张大图作为背景,整个界面显得十分的简洁,不仅具有很强的视觉冲击力,还对网页的内容作了非常好的补充,而大背景这种设计手法在国外的网站运用是很普遍的。页面通过留白的方式区分板块与板块,显得很干净
  美学性:
  垂直滚动式的页面展现方式,用户在使用的时候很方便,这迎合了移动端的发展,同时在美学上也有很好的表达。整个界面浑然一体,从上到下保持着一样的风格,每一个板块分类也做得很分明,具有相当好的一致性和整体性。这样的设计能够让用户对你的网站印象深刻,甚至不需要刻意去记忆,我们就能够记住音悦台的网页结构是怎么样的,完美的塑造了品牌效应。
  色彩搭配:
  黑色和绿色搭配的色调设计。绿色是柔美的自然之色,黑色是沉稳之色,两者结合网站的色调显得稳重而柔美,清新而高贵。让用户有一种平和的心态,很宁静,很舒适。
  细节处理:
  萌萌哒的直到顶部设计
  因为是采用的垂直的网站分布结构,所以用户可能会下拉到很下面,在下拉到一定位置的时候这个可爱的小吉祥物就会出现啦,我们在需要的时候请求它的帮助就能够立即回到顶部,是不是超级可爱呢?
  用户体验极好的登录验证码
  http:www。geetest。com
  音悦台使用的是近段时间比较火的极验验证推出的滑动验证码,用户只需要拖动滑块完成拼图就可以了,验证完成时间只需要不到两秒。不仅美观而且方便的极验验证码是不是显得音悦台对待用户的心格外真诚呢?
  通过上面的分析,小编给大家总结一下几点:
  如何能够设计出简洁精炼的网页呢,采用现在流行的扁平化设计,通过简单的图形,文字和颜色的组合,去除冗余厚重而繁杂的装饰,来达到直观而简洁的设计效果。例如我们可以在网站使用大背景,不仅能够达到很绚丽的效果,如果图片能够选取的好还能够非常准确而深刻的向你的用户表达网站的主题。大标题也是一个不错的选择,简单而大气的文字效果,能够集中用户的注意力,同时这样并不会让你的网站看起来密密麻麻的。
  卡片的模块表达方式似乎是现在非常受欢迎的一种,这要得益于移动互联网的普及。卡片式设计能够让我们的网站更加有序,图片的放置不是凌乱的而是整齐有序的,这样也使得我们网站的易读性增强了,用户可以通过浏览图片很容易找到他们喜欢的内容。通过研究发现人们在浏览网页的时候更加喜欢图片多过文字,图片通过卡片式的设计方式呈现给大家能够非常有效的提升用户体验。
  我们知道颜色是可以直接影响用户的情绪的,红色代表热烈,黄色代表温暖,橙色很活泼,黑色很沉稳,绿色很自然,灰色很安静,白色很纯洁。单色调背景,通过阴影和颜色的深浅变幻能够让页面具有流动性的美。绚丽夸张的色彩能够带来很强的视觉冲击力,同时让网页充满了艺术气息。想让你的网站呈现给用户一种怎样的感觉,就需要认真去考虑应该使用什么样的颜色搭配。
  通过对细节的处理我们可以让用户体验到网站背后的设计人员的用心之处,那么投桃报李,用户则会更加忠诚于我们的网站。细节是需要在生活中去发现和积累的,比如上面可爱的吉祥物引导,或者换上极验验证的滑动验证码这些细节都是可以借鉴的。
投诉 评论 转载

关于可用性测试的一点心得最近在工作中做了不少的可用性测试,抽空闲的时间总结一下自己的心得,以下是我们团队展开可用性测试的步骤与方法。列举任务清单并排序这是可用性测试的第一步……任务优先级的重要性:为核心任务设计作为一个交互设计师,在日常的设计工作中经常会问自己或者产品经理最多的问题就是,“这个功能用户用得多吗?用户主要在什么场景下用这样的功能?他用这个功能的目的是什么?等等”,问这类……不要做椅子上的设计师事件一:某巨头公司L开会,产品的老大C带头发言:“我觉得吧,用户不会喜欢这个设计、他们”。相信在各位设计师的工作历程种这种发言都不是第一次听。我曾调侃这种老板是像乔爷般的……一套交互设计工具推荐刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工……当交互设计师承担视觉设计有人说,工科背景出身的交互设计师跟视觉出身的交互设计是的区别之一是,前者设计的东西会不够有美感,也就是很Low。虽然逻辑架构,特别是做大型管理系统的时候,可以很快把信息和功能模……设计干货收藏UI动效的必备原则总结高度总结动效设计的基本原则,有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢?我们在下面讨论的是为什么要应用动效,以及在那些时候动效,动效的特性等等。作为一枚不……3种空状态出现场景,5种消灭空状态的技能教你玩转空状态设计师在做设计的时候,常常会忽略的一个页面状态就是空状态。空状态,顾名思义就是空白的状态,比如说:一个新闻的列表中没有新闻,这个时候列表就是空的,用户打开之后看到的就是白惨惨的……设计师的文化消费分类:钱花哪里去了?媒介与内容从来都不是同质平等的,按照题材来分类书籍与电影,就是以文化消费品的眼光来看待不一样的文字。然而不同类别比特本就具有不一样的价值,对于设计师,我觉得文化消费应该分为四类……用户心理研究:制造期望与控制期望制造期望在这之前,还请大家先跟随着我回想几个电视电影经常能够看得到的情景。男主角握着女主角的手,说:“我会回来娶你的”;女主角将男主角推开,男主角回过头,很痛……百度、虾米、音悦台网站交互设计浅析苹果“Mac之父”JefRaskin曾经说过:“对于消费者而言,界面就是产品。”界面是用户体验我们产品最直观的接触。把界面做好,将极大的提高用户使用我们产品的愉悦感。所以我们长……用户体验七境界境界一:视觉美化层外观重不重要?当然重要。无论是工业产品设计还是用户界面设计,视觉表现直接传递给用户对产品的第一感受,而这种感受贯穿用户在整个产品的使用周期中,间接影响了……在用户体验与业务目标之间寻求设计的平衡点产品设计的目标在于解决问题。优秀的设计来自于对功能特性及目标实现流程的完美诠释,而非赏心悦目的界面外观。随着数字化营销理念逐渐深入人心,与公司业务紧密相关的那些部门也争相……
什么才是产品新人最基础的能力?更快学会任何东西的终极指南产品经理不知道的交互设计关注点!【川渝产品经理峰会实录】产品经理步入深水区,该怎么办?【川渝产品经理峰会实录】移动智能时代的产品思维每个人都是新时代用户,不清楚这些就不要谈传播了。千万不要跟产品人讨论产品攻心战:巧用用户心理,你才能写好营销邮件关于产品需求的思考围绕需求这个痛点,三星这些品牌们是怎样营销的如何写一份有内涵的商业需求文档所有的创业失败都只有两种,单打独斗“万能狗”真的无所不能吗

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界