delphi xe2 project菜单怎么没有加组件功能_交互设计:让人困惑的三大交互组件及用法...

本篇文章中,笔者带我们了解了三大交互组件专有名词的用法,并结合实际案例进行了解释说明,与大家分享。希望通过此文能够加深你对交互组件及其用法的理解和分析。

1d577046d9494e024b86d4d30c9d5ca2.png

最近有很多同学来问一些设计中组件的专业名词,发现大家好像都没有一个统一的认识,有的说是ActivityViews,ActionSheet,Picker等等。

很多人不太清楚ActivityViews、ActionSheet、Alert三者的区别所以在这里我也把我对这些组件的理解给大家分享一下。

那么首先大家肯定要对于官方的设计指南定义有个了解。

一、ActionSheet(动作菜单)

“动作菜单是一种特定的警告样式,它出现在对控件或操作的响应中,并呈现⼀组与当前窗⼝相关的两个或多个选择。

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

311d18778ff7a1f3bd930cd68ecb7e0b.png

用法及说明:

1. 提供一个取消按钮增加操作的明确性

取消按钮能够让⽤户在放弃一项任务时,对⾃⼰的操作更加肯定,并且动作菜单中的取消按钮应该总是位于屏幕的最底部。

2. 突出警示的选择项

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

3. 避免在动作菜单中出现滚动情况

如果⼀个动作菜单中存在太多选项,⽤户就必须滚动查看所有选项,⽽滚动需要更多的时间来做出选择,且滚动过程中也容易误触到其他按钮。

喔吼,看到了吗,其实这些描述已经很明确了,首先根据屏幕大小的不同他可以有两种模式供大家选择,底部滑出或者以窗口的形式弹出来。它必须有取消的按钮并且对警示信息强调显示,并且不支持列表式的上下滑动

但是这里要注意的是,他也可以没有警告内容

05bbe1f5b590580eb44d24060f18a92d.png

同时他不支持滚动也是因为AS(后面简称AS:action sheet)的列表按钮点击即触发,为了避免用户在滑动时不慎点击,这里在设计上就不建议做上滚动。

另外AS在不同屏幕上的显示方式不同,例如iPhone和iPad上的组件展现就是不同的,因为pad中如果是底部或者中间弹出,用户会非常不好点,所以根据菲兹定律这里的AS直接显示在了按钮的边上。

f63d5bb8f7910c708f44ae5a2c9dd95b.png

在原生的组件中我们也会发现在AS的控件里还会有对还组件的描述,一个是帮助大家明确进行该操作的后果,另外也是让大家再次确认该操作。

当然了,这些都是“指南”告诉你怎么用比较正确,万一遇到一些特殊的情况,我们也可以根据自己的需求来进行调整,比如说样式之类的。

二、ActivityViews(活动视图)

“⼀个活动就是⼀个任务,例如“复制”、“收藏”或“查找”,在当前下背景十分有用。点击启动之后可以立即执⾏一个服务操作,也可以先请求更多的信息,然后再执行该操作。

活动在活动窗口中启动,活动窗口可以以表单或者弹出窗口的形式出现,这取决于设备的种类和屏幕的方向。使用活动可以让用户访问 App中可执行的自定义服务或者任务。”

用法及说明:

1. 设计简单的图像模板来展示你的自定义视图

⼀个图像模板使用⼀个蒙版去创建⼀个icon。使用带有适合透明度与抗锯齿的黑色与白色,还有不要包含投影。图像模板应该在⼀个70px X 70px的区域内居中显示。(这个尺寸不一定要遵循)

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

标题显示事件图标的下方,通常来说简短的标题效果最好,如果标题过⻓长,iOS 会先缩小字号,仍然太长的话就会截断它。

3. 确保功能是可以对当前窗口中的内容进行操作的

虽然事件窗口中系统内置事件的位置是固定的,但如果它们不适⽤于你的App,则可以将其移除。

所以ActivityViews是这样的:

f03444cb9c4e70006a278acb8647e868.png

那有人会说,诶这里可以左右滑动难道就不怕误操作了吗?

我们上面提到的AS他本身是含有警告内容的,而且大部分的AS都有警示功能在其中,所以尽量不让他上下滑动,即便是没有需要警示的功能我们也就保持统一不进行滑动了,而且上下空间有限,本身也不适合进行滑动(如果你非要滑动那你不如用picker,当然picker的本质作用又和AS有区别),左右的空间更加多,适合多个活动的按钮。

所以AV(activityviews)大多数时候被聚合了分享、转发、收藏、复制等功能,这俩组件是有明显区别的。

b8bbf1af7a8614cb87d73a97420b2bb8.png

三、Alert(警示框)

“警告框⽤来传达与你的 App 或设备状态相关的重要信息,并且通常需要得到⽤户的反馈。

警告框的内容包括标题,描述消息(可选)、⼀个或多个按钮以及输 入框(可选)。除了这些元素之外,警告框的外观样式是不可更改的。它的使用方法和建议”

