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

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

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 作為交互維度上的提升，可能會在未來潤物細無聲地改變大家的使用習慣。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！