课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 20个超赞的 3D TOUCH 概念设计案例
  • 20个超赞的 3D TOUCH 概念设计案例

    发布:南昌UI培训      来源:达内新闻      时间:2016-05-03


  • iPhone 6s和6s Plus 的压敏屏幕所带来的3D Touch 让iPhone 的交互多了一个全新的维度,交互从不再局限于2D平面手势,按压操作的加入使得手机交互进入了3D的维度。交互层次的提升让操作拥有了更大的潜力和截然不同的操作模式。

    除了轻点、轻扫、双指开合这些熟悉的 Multi?Touch 手势之外,3D Touch 还带来 Peek 和 Pop,为 iPhone 的使用体验开拓出全新的维度。

    对于UI和UX设计师而言,3D Touch能带来怎样的交互体验上的改变呢?南昌达内ui设计培训专家给大家提供了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的设计案例展示。真如同你所看到的,长按图标所触发的菜单经过重设计,看起来更加舒服,体验更佳。

    结语

    南昌达内ui设计培训专家指出,3D Touch 作为交互维度上的提升,可能会在未来润物细无声地改变大家的使用习惯。

    推荐文章

上一篇:12个实操性强的html5设计技巧

下一篇:达内教你打造用户信赖的页面

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56