交互例推:好设计看得见(3)

日期:2019-12-13 13:52:43   来源:互联网   编辑:小狐   阅读人数:481

交互例推:好设计看得见是我在体验互联网产品过程中对一些产品设计案例进行交互推导与分析的专题集合。

交互例推:好设计看得见(3)(图1)

交互例推:好设计看得见(3)(图2)

上述案例其他优秀之处:

交互例推:好设计看得见(3)(图3)

是不是感觉很小心机啊,哈哈。

02 来看一种“暴力弹窗”设计

交互例推:好设计看得见(3)(图4)

协议单选框没有勾选的话,就无法进入下一步流程,所以上述弹窗里头的3份协议的确认按钮你是不得不点的,是不是感觉到一丝邪恶的气息。

交互例推:好设计看得见(3)(图5)

在实际项目中,会经常碰到用户体验和需求相平衡的案例,这个案例便是。

是否可以优化?

回到单选框的文案设计上,该案例的文案是“同意《xx协议》《xx协议》《xx协议》”将3个协议的名称都平铺开来了,如果协议的名称很长,那就灾难了,文案可以精简为同意《xx平台支付相关协议》

在前面提到的业务需求背景下,如果是你,你会这样设计吗?

03 喜茶点餐前订单进度告知

交互例推:好设计看得见(3)(图6)

客户提前点单,时间往往较为充裕。

客户突然想喝,客户可能赶时间也可能接受等待

将一个门店的订单量进行分类,分类维度为最新下单用户的等待时间。比如(下面的数据为假设数据并非真实值)0-20杯为正常(最多10分钟)20-100杯为一般等待(10分钟至1小时)100以上为超级等待(1小时以上)

我们看到案例截图,当订单量超过一定的值时,喜茶会将门店的订单制作进度进行显示。其目的是让用户有个心里预知,对于上述用户场景二中的用户可以自己根据自己可支配的时间选择是否下单,所谓的把主动权交给客户。

如果是我,我会将一般等待的订单量作为是否显示进度的阈值,另外如果时间可以进行预估,前端也将用户预计要等待的时间显示出来。

交互例推:好设计看得见(3)(图7)

美团外卖的首页栏同样有该功能,首页图标和Top火箭图标的过渡动画衔接地很好。

以上通过微动效的形式增加了App的趣味性,属于让用户“会心一笑”的设计亮点,可以在项目中进行参考借鉴。

05 IOS手势-通过滑动实现快速选择

交互例推:好设计看得见(3)(图8)

IOS手势-通过滑动来实现快速选择↑

滑动:多选照片

06 重力感应应用,和App进行趣味互动

交互例推:好设计看得见(3)(图9)

如果你在好好住App中获得过徽章,进到我的页面你会不经意间发现一个小惊喜,如录屏所示,徽章会跟着手机的晃动而晃动,从空中掉入地面,有地心引力般,与地面碰撞的时候还会有弹跳的效果。

充满惊喜感,初次体验会不时把弄手机,很有趣味性。

但…

徽章的活动区域占据那么高的高度,浪费了空间利用,另外这种互动效果比较“一次性”初次体验的用户会被吸引,等“过完瘾”之后就觉得不稀奇了,之后的作用就比较微不足道了。

交互例推:好设计看得见(3)(图10)

交互例推:好设计看得见(3)(图11)

交互例推:好设计看得见(3)(图12)

是否可优化?

若在菜鸟驿站按原始操作来看,用户需要三步走完:

而按优化方案来看,一步即可。京东有采取该方案,如下录屏所示:

交互例推:好设计看得见(3)(图13)

总结

表单填写,若存在用户复制文本粘贴的场景,考虑加入自动识别。08 列表项设置前后状态案例

交互例推:好设计看得见(3)(图14)

荔枝App设置↑

列表项常用于设置中,看到本次案例截图,绑定、手机绑定、实名认证均存在“未完成”或“已完成”的状态。排布策略为“左侧设置主题,右侧设置状态标识”

比如:

