产品体验思考

来源:设酷网     作者:日期:2020-08-28     浏览:71    评论:0    
  
核心提示:不知道从什么时候开始养成了这个习惯,平时使用App的时候会截图一些优秀的设计,包括UI、交互、动效和一些特殊的功能。看到这些优秀的设计会非常兴奋,经常会发脉脉和大家一起分享交流。主要目的是希望自己能够多一些思考,吸收这些优秀设计的原理,从而学以致用。这次


不知道从什么时候开始养成了这个习惯,平时使用APP的时候会截图一些优秀的设计,包括UI交互动效和一些特殊的功能。


看到这些优秀的设计会非常兴奋,经常会发脉脉和大家一起分享交流。主要目的是希望自己能够多一些思考,吸收这些优秀设计的原理,从而学以致用。


这次将这些零散的点整理出来,也是希望能和圈里的大佬们一起交流一起学习,发现更多更好的设计。




01)得物(毒)APP用户分享内容


APP关注模块的用户发布动态,五张图和六张图的排版样式很独特,猜测有两种原因。

一是因为毒的主要用户人群是追求时尚潮流,向往个性年轻人。所以在设计排版上也区别于一些常规的动态排版方式,以体现产品的个性化定位。


二是可能有一定的数据支撑,比如多图情况下常规的排版方式,使得图片比较小点击率低,用户更愿意点击大图,大图在信息流中更容易获得用户的注意力,从而提升该条动态的点击率




02)花瓣_手势横滑的交互设计


花瓣APP进入图片详情页,可支持左右横滑切换,当手指在页面中间左右滑动时,图片左右切换;当手指在屏幕边缘右滑,或者在当前图片下拉时则触发返回,返回瀑布流。细致友好的交互体验很大程度上提升了用户的浏览效率


APP的四个Tab使用纯ICON的形式展示,区别于其它产品ICON+文字的展示形式,并且背景使用毛玻璃的效果,整体设计风格新颖独特。




03)QQ音乐_推荐视频模块


QQ音乐推荐视频模块,每次浏览到新的视频,大概三秒之后,除了视频本身其余信息全部置灰。为用户提供沉浸式的浏览体验,使其专注于视频本身。


细微的小功能体现出了产品在设计过程中,真实的考虑到用户的使用场景,将用户需要的最核心的内容最大化呈现在用户眼前。




04)QQ音乐商业模块_节省页面空间的小交互


QQ音乐商业模块,了解权益使用展开收起的交互形式,在有限的页面空间中提升展示效率,而且这种展开收起的形式代替了页面之间的跳转,用户体验更流畅。权益的ICON和下方的商业卡片选中态,以及按钮的微渐变样式,统一使用产品品牌色,视觉效果统一简洁。




05)GoFun出行_寻车功能设计


GoFun出行是一款共享汽车的产品,由于车量较少,停车位置不固定,定位精确度低。所以在用户需要用车的场景下,不容易立刻找到。


汽车的左上角有一个小喇叭的ICON,当用户找不到车时。点击小喇叭会发出“哔哔哔~”三声巨响,此时以声音辨别位置,可以精确的帮助用户快速寻到目标车辆。此功能的设计真正的解决了用户在现实场景中的问题。





06)小红书视频_关注按钮设计


小红书里,用户点击查看视频,当视频即将结束,“关注”按钮往右展开变为“立即关注”,展开的小动效立即吸引用户的关注,从而提升用户关注转化率


类似的交互微动效产品中用的恰到好处,既能吸引用户注意力进行操作,同时又能做到不过多的干扰用户。如何更好的利用这种微动效产品业务助力,也是日常需要关注和思考的重点。




07)Keep_运动达人主页的推荐关注设计


进入Keep达人主页,在上滑浏览过程中,会从底部弹出关注按钮,如果不点击大概过三秒左右自动消失。


按钮的设计样式异常醒目,从底部弹出的动态效果做的非常细腻,左边头像右边关注ICON,搭配简洁的文案提示,可以有效的吸引用户注意力促进转化。


按钮弹出的时机和消失的时间很符合当下的使用场景。用户既然进入达人主页浏览动态,表明非常感兴趣,这个时候推荐关注的转化成功率相对就非常高。而按钮在弹出后大概三秒左右自动消失,则完全做到了尊重用户意愿,不强制不打扰。细节处做的很用心。





