4000-888-103

资讯动态这些体验设计中易被忽略的细节,你都知道吗?资讯详情

这些体验设计中易被忽略的细节,你都知道吗?

2019-11-22 16:42:45

前几天我在使用「潮汐」APP的时候,发现了一个很有意思的设计。当我在APP中设置好第二天的闹钟,然后准备刷会儿新闻睡觉的时候,很自然的就唤起iOS的任务管理界面准备切换到微信,我发现「潮汐」APP的界面有了如下图的变化。

「潮汐」本身会在你进入睡眠的前一段时间播放白噪音助眠,当然如果你关闭退出应用,他也就无法继续播放并且也无法执行第二天的唤醒操作了。那我们知道,在用户唤起iOS的任务管理界面时,其中有一种操作可能就是上滑退出应用,所以「潮汐」在这个时候提醒用户,可以有效的避免用户因误操作所带来的严重后果(第二天的闹钟没响)。

随后,我也带着这个发现请教了iOS开发的小伙伴,确定了在iOS系统中,唤起任务管理界面时,可以对应用界面做出适当的调整。

通过这个例子,我发现有一些小细节,在平时的设计工作中是很容易被我们忽略掉的。下面就是我询问了几位设计师小伙伴,并结合自己平时工作的经验,整理出来的7点容易被我们忽略的小细节。

 

目录

1、音量提示

2、截图提示

3、无障碍设计

4、图片边界

5、iOS 任务管理器界面

6、iOS 3D Touch

7、iOS 小组件(widget)

 

音量提示

当用户沉浸在Feed流中观看短视频并进行音量调节时,iOS默认的音量条会对内容遮挡影响观看体验。我们可以通过对音量提示条的优化来避免这一点,如下图:

西瓜视频在3.0的更新中,就标准屏和全面屏分别进行了音量条的优化。标准屏的音量条移至屏幕上方状态栏的位置;全面屏的则移至屏幕左上方时间的位置。这一优化大大降低了音量条对用户观看视频的影响。

 

截图提示

用户在使用产品的过程中,截图的目的无外乎以下几种:分享给他人、反馈产品问题、留存备份。那么除了留存备份是因为截图直接保存进相册,不需要我们多做什么,其余两个可能的行为我们都可以帮助用户缩短操作路径。以往的操作路径是用户截图之后,进入相应的好友列表或问题反馈页面,然后从手机相册中找到刚才截的那张图,再发送。而我们可以通过对用户截图操作的监听,在他们截图之后,给予一个分享或是反馈问题的入口,直接帮助他们完成操作。既缩短了操作路径,也会让用户觉得我们的产品很贴心。如下图:

滴滴在截图之后,会有「反馈问题」、「联系客服」和「分享页面」的三个快捷入口,点击这些入口可以直达相应的界面;飞猪在截图之后,同样会有「好友分享」和「问题反馈」这些快捷入口。

说到这里,可能会有小伙伴提出疑问,如果用户只是想留存备份,那这些提示会不会打扰到用户呢?其实不然,这些提示都是以非模态弹窗的形式出现,不会影响到用户进行其他操作,而且如果不去理会这些提示,过一段时间它也会自己消失掉。

 

无障碍设计

由于越来越多的残疾人、老人成为互联网产品用户中的一员,无障碍设计也就成为我们在设计产品时不可或缺的一环。如下图:

高德地图在地图设置中,有一个「色盲模式」。当开启色盲模式之后,表示实时路况的颜色就由绿黄橙红变成了紫黄棕黑,可以有效帮助色盲或是色弱的用户接收路况的拥堵信息。

 

图片边界

我们在做设计稿时,自然会选择一些精美的高质量图片作为配图。但在实际应用中,某些需要用户自己上传图片的模块,比如动态、头像等,我们就无法把控了。很有可能用户上传的图片背景与界面背景一致,这就会导致阅读这些图片信息的用户无法辨别图片的边界,从而认为它们与背景对比清晰的图片有所差异。如下图:

其实我们完全可以人为的增加一个图片边界,如下图:

爱奇艺的泡泡中,用户上传的图片都被加上了灰色的边框,那些背景与界面一致的图片就很容易辨别了,并且看起来它们与背景对比清晰的图片并无差异。

 

iOS 任务管理器界面

正如本文最前面提到的,iOS系统中,唤起任务管理器的时候,页面的状态变化也是经常被我们所忽略的。当用户唤起任务管理器时,他可能是要切换到其他应用或者是退出某个应用,我们就可以提示他退出应用会中止当前正在进行的某项重要任务,以避免用户误操作造成不必要的损失。此外,某些隐私性很强的应用,比如理财类,医疗健康类,相册类等也可以在唤起任务管理器的时候,将界面做模糊处理,以防隐私通过这个状态泄露。如下图:

蚂蚁财富作为一款理财类的应用,才唤起任务管理器的时候,选择将界面做模糊处理,可以有效避免用户的资产信息遭到泄露。而前文提到过的潮汐,则是提示用户退出应用的所造成影响。

 

iOS 3D Touch

说到iOS系统,还有个不得不提的3D Touch。因为3D Touch操作的冷门性,导致很多用户甚至是设计师都快忘了iOS还有这么一个快捷操作的入口。在某些需要快捷操作的场景下,比如扫码、付款等,如果打开APP操作会需要8-10秒,而使用3D Touch则会将时间缩减至2-3秒(3D Touch可以直接跳过启动广告)。所以,在这些场景中它的应用性是很强的。正因为如此,3D Touch操作列表也是我们设计时不容忽视的一块。如下图:

美团外卖的3D Touch仅保持了默认的分享操作,大众点评的则增加了扫一扫、付款码、查商户等高频操作。此外,手机天猫的3D Touch列表还支持个性化定制,让用户根据自己的操作习惯来设置属于自己的3D Touch菜单。

 

iOS 小组件(widget)

在上一个3D Touch的大众点评案例中,我们可以看到有一块内容是叫小组件。那么小组件的作用也可以看作是一些快捷操作的入口,当然,小组件还有另一种呈现方式——在主屏幕的时候向右滑动,进入小组件列表。如下图:

除了快捷操作,我们还可以直接在小组件中浏览信息,比如天气、证券等。我们可以将小组件看成是一个APP的mini模式,把最重要核心的功能置于此处。

 

总结

作为设计师,我们在设计时除了考虑界面的基本状态外,同时还应该考虑到各种各样的突发、异常状态;除了考虑普通用户的体验外,同时还应该考虑到特殊用户的体验;除了考虑常规的操作外,同时还应该考虑到系统平台提供的便捷操作。以上7点仅仅是易被忽略的细节中的一小部分,大家在平时可以将看到的那些——有趣的、差异化的、令人惊喜的细节记录收藏下来,不经意间可能就会对我们的产品设计提供很大的帮助。


 

关键词:动态h5页面 h5的页面是什么 微页h5页面制作

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png