0文章
0评论
0获赞

产品体验设计-交互篇(一)

720 0

-01.哔哩哔哩

哔哩哔哩评论的时候,在输入之前,输入框显示的文字位符是“说点什么”;但是当你在输入框输入了文字之后,删除不评论的时候,提示文字会变成“不说算了,口亨”,情感化文案设计,符合app调性。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-02.微信

当选择图片数量达到上限后,其余图片置灰显示,对比更加清晰,通过视觉上告诉用户不能再选了

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-03.手机QQ

QQ截图为防止隐私泄露,可以选择隐藏昵称,该操作会将头像、姓名马赛克处理,方便用户保护隐私

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-04.网易云音乐

大屏时代,手势操作越来越重要,网易云音乐歌词介面,可通过双指放大缩放字体大小

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-05.Trip

Trip 应用截图后不仅可以分享,还可以对图片进行文字编辑,涂鸦,马赛克等操作后再分享。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-06.哔哩哔哩漫画

哔哩哔哩漫画App的签到动效,类似在日记本上翻页盖章,映射现实生活场景,同时也会让用户感觉很有成就感!

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-07.腾讯视频

腾讯视频在4g网络环境下播放视频会有两个提示“*M听音频”和“*M看视频”,当选择听音频时候,会切换到一个听音频遛狗的场景,简直是现实生活里的真实写照,极有带入感,也符合用户心智模型。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-08.登录账号提示

每个号ID对应一个用户个人身份信息,对于一些不太常用的应用,登陆之后如果退出,再次登录会忘记之前用的是哪种方式登录,以至于登录后仿佛又是一个新的应用,毫无使用痕迹,以下这些设计就是解决了这个痛点

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-09.抖音

长按视频页面系统根据用户操作手指与屏幕的接触位置,将模态弹窗的操控按钮示在离用户手指最近的地方,使用户在进行手势交互过程中操作动作始终在手指操控舒适区域内,是应对大屏十分友好的体验设计。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-10.微信

微信对用户考虑的很周到,在转账时对金额进行了单位标注,更加直观、清晰,戳中了用户每次转账都得来回数数确认金额的痛点

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-11.音量调节控制

相比传统HUD音量调节,以下这几种调节方式对用户干扰小,潜移默化将音量状态改变反馈融入到介面中去,让用户更加沉浸于产品体验中,非常友好的设计

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-12.喜马拉雅

每次下拉刷新提示文案都不一样,有情感化语言的,有功能引导提示的,无形中增加了设计细节,提高了产品使用体验。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-13.饿了么

饿了么送餐地图页面右下角会出现小手托红包或小手托着橙子的浮层,吸引用户点击,如果用户不需要,手会有拍掌的动效,这种无形中插入的广告形式,对用户干扰小,同时也迎合了此时用户场景,餐后点些有优惠水果或再领个红包下次点餐用的心智模型

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-14.豆瓣

在豆瓣feed流信息详情页,评论的打开和收起只需用户上下滑动就能完成,这种采用堆叠的图层向用户展示他们没有导航到新的屏幕,而是与他们刚刚查看的内容之上进行交互,减少页面跳转。

而且从易用性的角度来说,滑动比点击更受到用户的喜爱。因为点击的区域很小,特别是放在介面左上角,单手操作和大屏手机的用户拇指很难直接触及到,需要更改手机握持姿势或者改为双手操作。可能会有人说,安卓有物理的返回键,用户也很容易操作,简直完美。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-15.简书(抖音、美图秀秀)

现在很多应用都支持天翼账号免密登录,简书、抖音、美图秀秀登录页面高亮的“本机号码一键登录”按钮是整个页面的视觉焦点,点击这个按钮,用户可以不用输入手机号,直接用本机号码进行登录,减少输入手机号码步骤,缩短了用户操作路径

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-16.手机QQ

在QQ空间浏览时,如果有好友给你发了消息,会出现消息的悬浮按钮,点击按钮在页面顶部出现消息详情对话框,点击对话列表即可在当前页面进行回复,进行交互,减少页面跳转。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-17.腾讯视频

腾讯视频iPad端,调节亮度控件采用隐喻设计手法,屏幕逐渐调暗的话,图标会从太阳变成月亮形状,同时会出现“适合夜间观看”提示,具有很好的指引性,与其他竞品做了差异化设计

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-18.Facebook

搜索页面在没有搜索历史记录时,会有一只猫低着头看望眼镜的动画,双眼左右来回观望,疑似在探索,很有带入感的设计

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

-19.腾讯动漫

腾讯动漫APP我的设置-日间/夜间、男女切换开关按钮进行了风格化动效设计,增加了趣味性,符合产品调性。

产品体验设计-交互篇(一)
产品体验设计-交互篇(一)

总结:

交互设计是一门关于用户如何进行操作和使用产品的学科,作为一个具备交互思维的UX设计,很重要的一个目标是帮助用户用的省心,同时要让用户用的开心。

原文地址:zcool

作者:U格子

评论 (0)
请登录以参与评论。
立即登录

产品体验设计-交互篇(二)

638 0

-01.Trip

Trip登录页面输入账号一栏,在用户开始输入时,输入栏底下会出现一些常用的邮箱名,方便用户快速选择 , 提高操作效率。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-02.饿了么

