产品体验笔记｜UI/UE

前言

作为设计师，在拿到产品需求的时候，所要做的不仅仅是完成产品的设计工作，更重要的是要思考如何通过设计的的手段去推动产品背后的商业价值达到最大化，提升视觉体验、增强用户的粘性以达到用户转化的目的。同时需要在用户目标不清晰以及对应用不理解的情况下，利用设计手段合理、合适的跟用户对话，并解决用户的需求，完成应用该有的使命。

01. 知乎_日报精选

产品体验：

按照讨论热点的排行选择十个内容的作为精选模块，推荐10个精选内容卡片后在底部不是加载是按钮跳转回推荐页面；交互流程顺畅；

同时增加收藏数量的标签吸引用户点击参加讨论；头部卡片的设计中也是运用到知乎延展logo和字体的融合突出知乎品牌的调性；

设计思考：

用渐变的卡片容器使分散的内容更加的聚合，同时标题的卡片则是破形出卡片的在整个卡片内容中不突兀但是又很好的突出显示当前内容卡片的顺序；

除了设计语言品牌色的应用，在头部卡片的设计中也是运用到知乎延展logo和字体的融合来突出知乎品牌的调性；

02.滴滴出行_预约

产品体验：

预约的入口在首页，点击预约直接拉起“用车时间“的时间选择器，默认从当前时间选择不能选择当前时间之前的时间段，对于用户来说提高了操作效率，在互动行为上简化了流程；

设计思考：

首页在预约的入口处有线性图标和双色图标，增加了识别性和区分，双色图标作为金刚区采用是左右侧滑分页的样式，而在线性图标中，多功能展示方式则是用更多的图标按钮，点击之后从底部弹起一个页面--更多打车服务，而不是用侧滑增加误操作或者展开浪费屏效比；

虽然打车的功能很多，但是类似功能的页面设计样式都是统一的；比如预约-代叫-专车等等，只有功能上的增减，设计的样式和布局都保持了设计语言的统一性和克制；

在首页的搜索框中加上了默认常去的目的地，点击即可跳转呼叫快车的页面；

03.爱奇艺_视频弹窗

产品体验：

弹幕增加「神」标签，比如点击「神」标签的弹幕后，右侧弹出相关信息，可以进行一些快速回复点赞和一些评论的社交属性，增加了弹幕的继续延展的社交属性，比如高赞、热门的评论和关于热门弹幕的讨论等等；

设计思考：

封神的标签使用了轻拟物化的风格，同时标签和按钮的形状一致，使界面的风格统一；在信息层级的表现中爱奇艺在这个界面中更加突出评论和回复的内容，而弱化了用户的信息和发布时间；

04.淘宝_订阅

产品体验：

淘宝的订阅功能做出了更多的细分分类，分为精选、上新、玩搭、活动和会员，这次从会员的角度看订阅的会员内容，内容是品牌发出的订阅品牌会员后专享价格商品和品牌会员秒杀价格；

其中的交互操作点击更多弹窗是订阅管理，主要的操作是关于订阅的操作和取消，但是这里的弹窗设计更像是文案说明而不是按钮可操作；

当点击一个商品进入该品牌所有商品推荐的大卡流，同时也强调一些其他的操作按钮，比如品牌卡牌中的逛店按钮、商品加购物车的操作按钮和社区话题和操作的引导；

设计思考：

订阅管理的弹窗当增加图标并且没有操作形态和信息分级的情况下，可操作性不明确；

订阅的会员中使用大卡流围绕商品的图像信息的多维消费兼顾有效分发，以发布身份往下的信息排布方式，同时增加内容消费卡片和购买转化。

05.快手_短视频

产品体验：

在沉浸流的卡片中增加了向右滑动是可以查看作者其他作品交互，同时显示作者的作品数量； 查看作者其他作品缩略图时，隐藏弹幕输入框和其他操作；

浏览视频时候弹幕的输入框更加明确以评论的形式展示；

设计思考：

激活向右滑动的交互，查看作者其他作品时沉浸流卡片的内容也有相应变化，比如强调了用户名称和引导关注按钮，从而弱化了其他的信息内容；

输入弹幕的入口更加明确，引导用户互动和评论区功能有相应区分；

06.携程_酒店详情页

产品体验：

酒店的详情页中内容信息排布中，在封面图中可以选择不同的分类相关图片，前置了优质的酒店相关评价和地图，之前的详情页中只是在首屏中展示地图而评论放在了第二屏幕但是用户其实很在意其他已经入住的用户评价；

交互操作中往下拉展示大图的同时再次增加了用户的评价，并引导用户查看相关点评和“住客说”。

