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

本文是系列文章之详解组件控件结构体系的第三篇——引导类。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

相关推荐

  • 交互设计师的60日计划第十五天

    今天晚上去上了想上已久的舞蹈课,超级超级开心。说要学舞说了这么久,总是不能兑现。今年的另一个要实现的事情,就是每周坚持学舞蹈吧。 20150813 产品经理的自己提的方案也可能并不是他想要的 很久以前师父和老大…

    交互专题 2015-08-20
  • 02案例:用户体验和结婚教练

    用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为结婚也好,创业找合伙人也罢,都是非常重要的长期关系。改变一个人...

    2018-04-04
  • 如何发现交互设计中的思维盲区

    在一个项目中,交互设计起着承上启下的作用。开发人员根据交互文档搭建初步的程序框架,视觉设计师基于交互设计进行精细的界面设计,之后再交付开发。交互设计方案的改动涉及多方的调整,虽然不及产品需求变更那样…

    2015-08-26
  • 五一福利大放送,再不收藏就没有了哦

    老板阿西太抠,说了好久才同意五一送福利,今天小编就放血,给大家送点福利,机会不是天天有该出手时就出手。 图标和字体想怎么用就怎么就,让设计不再孤单,要的就是这个范儿。 字体下载地址:http://pan.baidu.co…

    2015-05-01
  • 总结|2017年的5个网页设计趋势

    几何图案与全屏背景图结合、灰色的高级用法、色彩叠加……这篇总结的这5个网页设计趋势,其实在年底就初现端倪,所以2017年大面积运用几乎势在必行,想不落人后记得打开阅读哟。

    2017-05-08
  • 选择爱情与用户体验

    用计算机思维的视角来看爱情和用户体验。一、做结婚教练的互联网产品经理最近发现一个心理咨询师现在转型做了一个结婚教练。她是我的一个心理咨询师朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。那么这个结婚教练以前是干什么的呢?她以前也是做过一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何...

    2018-02-03
  • 不扁平的设计:我们的世界没有一处是光滑和平整的

    “当我们在思考一个问题的时候,我们需要开放模式;但一旦我们找到一个解决方案,我们必须切换到闭合模式去实现它”

    2017-05-25
  • 以服务设计视角推动设计赋能

    作者:阿里UED 周静&谢辉敏小编说:未来的设计都应该归纳服务设计的范畴,包括用户体验设计、交互设计等,比如新零售设计就是一套完整的服务设计体现,不要等服务设计成熟了再去设计,谁先先学习,谁就抢占了先机~~为未来充点电!本文较长,读完需要点耐心~~近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的不同阶段与方式。同时越来越多的设计师也逐渐意识到了只有在协同业务的全流程中利用体验...

    2018-02-13
  • 人机交互 (HCI) 交互设计 (交互设计) 的区别是什么?

    作为一个PM当然非常需要注重产品在使用过程中的一些交互体验,可是广义的人机交互和交互设计又有什么区别呢?让我们来看看知乎里别人都是怎么回答的吧。

    2014-12-30
  • 用户体验地图(User Experience Map)制作过程中的一些误区

    作为一种新的产品设计以及用户体验设计工具,User Experience Map(用户体验地图)已经被越来越多的产品经理以及设计师们所接受;确实,在产品策略、功能设计、用户服务等一系列产品发展过程中,用户体验地图的建立可以直观的呈现用户在每一个目标任务下的行为、情感、思考过程,有效的为产品工作者提供各方面的信息。然而作为一种新的工具,铺天盖地的方法论将产品工作者淹没在前进的路上。大家都热衷于建立一个这样庞大而系统的“图片”,都不约而同的将注意力放在如何产出这个Map上,甚至是依葫芦画瓢根据国外的产出物反推这个东西是怎么制作出来的。基于这种现状大多产出的Map都会“徒劳无功”,着急产出的同时你已经忽略了很多原则性的东西。下面我们就从以下几个方面来聊一聊这个过程中容易进入的误区;

    2017-05-26