要开始使用 Uizard,首先访问官网并创建一个账户。支持通过电子邮件注册,也可以使用 Google 或 GitHub 账号直接登录。进入工作台后,系统会引导你创建一个新项目。Uizard 提供了三个主要入口:从空白画布开始、使用 AI 文本生成设计,或者直接从截图导入。建议新手先在项目设置中确认编辑模式,Uizard 默认采用响应式布局,可以随时切换为固定宽度。
这是 Uizard 最核心的功能。点击工作区顶部的“生成”按钮,选择“文本到设计”。输入一段描述,例如“一个包含顶部导航栏、左侧边栏和中央内容区的 SaaS 后台仪表盘,带三个统计卡片和一个折线图”。Uizard 会自动生成一个包含多个页面的原型。生成后,你可以点击任意页面进行微调,所有组件都是可编辑的矢量元素,文字、颜色、间距都可以直接修改。注意,描述越具体,结果越贴近需求;可以多次输入不同描述,Uizard 会覆盖原页面或生成新页面。
如果你有现成的 UI 截图、设计稿或手绘草图,可以使用“截图到设计”功能。上传 PNG、JPG 或 PDF 文件,Uizard 会识别其中的界面元素(按钮、输入框、卡片等)并重构为可编辑的图层。处理完成后,左侧图层列表会显示所有识别出的组件,你可以直接调整位置、修改样式,甚至删除多余元素。该功能特别适合快速将竞品或旧项目的界面转化为可迭代的原型。
Uizard 的编辑器采用拖拽式操作。从右侧组件面板中拖入按钮、文本框、图片占位符等常见元素,双击即可修改文字内容。选中一个组件后,底部属性面板会显示样式设置:背景色、边框、圆角、阴影、字体族、字号、字重等。Uizard 内置了 Material Design、Bootstrap 和 iOS 风格的组件库,也支持创建自定义组件并保存为模板。对于多页面项目,你可以在页面管理器中复制、删除或调整页面顺序,组件之间的状态可以通过互动模式关联,实现简单的点击跳转。
Uizard 支持多人同时编辑同一项目。点击右上角的“分享”按钮,生成一个链接并设置权限(查看或编辑)。团队成员点击链接即可在浏览器中直接操作,无需安装软件。所有更改都会实时同步,并且可以在版本历史中回溯。对于需要收集反馈的场景,可以使用标注工具在画布上添加评论,团队成员可直接在评论中回复或解决。
完成设计后,Uizard 提供多种导出方式。你可以将整个项目导出为 PDF、PNG 或 JSON 格式(用于开发交接)。如果使用的是免费版,导出时会有水印或数量限制;付费版支持无限制导出高清资源。另外,Uizard 可以通过插件与 Figma、Sketch 等工具同步,也支持直接复制 CSS 代码片段用于前端开发。在导出前建议检查所有页面的对齐和间距,确保视觉一致性。