跨界的艺术!混搭的产品设计

2014/02/19 7035

20140217blog

@ICOjump :「混搭」这词常见于「流行音乐」中,是将两种不同的风格的音乐混合在一起,产生新的趣味的做法,有 1+1>1 的效果。而在我们熟悉的互联网中其实也有不少「混搭」形式,结合最近在做的产品正好做了一个简单的分享。

相关推荐:
《设计师新宠!交互神器ORIGAMI》
《推荐!漫谈响应式网页设计》
《优秀手机应用设计需要遵循的8大原则》

第一阶段:Web2.0 Mashup

Web2.0 时代从一开始就有「Mushup(混搭)」的理念,各种号称 Web2.0 的网站或多或少的都会有 API 或着类似工具让大家方便调用内容,很多网站到现在还保存着这些功能,如果经历过 Web2.0 时代的同学,一定会对那是博客右侧的显示不同网站内容的小工具记忆犹新。印象中比较深的小工具有:Flickr Badge,Twitter 小工具,豆瓣的收藏秀等。

Flickr Badge,可以自定义照片的布局和显示的数量,然后生成代码引用

flickr

Twitter 小工具,可以把 Twitter 的内容生成引用

twitter

豆瓣的收藏秀,把在豆瓣上看过的书,电影,音乐,舞台剧进行生成引用

douban

 

第二阶段:产品+移动的融合

经过了 Web2.0 时代后,其实对「混搭」这件事还是停留在为赋新词强说愁的阶段,玩的是花样,真正进行混搭并且成功的产品感觉还不多。然后很快我们就进入到了「移动」时代,这是场产品的革命,不仅革新了用户的使用场景,也增强了产品功能,原本在 PC/Mac 才能看到的信息,现在随身都能看到,也可以靠手机内置的各种传感器做更智能的操作记录和推荐。面对这些情况,大部分产品或多或少的都与「移动」混搭了起来,让很多产品发生了强大的化学效应。

大众点评网,原先如果选择饭店需要先在网站上先做功课,现在直接掏出手机就完成所有事情,可以把身边的餐厅好评差评都看的一清二楚。因为与移动的混搭,大众点评一下子被激活了起来,所以截止到2013年底,大众点评移动端已经占到了75%的访问量,网站与移动端之间的主次互换了。

大众点评向移动转型完成:纵横布局下一子

dianping

美团网,和大众点评网类似,与移动的混搭让团购场景也变得多元化了,使用网站是想好吃什么再团,使用移动端可以做到想吃有团购或者有团购再吃的随看随买的功能。于是美团网的移动端交易占到了整体的70%。

美团网移动端交易占比近70% 月成交超10亿

meituan

还有类似地图的服务,预订类的服务,甚至聊天工具与移动混搭都产生了强大的化学反应。

 

第三阶段:产品+跨界的混搭

产品与移动的混搭产生的化学反应着实让人惊艳,但不是每个产品都是像大众点评这样的产品。天时地利还需人和,对于一个好产品来说,如果能从自身的角度去再挖掘的东西也许是更好的。看看下面这些产品,大家一定或多或少的听过用过:

雅虎天气(Yahoo Weather),能够在众多天气应用中脱颖而出,除了精美显示显示当地天气参数,还会同时从 Flickr 中显示出当地高质量照片。产品是由「天气」+「Flickr 照片」混搭起来。

雅虎天气获得 beautifulpixels.com 2013年编辑之选的产品

yahoo-weather

支付宝余额宝
,存入余额宝的同时可以方便转入转出并且同时支持淘宝购物,迅速得到关注,让「天弘基金」火速成为国内第大基金公司,产品是由「支付宝」+「理财基金产品」混搭起来。

余额宝规模超2500亿元 天弘基金跃升行业第一

alipay

Acfun,人气超旺的弹幕式视频网站,小米副总黎万强称之为「亚文化发源地」,很多视频在 Acfun 上看比在优酷上看更有意思噢。产品是由「视频播放」+「弹幕」混搭起来。

小米副总裁黎万强:小米是如何做出年轻人喜欢的产品的?

acfun

蘑菇街,应该算是第一个使用 Pinterest 的瀑布流来进行展示商品的电商导购网站,据说使用了瀑布流后,PV成倍上涨,之后各大导购都开始模仿。产品是由「商品」+「瀑布流」混搭。

@陈琪Shark (蘑菇街 CEO )既然说到蘑菇街的产品,这个”图墙”也是不得不说。最早是看到一同事的Blog用这个模式,惊为天人啊(后来知道原创者是pinterest.com)。三天后我们就把搜索改成这样,用户立即用PV的成倍上涨回应这个设计(到现在,我们的同行甚至全站采用这个设计)。再次感叹一下,咱和一流水准还是有很大差距啊…… 来源微博:weibo.com

mogujie

以上的这些产品都是在自己产品的基础上添加了新的产品功能,也同样产生了完全不同的化学反应,我把这种叫做「跨界的混搭」,找到可以互补的产品并且混搭在一起,让原来的产品变得更加好。

希望分享的一些例子能够带给大家一些小启发,如果大家感兴趣也可以试着动手混搭一番。:)

 

原文地址:icojump
作者:@ICOjump

【优设网 原创文章 投稿邮箱:2650232288@qq.com】
 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量63万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/product-mix-web-design

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里