本课将讲解一下原型设计（Prototypes） This lesson will be going through prototypes
我认为原型设计是作为一个设计师必须具备的基本技能 And I think prototypes are an essential skill to have as a designer
尤其是在***********8 particularly move forward where the interactive space is moving.
如果想一下的话 原型设计能帮助你结合上下文想问题 if you start thinking about it, being able to prototype helps you think about things within context,
以不断变化的眼光看问题 with things to sort of have continual movement,
以及***** how they exist in environment.
所以如果你要进行比如物联网的设计 So you think about things like design for the internet of things.
或者以后虚拟现实方面的设计 And sort of for VR moving forward,
这都是一项非常好的技能 It's just really a great skill to have
能创造出一些能够直接触摸和感受的东西 and sort of being able to create things that you can sort of
而不是像静态的无法感受和触摸 touch and feel and be a bit more tactile than static comps.
所以原型对于测试微交互 用户流程 So prototypes are great for testing micro interactions, user flows,
用户体验等都非常好 还具备利用真实用户进行测试的能力 how something feels, and the ability to test with real users.
这可以有效而迅速地创建一些东西 并获得及时的反馈 It's an effective way to build something quickly and sort of to get immediate feedback
所以它非常适合迭代 能迅速更新 So it's great for iterating, having incremental improvements
并能及早发现其中的问题 and sort of recognizing the pitfalls early
能知道设计的产品是如何工作 以及那些功能不行 why and how the design is working, what's not working.
哪些点子在设计时看来挺好 what sort of seem like a good idea at the time
但是当真正应用的时候会有点笨拙或者根本不起作用 But when you sort of implemented in it can feel a bit clunky or it's just not working
所以这有助你早点得到反馈 而不是在推出反复打磨过的产品后 So it's good to sort of get that feedback early rather than launching product that's polished
产品才意识到有巨大的问题 only to realize that that is like giant pitfalls
这是一个可以和客户进行复杂交互的非常好用的工具 It's a great tool to sort of communicate complex ideas with clients.
能让客户清晰地看到产品是如何运作的 So some clients might be able to visualize how something works
然后摆平 所以为了得到一些创新想法的支持********** and squared away. So to get buy in for some of those innovative ideas,
它还可以让你决定事物带给人的感受 而不仅仅止步于它的外观 it also allows you to determine how something feels and not just how it looks
这就是我所谓的无形部分 x因子 This is sort of what I call the intangible part, the x factor.
现在 当你拿起东西就可以直接使用的时候 Now, when you pick something up and you can just use straight away,
你只感觉它起作用了 或者它本来就是这样的 it feels like it just works, or it's meant to be that way.
所以当你做原型设计的时候 你可以感受到这些想法 So when you prototype, you can sort of feel out these ideas
能感觉到... 能亲自试验 and sort of feel what, test out
什么是正确的想法 what feels just right
所以当你第一次拿起苹果手机 并和它互动的时候 So sort of when you first picked up the iphone and interacting with it
你就会感觉到 嗯 something about it just felt like
手机就应该是这个样子 of course it's like this
所以原型设计可以让你形成这种技能 So prototyping allows you to kind of build this skill and sort of
能让你敏锐把握到 try to hold on that you know
能让你产品变得非常好用的X因子 that sort of x factor that makes a product really delightful to use
下面是我使用的四个原型设计工具 So here are four prototyping tools that I use.
第一个是Invision the first is invision,
第二个是Axure 还有Principal和Pixate the second is Axure, we have principal and pixate
所以我接下来会带你们一起看看 so i'm just going to run you through what each one
每个工具对我有何种用处 is useful for myself personally
Invision非常适合测试简单的页面流 Invision is great for testing simple page flows.
我通常使用高清的标记 并测试在不同设备上的效果在不同的设备上 I usually hi-fidelity marks and testing how things will look on different devices.
所以如果我想测试一下手机上会是什么样子 So if i'm just trying to test how something will look on mobile and sort of
而且整个流程用起来怎么样 what the flows will feel like,
那我就打开Invison 弄几帧图片 then i'll just load up invison, sort of stich together a couple of frames
能够测试简单的流程 and sort of, be able to test the simple flows and sort of see
它们是如何一起流动的 how it all flows together and this is great to****** a client
因为很容易通过Invision工具来完成 because it's really easy to sort of set up through invision.
第二个是我之前在讲解课程结构时 The second is Axure which I showcase earlier one
提到过得Axure工具 the lessons in struction hierarchy
这对于较为复杂的页面流和定制化交互非常有用 And this is a great for complex page flows and sort of more custom interactions,
可以很方便地进行可用性测试 which are great for usability testing.
通常低保真度是我使用Axure的原因 usually low-fidelity wise is why I use Axure for
所以当我面对更复杂的页面流 更多流程时 我可能会使用Axure So when I have more complex page flows with more sequences, I probably up to use Axure
所以你把这个放在了某种用途的前面 有点像 and so you put this in front of the sort of using. And sort of say
呃 我是怎么看待逻辑和事情的安排的 what I think with the logic and the way things are set out.
Principle非常适合测试桌面和移动设备的微交互 Principle is great for testing micro-interactions for both desktop and mobile
最近 他们加入了测试鼠标悬浮状态的功能 recently, they put in like the ability to test with hover states.
Principle现在可能是我进行原型设计用到的最主要的工具之一 And principle is probably one of my main prototyping tools now
我经常用它 I use it a lot.
来向客户和开发者展示产品是如何运作的 sort of showcase how things will work to the client, to developers
还能进行测试 来看看这些东西在手机端 and sort of to test as well. just to see how things will feel on mobile
和桌面端交互的感受 and for desktop interactions.
最后是Pixate Finally pixate
这对于及其复杂的微交互非常好用 而且只适用于移动设备 this is great for super complex micro-interactions, and it's only for mobile.
所以当你需要来创造 so when you need full control to creat something that's almost
尽可能接近最终应用的产品时 Pixate是一个非常好的工具 as close to the final product as possible, pixate is a great tool for doing that
所以在这里我要给你们展示一些 So here i'm just gonna show you some examples of
原型设计 来帮助你们学习这些工具的使用方法 some prototypes and sort of step you through it.
好了 现在我就教你们怎么使用Principle工具来进行原型设计 Ok, so here I'm gonna step you through how we're gonna prototype something with principle
以及在设计过程中是如何构思的 and sort of what to consider as we're designing.
这是一个为VESPI品牌设计的交互式网站 so this is a responsive website for VESPI that we're working on.
现在我们要调出移动端的界面 So i'm just gonna move over quickly to mobile here which is designer readiness plate*******
先把界面缩小 so I'm gonna zoom out.
我想测试的是 And what I wanted to test here was,
如果你看到这里菜单的折叠方式 if you can see here that the way the menu collapses
它并没有把所有的菜单都折叠隐藏到这个汉堡菜单中 it doesn't actually collapse the complete menu to a hamburger
实际上 我认为这是对电商来说 Actually I think this is a better pattern for e-commerce store to keep
让两个主要的购物类别可见更好 two of the main shopping categories actually visible
让他们在导航栏附近的位置可见 at all times. So sort of all visible at the very top of where the nave is,
因为这是非常重要的链接 because this is a crucial link
我们希望他们能够直接点击 We want them to be have to be able to click through
而不需要点击汉堡菜单按钮 这样会增加多余步骤 without having to cook the hamburger, and then sort of going through an extra step.
我现在要打开这里的图层 I'm just going to open up this layer here.
我习惯给这些图层编以不同的颜色 And what i'd like to do is sort of just color code some of my layers
还有交互元素层 and have interactive elements layer. And this is sort of
这些都有不同的编码 以便后面进行测试 some of the different IDs and sort of things i'll be testing out.
你可以看到 我直接 So as you can see here this certain things where I kind of just
复制了整个画布 copy the whole, what I did is to copy the whole canvas here
使用command+C快捷键 and just did a command shift c
直接复制所有的图层 然后把它变成一个图像 to copy all the layers, and then just turn it into an image.
现在我就建立一个新图层 并把它粘贴到这 So I just paste, creat a new layer and paste as an example here.
所以你看到这就变成了一个完整的图像 And you see this becomes a full image.
我将其命名为Comp 因为这是一个组合 I just call that comp Since this is a composition
而这个Header图层就是在这里的最上面的部分 and this header is just this area here. I've separated up top here.
我现在移动这个 So I actually just moved this
你就能看到固定顶端菜单的效果 and sort of see what a sticky head feel like
所以实际上我在进行原型设计之前 So actually I do this quite a lot
经常用Photoshop软件这样做 in Photoshop to begin with before I prototype everything
来看看呈现的效果 我觉得这是一种简单快捷的方法 just to see how things feel. I think it's really easy sort of quick way to
来关联这些图层 association that layers, something like that.
顶端的图层也是一样 我也是从顶层剪裁下来的 And the head is just the same thing. I just cropped it from the top
放在最上端 just place on top.
在开始测试前 So I kind of like to see how things feel
我会看一下整体的效果 before I sort of test them out.
我是这么来设计的 Say so my consideration was
把这两个菜单选项显示出来 to have these two sort of appear. But then
但是当用户滚动操作时 我们只保留顶端的主导航栏 once the user scrolls, we only keep the main nave sticky.
然后我还有一些其他的考虑 And then I had a few other considerations.
我们做这个原型设计 好在手机设备上进行测试 So we'll prototype that as one prototype to test on our mobile devices
Principle软件好处之一就是你可以在手机上进行互动和测试 that's the sort of beauty principle you'll be able to interact and tested natively on your phone
第二个交互项是这里的隐藏下拉菜单 the second interaction is this hide-drop menu here.
我来测试一下 So I want to test
这个菜单的效果 how this menu would feel.
你只需要打开和关闭菜单 if you just once open and closed the menu
就可以看出点我的设计意图 you can sort of see that how I wanted this,
我把这个汉堡菜单按钮变成了 hamburger menu here just to sort of
一个箭头 我觉得这会让你知道 convert to arrow. I think it gives a lot of contexts to the point,
箭头可以让你返回原来的菜单 to go back to where sort of where you came from.
他站在我的指引下********** And he stood on my guides
所以你可以看到我继续 so you can see here that I continued on with
我这里也有男士和女士的选项 这非常重要 having the men's and women's categories because there is a super important
以为从这里可以直接进入店铺 并帮助我们达成经营目标 as they take it to the shop and supports our business goal,
也就是增加产品销量 提升客单转化率 which is to sort of increase sales and sort of boost conversions.
这些菜单项越容易获取 And sort of the more accessible these links are
客户点击进去 浏览商品 the more likely we're gonna have a user to sort of
可能性也就越大 come through and explore the product.
所以你可以看到我是这样做的 So you can sort of see here.
然后我们再把 And then we just
所有东西都放到网格上 我把网格距离拉开了 put everything onto the grid again, I kinda spaced it out.
so I actually *** the spacing quite a lot between here and here
用Skala Preview在我手机测试 and sort of tested on my phone using skala preview
来看看在手机上的效果如何 and sort of try to see how it felt on mobile and sort of,
每个链接之间是不是有足够的空间 what does it feel like? Is there enough room between each link
会不会互相重叠 sort of not collide with each other?
我觉得如果你是为手机端设计产品 So I think it's a very important consideration to have.
这一点是很重要的 when you design stuff for mobile?
我们把这个关掉 下面是一个能提供帮助的小工具 And so we just turn this off. and here is just a little continuation on this little help tool
这个小工具是一个小型的聊天系统 I design. So this is just a little chat system
我们可以在里面谈论一下感受 问一下VESPI提供哪些产品等 where so we talked about observation and sort of looking at what VESPI offered in store
我想达到的目的是 让客户有一种人性化的体验 so I want to carry that, sort of really personalize experience and having a sort of
能有人在购物的过程中对你提供帮助 someone who could assist you with your shopping
所以如果你需要什么 So if you ever needed something
就有人用语音来引导帮助你 you could have a real voice sort of assist you
用下面的这个交互功能 So you know which I really personalize it.
我赋予了设计人性化的功能 So with this low interaction here,
现在是未激活状态 so I just have and inactive states
也是基本的状态 that's the base state
如果你点击的话 So when you click on
这里就展开了 it kind of opens up
如果你已经登录的话 他会给你提供定制的信息 And so it gives you a little personalized message if you're logged in.
你也可以随时问问题 And so you can always ask a question at all time
而在后台给你回复的是一个真实的人 and sort of respond on the other end will just be a real person
是某一个不具名的真人 It would be Jane on the other line
在你遇到问题的时候随时帮助你 sort of helping you out if you had any problems
我觉得在购物体验中 And I think it would be great to sort of
能提供个性化的体验是很棒的 offer that sort of personalized experience to the shopping experience,
我现在关掉帮助按钮 i'll turn off the help.
这是一个很好的例子 So this is actually a great example for you to sort of
能帮助你做原型设计的练习 use as an exercise to sort of try prototyping this
但是在这个示例教学中 我们会只讲述手机端的设计 but in this exercise, we'll be looking at mobile purely
借助Principle软件来展示设计过程 and using a principle to sort of visualize and sort of
并讲述一些设计理念和想法是如何付诸实施的 see how each of these sort of ideas that we have could work.
我们会测试这个菜单项 So we'll be testing this menu sort of prototyping that up.
另一个想法 And another consideration was to actually have
在滚动的时候 this as the use of scrolling
我先把这个关掉 so I'll just turn off this state.
所以当我们滚动页面的时候 So as a use of scrolling
我们可以把显示的VESPI品牌标志 We can actually change from having the VESPI logo
转换成 立即购买 标志 to this little SHOP NOW stay here.
我先把这个删掉 So i'm gonna remove this
还有这个图层 and the little layer
当在滚动的时候 我想看看 So as this scrolling, I want to see if
效果是否如我所愿 that could potentially work
这样子就能让你 So this would become a correlation
直接购买商品 to go shopping
如果你点击这里 So if you click on this
或许还可以展示两个类别 perhaps we could have two categories
男士和女士 men and women shop
这个我还没设计 I haven't designed that, but
但是你们可以来练习一下 看看你能否设计出那种效果 could be another good exercise for you to sort of go through and see if you could design that state
这里是产品列表 So I have this product here.
你还能看到上面还有些字迹 Actually, you can see some of the remnants on that there,
把这些字去掉 remove these two
这些就是设计的一些操作 and sort of see how you could work that into it.
好了 Ok. So
接下来我就给你们看一些我之前在Principle软件中设计的案例 so i'm just gonna show you something I prepared earlier in principle.
这就是 So here's something
这就是我之前说过的一些交互功能 So these are some of the interactions I was talking about
这里测试界面 你可以在电脑端这样来测试 So these are our test. you can test on your computer like this,
但实际上我可以用我的苹果手机 but actually hook up my iphone and sort of
也能在这上面用Principle软件测试 are tested with with principle as well
你可以从苹果商店里下载Principle软件 然后跟你电脑同步 so you can download the Principle APP from APP store, and kinda syncs with your computer,
然后就可以在手机上进行测试了 And you can sort of test natively on the phone
这真的是一个很棒的工具 And it's really a brilliant tool.
接下来 我要给你们看几个例子 So i'm gonna show you through a couple of examples.
这里固定不动的就是我们的测试区 So here is just the sticking app that we've tested.
我在手机上做得测试 感觉很好 And I tested on mobile and it feels great.
我们可以看到 这没有占用很大的空间 So we sort of see that's not taking up too much real estate.
我们现在试一下我制作的拖动动画效果 And we try to test this and draw animation here that I created
你可以看到效果是这样的 So you so see how that felt
当然这里还可以用鼠标点击 and the abilities of click in this area as well.
所以这就是我在手机上测试的东西 So this is something I tested on on the phone and to see how
在手机上用起来就是这个样子 it all really felt, on like a sort of the native device.
然后我们继续进行其他几个测试 And then we move on to some other tests that I did
我们来看这个原型 so we kind of move into this this prototype here.
这个设计是用来看看 So this I was testing to see what would be like to have
这两个主类别固定在上端不动的效果 the two main categories that are sticky at the top of as well.
这个设计是值得在客户界面上试一下的 And it's sort of something worth exploring with the client.
不过我个人认为 这样占用了太多的空间 personally I think takes up way too much real estate.
如果你手机不是Iphone 6以上的话 if you if you actually didn't have an iphone six and
固定的部分在这里 而你能看到的只有这些 your sort of cut up point was here your viewpoint would only be that big
所以我不觉得这是个 I don't think it's actually
非常好的解决方案 但这个想法却是值得一试 not much of an elegant solution, but it's definitely something worth thinking about
这个对我们经营有好处 it supports our business goals.
所以也可以有两个测试方案 sort of to see, potential to a b test and sort of
看看用户的反馈 但是从一个设计者的角度来说 see what people actually we thought about it but from a designer's point of view
我觉得这占用了太多的空间 并且容易形成干扰 I think it takes up too much real estate and kind of creates too much noise. But
但是这个还是值得测试一下的 it's still worth testing nevertheless
最后 and then finally
是这个 立即购买 示例 we have this shop now example that I was thinking about
如果我们向下滚动的同时 So what would happen if we kind of scroll down
上面保留 立即购买 是什么样子 所以当点击这个时 and had a shop now? So when clicked this,
或许可以跳出包含 男士 女士 两个类别的快捷菜单 maybe a nice contextual menu could come up and just having a men and women
那可能就很方便 互动体验也很好 So that could be quite handy and quite a nice interaction.
所以你能看到这发生了变化 so you sort of see, and it switches out.
这个功能是通过Principle软件中的Drivers工具来实现的 And by the way we do that is through something called drivers in principle,
这个我会在后面做每个不同原型设计的时候给大家讲述 but we'll go through it with you on how I created each of these different
并教你如何在你的作品中应用这个功能 sort of prototypes and how you can sort of do the same for your work.
所以我们再回到Photoshop软件 So we'll just jump back into photoshop again.
我们从第一个组合开始 And we'll start with the first Comp
这是最基本的 跟顶端Header图层是一样的 This is the very basic one. Just the same with header
这里使我们的Comp图层 and having a comp here
我们现在要做的就是建立一个新的 So what I will do, so you start a new
建立一个新的Principle文件 So what use this one? We'll start a new principal file
实际上 我还用这个吧 Actually, i'll continue on with this one.
然后创建一个新文件 先全屏 That will do is just create a new file so just go ahead and fullscreen for a second
我现在要建立一个新的文件 在Principle软件里可以直接用键盘A来实现 and what I'll do is just actually creat a new upload and the way to do that in Principle is to hit A
然后 我要做的就是选择整个画布 and what i'll do is just merely select the whole canvas
按下Command+C键 and hit command, shift c
把所有上面的图层都复制下来 并转换成照片 to copy all the layers on top and turn it into an image.
再回到Principle软件中 And we'll go back to principle.
并把它粘贴进去 I'll paste it in,
你能看到照片对于画布来说太大了 you can sort of see that the image is too big for the canvas.
这样是因为... 我现在再调整一下 And the reason for that I just design at right now, so
我们所要做的就是把它缩小50% or we could have to do is just scale it down by 50 percent.
所以 So
这里是375像素 一定要把这个锁定 It's three hundred seventy five pixels. Make sure this thing is locked,
好让长宽同步缩小 so scales with it together.
好吧 现在我们看看 Ok, so now we just see
把x和y坐标调整为0 x and y coordinates to zero, zero.
然后你就可以看到基本的样子了 And then we have our sort of base comp here
能看得出来 But you can sort of see
现在基本上没什么功能 it doesn't really do anything at this point
所以我们要做的就是让它可以被调用 So what we wanna do is make its callable
你可以看到 在Principle软件中这样做的方法是 you can sort of see here, the way to do that in principle is
点击这里 要垂直滚动 所以选择垂直滚动 just click on this area here vertical scroll, so we're gonna have vertical
这样你就能进行滚动操作了 and from there you will have to scroll
操作起来也很简单 It has nice and easy in between as well
所以你能看到 设计的方法很快捷 很简单 So you see how quick and easy it was to sort of create something.
你也可以调整滚动的窗口 And you can actually adjust the scroll window as well
稍微移动一下 so you can sort of move it
然后这一部分就不会滚动了 and see how see how it doesn't scroll to that point anymore.
所以Principle软件 So principle has always
天然具备这些实用的功能 有助于简化设计 nifty, sort of inbuilt functionally to help streamline things.
接下来我们就要回到这里 So what we do from here is to actually go in and go back here
我现在要做的 选中这块顶端的区域 and what I'll do now, it's just actually just to take this header area,
进行同样的操作 按下Command+C快捷键 and we'll do the same thing again. We'll hit command shift c
然后再回到Principle软件中 I will go back to principle.
在进行一次同样的操作 缩小50% And we'll go through this step again to fifty percent,
375像素 three seventy five,
设置为00 then we go zero, zero
所以你看 我们在很短的时间内 就创建了一个固定的导航栏 So you sort of see in a very short amount of time, we've managed to create a little sticky nav
看到滚动功能也能用 See, sort of see the scroll there working.
但实际上我们要把它变成拖拽效果 这样更适合手机 But actually what we wanna do is actually changed to drags and feels more like mobile
哦 不是拖拽效果 我说错了 Well, not drag, my bad
是静态（static） 然后移动这个 static. we will move this
我们把这个图层命名为 固定导航栏（sticky nav） I so we'll call that sticky nav.
把这个命名为 站点（site） I will call this a sight.
然后把这个图层调整为可滚动（scroll） And we'll make this oscroll
可以看到 当你这样做得时候 You see, what you see is when you do that, you kind of get this,
上面的顶端导航栏也在 he still at the top of the head of their, which is
这就有点问题 我们想办法把它去掉 not the elegant. So we can I want to get rid of that
这只需要... and the way to do that is simply to,
哎呀 我又不小心加了一个滚动窗口 oops, i've added another scroll window back in here.
软件所见即所得的特性 也可以让你及时发现错误 So keep in real time seam. So to see the mistakes as well,
把这个删掉 I just get rid of this.
好了 把这个命名为 滚动 Ok, so call that scroll
好了 All right
现在要做的就是把上面那个白色的部分去掉 so we want to do is to get rid of that white bit on top
方法是插入个矩形选框 the way to do that is insert a rectangle
然后移动矩形选框 and we're just gonna have to move the rectangle
覆盖这块区域 如果你把这个部分隐藏 across this area. So actually behind the, you turn this off and lay
就能看到这一个灰色的矩形区域 this is actually a gray rectangle
我们现在要把这块填充成白色 what we want to do is to make this whites
这样就跟前面图层的白色混在一起了 然后取消隐藏 so it kinda blend in with the back and turn this back on,
哦 一个一个来 oops, one for a time,
所以现在你看之前的图层不见了 so you sorta see now that's gone now,
这样看起来就好多了 which is a much nicer.
好了 Ok
你能看到 我们很快 so you can still see it very quickly
就创造了一个固定显示导航栏的例子 We've been able to create a little sticky nav example
好的 我们接下来要做的就是创建这个下拉菜单 Ok, we want to do next is to be able to create this on this draw
就是这个 this draw here.
实际上 这个我也是在Principle软件里完成的 I'll go through it how... Exactly. I created this in principle.
所以你能看到 我们这里有很多非常便捷的工具 So you can sort of say that there's always got a lot of nifty tools we sort of use and
能帮我们实现很多构想 并可以在你的设备上 realize all sorts of ideas really and to be able to test natively
进行本地化测试 能在手机上测试是很厉害的 on your devices as well, which is huge to be able to test in your phone.
因为在电脑上点击这个 because actually clicking on this marking on this computer is
和在手机上进行测试是不一样的 not the same as before it was tested on mobile
好吧 All right
所以我们现在要做的就是把下拉菜单的内容拿出来 So we want to do now is to grab out draw animations
你可以看到这的comp图层 我们把这个隐藏掉 and you see I have a comp here and so we want to get rid is comp
还有汉堡菜单图层 我要把这一整块都选中 this hamburger layer that I've got, just take this whole area here,
再次复制整个画布 I'll copy the whole canvas again,
再把这些图层显示出来 they will turn there back on.
然后我们再回到Principle界面 And then we'll go back into principle.
不过在这之前我想做的是 And what I actually want to do before that
当然是先粘贴进来 is actually just to paste it of course.
再把它调小 I'm gonna scale it down
设成375像素 three seventy five again,
再改成0 0 and then hit zero. zero
我们还需要把这里的元素移过来 But we also want to do is carry across these elements here.
这样就可以让我们在两个屏幕之间切换 So what this will allow us to do is to be able to do the transition between these two screens
我们要保留这个图层 So we keep this layer, and we wanna
你也可以看到这个固定导航栏 so you sort of see sticky nav there.
我想实现的功能是 如果我点击这个汉堡菜单图标 So what I want to occur is when I click on this little hamburger icon,
能从这样变化到这样 I want to shift this across like this.
Principle软件能让你很容易实现这个功能 So principle actually makes it really easy to do that
我们要做的就是调整成这个样子 all we have to do is to change the state of this,
或者自动根据图层的名字 automatically based on the names of each of these layers,
我们能变换这种状态 we'll automatically shifted across.
所以如果在这里测试的话 So if you just testing here,
我会这样 i'll do is just
为了实现这个功能 我们要使这整个区域能响应鼠标的点击 so just for the purpose of this prototype, we will make this whole bar clickable
你需要点击这里 然后把箭头移到这个图层上 So have you tap here and just moved to this layer?
你现在就知道这是怎么实现的了 So see how that works now, so you sorta see
你能看到这... 我们再反过来同样操作 so you sorta see how it has just do the same thing to reverse it.
你可以看到这有我们不想要的下拉效果 And you sorta see how it has the unwanted flashing
原因就在于我们还需要这个基础图层 The reason for that is we need to have this base layer here, too.
所以我们需要这个菜单图层往前移 So we need to have this menu layer on the previous layer
不然Principle软件不知道要选择哪一个图层 else principal won't know what it's looking for
所以需要这个菜单图层来进行转换 so you need to have this menu layer in order to sort of transition against.
接下来我要把这个透明度降低 And what I wanna do is actually to turn the opacity for this down.
所以在你检查的时候 都会发现一些细节方面的问题 So it's all these little details. So when you actually review it,
它有点像一个柔软的表露 你看你这么快就知道了*********** it kind of does a soft reveal. You you see how so quickly almost can tell,
但就是那一点点圣诞节和低互动************ but it's that little little bit of christmas and low interaction.
就让软件整体平滑度提升了很多 They can really just give it that sort of extra smooth feeling
基本上你只要点一下 菜单就及时响应了 that you sorta kinda put your finger on but it's there
这些改变虽然只是一点点 但产生的感受却很不一样 so it was just ever so slightly feeling which is huge.
好了 就像这样 我们创造了 Ok. So just like that, we've got, we've built in
一个小小的************* this little simple, draw animation.
下面我们要进行的是 We also want to do is just to incorporate.
把这个箭头也放进去 this arrow here as well
我想把这个汉堡菜单变换成这个箭头 So I want to actually, transition the hamburger to this arrow.
在Principle软件里面我们没法进行这种太复杂的操作 And principle would allow us to do anything that's too sort of tricky with it,
除非我们把这个形状弄出来 然后赋予它功能 unless we drew the shape sense of animated it out.
但就这次测试而言 我觉得不值得 But for the purpose of this test, I don't really think it's worth
这么做 所以我要做的就是 doing that. So what I will do is just
把这个最基本的图片放进去 put in a base image sort of test how feel
在我们花大量时间之前 先试一下行不行 before we commit too much time to it.
把尺寸调成55 So we'll do 55
把这个命名为箭头（arrow）图层 call this arrow.
所以你就看到我们多么迅速地实现这些功能了 So you so see how quickly and officially, we've managed to do this.
我要把这个藏起来 so i'm just gonna hide this,
然后我们把它复制到这个图层上 and then on this layer, we're gonna bring it in.
但是你要确保在两个变换的画布上 So you gotta make sure that your name
图层的名字要一致 names are the same on across layer
如果这个叫图层 那个叫箭头 see if this called layer, and that's called arrow
这样就不行 所以我们必须确保 this is not going to work. So we have to make sure that
他们名字相同 they're named the same
52 fifty two.
我要把这个移过来 I'm gonna move this across,
让我们看看是否跟我们预想的一样 so let's see if that's worked as planned.
现在你可以看到箭头了 箭头是可见的了 there you go, you sorta see the arrow, and now that the arrows feels visible,
现在还是不可点击状态 this state is actually not clickable. So just
你需要点击这个 指回去 so you need to tap this, goes back.
好了 There you go
实际上 如果你在手机上测试的话 你会禁不住想点击下面的这个图层 Actually, if you test on mobile, you have this urge to click this layer below here
但这样不会有什么反应 But actually doesn't do anything
实际上我们也想在下面加入一些动作响应 So we actually want to create a state below there as well. So we'll do.
需要做的就是再创建一个新的矩形 is just to creat a new rectangle.
我把这个命名为返回图层（return） And i'm just gonna call this return.
然后我要把 So what i'm gonna do is just
这个调成1%的透明度 你几乎看不见了 turn this to one percent of opacity. You can barely see anymore
把这个变成白色 turn this to white.
那么现在 Ok, so now
如果你点击整个面板 if you click on this whole panel
你就能看到很多可供创建的状态 so you'll see you select any sort of create different states
你可以拖动 按下（touchdown） 内悬停（hover inside） You can drag touchdown hover inside,
嗯 你可以采取一些行动的情绪************ um, a mood of some actions that you can have.
所以现在你可以试一下了 So now that you could do go through this,
点击这个 you click that.
你可以看到我点击了这里 And so you sorta see and I clicked that section.
然后你也可以继续滚动 滚动之后是否也能这样呢 then you so still scroll. And what happens if you go through like this
所以可以看出 ******** so you can sort of see it always keeps its position.
好了 我们使用了Principle软件中的一些工具 So there you go, we've used some of the tools in
来实现了动态的交互操作 principles to sort of realize this are many animation.
现在我们可以做的是 我们可以把这录制下来 And what we all can also do this point is actually to record this,
我们可以把过程录下来发给客户 so we can record this to send to the client.
选择触摸光标（touch cursor） So what i'll do is to touch cursor
你看已经违约了 and you see has defaulted
原因是我打开了photoshop The reason for that is i've got photoshop open some reason
是只奇怪的虫子 IT's a weird bug
原则上的习惯 the habITs in principle
呃 但为了学习时间 我想买一件商店的衣服 但是 Uh, but I want clothes for a shop for the sake of learning time. But
我拒绝了奥斯汀的一句又一句 我真的会关掉 i've austin sentence after decline, I would actually turn off.
啊 实际上 我要再暂停一下 Ah, actually, i'm going to pause it again.
嗯 我就把收尾再做一遍 Um, i'll just close finish up and do it again,
但是 but
如果你有这个问题 I am so if you have this problem
但我什么都不录 所以c but i'm just gonna record nothing. So c
你对癌症有什么看法 what do you touch cancer?
现在是录音 所以我就向下滚动 And now it's recording. So i'll just scroll down
然后向上滚动 and scroll back up
并播放绘图动画以供客户端查看 and play the draw animation for the client to see.
那么当你在下面的时候还能怎么工作呢 So how will still work when you below?
可以 Okay,
然后你可以把它保存为视频 所以坚持原型 and then you can save it as a video. So persists prototypes.
所以这是一个很好的视频发送给客户 让他们看到你真的 So it's a great video to sort of send to a client so they can see that you really
考虑到了现场的细节 considered um, the detailing of the site.
所以它的工作方式和互动方式 And so the way it's gonna work and interact.
如何支持目标 And so how how can support goals
还有一个细节可以帮助你 but also on a detail that will helps actually going to work
是 啊 Yeah.
可以 Okay
所以你看原理让我们可以快速高效地创建原型 So you so see how quickly and efficiently um, principle allows us to sort of create prototypes
所以现在我们要创造一个 最后一段时间 So now we're gonna go through and create one, the last part of time,
就是这个 which is this one.
原则允许我们通过一种叫做驱动程序的方法 And principle allows us to do this through something called drivers
这是一个非常 which is a very
使用 这是不可能的 呃 to use. And this is where it can't really is, uh,
头和肩以上 head and shoulders above
嗯 um,
你能定制多少 how much you can customize.
好吧 那么我们首先要做的是 Ok, so what we'll do to begin with,
他其实不知道该怎么办 he is actually not know what to do.
所以我们喜欢这个原则 So we just like the principle.
我将描述一个和两个新机场 I'll describe a and two new airport.
我要做的就是拿走这些东西 And what i'll do is just take these items,
把他们带过来 just bring them across.
所以我们想要发生的是 So what we want to occur is,
当我们向下滚动时 uh, when we scroll down
为了得到那个 to have the,
嗯 um,
立即购物 所以行动的号召出现了 shop now. So the call to action appear.
所以我们需要做的是 So what we need to do is to
稍微改变一下系统 create change the system a little bit,
返回升级 return upgrade
想做的是带上这个 want to do is actually bring this
趴下了 got down,
然后带进来 and then bring in
关掉这个 turn this off.
嗯 Um,
我们会 and we'll just
杰克回来拿下面的背心 回去 jack has come back down to have the vest below. Go back,
她宣布被撤职 she announce been removed.
我们要做的是 What we wanna do is
只是有 just have
立即购买 shop now along with
纤细的标志 the wispy logo.
它会再次抓住下面最好的 IT's gonna grab the best below again.
我们也会做同样的事 再一次 命令移位c And we're gonna do the same thing. Again. The command shift c
事实上这没什么大不了的 actually won't matter too much for this.
所以现在有一个标志 So now have a logo.
我们有 And we have
现在的商店 the shop now
当它是另一个 state when it is another
在后面倒车 backing behind it.
嗯 Um,
需要点白色的 need something white.
现在你知道为什么了 And now you see why in a minute
下面的空间 space below,
休斯敦大学 uh
包装 packing.
好 啊 所以现在事情没有排好并不重要 Ok. So it doesn't really matter that things aren't lined up at the moment.
我们到底想做什么 哦 哇哦 实际上 What we really want to do? Oh, whoops, actually
复制基线网格 copy the baseline grid,
呵呵 huh?
好吧 我们错了 All right, we we were mistakes.
我们再来一次 Let's do that again.
所以你可以看到事情并不总是发生在她身上 So you can see that things don't always happen her
按计划去 就是 go according to plan, which is
更像我们设计时的真实世界 more like the real world when we're designing
事情会搞砸的 你必须 things gonna fuck up and you have to
继续 continue on.
我们再抄一遍 So let's copy that again.
把它放在上面 Put that to the top.
现在我们又有战争了 所以我们只想移除 And now we've got war after. So we just want to remove
这一行 this line there.
所以它会移动备份 So it's going to move this backing up.
你也知道我想做什么 And you see what i'm trying to do in a bit.
但你必须能够想象并思考这个问题 But you have to be able to visualize and think about this.
从本质上说 我们要做的就是 Essentially, all we want to do is have that
把腿抬高 base leg, and then push this up
后退原则 back principle.
我就贴进去 And i'll just paste in
我们的新框架 the new frame that we had.
我要做的是 And what i'll do is
把它缩小到一半就行了 just scale that down to half.
好 啊 Ok
所以我们要做的就是把这个排成一行 戴上后面的标志 so what we wanna do is just to line this up exactly to wear the logos behind that
所以你会喜欢过去吗 So would you just love the past in this
像个游戏场所 sort of game place?
好吧 太好了 既然我们已经准备好了 我们要做的就是 Okay, great. Now that we have that in place, we wanna do is make this
区域学者碗 所以我们就打电话给他 area scholar bowl. So we hit we'll call that.
是 啊 Yeah,
我们一起哭 一起走 we apple g to cry to follow or group
他们会称之为 and they will call this
检查一下 现在 check. Now,
我们要做的是 what we wanna do is to make this,
嗯 晚点换 um, shift later on.
所以我们要做的是 So what we want to do here is to,
呃 从卷轴开始 uh, to begin that when this scrolls,
你可以在这里看到y方向的滚动 you can so see scroll y direction here,
我们希望有别的事情发生 所以我们要做的是 that we want something else to occur. So what we're gonna do is,
嗯 这个长出来了 um, this grow.
所以到目前为止 我们想要什么 So you see up to this point, what do we want
会发生吗 所以我们现在就要这家店 to occur? So we want this shop now
当它向上滚动到某一点时移动 所以当你搬家的时候 to move as it's scrolling up to a certain point. So when you move
按罪数滚动y scroll y by sin amount,
我们希望有事发生 we want something to happen.
所以我们要做的就是推动它 So what we want to happen is to push this.
所以当一个新的州 So when a new state,
我要把这个移到y位置 i'm gonna move the y position of this.
我们要做的是剪接地铁 What we do is clip subways.
把这个移下来 And so move this down.
我们几乎都在用它了 We're almost using it likes bright.
如果你熟悉芽苗菜 If you're familiar with sprouts,
我们可以创造一个精灵 which is creating a sprite that we can sort of
呃 很多人玩 uh, many play.
然后这里要做的就是移动 And then here that want to do is to sort of move the
y方向 a y direction of
购物 现在 shop. Now,
哦 oh,
所以 so
现在我们必须再次添加基态 now we have to add the base state again,
零 zero.
当一个 我们把它移回乐高的位置 When the one, we just move it back to where the lego is
像那样 like that.
然后 And then
回到标志上 back to the logo.
哎呀 我刚把东西移动错了 是 啊 Oops, I just moved something incorrectly. Yeah,
好吧 我做错了 为什么 okay, so i've done the wrong thing. Why?
还有那个女人 And the woman that
时间 time
会像那样改变 that will shift like that.
蛇o c Snakes o c
呃 当你滚动 uh, when you scroll
丁 d
当地的转变 the local shift with it.
那就这样 你就可以用这个 So there you go. That's how you can sort of use
呃 司机们效果很好 哎呀 uh, drivers to great effect. Oops.
所以驱动控制 呃 如果州发生了 So drives control. Uh, what if states occurred
对其他元素进行动画排序 to sort of animate other elements?
所以这是非常漂亮的工具 所以你就这么用 So it's very nifty tool to have. So that's how you use
啊 原则上有些工具 所以我真的希望你说 ah, some of the tools in principle. So I really hope you said incorporate
啊 有些原型输入的想法会进入你自己的工作流程 ah, some of these proto typing ideas into your own workflow end.
嗯 Um
呃 当着你客户的面 嗯 他们会印象深刻的 uh, put in front of your clients. Um, they'll be highly impressed
有了这些原型 with these prototypes
特别是如果你能带上你正在测试的设备 particularly if you can bring in the actual device that you're testing on
展示你的设计和工作是如何考虑的 and show how considered, uh, your design and your work is.
它肯定会帮助你 And it will for sure help you
嗯 对你的设计决策更有信心 um, sort of be more confident with your design decision making
然后继续这个想法 and sort of following through with the idea and the concept uh
你所拥有的 that you've had
所以我很喜欢这堂课的原理和原型 So i've enjoyed that lesson with principal and prototypes.