绑定:已绑定的类型图标正常显示,未绑定的类型图标置灰显示,这样用户就不需要进入下个页面才知道哪些已被绑定

手机绑定:未绑定用文案加警示图标,已绑定则是文案加成功图标

实名认证:同上09 有复制需求的文本可进行区分

交互例推:好设计看得见(3)(图15)

10 你在绿洲App可以懒到评论都不用输?

交互例推:好设计看得见(3)(图16)

但从用户意向来说,真的有意向进行评论的用户会选择该种方式吗?毕竟自动生成的评论内容模版统一,这类评论在被评论者看来有那么一点“无诚意”

简单看了一些热门的评论内容,大多是用户自主输入发送的内容,通过WOW发送的评论少之又少。

当然,如果是自己的产品,可以通过数据来判断“WOW”功能是否真的太鸡肋了。

写在后面

以上观点带有个人主观性,如果你有建议或者更好的设计方案,请指教。

本文相关词条概念解析:

交互

交互设计,又称互动设计,(英文InteractionDesign,缩写XD或者IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the"interaction",即人工制品在特定场景下的反应方式)相关的界面。交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔·摩格理吉(BillMoggridge)在1984年一次设计会议上提出,他一开始给它命名为“软面(SoftFace)”,由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(CabbagePatchdoll)”,他后来把它更名为“InteractionDesign”,即交互设计。

网友评论
相关阅读
电影夺冠的上映可谓一波三折,本色出演自己,女排精神超越了时空

电影夺冠的上映可谓一波三折,本色出演自己,女排精神超越了时空

夺冠的上映可谓一波三折,先是经历了“春节档”的定档、提档、撤

黎巴嫩候任总理宣布辞职真相是什么?黎巴嫩候任总理宣布辞职令人震惊

黎巴嫩候任总理宣布辞职真相是什么?黎巴嫩候任总理宣布辞职令人震惊

黎巴嫩总理宣布政府集体辞职 总统已接受辞呈中新网8月11日电

“高开炸走”的《沉默的真相》为什么能让这么多人落泪?

“高开炸走”的《沉默的真相》为什么能让这么多人落泪?

隐秘的角落》之后,最近又有一部紫金陈小说的改编剧爆了! 沉默

去年苹果推出iPhone11系列之后,这销量数据足以让他们羡慕了

去年苹果推出iPhone11系列之后,这销量数据足以让他们羡慕了

去年苹果推出iPhone11系列之后,其中规格最低的iPho

美国打压华为是一石三鸟之计,打压三星和台积电等外国企业,重振美国制造业

美国打压华为是一石三鸟之计,打压三星和台积电等外国企业,重振美国制造业

美国对华为采取的一系列措施,看似是在针对华为,其实是也在针对

4G的网速大不如前,具体测速数据表现如下

4G的网速大不如前,具体测速数据表现如下

好像自从去年进入5G时代后,有不少网友反馈,4G的网速大不如

赶在iPhone,12系列的各种消息不断曝光,四个版本命名实锤,以及120Hz到底有没有

赶在iPhone,12系列的各种消息不断曝光,四个版本命名实锤,以及120Hz到底有没有

从爆出的图片可以看出,5.4英寸的版本确实叫做iPhone

红米Note10,5G版本大概率搭载高通骁龙750处理器,那么1599元起还是很有希望的

红米Note10,5G版本大概率搭载高通骁龙750处理器,那么1599元起还是很有希望的

红米在中国市场拥有庞大的用户群体,可以说是众多国产友商难以忽

从5298降至4398,当下市场上大家都热衷于改造屏幕,网友,并且还加入了三种配色

从5298降至4398,当下市场上大家都热衷于改造屏幕,网友,并且还加入了三种配色

今年vivo给消费者带来的5G旗舰,着实让消费者大吃一惊。v

780万名乘客搭乘国内航班,与2019年最繁忙的一天

780万名乘客搭乘国内航班,与2019年最繁忙的一天

南都讯 记者 肖阳尽管全球多数航空旅行市场都因新冠肺炎疫情遭