陌北默

作为UI设计师,在设计一个APP 的时候,总是会收到各方意见,提示用户怎么使用某个功能,怎么去引导用户的问题?

实际的生活中,我们买电器或者任何物品,我们又是怎样被引导的呢?

如上图所示,实物产品的引导包含外包装和说明书:

  • 外包装:告知用户这个产品可以做什么
  • 说明书:具体的功能引导,产品的参数值等

那跟我们做 APP 的引导,有什么相似之处呢?

做应用设计的时候,总会遇到怎么去引导用户使用功能,一般分为以下两种:

  • Onboarding / 引导页 : 告知用户 APP 可以做什么; 》 外包装
  • Function Guide / 功能引导 :告知用户怎么使用这个功能; 》 说明书

 

一、Onboading / 引导页

引导页 — 外包装 ,在用户未使用产品时出现,告知用户这个产品可以做什么,产品可以满足用户什么样的需求,然后让用户决定使用这个产品;

 

1. 告知用户 APP 可以做什么

 

2. 兴趣类的应用,引导页让用户选择感兴趣的内容

展现的形式多种多样:

  • 图片
  • 视频( 如 Keep 使用视频的方式,真实还原运动的场景 )
  • 视频 声音
  • 图片 声音(如微信某个版本,使用了一首歌曲作为引导)

 

交互的方式:

  • 左右切换
  • 上下切换

 

二、功能提示

功能引导 — 说明书,在用户使用产品的过程中出现,解决用户使用中遇到的问题。告知和提示用户怎么操作。

 

1. 提示用户,怎么使用这个功能

 

2. 告知用户目前的状态:空白状态、无网络情况、获取不到数据、加载中等等

1) 空白状态

 

2) 无网络情况

 

3) 加载中

 

什么是好的引导呢 ?

  • 常规的设计:只告知用户目前的状态,如图 1 所示;
  • 更好的设计:告知用户目前的状态,且合理地引导用户接下来去做什么,如图 2 / 图 3 ;

 

作者:Ting 非科班设计(公众号)

feikeban

转载请注明:学UI网 » 怎样设计好的引导?

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
设计规范 | 详解组件控件结构体系-空数据类设计规范 | 详解组件控件结构体系-空数据类
精选5款小程序原型模版精选5款小程序原型模版
设计规范 | 详解组件控件结构体系-网络异常类设计规范 | 详解组件控件结构体系-网络异常类
UI设计中的布局编排原理UI设计中的布局编排原理
设计规范 | 详解组件控件结构体系-引导类设计规范 | 详解组件控件结构体系-引导类
设计规范 | 详解组件控件结构体系-加载类设计规范 | 详解组件控件结构体系-加载类
设计规范 | 详解组件控件结构体系-导航类设计规范 | 详解组件控件结构体系-导航类
BOSS惯性推翻设计稿BOSS惯性推翻设计稿
设计指南!移动应用弹窗的应用设计指南!移动应用弹窗的应用
为你增加工作经验②——Tab的小短线为你增加工作经验②——Tab的小短线