2021-3篇 | 产品体验日记02

前言

在互联网产品日趋成熟的今天，APP同质化越来越严重，使得设计不够精致、没有气质及品牌感。一个设计精致APP不应漏过任何一个细节，美观、可用和高效的界面设计都需要花费大量的时间从细节上去打磨，并从多方面钻研并创造出打动人心的UI/UE设计。

2021 | 第02篇分享目录（026~040）

026.「微博」开通VIP-引导用户操作的动效按钮

027.「链家」效果预览-装修前/后鲜明的实景对比

028.「网易新闻」下拉刷新-缓解等待过程中的焦虑感

029.「百度」点赞-便捷的一键三连“特技”

030.「爱奇艺」新片预告-浮窗助你提前预知上线时间

031.「Keep」登录提示-打消用户隐私泄露的顾虑

032.「自如」画圈找房-精准定位房源信息 

033.「芒果tv」一起看-看视频从此不再孤单

034.「即刻」生日快乐-给与最温馨的祝福

035.「去哪儿旅行」搜索框-高效的订购入口

036.「淘宝」数字进度-有效驻留用户

037.「淘宝」AI速购-精准识别多种同类商品

038.「12306」特色景点-出行天气状况提醒

039.「高德地图」视觉障碍模式-人性化设计

040.「高德地图」下车提醒-再也不用担心坐过站了

026.「微博」开通VIP-引导用户操作的动效按钮

产品体验：

点击进入微博我的界面，在头像右方生日红包点击进入后，用户可以看到开通VIP界面，闪动的开通按钮更醒目的暗示用户进行下一步操作。

设计思考：

在大部分社交应用中，一般都有开通会员的服务，常见的开通VIP是一个按钮加文字，用户可根据自己的需求是否开通。

微博点击头像右方可以快速进入开通VIP界面，进入后我的头像右侧有立即开通闪动的按钮，为防止用户不小心错过，向下滑动的时候还有一个更大的闪动开通按钮，可以很好的起到二次提醒用户。通过清晰醒目的视觉形式和动效吸引用户的注意力 ，动效的按钮能够起到一定的强化作用，能够让用户在第一时间看到并暗示用户进行下一步操作。

027.「链家」效果预览-装修前/后鲜明的实景对比

产品体验：

进入链家首页，点击金刚区二手房图标，进入房间点击详情页上方大图，进入后右下角可切换看装修、看现状、360度无死角看房。

设计思考：

当我们有租房或购房需求时，大部分用户会先在各大租房软件中先查看房屋的样式，格局，布置等，若是房屋太旧、太脏亦或者其它原因都有可能导致客户果断的放弃，毕竟谁都希望住在一个干净、整洁、温馨的房子。

链家进入房屋详情页点击大图进入后点击右下角看装修，然后360度无死角查看整体装修后的样子，用户还可以点击左上角的户型图，即可查看房屋整体装修后的样子。通过清晰醒目的视觉形式告知用户装修后的样式，给用户带来最直观的表达方式，增强对用户的吸引度、购买欲，从而获得更大的转化。

028.「网易新闻」下拉刷新-缓解等待过程中的焦虑感

产品体验：

在网易新闻APP下拉刷新过程中，等待刷新完成的空档期，顶部空白区域会出现一句带激励性质的“鸡汤”或名人名言，将用户在等待中的无故损耗转变成知识的吸收。

设计思考：

当我们在预览APP的时候，遇到网络不好的情况或对内容不满意需要更换时，一般都会进行页面刷新，当我们要进行刷新时最快想到的方式无疑是下拉了，同时这也是最常规的下拉方式。而设计师需要考虑的是如何在下拉的过程中留住用户让用户继续等待、避免用户焦躁的情绪，预防用户在等待刷新的过程中退出，如果将加载的空档期运用好了，是否会有意想不到的收获呢。

网易新闻在页面下拉的刷新时，在加载的过程中，顶部空白区域会出现一句带激励性质的“鸡汤”或名人名言，且每次不同。其融入了情感化设计以实现与用户情感层次的交流。通过一些有趣的交互、提示，来提升用户的满意度，以避免在刷新等待的过程中可能出现的焦虑感，同时让用户感受到产品的温度，拉进用户与产品之间的距离。

029.「百度」点赞-便捷的一键三连“特技”

产品体验：

在百度关注作者的视频或文章下方长按点赞，即可完成一键三连点赞、推、关注的三种操作。

设计思考：

在这个处处是互联网的时代，很多新鲜事物我们都是从网络看来的或是朋友转发过来的，一般时候，我们在网络上看到自己热爱的事物和还不错的段子，点赞，转发，收藏功能就成了频繁的操作。