f7b5b4f0bb5e205af3a75a53429851cd.png

1. 避免使用警告框

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

2. 警示框语言要简化

尽量不使用标点来完成文案,尽量让文案在一行显示,但不要让它太宽。

3. 文字要避免负面态度

要传达友好的态度和积极的态度,所以大家不要学抖音,这莫非是在威胁我?就差把确认按钮取消掉了

aa22c681593509270edfec9616dae7f2.png

4. 通常使用两个按钮的警告弹窗

两个按钮的警告弹窗,可以使用户更容易地在两个选择中做出决定。

⼀个按钮通常用于通知,它无法做出更多的选择。三个或以上的按钮会使选择变得复杂,并且需要滚动,会造成很不好的⽤户体验,这种情况下可以考虑使用动作菜单,请查阅 Action Sheets。

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

按钮标题最好由⼀、两个描述操作结果的词语组成。与所有按钮标题一样,使⽤标题模式的大小写(英文环境下, 每个单词的首字母大写),不要出现表示结束的标点符号。

尽量使用与警告标题和描述信息直接相关的动词或动词短语,例如“查看全部”、“回复”或者“忽略”。使⽤“确认”进⾏行明确的表达,避免使用“是”和“否”。例如是否进行删除,请将警示按钮设置为“删除”而不是“是”

比较

还有一些就不放上来了,大家可以自行翻阅设计指南。在我们对三个控件进行完描述之后大家是否已经清楚了3者的用法。唯一还有争议的就是AS和Alert都有警示的元素,我们该用哪一个?

首先AS他是包含警示的信息,他也可以完全没有,就像上面那个案例一样,所以在官方的解释下来看,除非是非常严重的操作,我们才会用到alert,例如删除订单、例如退出编辑。但是其实市面上很多app使用情况都不同。

b61e69e2dd67da6c9cbe7db87add6f10.png

如上图,微信和马蜂窝的编辑页点击退出,前者用了Alert后者用了AS,大家觉得有什么区别,一个是对话形式问你保不保留,另一个则是将不保留进行了警示标记高亮。

前者你必须选一个,只要你点了你就不能留在这个页面了。后者你还可以取消,所以在这种场景,我更青睐后者。

再来看个例子:

41aae3f6245c66d2f6d32d2a0f71f08e.png

一个是订单删除,一个是照片删除,在这里,大家都可以进行取消,但是我们来看下内容优先级,订单删除之后再想找回需要去电脑端,而这里产出照片我可以从最近删除中重新恢复,两者的找回成本差很多。所以前者用了alert后者用了AS。

再换个说法,AS可以通过点击空白区域退出,而ALert不行,这都意味着Alert的警示级别更高,所以当我们要给用户警示的时候,我们自己先考虑下当前的警示程度是否需要最高,如果仅仅是退出账户,那我个人建议选择Actionsheet而不是Alert。

综上所述,每种组件都有其特定的用法,根据场景和信息内容优先级来判断如何使用才是正确的设计方法。看不看得懂都点个赞吧~

#专栏作家#

应骏,人人都是产品经理专栏作家,公众号:应谋鬼计(shejishiyj)

本文由 @应骏 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/434747.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

北斗三号b1c频点带宽_北斗三号导航信号的创新设计(一)

《测绘学报》构建与学术的桥梁 拉近与权威的距离一需求与挑战1.1 卫星导航信号的作用与意义卫星导航信号是由导航卫星向地球表面播发的无线电测量信号,承担着传递时空基准信息和实施被动测距两大任务,是卫星导航系统实现三边定位的核心载体。卫星导航信号…

g++ linux 编译开栈_linux gcc和g++版本的修改

##编译的时候容易遇到:unsupported GNU version! gcc versions later than 6 are not supported这样的错误。所以我们要更改系统的gcc和g编译器版本。首先我们要知道一个基础的常识,一般而言,linux系统会把gcc和g默认安装在/usr/bin/的目录下…

Linux I2C核心、总线与设备驱动(一)

本章导读 I2C总线仅仅使用SCL、SDA两根信号线就实现了设备之间的数据交互,极大地简化对硬件资源和PCB板布线空间的占用。因此,I2C总线被非常广泛地应用在EEPROM、实时钟、小型LCD等设备与CPU的接口中。 Linux定义了系统的I2C驱动体系结构,在L…

ebay注册流程_跨境电商平台eBay企业入驻流程

