摄影专区

当前位置:金沙7868com > 摄影专区 > 提示类控件之,解析活动专题页信息表达法则

提示类控件之,解析活动专题页信息表达法则

来源:http://www.jilawu.com 作者:金沙7868com 时间:2019-09-24 05:57

每逢节假日各种运营推广活动如星云般涌现,在众多活动中如何让你的活动页设计脱颖而出,在最短时间内hold住用户脚步。下面我们一起看一下活动页信息展示法则,帮助你的活动页提升瞬间杀伤力。

每逢节假日各种运营推广活动如星云般涌现,在众多活动中如何让你的活动页设计脱颖而出,在最短时间内hold住用户脚步。下面我们一起看一下活动页信息展示法则,帮助你的活动页提升瞬间杀伤力。

I. 定义

1. 模态(modal)弹窗:很容易打断用户的操作行为,强制用户必须回应操作,否则不能进行其他操作。

2. 非模态(nonmodal)弹窗:不会影响用户的操作,用户可以不回应,非模态弹窗通常都有时间限制,出现一段时间后就会自动消失。

二者区别:非模态弹窗通知用户信息,而模态弹窗除了传达信息外还可进行功能操作。

当人们全身心地投入在某个活动中时,会对周边干扰视而不见,这种状态被称为"流"。人们进行游戏或其它创造性活动(编程,绘画)时更容易进入“流”,而日常生活中这种状态却很少。about face这章所讨论的“流”并不完全是游戏等娱乐或创造性工具中用户进入的那种“心流”状态。因为比起游戏可以让人通过创造性成就和能力的提高带来的满足感和愉快感,绝大部分交互产品是希望用户使用产品时能高效顺利的完成任务。所以本文讨论的是,如何有效地设计出与用户“流”相匹配的交互,对于用户想要完成的任务或者产品希望用户去完成的任务,提高其效率,完成率和流畅度。

一.重要信息突出展现

一.重要信息突出展现

II. 优缺点

优:

1.让用户感知未离开当前页面,没有丢失正在浏览或填写的内容,又能够清晰地预见接下来要去向哪里,给用户引导的同时让用户对操作有掌控感;

2.相对独立,不影响页面布局;

3.一次性操作,解决简单,较页面轻,易返回,不需要刷新整个页面,展开/收回速度快,整个过程流畅。

缺:

1.不在用户预期之内出现的、无用的、打断用户操作的提示、告警信息;

2.不断叠加的弹窗,在弹窗内启动弹窗。

策略一:在用户执行任务前-避免空状态

● 活动页的重要信息是:活动标题(让用户了解是做什么的活动)、奖项设置(参与能得到什么)、参与入口(进入任务流程的通道),参与规则(如何参与活动),活动有效时间,排名或获奖信息。

● 活动页的重要信息是:活动标题(让用户了解是做什么的活动)、奖项设置(参与能得到什么)、参与入口(进入任务流程的通道),参与规则(如何参与活动),活动有效时间,排名或获奖信息。

III. 类型

i. 模态弹窗3种:Alerts/Dialogs、Action bar/Activity View/Action Sheets、Popovers/Popup

  1. Alerts(iOS)/Dialogs(Android):警告框/提示框

一般由标题、描述信息*、输入框、功能按钮*组成,用户点击某个功能按钮后弹窗消失,App执行该功能操作,进入相应流程。

Dialog包含了一个标题(可选),内容 ,事件。

标题:主要是用于简单描述下选择类型。它是可选的,要需要的时候赋值即可。

内容:主要是描述要作出一个什么样的决定 。

事件:主要是允许用户通过确认一个具体操作来继续下一步活动。

作用:用户进行了敏感操作或状态改变,在该结果发生前以对话框形式传达重要信息,告知用户当前状况,让用户主动选择回应,适用于结果影响性较大的重要操作,如退出(APP/当前账号)、离开流程(确认订单/编辑地址)、删除、清空、开启消息通知等

Alerts

Dialogs

  1. Action bar/Action Sheets(iOS)/Activity View(iOS):操作栏/工具栏、操作列表、活动视图

Actionbar比Dialog提供更多功能按钮选择,默认有“取消”功能按钮,点击该按钮或弹窗以外的区域关闭弹窗。

