xiaopiu即时原型官网入口 – 在线原型设计工具功能与上手流程

结论先行：官网是 xiaopiu.com，浏览器打开就能用

xiaopiu 的官方网站是 xiaopiu.com，中文名叫「即时原型」，2017 年 3 月 1 日正式上线，是一款跑在浏览器里的产品原型设计与团队实时协作工具。它不需要下载安装包，注册账号后新建项目就能开始拖拽页面，项目保存在云端，换一台电脑登录同一个账号，工程还在原处。这决定了它的使用门槛：一台能上网的电脑加一个浏览器，剩下的都是操作问题，不是环境问题。

需要先说清一件事，因为搜「xiaopiu」的人经常在这里走岔路。xiaopiu 是原型工具，不是 UI 设计工具的替代品。它擅长的是把「页面长什么样、点一下跳到哪里、流程怎么走」讲明白，产出物是给人看、给人点的原型和流程，而不是可以直接交付开发的视觉稿。同一年代做原型的工具不少，但能在浏览器里做到组件级复用、多人同时编辑、动效精确到帧的，当年并不多，这也是它上线后口碑起得比较快的原因。

入口对照表

四个入口里，真正每天要用的只有第一个。模板库和资源库在编辑器内部，不需要单独记忆网址；更新日志看着不起眼，实际很有用——某个功能是哪一年上的、当时叫什么名字，查这里比翻设计论坛的转述靠谱。客户端这一项要提醒一句：这类云端工具的产品重心常年偏向网页版，客户端的存续状态会变，真需要离线演示时用编辑器导出的离线演示包更稳妥，不必执着于装一个客户端。

从新建到分享：五步走完一个原型

第一步是注册与新建。打开首页点注册，用邮箱或手机号建立账号，进入工作台后选择新建项目。新建时要先定设备类型：手机端还是 Web 端。这一步不能随便选，因为画布尺寸、组件库默认配置、预览时的外框都跟着走。定错了也不是没法救，编辑器支持多分辨率编辑与预览，可以按常用机型切换，也可以自定义尺寸，横屏页面另有开关。

第二步是搭骨架。左侧资源库里有基础组件，文本、矩形、圆角矩形、图片、图标、输入框、热区、水平线、垂直线、表格、地图、音频、视频、网页嵌入都在其中，图标库按中文关键词就能搜到。做原型最省时间的做法不是一个个画，而是先用矩形和文本把页面分区铺出来，把信息层级定下来，再回头换真组件。上来就抠细节的人，往往做到第三屏就发现导航结构不对，返工量比一开始多得多。

第三步是设置交互。这是 xiaopiu 区别于「画图工具」的核心。它把交互抽象成一个「状态」的概念：一个页面或一个元件可以有多个状态，点一下从状态一切到状态二，中间的过程就是动效。好处是不用写逻辑判断，选中元件、加状态、连触发条件，三步就能做出点击跳转、弹层、轮播、下拉刷新这类常见效果。官方把这套机制描述为「一个概念做出丰富交互」，实际用下来确实如此，新手最需要克服的不是操作，而是先想清楚「这个页面有几种状态」。

第四步是协作。项目支持多人实时编辑，同一个页面两个人同时改也不会互相覆盖，传输是毫秒级的；组件库也可以多人共同管理，一个人维护基础组件，其他人直接引用。对产品经理和交互设计师搭配干活的团队来说，这一步省掉的是「你改完发我、我改完发你」的文件往返。

第五步是分享与导出。编辑完成后一键生成分享链接，链接指向的永远是最新版本，改了不用重新发；需要给别人演示又怕断网，可以导出离线演示包；需要放进文档或汇报材料，可以按多种分辨率导出页面图片，一次下载全部页面。项目还支持多版本管理，几个版本互相独立，随时切回旧版改，这对「方案 A 方案 B 都要留」的场景很实用。

三个容易被忽略的能力

第一个是引用组件。它相当于把一堆元件打包成一个可复用的整体，改主组件，所有引用处同步更新，但每处引用里的文字和图片又可以单独替换。做过十屏以上原型的人都懂，导航栏、底部标签栏、卡片样式这三样东西一旦要改，没有引用组件就是灾难。

