恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
隆重介绍Avocado插件:交互设计师的新工具
0.0°
2014-06-05 自译外文 经验/观点 原作者: IDEO 举报 39345 111 50 12

纯净效果,无需编码

隆重介绍Avocado插件:交互设计师的新工具

回弹,旋转,翻转。今日的界面设计重点是动效。但是工具并不能满足我们对于效果的需求,而且大多数动效工具也非常不直观,难以学习。

作为交互设计师和软件工程师,我经常通过编码把想法实现。

而对于不会编码的人来说,问题就麻烦了,不过还还有可视化编程动画软件Quartz Composer (使用了将近十年的可视化编程语言),以及Facebook提供的插件 Origami (Facebook构建的一款新工具,作为QC的插件而存在),让不具备编程能力的人也能实现自己的想法。

我们为什么搞这玩意儿?因为第一,“让交互设计具有更多的可能性”值得尝试。其次,在我们IDEO的工作流程中,我们需要能以很快的速度构建实时交互原型。所以,我们进行了探索,Avocado因此诞生——让那些不会编码的设计师也可以用它来很好的设计。

在使用QC和Origami时,它们能够提供一些最基本的界面构建块,我们称之为“模块”(Patch)。通过模块的拼接来实现设计理念。当熟练达到一定程度,我发现自己已经能够去定制一些模块,来让我的工作更加顺手,同时减少设计的复杂度,这就是Avocado。

首先我创造了一套可复用的模块,能够实现一些常见的交互效果。


想要试试吗?

i. 注册苹果开发者账号
ii. 下载并安装Quartz Composer (我们UI中国的工具页提供了QC下载,不过之前你要安装Xcode)
iii. 下载并安装Avocado


Avocado所提供的模块

安装完成后,我们首先来看看轮播模块

Avocado提供的Carousel(轮播)模块可以很方便的实现大量图像的轮播效果。使用Carousel模块,几秒钟就能做好轮播效果原型。

在Avocado 1.0 beta中还提供了4种基本动效:跳跃,摆动,轻摇,浮动



QC非常的强大,能够制作出效果细腻的动效,但是用起来非常的耗时,"想逻辑"和“大量连接模块"让人感到非常不愉快,而且复用性比较差。比方说图中这种最简单的摆动效果,如果不用我们提供的Nod模块,你自己用QC做,估计要做很久。而且对于旋转动效来说,需要一定的微积分知识才能做出来——Sin/Cos。而我们的Avocado这里做了简化处理,减少了制作流程中得复杂性,不用太懂数学,也能够轻松的制作交互原型。


真正可交互的键盘模块

尽管虚拟键盘是交互设计师需要经常打交道的东西。但是很少在交互原型中看到“可操作的”键盘,我自己做了之后,我明白了。。。

看了头疼不?非常煎熬,在构建iOS Keyboard这个模块的时候,我熬了一宿,在Quartz Composer和Xcode中来回跳跃,勉强搞了出来。

iOS Keyboard模块的效果


Avocado的精妙效果,还是要得益于Quartz Composer这款软件,这是Avocado的核心。QC作为一款将近10年的软件,最开始主要是用来设计屏保程序以及iTunes可视化效果,根本不是用来设计用户图形界面的。事实证明,QC对于没有编程基础的人来说,是一块难啃的骨头。为了方便大伙,我们设计了一系列易用的模块,来简化设计。


Reaping the Fruit

搞定之后,我们便在我们IDEO自己的项目中使用Avocado,原因有以下几点:

1. 便贴和纸质原型虽然方便实用,但是Avocado+Origami+QC可以让理念“动”起来,这样的交互设计才能考虑到更多,更加丰满。

2. 让交互设计师可以更好地、更快速的和其他同事对接,用Avocado可以非常快速的产出原型,清晰表达理念,这样整体工作便可更加灵活。——让交流更加顺畅。

3. 在定性用户研究阶段,使用Avocado可以方便迭代。例如,在用户访谈过程中,我们可以边和用户面对面交流,同时收集用户的想法和意见,如果用户有不错的意见,我们可以很快速的用Avocado把原型做出来,然后和用户交流。动态化的表达工具。

4. Avocado最厉害的地方在于,不懂编码的设计师也能利用它构建出美妙的用户体验。


Avocado让我们的工作协同更美妙。


更多效果预览:https://github.com/ideo/avocado


更新:2014-06-05

收藏

111人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现

    猜你喜欢

      2014-06-05 自译外文 经验/观点 原作者: IDEO 举报 39345 111 50 12

      隆重介绍Avocado插件:交互设计师的新工具

      0.0°

      你确定要举报隆重介绍Avocado插件:交互设计师的新工具

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年06月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      50
      111
      12

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录