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

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

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

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

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

一. xiaopiu工具介绍

xiaopiu工作台整体架构

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

每个组件的属性

添加的每一个组件具有自己的属性和动作，多个组件可以复合成一个组件（父组件），父组件移动则所有子组件同步移动。每个组件的大小，格式，颜色，字体等内容全部可以编辑设计。

每个组件的动作

每个组件不仅具有自己的属性，还能添加事件和动作

如下：用户点击奶牛端注册按钮，触发事件（点击—>注册）,跳转到注册页面。添加完事件后，在预览状态下，你点击奶牛端注册，页面自动跳转。

接下来，我们以一些详细的页面来介绍怎么使用这个工具做设计

二 .具体原型图设计过程

新建一个工作台，点击新建页面，这个时候就出现了如下空白页面。
这样看起来页面好像很单调，有点丑。没关系，在左边的组件库里选择基础组件矩形，添加两个矩形组件，改变他们的大小，设计他们的颜色，这样就形成了经典网页三段式，看起来不那么丑。

改变他们的颜色和大小（这里的大小可以查看到具体数据，前端按照设计稿去做设计的时候，也容易把握各个组件的大小和相对位置）：
再添加一个矩形，用来做整个登陆框的背景，添加两句文字（闲钱宝|，专注中大学生赚点钱），同样改变他们的颜色和大小，调整到你觉得看着顺眼的状态
接下来我们希望传达出我们产品的理念（定位中大学生，利用空余时间，在线获取任务，多重身份登陆，一个活跃的社区），同时也希望我们这个页面看起来更好看，我们选择添加五个图标和五句话来传达理念。由上图可知，xiaopiu有800多个基础图标，选择我们合适的图标，改变颜色，大小，调整位置，加上我们的五个理念，形成设计。
前面的内容可能只是为了让你看的顺眼，可能是为了简化UI设计师的工作，并不涉及交互逻辑，这个页面最重要的是注册效果，现在我们添加两个按钮（一个奶牛端注册按钮，一个学生端注册按钮）改变他们的颜色，大小，位置，形状。
按钮有了，但页面还是有点空，看着就不舒服，再添加一个大图标，添加一段文字，并且利用一道虚线将左右两端隔开。
现在一个页面有了，按钮有了，但是好像还没有添加事件，我们考虑这两个按钮可能触发的事件，理论上点击注册，那就应该跳转到注册页面。好，那我们快速设计一个注册页面（注册页以输入框居多，毕竟很多信息要采集，标*号表示必填，性别做成单选框，年级做成下拉框选择）这样前端也能很清楚自己要做什么效果，我就不用在需求分析中用大量的文字去说明。

8. 添加事件
我们点击首页的注册按钮，理论上应该跳转到注册页面，我们为那两个按钮添加事件。
点击组件，在工作台右侧添加事件，选择事件触发类型，添加事件行为（这里触发类型是点击，事件行为是页面跳转，跳转到注册页面，立即跳转，不需要等待时延）

9. 登录页实现

好了，到目前为止，两个页面的原型图以及他们之间的交互逻辑就已经出来了，注册完成那么应该有登录页面，在注册页面时应该存在按钮可以点击返回到登录页面，在此基础上大致步骤设计了登录页（登陆通过手机号和密码登录，同时存在验证码，登录页应该存在按钮可以返回注册页）

10. 添加炫酷导航栏，制作成新的组件，实现多页面组件复用。
登陆完成之后的多个页面其实应该都有导航栏，类似这种的东西我们应该做成组件，实现复用，那么一个组件怎么制作，接下来慢慢实现，先贴一个最终制作效果：（导航栏能够帮助实现查看我的资料，能够登陆，注销，能够查看任务，发布任务，账户充值，账户提现）

首先：添加一个矩形，添加一句文字（闲钱宝|专注中大学生赚点钱），添加三个竖线分隔符，将整个设计置于页面顶端，调整大小。

接着：添加注销按钮（事件：点击—>返回登陆页面），添加发布任务按钮（事件：点击—>返回发布任务页面），添加查看兼职任务按钮（事件：点击—>返回查看任务页面）

再接着：添加一个下拉组件框，拥有三个选项，设置他们的事件（鼠标移动到下拉组件框—>下拉框展开）（点击账户充值—>跳转账户充值页面）（点击账户提现—>跳转提现页面）（点击编辑资料—>跳转编辑资料页面）

最后:按住shift键，点击所有矩形框或者文字框等基础组件，选择所有，点击工作台右侧的合并组件按钮，一键合并，起个名字，下次直接复用，一个导航栏组件就完成。

其他页面的设计与交互逻辑也大概按照这样设计，UI架构师拿到xiaopiu的原型稿，继续美化，就可以交给前端实现页面，后端可以根据原型图设计交互数据，初步设计API，各项工作基本可以展开。

心得与体会：选择xiaopiu来做原型图和交互设计，不可否认有不少优点，但其实也有一些缺点，在一定程度上限制了UI设计师的设计灵感，毕竟原型图对设计师有很大的影响，尤其是xiaopiu这种半原型图半UI图的设计。其次也限制了前端的发挥空间，他们发挥的幅度不是很大。总体的来说，有利有弊，适合就好。我们组由于自身的原因还是比较适合选用xiaopiu。

最后，附带一个交互逻辑的视屏展示链接：视频链接