整个流程一共包括8个部分了解企业入驻通道企业入驻通道将帮助现有eBay大中华卖家申请并获得高刊登额度的新账户,以满足卖家在品类拓展以及站点拓展的需求。准备材料1.营业执照2.法人代表身份证明,或eBay帐户注册人身份证明(根据地区法规有不同…

Linux I2C核心、总线与设备驱动(二)

从上面的分析可知,虽然I2C硬件体系结构比较简单,但是I2C体系结构在Linux中的实现却相当复杂。当工程师拿到实际的电路板,面对复杂的 Linux I2C子系统,应该如何下手写驱动呢?究竟有哪些是需要亲自做的,哪些是…

mtu设置失败_Oracle RAC该调整网卡MTU值

在Oracle RAC的环境中,如果我们发现OSW监控数据显示包重组失败率过高,就需要引起足够的重视,因为这很可能会引发member kill/Node kill等重大故障,甚至在有些场景会连带影响到所有RAC节点不可用。一般我们会选择调整ipfrag相关参数…

判断字段长度大于某长度_判断数据库性能只能通过count(*)?No,这些优化方案了解一下!...

大多数用户在体验数据库时,接触到的最早的sql语句就是count(*),因此用户判断数据库性能时通常也会通过count(*)进行比较。但在执行时通常会出现一个问题:对某个表做count(*)时需对全表数据进行扫描,当表中包含数据量较大的字段时&…

10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的jQuery切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换。 1. InnerFade 这是一个基于jQuery的小插件,可以实现页面内的元素淡入淡出效果。 源码/演示 2. HighlightFade 该插件可以…

js矢量图类库:Raphaël—JavaScript Library

官方网址:http://raphaeljs.com/ Raphal is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it si…

gridview databind 会导致页面刷新马_Innodb批量页面刷盘情况下的quot;两次写quot;

//Innodb批量页面刷盘情况下的"两次写"//之前的文章中,我们介绍过innodb的两次写特性,这里给出链接:InnoDB的两次写特性今天我们完善一下这部分的内容。我们知道innodb数据页的默认大小是16kb,磁盘和内存通过数据页进行…

实例解析linux内核I2C体系结构(1)

作者:刘洪涛,华清远见嵌入式学院讲师。 一、概述 谈到在linux系统下编写I2C驱动,目前主要有两种方式,一种是把I2C设备当作一个普通的字符设备来处理,另一种是利用linux I2C驱动体系结构来完成。下面比较下这两种驱动。 第一种方…

★ Flex を使って Scalable Vector Graphics とビットマップを描画する

from: http://www.ibm.com/developerworks/jp/web/library/wa-svgbitmap/Flex を使って Scalable Vector Graphics とビットマップを描画するSandeep Malik, Tech Lead, IBM 概要: SVG (Scalable Vector Graphics) はグラフィックスの領域で最も重要な技術の 1 つで…

g5420 win7集显驱动_台式机装WIN7?雷我已经趟完了

注:本文只用于PC爱好者交流测试,文中所有测试版系统均只用于测试,不得用于个人或商业用途。Windows全面更新至win10版本后,改装Win7系统逐渐变得越来越艰难。厂商BIOS中逐渐舍弃了原始界面改为图形化,传统Legacy模式无…

制作完整的java可执行文件

帮教务处的老师做了一个小软件,所以学习了一下制作java可执行文件,在此分享一下。 说明:因为是做完很长一段时间后再截的图,可能有点纰漏,大体应该没什么问题。 我的eclipse工程文件目录: bin | images(放图…

ajax中async_小猿圈web前端之ajax的同步和异步有怎样的区别?

对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据,ajax中根据async的值不同分为同步(async false)和异步(async true)两种执行方式,那么,ajax的同步和异步请求两种方式有…

mysql存储引擎的区别_Mysql的两种存储引擎以及区别

一、Mysql的两种存储引擎1、MyISAM:①不支持事务,但是整个操作是原子性的(事务具备四种特性:原子性、一致性、隔离性、持久性)②不支持外键,支持表锁,每次所住的是整张表MyISAM的表锁有读锁和写锁(两个锁都是表级别)&a…

带给你灵感的3D街画艺术设计

3D街头艺术画已在16世纪以来意大利文艺复兴时期的Madonnari画家创造了令人惊叹的壁画来装饰豪华别墅的内墙。3D艺术也可以跟踪它的航线,。这里有一些新的图像,这将使你想知道它是如何可能的使东西是如此逼真,3D设计们不要错过 1。 &#xff0…

[原]2011年度生活三层总结

一年了。 想到自己从开始没有目标,误打误撞的来到了提高班到现在的成长。我是多么的幸运,幸运的来到廊坊师范(现在都要称之为母校了),幸运的来到了提高班,遇到了米老师,在此感谢。 一年了。改变…

hp laser103 属性没有配置项_哦?在hp打印机面板上就可以更改打印机ip地址

修改打印机IP的方法有很多但都没有直接从打印机控制面板上修改方便过瘾虽然有些机器不支持但是惠普大部分机器还是可以的今天我们就以 LaserJet M227 系列打印机为例hp官方为大家介绍一下具体的设置方法步骤一:打印配置报告查看有效IP地址如果机器是2行控制面板 1.在…

python去掉最高分和最低分_去掉一个最高分,去掉一个最低分求平均值(trimmean)...

如下图:演讲比赛,要求去掉一个最高分,去掉一个对低分后求平均值。当然这个太简单了,我们可以用max求出最大值,用min求出最小值,然后sum求出数据总和,用(总和-最大值-最小值)/(数据总个数-2)。思…