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