组件细节再设计

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

刷新与加载

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

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

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

– 让加载过程有延续性

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的方式。再看看下面的例子就比较容易理解了：

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

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

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

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

原文始发于微信公众号（淘宝设计）：组件细节再设计