网站设计 webdesign
当前位置:首页 > 网站建设专题 > 网站设计
广州网页设计之场景的设计方法(下)
发布日期:2016-11-14 阅读次数:2002 字体大小:

  在第二步中我们已经对当前场景的机会点进行了挖掘,那么怎样将机会点转化为设计点呢?在场景设计的第三步,我们给出了一些设计策略,这些设计策略是我们通过对大量案例进行分析归纳,提取总结出来的,可能还不够完善,希望可以帮助你快速产出方案。在设计策略阶段,我们通过设计目标把策略分为三部分:以贴心为目标的设计策略,以高效为目标的设计策略,以情感化为目标的设计策略。

  1.高效。

  以高效为目标的设计策略共有五点,根据行动点明确程度依次为:行动点前置插入,行动点替换,行动相关推送,突出行动点,自动执行。这五个设计策略都能够不同程度地提高用户操作效率,接下来通过案例依次介绍一下每个设计策略。

  行动点前置插入 行动点前置插入,指将预期到的用户下一步的行为点前置到当前场景,使得用户在需要的时候就能直接操作,达到缩短关键流程,提高操作效率的作用。行动点前置到当前页面的形式多数为直接插入,以美团团购电影票为例,放映前将取票二维码前置插入到首页中,作为首页内容的一部分进行展示,点击后可直接弹出取票二维码快捷取票,很大程度上缩短了关键流程。除了这个案例外,上面有提到的谷歌hangouts也属于行动点前置插入的典型案例,检测到对方询问你在哪里的时候,在聊天页面直接插入定位按钮。

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

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

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

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

  2.贴心。

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

  3.情感化。

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

  第四步:衡量标准

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

  回顾几个重要的点

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

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

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