在iOS中常见样式是页面底部的文字列表框,以简洁的功能描述性文字展示功能按钮。形式为文字、文字+图标、图标(较少见)。

作用:提供一系列在当前情景下可以完成的任务操作,适用于分享功能

Action Sheets

Activity View

  1. Popovers(iPad) / Popup(Android):弹出框/浮出框/浮层弹窗

提示工具Tooltip的插件,当用户轻点某个控件或页面中的某一区域时浮出的临时视图,大多浮动于顶层,弹出解释或操作气泡。

作用:可在当前页面进行更多操作,常用来显示/隐藏页面中折叠的额外信息,或呈现一些常用操作的快速入口。

Popovers(iPad)

iPhones避免使用popovers,所以在iOS端popovers的样式为iPads专用

ii. 非模态弹窗 2种:Toasts/HUD、Snackbars

  1. Toasts/HUD:提示框

1)Toasts吐司提示(Android)

Toasts

轻量级弹窗,给予用户及时提醒或消息反馈,一般用来显示操作结果或应用状态的改变,确保用户知晓自己所处的状态。

常见Toasts为一句简短的描述性文字,可在页面顶部、中部或者在底部出现(通常在页面的中轴线上),具体的显示位置根据页面的整体设计进行设置,同一款产品尽量使用相同位置,让用户产生统一认知。

优点:

1.占用屏幕空间小; 2.不会打断用户操作; 3.使用简单适用范围广

缺点:

1.显示停留时间短,占用区域不大,易被用户忽略,不适合承载过多的文字和重要信息,尤其在碎片化时代注意力不集中容易错过提示

2.被滥用于加载、表单提示、状态变更反馈、断网消息等,不断出现的黑乎乎矩形样式上给人一种模态的错觉,阻塞感会打断心流。

3.遮盖其他控件,但不能对Toasts进行交互。

在Android规范中Toasts:

出现在屏幕底部;

只能放文字不能带图标,文字要精简;

短时间后会自动消失,系统默认停留时长2s(短)和3.5s(长);

不可进行交互。

| 在iOS 将Toasts的位置由屏幕底部和中间改到顶部的尝试

好处:1.出现位置稳定:不会因为软键盘出现导致原本在屏幕底部或中间的Toast被遮盖或浮动到其他位置。2.更容易引起用户注意:iOS持续录音、GPS被使用、正在通话状态、活动指示器和系统推送通知都在屏幕顶部,符合用户在顶部感知反馈信息的习惯。3.不会遮挡主体内容,不干扰浏览。

2)HUD透明指示层(iOS官方无Toasts,只有HUD)

HUD可能来源于 平视显示器(Head Up Display),最初是运用在航空器上的飞行辅助仪器,飞行员不需要低头就能够看到需要的重要资讯。

Toasts和HUD不同之处:

1>Toasts一般出现在屏幕底部,HUD出现在屏幕中间。

2>Toasts一般是灰黑或黑色半透明,HUD一般是毛玻璃半透明。

3>每次产生的Toasts内容不可改变,HUD内容可以改变(比如调节音量时出现的HUD)

  1. Snackbars(Android):底部弹窗

Snackbars

Google MD规范中Toasts和Snackbars为一类。

由信息内容和一个功能按钮组成,位于屏幕最上层,可在屏幕上滑动关闭,或触控其他屏幕区域自动消失。

作用:反馈操作结果,点击功能按钮后弹窗消失,系统执行该操作,完成相应的功能流程。如删除任务时,屏幕底部出现“任务成功删除”并附带撤销操作,点击撤销任务可恢复;不进行操作Snackbars则消失,任务删除成功。

Snackbars与Toasts对比:

相同点:

1.都为小弹窗的形式,会自动消失;

2.显示停留时长可自定义(建议遵循系统标准);

3.屏幕上只能有一个弹窗

不同点:

1.Snackbars一般都会有操作按钮,如撤销;Toasts无操作;

2.Snackbars一般出现在底部,Toasts一般出现在中部;

3.Snackbars可操作关闭,Toasts不可交互;

4.Snackbars打扰程度高于Toasts;

5.Snackbars运用未普及,可能造成用户理解负担

