The 3D touch of the iphone 6s and 6s Plus pressure-sensitive screens gives the iphone a whole new dimension of interaction, from no longer limited to 2D plane gestures, and the addition of a press operation that allows the phone to interact into the 3D dimension. The elevation of the interaction level allows the operation to have greater potential and distinct operating patterns.
In addition to the familiar multi‑touch gestures of light, light sweep and double pointing, the 3D touch also brings Peek and Pop, opening up a whole new dimension to the iphone's experience.
The screen of the mobile phone is identified with different intensity of press and makes different interactive feedback. Quick taps are customary standard operations, while the pressure is different, two different operations on the icon and other basic controls, will trigger different feedback and results. In general, after the addition of the strength of this dimension, users can change to obtain more detailed information and richer menu options, enhance the level of interaction, bring more rich experience, make the product more handy.
So how does the 3D touch change the interactive experience for UI and UX designers? Today's 20 prototype design cases should inspire you.
IMG Upload concept–3d Touch and Multi Selection
The first case came from the designer of Hangzhou, China, Leo Leung. In his conceptual design, the 3D touch does not stop at preview (Peek) and starts adding more and more interactive features, which allow you to select multiple different pictures quickly and efficiently, without needing more complex interactions.
Adding a New Goal Animation
This interaction design seems a bit simplistic, but with a little scrutiny, you'll find it very practical. Force Touch here provides users with a quick entry to trigger "New Goal", and the entire interactive animation design is smooth and enjoyable and neat.
3D Touch for Cycling Concept
3D touch in this case, help users quickly open the personal standings. Do not need to click and slide multiple times to enter a specific interface, 3D touch into the soul, add a sliding operation, you can also trigger the "collection" button.
3D Touch Notifications
Tom Graham's original interactive design is quite valuable for the 3D touch, it's not complicated, but it's a reasonable reinforcement and optimization based on the current iOS notification push system. Force Touch opens the notification preview, slides the favorites, slides off, and makes the notification system more usable.
3d Touch Music Store
John Khester's 3D touch interaction design is almost customized for the online music store, using force touching to trigger the album list, using a slide operation to trigger the album list, and a simple tap-click to form two different interactive routes.
3DTouch to Home
Although this interactive design is just a simple schematic, there is no gorgeous display effect, but its usage and other design is very different, it acts on the return button, and provides a quick return to the home page function.
3D Touch for OS X
The Force Touch function is also available on the Mac trackpad, and the design of the Zhikuan in Singapore seems to have been designed to be based on this. The Force Touch offers preview features, as well as extended shortcut action buttons.
Shopping peek–3d Touch
This designer is designed for the electrical business platform, in the list page without clicking into the specific product entry, long press trigger 3D touch to view the product's basic information.
Profile Peek and Pop
Peek and Pop are two basic features of the 3D touch, while designer Armand Chakhalyan's interactive design for personal files with pictures incorporates these two features. With a smooth transition of blur background and tonal changes, a quick preview and pop-up box two interactions are implemented.
3D Touch Animated Mockup
The design of the Boris Borisov is actually going along the official route, pressing the icon, triggering the pop-up menu, and the menu contains a series of commonly used options, each of which is designed as an icon + text style. Boris this case also attached to the AE document, you can download the study Oh ~
Day 024 Boarding pass
The designer uses 3D touch here to allow users to trigger the most critical information for a preview flight, and each entry can be triggered and linked to a small information display board.