用户交互(6)-拖放

拖放

用户可以通过一根手指将照片,文本,或者其它内容从一个地方拖拽到另一个地方,然后松掉手指将其放下,从而移动或者复制这些内容。

点击或者长按选择的内容使其逐渐浮起并黏住用户的手指。当拖拽内容时,动画和视觉路径会定义可能的目的地。系统也会显示一个徽章来说明无法拖拽的情况,或者复制内容而不是移动它。

源位置和目标位置

拖放涉及到将选中的内容从源位置移动到另一个目标位置。这两个位置可以在同一个容器内,比如像文本视图,或者在不同的容器内,拆分视窗两侧的文本视窗。在笔记中,用户可以拖拽选中的文本到同一个笔记中的新位置。在提醒中,用户可以将列表中的个人提醒拖拽到另外一个列表中。

在iPad中,源位置和目标位置可能存在于不同的应用程序中,需要支持跨程序交互,例如从Safari浏览器的网页中拖拽一张图片到邮箱中的新信息中。拖拽内容时,用户可以通过多任务,退出主界面或者从屏幕底部向上滑动以显示停靠点来访问另外一个程序。

在应用程序之间拖拽内容往往会导致内容的复制而非移动。

支持拖放

拖拽是一种高效直观的功能,用户希望在系统中能够普遍执行。如果你的应用程序当中包含或者生成文本,照片,视屏,音频或者其他用户可能想要移动,复制或者插入的内容,那么就需要支持拖放。

为所有可选择和可编辑的内容提供拖放。可选择的内容应该是可拖拽的,可编辑的内容应该是可添加的。同时,要保证这些区域支持复制和粘贴。

需要时允许内容被拖拽到控件上。通常来说,配置控件允许数据输入或选择的控件(比如像文本域)来接受拖拽释放的内容。

任何时候尽量使用标准的文本视图和文本域。这些系统提供元素包括了内置拖放功能。

支持多项拖拽提高效率。在很多应用程序中,用户可以通过一根手指拖拽单个项目,同时,使用另外一根手指点击选中另外的项目。这些选中的内容会一起移动,并且看似黏在最初拖拽的那根手指上。用户可以成组的拖拽内容并且把它们释放在理想的目标位置。比如说,主界面上支持多个应用程序图标同时选中并且一次性被拖拽到同个文件夹中。有些应用程序中提供允许多项优先拖拽的选项。

确定应用程序中的拖拽是否应该导致移动或者复制。通常来说,源位置和目标位置在同个容器中时(在同个文件中拖拽文字),移动是有意义的,当不在同一个容器中时(在两个文件或应用程序当中拖拽),复制是有意义的。然而,事实并非总是如此。毕竟拖拽应该直观地表现。在提醒的列表之间拖拽单个提醒是移动而非复制,因为用户就是这样希望的。在应用程序之间拖放内容往往导致复制。

任何时候都尽可能的允许用户撤销拖放操作。通常地,当用户不小心将内容释放到错误的目标位置时,他们应该能够撤销操作使程序回到之前的状态。也就是说,释放的内容能够移动,并且如果它是从应用程序中的其他位置移过来的,就移回原来的位置。

考虑启用弹性加载。使用弹性加载,用户可以激活某些控件,如按钮或分段控制器,通过将选中的内容拖拽到控件上并短暂暂停且不释放内容。例如,在邮箱中,选择的信息能被拖拽到导航栏上的“返回”按钮以到达邮箱层级中的其他位置。不要弹性加载当做激活控件的唯一方法。请把它当做一个可被发现的装饰。通常情况下,弹性加载的空间也应该响应敲击手势。

提供拖拽内容

必要时自定义拖拽项目预览。通常来说,用户手指下展示的预览应该是被拖拽内容的半透明样式。样式中提供上下文,指示拖拽正在进行,并且允许用户查看拖拽内下的目的地。