对于大多数人来说,从空白开始很困难,而在别人做好的基础上开始则会更简单

● 活动标题(包含动词)、活动有效时间,奖项设置 、参与入口必须完整包含首屏安全区内,活动规则可部分包含在安全区内。

● 活动标题(包含动词)、活动有效时间,奖项设置 、参与入口必须完整包含首屏安全区内,活动规则可部分包含在安全区内。

IV. 设计指导

1. 在使用弹窗的时候要尽量克制,要考虑信息内容的必要性和目的性(商业推广或者增值服务等目的),来选择是否使用弹窗和使用弹窗的方式和样式。

当弹窗中的内容太多、交互过于复杂时,已违背了弹窗的最初意义,使用跳转新页面更合适;业务流程是A-B-A时使用弹窗更好,A-B-C时,使用跳转更为合理。

  1. 根据反馈优先级,采用不同的样式:

Alert(强提示性):提示信息至关重要的,要用户做决定才能继续,非用户发起(系统自动发起)一般都用Alert;

Actionbar(次强提示性):重要程度弱于Alert,一般用户主动发起任务,需要给用户更多的功能选择时,使用Actionbar;

Toast(弱提示性):提示信息告知用户某个事情发生了,用户不需要对此做出响应时,使用Toast。

Snackbar:涉及到删除操作类的场景,Snackbar可能是撤销最好的选择。

  1. Dialogs

1)标题和信息内容的文字描述都尽可能的简洁、表述清晰、无异义,也可省略标题只保留内容描述和功能按钮(大多数Dialogs都没有标题);

2)功能按钮最好只有两个,让用户选择“是”或“非”的功能操作(“是”指对内容描述的确认操作,比如确认删除、确认付费;“非”一般指取消操作,然后关闭弹窗);用清晰的措辞来准确表明操作(删除、撤销、前往的我个人信息界面),而不是使用模糊的文案,例如“是”或“否”;

3)只保留一个“确认”按钮,具有更强提示性,让用户阅读内容后,点击右上角提供的关闭操作或者点击非弹层区域关闭弹层,前提要确保信息内容非常重要,才打断用户的操作进行信息内容阅读确认(如新手提示)。

Alerts(iOS)

1)最小化使用Alerts,只应用于破坏性操作或通知重要问题的使用场景,避免用户养成忽略的习惯并认真对待;

2)在横屏和竖屏模式下保证Alerts可读性良好的自适应显示;

3)Alerts标题和信息尽量简短,具有描述性,避免滚动;语气避免指责和批判;

4)常见为双按钮Alerts,按钮文案简洁有逻辑;用户习惯点击右侧的按钮,所以取消应该在左侧;差异化标红显示以区隔破坏性按钮,取消按钮标记为默认以实现加粗效果;

5)允许用户通过退回主屏幕以取消Alerts

  1. 金沙7868com ,Action bars

1)敏感的功能操作用红色字体或其他颜色按钮,突出视觉差异

2)在安卓系统中,Actionbar多为“选择列表框”(选项代替了功能按钮),减少了流程中的页面跳转,若选项和描述文字较多,仍建议跳转选项详情页

3)功能按钮数量过多时,文字列表的形式不适合显示,可用图形加文字描述的形式来进行展示,同时注意弹窗内各功能按钮的ICON设计、排列布局、按钮滚动显示等,留有足够的视觉线索。

Action Sheets

1)提供取消按钮,并始终包含在Action Sheets的底部;

2)突出显示破坏性或危险操作,警示性选项标红色并置于选项顶端,推荐性选项标示蓝色,通常采用官方控件,也可以自定义设计;

3)尽量避免Action Sheets中的滑动操作,如果选项过多,需要滑动才能看到全部选项,增加额外的选择时间,而且很难在滑动的同时不触碰到其他选项按钮。

5.Popovers

1)仅用关闭按钮(如取消、完成)用来确认和引导操作;

2)自动关闭非模态的Popovers时,自动保存内容;

3)在屏幕的适当位置弹出,箭头直接指向点击即展示Popovers的元素(Popovers的来源地)

4)一次仅显示一个Popover,避免在Popover上再弹出一层Popover

