利用xiaopiu做产品原型输出与交互设计

摘要：此项目博客为潘老师系统分析与设计项目相关博客，主要是讲述如何利用xiapiu进行原型图输出与交互逻辑设计，内附大量图片，文章末尾有整体视屏效果

首先，利用xiaopiu来做原型图输出具有以下优点：

1. 丰富的素材库，上万数量的基础主件与高级组件，拿来就能用，简单方便快捷。
2. 大量的模板，兼具高保真与低保真，满足产品原型设计的一切需求
3. 网页在线编辑，无需下载相关系列软件，大大降低了对软件工具的依赖
4. 允许多人协作完成，允许邀请他人共同编辑，整个小组都能直观看到项目原型图设计与交互逻辑
5. 组件具有多重属性与动作，点击组件能够添加事件，交互逻辑清晰易懂

我们组的情况：我在小组里兼任产品经理与后端架构工程师，我自己本人的风格属于能让大家看到直接的产品效果，我就一定选择让大家看到效果，而不是用大量的文字去描述。所以我在选择原型图设计工具时，特意考虑了逻辑交互的效果方面。另外，我们组的UI设计师也是希望能够不要使用需要下载的软件，这样做出来一个效果图可能需要小组所有成员都下载软件才能查看，所以我最终选定了网页模式的xiaopiu，UI设计师同样能够在xiaopiu上继续美化，实现UI设计稿。

一. xiaopiu工具介绍

1. xiaopiu工作台整体架构

这是一个我们项目的工作台，中间是我们设计的一个原型注册页面（UI设计师在此原型上继续美化），左边是各种组件，比如网页基础组件：矩形，方框，文字框，图标等。网页高级组件：导航栏，开关，按钮，多选框，单选框，下拉框等，双击组件就能添加在页面，移动到合适位置，添加一些编辑即可实现我们自己的原型设计。右边是整个项目的结构，