11月 | UX设计师的产品体验日记

01.「饿了么」隐藏在个人简介里的小心思

关键词：

#文案、#情感化、#设计逻辑

产品体验：

当用户没有在个人资料页面设置个人简介内容时，饿了么平台会预置一行文字内容「填满了肚子，人就不会空虚」，恰到好处的利用文案作为情感接触的载体，更容易让用户产生共鸣。

设计思考：

虽然这是一个很小的细节，却化解了用户未填写内容而导致信息缺失的尴尬，同时通过微文案展现了产品的有趣灵魂。

02.「美团」产品详情页可点击按钮快速滚动到预定区域

关键词：

#效率、#转化率、#设计逻辑

产品体验：

美团的产品详情页有多个模块组成，往往页面中的触发事件（如立即预定）会在首屏展示出来，由于页面内容比较多，当用户往下滑动到购买须知tab栏时会出现「去预定」快速上滑按钮，点击按钮后，直接定位到日期选择位置，用户可快速进行预订操作，缩短了用户的操作路径。

设计思考：

操作按钮是用户通向成功的最后一步，它的放置位置影响用户完成操作的快慢及转化。与把立即预定做成吸底按钮相比，这样设计的好处是既不影响用户了解产品详情，又可以达到吸底按钮的效果，即快速抵达目标。

03.「高德地图」退出活动时的弹窗帮助用户记忆活动位置

关键词：

#挽留弹窗、#设计逻辑、#提示

产品体验&设计思考：

高德作为工具型产品，核心功能是地图界面，所以一般周期较长的活动，其入口位置一般会比较隐蔽，比如它的绿色出行活动就放到了我的页面的热门活动里面，当用户首次进入活动页面，当点击返回准备退出活动时，会弹出弹窗，以图文结合的形式告知用户活动的位置，这种提供给用户入口路径的教育方式可以方便用户再次参与，形成稳定的入口感知。

04.「高德地图」车辆添加页面是怎么融入用户体验设计的？

关键词：

#用户体验、#易用性、#效率

产品体验&设计思考：

①、点击车牌号码输入框唤起键盘，键盘由数字及大写字母组成，方便用户操作，省去了来回切换键盘的时间；

②、点击车辆类型输入框后底部弹出选项，并展示示意图，明确告知用户，不需要用户思考；

③、选择品牌页面明确指示当前选择的选项，分布式操作流程上更加清晰；

④、当未填写必填项时点击完成按钮，则会按照由上而下的顺序提示未填写的项目，并且呼出键盘，方便用户直接操作。

05.「美团外卖及饿了么」商铺页面设计对比分析

关键词：

#用户体验、#对比、#商铺详情

产品体验&设计思考：

①、美团外卖的商户页面相比饿了么，上方增加聊天功能，点击去后可以给商家打电话或是发消息以图文的形式沟通，方便用户与商家建立联系。饿了么只提供了打电话给商家的功能，功能放置在下面tab栏-商家里面。两款APP相比，美团外卖在用户与商家建立联系方面做的更加便捷，并且提供了发消息功能，解决了一些电话沟通不清楚的问题，可以发图片、视频给商家，沟通更加方便。

②、饿了么的商家推荐模块放在点餐tab栏下方，横向排列，比较显眼，点击箭头跳转页面可以查看更多推荐商品。美团外卖的推荐是放在了分类列表的最上面，查看更多推荐继续下滑手势即可，操作手势统一更加便捷，当然，两者APP比较哪种推荐效果更好还是要看数据具体分析。

③、点击评价区其他用户推荐的商品，美团外卖是从底部弹出浮窗，推荐商品以列表的形式排列，可直接添加购物车后进行结算；而饿了么则是跳转到推荐商品的详情页面，相比底部弹窗的形式，跳转新页面会稍微有些干扰用户当前的操作流程。

06.「美团外卖及饿了么」评价功能设计分析

关键词：

#用户体验、#对比、#评价

产品体验&设计思考：

①、美团外卖的评分星级放在比较靠上的位置，公告放在优惠内容的下面；饿了么的评分则是显示在评价tab旁边，公告放在优惠信息上方。综合两款APP分析，其布局方式来源于他们的背景不同，美团有大众点评做依托，其点评数量比较多，显示在评价tab旁边会给人有很多用户选择购买的感觉，基于点评的优势，所以会把评分放到稍微靠上的位置，比较显眼。

②、美团外卖的评价模块分为外卖评价和到店评价，参考维度更加丰富。评价标签中的差评标签相比较于饿了么做了区分处理。

③、向上滑动页面后，饿了没的tab栏吸附到页面顶部；美团外卖则是tab栏吸附到页面顶部的同时评价标签排成一行也一起固定到顶部，用户筛选起来更加方便。