5)避免Popovers占位过大,弹窗大小刚好显示完全内容即可

6)改变Popovers大小时,提供平滑的过渡动效

  1. Snackbars

1)通常 Snackbar 的高度应该仅仅用于容纳所有的文本,而文本应该与执行的操作相关。Snackbar 中不能包含图标,操作只能以文本的形式存在。

2)为了保证可用性,Snackbar 不应该成为通往核心操作的唯一方式。Snackbar所有层的上方,不应持续存在或相互堆叠。

3)最多包含0-1个操作,不含取消按钮

7.减少使用方式:

1)采用多状态按钮,反馈明显,不需要额外用Toast进行提示。

2)动效,吸引用户注意力,情感化设计给用户留下深刻印象。事物之间的关系可以通过动效进行隐喻,例如电商App加入购物车,商品飞入购物车中,有趣流畅。

3)声音和震动,建议作为同步辅助反馈手段。

  1. 系统操作引导类可使用插画等视觉效果更加友好的弹窗

图片来源:

在PC端的PPT或者word上,用户创建新文档时,产品会默认创建一个空白文档,而不是首先打开一个对话框,让用户去设置每一个细节。大部分用户都希望产品能迈出“足够好的”第一步,然后按照自己的需要调配,提供模板也是这个道理。同样,产品可以用这种方式将用户逐渐导向目标。

金沙7868com 1

金沙7868com 2

策略二:提供非模态反馈,尽量避免模态的弹出框

● 活动的文字信息使用倒金字塔结构,概括总结性信息放在顶端,重要性依次递减。使用户浏览网站时通过最少的时间了解活动的概貌。

● 活动的文字信息使用倒金字塔结构,概括总结性信息放在顶端,重要性依次递减。使用户浏览网站时通过最少的时间了解活动的概貌。

产品有多种方式向用户呈现或反馈信息。对于模态反馈,比如弹出框,它让程序处于一种特定状态,用户必须进行相应操作后才能返回以前的状态,这就打断了用户当前的操作流。而非模态反馈则不会干扰或打断用户当前的操作,它把用户需要的信息构建在界面中,不需要用户去操作。

金沙7868com 3

金沙7868com 4

这里以在网易云音乐里发布动态这个任务为例来说明设计原则

二. 任务操作流程顺畅

二. 任务操作流程顺畅

网易云音乐定位移动音乐社区,产品希望所有人能在这里找到音乐的归属和情感的共鸣。对于UGC社区而言,如何让用户自发的去创造内容是产品的关键。那么这里的设计目标就应该是提高发布动态这个任务的完成率和流畅度。

● 用户开始任务前,若任务流程需要分步骤呈现,需要一个图形化的流程示意,使用户对任务的操作步骤有整体了解。

● 用户开始任务前,若任务流程需要分步骤呈现,需要一个图形化的流程示意,使用户对任务的操作步骤有整体了解。

金沙7868com 5

金沙7868com 6

金沙7868com 7

网易云音乐iOS3.5.2

● 用户进行任务中,若使用对话框承载任务流程的分步骤,需提供上一步,下一步引导机制。

● 用户进行任务中,若使用对话框承载任务流程的分步骤,需提供上一步,下一步引导机制。

从第一张图可以看到,在用户输入文字前的空状态,产品就有文案提示,“一起聊聊音乐吧”,引导用户发布关于音乐的感想。这里有个细节是,当用户进入这个页面时,产品可以自动在文本框获取焦点,既减少了用户的点击次数,又去引导用户输入内容。然而,产品此处却没这样做,也许是考虑到输入栏的高度问题吧。

金沙7868com 8

金沙7868com 9

第二张是用户没有给动态配上音乐就点击发送的情况,显然,出现这种错误是因为产品的限制。产品希望用户发布动态必须配上音乐,把音乐作为一种情感的载体,符合整个社区音乐分享的氛围,同时也是把相关动态推荐给其他人的基础。这是产品的目标。当用户没按产品目标行事时,“给动态陪上音乐”这栏会短暂地以红色闪烁一下(安卓版本是以振动的形式),提示用户这里出现了问题,而不是跳出一个弹出框,让用户确认自己的错误。产品采用的非模态反馈没有打断用户的操作流,并且清晰的告知用户问题所在,让发布流程更流畅进行。

