聊聊蒙版引导的应用场景以及设计建议.docVIP

聊聊蒙版引导的应用场景以及设计建议 　　蒙版引导一直是一个十分热门的话题，对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导，这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法（观点引自文章“Misused mobile UXpatterns”）。但我认为这种说法过于片面，对于一些流程复杂或者功能个性的产品应用，添加蒙版引导进行说明，是十分有必要的。 　　 　　什么是蒙版引导 　　蒙版引导（Coach Marks），从英文字面上的意思是指具有教育指示意义的引导标注。 　　通常出现在用户初次使用产品的过程中，能够以最轻量的方式快速指引用户了解产品的使用方法或者新功能。现阶段用户打开一个新的产品通常会遇到各种引导提示（前置引导页，视频引导，弹窗提示，活动浮层介绍等等），区分于这些引导，蒙版引导通常紧贴着界面流程进行而出现,使用透明色间隔形式加上简单指示性文字与图形，总是能够简洁明了地告知用户产品的功能或者使用方法，并且由于其轻量的属性会大大减少用户的阅读时间。设计得当的蒙版引导不仅可以与其他引导相辅相成，同时也能够增加用户对产品的好感度。 　　 　　蒙版引导的应用场景 　　蒙版引导的使用场景非常宽泛，根据不同的场景设计合适的蒙版引导，才能够最为直接的达到教育作用同时也不会对用户造成困扰。以下会结合案例来说明不同场景下的蒙版引导： 　　1.阐述功能 　　说明功能点是蒙版引导最常见的出现场景，通常会采用较为醒目的气泡或者箭头等指示性图形配合文字，直接标注在界面上进行说明。这种直抒内容的引导样式，有效地节约了阅读时间，同时也更加容易被用户理解和吸收。以下为两种在阐述功能的时候比较常用的样式： 　　 　　FaceU和VUE作为现在比较热门的摄影和录像类软件，在拍照界面中都引用了蒙版引导说明功能。 　　FaceU（左）使用文字和箭头辅助直接在界面上标识出变脸选择入口和长按录制视频的功能，点击使用后消失，这种开门见山的蒙版引导简洁并且高效，使得用户能够快速的了解功能点。而VUE(右)说明的功能点相对较多，直接标识全部会使得界面看起来比较杂乱，增加阅读障碍感的同时也不美观。所以采用了黑色透明遮罩，对界面无需讲解区域降低了可视度，而需要说明的功能点进行了高亮并且标注，使得用户阅读起来更加清晰。 　　 　　2.隐藏操作 　　随着移动端平台的普及，大家越来越关注小屏幕的有效利用。这时候就出现了手势操作这种交互形式，他们能够在有限的屏幕面积上触发更多的产品功能。而这些隐藏功能可以通过蒙版引导很好地展现给用户。 　　通常这时候使用手势图标配合方向性动画来进行引导，相对于直接的文字描述会更加形象生动，能够更好地帮助用户了解如何调起这些隐藏操作。 　　Issuu是一款聚合了全球各类热门杂志的阅读类应用，极具设计感的精致UI，给用户留下了深刻印象。为了留下更多版面来展现杂志的封面和内容，issuu把一些针对书籍操作的功能隐藏了起来，通过蒙版引导上的手势图形得知，只需在封面上轻轻长按，这些功能就会立即显现。 　　 　　3.图例列举 　　对于有些产品功能的使用，直接标注说明远远没有图例列举来的准确简便。通常这种形式的蒙版引导主要应用在一些需要用户判断和提交相关信息等功能的教育说明上，而这时候使用图例列举可能是一种更加直观的方式，它们能够使得用户少走弯路，正确地完成软件使用。 　　RentTheRunway作为一款服装租赁应用，通过照片查找相似风格服装也是其一项亮点功能。而它的蒙版引导就采用了图例对比说明的方式，告诉用户上传多大的衣服细节才能够使得搜索功能正常使用。而这样的尺寸把握却很难用极少的文字说明来表示。 　　 　　蒙版引导的设计建议 　　1.径直表达，图文结合 　　对于用户来讲，他们并不希望在使用产品的时候碰到过于复杂的引导提示，他们总是希望花费较少的时间来了解引导所要告知的内容。简单直面的文字表达，并且专注于单个功能点进行诠释，能够使得用户快速得到并遵循引导达到使用的目的。 　　而在文字说明的时候配合使用视觉元素进行包装辅助，可以让用户能够在不完整阅读的情况下获得更多的引导信息。使用手势，箭头等视觉指示元素，可以使得你得蒙版引导更富有指向性。同时你也可以根据产品风格融入一些插画手绘元素，使得整个引导看起来更加活泼，增加用户阅读的欲望感。 　　Bloomthat作为一款送花软件，对于送花时间和地点的选择入口着重进行了说明指引。它的蒙版引导在简要文字说明的基础上增加了辅助性质的图形icon，能够帮助用户快速理解说明的内容，提高阅读效率的同时也增加了用户的好感度。 　　 　　（Grid Lens是一款功能比较垂直的实时多格相机） 　　用户拍摄完以后可以根据自己的喜好为其添加多种滤镜效果、气泡文字框、以及小贴纸。在蒙版引导