1. 主页 > 设计资讯 > 行业动态

互动例子:好的设计可见一斑(2)

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

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

互动例子:好的设计可见一斑(2)(图1)

01微信阅读计时功能(列表选择器,单选)

互动例子:好的设计可见一斑(2)(图2)

为什么会有定时功能?

根据易观提供的数据,中午(12: 00 ~ 14: 00)和晚上(21: 00 ~ 23: 00)是微信读者的活跃时间。这两个时段接近用户休息时间,有用户午休前或晚上睡觉前看书或听书的场景。这样的话,定时关掉听力也是必须的功能。

微信阅读计时用的组件有哪些?

选择器列表选择器(单个选项)

如何调用选择器:点击定时按钮,从页面底部调用选择器

如何折叠选择器:点击“蒙版图层”或“折叠图标”折叠选择器

获取值:单击一个选项后,该选项将立即生效。请注意,此时选择器不会被折叠(您必须单击折叠图标来折叠选择器),并且结果将被反馈给计时按钮的副本(如果计时,倒计时将开始)

样式规范:列表选择器“选项区”需要定义一个固定的高度,选项数超过“选项区”的高度。上下滚动垂直滚动条查看所有选项

02你注意到IOs飞行模式切换的点动效果了吗?

互动例子:好的设计可见一斑(2)(图3)

IOS飞行模式的开启和关闭会在导航条左侧产生微动效果,一定不要注意。

因为我们通常通过快捷窗口切换飞行模式,快捷窗口有一个遮罩层,遮挡了背景,所以我们无法注意到微动效果。

互动例子:好的设计可见一斑(2)(图4)在IOS系统设置中开启飞行模式时,可以看到飞机在状态栏左上角缓慢出现,关闭后慢慢消失。

 

好一个小惊喜!

03服务授权强制弹出内容设计规范

第一次使用App时,通常会有一个强制弹出窗口,供用户阅读并同意协议,尤其是需要获取手机号码等用户隐私信息的应用。

互动例子:好的设计可见一斑(2)(图5)

“菜鸟站”许可协议弹出窗口←

大部分用户不关注协议内容,但从法律角度来说,协议内容必须告知用户,用户有知情权。

因此,强制弹出窗口的内容设计尤为重要。内容框架包括以下几个部分(第一次以菜鸟站的应用为例):

标题副标题:告知目的,这里是需要获取用户授权正文:授权的内容,对协议的内容提取摘要,用户可以不用看冗长的内容就可以明白协议链接:提供协议文字链,点击链接打开新页面,可以浏览协议正文

如果用户取消授权,将进行第二次确认,第二次确认将告诉用户结果。通常会委婉的告知用户取消授权会影响应用的正常使用。

互动例子:好的设计可见一斑(2)(图6)

“菜鸟站”取消第二个确认弹出窗口的授权←

综上所述,协议授权需要考虑授权的内容设计和取消授权后的二次确认。

04网易云音乐听音乐滑动手势切换

互动例子:好的设计可见一斑(2)(图7)

不知道大家有没有注意到,网易云音乐可以通过左右滑动唱片来切换上一首音乐和下一首音乐。

如果你的手机是IOS系统,可以直接向右滑动返回上一页。IOS用户习惯了这个手势。

网易云音乐的录制面积不小也不大。如果App不告诉,很多用户甚至老用户都不知道在录音区左右滑动可以切换音乐。

所以App可以指导记录区手势的设计。

但另一方面,也不是必须的,因为上一个按钮和下一个按钮的功能很明显,很容易切换。

滑动手势往往带有切换的功能。那么,滑动手势是为了记录而设计的,以掩盖一致认知的合理性吗?

05链家全屏合并授权法案例推导

互动例子:好的设计可见一斑(2)(图8)

你有过这样的经历吗?打开一个应用程序,几个对话框就弹出来了。某个App想给你发通知。允许吗?某些应用程序允许无限数据吗?……

许多应用程序使用这种方法,一种播放弹出窗口的授权。

我们来看看上面的案例记录屏,链家App的授权方式有点清爽。

应用程序首次启动后,链家应用程序以全屏形式通知用户对授权内容进行分类和显示,这是默认选择的。如果用户不想打开某个权限,可以取消选择。同时给出了协议文本链。

最后一个按钮允许用户提交他/她的授权选择,并在提交后自动进入应用的主页。

