欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2017:09:23 20:00:28 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1542个文字,预计阅读时间4分钟
导语
前言蒙版引导一直是一个十分热门的话题,对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导,这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产

前言

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

蒙版引导是什么

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

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


推荐阅读:20个蒙版引导页设计欣赏

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

蒙版引导的应用场景

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

1.阐述功能

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

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

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

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

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

2. 隐藏操作

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

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

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


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

3. 图例列举

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

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


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

蒙版引导的设计建议

1. 径直表达 图文结合

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:网站设计中不要忽视哪些问题

下一篇:20个蒙版引导页设计欣赏

  • 18886 文章总数
  • 2254494访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信