● 完成任务时,若当前已跳出活动页外部,需要设计返回活动页的交互机制:

● 完成任务时,若当前已跳出活动页外部,需要设计返回活动页的交互机制:

策略三:少即是多,减少不必要的页面跳转

a) 活动完成后自动跳转回活动页面。

a) 活动完成后自动跳转回活动页面。

必须以更少的元素做更多的事

优点:可自动跳转返回

优点:可自动跳转返回

书里举得一个例子是,在很久以前的window应用程序的一个“保存”对话框中,用户不能重命名或者删除看到的文件,用户必须去其他页面才能完成这类操作。不过现在的window已经开始基于用户的使用场景来提供合适的功能,用户不需要经常切换不同界面来完成简单常见的任务了。其实这就要求单一界面并不只是满足一项需求,而要根据场景,满足其衍生的需求。

缺点: 当活动完成页承载其它功能,无法实现自动跳转返回。

缺点: 当活动完成页承载其它功能,无法实现自动跳转返回。

策略四:尽量将用户操作所需信息储存在界面中

b) 活动完成页提供返回活动页链接。

b) 活动完成页提供返回活动页链接。

准确所需要的知识并没有完全储存在头脑中,而是一部分在头脑中,有一部分来自外部世界的提示,还有一部分存在外界限制因素之中。——设计心理学

优点:可解决活动完成后无法自动跳转返回情况。

优点:可解决活动完成后无法自动跳转返回情况。

输入和选择    wps中修改字体,用户不需要记忆特定字体,只需要在下拉列表中选择即可。然而,当字体类型过多并且用户完全知道字体名称的时候,用户在众多的选项中找寻字体是很难的,这时候用户直接输入反而更方便。总之,输入会让用户付出成本,一方面是用户的记忆成本,另一方面输入也有操作成本,同时无法避免用户犯错的情形。而选择虽然通过将一部分信息构建在界面中来减少用户的记忆成本,避免用户犯错,但是当选项过多时,会产生新的筛选成本。

缺点:需要用户手动触发返回链接

缺点:需要用户手动触发返回链接

金沙7868com 10

c) 活动页打开模态对话框。

c) 活动页打开模态对话框。

WPS演示

优点:关闭对话框即可返回。

优点:关闭对话框即可返回。

配置和调用    很多程序中,如果你要求打印一份文档,它们会开启一个复杂的对话框,要求你说明要打印多少份,纸张大小,黑白打印还是彩印等等。但是更合理的设计是使用一个命令进行打印,而使用另一个命令设置打印。打印命令使用上一次的设置或者(默认)标准设置直接打印;打印设置功能提供所有关于打印的选项。word中就存在快速打印的命令,不需要对话框。通常,如果一个命令调用了10次,才设置1次,那么最好让用户10次中只有1次明确地请求设置,而不是10次中用户9次拒绝设置的对话框。这里提到的调用,就是让产品根据实际用户的需求,默认一些选项或者记住用户的操作(上一次或高频),将这些信息储存在界面中,提高的用户完成任务的效率。

缺点:需要承载的信息和功能较多时,不适合使用对话框。

缺点:需要承载的信息和功能较多时,不适合使用对话框。

策略五:隐藏弹射座椅的操作杆-合理的组织界面元素

d) 活动页保留,新开页面跳出。

d) 活动页保留,新开页面跳出。

在喷气机的驾驶舱中存在一个弹射座椅的操作杆,飞行员拉动操作杆就会同其座椅一起弹射出去。弹射座椅是飞行员应对紧急情况所必须的,但是正常情况是不需要的,并且如果被放在明显的位置,就会让飞行员不经意间拉动,造成很大的麻烦。界面中的元素组织也存在类似的情况。

优点:技术实现成本低。

优点:技术实现成本低。

界面元素组织的三个原则:

缺点:当支线任务过多时,经过一系列操作,用户窗口会比较多。

缺点:当支线任务过多时,经过一系列操作,用户窗口会比较多。

使用频率:高频功能应该放在触手可及的地方,低频功能确保一俩次点击就能实现,如果很少使用,放置的层级可以更深些。抽屉导航模式是这里明显的例子。

