行业资讯 > 小程序UI如何设计

小程序UI如何设计

北京宣传物料设计公司 更新时间:2025-01-08 内容来源:UI设计公司


一、用户引导是什么

 

引导是通过某种手段或方法,干预目标对象的决策和发展,促使其更快地接近目标。从用户的角度来说,引导能降低学习成本,迅速上手使用产品;能告知有价值的信息,减少时间和精力开支;也能提前预知帮助,愉快的学习使用产品。从产品的角度来说:需要通过用户引导,让新用户快速了解使用产品;吸引用户使用操作新功能或指定对象;提前给予用户帮助,提升产品UI设计体验的愉悦度。

 

二、用户引导的类型有哪些

 

1.信息提示类

 

用信息展示的方式,帮助用户理解产品的功能和所需要执行的操作。最常见的就是“小红点”“未读提醒”“更新提醒”这样的提示。例如下图脉脉页面中的红点和数字标识。

 

2.功能提醒类

 

出于有些icon达意不明确、有些功能被收起或隐藏在手势中、主打功能希望被用户快速掌握等原因,需要加以引导降低用户的学习成本。左图是微信预知引导发图的功能,当检测到相册里有新增图片时,一定时间内点击微信的“+”,就会出现一个发图的小浮层。此功能引导已成为很多应用模仿学习的对象。右图是支付宝的对话页面。你是否遇到过这样的情况,当你打开支付宝想给对方转账时,点击“发送”后才发现发过去的是个文本信息。应该是支付宝的设计师也嗅到了这个痛点,将此问题优化为检测到用户输入了纯数字内容时,便在键盘的上方出现一个“给对方转账XX元”的按钮。

 

3.操作引导类

 

操作引导分为强制性的和非强制性的。强制性的主要是登录、注册、安全认证、激活相关流程,需要身份验证后才能继续进行后续的操作;非强制性的则多是鼓励用户操作,例如完善的资料、关注更多好友、分享转发等,这类引导最好给予一定的激励。从左到右依次为:闲鱼引导用户开通闲鱼号,好处是可以看到sei在关注你Facebook引导用户授权访问通讯录,可以找到更多的好友;腾讯新闻引导用户登录注册,可以查看更多有趣的个性化推荐。

 

4.内容推广类

 

除了自身功能之外,产品中也会包含一些额外的推广性引导,最常见的就是产品中植入的广告。

 

UI设计


三、交互设计中常见的11种引导形式

 

1.引导页

 

引导页用于APP下载/更新第一次打开后,来向用户展现产品中的功能和操作方法。通常用户对信息吸收的效率并不高,用户更希望赶紧体验产品而不是看这些教导。因此引导页的数量一定不要过多,页面简明扼要、中心明确才是王道。

 

2.页面遮罩

 

遮罩式引导为一种比较强势的引导,通过直接盖住界面来强调当前需要引导的内容。一般遮罩层为半透明,在此图层上,通过各种图形来结合被盖住的界面内容,引导用户聚焦到重要的信息。遮罩式浮层无法自动消失,而是需要用户操作后才能隐掉。

 

单页蒙层引导:单页蒙层引导的适用场景非常多,比如在展示新功能、说明界面中功能位置的改动、讲解操作方式、体现特定的手势交互划分说明界面的整体结构等等。

 

分步引导:分步引导就像上楼梯一样,会一步一步由浅到深地引导用户进行操作。这类引导方式常用于界面相对复杂或完整交互流程比较长的工具类产品,带领用户快速了解每个功能的收纳位置,或让用户以最短路径完整体验一遍操作流程。当然它的缺点也比较明显,因为引导过程是连续的,用户不可以自己控制步骤,所以有时候会让用户产生厌烦情绪。因此我们分布引导不建议太多步,2-3步足以,太多的话可以设置一个跳过按钮,用户操控性更强。

 

3.空状态引导

 

在新用户初次进入产品后,会面临很多页面内容都为空的情况,此时我们就可以利用这些页面的空状态去很好地引导用户从无到有的去创建内容。如果空状态页面只是简单告知用户「这里没有内容」,用户往往会不知所措,不知道下一步该做什么,所以这是一个非常棒的时机引导用户去尝试对应的操作。比如下图咸鱼没网络时会出现空状态,并引导用户刷新网络;B站在网络断开时会出现空状态引导,引导用户重新刷新页面。文章编辑器在没有发布文章时会提示用户赶紧写一篇。绝大多数空状态界面会告诉你,为什么会遭遇这样的情况。但是真正有效的空状态,会告诉你下一步要做什么。空状态界面就是最佳的起点,你可以通过设计来鼓励用户前进。

 