尽可能提供拖拽数据的多种显示形式,按照保真度的最高到最低顺序排列。例如,当提供线段艺术时,应用程序可以按照这种顺序提供PDF的矢量显示,透明的无损的PNG图像和不透明的有损JEPG图像。这样的话,目的地就可以选择导入的最高质量的显示效果。

合适的时候,请将定制对象的本地版本显示为最丰富的数据形式。例如,一款支持用户拖拽图表的应用程序应该首先显示本地图表对象。然而,也应该为不支持图表对象的应用程序提供如图片版本图表这样的选择。

当应用程序内容的传输费时或资源密集时,实行文件提供扩展。即使您的应用程序不再运行,文件提供扩展能够管理传输进度并且保证传输完成。需要注意的是,用户释放内容之后传输进度才开始。

当应用程序的内容传输需要时间时,请提供进度信息。如果需要下载内容或者大型文件的复制需要时间的话,请提供进度信息。至少需要提供内容的总容量,这样目标可以计算出剩余时间并且显示合适的进度指示器。

接受被释放的内容

使用视觉显示来定义潜在目标并且预览释放内容的效果。显示强调,插入点指示器和动画都是定义可能目标的好方法。当内容拖拽到上方时,视窗能够轻微地闪烁并且改变颜色,或者段落会分开为拖拽的图片留出空间。当屏幕上有不止一个可能的目标时,一次只定义一个。当源容器和目标容器相同时,可能就不需要显示强调,除非内容被完全拖拽出源容器并再重新拽入时。当内容被释放或不再定位在目标上时,请确保取消显示强调。

合适的时候,自动滑动目的地中的内容。但内容被拖拽出目的地的边界时,你的应用程序也许需要确定是否滚动目的地中的内容或者允许用户将内容继续拖拽至另一个完全不同的目的地。如果你的应用程序允许用户继续拖拽,需要定义一个区域,当拖拽项目定位到该区域上方时会引发自动滚动。例如,当内容被拖拽到正文的顶部或者底部时,邮箱中的冗长草稿信息会自动滚动。标准的文本视窗和文本域会自动采用这种行为。

提取并显示释放内容最丰富的可能的呈现方式。例如,你的应用程序可能提供几种图表的呈现形式。如果你的应用程序支持图表,他可以提取或显示本地图表对象。如果你的应用程序不支持图表,作为替代,它可以提取或者显示图像版本的图表。

合适的时候,只提取释放内容的相关部分。例如,在邮件信息中,如果用户从联系人当中拖拽一个联系人到收件人区域,这时就只会使用姓名和邮箱地址,联系人的地址信息是不会使用的。

内容释放后,在表视窗和集中视窗中显示占位符。一旦内容完成传输,占位符能短暂地指示内容显示的位置。

当释放内容的传输需要时间时,请显示进度。当应用程序之间发生耗时的传输时,系统会默认显示应用程序模态警示。考虑自定义进度的显示方式,比如说在表视窗和集合视窗的占位符中显示进度指示器,那么用户在使用你的应用程序时就不会收到阻碍。请注意,用户释放内容后,传输进度才开始。

当释放的信息启动进度时,请提供反馈。如果用户在触发任务的控件上释放拖拽的内容,如在分享网站上传视屏,请显示任务已经开始并且告知用户进度。

当拖拽内容释放失败时,请告知用户。如果释放内容不能被插入,可能是因为文件传输被打断了,如果失败了请告知用户。

为释放文本采用适当的样式。当源内容和目标内容支持相同的文本属性时,释放内容应该保持原来的字体,尺寸以及其他属性。否则,释放内容要采用目标的样式。

当用户不能立即撤销拖放操作时,考虑提供巧妙的,直观的退出方式。例如,在一款分享应用程序中,在放入释放信息之前可能会显示中间分享表单。这种分享表单能提供一种补充附加内容的方法(如状态信息),同时还提供取消按钮。当照片被拖拽到分享照片流中时,会显示这种行为。

原文地址:https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272