1. 主页 > 行业资讯 > 交互设计 >

交互设计:三个混淆的交互组件及其用法

在这篇文章中,作者带我们了解了三个互动组件的专有名词的用法,并结合实际案例进行了解释,供大家分享。希望本文能加深你对交互组件及其用法的理解和分析。

最近很多同学问了一些设计中组件的专业术语,发现大家好像没有统一的认识,有的说ActivityViews,ActionSheet,Picker等等。

很多人不知道ActivityViews、ActionSheet和Alert之间的区别,所以我在这里分享一下我对这些组件的理解。

那么,首先大家一定要对设计导则的官方定义有所了解。

I .行动表(行动菜单)

"操作菜单是一种特定的警告样式,出现在对控件或操作的响应中,并提供与当前窗口相关的两个或多个选项。

在用户启动任务或执行潜在的破坏性操作之前,会弹出操作菜单请求确认。在较小的屏幕上,动作菜单从屏幕底部向上滑动,而在较大的屏幕上,动作菜单将以弹出窗口的形式呈现。"

用法和说明:

1.提供取消按钮以增加操作的清晰度

取消按钮可以使用户在放弃任务时确认操作,动作菜单中的取消按钮应该始终位于屏幕底部。

2.突出显示警告选项

使用红色突出显示来执行破坏性或危险的操作按钮,并在操作菜单的顶部显示这些按钮。

3.避免在动作菜单中滚动

如果动作菜单中的选项太多,用户必须滚动才能查看所有选项,这需要更多的时间来做出选择,并且在滚动过程中很容易误触其他按钮。

喔-呼,看到了吗?其实这些描述都很清楚。首先,根据屏幕大小的不同,他可以有两种模式供大家选择,底部滑出或弹出作为窗口。必须有取消按钮,强调警告信息,不支持列表上下滑动。

不过这里需要注意的是,他可能没有任何警告内容。

同时,他不支持滚动,因为AS的列表按钮(以下简称AS: Action Sheet)是点击时触发的。为了避免用户在滑动时不小心点击,这里不建议在设计中做向上滚动。

此外,AS在不同的屏幕上以不同的方式显示。比如iPhone和iPad上的组件显示是不一样的,因为如果Pad在底部或者中间弹出,用户会感觉很不好。因此,根据菲茨定律,这里的AS直接显示在按钮的侧面。

在原生组件中,我们还发现在AS的控件中会有返回组件的描述。一是让大家知道这个操作的后果,二是让大家再次确认这个操作。

当然,这些都是告诉你如何正确使用它们的“指南”。如遇某些特殊情况,可根据自己的需要进行调整,如款式等。

第二,活动视图(活动视图)

“一个活动是一个任务,比如“复制”、“收集”或“查找”,在当前上下文中非常有用。单击开始立即执行服务操作,或在执行操作前请求更多信息。

活动从活动窗口开始,该窗口可以显示为窗体或弹出窗口,具体取决于设备类型和屏幕方向。活动允许用户访问可在应用程序中执行的定制服务或任务。"

用法和说明:

1.设计一个简单的图像模板来显示您的自定义视图

图像模板使用遮罩来创建图标。使用具有适当透明度和抗锯齿的黑白,并且不包括投影。图像模板应集中显示在70px X 70px的区域。(不必遵循此大小)

2.创建的标题应该简单明了地描述您的功能

标题显示在事件图标下方。总的来说,短标题效果最好。如果标题太长,iOS会先缩小字体大小,如果还是太长,就会被截断。

3.确保该功能可以操作当前窗口中的内容

虽然系统构建事件在事件窗口中的位置是固定的,但是如果它们不适合您的应用程序,您可以删除它们。

所以活动视图是这样的:

然后有人会说,诶,如果你能在这里左右滑动,不怕误操作吗?

我们上面说的AS里面有警告内容,大部分AS里面都有警告功能,尽量不要让它上下滑动。即使没有需要警告的功能,我们也会保持统一不滑动,上下空之间的空间有限,不适合滑动本身(如果非要滑动,不妨用picker,当然picker的本质功能和AS不一样),左右/[/。

所以AV(activity view)大部分时间都是和分享、转发、收藏、复制等功能聚合在一起。这两个组成部分有明显的区别。

三.警报(警报框)

“警告框传达与您的应用程序或设备状态相关的重要信息,通常需要从用户那里获得反馈。

警告框的内容包括标题、描述信息(可选)、一个或多个按钮和输入框(可选)。除了这些元素,警告框的外观样式也可以更改。其使用方法和建议。"

1.避免使用警告框

警告框特别容易打断用户的操作、流程状态等。,所以我们通常在非常谨慎的环境中使用它。比如用户想删除重要信息时,我们只会在app中需要通知用户重要紧急信息时才会使用。

2.警告框的语言应该简化

尽量不要用标点符号来完成文案,尽量让文案出现在一行,但不要做得太宽。

3.言语应该避免消极态度

我们应该传达友好和积极的态度,所以我们不应该向Tik Tok学习。这是在威胁我吗?我只需要取消确认按钮

4.通常使用带有两个按钮的警告弹出窗口

两个按钮的警告弹出窗口使用户可以轻松地在两个选择之间做出决定。

按钮通常用于通知,它不能做出更多的选择。三个或更多的按钮会使选择变得复杂,需要滚动,这将产生良好的用户体验。在这种情况下,您可以考虑使用操作菜单。请参考行动表。

5.创建简洁且逻辑清晰的按钮标题

按钮标题最好由描述操作结果的两个字组成。与所有按钮标题一样,使标题模式大写(在英语环境中,每个单词的第一个字母都是大写的),并且应该出现指示结束的标点符号。

尽量使用与警告标题和描述信息直接相关的动词或动词短语,如“查看全部”、“回复”或“突然”。明确表达“确认”,避免使用“是”和“否”。例如,如果您想删除,请将提醒按钮设置为“删除”而不是“是”

比较

其他的就不放了。可以自己看设计指南。在我们描述完三个控件之后,你知道这三个控件的用法吗?唯一有争议的是AS和Alert都有警告元素。应该用哪个?

首先,AS包含警告信息,他可以完全没有警告信息,就像上面的情况一样。所以根据官方的解释,我们只会使用alert,除非是非常严重的操作,比如删除一个订单,比如退出编辑。但其实市面上很多应用的使用方式是不一样的。

如上图,微信和MaHoneycomb的编辑页面点击退出。前者使用Alert,后者使用AS。你觉得有什么区别?一个是问你是否以对话的形式保留,一个是不保留就突出警告标志。

你必须选择前者之一,只要你点击它,你就不能停留在这个页面上。你可以取消后者,所以这个场景我更喜欢后者。

让我们再举一个例子:

一个是订单删除,一个是照片删除。在这里,大家都可以取消,但还是看内容优先级。如果删除后想取回订单,需要去电脑,这里制作的照片可以从最近的删除中恢复。找回两者的成本相差甚远。所以前者用alert,后者用AS。

换句话说,AS可以通过点击空白色区域注销,但是Alert不能,这意味着Alert具有更高的ALert级别。所以,当我们想要提醒用户时,首先要考虑的是当前的提醒级别是否需要最高。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://ffjianzhan.cn/a/jhsj/742.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息