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

UI+交互的UX设计师,或者交互+产品的产品设计师,在未来将会更受青睐。5G时代网速会更快,屏幕交互操作变多,交互和体验就更加重要,懂交互体验的UX设计师,在未来会有更好的发展-日常点滴积累总结。未来不再细分UI跟交互设计岗位,二者将合为一体,所以UI设计师掌握交互思维势在必行。

相关文章:

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

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

-01.微博、Facebook

微博,Facebook 的点赞长按会出现小彩蛋,长按出现各种小表情,比起正常的点击高亮,增加用户情绪态度的表达,打破常规,提高用户注意力,并产生共鸣。

u2heopzjed2.jpg插图

-02.iPhone版Chrome

iPhone版Chrome,页面下拉时可同时左右滑动,选择关闭、刷新、打开新窗口三个操作。整个过程交互动效很流畅,操作愉悦感很强。

mwtygs1vlux.gif插图(1)

-03.微信

微信将表情模块的设计进行了调整。使原本需要左右切换选表情的方式改成了上下滑动,大大降低了误操作率。之前只要一滑动,就有可能点击选中了某个表情。上下滑动也更符合用户手势操作。

tfn2vz44sie.jpg插图(2)

-04.知乎

通过摇晃手机可以在任何页面呼出反馈页面,这个功能算是隐藏的比较深了,但是如果发现了就是惊喜,也提高了操作的效率。点击快速反馈,会截取当前页面,同时可以对截图进行标志,缩短了用户反馈操作路径,非常好的体验设计细节!

rgk5xqlfqwk.jpg插图(3)

-05.百度网盘

下拉刷新提示文案采用情感化设计,早,中,晚文案各不一样,感觉做的就是一个很有温度,有情感的工具,拉开了与其他产品的差异性。

sp0msgk2i32.jpg插图(4)

-06.小红书

在关闭手机流量后,各大APP的处理方式是这样的如右图所示,这种方式存在缺陷,用户点击“设置”>“蜂窝网络”>找到APP>打开开关,可见操作路径之长,而且用户要是点击不好,直接关闭弹窗,需要退出APP,重新打开手机设置,更不方便,路径更长。右图小红书这种处理方式很贴心,操作路径也短,真正解决了用户痛点。

qnuyy35nmvv.jpg插图(5)

-07.快手

快手左滑切换出作者的作品列表(缩略图)。这么做用户更加沉浸,并且增加了创作者其他作品的曝光率;再次左滑呼出作者个人中心

nuiugh4i3cf.gif插图(6)

-08.百度翻译

底部Tab切换过渡的很自然,与市场上绝大部分产品点击闪现区别开来,拉开了与其他产品的差异性。

lev1yizxpwe.gif插图(7)

-09.微视

微视刷视频添加泡泡贴,当输入的文字超过限定字数时,气泡框会左右摆动提示字数超出限制了,可以说是非常直观的反馈方式。

zkzodh301pe.gif插图(8)

-10.QQ音乐

QQ音乐,长按返回键可直接返回最上级页面,这个隐藏的小交互解决了用户一步一步返回上一级的痛点,缩短了操作路径。

t14ymzpe3mt.gif插图(9)

-11.酷狗音乐

酷狗音乐,单击tab上中间音乐播放按钮进入歌曲详情页,长按tab上中间音乐播放按钮会弹出四个常用的快捷操作功能键,收藏、播放暂停以及切歌,拖动滑杆调节音乐播放进度,算是比较新颖的交互方式。

zt3q4kikgkh.jpg插图(10)

-12.iPhone键盘

苹果手机自带的系统键盘,在九宫格简拼音键盘-英文状态下,双击锁定键可以锁定大写,以往我都是点一个字母锁一次,很繁琐的操作,在拼音状态下,长按键盘可以快速选择字母,这些隐藏的交互,提供了更好的体验。

2rg5v3t1nnc.jpg插图(11)

-13.马蜂窝

马蜂窝旅游 APP 底部标签栏采用了一种新的设计方式,底部tab采用白色半透明背景悬浮,主要展示首页、发布、去旅行。上滑浏览时首页和去旅行tab收缩隐藏,上滑停留或下滑时展开,带给用户更加沉浸式的体验,增大浏览视野。

11adnjtz052.jpg插图(12)

-14.美团

a.美团外卖APP底部标签栏选中状态跟以往不同,打破常规的做法,选中状态图标整体放大上移,超出标签栏高度;b.品牌效应传递,提取了logo袋鼠的嘴巴元素,应用于图标、按钮、选中标签上,与竞品拉开差异性。

gfw3wqbxbm1.jpg插图(13)

-15.爱奇艺

爱奇艺首页电影封面支持手势长按预览视频,用户再也不用点击进详情预览再退出了,非常方便,简化了操作路径,提高了用户体验。

mtdxz3iza2u.jpg插图(14)

-16.iphone短信、爱奇艺

iPhone手机短信消息列表、爱奇艺“看过”的的历史列表可通过双指拖动列表快速选择,及其方便同时也提高了操作效率,未来这种通过手势交互的将是种趋势

toihnhdudcl.gif插图(15)

jzex13ewcnz.gif插图(16)

-17.高德地图

高德地图,夸克浏览器操作重心下移,更好地适应了如今大屏、全面屏的手机硬件趋势,可以帮助用户减少手势变换,也是“为拇指而设计” 的体现。

i3ib30xfh5c.jpg插图(17)

eikytl1vdd0.gif插图(18)

-19.抖音

抖音,相比其他应用对空页面的处理:插图+文案形式;抖音在空页面的设计上更走心,摒弃显而易见的空状态文案提示,采用带有“行动性指令“的轻交互动效来进行用户引导,让用户快速的进入到产品使用中,减少新用户流失,提升用户体验,同时提高了业务转化。

mlusvm5y142.jpg插图(19)

-20.躺平

躺平,与普通的空状态设计相比,把整个空状态页都当做一个场景去勾画,配以细节创新有趣的文案,可以为用户带来惊喜与视觉冲击。

kolbteafcm2.jpg插图(20)

原文地址:站酷

作者:U格子

人已赞赏
UI设计

Material Design About shape 形状指南

2020-10-13 4:04:40

UI设计

下拉菜单设计的7个技巧

2020-10-13 18:06:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索