iPhone 6s和6s Plus 的壓敏屏幕所帶來的3D Touch 讓iPhone 的交互多了一個(gè)全新的維度，交互從不再局限于2D平面手勢，按壓操作的加入使得手機(jī)交互進(jìn)入了3D的維度。交互層次的提升讓操作擁有了更大的潛力和截然不同的操作模式。

除了輕點(diǎn)、輕掃、雙指開合這些熟悉的 Multi?Touch 手勢之外，3D Touch 還帶來 Peek 和 Pop，為 iPhone 的使用體驗(yàn)開拓出全新的維度。

手機(jī)的屏幕對于不同力度的按壓進(jìn)行識別，并且作出不同的交互反饋?？焖佥p拍是大家習(xí)慣性的標(biāo)準(zhǔn)操作，而加大力度的按壓則不同，兩種不同的操作作用于圖標(biāo)和其他基本控件上的時(shí)候，會(huì)觸發(fā)不同的反饋和結(jié)果。一般說來，新增按壓力度這個(gè)維度之后，用戶可以通過力度改變來獲取更詳細(xì)的信息和更豐富的菜單選項(xiàng)，提升了交互的層次，帶來更豐富的體驗(yàn)，讓產(chǎn)品更加得心應(yīng)手。

那么對于UI和UX設(shè)計(jì)師而言，3D Touch能帶來怎樣的交互體驗(yàn)上的改變呢？今天的20個(gè)原型設(shè)計(jì)案例應(yīng)該可以給你帶來靈感。

IMG Upload Concept – 3D Touch and Multi Selection

第一個(gè)案例來自中國杭州的設(shè)計(jì)師 Leo Leung。在他的概念設(shè)計(jì)中，3D Touch 并沒有止步于預(yù)覽（Peek）而開始加入更多更強(qiáng)的交互功能，可以快速高效地多選多個(gè)不同的圖片，并且無需更多復(fù)雜的交互。

Adding a New Goal Animation

這個(gè)交互的設(shè)計(jì)思路看起來有點(diǎn)過于簡單，但稍加推敲，你會(huì)發(fā)現(xiàn)它非常實(shí)用。Force Touch 在此主要為用戶提供觸發(fā)“New Goal”的快速入口，整個(gè)交互的動(dòng)畫設(shè)計(jì)是順滑而令人愉悅的，干凈利落。

3D Touch for Cycling Concept

3D Touch在這個(gè)案例中，幫用戶快速打開個(gè)人積分榜。不需要多次點(diǎn)擊和滑動(dòng)來一層層地進(jìn)入特定界面，3D touch 一發(fā)入魂，再加一個(gè)滑動(dòng)操作，還可以觸發(fā)“收藏”按鈕。

3D Touch Notifications

Tom Graham 的這個(gè)原創(chuàng)交互設(shè)計(jì)對于3D Touch而言相當(dāng)有價(jià)值，它并不復(fù)雜，但是在當(dāng)前的iOS 通知推送系統(tǒng)基礎(chǔ)上做出了合理的強(qiáng)化和優(yōu)化。Force Touch 打開通知預(yù)覽，滑動(dòng)收藏，滑動(dòng)關(guān)閉，這些讓通知系統(tǒng)的可用性更強(qiáng)了。

3d Touch Music Store

John Khester 的3D Touch交互設(shè)計(jì)幾乎是為在線音樂商店定制的，使用Force Touch 觸發(fā)專輯內(nèi)容列表，使用滑動(dòng)操作來觸發(fā)專輯列表，和單純的輕拍點(diǎn)擊形成兩條不同的交互路線。

3DTouch to Home

雖然這個(gè)交互設(shè)計(jì)只是簡單的示意圖，沒有華麗的展示效果，但是它的用法和其他的設(shè)計(jì)有很大的不同，它作用于返回按鈕，并且提供了快速返回首頁的功能。

3D Touch for OS X

Mac的觸控板上也有了Force Touch功能，而新加坡設(shè)計(jì)是 Zhikuan 的這個(gè)設(shè)計(jì)似乎就是以此為基礎(chǔ)而設(shè)計(jì)的。Force Touch 提供了預(yù)覽功能，以及拓展而出的快捷操作按鈕。

Shopping Peek – 3D Touch

這位設(shè)計(jì)師的是為電商平臺設(shè)計(jì)的，在列表頁中無需點(diǎn)擊進(jìn)入具體產(chǎn)品條目，長按觸發(fā)3D Touch 來查看產(chǎn)品的基本信息。

Profile Peek and Pop