设计思考：

酒店详情页设计并采用了携程的品牌色，同时把评论和地图两个并排成两个卡片节省了屏效的同时又不影响互动的操作； 评论页中延续了详情页中的设计图标和设计语言；

07.百度地图_路线

产品体验：

路线相较于直接点击搜索位置导航而言，不是以历史记录为快捷交互方式而是以出行的多种快捷方式为主；当出行方式是公共交通时，金刚区推荐放置的是实时公交和地铁图等快捷入口，同时推荐附近实时公交；当出行方式是步行时，同时新增相对应的快捷入口；

驾车可以切换其他模式的交互思维，说明了两种模式的不同，很好的解决了功能设计的呈现问题，同时如果选择新手模式，则会在标签中标注，而标准模式则是模式状态。

设计思考：

金刚区的快捷入口图标延续了百度地图首页的设计语言，图标内部是渐变颜色同时方向一致的投影弥散； “历史记录”和“我的收藏”Tab切换样式可作为参考，除了字体有选中状态的处理，还有分割线的处理；新手引导的卡片使用了百度的IP形象并增加相关的场景；

08.微博_个人中心

产品体验：

作为访客打开用户的个人中心，只展示简单的用户标签和简介，点击展开的图标再展示用户的全部标签和个人签名，地址等信息，不影响用户进入主页查看内容的屏效；

点击粉丝进入的不是和其他APP类似的用户列表和关注按钮，而是在粉丝的tab下是全部粉丝、7日新增粉丝、昨日互动粉丝和大V粉丝（覆盖领域）、还有大V粉丝的引导关注、粉丝互动排名，更加明确的引导用户的互动和关注，相比之下其他App的粉丝和关注列表有些寡淡无味，不能给用户明确的引导操作；

在「她的关注」tab中，以该用户作为主要信息层级，并以可视化的数据展示该用户的关注人的领域分布和占比，最后再是引导用户关注「她关注的与她同领域博主（娱乐明星）」，更加的清晰明确引导用户了解她关注的同领域的博主，而不是其他App的用户列表样式；

设计思考：

「她的粉丝」和「她的关注」不同于其他App的单纯的只是用户列表样式，而是以用户目标为主要导向，在「她的关注」tab下以可视化的样式展现该用户的兴趣领域，再以用户的兴趣领域往下引导关注；而在「她的好友」中头部以一个可视化的数据展现用户的全部粉丝和粉丝分布情况，其中以最近7日新增的大V粉丝属于高质量粉丝，在下方单独以大V粉丝进行了推荐和引导关注；相较于其他App只是做了一个用户列表和关注按钮，增加了信息的高质量性和明确的推荐引导关注；其中「她的好友」首屏的「粉丝互动」更好的调动社交氛围感和活跃性；

细节：在用户的个人中心页面中关注按钮在右下角，首次使用我会忽略掉关注按钮，而在点击进入用户的关注和粉丝页面后还是有提醒引导用户关注；就算是「她的粉丝」和「她的好友」页面中，也是以“章若楠”的信息为主要展示内容，包括以“章若楠”为中心推荐粉丝或者她关注的用户；

09.短信_聊天页

产品体验：

交互手势右滑显示时间轴线，钉钉和短信消息页面的交互相似，只显示时间的小时和分钟不具体到月份和年份；

短信的头部是头像和电话（或者是联系人名称），点击箭头打开功能选择相关操作；而钉钉的头部是用户名称和单位名称，层级区分较大；

设计思考：

短信的时间轴和聊天框间距较大，而钉钉因为头像的原因，时间轴距离聊天框的间距很小略显拥挤，钉钉输入框上方有快捷栏的标签，在更多的设置中可以调整标签的顺序和增加其他的功能；

10. 豆瓣_书影音_找电影的卡片样式

产品体验：

第一张截图是电影的封面，紧跟其后的图是可左右滑动的剧照，比平时的卡片样式增加了翻看的效率，同时feed中穿插了“豆瓣片单”的卡片样式，提高了浏览的效率；

设计思考：

普遍的卡片样式有很多，但是这个样式，保持封面图的位置不动，可左右滑动剧组照片；

往下滑动的时候头部悬停的还有分类标签可选择，进行筛选； Feed流中穿插了豆瓣片单，其中有创建人、有多少部影片和关注的数量信息组成； 每部影片下面都有推荐的短评和短评的作者；

结语：

设计师将优秀的产品细节收集记录下来，同时认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。也为日后输出优秀的作品当铺垫，对自己能力的提升以及未来的职业发展带来便利。