百度为了更方便用户操作，在关注页面预览作者发布的文章底部，用户长按点赞可同时完成点赞、推、关注“一键三连”，使用户操作起来更为方便 ，原本的3次操作简化了1步完成，极大提升了用户体验，让用户在更短时间内完成操作。

030.「爱奇艺」新片预告-浮窗助你提前预知上线时间

产品体验：

在爱奇艺发现页中，点击顶部的新片页，进入后右下方有一个时间的浮窗，点击时间即可查看近期新片上映的时间。

设计思考：

当我们在各大社交软件中突然看到期待了很久了电视剧或电影要上映了，然后迫切的想知道上映时间，这个时候用户可能会去翻看评论、或百度等，浪费时间与精力，还有可能得到错误的信息，从而白白错过首映的时间。

爱奇艺为了让用户清楚的知道新片上映时间，在进入新片页面后可以点击右下方的浮窗，即可查看新片上映时间，同时提前预约，然后可以合理的安排时间，以免错过首映，从而大大的提升了用户体验，拉进用户与产品之间的距离。

（ps：新片上映时间，可查看今天的和一个月之内的，一月之后的还需要敬请期待哈...）

031.「Keep」登录提示-打消用户隐私泄露的顾虑

产品体验：

新用户使用Keep。选择登录后会引导用户去完善个人信息，当进入到下一个页面时会显示所需要填写的个人信息，在下方会有很好的保密提示，放松用户的警惕心理，从而提升个人信息完善率。

设计思考：

在这个手机应用种类繁多丰富多彩的时代，我们可能会经常面临临时使用一些APP的情况，但是又不想注册账号密码，第三方账号登录机制就给我们提供了一个很便捷的方式，省去了用户记忆多个账号密码的问题。

在Keep软件采用第三方账号登录之后会自动关联Keep的账号系统，同时要求用户完善个人信息，然后变成一个全新的自己，当我们在完善个人信息的下方有很好的保密信息提示，这个提示就能很好的打消用户的一些顾虑，从而提升个人信息完善率，拉进用户与产品之间的信任度。

032.「自如」画圈找房-精准定位房源信息 

产品体验：

在自如找房点击地图找房，进入后我们可以看到右上方的画圈的功能，点击后可以在自己想租房的理想区域圈出来，锁定区域找房。

设计思考：

如今，越来越多的年轻人选择离开家乡，去外面奋斗，那么首先要解决的就是住的问题了，而租房的区域就成了最大的问题。我们一般找房都是通过地铁站/沿线或以自身为中心的方圆距离搜索，等到确定好了最终看房的时候，位置的偏离无法忍受，浪费大量的时间不说，还对很多的房源失去了信任度。

自如APP画圈找房，可根据位置精确找房。在地图上通过手动画出自己想要的区域来查找房源信息。交互手势的运用，提升了检索功能的灵活性与自由度，为用户提高效率的同时又提升了搜索结果的精确度。简单明了的手势操作对用户而言几乎没有学习成本，可谓是好用无负担，实现房源的精确定位。

033.「芒果tv」一起看-看视频从此不再孤单

产品体验：

打开芒果tv，点击视频进入视频播放页面，点击视频下方的一起看，进入聊天室后可跟同时在一起看该视频的好友一边聊天一边追剧。

设计思考：

我们经常一个人看电视或者电影的时候，看到心塞的剧情无人述说，看到恐怖的剧情不敢看亦或是对剧情想吐槽无人述说，总会想要有人陪自己一起看。

芒果tv一起看边看边聊天，让用户可以不用面对面就有一起在电影院看电影的感觉，天涯咫尺同时观看。可以极大的拉进人与人之间的距离，对于身处异地的情侣、朋友来说，无疑是一种很好的体验。

034.「即刻」生日快乐-给与最温馨的祝福

产品体验：

在生日当天进入即可，顶部有一个大大的你生日快乐的卡片，点击进入后第一个动态是“祝你生日快乐”。

设计思考：

工作的压力，生活的负担让现在社会的人都忙于奔波，负重前行，可能连自己的生日都不记得了。其实每个人都希望生日当天能够收到生日祝福。

当用户生日当天登录即可APP后，会发现自己的个人主页变为生日祝福，点击进去第一条动态是“祝你生日快乐”，在这个生活沉重，倍感压力的时代收到这样的一条祝福，会让用户心底不由自主的升起一丝温暖，触动用户的内心深处，让用户与 产品产生共鸣，进而认可。

035.「去哪儿旅行」搜索框-高效的订购入口

产品体验：

进入去哪儿旅行，往下滑过金刚区时，右上角会显示出常用的三个功能，机票、酒店、住宿会悬浮在右上方置顶，方便用户随时可以点击使用。

设计思考：

