UI原型设计（即时设计）快速入门这篇就够了

我使用的UI原型设计工具是即时设计，所以我选择该工具来讲解

1.登录即时设计后创建一个文件

显示：

2.画板

在画板这栏的右侧你可以选择相应的设备类型，用于适应相应设备的宽高

选择相应的设备后就会自动生成一个画板，或者自己通过左键滑动创建一个画板，我个人比较推荐选择设备生产画板的方式 ，如果你没有看见可以选择设备，可以通过滑动的方式创建一个画板，然后点击右侧的画板，这里可以选择相应的设备，这样它就会将该画板设置为相应设备的宽高了。

创建画板后通过左键移动画板，同时可以在右侧修改画板的属性

 画板就相当于一个页面，切换画板就是切换页面，这个待会会讲如何跳转画板，也就是如何跳转页面的操作

3. 给画板设计页面

在左则的矩形的小三角这里可以选择多种图案用于修饰画板

在左则还可以选择铅笔和钢笔来设计，不过这个比较少用

 左则可以选择文本，用于显示文字

既然我们是快速入门教学，那么上面的工具就足够我们设计出精美的UI界面了，剩下的由大家探索了。

4.开始UI设计

4.1修改画板名字

UI设计当然要给画板设置名字，这样当画板多的时候可以通过搜索的方式快速找到画板。

这里我设置画板的名为登录界面和首页，也同时表示我想要设计这两个页面，首先在登录界面上进行登录后进入首页

 4.2登录界面的设计

左侧显示构成登录界面的元素，因为是教学所以我做的比较简略，帮助大家快速入门

 4.3首页界面的设计

左侧显示构成首页界面的元素

4.4实现画板的交互 

（1）登录画板跳转首页画板

既然已经完成了登录界面和首页界面的画板，实现交互只需要在所需要触发交互效果的地方设置就行，比如我们想通过点击登录按钮跳转首页界面，那么只需要点击登录界面的登录，然后点击右侧的原型添加交互，然后选择触发的类型，行为。我这里就选择最常用的跳转画板为例，只需要给向右指向的箭头中选择所跳转的画板即可，设置好的效果如下图所示。

 （2）首页画板跳转登录画板

既然已经知道了登录画板跳转首页画板，那么首页画板跳转登录画板的方法也是一样的，我们希望点击返回按钮跳转登录界面，设置的效果如下：

5.预览

UI设计完成后，可以点击右上角的预览按钮，测试一下效果有没有预期

6.预览设置边框 

有一个常见的问题，那就是在设计的时候往往会忽略相应机型的边框，我们加上边框后发现登录界面的标题被遮挡住了，那么这时候就要返回修改，这也是适配机型时常常要考虑的问题

 

7.导出文件

导出来的文件可以使用即时设计打开

 8.链接分享UI原型

默认链接为可查看，那么通过该链接只能查看原型界面，无法实现原型的交互效果。所以建议打开可下载的方式，这样别人就可以通过链接查看原型界面，同时体验原型的交互效果

9.即时设计移动端

在这个网址下可以下载移动端安装包，使用手机安装后，可以通过手机的方式登录即时设计查看原型，这也是测试原型效果适配机型的最佳方式

下载 - 即时设计 (js.design)https://js.design/download