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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
动效精美的原型制作
0.0°
2014-07-29 自译外文 经验/观点 原作者: Todd Siegel 举报 51966 320 118 11

越来越多的UX设计师开始使用原型设计工具,来模拟原生应用的动效质感——目的是打造出可测试、可交互的原型,以方便设计决策。

新兴的工具开始不断出现,让一切变得高效起来:

本文旨在探索高保真原型,利用工具来实现交互动效,以便测试——无需编码知识,也无需陡峭的学习曲线。

这里,我将讲述我原型制作的设计流程,从纸质草图再到设备上的高保真原型实现。重点便是所有用户体验设计师都关注的3点——交互、视觉、动效。

一、我的早期原型设计经验

我这大半辈子都是作为企业家和设计师而存在的——我一直在寻找无需编码而能实现的高保真原型工具/方法。我需要快速的产出可交互原型,这样便能了解交互流程。

在2004年,我用Excel做可交互原型——2004年,对,你没看错,是Excel。这款基于数据表格的软件,每个标签都能代表一种状态。PPT也有此类功能。几乎每个看过我原型的人那时候都很吃惊,居然是用Excel做的?!

“动态可交互原型的价值胜过千张静态图片” — 某人如是说

2009年一月,我向Alan Cooper,Tim McCoy,Lane Haley分享Excel原型制作流程。


后来有一段时间我在搞一个音乐类产品Merchuv, Alan Cooper 直接领着他的团队来到我的公寓,让我讲讲Excel原型制作。


后来我的兴趣点转到了移动应用原型设计,我切换到了Keynote,因为Keynote的转场效果极佳,加上Keynotopia上面成败上千的资源, 所以Keynote成为了我可交互原型设计的主力工具。既能导出带有超链接,以便多屏之间切换的PDF文档,也可以通过点击手指来导航,Keynote真的很神奇。

移动应用设计未来的重点所在

很多人因为,原型就应该看起来跟真实的应用差不多。

随着Invision 的发行,我开始使用Invision进行原型制作,只需要设置热区,然后链接到指定的界面或状态即可,然后便可以在iPhone和Safrai中打开。这种原型设计方案非常高效。

我想要的效果是,当轻弹邮件项时,邮件项会轻微侧弹。这是iOS邮件应用的设计模式,而其他很多应用也在采用这种设计模式(例如Evernote和Spotify)

iOS7中,邮件应用的侧弹效果

在很多原型设计工具中,都有热区设置,以方便屏幕间的转场切换。
然而,也可以高效的展示统一界面内的动效。

在这个单屏交互动效中——卡片的轻弹、卡片的缓动效果、弹动效果、缩放比例——这些小效果,综合起来,构成了移动原生应用的优秀体验。其实这本质上不是交互设计了,是动效设计,好的动效能在本能上愉悦用户,促进用户更好的理解应用——facilitate the user’s mental model of an app.

我们来看看Path 3.0经典的圆形按钮交互动效,每次看到这个效,我们总是惊奇、赞叹——而且想去模仿。


对于移动应用的用户体验设计来说,能否够迅捷高效的实现可交互动效原型,是关键——必须无需编码(Objective C,Swift或者JavaScript),或者利用工具跳过陡峭的学习曲线。

正当我打算进一步制作邮件弹动效果的原型时,Proto.io发布了,这款工具支持拖移物体,支持状态,支持动画时间轴,也支持多种条件判定动效。

因此我用Proto.io进行了尝试,结果还算成功!

邮件弹动交互动效,用Proto.io重新创建,利用其“可拖移对象”的功能

从这时期,我便能快速组织原型,将设计内容高效的传递到用户的设备上,让他们去测试,诉说感受。


我对这款工具印象深刻,因此直接和他们的CEO Alexis Piperides直接联系。然后我跑到旧金山和他们聊了聊,给予了一些反馈。他们后来邀请我加入,来给Proto.io提供一些反馈、产品指向以及宣传。.

讲述完了我使用原型工具的历史,下面我将讲述我原型制作的流程,从纸质草图再到设备上的高保真原型。

下面哪两种设计方案,更容易被用户接受呢?
1)利用弹动效来实现菜单项的横向伸缩,然后在侧拉出的选项中进行二次选择(上图)
或者
2)根据菜单项滑动的长度,来选择选项(下图)