根据前面的交互例子,[03]服务授权强制弹出内容设计规范也需要用户授权,是弹出的形式,和链家不同,但没有更高的,两者的应用场景也不同。

06了解两种页面加载模式(活动指示器+框架屏幕)

互动例子:好的设计可见一斑(2)(图9)

在使用App的过程中,每次进入页面,App都会请求服务器获取数据,然后将数据返回页面进行展示。从应用程序发送请求到返回数据的时间是页面加载的时间。

网络连接将影响页面加载时间。网络越差,加载时间越长,意味着用户需要等待一段时间才能看到页面的内容,等待时间越长,用户越焦虑。

今天案例中加载页面的两种方式可以减少用户的焦虑,所以可以观看录制的屏幕动画。

方法一:活动指示器,适用于单个页面结构,如“学习”页面,无文字内容或重复内容。

互动例子:好的设计可见一斑(2)(图10)

加载前后知乎“学习”标签的比较

模式二:骨架屏适用于内容结构规则的页面,如“学习列表”页面,是内容规则有序的列表页面。

互动例子:好的设计可见一斑(2)(图11)

加载前后知乎“学习列表”标签对比←

芒果电视通过动态标签提高签到点击率

互动例子:好的设计可见一斑(2)(图12)

当你看到芒果电视的“我的”页面时,你的视觉焦点在哪个区域?

毫无疑问,应该是动态标签“15天会员”。为什么会被吸引:

动态比静态抓人眼球,吸引用户的注意力「领15天会员」文案本身,因为该动态标签靠近签到按钮,所以用户会不由地将动态标签和按钮进行联系,心理活动是:难道签到就能领取15天会员吗?带着好奇心点进去看看吧…既然已经进入签到页面了那就随手签个到吧…

以上操作路径自然会提高用户的点击率。

08连锁首页应用点击底部标签栏返回页面顶部

互动例子:好的设计可见一斑(2)(图13)

在链家App首页浏览完内容后,向下滑动为你推荐模块(页面滑动到第三屏高度左右),首页的标签栏会切换到一个Top图标,点击后可以快速返回首页底部。

分析优缺点:

优点:对于长页面,返回顶部的功能很重要。在其他应用中,返回顶部的常见表达是浮动按钮(默认隐藏,页面滑动到一定高度后显示)或底部按钮(瀑布页面不适合将返回顶部按钮放在页面底部),如下图所示:

互动例子:好的设计可见一斑(2)(图14)

不过链家App比较少见,所以很新颖。

缺点:沉浸在阅读中的用户会把注意力集中在内容本身,因此用户在滑动页面和仔细阅读的过程中很难注意到底部标签栏的切换,这个功能很可能被忽略。

如果App以这种方式返回到页面顶部,那么默认Tab前后的视觉变化和返回到顶部的Tab可以设计得很明显,让用户很容易感知到。

09记录掌上生活画面时的贴心小技巧

互动例子:好的设计可见一斑(2)(图15)

我们都处在信息时代,个人隐私信息往往在不知情的情况下被暴露,比如手机录屏行为。

手持生活App会监控用户的录屏行为,一旦被监控,会给出祝酒提示,告知用户在录屏过程中要注意隐私和安全。

土司灯提示是弱提示,不打扰用户的行为,起到提示的作用。用户看到的时候,自然会稍微关注一下自己的屏幕录制内容,以及自己的私人信息(如手机号、身份证号、银行卡信息等)是否存在。)已经无意中输入了。

这是一个甜蜜的互动细节!

IOs中的10 Actionsheet和Alert很傻,难以区分?

互动例子:好的设计可见一斑(2)(图16)

说实话,我从来没有注意到IOS的Actionsheet(左边的图1)可以作为确认对话框。当我提到IOS的确认对话框时,我想到了屏幕中间弹出的一个警报(图2)。

根据IOS人机界面指南,IOS设计指南指出,“使用行动表让人们启动任务,或者在执行潜在的破坏性操作之前请求确认。”

这意味着在用户执行破坏性操作之前,您可以使用Actionsheet执行新任务或请求确认。这样,用户的第二次确认可以使用Actionsheet或Alert。

互动例子:好的设计可见一斑(2)(图17)

所以在我看来,以上两种场景,Actionsheet和Alert都可以。

有没有更有说服力的观点请告诉我!

以上,如果是你,你会这样设计吗?

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/jhsj/736.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息