Peek 和 Pop 是3D Touch的兩個(gè)基本功能，而設(shè)計(jì)師 Armand Chakhalyan 針對帶有圖片的個(gè)人檔的交互設(shè)計(jì)則融入了這兩大功能。通過模糊背景和色調(diào)變化平穩(wěn)過渡，實(shí)現(xiàn)了快速預(yù)覽和彈出框兩個(gè)交互。

3D Touch Animated Mockup

Boris Borisov 的這個(gè)設(shè)計(jì)其實(shí)還是沿著官方設(shè)定的路線來走的，用力按壓圖標(biāo)，觸發(fā)彈出菜單，菜單中包含了一系列常用的選項(xiàng)，每個(gè)選項(xiàng)都被設(shè)計(jì)成圖標(biāo)+文本的樣式。Boris 的這個(gè)案例還附上了AE文檔，你可以下載學(xué)習(xí)一下哦~

Day 024 Boarding Pass

設(shè)計(jì)師在這里使用3D Touch 讓用戶可以觸發(fā)預(yù)覽航班的最關(guān)鍵信息，每個(gè)條目都可以這樣觸發(fā)，并且鏈接到某個(gè)小型的信息展板。

3D Touch

這個(gè)案例中，使用Force Touch可以預(yù)覽用戶的個(gè)人信息，彈出的預(yù)覽框如果繼續(xù)點(diǎn)擊可以直接拓展為個(gè)人信息也誒按，這種設(shè)計(jì)優(yōu)雅而實(shí)用。

3D Touch

這個(gè)3D Touch 設(shè)計(jì)案例中，長按壓彈出菜單，這種設(shè)計(jì)本不出奇，但是考慮到許多產(chǎn)品的功能會(huì)比較多，這里設(shè)計(jì)師讓許多非關(guān)鍵選項(xiàng)都隱藏起來，而只展示出了關(guān)鍵的選項(xiàng)。

iPhone 6s: Best 3D Touch Features!

這是一個(gè)Youtube視頻，詳細(xì)講述了Force Touch 在日常使用中的具體功能和技巧。

Force Touch Slide Menu

這個(gè)Force Touch 所觸發(fā)的側(cè)邊欄能夠隨著上下選項(xiàng)的滑動(dòng)選取而變形，流暢而充滿趣味。

Smart Home App – 3D Touch

Rodrigo Chiesa 的這套交互設(shè)計(jì)是為只能家居APP做的，F(xiàn)orce Touch 觸發(fā)的彈出界面可以用手勢來控制參數(shù)，比如亮度、溫度，你只需要上下輕輕滑動(dòng)就可操控。

Framer 3D Touch Peek/Pop

這位設(shè)計(jì)師在瀏覽器上設(shè)計(jì)出了Force Touch的Peek和Pop的效果。這個(gè)概念設(shè)計(jì)的過渡和轉(zhuǎn)變都相當(dāng)?shù)闹幸?guī)中矩，你可以下載這個(gè)原型來體驗(yàn)一下。

Apple 3D Touch

手勢操作和3D Touch有著天然的契合，而Roman Wagner 的這個(gè)設(shè)計(jì)就很好的將兩者集合到一起，長按觸發(fā)預(yù)覽，滑動(dòng)關(guān)閉預(yù)覽，非常的直覺化。

3D Touch Revised Facebook

作為世界范圍內(nèi)最著名的社交媒體，F(xiàn)acebook的重設(shè)計(jì)絕對是設(shè)計(jì)師拿來練手的最好素材之一。借助3D Touch的兩大功能，結(jié)合手勢觸發(fā)菜單的設(shè)計(jì)，設(shè)計(jì)師讓Facebook的瀏覽體驗(yàn)提升了一大截。

Apple App Icon 3D Touch

這是另外一個(gè)強(qiáng)化版 3D Touch的設(shè)計(jì)案例展示。真如同你所看到的，長按圖標(biāo)所觸發(fā)的菜單經(jīng)過重設(shè)計(jì)，看起來更加舒服，體驗(yàn)更佳。

結(jié)語

和蘋果很多功能一樣，前期的3D Touch 在應(yīng)用支持上相對還是差一點(diǎn)，但是充滿想法的設(shè)計(jì)師并不會(huì)因此止步，此刻的概念設(shè)計(jì)可能就是下一版更新的標(biāo)配，而3D Touch 作為交互維度上的提升，可能會(huì)在未來潤物細(xì)無聲地改變大家的使用習(xí)慣。

【技多不壓身的設(shè)計(jì)師才有高薪資！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址：designmodo
原文作者：Nataly Birch
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com