在用户使用旅游类APP的时候 ，首先映入眼帘的是种类繁多的功能入口，可以极大的方便用户快速查找所需的功能，但是当我们进行滑动查看旅游景点的时候，金刚区的入口会滑动到最上方从而被隐藏，用户必须要手动滑动到最上方才能点击功能按钮，很不方便用户使用，浪费时间。

去哪儿旅行金刚区虽然也有大量的入口，但是把用户使用频率最高，盈利性最强的机票/酒店/火车票在页面出现滑动时，会悬浮在右上方置顶，方便用户在需要时随时点击快捷通道入口，省去了再次回到顶部的繁琐，提高用户的使用效率，提升用户体验度。

036.「淘宝」数字进度-有效驻留用户

产品体验：

进入淘宝商家，在浏览店铺时，滑动时右下角悬浮按钮会给出数字进度提示，让用户可以已浏览商品数量，以及总量，当滑动停止时，悬浮按钮变更为“顶部”，点击即可回到顶部商品。这种贴心的设计可以有效的留住用户，

设计思考：

当我们进入商家店铺浏览所有产品的时候，不知道还有多少商品可以看完，使用感觉在浏览一个无底洞一样，从而让用户失去继续浏览的耐心。

进入淘宝商家，在浏览店铺时，滑动时右下角悬浮按钮会给出数字进度提示，让用户可以清晰的知道已经浏览了多少商品，以及还有多少商品待浏览，可有效感知到商品的尽头，让用户评判是否继续浏览下去。

037.「淘宝」AI速购-精准识别多种同类商品

产品体验：

在淘宝首页顶部搜索栏，点击相机图标扫描物品会自动拍照并对照片内的物品进行AI精准识别，或者使用手机相册的图片，即可筛选出跟图片相同/相似的商品。

设计思考：

当我们走在大街小巷路过橱窗的时候，看到一件心仪的商品，可能会因为各种原因而“羞于启齿”，只能默默记下商品的外观、样式，然后寻找同类商品，但很有可能再也找不到。

或者年纪大的长辈不擅长使用手机，在使用购物APP时，面对种类繁多的商品列表，不知该如何查找。淘宝的点击相机快速查找商品通道，可以很好的为用户解决购物难的问题，同时提供多种商品的扫描，为用户带来了很大的便捷，减少了用户的操作步骤，提升用户购物的效率。

038.「12306」特色景点-出行天气状况提醒

产品体验：

进入12306的首页，输入目的地名称后，顶部轮播图会显示当地特色景点，并且在景点图上会显示当天的天气情况，方便用户出行。

设计思考：

我们出去旅游的时候，会找一些当地特色的旅游景点，还会去查看当地的天气情况，以便合理的安排自己的行程。

进入12306输入目的地，轮播图上显示当地的旅游景点和天气情况，一方面起到了宣传当地特色旅游景点的作用，另一方面又可以让用户不用专门去查当地的天气状况，一目了然，随时根据需要改变自己的行程安排，两全其美。

这种在细节体现贴心的产品设计，往往会让用户感觉到温暖，增加用户粘度。

039.「高德地图」视觉障碍模式-人性化设计

产品体验：

进入高德地图，选择地图设置，点击视觉障碍模式按钮，即可开启视障人士专属配色模式，为色盲色弱用户提供便于辨别的颜色区分形式功能。

设计思考：

什么是好的软件，好的功能，因人而异。我觉得能够为用户提供最需要功能的软件才是好的软件。

高德地图在设置中开启视觉障碍功能后，路线的阻塞情况提示会变成色盲/色弱用户的专属配色，并有相应色彩对应的说明，方便有视觉障碍的用户能够更容易得到掌握路线的阻塞情况。这是一个有温度的功能，全方面的考虑到不同用户群体的需要 ，这种人性化的设计往往最能打动用户。

 

040.「高德地图」下车提醒-再也不用担心坐过站了

产品体验：

进入高德地图，输入自己要去的地方，出现路线之后点击其中一个进去，展开整个路线图然后下方可以看到开启下车提醒的按钮，点击开启下车提醒，需要下车时，手机会给你发消息，提醒用户下车。

设计思考：

导航软件已经成为用户出行过程中常用的辅助软件，是想一下当你想要去一个陌生地点的时候，一般会提前打开导航查找路线，如果地点距离较远，用户也许不会一直盯着手机看，到哪里了，还要多久到，可能用户在乘车玩手机的时候，一不小心就会过站，这个时候用户就会想要是下车有人提醒该多好。

高德地图输入目地点后，选择出行方式，地图路线下方可点击下车提醒按钮，需要下车时，手机会给你发消息，提醒用户下车，可以有效防止用户坐过站，提升用户体验度，给用户的出行带来方便。