详细解析移动端基于场景的设计方法(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:优设   作者:阿里巴巴_BBC_UED

关键词

◆ 行动点替换 行动点替换,一般是指当前场景下某个行动点的功能不再适合当前场景,因而将其替换为另外的需求较强的行动点,位置不发生变化,而功能变化,为用户提供当前场景需要的或与下一步意图相关的行动点能够帮助用户提高操作效率。以Mono首页为例,当用户在首页上滑向下浏览时,导航栏的“推荐”按钮替换为“返回顶部”,在不改变布局的情况下实现了高效操作的目的(如图14)。

详细解析移动端基于场景的设计方法

◆ 行动点相关推送提示 行动点相关推送提示,指根据用户当前或下一步的行为提供相关推送或提示,以辅助用户进行决策行动,提高用户操作效率。以手机淘宝为例,用户在商品详情页面进行截图后,预期到用户接下来的行动是将该商品分享给好友,因此在该页面弹出推送提示框,提示用户进行分享,在用户需要的时候就出现,缩短了关键流程的同时让用户感动 (如图12)。除此之外,上面提到的微信聊天页面音量静音状态下听取语音消息的案例,也是通过预测用户下一步的行为,而提供了相关的提示,以使用户减少思考成本,快速达到下一步目标(如图15)。

详细解析移动端基于场景的设计方法

◆ 突出行动点 突出行动点,预期到用户下一步的行为后通过颜色或提示等方式对行动点进行突出,吸引并提醒用户点击,减少思考成本,提高操作效率。以拍立淘为例,当在光线较暗的环境中打开拍立淘拍照功能,用户当前场景下的需求为拍到清晰的图片,且预期到用户下一步行为是思考后打开闪光灯,因此拍立淘在检测到光线较暗时立即在闪光灯按钮下面弹出提示,以突出闪光灯按钮来提醒用户及时打开闪光灯。案例中通过弹出提示框的形式来突出下一步行动点,可以帮助用户减少思考时间,达到高效操作的目标。除此之外,上文中提到的Mono首页行动点替换的案例中也用到了突出行动点的设计策略,案例中通过为按钮添加底色从而实现突出行动点的目的,通过这种方式提示用户可点击的行动点(如图16)。

详细解析移动端基于场景的设计方法

◆ 直接执行 直接执行,适用于一些需求较为明确的行动点,做用户之所想,提高操作流畅性及效率。以iOS10中的抬腕唤醒功能为例,用户从桌上拿起手机,或从口袋中掏出手机,将屏幕朝下放置的手机翻转过来,屏幕就会自动点亮。当系统识别到这几个场景时预期到用户接下来的行为时查看手机信息,因此帮助用户直接执行了点亮屏幕的行为,减少用户操作流程,提高使用体验及操作效率。除此之外,微信聊天页面听取语音信息的时候,可以通过耳朵离听筒的距离预期用户对于听筒播放还是扬声器播放的意图,因此帮助用户自动切换两种播放模式,使得整个流程更加流畅与高效。

2 贴心。

怎样基于场景来设计出让用户感到贴心的产品呢?通过机会点挖掘阶段对用户当前场景需求分析以及对下一步目标的预期,设计阶段需要通过在细节上的设计一定程度上满足用户当前场景下的情感需求,或辅助用户达到下一步的目标,让用户感到贴心与感动。由于这部分的案例规律性弱,很难归纳出具体的策略,因此需要从细节出发具体场景具体分析。 以Mac中的听写功能为例,当用户通过Mac电脑启动听写功能,Mac会立即降低风扇速度,以使用户在更加安静的环境下使用该功能,从侧面满足用户当前场景下的需求,让用户感到贴心。 再以导航app的HUD模式为例,用户在行车过程中需要集中精力注视前方,尤其是夜间行车的时候更需要集中注意力,而现有手机导航需要不时低头查看且显示屏幕小,导航app的HUD模式能够很好地满足该场景下的痛点与需求,可以在夜间将导航信息投影在前车窗上,使用户无需低头就可以查看(如图17)。

详细解析移动端基于场景的设计方法

3 情感化。

与上文以贴心为目标的设计策略类似,以情感化为目标的设计策略同样需要具体场景具体分析,主要从细节出发满足用户在当前场景下的情感需求,让用户感动,给用户惊喜。 以Uber首页为例,2016年北京遭遇暴雨期间,许多市民称打车为打船,基于该场景Uber 将首页地图上车的形式换为船,并将切换车型的滑块icon由车替换为锚(如图18),类似的根据不同社会热点事件场景更换首页视觉细节的案例越来越多,通过细节上的改变使得产品在当前场景下能够与用户产生更多共鸣,满足用户情感化的需求,给用户惊喜。 豆瓣首页轮播图下面会根据时间显示“上午好/下午好/晚上好”的情感化打招呼内容,并且当用户向下浏览内容时,认为用户当前场景下不再需要搜索而是依次浏览内容,因此情感化的打招呼内容吸顶替换搜索框(如图18)。通过对当前场景需求的判断,采用情感化细节带给用户感动与惊喜。

详细解析移动端基于场景的设计方法

第四步:衡量标准

为了检测我们通过上一步设计策略产出的方案是否符合标准,这一步我们需要对方案进行衡量判断,结合设计目标,我们设定了四个衡量标准:效率、惊喜、感动、期待。该方案是否能够缩短关键流畅,减少思考成本,从而实现提高操作效率的目的?方案能否想用户之所想,通过情感化及贴心的细节给用户惊喜,让用户感动?当用户下次再处于该场景中,是否会对你的方案产生期待?希望可以通过最后一步的衡量标准帮你更好地优化现有方案。

详细解析移动端基于场景的设计方法

回顾几个重要的点

详细解析移动端基于场景的设计方法

基于场景的设计是指基于对当前场景的判断与分析,理解用户痛点与需求,结合前后文预期用户的目标及意图,通过设计提高操作效率,给用户惊喜与感动,使用户期待。


怎样基于场景做设计呢,第一步通过流程图列举场景,第二步通过分析当前场景需求或结上下文预期用户下一步行为来挖掘机会点,第三步将机会点通过设计策略转化为设计点,第四步通过衡量标准对设计点进行衡量判断以及优化。

场景挖掘工具可通过线下打印作为脑暴机会点的工具,填写完中间对场景描述部分后,通过竖向分析当前场景需求,通过横向结合上文场景预期下一步行为。

 收藏