饿了么送餐地图页面模拟现实生活场景,当高温天气地图上会有太阳,营造高温暴晒氛围,阴雨天气地图上是下雨或乌云密布,这种映射现实生活场景,拉近用户与送餐员的距离,给用户更强的代入感,很真实,亲民,这样哪怕送餐员因为天气原因送餐迟了,客户也能相互理解,场景感很强。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-03.QQ

聊天介面底部工具栏“图片”和“表情”图标在深夜会分别变成月亮跟闭眼的小表情,可谓是很细很细的细节设计了。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-04.iOS13

iOS 13新增了一种操作视图:称为Sheet,操作的视图会被缩小,同时淡化置于新跳出视图的下方。该视图有助于用户明确信息的层级,便于用户找回此前被暂停的任务。关闭视图有以下三种方式:从屏幕顶部向下滑动;当卡片内容滚动到顶部时,从屏幕上的任何位置向下滑动 (单手操作的);点击按钮。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-05.支付宝

大数据,AI人工智能时代,工具类应用不再是冰冷的工具,进入支付宝金刚区工具功能模块页面,会提示“是否将某个常用功能添加到首页”,很人性化,很懂你的一款应用,同时若首页应用数量达到上限,会建议你替换掉某个不常用,这种读懂用户心智的应用,很暖心。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-06.UC浏览器

UC浏览器,首次进入浏览器,在进行UC头条形象选择时候,结合具体场景,向用户展示了选择标签后对应的形象,将文字图形可视化,提升了用户对类型标签的选择。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-07.支付宝

在与好友聊天时若输入数字信息,则会提示给好友转账xx元,这种根据用户的操作行为,预判出用户下一步即将要执行的目标,提前将用户的操作目标展示出来。可以进一步地减少用户的操作路径,方便用户操作。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-08.Trip

Trip首页背景图片利用了手机系统自带的陀螺仪功能,当左右晃动手机时,背景图片也会跟着动,增加了产品的趣味性。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-09.WPS

每个ID号对应一个用户个人信息,对于一些不常用的应用,一旦退出登录,再次登录会忘记之前是用哪种方式登录,以至于登录之后仿佛又是一个新的应用,毫无使用痕迹,wps在用户退出登录之后会记忆用户上次使用的登录方式,方便对号入座。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-10.QQ

QQ底部tab看点功能模块,在搜索页面点击清除搜索记录图标,将弹出的二次确认删除对话气泡显示在离用户手指最近的地方,相比以往以模态弹窗展示在页面中间,缩短了用户操作路径,操作动作始终在手指操控舒适区域,对大屏的体验十分友好。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-11.支付宝

在往上刷朋友列表时,会有个toast提示“找人转账”,预判用户可能正在寻找好友,点了跳转选择朋友列表,提前将用户的操作目标展示出来,缩短了用户操作路径,提高了操作效率。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-12.QQ音乐

tab_bar标签栏支持左右滑动切换,并且不会与页面其他交互手势有冲突,对于大屏用户简直就是福音,不用来回移动手指位置切换tab,体验十分友好。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

13.今日头条

当点开一个页面,在浏览完信息后需要返回到上一层时,一般的APP提供的做法是点击左上角返回图标,或者在屏幕左半屏滑屏返回(iOS)。今日头条支持整个屏幕进行滑屏返回,并且底层页面有种纵深效果,这个交互看起来虽小,却对大屏用户体验有着巨大的提升。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-14.微信

不知道大家有没有遇到这种情况,在跟领导或者恋人聊天发表情的时候,会小心翼翼的浏览表情库,选择合适的表情发送,生怕发错了,为了防止发送错误的表情,微信可以利用长按来进行大图预览。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-15.Snapchat

Snapchat,下拉刷新情感化设计,向下拉到不同距离,给出不同的情感化状态反馈,符合产品调性,同时增加了趣味性。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-16.支付宝

设置功能里面对于启动app是否授权解锁设置做的非常细腻,友好,用动画的方式给用户传达三种不同方式的差异性,表达方式很直观,符合用户心理认知,减少了用户学习成本,尤其对于一些比较复杂的功能,静态图展示可能很难达到预期。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-17.网易云音乐

登录页面,在没有勾选“用户服务协议”点击立即体验,有toast提示请先勾选协议,同时协议栏也会左右摆动,视觉引导性更强。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-18.微信读书

微信读书,当用户选中文字想翻页复制或者标注时,拖动选中到最后一个字符时,会有个toast提示长按翻页,方可继续选择,可操作性强。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-19.微信

微信,是一个很注重用户体验的产品,不盲目追随模仿趋势,在微信更换头像的弹窗中,有一项是“查看上一张头像”,照片换来换去,还是觉得之前的好看,好比如设计师,做了多搞设计稿件,最终还是觉得第一搞好,这时候,微信就发现了用户的需求,实现此功能。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

-20.iOS13

iOS13,底部弹窗放弃了之前的十字交互方式,改成了上下滑动,毕竟横向的信息触达率太低,竖向的展示展示更便于用户浏览、查看信息,也更符合用户操作手势,也便于日后功能拓展。

产品体验设计-交互篇(二)
产品体验设计-交互篇(二)

原文地址:zcool

作者:U格子

评论 (0)
请登录以参与评论。
立即登录