组件细节再设计

在大多数移动应用中,刷新加载、提示反馈和弹框是最基础也是最不可少的功能模块。在设计这些基础组件时,我们常常会以最简单最基本的方式完成。但当我们回过头重新审视这些组件时,是不是能给它们定义上更加聪明的逻辑,让产品变得更人性化一点呢?今天就来和大家简单聊聊在刷新加载、提示反馈和弹框等基础组件上引申出的一些设计思考和设计建议。

刷新与加载

刷新和加载会告诉用户当前页面的状态,是对获取界面新内容的一种进度状态的表达。在刷新和加载过程中可以通过有趣的动画效果减少用户的焦躁感。另外,也可以在这个过程中加入品牌元素强化品牌形象,让产品变得更生动活泼。

– 制造下拉刷新的“假象”

在某些时效性很强的场景下(例如消息聊天),当页面内容可以做到实时更新时,下拉刷新就不是必要操作了。但为了保留用户的使用习惯,我们仍可以提供下拉操作,此时可以巧妙地将刷新改为透出品牌元素的方式,既能满足用户下拉行为又能有效利用场景宣导品牌形象。

组件细节再设计

– 让加载过程有延续性

1. 界面的预加载。如果界面内容有固定的框架(如列表、瀑布流、信息卡片等),在加载时可以先出现内容框架,直到加载完成再呈现内容,这样能让整个过程更连贯和一致。

组件细节再设计2. 用按钮状态表现加载进度。通过按钮状态的变化直接呈现加载进度,是对操作状态的延续,避免了浮层带来的干扰和阻断感。

组件细节再设计

– 在加载H5页面时减少用户等待的焦躁感

从Native进入H5时,由于架构的变化页面加载时间会变得更长(尤其在弱网环境下),浮层式的加载过程无法让用户感知到当前进度如何。因此建议采用进度条的方式表达进度,虽然它不会缩短加载时间,但却能让用户时刻感觉到当前的进展,让人感觉等待没有那么漫长。

组件细节再设计

提示与反馈

轻量级提醒Toast一般适用于操作后的反馈结果,在手淘中如宝贝收藏成功/取消收藏、添加到购物车成功;以及各种信息的提交成功或失败的反馈。信息浮层会渐显渐隐,不需要用户再进行下一步操作。

图例:手淘 Toast 通用样式

组件细节再设计

– 指定区域内的提示反馈

通常,在提交表单的场景中,当表单中的某个信息填写有误时,我们现在的作法是在点击“保存”或“提交”时,弹出通用的浮层告知用户错误/失败原因,但提示信息是没有针对性的,用户看完提示后可能还要再思考我到底是哪儿写错了?在这种情况下,最好的方法首先是能够对用户输入的内容进行实时判断,当出错时可以直接在指定区域内提示用户。其次,做不到实时判断时,在提交表单后如果有出错情况,能在指定区域提醒用户出错原因。

图例:对表单内容进行实时判断,当填写有误时能在错误区域进行提示

组件细节再设计

图例:提交表单时,对指定区域的错误提醒。也可以结合动效让用户更容易聚焦问题

组件细节再设计

– 对内容删除要有合理的解释

提示反馈并不仅限浮层的方式,界面元素的过渡动画也是一种很好的信息反馈方式。它能告诉用户信息是如何出现或消失的,也能让产品体验更流畅和连贯。

– 对用户的下一步操作进行预判

我们在设计时常常说要更懂用户,本质其实是希望产品更聪明,能尽可能猜测用户的下一步操作,帮助用户提高产品使用效率。如果我们能对用户的行为进行预判,那就可以自然而然地在没有干预用户的情况下呈现相应步骤。

图例:当我们复制过订单号或截图完再回到消息界面,需要和卖家进行下一步沟通时,可以直接呈现刚刚执行的操作,帮助用户缩短操作路径

组件细节再设计

弹框与操作列表

弹框(Alert)与操作列表(Action Sheet)是产品中比较常见的信息提示方式,通常用于当用户在界面上需要做一些决定时,需要用弹出层展示选项让用户选择下一步操作。因 Android 端标准不一和形式的多样性,这里仅讨论 iOS 端的设计场景和样式。

– 弹框(Alert)的使用场景

弹框多为系统级别的通知信息,它会打断用户当前的浏览或操作,告知用户影响到他们当前或后续操作的重要信息。在产品中需要严格控制弹框出现的频次,这样才能真正引起用户的重视。

图例:手淘中弹框的通用样式

组件细节再设计

使用场景1 某些信息必须需要用户关注时。例如提醒电池电量低、提示引导推送通知、获取地理位置等。这类弹框内容多为系统级信息,它的出现通常会影响用户后续是否能正常使用某些功能

使用场景2 需要传达界面中的关键信息时。这类弹框也是手淘里比较常用的,例如界面中的功能更新、功能引导等。但最好的方式还是让用户在合适的场景下自然而然发现你的功能,而不是用弹框强制告诉用户。

– 操作列表(Action Sheet)的使用场景

当用户主动发起了某个动作,后续需要对该动作进行确认或提供可选操作时,我们可以使用操作列表呈现内容。操作列表的出现与用户上一步操作有强关联。

图例:手淘中操作列表的通用样式

组件细节再设计

使用场景1 为完成某个任务提供的不同的方式。操作列表提供可以完成当下任务的一系列操作选项。将选项收起的方式能节省页面空间,避免页面铺出太多操作选项。

使用场景2 当用户需要完成一项有风险的操作时,可以用操作列表的方式进行二次确认。它让用户有足够的时间考虑当前操作带来的风险结果,并提供其他可选项。

– 如何区分弹框与操作列表的使用场景

在 iOS 官方规范里提到,弹框(Alert) 多为 APP 或系统发出的重要信息,而操作列表 (Action Sheet) 一般是对某个操作的后续提供可选操作。那么,区分弹框和操作列表的方式可以简单的概括为:由用户发起的操作使用操作列表Action Sheet的方式,由系统或应用发起(非用户发起)的操作使用弹框Alert的方式。再看看下面的例子就比较容易理解了:

正确示例:左图,当输入了信息未发布点返回时,为用户主动发起的行为,此时用操作列表提示用户取消发布的二次确认。右图,当用户主动删除某个淘友时,弹出操作列表进行二次确认

组件细节再设计

错误示例:删除宝贝与离开界面都是用户主动发起的行为,不应该用弹框的形式进行二次确认

组件细节再设计

以上,就是关于刷新加载、提示反馈和弹框在设计细节上的一些思考和建议,也希望能给大家一些启发,通过对细节的推敲和打磨把产品变得更聪明更极致。

“点击并长按以下图片,识别图中二维码” 关注我们!

原文始发于微信公众号(淘宝设计):组件细节再设计

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码