iOS交互&设计交互交互原型设计

交互原型新手入门2——Form入门导航

2015-05-14  本文已影响916人  别惹小软

折腾了一个多星期的Form,整理下学习资源。

以下内容是按照学(cai)习(keng)实践整理,自认为最佳的Form入门导航。

1、软件下载

Mac App Store 链接

iPhone中App Store搜索【Form】下载

Form

2、了解Form,初步尝试制作原型

推荐阅读 侯雯佩 同学的翻译:交互原型工具Form介绍 & 教程翻译

PS:阅读时不要被文章中各个链接分散注意力,只看翻译内容就好。我已经踩过坑了,全看了会晕的不要不要的!实在不懂的下载教学视频看看——Form简介【教程视频+源文件】下载链接

3、详细了解Form各个Patch

Form官方Patch讲解链接

把上面链接里所有内容撸一遍,英文不好没关系,直接看每部分最下面的视频。我都是静音看的,so easy。建议跟着一起练习,记笔记。

个人建议:最好不要直接去看实例教程,很容易晕。把官方讲解看一遍花不了多长时间,对各个模块有个整体概念,接下来会更加顺畅。

4、临摹Demo,深入学习主要Patch

我都是直接看教学视频(还是静音),跟着一点点做。不懂的地方看看源文件,还不懂看看英文原版教程讲解。

4.1 复制器

Form复制器【教学视频+Form源文件】下载链接

教程——(英文好的同学看)原文链接:Replicator Tutorial

        ——(中文好的同学看)王镇雷翻译  动效软件 Form 教程:复制器 Replicator

4.2 状态控制

Form状态控制【教学视频+Form源文件】下载链接

教程——(英文好的同学看)原文链接:State Tutorial

        ——(中文好的同学看)王镇雷翻译 动效软件 Form 教程:状态控制

4.3手势

Form手势【教学视频+Form源文件】下载链接

教程——(英文好的同学看)原文链接:Gesture Tutorial

    没人翻译,中文好没用...

4.4子视图

Form子试图【教学视频+Form源文件】下载链接

教程——(英文好的同学看)原文链接:Subviews Tutorial

    没人翻译,中文好没用...

5、临摹官方案例,体会原型制作逻辑

可以祭出大杀器:大M神——动效原型工具Form指南

这篇文章相当、相当、相当好!前提是你要对Form有一定的了解...

我开始零经验直接看了这篇,然后...就彻底晕了!

不过把上面 1-4 步全走完,再回头来看 大M神 这篇文章,收获良多。

全部走完,可以说Form算是基本入门了。

最后放一个临摹官方案例【iPhone Map Photos】时,修改的图片出现动画效果图。

(左边是我修改的,右边官方原版效果)

左图:修改后动画;右图:官方案例
上一篇下一篇

猜你喜欢

热点阅读