豆瓣fm 3.0,新版设计背后的理念和逻辑 |pingwest

豆瓣fm 3.0,新版设计背后的理念和逻辑
- l. leung 发布在 demo wall
-
分享
0 条评论
新浪微博 腾讯微博 twitter facebook linkedin
6月6日,豆瓣fm 3.0 ios 版上线,之后android 版本也随之更新。按照豆瓣官方博客的说法,这是豆瓣fm app自2010年2月上线以来最重要的一次改版。新版本除了功能上有些许调整,最大的变化就是整个界面和交互进行了全新的设计。而在此次改变的背后,或许我们可以探寻一下豆瓣fm 新版设计的理念和逻辑。
从上面新旧两版app 的截图可以看出,豆瓣fm 由原来的全黑色背景和白色文字,变成了现在黑色背景、绿色兆赫方块以及大专辑封面的样式。两个版本的产品逻辑都同样简单,但新版本更加突出了音乐本身,去掉了一些不必要的修饰,同时让用户在听音乐这件事上有着更好的体验。
按照豆瓣的说法,豆瓣fm是一款提供伴随式个性化音乐收听服务的应用。但随着豆瓣fm web版的不断改进,该服务本身已拥有数千个dj兆赫,所服务的用户数量也达到千万级。而从2010年9月2.0更新之后,豆瓣fm app就没有太大的变化,其原有的设计已无法用户的各种需求,所以豆瓣3.0 在功能和界面上的设计也就随之而来了。
豆瓣资深交互设计师尚文欢告诉pingwest:“3.0改版的一个主要目的,就是要将大量dj兆赫更加简单直接的展示在一个界面上,
豆瓣视觉设计师tifa 则告诉pingwest:“对于豆瓣fm的整体视觉,我希望它能具有包容力,可以承载各种风格的歌曲,其次我希望弱化这个平台本身的特点,而把更多的内容呈现出来,由音乐及使用的人去赋予它所带来的情感。”
至于播放界面,豆瓣3.0 也遵循着同样的理念:简化设计,将用户最需要和关心以外的东西去掉,突出内容。用合适的大小呈现专辑封面,将用户的注意力集中到歌曲本身上来。封面底部采用大量留白来简化信息呈现,让用户在很容易操作的同时也减少了不同形式信息的视觉干扰。
而在app的交互设计上,豆瓣设计师们也尽可能的让app的内容层级和操作方式变得更加扁平——通过简单的上下滑动在兆赫列表和播放界面间切换,点击封面出现歌词等。手机的屏幕相对电脑要小很多,而通过这种更加扁平的信息交互方式,可以很好的解决狭小空间展现内容的难题。
l. leung lleung@pingwest.com
抄袭的产品是没有灵魂的。——专门报道“新、奇、酷”和“具有全球化视野”的 互联网/移动互联网 创业公司。
0 条评论
取消回复
demo wall

豆瓣fm 3.0详情
豆瓣fm 3.0,新版设计背后的理念和逻辑

craigslist:mokriya craigslist客户端详情
简陋的克雷格列表(craigslist),和它简洁漂亮的mokriya craigslist客户端

haiku deck:ipad演示文档制作软件详情
演示文档遇上ipad,haiku deck让用户更清晰简洁地表达

educlipper:在线教育资源分享详情
借鉴pinterest,但不是社交网站——用瀑布流方式做在线教育资源分享的社区educlipper

nudge:集合短信和im的通讯应用详情
将短信和im通信放在一块儿,nudge解决了什么问题?
在微信关注 pingwest
