
Uizard 是一款基于人工智能开发的UI原型设计工具。Uizard 易于使用的拖放式编辑器及其 AI功能,能轻松的将手绘草图、文字说明和图片转化为高级设计原型和前端代码。

Uizard使用教程
您可以按照以下步骤开始使用 Uizard;
第 1 步:转到uizard并使用您的手机或笔记本电脑登录您的帐户。在这里使用您的手机可以捕捉您按照 Uizard 提供的指南创建的手绘草图。
第 2 步:在 Uizard 上创建一个新的原型。

第 3 步:输入有关您的原型的信息,即名称、设备,并选择您喜欢的 Uizard 风格指南。

可以了,好了!原型项目已创建,现在将手绘草图上传到创建的线框文件夹中,其中包括原型名称、描述、作者和贡献者。

第四步:上传用手机拍摄的手绘草图。


第 5 步:在 Uizard 中使用原型引擎可以进行原型制作,该引擎允许您制作线框原型,以便您能够快速展示您的想法并尽早进行迭代。

第 6 步:编辑选项卡——在 Uizard 中编辑元素仍然仅限于用另一个元素替换元素。正如您在下面看到的那样,UI 与您在上面创建的上一个 UI 有所不同。

第 7 步:评论 – 评论功能使您项目中的贡献者能够评论您在 Uizard 中创建的原型的任何部分,这与 Google 文档或 Figma 一样无缝。

第 8 步:播放原型以预览线框的用户流。
第 9 步:导出原型——您可以生成 Sketch 文件,这些文件可以从您的线框图中自动导入您最喜欢的设计工具和前端代码,这些线框图可以 HTML 和 CSS、React 或 Android 的形式提供。

第10步:分享原型-点击Uizard左上角的分享按钮,会弹出一个让你启用分享链接的窗口,这样你就可以分享给你的同事或家人了。

您可以使用可共享链接查看原型的链接。

相关导航


illostrationAI
智绘设计

Dora AI

Appicons AI

Khroma

阿里云智能logo设计