08)KEEP发动态时的贴纸小交互


Keep发动态时,在图片编辑模块有个“贴纸”的功能,删除贴纸的小交互体验非常顺畅。


如下图,首先完成添加贴纸,其次点击要删除的贴纸,点击的同时图片上出现删除ICON,且页面中除了图片和贴纸之外的所有信息均消失,当贴纸被拖到删除ICON的位置时,删除按钮的盖子打开,然后关闭完成删除动作。




09)汽车之家_智能问答IP设计


进入汽车之家的智能问答页面,顶部的智能机器人形象会模拟真人动态,进行眨眼和转头的动作,似乎在耐心的等待用户提问题,互动感极强,简单的交互微动效增强了产品趣味性,同时给用户带来了惊喜的体验。




10)汽车之家_ICON的撞色设计


汽车之家的品牌主色蓝色,辅色是橙色,两种颜色在色系上属于对比色,搭配使用会产生很刺激的视觉效果。ICON的设计则采用这两种颜色搭配,两种色块使用渐变的样式叠加在一起,细节的处理也比较丰富,每一个ICON都显得特别精致,非常吸引眼球。


另外这种设计方式也起到了品牌宣传的作用,颜色是很容易被记忆的一种元素,将汽车之家的品牌蓝透露在每一个ICON上,潜移默化的则加深了用户对品牌的记忆。





11)汽车之家_广告位设计


汽车之家的首页推荐模块,在首屏Baner的下方插了一个高度特别小的广告位,文案配图都很简单,右边使用圆形按钮“GO”引导用户点击。印象中的广告位点击之后都会跳转到新的页面,进行大篇幅的洗脑。但是这里点击之后在其下方直接弹出广告的详情卡片,并且带有收起按钮。


这种设计形式有几点好处,首先是在首页首屏的广告可以获得很大的曝光量;其次由于广告位比较小,所以占用首屏的黄金位置比较少,对用户的干扰也就比较低;再者对于点击广告的用户,在当前页可直接展开查看广告详情,展开之后若不感兴趣可直接关闭或者上滑浏览推荐信息,很大程度的减少了页面之间的跳转。


从业务角度出发,打造具有商业价值还能兼顾用户体验的设计。





12)百度地图_路线截屏功能


记得最早坐地铁的时候,会提前使用百度地图查好路线,然后手动截屏保存至手机相册,或者发到微信的文件助手。


当时这样做的原因有两个,一是担心地铁信号不好,关键时刻路线加载不出来;二是在地铁行程中大部分时间停留在微信,发送到微信为了减少反复切换APP的次数;还有一些类似省流量省电等小细节的考虑。


而且当地图路线很长时就需要截很多张图,查看时候就比较麻烦。但是百度地图的截屏功能完全解决了我的痛。一键截屏,将一整条完整的出行路线保存至手机相册,方便随时随地查看。而且一整条完整的路线信息,查看的时候一目了然。结合用户真实使用场景进行的设计,既解决用户痛点,同时也能增强用户粘性





13)高德地图引导页


很多产品在用户初次使用的时候,都会进行一些偏好选择。作为出行工具,高德地图在开屏页也设置了用户出行偏好的选择,分为自驾和公共交通两大类,分别用小卡片式的精美插画表示,清新的画面表意直白易于理解,打开产品的第一时间就让用户感受到了产品的用心。




14)平安好医生_答谢功能设计


平安好医生的红包答谢功能,无论对产品还是用户(医生)都起到了一个积极的正反馈作用。首先用户既然使用红包答谢,表示对问诊比较满意,一定程度上增强用户粘性。其次医生收到答谢红包备受鼓励,从而刺激其付出更优质的服务。


对优质的产品服务付费,才更能够刺激更多的产品持续贡献更优质的服务,从而形成一个更加稳定优质的产品形态。





15)夸克_智能语音模块的情感化设计


夜间进入夸克浏览器的消息模块,会有智能语音提示“夜深了,注意休息”,并提示今日剩余时间,或者是出现一些冷知识、科普内容、老黄历、古诗词等内容,上边的图形模拟眼睛的形态发生一些动态的变化,传递出一种智能科技的感受。


