“互动案例推送:好的设计可见”是对互联网产品体验过程中的一些产品设计案例的互动演绎和分析的专门集合。

他山之石可以攻玉，关注这些好的设计，给自己的设计思路带来灵感，积累设计策略，学习设计总结，希望能带给你一些思考。

01网易云音乐精心关注按钮设计

下图是网易云歌手主页关注按钮的不同状态，涵盖了“不关注”、“关注”和“关注”三种状态。

从这三种状态的视觉状态来判断可点击性，第一种状态明显是可点击的(平面填充按钮)，第二种状态明显是不可点击的(用透明渲染成不可点击)，第三种状态不确定，看起来是可点击不可点击。

如果你像我一样思考，那么这种状态的区分就设计成功了。因为对于产品来说，期望用户关注歌手(活跃社区的正面行为)，但不希望用户取消关注。此时关注状态被设计成弱可点击的样式，用户会认为不可点击，不知道如何取消关注，从而在一定程度上减少了用户的取关行为。他们是否有喜欢的感觉，其实是显而易见的。

上述情况的其他优点:

在你关注该用户之后，歌单列表会展示一组歌手出来，让此时聚焦关注行为的用户乘胜追击关注更多用户若用户取消关注，会进行二次确认，从文案的内容进一步“挽留”用户，毕竟用户看到取关后关注的天数也一起清空心里难免会有些难以割舍

最后，我们来看看下图。在网易云音乐的“我关注的歌手列表”页面，如果要取消关注，需要点击右侧三个图标弹出取消框，然后进行取消操作。

《网易云音乐》我的歌手名单取消关注←

为什么不直接在歌手右边放一个取消关注的按钮？而是采用了上面提到的曲折方式，目的是减少用户的通关。

你觉得很小心吗，哈哈。

02看到一个“暴力弹出”的设计

先看案例，点击下面的协议单选框，触发上面提到的弹出窗口。每个协议都是3s倒计时，倒计时完成后才能查看下一个协议。弹出窗口将自动关闭，下面的协议无线电框将被选中。

如果未选中协议单选框，您将无法进入下一个过程，因此您必须在上面的弹出窗口中单击三个协议的确认按钮。是不是觉得有点邪恶？

点击同意协议，触发“暴力弹出”弹出

是否“够暴力”，但这是真正的商业需求。法律事务需要强制用户阅读协议。我们不能强迫用户阅读协议上的规章制度，但我们可以通过互动的方式让用户不得不“阅读”这些协议。

在实际项目中，我们经常会遇到用户体验和需求平衡的情况。

可以优化吗？

强制协议弹窗也可以是全屏的形式，考虑到协议属于长文本，完全可以以全屏的形式出现，提高用户的阅读体验（可视范围内阅读的内容最大化）阅读到第几份协议，可以在界面上进行标识，切记不要让用户思考！另外，使用这种弹窗的前提是强制用户“过目”的文件不超过3份，每份文件停留的时间3s为宜，想一想，若用户不得不停留10s以上的时间才能进入下一步，那早应该火冒三丈了吧回到单选框的文案设计上，该案例的文案是“同意《xx协议》《xx协议》《xx协议》”，将3个协议的名称都平铺开来了，如果协议的名称很长，那就灾难了，文案可以精简为同意《xx平台支付相关协议》

在上述业务需求的背景下，如果是你，你会这样设计吗？

如果你有更好的设计，可以在下面留言。

03点心前订单进度通知

点餐前先说点餐进度↓“嗨茶”

现在很多饮料都是网上点的，比如茶。让我们分析一下用户订单场景:

客户提前点单，时间往往较为充裕；客户突然想喝，客户可能赶时间也可能接受等待

对一家店铺的订单数量进行分类，分类维度是最近一次订购用户的等待时间。比如(以下数据假设数据不成立):0-20杯正常(最多10分钟)，20-100杯普通等待(10分钟到1小时)，100杯以上超级等待(1小时以上)。

我们看到了这个案子的截图。当订单数量超过一定值时，茶社会显示店铺的订单制作进度。目的是让用户心里明白，以上用户场景2中的用户可以根据自己的可支配时间选择是否下单，所谓给客户主动权。

如果是我，我会以平均等待订单数量作为是否显示进度的门槛。此外，如果时间可以估计，前端还会显示用户的预期等待时间。

04有一点微动效应，这是一个有趣的标签

现在看到App越来越多的标签在点击的时候加入微动作效果，比如美团外卖，小黑鱼等等。

前面的案例介绍了“交互示例推送:好的设计可见(02)-链家App可以点击底部的标签栏返回页面顶部”。当页面被拉到一定高度时，首页标签栏会切换到顶部图标，带有返回顶部的功能。

