首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

UI 设计:移动端蒙版引导设计细节

蒙版引导一直是一个十分热门的话题,对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导,这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法。但我认为这种说法过于片面,对于一些流程复杂或者功能个性的产品应用,添加蒙版引导进行说明,是十分有必要的。

蒙版引导,从英文字面上的意思是指具有教育指示意义的引导标注。

通常出现在用户初次使用产品的过程中,能够以最轻量的方式快速指引用户了解产品的使用方法或者新功能。现阶段用户打开一个新的产品通常会遇到各种引导提示,区分于这些引导,蒙版引导通常紧贴着界面流程进行而出现,使用透明色间隔形式加上简单指示性文字与图形,总是能够简洁明了地告知用户产品的功能或者使用方法,并且由于其轻量的属性会大大减少用户的阅读时间。设计得当的蒙版引导不仅可以与其他引导相辅相成,同时也能够增加用户对产品的好感度。

蒙版引导的使用场景非常宽泛,根据不同的场景设计合适的蒙版引导,才能够最为直接的达到教育作用同时也不会对用户造成困扰。以下会结合案例来说明不同场景下的蒙版引导:

1.阐述功能

说明功能点是蒙版引导最常见的出现场景,通常会采用较为醒目的气泡或者箭头等指示性图形配合文字,直接标注在界面上进行说明。这种直抒内容的引导样式,有效地节约了阅读时间,同时也更加容易被用户理解和吸收。以下为两种在阐述功能的时候比较常用的样式:

FaceU和VUE作为现在比较热门的摄影和录像类软件,在拍照界面中都引用了蒙版引导说明功能。

FaceU使用文字和箭头辅助直接在界面上标识出变脸选择入口和长按录制视频的功能,点击使用后消失,这种开门见山的蒙版引导简洁并且高效,使得用户能够快速的了解功能点。而VUE说明的功能点相对较多,直接标识全部会使得界面看起来比较杂乱,增加阅读障碍感的同时也不美观。所以采用了黑色透明遮罩,对界面无需讲解区域降低了可视度,而需要说明的功能点进行了高亮并且标注,使得用户阅读起来更加清晰。

2.隐藏操作

随着移动端平台的普及,大家越来越关注小屏幕的有效利用。这时候就出现了手势操作这种交互形式,他们能够在有限的屏幕面积上触发更多的产品功能。而这些隐藏功能可以通过蒙版引导很好地展现给用户。

通常这时候使用手势图标配合方向性动画来进行引导,相对于直接的文字描述会更加形象生动,能够更好地帮助用户了解如何调起这些隐藏操作。

Issuu是一款聚合了全球各类热门杂志的阅读类应用,极具设计感的精致UI,给用户留下了深刻印象。为了留下更多版面来展现杂志的封面和内容,issuu把一些针对书籍操作的功能隐藏了起来,通过蒙版引导上的手势图形得知,只需在封面上轻轻长按,这些功能就会立即显现。

3.图例列举

对于有些产品功能的使用,直接标注说明远远没有图例列举来的准确简便。通常这种形式的蒙版引导主要应用在一些需要用户判断和提交相关信息等功能的教育说明上,而这时候使用图例列举可能是一种更加直观的方式,它们能够使得用户少走弯路,正确地完成软件使用。

RentTheRunway作为一款服装租赁应用,通过照片查找相似风格服装也是其一项亮点功能。而它的蒙版引导就采用了图例对比说明的方式,告诉用户上传多大的衣服细节才能够使得搜索功能正常使用。而这样的尺寸把握却很难用极少的文字说明来表示。

1.径直表达图文结合

对于用户来讲,他们并不希望在使用产品的时候碰到过于复杂的引导提示,他们总是希望花费较少的时间来了解引导所要告知的内容。简单直面的文字表达,,并且专注于单个功能点进行诠释,能够使得用户快速得到并遵循引导达到使用的目的。

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询