超赞！20个令你脑洞大开的 3D Touch 概念设计案例

iPhone 6s和6s Plus 的压敏屏幕所带来的3D Touch 让iPhone 的交互多了一个全新的维度，交互从不再局限于2D平面手势，按压操作的加入使得手机交互进入了3D的维度。交互层次的提升让操作拥有了更大的潜力和截然不同的操作模式。

除了轻点、轻扫、双指开合这些熟悉的 Multi‑Touch 手势之外，3D Touch 还带来 Peek 和 Pop，为 iPhone 的使用体验开拓出全新的维度。

手机的屏幕对于不同力度的按压进行识别，并且作出不同的交互反馈。快速轻拍是大家习惯性的标准操作，而加大力度的按压则不同，两种不同的操作作用于图标和其他基本控件上的时候，会触发不同的反馈和结果。一般说来，新增按压力度这个维度之后，用户可以通过力度改变来获取更详细的信息和更丰富的菜单选项，提升了交互的层次，带来更丰富的体验，让产品更加得心应手。

那么对于UI和UX设计师而言，3D Touch能带来怎样的交互体验上的改变呢？今天的20个原型设计案例应该可以给你带来灵感。

IMG Upload Concept – 3D Touch and Multi Selection

第一个案例来自中国杭州的设计师 Leo Leung。在他的概念设计中，3D Touch 并没有止步于预览（Peek）而开始加入更多更强的交互功能，可以快速高效地多选多个不同的图片，并且无需更多复杂的交互。

Adding a New Goal Animation

这个交互的设计思路看起来有点过于简单，但稍加推敲，你会发现它非常实用。Force Touch 在此主要为用户提供触发“New Goal”的快速入口，整个交互的动画设计是顺滑而令人愉悦的，干净利落。

3D Touch for Cycling Concept

3D Touch在这个案例中，帮用户快速打开个人积分榜。不需要多次点击和滑动来一层层地进入特定界面，3D touch 一发入魂，再加一个滑动操作，还可以触发“收藏”按钮。

3D Touch Notifications

Tom Graham 的这个原创交互设计对于3D Touch而言相当有价值，它并不复杂，但是在当前的iOS 通知推送系统基础上做出了合理的强化和优化。Force Touch 打开通知预览，滑动收藏，滑动关闭，这些让通知系统的可用性更强了。

3d Touch Music Store

John Khester 的3D Touch交互设计几乎是为在线音乐商店定制的，使用Force Touch 触发专辑内容列表，使用滑动操作来触发专辑列表，和单纯的轻拍点击形成两条不同的交互路线。

3DTouch to Home

虽然这个交互设计只是简单的示意图，没有华丽的展示效果，但是它的用法和其他的设计有很大的不同，它作用于返回按钮，并且提供了快速返回首页的功能。

3D Touch for OS X

Mac的触控板上也有了Force Touch功能，而新加坡设计是 Zhikuan 的这个设计似乎就是以此为基础而设计的。Force Touch 提供了预览功能，以及拓展而出的快捷操作按钮。

Shopping Peek – 3D Touch

这位设计师的是为电商平台设计的，在列表页中无需点击进入具体产品条目，长按触发3D Touch 来查看产品的基本信息。

Profile Peek and Pop

Peek 和 Pop 是3D Touch的两个基本功能，而设计师 Armand Chakhalyan 针对带有图片的个人档的交互设计则融入了这两大功能。通过模糊背景和色调变化平稳过渡，实现了快速预览和弹出框两个交互。

3D Touch Animated Mockup

Boris Borisov 的这个设计其实还是沿着官方设定的路线来走的，用力按压图标，触发弹出菜单，菜单中包含了一系列常用的选项，每个选项都被设计成图标+文本的样式。Boris 的这个案例还附上了AE文档，你可以下载学习一下哦~

Day 024 Boarding Pass

设计师在这里使用3D Touch 让用户可以触发预览航班的最关键信息，每个条目都可以这样触发，并且链接到某个小型的信息展板。

3D Touch

这个案例中，使用Force Touch可以预览用户的个人信息，弹出的预览框如果继续点击可以直接拓展为个人信息也诶按，这种设计优雅而实用。

3D Touch

这个3D Touch 设计案例中，长按压弹出菜单，这种设计本不出奇，但是考虑到许多产品的功能会比较多，这里设计师让许多非关键选项都隐藏起来，而只展示出了关键的选项。

iPhone 6s: Best 3D Touch Features!

这是一个Youtube视频，详细讲述了Force Touch 在日常使用中的具体功能和技巧。

Force Touch Slide Menu

这个Force Touch 所触发的侧边栏能够随着上下选项的滑动选取而变形，流畅而充满趣味。

Smart Home App – 3D Touch

Rodrigo Chiesa 的这套交互设计是为只能家居APP做的，Force Touch 触发的弹出界面可以用手势来控制参数，比如亮度、温度，你只需要上下轻轻滑动就可操控。

Framer 3D Touch Peek/Pop

这位设计师在浏览器上设计出了Force Touch的Peek和Pop的效果。这个概念设计的过渡和转变都相当的中规中矩，你可以下载这个原型来体验一下。

Apple 3D Touch

手势操作和3D Touch有着天然的契合，而Roman Wagner 的这个设计就很好的将两者集合到一起，长按触发预览，滑动关闭预览，非常的直觉化。

3D Touch Revised Facebook

作为世界范围内最著名的社交媒体，Facebook的重设计绝对是设计师拿来练手的最好素材之一。借助3D Touch的两大功能，结合手势触发菜单的设计，设计师让Facebook的浏览体验提升了一大截。

Apple App Icon 3D Touch

这是另外一个强化版 3D Touch的设计案例展示。真如同你所看到的，长按图标所触发的菜单经过重设计，看起来更加舒服，体验更佳。

结语

和苹果很多功能一样，前期的3D Touch 在应用支持上相对还是差一点，但是充满想法的设计师并不会因此止步，此刻的概念设计可能就是下一版更新的标配，而3D Touch 作为交互维度上的提升，可能会在未来润物细无声地改变大家的使用习惯。

【技多不压身的设计师才有高薪资！】

1. 平面设计：《超赞！设计师完全自学指南》
2. 交互设计：《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计：《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发：《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧：《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案：《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南：《基础知识学起来！为设计师量身打造的DPI指南》
8. 交互设计自学路径图：《零基础入门！给非科班生的自学路径图之交互设计篇》

原文地址：designmodo
原文作者：Nataly Birch
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量104万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com