上一篇文章主要讲的是体验好巧网的功能流程,这一篇,主要是从好巧网身上来学习优秀的产品交互.作为一款让用户感觉顺畅的产品,他的交互肯定有很多值得我学习。我不是一个专业的交互设计师。但是,作为一名产品经理,目前我对交互有这样的一个简朴的观点。【反馈】,反馈这一点是我觉得的交互最关键的一个点。如果大伙有不一样的想法,欢迎随时交流呀~
![](http://i.imgur.com/ISIvLTA.jpg)
![](http://i.imgur.com/pJqB7Cb.jpg)
从好巧网的首页布局上说起。上次说到好巧网的首页布局,其突出了搜索框,其他内容基本都覆盖住了,用户需要往下拉才能看到更多的内容。从这一点来看,产品的设计和交互首先要满足的是产品面对的客户本身的需求,想清楚你的产品需要展示给用户什么内容,再根据内容来进行布局。
搜索的二级页面的交互体验
![](http://i.imgur.com/06qTAMn.jpg)
二级页面还是常见的卡片设计,但从图片中可以明显的看到其中的交互细节,鼠标移动到这个卡片时,卡片会微微浮起,突出展现。其次,鼠标移动到卡片内容时,卡片内容的文字会由灰色变黑色。这就是两点交互,带来了明显的用户反馈,效果非常不错。学习。
![](http://i.imgur.com/tW3umWj.jpg)
![](http://i.imgur.com/Vqkg5uk.jpg)
在三级搜索的第一个页面,第一点展示的还是位置搜索,把关于酒店位置的内容和酒店特色突出说明。这也是服务于需求。
而在搜索模块的内容展现,有几点做得不足:1、弹框页面的关闭按钮颜色不突出,尽管视觉不错,但引导性大大减弱;2、鼠标移入按钮的时候,按钮颜色没有发生明显的变化,反馈并不足够。
今天关于弹框关闭的这个话题,我和在搞火锅的朋友杰兄聊了一下。因为弹框盖掉了搜索的整片内容,且关闭按钮极其不明显,所以我对这个弹框提了一点改善建议,【鼠标移出弹框】页面后能够自动关闭弹框。但杰兄指出了我考虑不足的地方,如果用户不小心滑出了弹框页面,这种体验不会更加差吗?其认为最好的方式是通过【鼠标点击】页面来关闭这个弹框,于是,他在弹框外随便点击了页面,弹框果然就自动关掉了,好巧网的产品经理已经考量到这点了。学习。
从【鼠标移出关闭弹框】还是【鼠标点击其他页面关闭弹框】这个的讨论中,又一次提醒我这样一个方法论。遇到一个不爽的问题,提出一个解决方案,再想想解决方案可能带来的问题。这样对一个问题的考量就会更加全面了。是的,我在这一点还需要改进,再多问自己一个【解决方案可能带来的问题】,这样考量产品就会更加全面,值得深深的记在内心里。“做什么”“为什么做”“做之后会带来什么结果”。
同样的,我这个时候又有一个问题:“为什么我会下意识的认为这个弹框除了点击关闭按钮,否则无法关闭?”。思考过后,我认为导致我出现这个问题的原因是:
- 这个弹框的关闭和用户常有的点击关闭按钮以及移出鼠标关页面的习惯是不符合的;
- 处于这样一个用户场景,当用户往下拉查看其它搜索内容,或者鼠标长时间停留在外面时,弹框页面是没有关闭的。
所以这里有几种解决方案。
- 保留【鼠标点击弹框之外页面关闭弹框】,在运营上增加一个用户操作的引导页面。但从收益上来说,又要增加一个页面引导的成本。如果不加,用户的交互体验就不会那么极致。尽管每个操作都尝试让用户Don't make me think,但这样一个点击关闭操作是增加用户学习成本的。
- 保留【鼠标点击弹框之外页面关闭弹框】,鼠标移出弹框外3秒后自动关闭弹框/鼠标做下拉操作超过弹框时,自动关闭弹框。关于第二种方式,难点就在于几秒时间关闭,下拉多深关闭。这又是需要通过数据进行微调的事情,增加成本的事情。
- 第三种方案,我认为是最省成本,最有效果的方案,就是在灰色的关闭按钮外加个红色外环。所有之前产生的问题都解决了。
从这个范例中,我学到的是,不要为了追求页面效果而忘记交互体验。
![](http://i.imgur.com/J52KnPd.jpg)
从这个图片展示中,我觉得是足够了,尽管有的人认为占满上半屏幕效果会更好。但这里要考虑两个因素:1、酒店上传的图片大小不一如何解决;2、图片占用面积过多是否会影响网页的加载。实际上,我是觉得以创业公司的资源来说,这样子已经达到主要目的了,而且展示效果也是不错的,有种看老胶片的感觉有没有?!
![](http://i.imgur.com/4411bHR.jpg)
还有一点,就是关于文字排版的,文字多了,可能会覆盖掉其他链接。这又是好巧网没有考虑到的。事实上,要是我,我会考虑到这样的细节吗?我的答案是很可能不会。但这一点在提醒我,细节,细节。
总结:从这次的分析当中,有以下几点值得重视:
1、针对用户的页面【反馈】是最需要琢磨的,也是交互的开始。PS:如果我是错的,请与我讨论。
2、产品的内容展现要符合用户的需求;
3、更全面的考量产品,考虑产品的交互,想清楚【做什么】【为什么这样做】【这样做会带来什么结果】,这种思维也是产品经理思维合格的最基本的考核标准。
4、不要为了追求页面的展示效果而忘记交互,这样往往会带来更多的成本。Don't make me think.
5、收益,是公司和产品经理都要考虑的一件事情,他会直接的体现在产品的抓大放小上。
PS:允许非商业性转载,转载请注明出处,谢谢.
============================================
这里只求真,没有真理。
个人独立博客:PMFuner.com
记录一个不惧撞南墙的野路子产品经理的故事.
期待分享和交流~
![](http://i.imgur.com/C5NuCvH.jpg)