组件细节再设计

2022-05-30    分类: 网站建设

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

刷新与加载

刷新和加载会告诉用户当前页面的状态,是对获取界面新内容的一种进度状态的表达。在刷新和加载过程中可以通过有趣的动画效果减少用户的焦躁感。另外,也可以在这个过程中加入品牌元素强化品牌形象,让产品变得更生动活泼。
- 制造下拉刷新的“假象”
在某些时效性很强的场景下(例如消息聊天),当页面内容可以做到实时更新时,下拉刷新就不是必要操作了。但为了保留用户的使用习惯,我们仍可以提供下拉操作,此时可以巧妙地将刷新改为透出品牌元素的方式,既能满足用户下拉行为又能有效利用场景宣导品牌形象。
- 让加载过程有延续性
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的方式。再看看下面的例子就比较容易理解了:
正确示例:左图,当输入了信息未发布点返回时,为用户主动发起的行为,此时用操作列表提示用户取消发布的二次确认。右图,当用户主动删除某个淘友时,弹出操作列表进行二次确认
错误示例:删除宝贝与离开界面都是用户主动发起的行为,不应该用弹框的形式进行二次确认

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


本文来自创新互联品牌网站建设网站设计制作公司-创新互联
标签:移动网站建设,高端网站建设,企业网站建设,成都响应式网站

网站题目:组件细节再设计
文章网址:https://www.cdcxhl.com/news/161112.html

成都网站建设公司_创新互联,为您提供搜索引擎优化商城网站网站改版全网营销推广虚拟主机网站策划

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站优化排名