这是备选方案,根据滑动长度来确定所选择的选项。Proto.io制作这种原型时,只需要根据X轴滑动的变量,来动态改变两个选项的透明度即可。

———————————————————————明天流程继续———————————————————————

二、我的原型设计流程

这是一份UX原型设计流程,用来探索交互设计解决方案——从纸质草图,再到高保真原型,添加转场效果和动效,以及最终在目标用户的设备上测试原型。

我的一般性工作流程


1.纸质草图

绘制草图的设计成本很低,人人都可以表达下自己的想法,只需纸笔。草图的完成度较低,仅表述理念,很多细节上容易忽略。


2.创建静态图像,达到静态高保真的水平

用Sketch (或者 Fireworks, Illustrator, Photoshop, 甚至Keynote).

将跟动效有关的图像素材分开


为方便点击热区,实现界面之间的转场,将每一屏的图像都放置在图层组中。


3.导入到Invision或者Flinto

 然后添加热区和转场效果,来实现界面操作流程

目前已经构建出了可交互、简单动效保真水平的原型,可以尝试把原型教导用户手中进行测试。

Keynote的原型动效可以尝试,而若想达成高级动效,请用Edge Animate, 和 After Effects.


4.图像素材导入到Proto.io


 用Proto.io可以添加基于手势的交互动效,除了能实现较为原生的界面转场效果,也能实现屏幕内细腻的小动效果。


使用图像组件,将图像导入到容器中(Proto.io的容器有点像元件——一个改变,其他的也会跟着改变)改变屏幕上的组件和容器,除此之外Proto.io还可以定义:

手势 (敲击,滑动,捏合,拖动,滚动)交互动效 (渐隐、比例、移动、调整大小、旋转、缓动、延迟)转场效果 (侧滑,渐隐,翻转,旋转,弹出)状态 (可使用时间轴于界面和容器上)变量 (应用于条件出动效)

Proto.io提供了标准原生iOS组件,加上Google web font,以及你自己的图像素材。

一旦完成,准备分享交互原型,可以发布,然后分享链接即可。任何人都可以用手机来打开链接,浏览原型。为了优化表现力,Proto.io还提供了player app (适用于 iOS 和 Android). 这是一款移动端镜像工具,还可以编辑原型。


而Invision,每一屏都添加了内联反馈功能。可以很方便的远程协同工作——可以用Skype或者动态预览的方式来实现原型迭代。我曾经用过这款工具和泰国的Chiang Mai一起工作过。


5使用Reflector来让在场用户测试原型

也可以尝试用Reflector,来制作屏幕镜像,推送到用户手中,让在场的用户进行测试。

测试期间,用Screenflow来录制视频+音频,会比较翔实的记录用户的操作过程。


6使用Usertesting进行远程测试

为了让远程用户可以进行测试,推荐使用UserTesting ,这家机构提供移动端测试服务

重复测试并迭代

交付给开发

Proto.io所制作的原型可以看成是“动态说明文档”。能够以高保真的形式(具备时间轴动效、缓动特点、手势输入、尺寸) 展示应用。而且,一旦iOS开发者接到需求后,他能利用Proto.io和设计师讨论动效问题。有一个案例是,设计师和开发者利用Proto.io节省了80%的动效开发时间。


总结:

现在,很多工具的出现,让设计师可以快速的探索、产出概念,而且能生产可交互高保真原型——无需编码的介入,也能具备功能性和一定的动效。

交互动效和动态设计的出现,导致了用户体验的差异性进一步增加。你可以用Proto.io,而不用求助iOS开发者,快速实现基于手势的交互动效。

这是我们用Proto.io 重制的Path招牌动效,只用了20分钟


此原型的链接:Play with it
怎么玩?

A.在Safari中打开这个链接 link
B.在浏览器中选择“添加到主屏幕”,从而去掉浏览器界面


C.然后就可以在主屏幕中测试原型了


这是视频教程: how to re-create this classic animation in step-by-step videos.

推荐一个可以找到交互动效灵感的网站Capptivate。推荐各位临摹练习

更新:2014-07-29

收藏

320人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

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

    猜你喜欢

      2014-07-29 自译外文 经验/观点 原作者: Todd Siegel 举报 51966 320 118 11

      动效精美的原型制作

      0.0°

      你确定要举报动效精美的原型制作

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年07月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      118
      320
      11

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

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

      登录

      手机号

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

      登录
      第三方账号登录