金沙7868com 11

金沙7868com 12

转化程度:某些功能或命令会引起正在处理的界面或者文档,信息突然发生变化。一般来说,最好将这一类型的功能隐藏起来或放在难以触及的地方。PPT或者word文档中,视图变化的button被放在下方很不起眼的位置,且视觉面积很小。另一个不典型的例子是iOS系统的返回,很多用户向苹果用户体验设计师反馈返回键放在左上角操作不方便,苹果设计师给出的理由中就有,对于这种极易引起界面信息变化的命令,应该设置点击难度。当然,这里的情况是该考虑高频操作应该注重效率还是该考虑转化程度带来的后果,哪个问题的优先级更高些,还需最后一个原则。

三. 及时响应用户操作

三. 及时响应用户操作

风险承担程度:某些功能或命令会带来不可更改的功能或者更改后会产生危险后果。对于上面的问题,返回引起的界面跳转,带来的后果是否严重了?不同场景不同对待,如果用户在阅读一篇长文章时误触返回键,导致用户必须再次点击进入找到上次浏览的位置,这样的体验是糟糕的。但是如果是普通的下一层级返回上一层级,比如聊天界面返回信息列表,误操作的后果并不严重。所以,我们要结合以上三个原则来判断界面元素的组织,因为突然的界面跳转而引起严重后果的返回操作频率较低,而多数情况是不会引起严重后果的,所以这里我认为依然是效率优先。关于操作带来的风险问题,另外一种解决方案是模态的弹出框,让用户仔细确认后再执行。

● 当参与活动与领取奖品的资格有次数限制时,提示默认呈现,任务完成后要即时刷新资格状态。

● 当参与活动与领取奖品的资格有次数限制时,提示默认呈现,任务完成后要即时刷新资格状态。

策略六:为响应优化,但容许延迟

● 用户在任务流程中需要操作结果反馈,常见需反馈的情况:

● 用户在任务流程中需要操作结果反馈,常见需反馈的情况:

在互联网产品中,用户对响应时间是及其敏感的,研究表明,0.1秒以内,用户才认为系统的响应是即刻的。但是如果无法避免响应时间过长的情况,可以让任务在后台执行,从而允许用户继续做其它工作。无论如何,要有明确的状态反馈(进度条,时间等),而取消机制这时很关键。

a) 操作完成获取奖励反馈

a) 操作完成获取奖励反馈

策略七:合适的动画

b) 操作成功或失败反馈

b) 操作成功或失败反馈

交互中的动画,首要目标应该是支持和增强用户的流状态,帮助用户创造一个强烈的心理模型,把当前信息与上一个视图的信息联系起来。

c) 操作错误反馈

c) 操作错误反馈

创建一个成功的产品需要的不只是实现实用的功能,也必须考虑如何编配不同的功能元素,让用户执行任务像流水一样感觉不到障碍。最好的界面通常不会让用户惊叹它有多漂亮,而是因为能够几乎不会被人注意,毫不费力地使用。

四. 正确使用视觉语言传达界面信息

四. 正确使用视觉语言传达界面信息

● 按钮的形式能被正确感知,醒目,突出,跳出画面,使用高光,渐变,阴影,圆角,描边等强化感知。

● 按钮的形式能被正确感知,醒目,突出,跳出画面,使用高光,渐变,阴影,圆角,描边等强化感知。

● 页面的视觉层级:高光>渐变>投影>纯色>描边

● 页面的视觉层级:高光>渐变>投影>纯色>描边

金沙7868com 13

金沙7868com 14

● 内容层和背景层层次分明,不能干扰主体页面的阅读,避免喧宾夺主。

● 内容层和背景层层次分明,不能干扰主体页面的阅读,避免喧宾夺主。

● 禁止模仿系统与QQ官方客户端的控件。

● 禁止模仿系统与QQ官方客户端的控件。

● 图标具有交互动作不可作为装饰元素单独存在。

● 图标具有交互动作不可作为装饰元素单独存在。

本文由金沙7868com发布于摄影专区,转载请注明出处:提示类控件之,解析活动专题页信息表达法则

关键词:

上一篇:拍摄城市街景的17个建议金沙7868com

下一篇:没有了