• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超实用!通用设计法则解析之「导引手册」

超实用!通用设计法则解析之「导引手册」

作者:Mills張聿彤 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含新用户引导,用户引导,经验分享,设计法则等相关知识,Mills張聿彤希望在学习及工作中可以帮助到您

设计师必须具备丰富的知识储备,在各个行业中找寻相通的规律和事物的本源。经过多年的沉淀,前辈们留下了大量的通用设计法则,小编汇集法则进行讲解,抓取法则在用户界面设计中的呈现,帮助大家更好的理解和运用。法则包含跨学科的专业知识,重拾那些被忽略的本源,将其融入日常设计和用户体验体系中,活用法则来验证自己的设计过程和设计成果。

优秀的设计师有时会无视设计法则。但当他们这样做的时候,通常会有一些补偿性的措施。除非你确定你能做得那么好,否则最好还是遵守这些法则。——威廉·斯特伦克(William Strunk)

一、「导引手册」

「导引手册」(Advance Organizer)是指:在给出新信息之前,提供一些简单的说明,以文字、图画、声音等形式呈现,帮助大家更容易了解新信息。「导引手册」相比「概述」和「摘要」来说形式更为多样。

使用「导引手册」需以线性方式呈现。(例如在教学时,先从入门介绍开始,由浅入深,逐渐增加难度)

二、「导引手册」的种类

导引手册分为两种:说明型和比较型。

说明型导引手册——适用于对于新信息一无所知或不了解的教授对象(例如下载一个新的 APP,用户打开界面会有新功能提示)

比较型导引手册——适用于对于有相关知识背景的教授对象(例如购买车辆时,有经验的买家会从专业性网站或 APP 上查找资料对比车辆性能配置)

下图为移动端导引手册的结构脑图:

三、说明型导引手册

「导引手册」在移动端应用十分常见,用户引导就是典型的说明型导引手册,帮助用户快速了解下载的应用以及新增功能,给予用户引导,减少误操作,提高产品的用户体验。

1.?全局型

全局型:在主功能页面之前呈现,占据整个页面,去除其他干扰用户的因素,使用户注意力聚焦于引导内容。(包括新手导引、操作导引、闪屏导引、弹窗导引)

新手导引

新手导引通常使用页面遮罩+提示的方式,是一种阻断型的设计,较为强势的说明产品功能的使用方法,视觉效果直观,可以帮助用户快速学习核心功能或新增功能。需要注意几个要点:触发功能时进行引导;突出产品的重点功能;文字尽量精简;采用分步式展示。

京东金融使用阻断型设计的新手导引强制用户观看功能说明,为了让用户快速了解产品功能,减少误操作,加强了金融类产品在安全性维度的用户心智。

新氧使用新手导引进行说明,提前帮助用户理解功能。对于新人用户而言,仅通过图标和标题展示(练习社)的功能入口是难以理解的。

操作导引

引导用户去完成某种指定的操作任务,常用于完善资料、认证身份、充值、收藏、关注、签到等功能流。另外,在页面中加强视觉表现力,吸引用户操作的设计也属于操作导引。(如 FAB按钮、签到功能、icon 的动效等)

东家APP 在用户「登录/注册」过程中,通过按钮上的文字(发送验证码、下一步、完成等)变化,引导用户按照步骤完善信息,从而顺势完成整个「登录/注册」流程。

闪屏导引

闪屏导引的主要类型为:常规闪屏、广告闪屏、活动闪屏、节日闪屏、大版本升级闪屏。大版本升级闪屏会被作为说明型导引手册,向用户展示新功能和操作方法。

大众点评在闪屏中使用文字、图片的形式展示产品的新功能、视觉风格和品牌理念。

弹框导引

弹框导引会打断用户操作,吸引用户注意力,使用有透明度的黑色折罩(60%~80%)加上不同形式的弹窗组成。弹窗可以使用系统自带的,也可以个性化定制,弹窗导引一般需要用户作出选择或继续操作。

西柚月经助手、票哒哒理财、大众点评的弹窗阻断用户当前操作,强关注新内容,并附带文字、图片、按钮引导用户继续操作。(也可以选择关闭)

2.?局部型

局部型:采用弱交互的方式,在用户需要引导的功能周围出现,轻量的吸引用户注意新的新信息。(包括对话式导引、功能性导引、通知导引、红点导引、文字导引、Toast导引)

对话式导引

对话式导引一般出现在新增功能旁,悬浮在页面上,点击屏幕或等待几秒就会自动消失。视觉效果明显(或带有动效),增加用户的查看欲望。相比新手引导,对话式引导的视觉重量较轻,不会阻断用户操作。

网易云音乐运用了对话式导引,用户操作/点击屏幕后导引便随之消失。这样的处理方式在不打断用户操作的情况下,轻量化的提示减少对用户的打扰。

