腾讯ISUX丨聊聊蒙版引导的小细节

编者按:如何做顶级界面引导？今天腾讯ISUX 本建议的指南和案例分析特别全面，强烈建议UI 设计师学习。

前言

蒙版指导一直是一个非常热门的话题。对于许多用户来说，他们往往不完全阅读甚至快速关闭来结束指导，因此他们不能在教育中发挥很好的作用。甚至有一种说法是“在界面上添加这些产品不会让你的产品更容易使用”（这些观点来自文章“Misused mobile UX patterns)。但我认为这种说法过于片面。有必要添加蒙版指导来解释一些流程复杂或功能个性化的产品应用。

蒙版指南是什么？

蒙版引导（Coach Marks），英语字面意思是指具有教育指示意义的指导标志。

通常出现在用户第一次使用产品的过程中，可以以最轻的方式快速引导用户了解产品的使用方法或新功能。在这个阶段，用户打开新产品通常会遇到各种指导提示（前指导页面、视频指导、弹出窗口提示、活动浮动层介绍等）。与这些指导不同，蒙版指导通常出现在接口过程中，使用透明色间隔形式加上简单的指导文本和图形，总是可以简单地告知用户产品的功能或使用方法，由于其轻属性将大大降低用户的阅读时间。适当的蒙版指南设计不仅可以补充其他指南，而且可以增加用户对产品的青睐。

蒙版引导的应用场景

蒙版指南的使用场景非常广泛。只有根据不同的场景设计合适的蒙版指南，才能在不麻烦用户的情况下最直接地发挥教育作用。以下将结合不同场景下的蒙版指南：

1.阐述功能

描述功能点是蒙版指南中最常见的场景。通常使用更引人注目的气泡或箭头等指示图形与文本相匹配，并直接标记在界面上进行描述。这种直接表达内容的指导风格有效地节省了阅读时间，但也更容易被用户理解和吸收。以下是两种在解释功能时更常用的风格：

FaceU和VUE作为一种流行的摄影和视频软件，在摄影界面中引用了蒙版引导功能。

FaceU（左）使用文本和箭头辅助直接在界面上识别变脸选择入口和长按录制视频的功能，点击使用后消失。这种直接的蒙版指南简单高效，使用户能够快速理解功能点。VUE（右）解释了相对较多的功能点，所有直接识别都会使界面看起来更混乱，增加阅读障碍，但也不美观。因此，使用黑色透明屏蔽，界面不需要解释区域来降低视觉，而需要解释的功能点是明亮和标记的，使用户阅读更清晰。

2. 隐藏操作

随着移动平台的普及，人们越来越关注小屏幕的有效利用。此时，手势操作是一种交互形式，可以在有限的屏幕面积上触发更多的产品功能。这些隐藏的功能可以通过蒙版向用户展示。

通常在这个时候，使用手势图标和方向动画进行指导，比直接的文本描述更生动，可以更好地帮助用户了解如何启动这些隐藏的操作。

Issuu是一款集世界各地流行杂志于一体的阅读应用程序。设计感很强的精致UI给用户留下了深刻的印象。为了留下更多的布局来显示杂志的封面和内容，issuu隐藏了一些书籍操作的功能。通过蒙版引导上的手势图形，我们可以知道这些功能只需要在封面上轻轻按压即可立即显示。

3. 图例列举

对于某些产品功能的使用，直接标记说明远不如图例列表准确、简单。通常，这种形式的蒙版指导主要应用于一些需要用户判断和提交相关信息的教育说明。此时，使用图例列表可能是一种更直观的方式，可以使用户少走弯路，正确完成软件的使用。

Rent The 作为一个服装租赁应用程序，Runway通过照片找到类似风格的服装也是一个亮点。其蒙版指南采用图例比较说明的方式，告诉用户上传了多少衣服细节，使搜索功能正常使用。但这种尺寸很难用很少的文本解释来表达。

蒙版指南的设计建议

1. 径直表达 图文结合

对于用户来说，他们不想在使用产品时遇到太复杂的指导提示，他们总是想花更少的时间来理解指导要告知的内容。简单而直接的文本表达，并专注于单个功能点的解释，可以使用户快速获得并遵循指导来实现使用的目的。

在文本描述中，使用视觉元素进行包装辅助可以让用户在不完全阅读的情况下获得更多的指导信息。使用视觉指示元素，如手势和箭头，可以使蒙版指南更具方向性。同时，您还可以根据产品风格整合一些插图和手绘元素，使整个指南看起来更加生动，增加用户的阅读欲望。

