交互例推:好设计看得见(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”,即交互设计。

网友评论
相关阅读
要是用冰糖,真的是一步错步步错,导致后面红烧肉做出来又苦又黑哦

要是用冰糖,真的是一步错步步错,导致后面红烧肉做出来又苦又黑哦

说到红烧肉,相信大家都不陌生,它可是一道经典的名菜,拥有了肥

大冷天,大冷天儿子早餐就爱吃生煎云吞,外酥内软,吃瘦肉补铁的效果要比吃蔬菜好,不怕冷

大冷天,大冷天儿子早餐就爱吃生煎云吞,外酥内软,吃瘦肉补铁的效果要比吃蔬菜好,不怕冷

家里的早餐都是小编做,每天都要想着如何保证全家人早餐营养的全

炸花生,千万别直接下锅,所以看完这五个步骤之后,那么你就可以炸出又香又脆不回潮的花生米

炸花生,千万别直接下锅,所以看完这五个步骤之后,那么你就可以炸出又香又脆不回潮的花生米

炸花生,千万别直接下锅,做好这5步,炸出来又香又脆不回潮。说

去哪里吃呢,Fleuri作为一家安徒生故乡的,有多好吃吧

去哪里吃呢,Fleuri作为一家安徒生故乡的,有多好吃吧

大年初四,丹麦君给您拜年啦!过年的头等大事儿,当然就是…吃

我们今天的主角也是一种香料型蔬菜,不过它可要比香菜好吃百倍,你们喜欢吃茴香吗

我们今天的主角也是一种香料型蔬菜,不过它可要比香菜好吃百倍,你们喜欢吃茴香吗

它是一种香料型蔬菜,比香菜好吃百倍,你们吃过吗?蔬菜是农业生

然后把饺子皮对折,就成了一个饺子

然后把饺子皮对折,就成了一个饺子

新年不光要团圆,还要有新气象,吃饺子取“更年交子”来年交好运

松鼠探店,一起来到这家餐厅探秘招牌美食寿司

松鼠探店,一起来到这家餐厅探秘招牌美食寿司

新京报讯(记者 冯毅)前些时间,《北京米其林指南》的发布成为

软糯的外皮吃起来也有股淡淡的的南瓜清香,蒸熟就可以上桌,新年试试看

软糯的外皮吃起来也有股淡淡的的南瓜清香,蒸熟就可以上桌,新年试试看

新年 快乐金灿灿的小南瓜,外形精巧可爱,软糯的外皮吃起来也有

他们家是从早上6点营业到凌晨3点半,就是阿拉上海

他们家是从早上6点营业到凌晨3点半,就是阿拉上海

今日节目编导:王胜阳星座:狮子座随身携带氦气桶的气球在某餐饮

分别是三鲜馅,过年包三鲜馅,多加这1步,以便更入味,更多汁

分别是三鲜馅,过年包三鲜馅,多加这1步,以便更入味,更多汁

年夜饭的餐桌上肯定少不了饺子的身影,饺子原名“娇耳”距今已有