大姨妈APP 登录页面中第三方账号登录入口旁常常会提示上次登录的账号;美柚对新用户头像会进行提示,提醒可以上传更清晰的头像;更美用动效(红点带有动效)吸引用户查看日记详情。

功能性导引

功能性导引比较隐蔽,一般安放在用户触发重要功能时,预防用户误操作造成的严重后果。

支付宝在对话框中输入数字时会触发转账按钮(预测用户输入数字时会有转账需求);截图后一段时间内点击加号按钮自动出现最近的截图(预测用户在截图后会将图片发送好友的行为)。这两个功能性导引主要是为了提高用户的操作效率。

通知导引

通知导引位于页面主要内容的顶部,通常用户需点击操作进入新信息的内容页面,返回后原页面通知导引消失,起到警示和提醒的作用。

秀动的通知导引位于资源位和风格推荐模块之间,QQ、小红书位于列表上方,其视觉样式都有别于页面主要内容,并且用户操作后会消失。

红点导引

红点导引就是页面中常见的小红点,常用于未读消息的提醒,可以是小红点,也可以是小红点+数字的形式。通过视觉聚焦的形式提高用户点击。

文字导引

文字导引常出现在列表中,用于补充功能说明/活动说明,一般会使用醒目的字体颜色或是伴随红点,引导用户点击。

Toast导引

Toast 导引较轻量,不操作3秒左右消失,属于弱交互,与传统 toast 不同在于可以手势操作,引导用户查看新信息。

人人视频和优酷视频的 toast 导引是活动时期使用的,导引点击进入活动页面;脉脉的 toast 导引用于提醒新动态,属于常规功能。

3.?混合型

混合型:这种模式的表现手法既有全局型,也有局部型。(包括空白页导引)

空白页导引

空白页导引有整个页面和局部页面两种表现形式,同时包含跳转按钮,可以继续操作。通过状态描述、内容描述或步骤描述等方式作为立意点引导用户进一步操作。

唱吧、淘宝、饿了么的空白页导引运用的是全局型,阻断用户操作,分别阐述了当前内容状态/使用功能前提说明/后续步骤说明,引导用户前往了解并选择是否需要开通功能。

喜马拉雅、小红书、拼多多使用的是局部型空白页导引,占据页面一屏1/2或1/3的面积,引起用户的强关注,但是不打断用户操作。

四、比较型导引手册

比较型导引手册在移动端中的应用比较少见,适用于专家用户(对某些领域热爱钻研/互联网从业者热衷于研究APP)。比较型导引手册的重点在于对比,从对比中发现所需的信息,了解产品差异,可以是几个产品之间进行对比,也可以是产品自身的对比。

1. 相互对比导引

这一类对比导引常用于购物场景,用户需要对比不同商品的具体参数,了解哪一种商品更符合

您可能想查找下面的文章:

  • 超实用!通用设计法则解析之「导引手册」
  • 20年前的Windows 98,有一套不俗的新用户引导流程
  • 8种引导方式,7个设计要点,让你全面了解新手引导!
  • 这样做引导,帮你的用户快速熟悉手势交互
  • 如何在新用户引导流程中用好空状态界面?
  • 实例教学!10步打造更好的新手入门体验
  • 帮助新手熟悉产品的向导程序,遵循着怎样的设计模式?

相关文章

  • 2018-08-23设计师的下半场,掌握全链路设计的5个方法
  • 2018-08-23实战案例!「滴滴出行」的商家红包项目经验总结
  • 2017-08-06网页flash动画不显示的解决方法
  • 2018-08-23用京东的概念案例,深入浅出为你解读「品牌化」
  • 2018-08-23交互基础小课堂!如何利用 “峰终定律” 改善用户体验?
  • 2018-08-23设计师越来越多,但为什么APP设计得越来越像?
  • 2018-08-23规范、方法、一致性,真有那么重要吗?
  • 2018-08-23风骚一点!在网页中玩转霓虹色的正确姿势
  • 2018-08-23高手课堂!「按钮系列」之按钮位置与用户体验的关系
  • 2017-08-06Web设计10个在线开发工具介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 我用这个极限推敲法,有效推进视觉设计
    • impress.js表现层框架(演示工具)-初体验
    • 基础小科普!8种常见的版式设计方法汇总
    • 如何减少操作步骤?我总结了这3个方法!
    • 设置网页图片热点链接以及坐标值示例代码
    • 通过这篇文章,帮你彻底搞懂微交互
    • 如何画好一张描边插画?来看这份超全面的总结!
    • Webpack 入门教程
    • AI教程!教你 3 步做出高格调的悖论空间
    • css样式的优先级究竟庞杂到什么程度

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有