作为一款送花软件，Bloomthat重点介绍了送花时间和地点的选择入口。其蒙版引导在简要文字描述的基础上增加了辅助图形icon，可以帮助用户快速理解描述的内容，提高阅读效率，增加用户的好感度。

（Grid Lens是一款功能垂直的实时多格相机)

拍摄结束后，用户可以根据自己的喜好添加各种滤镜效果、气泡文字框和小贴纸。在蒙版指导中，Grid 除了简要阐述拍摄方法外，lens还指出了个性化定制的入口位置。中央标题还友好地告知用户弹出界面的性质。直截了当的手写文案添加了符合整体产品气质的可爱图形，并混合了一些拟人化元素，使整个蒙版指南非常生动，用户非常愿意阅读您的蒙版指南。

2.注意频率 把握节奏

即使用户决定阅读您的蒙版指南，在同一界面上表达太多内容也会给用户带来阅读负荷。通常，此时，用户会选择不完整的阅读甚至关闭，以结束指南对操作的阻碍。同时，还必须注意蒙版指南的使用频率。最重要的是尽可能多地添加说明，以确保产品的核心功能在用户手中顺利使用。

Srocktouch作为一个引人注目的股票应用程序，受到了许多股东用户的追捧。但他们的蒙版指南做得很糟糕。页面上显示的标记信息太多，令人眼花缭乱，对用户非常不友好。与此同时，标记指南也有很多无用的信息，如放大镜、圆形箭头和五角形星图形图形图像，作为一个传统的互联网用户，他们会知道这些是表达搜索、刷新和爱的意义，根本不需要标记解释。因此，当你设计产品蒙版指南时，首先要减少内容的数量，但也要避免普遍操作的解释，这可以降低用户的阅读成本，不会让用户害怕复杂的指导过程。

在蒙版引导中表达当信息量较少时，建议使用单页显示。但如果您的产品有一个相对复杂的使用过程或功能使用相对分散，那么渐进式指导将是一个很好的选择。每次只关注单一的交互动作来解释和指导，然后迫使用户尝试，这种教练结合的指导方法通常可以在考虑用户的短期记忆时发挥很好的作用。

Flipboard作为一种聚合阅读应用，为大家所熟知 。作为一款功能点相对分散的app，其蒙版引导与用户使用不同的界面相结合，同时也鼓励用户立即跟随引导进行操作。

3.区分层级 融入动效

产品设计师必须对蒙版指导的视觉风格和产品界面的实际元素进行足够的差异化处理，以便用户能够清楚地区分它们。指导和界面混淆的设计往往会让用户感到困惑，他们试图与之互动，最终放弃使用软件，因为他们没有达到预期。

Hotel Tonight是一款提供当天酒店预订服务的产品应用程序。在第一次使用之前，蒙版指南会弹出，告诉您选择预定日期的入口和连续多天的功能。它的蒙版指南使用与整个界面颜色相同的屏蔽作为间隔。从整体视觉感知来看，很难与实际界面区分开来。同时，右上角的日期图标也很容易误解用户，他们不会点击“Ok“当按钮关闭引导时，尝试单击操作，结果往往是用户会对应用程序产生不好的印象，甚至因为操作不当而关闭软件。

由此可见，产品设计中必须注意蒙版引导与实际界面的层次分化。

为您的蒙版指南添加动画效果不仅可以让用户更愿意阅读您的指南，还可以减少突然弹出给用户带来的不良使用感。有时，动画效果也可以帮助用户理解界面操作的使用。例如，在手势操作的指导界面中，方向移动的动画效果可以让用户知道操作的方向，比文本描述更直观、更快。

写在最后

当你想在你的产品中添加蒙版指南时，我希望上述建议指南和案例分析能对你的设计有所帮助。虽然本文专注于蒙版指南的分析，但这并不意味着你必须在新产品的初始体验设计中添加这些。始终记住，用户是一切的关键，我们的目的是设计一个直观、易于使用的产品。在添加任何设计的同时，一定要停下来思考是否有更好的方法来取代简化，以便为用户提供一个更愉快的体验环境。

「引导页面设计指南」

顶级指南！超全面指南！如何设计移动应用引导页面？实用干货！腾讯实用干货！如何使引导页面不再无用和透明？技能分享！“讨厌引导页面？这五个技能可以帮助您设计一个明亮的应用程序引导页面

原地址：腾讯ISUX

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有180万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com