美团外卖的首页标签也有这个功能，首页图标和Top火箭图标的过渡动画衔接的很好。

上述微动作效果增加了App的趣味性，是用户“微笑”的设计亮点，可以在项目中借鉴。

05 IOS手势-滑动快速选择

IOS手势-滑动以快速选择←

在移动应用中，常用的手势主要有:点击、滑动、拖拽、长按；PC端的主要手势有:点击、悬停、拖拽。

在这种情况下，看看IOS管理图片的手势功能:

点击：单选照片滑动：多选照片

试想一下，如果不能通过滑动的方式快速选择多张照片，用户一张一张地点击会浪费时间。

06重力感应应用，与App有趣的互动

如果您在Live Good应用程序中赢得了徽章，当您转到“我的”页面时，您会发现一个小惊喜。如录屏所示，徽章会随着手机的晃动而晃动，从空掉到地上，就像重力一样，碰到地面就会反弹。

充满惊喜，第一次体验时不时会做手机，很有意思。

但是...

徽章的活动区域占据了这么高的高度，浪费了空的使用。另外，这种互动效果相对来说是“一次性”的，第一次体验的用户会被吸引。在“戒瘾”之后，他们会觉得这并不稀奇，之后的效果就微不足道了。

我的建议是，有趣的互动可以酌情保留。如果保留的话，可以适当缩短徽章活动区的高度，重要信息(如用户主页)空可以给予更多的展示空间。

07新地址交互方案总结

“菜鸟站”地址智能识别←

“菜鸟站”地址输入联想↑

在“JD”应用新地址的交互体验之后。COM”“淘宝”“菜鸟站”，最后发现“菜鸟站”更智能，更快捷，更方便。

用户创建新地址有两种情况。一种是手动输入熟悉的地址，比如某家公司的地址；另一种是给别人送东西。在这种场景下，别人往往会先把地址发给我们，然后我们希望直接复制到页面上，一键生成。

淘宝不能智能识别地址，JD。COM的地址识别不够智能。“菜鸟站”除了智能识别用户复制粘贴的内容为姓名、手机号码、地址外，还可以识别图片上的地址信息。

另外，《菜鸟站》在地址栏手动输入地址后体验最好，可以自己体验。

是否可优化？

当用户输入新的地址页时，执行复制识别。如果读取到用户已经复制了地址，则可以产生一个对话框来提示用户是否粘贴它。如果是这样，结果将在页面上被智能识别。

如果看“菜鸟站”里的原始操作，用户需要完成三个步骤:

点击智能录入地址按钮点击输入框粘贴地址点击右下的确认图标（长得像回车键）提交给系统进行识别

按照优化方案，一步就够了。JD.COM采用了该计划，如下图所示:

摘要

用户新建地址更加智能化，比如智能识别地址、地址输入联想等；表单填写，若存在用户复制文本粘贴的场景，考虑加入系统自动识别。

08设置列表项前后状态的情况

“荔枝App”账户设置←

设置中经常使用列表项。看到这个案例的截图，“绑定账号”、“绑定手机”、“实名认证”处于“未完成”或“完成”状态。布局策略是“左侧设置主题，右侧设置状态标志”。

例如:

绑定账号：已绑定的账号类型图标正常显示，未绑定的账号类型图标置灰显示，这样用户就不需要进入下个页面才知道哪些账号已被绑定手机绑定：未绑定用文案加警示图标，已绑定则是文案加成功图标实名认证：同上

09可区分有复印要求的文本

这个案子不废话。在项目列表中，可点击状态(如品牌颜色复制+复制图标)通常是为需要复制的文本内容设计的。

在上面的记录屏幕中，用户经常需要订单号来查询订单信息，或者需要物流号来查询物流状态，所以在这里，用户可以直接点击订单号或者快递单号来完成复制，App通过toast通知用户已经复制到剪贴板。

10你可以在绿洲App里偷懒不用丢评论？

微博“帝子”绿洲是一款比较小的社交App，专注于生活分享。

在主页上，你关心的博主分享的信息流会被自动推广。在快速浏览过程中，您可以对一些共享内容进行评论。点击“绿洲”WOW按钮后，系统会自动生成副本。再次点击WOW，快速切换复制内容。

从自动生成的评论来看，都是正面内容。后台应该有WOW评论库，用户点击后可以随机选择一个评论内容显示。

从用户体验的角度来看，可以通过点击进行评论，无需输入内容，快捷方便。

但从用户意图来看，真正打算评论的用户会选择这种方式吗？毕竟自动生成的评论内容模板是统一的，这种评论在评论者看来有点“不真诚”。

看了一些比较热门的评论，大部分是用户独立输入发送的，很少有评论是WOW发送的。

当然，如果是自己的产品，可以判断一下“WOW”功能是不是真的太鸡了。