④、美团外卖的默认头像是美团的吉祥物袋鼠，饿了么的默认头像则是没有品牌识别度的一般头像，两者相比，美团在品牌宣传方面更胜一筹，也更有趣味性。

07.「飞猪及携程」往返机票列表页面设计分析

关键词：

#用户体验、#对比、#列表

产品体验：

①、飞猪列表页进来后会默认选中去程及返程的第一条，并计算出往返总价格；携程则是需要用户手动去选择返程信息；

②、携程日期选项下面可以看到当前选择日期以及前一天和后一天的价格，而飞猪的日期选项下则不显示价格，并且需要向右滑动后才能看到前一天的价格；

③、携程除了选择的往返目的地以外还会提供邻近推荐，给出具体出行方案。

设计思考：

两款APP相比较，携程为用户提供了更多自主选择的权利，但同时也损失了一些体验，比如返程内容被遮挡了一半，选择返程时需要向左滑动一下。并且给用户提供太多的选择反而会降低用户的决策效率。

08.「网易云音乐」热评墙功能把音乐与社交成功的结合起来

关键词：

#用户体验、#社交、#沉浸

产品体验：

打开网易云音乐APP，点击云村便可以看见顶部的热评墙。进入热评墙页面后，页面给人一种沉浸式的体验，在这里不仅可以享受音乐所带来的享受，还可以看到歌曲的热门评论，围绕热评内容分享自己的想法。在热评墙的最后还有一个推荐上墙功能，就是让用户自主决定热评墙的内容，而不是纯粹由官方控制。热评墙每天固定更新，但是不可以往回查看以前日期的热评墙内容，我想这也是让用户每天来打卡的原因之一。

设计思考：

网易云音乐在音乐版权方面并没有绝对的优势，所以多元化与差异化成为了音乐类型APP的竞争方向。网易云音乐依靠评论，用户产品的UGC内容为其吸引了不少的忠实用户，成为了中国音乐市场不可忽视的一隅。

09.「百度地图」上点击某个坐标点时的交互效果分析

关键词：

#即时反馈、#网络异常、#加载

产品体验：

①、点击百度地图上的坐标点，选中状态的坐标点会显示位置的缩略图，点击进去则是街道全景/查看大图；

②、点击某些景点会展示当前的人流量情况或是否已休息；

③、断网或网络异常状态下，页面顶部显示一行提示，并且提供系统设置入口，点击进去后可以直接调整到打开系统网络的页面，当前页面采用局部加载的方式，网络异常的时候，也会提供给用户地点名称及距离。

设计思考：

即时反馈可以让用户感知APP是专业的、有秩序的。相反，一个页面如果缺失即时反馈则会让用户不知所措，从而产生挫败感。百度地图不仅在有网络的状态下提供给用户反馈信息，并且在失去网络、网络异常的时候也会让用户获取到最关键的信息，及当前状态，给予用户良好的用户体验。

10.「小红书」是怎样利用动效提升用户体验的？

关键词：

#动效、#用户体验、#趣味性

产品体验：

点击分享图标时，底部弹窗里的内容从下至上错落的呈现出来。它不仅让弹窗与页面的交互更加自然顺畅，同时更加突出了元素之间的关系，即元素从哪里来，与周围的元素是什么关系。

设计思考：

动效的本质就是提升用户体验与数据表现，它分为功能型动效及魅力型动效。功能型动效可以帮助用户理解页面信息层级，它表达了页面空间的转换与视觉信息的反馈。魅力型动效则体现了品牌与趣味性，在运营设计上可以更加烘托气氛。

11.「钉钉」密聊功能你用过么？

关键词：

#好功能、#安全、#设计逻辑

产品体验&设计思考：

密聊功能在钉钉消息列表页最上方，选择想要密聊的人之后，你发送过去的效果对方阅读后会自动销毁，实现无痕聊天。「阅后即焚」这个功能其实也不算是一个新鲜的功能了，早在2014年就已经被用在一些社交软件上，但如今用于钉钉这种办公类型的APP，比较适合一些商务机密的聊天，以满足用户的一些特殊使用场景。

12.「keep」为用户购买会员提供多种支付方案

关键词：

#设计逻辑、#用户体验、#情境预判

产品体验&设计思考：

众所周知，在使用苹果手机购买APP内的会员时，由于苹果强制要求，仅支持 App Store 支付，或者在 App Store 内绑定支付宝或银行卡为付款方式。想起我前两天本打算续费百度会员，但是由于需要用 App Store 支付 ，又嫌绑定麻烦就暂时放弃了购买会员的计划。今天在开通keep会员的时候同样也遇到了需要用 App Store 支付的情况，本来打算放弃，点击取消付款后，keep弹出了如下弹窗页面，询问我是否支付失败，告知我可以用微信扫码的方式购买会员，可谓是考虑周全啊。

11 月份产品体验合集到此结束，欢迎一起交流讨论。