UI原型设计（即时设计）快速入门这篇就够了_即时设计使用教程 ...

3. 给画板设计页面

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

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

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

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

4.开始UI设计

4.1修改画板名字

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

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

4.2登录界面的设计

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

4.3首页界面的设计

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

4.4实现画板的交互

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

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

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

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

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

6.预览设置边框

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

7.导出文件

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

8.链接分享UI原型

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

9.即时设计移动端

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

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

目前的软件开发工作，很多时候都要用到Balsamiq Mockups。在设计原型图的时候，我会配合使用图片处理软件（比如Fireworks）来帮助我设计，这样，可各取所长。由于Balsamiq Mockups是基于Adobe Air技术开发的软件，是运行速度较慢，有时候拖动原型图会比较“卡”。另外，由于官方没有出中文版本的Balsamiq Mockups，这也让它在国内的推广受到一些阻力。不过，这些并不能妨碍Balsamiq Mockups成为一款优秀的原型图绘制工具。目前国内许多知名的互联网公司都推荐使用它进行原型设计（据我所知，这些公司包括腾讯、网易、搜狐）。因此，掌握好它，说不定您什么时候就去这些公司工作了。

产品经理小白原型设计 UI 自查表，自查原型规范和原型规范，产品经理小白原型设计 UI 自查表，自查原型规范和原型规范，产品经理小白原型设计 UI 自查表，自查原型规范和原型规范，产品经理小白原型设计 UI 自查表，自查原型规范和原型规范，

UI 设计工具，分为2个派系。其中，最大、最主流的派系，是Sketch、Adobe XD、墨刀这个派系。这个派系的软件，操作方式、思路都非常接近，连常用快捷键都一样，会一个就等于都会了。在一个无限大的画布上，用户可以创建任意数量的页面，创建的内容，可以包装成组件，复制粘贴到别的项目用。比如，adobe xd，就是软件本体不自带任何 UI 套件，而是把 UI 套件的项目文件给你，你打开来，找到喜欢的 UI 组件，复制到自己的项目去就行了。类似于，Photoshop里，可以在不同图片之间复制粘贴。而且，这**个派系，你页面

UI 原型设计是一种旨在创建和验证用户界面设计的方法。在CSCode中， UI 原型设计是指使用软件工具或手绘图，通过模拟用户界面的外观和交互，以便进行评估、测试和验证。在 UI 原型设计过程中，首先需要明确用户界面的需求和目标。通过与用户和利益相关者的讨论和研究，确定界面的功能和交互设计。然后，将这些设计转化为可视化的原型。 CSCode作为一个编程学习平台，其用户界面设计应具有直观性、易用性和美观性。在 UI 原型设计中，需要考虑如何提供友好的编程环境、清晰的界面布局和易于理解的操作流程。通常， UI 原型设计过程中会使用工具如Sketch、Adobe XD或Axure RP等，根据预定的设计规范和标准，制定界面元素的布局和样式。通过创建交互原型，可以模拟用户在CSCode平台中的操作流程，包括登录、浏览课程、查看资料、编写代码和提交作业等。 UI 原型设计的目的是为了在可视化的原型阶段提前发现和解决潜在的问题和缺陷，以便在实际开发中减少调整和修改的成本。通过与用户和利益相关者的反馈和意见交流，并不断迭代和改进 UI 原型，最终可以获得用户满意的界面设计。总结来说，CSCode的 UI 原型设计是为了在编程学习平台中提供良好的用户体验和操作性。通过设计、评估和改进 UI 原型，可以确保CSCode平台的界面设计满足用户的需求，并为用户提供便捷、高效和愉悦的学习环境。