iOS-HIG 用户交互-3D触摸

3D Touch adds an additional dimension to touch-based interaction. On supported devices, people can access additional functionality by applying varying levels of pressure to the touchscreen. Apps can respond by displaying a menu, showing additional content, or playing an animation. People don’t need to learn new gestures to interact with 3D Touch. They quickly discover the additional interactive dimension when they press lightly on the screen and get a response.

3D触摸基于基本触摸交互增加了一个维度。在支持的设备上,用户可以访问额外的功能通过对触摸屏施加不同程度的压力。app可以通过展示一个菜单,显示额外内容或者播放一个动画效果来响应3D Touch。使用3D Touch用户不需要学习新的手势。他们很快地发现新增的交互维度当他们轻压屏幕,然后得到一个反馈。

Home Screen Interaction

主屏幕交互

On the Home screen, pressing the icon of an app that supports 3D Touch displays an action view. This view lets you quickly perform common app-specific tasks and see interesting information. Calendar, for example, provides a shortcut for creating an event. It also shows the next event on your schedule. For design guidance, seeHome Screen ActionsandWidgets.

在主屏幕上,按压一个app的icon支持3D Touch,然后显示一个操作视图。这个视图让你快速执行常用app特定任务和查看有兴趣的信息。日历,例如,提供一个捷径添加事件。它也显示你的计划的下一个事件。需要查看设计指导, seeHome Screen ActionsandWidgets.


Peek and Pop

看一眼和弹出

A peek lets people use 3D Touch to preview an item, such as a page, link, or file, in a view that appears temporarily above the current context. To peek at an item that supports this functionality, apply a little pressure to the item with your finger. Simply lift your finger to exit the peek. To open the item and see more detail, press a little harder until the item pops and fills the screen. In some peek views, you can swipe up to reveal related action buttons. For example, while peeking at a link in Safari, you can swipe up to reveal buttons for opening the link in the background, adding the link to your reading list, and copying the link.

peek让用户能使用3D Touch来预览一个项目,例如一个页面,链接或文件,一个视图临时出现在当前环境之上。为了peek一个支持这个功能的项目,用你的手指轻压这个项目。仅需要抬起手指来离开这个peek。为了打开看更多app的详情,更用力按项目直到详情填满整个屏幕。在一些peek视图里,你可以向上滑显示相关的操作按钮。例如,当peeking一个Safari的链接,你可以向上滑显示在后台打开链接的按钮,添加链接到你的阅读清单,或者复制链接。

Use peeking to provide live, content-rich previews.

Ideally, peeking gives enough information about an item to augment the current task, or helps you decide whether to fully engage the item. For example, preview a link in a Mail message before deciding to open it in Safari or share it with friends. Peeking is often used in tables to view detailed row information before the row is selected.

使用peeking来提供实时,内容丰富的预览。理想状态下,peeking给予一个项目的足够信息来支持当前任务,或者帮助你决定是否完全参与这个项目。例如,预览一个在邮箱信息的链接在决定是否在Safari打开或者与朋友分享之前。Peeking经常用于table浏览详细行信息在行被选中之前。

Design big-enough peek views.Design a peek view that's large enough so that fingers don’t obscure its content. Make the peek detailed enough for people to decide whether to press a little deeper to fully open (pop) the item.

设计足够大的peek视图。设计一个足够大的peek视图这样手指就不会遮挡它的内容。使peek足够详细让用户来决定是否点进这个item。

Adopt Peek and Pop consistently.If you support Peek and Pop in some places but not others, people won’t know where they can use the feature and may think there’s a problem with your app or their device.

使用Peek和Pop时保持一致性。如果你支持Peek和Pop在一些地方而有些地方又不支持,用户会迷惑哪里他们能使用这些特性,这样会让他们认为你的app或他们的设备有问题。

Allow every peek to be popped.Even though peeking should give people most of the information they need, always let them transition to the pop if they decide to switch away from the current task and focus on the item. Popping should show the same thing as tapping the item.

让所有peek的项目可以被弹出。即使peeking应该给用户需要的大部分信息,永远让他们能转换到pop当他们决定集中精力处理这个item时。Popping应该显示与peeking相同的信息。

Avoid displaying button-like elements in a peek view.If a user lifts a finger to tap an element that looks like a button, the peek disappears.

避免展示一个按钮类似元素在peek视图中。如果用户抬起手指去按那个类似按钮的元素时,peek已经消失了。

Don’t enable peeking and an edit menu for the same item.It can be confusing to users and hard for the system to detect intent when both features are enabled for one item. For additional guidance, seeEdit Menus.

不要在一个item上同时支持peeking和编辑菜单。如果同时支持这两种特性会使用户困惑,系统也难以侦测用户的真正意图。

Provide action buttons when appropriate.Not every peek needs action buttons, but they’re a great way to offer shortcuts for common tasks. If your app already provides custom touch-and-hold actions for items, it’s good practice to include the same actions during peeks.

当需要时提供操作按钮。不是所有peek需要操作按钮,但对一般任务来说它们一条不错捷径。如果你的app已经为items提供定制的按住操作,在peeks中提供相同的按钮是一种最佳实践。

Avoid providing an action button that opens a peeked item.People generally press deeper to open an item they’re peeking. As a result, there’s typically no need to provide an explicit Open button.

避免提供操作按钮来打开一个peeked item。用户一般通过在深按来打开一个item当他们在peeking时。所以,没有必要再提供一个显式的打开按钮。

Don’t make peek the only way to perform item actions.Not every device supports peek and pop, and some people may turn off 3D Touch. Your app should provide other ways to trigger item actions in situations like these. For example, your app could mirror a peek’s quick actions in a view that appears while touching and holding an item.

不要让peek成为执行item操作的唯一途径。不是所有的设备都支持peek and pop,有些用户可能关闭3D Touch。对于这种情况你的app应该提供其他途径来触发item操作。例如,你的app可以复制peek上的快捷操作到左滑操作上。

Live Photos

活照片

Apps can incorporate pressure into the photo viewing experience by supporting Live Photos. Live Photos come to life when you press them, using movement and sound to show the moments just before and after the photo was taken. For design guidance, seeLive Photos.

App可以提供观看照片的愉悦体验通过支持Live Photos。Live Photos 变得鲜活当你按压它们,用运动和声音来系那是瞬间,在拍照前后。For design guidance, seeLive Photos.

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

推荐阅读更多精彩内容

  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的阅读 13,433评论 5 6
  • ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 97%——By @YearPogress 这周工作和学习上都有不同程度的进步,很开...
    Luffy_Zhu阅读 123评论 0 0
  • 本文参加#未完待续,就要表白#活动,本人承诺,文章内容为原创,且未在其他平台发表过。 从来遍布四海,一朝得见,尽皆...
    i半面妆i阅读 133评论 0 0
  • 你不认识我,无法参与到我的成长,也就无法看到我从不懂事到懂事,从不坚强到坚强。也就无法明白我的坚持和放弃、隐忍和等...
    山谷牧歌阅读 258评论 0 2
  • 场景: 莫sir(莫锦泉)和韩效忠在说服phoniex在罢免刘sir的资料上签字。 step1:先让phoniex...
    小天先森阅读 510评论 0 0