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

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

相关推荐

  • 通知:本站为了更好为广大的交互师服务, 现在更名为www.iamue.com

    通知:本站为了更好为广大的交互师服务, 现在更名为www.iamue.com 中文站名:我是UE 同时我们也启用了woshiue.com 广大交互师可加入交互设计学堂群参与交互原型设计讨论 群号:156360020 加群暗号:iamue  

    交互设计 2015-03-18
  • 资源贴|2016年Top20 UX设计博客和资源网站

    全球用户体验和用户界面的发展从未停止,并引领潮流,似乎每个人都知道该行业的流行语。尤其重要的是要时刻更新行业最新想法和会谈结果,但很难从众多的资源中找到真正有帮助的材料,所有撰写该文,这就是博客的方便之处。

    2017-05-19
  • 交互设计 | 一部自嗨的头号玩家为什么吸引你?

    Create Your Difference. by CYD头号玩家头号玩家到底什么吸引你?情怀吸引了你?动漫迷的高达情怀电影迷的金刚情怀恐怖情怀或者跳舞机情怀?或许美国大片吸引了你?▲有坏美女▼坏boss▲坏人老出BUG▼好人老有神助▲英雄要崇拜▼大部队会赶来不管什么吸引了你把你所有的感触和情绪放大一万倍的东西是艺术和科技当然,我相信你们都知道不就是VR和AR吗整个电影都建立在VR和AR的基础上没有这牛逼地眼镜,这个故事还没开始就可以...

    2018-05-05
  • 从周星驰的电影出发,浅谈用户体验的四个特点

    周星驰电影很受大众欢迎,而且具有很强的生命力却是一个不争的事实。而大众欢迎,生命力强正是我们在用户体验所追寻的目标。只有用户知道你核心性能和速度直接超越暴风影音,差异化才出得来。
    ——马化腾

    2017-05-03
  • 4K已至,保障用户体验是成功的关键

    4K技术介绍1.1什么是4K分辨率图像的大小一般用像素分辨率来表示,例如1920*1080的分辨率就意味着图像是由水平方向每行1920个像素以及垂直方向每列1080个像素组成的。出于方便交流的原因,业界也常常以图像水平方向上的像素值来表示图片大小,而且为了简化交流过程,一般情况下会用“K”来描述像素值,其中1K相当于1024个像素,几K就是指图像的水平方向每行像素值达到或者接近1024的几倍。以此为标准,4K图像就是指水平方向每行像素值...

    2018-04-04
  • 产品原型设计之交互体验的思考过程(二)

    接着上一篇《产品原型设计之交互体验的思考过程(一)》,这篇主要针对微记第二版的原型设计调整的思考过程作一下详细的说明。

    2017-05-23
  • B2B、SaaS等企业软件中的交互设计总结

    我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。一、什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件在现代企业中,大多数企业应用是复杂、可拓展、分布式、模块化...

    2018-04-17
  • 新手转向资深的必经之路——交互文件命名的最详细规范(下)

    接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范(上)》继续整理文件命名的规范继续,今天来讲讲Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式。Sophia的tips:真正的高手,细节都做的很好!

    2017-05-01
  • 酱课程丨交互设计第③期 · 原来交互设计师是这样工作的,和你想的一样吗?

    交互课程第三期来啦!查看前两期点击这里——交互设计第①期 · 这个老师只用一张图,就解决了所有设计专业都会遇到的问题!交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!通过前两期课程,同学们了解了双钻图——一套完整的设计流程指导框架、定义了什么是交互设计、它所涉及到的领域以及与交互设计相关的六大Job titles。现在大家对交互设计已经有了一个大致的理解,设计流程框架也是现成的,下面就要进...

    2018-05-04
  • APP界面设计规范编写指南

    在创作阶段设计页面时,如果没有规范来指导,设计过程中很容易产生细微的出入,导致出现控件不一致,增加返工率,这时候我们需要界面制定设计规范。

    2017-05-05