第二个是云端保存的两种形态。正常联网时是毫秒级实时保存，不用按保存键；断网时会自动离线保存，联网后自动上传。这一条听起来像宣传语，但对在高铁、咖啡厅、会议室弱网环境下改稿的人，是能不能保住两小时工作的差别。

第三个是跨项目复制页面。做系列产品时，登录页、设置页、空状态页往往高度相似，跨项目复制过来再改，比从零搭一遍快得多，也避免了同一个交互在不同项目里做出两套逻辑。

它和即时设计是什么关系，别把两个域名弄混

这是搜 xiaopiu 时第二高频的困惑。2020 年即时设计上线，定位是 xiaopiu 的升级版：保留了原型设计与实时协作的底子，把资源规模从数百个模板扩到万级，把能力往 UI 设计、设计交付、插件生态方向铺开。两者不是替代与被替代的简单关系，而是分工不同。

只做需求原型、页面流程、产品文档，团队里没有专职 UI，xiaopiu 够用，而且学习曲线更平缓，新人半天能出第一版。要做高保真界面、要出设计规范、要和前端对接切图标注，那就该用即时设计。判断标准很简单：你的产出物是「给人点着看流程」，还是「给人照着做界面」。前者选 xiaopiu，后者选即时设计。

域名也要分清楚。xiaopiu 的官网是 xiaopiu.com，即时设计的官网是 js.design，两个完全不同的域名，登录账号体系也不通用。有人把 js.design 上的文章当成 xiaopiu 官方说明来读，读到的其实是升级版的功能介绍，对照着操作会发现菜单对不上。

常见问题

1. 官网打不开或者一直转圈怎么办？

先确认网络本身正常，再换一个浏览器试。这类云端工具对浏览器内核版本有要求，太旧的 IE 内核浏览器会白屏。清一次缓存和 Cookie 也值得试，登录态异常常表现成一直加载。都不行时看官方公告，云端服务偶有维护窗口。要特别提醒的是，不要因为打不开就去搜「xiaopiu 客户端下载」从第三方站装东西，那是最容易中招的路径。

2. 不注册能不能用？

可以进编辑器试用，但页面会提示当前为体验版本，登录或免费注册后才能保存。也就是说，不注册的状态适合看一眼界面长什么样，不适合真做项目——做半小时的东西保存不下来，等于白做。注册本身不复杂，邮箱或手机号即可。

3. 收费吗，免费版能用到什么程度？

提供免费可用的范围，超出后按官网价格页的套餐走。具体额度、项目数量上限、协作人数限制这些会调整，本文不写死数字，用之前去官网价格页确认一遍最稳。对个人和小团队做原型来说，免费范围通常够跑通几个项目。

4. 手机上能做原型吗？

编辑以桌面浏览器为主，画布、组件面板、属性面板三栏布局在手机上没法正常操作。手机端的价值在预览和演示：分享出去的链接在手机上打开，能真实感受点击区域大小、滚动效果、机型适配。所以合理的分工是电脑上做、手机上验。

5. 遇到操作问题去哪找答案？

优先看官网的帮助中心和版本回顾页，功能名称、上线时间、入口位置都以官方为准。其次是编辑器内的视频教程，从入门到进阶都有覆盖，比文字说明更容易对上操作。设计社区里的教程可以参考，但要注意版本差异，两年前的截图和现在的界面可能已经不是一回事。

避坑：下载站、山寨域名与模板版权

第一，域名逐字符核对。正站是 xiaopiu.com，出现 xiaopiu.cn、xiaopiu.net、xiaopiu-vip 这类拼接或替换后缀的，一律不是官方。云端工具的官方入口只有网址一种形态，任何要求先装一个「专用客户端」才能打开编辑器的页面都要警惕。

第二，绕开「破解版」「绿色版」。这类云端 SaaS 本身没有本地授权文件，所谓破解版要么是旧版客户端二次打包，要么干脆是套壳的引流程序。装了之后轻则弹广告，重则账号密码被截。

第三，模板与素材的版权边界。平台上共享的项目模板、组件、图标，共享不等于可以商用。把别人的整套模板稍改颜色就作为商业交付物提交，风险在自己身上。真要商用，优先用自己搭的组件，或者确认素材的授权范围。

第四，协作链接的权限。分享链接默认是「有链接就能看」，需要保密的项目在分享设置里把权限收紧，别把内部需求原型直接丢进公开群。项目里如果填了真实用户数据、内部报价，更要留意这一点。