20個令你腦洞大開的 3D TOUCH 概念設計案例

發表於2016-05-03

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

1-IMG-Upload-Concept-3D-Touch

第一個案例來自中國杭州的設計師 Leo Leung。在他的概念設計中,3D Touch 並沒有止步於預覽(Peek)而開始加入更多更強的互動功能,可以快速高效地多選多個不同的圖片,並且無需更多複雜的互動。

Adding a New Goal Animation

2-Adding-a-new-goal-animation

這個互動的設計思路看起來有點過於簡單,但稍加推敲,你會發現它非常實用。Force Touch 在此主要為使用者提供觸發“New Goal”的快速入口,整個互動的動畫設計是順滑而令人愉悅的,乾淨利落。

3D Touch for Cycling Concept

3-3D-Touch-for-Cycling-Concept

3D Touch在這個案例中,幫使用者快速開啟個人積分榜。不需要多次點選和滑動來一層層地進入特定介面,3D touch一發入魂,再加一個滑動操作,還可以觸發“收藏”按鈕。

3D Touch Notifications

4-3D-Touch-Notifications

Tom Graham 的這個原創互動設計對於3D Touch而言相當有價值,它並不複雜,但是在當前的iOS 通知推送系統基礎上做出了合理的強化和優化。Force Touch 開啟通知預覽,滑動收藏,滑動關閉,這些讓通知系統的可用性更強了。

3d Touch Music Store

5-3d-Touch-Music-Store

John Khester 的3D Touch互動設計幾乎是為線上音樂商店定製的,使用Force Touch 觸發專輯內容列表,使用滑動操作來觸發專輯列表,和單純的輕拍點選形成兩條不同的互動路線。

3DTouch to Home

6-3DTouch-to-home-by-Javi-Perez

雖然這個互動設計只是簡單的示意圖,沒有華麗的展示效果,但是它的用法和其他的設計有很大的不同,它作用於返回按鈕,並且提供了快速返回首頁的功能。

3D Touch for OS X

7-3D-Touch-for-OS-X

Mac的觸控板上也有了Force Touch功能,而新加坡設計是 Zhikuan 的這個設計似乎就是以此為基礎而設計的。Force Touch 提供了預覽功能,以及擴充而出的快捷操作按鈕。

Shopping Peek – 3D Touch

8-Shopping-Peek-3D-Touch

這位設計師的是為電商平臺設計的,在列表頁中無需點選進入具體產品條目,長按觸發3D Touch 來檢視產品的基本資訊。

Profile Peek and Pop

9-Profile-Peek-and-Pop

Peek 和 Pop 是3D Touch的兩個基本功能,而設計師 Armand Chakhalyan 針對帶有圖片的個人檔的互動設計則融入了這兩大功能。通過模糊背景和色調變化平穩過渡,實現了快速預覽和彈出框兩個互動。

3D Touch Animated Mockup

10-3D-Touch-Animated-Mockup

Boris Borisov 的這個設計其實還是沿著官方設定的路線來走的,用力按壓圖示,觸發彈出選單,選單中包含了一系列常用的選項,每個選項都被設計成圖示+文字的樣式。Boris 的這個案例還附上了AE文件,你可以下載學習一下哦~

Day 024 Boarding Pass

11-Day-024-Boarding-Pass

設計師在這裡使用3D Touch 讓使用者可以觸發預覽航班的最關鍵資訊,每個條目都可以這樣觸發,並且連結到某個小型的資訊展板。

3D Touch

12-3D-Touch-by-Pedro-Alejandro

這個案例中,使用Force Touch可以預覽使用者的個人資訊,彈出的預覽框如果繼續點選可以直接擴充為個人資訊也誒按,這種設計優雅而實用。

3D Touch

13-3D-Touch-by-Charlie-Deets

這個3D Touch 設計案例中,長按壓彈出選單,這種設計本不出奇,但是考慮到許多產品的功能會比較多,這裡設計師讓許多非關鍵選項都隱藏起來,而只展示出了關鍵的選項。

iPhone 6s: Best 3D Touch Features!

14-Best-3D-Touch-Features

這是一個Youtube視訊,詳細講述了Force Touch 在日常使用中的具體功能和技巧。

Force Touch Slide Menu

15-Force-Touch-Slide-Menu

這個Force Touch 所觸發的側邊欄能夠隨著上下選項的滑動選取而變形,流暢而充滿趣味。

Smart Home App – 3D Touch

16-Smart-Home-App

Rodrigo Chiesa 的這套互動設計是為只能家居APP做的,Force Touch 觸發的彈出介面可以用手勢來控制引數,比如亮度、溫度,你只需要上下輕輕滑動就可操控。

Framer 3D Touch Peek/Pop

17-Framer-3D-Touch-Peek-Pop

這位設計師在瀏覽器上設計出了Force Touch的Peek和Pop的效果。這個概念設計的過渡和轉變都相當的中規中矩,你可以下載這個原型來體驗一下。

Apple 3D Touch

18-Apple-3D-touch

手勢操作和3D Touch有著天然的契合,而Roman Wagner 的這個設計就很好的將兩者集合到一起,長按觸發預覽,滑動關閉預覽,非常的直覺化。

3D Touch Revised Facebook

19-3D-Touch-Revised-Facebook-by-Hoang-Nguyen

作為世界範圍內最著名的社交媒體,Facebook的重設計絕對是設計師拿來練手的最好素材之一。藉助3D Touch的兩大功能,結合手勢觸發選單的設計,設計師讓Facebook的瀏覽體驗提升了一大截。

Apple App Icon 3D Touch

20-Apple-App-Icon-3D

這是另外一個強化版 3D Touch的設計案例展示。真如同你所看到的,長按圖示所觸發的選單經過重設計,看起來更加舒服,體驗更佳。

結語

和蘋果很多功能一樣,前期的3D Touch 在應用支援上相對還是差一點,但是充滿想法的設計師並不會因此止步,此刻的概念設計可能就是下一版更新的標配,而3D Touch 作為互動維度上的提升,可能會在未來潤物細無聲地改變大家的使用習慣。

相關文章