这种情感化的提示和图形微动效出现在页面中,让原本冰冷的工具型产品变得有温度,同时增加了产品趣味性,无形中拉近了产品与用户的距离。




16)夸克浏览器_创意Toast设计


夸克浏览器真的是能不断的给用户带来惊喜,在逐渐的使用过程中,很多细腻的交互和走心的功能像一个个彩蛋等待你去发现。


长按首页的站点图标会出现添加ICON,点击进入站点编辑页。可以看到罗列出的很多咨询类APP,点击则添加到首页。添加成功的同时会有Toast提示添加成功,夸克的创意就在于此,将ToastAi智能助手元素结合在一起。点击添加则在页面底部弹出一个小的标签,两只眼睛眨巴眨巴的上下左右看着,提示“已添加至导航”。再次点击,以同样的方式提示“已移除导航”。这种创意点结合微动效带来的意外惊喜,无形中激发了用户对产品进一步探索的兴趣。另外也保持了产品中设计的统一性,将智能助手的元素融入到每一个页面细节中,同时也传达了夸克ai智能的一面。




17)夸克浏览器_细腻的小交互设计


最近几天疯狂迷恋夸克浏览器,似乎总有一些新奇的设计等待被探索。以下列举三例个人觉得有意思的小设计,欢迎大家一起讨论。


1、在图1首页的空白区域下拉,直接进入图2的输入状态。此处设计可能考虑到大屏手机单手操作的难度,手指无法轻易触碰到搜索框,所以添加一个下拉直接输入的小交互。为方便大屏手机用户使用。


2、点击图3推荐卡片的加号进行关注,点击之后“加号”变为图4的“差号”,再次点击差号则是取消关注。以一个常见的图形变化表示关注和取消,代替了传统的按钮功能,看似简单却能体现出设计师独特的思考。


3、图5的推荐页面,点击任意加号进行关注,常按相应模块则变为图6“添加到导航”的按钮样式,点击则直接添加至首页导航,交互流畅,设计样式简洁新颖。




18)UC浏览器_手机号登录页面设计


UC浏览器登录页面,设计形式极简,页面仅保留了最核心最重要的信息。点击输入手机号,完成输入之后获取验证码变高亮,点击获取验证码,输入后直接登录,交互非常流畅。


像这种清晰有效的设计,往往能够使用最少量的信息来表达页面的意图,从而提高用户和界面的沟通效率。实际工作中可以不断的尝试总结,提升产品易用性和使用效率





19)京东_截屏功能思考


京东app内手机截图,调起三个功能,分别是一键分享、问题反馈和相似商品。不同的app内截图所触发的功能不同,具体根据用户的使用场景进行设计。


比如京东,作为电商平台,用户截图的意图大致包括以下几点。一是发现喜欢的商品分享给好友或是让好友帮忙抉择;二是想去其它同类平台查看同款产品价格;三是发现产品bug要吐槽,或者是分享给客服解决问题等等。


这些都有可能是用户截图之后想要进行的行为,所以产品根据当下的场景设置了相应的功能,为用户铺垫了接下来的操作路径。很典型的根据用户的使用场景进行的产品设计


截图后弹出悬浮卡片,截图内容在中间显示,三个功能依次在下边排列,卡片顶部使用京东吉祥物Joy,增添产品的趣味性。整个卡片设计非常精美。





20)MOO日记_情感IP设计


MOO日记的IP形象是一个简笔画小熊,质朴的线条勾勒出的造型,传达出一种笨拙可爱的感受。出现在产品的很多场景中,以拟人化的形象和对话的方式引导用户互动,给产品增加了很多的趣味性和温度。


一个优秀的IP形象可以加深用户对产品的记忆,从而有效的与其它同类竞品区分开。在产品前期设计中,可以尝试根据产品定位和属性设计出属于自己产品IP



以上。

最后分享一句话和大家共勉,“觉得困难的时候逼自己一把。真正让你受益的,是最朴实的认真和最枯燥的勤勉”。

勤思考,多动手,希望大家都能抵达心之所向的远方......



本文来源:产品体验思考    http://www.sjschina.com/archives/20837.html
相关评论