4.气泡提示引导

 

气泡引导是一种量级轻,但目的指向性却极强,对用户的干扰极小。大部分浮层模式带有指向性的箭头,可以用来提示重要功能或者隐藏操作。一般会出现在用户初次进入页面时,它的表现形式是在操作按钮旁边弹出一个气泡提示框。

 

5.操作示意

 

操作示意较常采用简短的动画向用户展示操作方法,也不乏静态图片配以描述的方式。这种方法的好处是很直观,用轻松浅显的手法,就能传达给用户新鲜的功能和趣味的用法,比生硬的文字来得体贴。如下图用户首次进入H5会提示用户旋转手机横屏操作,文字加上手机旋转的图形设计,更方便用户快速理解。

 

6.互动式引导

 

互动式引导通常比较隐蔽,是在用户与产品之间互动的过程中引导用户完成操作。常见的如下拉刷新、底部上拉等手势互动。互动式引导也经常发生在语音操作中,例如用户使用麦克风的过程中,界面随着用户的声音的输入而产生互动。

 

7.弹窗

 

与遮罩式相同,弹窗也能达到很强的引导效果且对当前操作具有很大的阻断力。通常以文案配具体操作的形式呈现,可辅助搭配图片烘托主题。需要用户有明确的选择后才能关闭弹窗。

 

8.激励引导

 

激励引导常见的有任务激励和榜样激励。任务激励是通过让用户做特定的任务从而获得相应的好处,是拉新、促活惯用的方法。榜样拉新则更偏向心里战术,激发起人性的好胜心,加之用奖品,更有激励作用。下图1和图2采用明确的进度条,告诉用户当前进度以及完成目标后可获得的奖励,激发用户好胜心。图3用倒计时营造紧张感,告知用户再不邀请好友这些奖励就失效了,这种怕失去的心理促使用户赶紧行动。

 

9.嵌入式引导

 

嵌入式引导将引导内容直接嵌入到界面,可以嵌入到状态栏、导航栏或主体信息流中,让引导成为产品的一部分。常见嵌入式引导形式有信息提示条、空状态引导、和预置内容。信息提示条和空状态常用于异常状态提示,引导用户接下来可以做什么。

 

整体嵌入:整体嵌入是将引导做为一个整体代替页面内容得显示,也就是整个页面都是引导提示,可以理解为空状态,属于主动型引导,。最常见的就是为空页面:文字提示+插图占位符+跳转button,点击button会进入某个页面,要避免出现下面第三个整页空白的情况,不然用户会觉得卡住了或是出现了bug。

 

局部引导:局部嵌入就是保留当前页得内容,同时增加引导提示。为了保证对象不埋没在信息流中,有效地引起用户注意,需要从视觉上做处理。局部引导一般会在页面顶部出现,也会有嵌入UI页面某一地方的情况,通常会用作警示作用,比如:消息提醒未打开,网络异常等等,通常的组合是:文字+伴有红色、黄色等警示类色块(+关闭button),足以引起用户的重视。

 

10.Snackbar引导

 

 snackbar通常出现在屏幕底部的提供有关app相关的信息提醒,它属于轻量级的信息提醒,一般出现几秒后就会自动消失,不会中断用户操作。snackbar往往由一条文案+1~2个引导性按钮组成,带有一定的交互性。

 

相对Toast而言,Snackbar的优势在于可读性更强,还可以兼容1~2个次要操作,适用场景会更加广泛。

Snackbar的显示与消失机制显示时不会打断用户操作,在以下情况下会消失:①用户点击Snackbar上的操作,触发操作的同时消失;②用户点击屏幕任意位置时立即消失;③用户不进行任何操作,持续4~10秒后自动消失(时长可自定义)。

 

11.toast提示

 

 Toast应该包含在snackbar里了,当snackbar没有按钮其实就是toast了,不过我们还是把Toast单独拿出来分析。toast是一种极为轻量的提示方式,属于弱交互,对用户打扰较轻,不需要用户进行操作,通常作为功能操作后的反馈。toast出现的时间很短,一般3秒以内,不要指望用户能真正注意到你在讲什么。不要将其用作重要对象的引导形式,大多是可有可无或是会反复出现的,其次语言精练也是必要的。

 

新手引导虽然是很小的一个环节,但在产品设计中每个环节都是非常重要的,它们直接影响了用户的使用感受。所以希望大家都能像匠人一样去打磨自己的产品,给用户带来高水准的用户体验。蓝橙视觉是一家专业的小程序UI设计公司,有丰富的设计案例可供大家参考,欢迎点击咨询浏览参考。


北京PPT设计美化 扫码立即咨询