设计规范 | 详解组件控件结构体系:引导类

本文是系列文章之详解组件控件结构体系的第三篇——引导类。enjoy~


本文是系列文章之详解组件控件结构体系的第三篇——引导类。enjoy~

设计规范 | 详解组件控件结构体系:引导类

引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品功能前或遇到障碍之前给予及时的引导提示。

为了业务或者产品目标的需要,有时候需要给予一些适当的提示方便用户去理解产品。

为了完成不同的引导内容和引导的目标,移动端的引导设计会根据需求进行不同的多样化处理。常见的引导有:引导页(幻灯片)式引导,浮层式引导,嵌入式引导。

3种类型的引导各有各自的特点以及使用场景,本篇文章详解组件控件结构体系—引导类

依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。)

设计规范 | 详解组件控件结构体系:引导类

引导页(幻灯片)式引导

定义:一般出现在app首次启动的时候,是一系列宣传、解说、帮助等页面的组合。

在移动互联网的产品的设计中,引导页的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。

一方面从产品的角度考虑,产品希望用户能够方便得理解产品的特性,减少对产品的陌生感;另一方面,从用户角度来看,一个应用里好的引导不仅能使他们对一个应用有好感,也可能更容易得留住他们。

设计规范 | 详解组件控件结构体系:引导类

用途

1. 让用户快速了解是一个什么样的产品。

2. 让用户快速了解该产品的主功能、或者要重点宣传的特色、重大更换功能。

建议

1. 文案简单易懂,重点突出

2. 内容可以是图片、视频、插画漫画等,且内容和文案要有一定的关联性。

3. 分页符一般是2-5个。

4. 提供可以直接跳过引导页的操作。不强制用户一定全部浏览。

使用场景

1. 用户第一次使用时,产品通过引导页让用户快速了解产品的主功能。

2. 用户更新产品时,产品通过引导页给用户传导更新的新功能。

浮层式引导

定义:一种轻量级单目标性很强的引导方式,一般是浮层结合文案的,样式类似气泡的引导方式。

设计规范 | 详解组件控件结构体系:引导类

用途

1. 提示用户新增功能或页面调整,或如何使用该功能。

2. 提示用户重要功能或一些隐藏操作。

建议

1. 特有文案、带有指示箭头的类似气泡设计。

2. 一般为非模态浮层,大概显示3秒左右自动消失,对用户干扰较小。

3. 文案上尽量简洁,表意清晰,建议控制20字以内。

使用场景

1. 有些新增功能不易让用户察觉同时这些功能对产品本身来说显得比较重要,这时候需要浮层引导,让用户知道该功能或者使用方法。

2. 用于新手引导

嵌入式引导

定义:将引导内容直接嵌入到界面中的引导方式,可以嵌入到状态栏、导航栏、工具栏,比较常见的是嵌入到主题内容界面中。

设计规范 | 详解组件控件结构体系:引导类

用途

1. 让用户了解当前界面或者操作处于何种状态,并指导接下来如何操作使用。

2. 保留当前界面的内同同时,增加引导提示。

建议

文案简短表述当前状态并告知用户如何操作。

使用场景

1. 异常状态时使用嵌入式引导,目的是提示用户异常状态。

2. 初始状态时,由于界面数据为空,这时候通过嵌入式引导提示用户操作。

3种引导类型按照重要度依次为:引导页(幻灯片)式引导>浮层式引导>嵌入式引导。3种引导可相互组合使用。到底使用哪个?则根据业务和对产品的定位来判断。

相关阅读

设计规范 | 详解组件控件结构体系:导航

设计规范 | 组件控件结构体系:加载类

#专栏作家#

UX,微信公众号:UEDC,人人都是产品经理专栏作家。华为ITUX交互组组长。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Pixabay,基于 CC0 协议

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20239/

(0)
CatherineCatherine
上一篇 2017-08-04 04:09
下一篇 2017-08-04 05:09

相关推荐

  • 『设计|交互设计』2018年交互设计趋势解析

    本文转载自:设计前沿2018年交互设计趋势解析2018视觉趋势Pantone 2018流行色:紫外光色Pantone 官方翻译为「紫外光色」,紫外光色是强烈挑动思绪与深思的紫色调,传达独创性、创造力及前瞻性思维,为我们指向未来。彩通:18-3838 紫外光色颜色代码:#5f4b8bRGB:R 95,G 75,B 139CMYK:C 71,M 73,Y 7,K 8从2017年下半年开始,紫色配色的作品开始很多,所以2018年这个色也是一个...

    2018-04-25
  • 至纯至简|手机百度8.0设计总结

    8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。

    2017-05-12
  • 巧用9大服装穿搭技巧,助你轻松搞定专题页设计!

    到目前为止,我已经写了好几十篇关于Banner设计的文章了,目前应该还没有人把Banner设计讲出这么多门道出来吧(脸红ing……哈哈)。但是,我今天想升级一下,不讲Banner设计了,而是给大家讲一下Banner设计的进阶版——专题页设计(做好专题页的前提就是做好Banner设计,这也为什么我会在前面那么大篇幅讲Banner设计的原因咯)。

    2017-05-17
  • 「大产品小细节」5分钟了解格式塔原则

    这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。

    2017-08-04
  • VUI语音交互设计:三步打造任务导向型对话场景

    语音交互的主要能力在于开放式domain的聊天型功能与任务导向的技能型功能。如果说快捷高效、轻松自然是语音交互的独特优势,那么任务导向型功能就是这些优势的完美落点,一个量好的语音交互产品,自然是技多不压身,能够cover的domain多越好,能够get的技能越强大越好。那么,作为语音产品设计人员,如何以短平快的方式设计一个任务导向型对话场景呢?当然,和传统交互设计工作一样,前期调研是很有必要的。你想设计的这个功能是否能满足产品目标、是否...

    2018-02-15
  • 【交互】做上进的设计师,交互设计大趋势!

    一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出在移动产品中会被广泛应用的十大交互设计趋势。希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验。|…

    2017-08-01
  • 用好的交互设计来管理复杂-“个人中心”

    “复杂是世界的一部分,但它不应该令人困惑,好的设计能够帮助我们驯服复杂,不是让事物变得简单(如果复杂是符合需求的),而是去管理复杂”。复杂是可以被管理的,但要做到这一点,我们都必须做好自己该做的那部分工作。

    2017-05-19
  • iPhone X 交互设计官方指南

    编译|覃云北京时间 9 月 13 日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南,我们将它翻译出来供大家参考。本文首发于 InfoQ 垂直号移动开发前线,ID:bornmobileiPhone XiPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。屏幕尺寸在纵向方向上,iPhone X 显示屏...

    2018-01-31
  • 这7个趋势,也许是2017年电商用户体验设计的关键

    沉浸式体验,虚拟助手,个性化的购物体验,这些都是未来的购物方式的进化方向,影响用户购买的因素更加复杂,而大数据则能够在各个不同的环节帮助电商从业者预测用户的行为与口味。所有这些因素都和用户体验相关,同时,它们也意味着,电商行业任重而道远。

    2017-05-13
  • 使用 Sketch 搭建动态布局

    如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很…

    2017-12-28