江苏龙网

  1. 首页 > 人文 > >

|如何快速高效创建产品原型组件之APP ToolBar组件


编辑导语：本文作者将通过ToolBar这个在移动端产品较为常见的组件 ， 教大家如何快速高效的创建一个规范 ， 且便于维护管理的可复用组件 。
|如何快速高效创建产品原型组件之APP ToolBar组件
本文插图

下图对组件的标注 ， 只是为了方便讲解这个案例 ， 实际的制作并不需要按照该标准进行 。
为了保持页面的一致性 ， 这里选择用黑色的矩形代替系统的图片组件；在不强调绘制高保真原型时 ， 使用矩形代替图片会让原型的制作更加的灵活 。
【|如何快速高效创建产品原型组件之APP ToolBar组件】
|如何快速高效创建产品原型组件之APP ToolBar组件
本文插图

一、ToolBar组件标准化制作流程
如果按照常规的方式去绘制一个具有一定规范的原型（如上图所示） ， 是一件非常困难的事情 ， 即便你是一个使用Axure非常熟练的人 。
由于组件与组件之间的约束关系会随着组件数量的增多而变得复杂 ， 从而使得组件的拖拽 ， 或是对齐、居中等操作变的繁琐；虽然我们可以通过组件的组合来减少这种约束关系 ， 但并不能从根本上解决效率底下的问题 ， 我想这应该是很多产品经理不愿去设计规范产品原型的原因之一 。
那么我们如果按照下面这种方法进行组件的设计会怎样？
|如何快速高效创建产品原型组件之APP ToolBar组件
本文插图

从上面的操作可以看出 ， 我们减少了按钮与按钮之间、按钮与ToolBar背景占位矩形之间的约束 ， 从而让组件的排版变得简单；通过对按钮单元组件的复制、粘贴、拖拽 ， 配合智能参考线 ， 组件吸附等功能的辅助 ， 便能够快速的创建一个具有规范的静态ToolBar组件 。
在产品原型的设计当中 ， 组件样式的设置相对其位置的摆放而言 ， 比较简单而且可控 ， 合理的使用会极大的提升你的绘制效率 。
Axure支持四则运算 ， 所以在一些涉及到数字的地方 ， 我们可以通过直接输入计算逻辑来达到我们的目的；比如设置【文本标签】宽度时 ， 我们直接入数375/4 ， 也就是ToolBar的宽度/按钮个数 ， 即可得到文本的宽度值 。
对于组件相对位置的调整 ， 除了常规的做法以外 ， 我们还可以通过下面的步骤进行：
对于ToolBar这个组件来讲 ， 我们知道它有两种状态：选中和未选中 。
常规方式下我们会对图标和文本的色值进行分别设置 ， 但是当组件的数量变多时 ， 这种调整就会变得比较繁琐 ， 尤其是我们对组件进行组合操作之后；可如果我们通过调整组件的透明度发现一样能够达到目的 ， 而且这个过程相对简单 ， 更容易操作 。
|如何快速高效创建产品原型组件之APP ToolBar组件
本文插图

到这里我们不难看出 ， 绘制一个具有一定规范的原型（组件） ， 其实并不复杂 ， 但前提是我们找对了方法 。
接下来 ， 我们通过产品迭代的思路 ， 对ToolBar这个组件进行一定的优化 ， 使其具有复用的可能；而这才是提升原型绘制效率的根本 ， 我们要善于从Axure的学习、使用中创建属于自己的组件库 。
二、ToolBar组件的优化
ToolBar组件中的按钮个数决定了页面调用的次数 ， 当组件位于不同的页面中时 ， 如果组件发生了变化 ， 那么修改起来会变得非常麻烦 ， 反倒不如重新设计；所以我们需要对ToolBar组件进行调整 ， 让跨页面修改变得简单 。
母版能够很好的解决跨页面修改的问题 ， 但也会带来一些新的问题：母版中组件的结构及样式一旦设定 ， 所调用的页面会与其保持一致 ， 采用这种方式会导致ToolBar的选中未选中的样式无法设置 。
通过样式交互以及添加对应的交互事件 ， 能够帮助我们解决这个问题 。
虽然这样设置能够解决ToolBar按钮选中未选中样式的问题 ， 而且制作的过程也并不是很复杂 ， 但使用起来还是比较麻烦 ， 因为我们需要在调用ToolBar母版的每个页面都做按钮的选中操作；此外 ， 为了能够很准确的选中目标按钮 ， 可能还需要对按钮进行命名 ， 所以我们还需要进一步的完善该方案 。
在原型页面的命名中 ， 一般来讲会与ToolBar上的按钮文字保持一致 ， 所以我们可以通过这个特点设定判断的条件：当按钮的文本与页面名称一致时 ， 选中对应的【文本按钮】和【图标】（事件添加在文本按钮上） ， 当该组件加载后会根据判断结果进行按钮的选中操作 ， 并不需要人为再手动操作 ， 是不是很方便 。
|如何快速高效创建产品原型组件之APP ToolBar组件
本文插图

这样 ， 我们设计的ToolBar组件在跨页面修改方面变的更加容易 ， 同时使用也变得简单了起来 。
三、ToolBar组件的进一步优化
通过母版 ， 我们解决了ToolBar跨页面修改的问题 ， 但是对于母版内组件的修改却并没有改善 ， 比如我们要将4个按钮修改成3个或5个；虽然说重新做一个也不难 ， 但如果能在现有的基础上进行修改 ， 那岂不是更为方便 。
从结构上看 ， ToolBar组件是一个标准按钮单元 * N的结构 ， 对于这类结构使用中继器则是最好的选择 ， 将设计好的标准按钮单元替换中继器中默认的组件 ， 并按下面的流程操作就可以创建出标准的ToolBar组件 。
|如何快速高效创建产品原型组件之APP ToolBar组件
本文插图

当我们需要将4个按钮的ToolBar调整成为5个时 ， 只需要对中继器里的组件进行调整 ， 同时修改对应的数据 ， 便可很快的实现ToolBar组件整体的调整 。
|如何快速高效创建产品原型组件之APP ToolBar组件
本文插图

通过本文 ， 我们完成了一个规范原型组件从0到1的设计 ， 从1到N的优化 ， 最终的产出是一个可复用 ， 便于修改的标准化的ToolBar组件 。
写在结尾的话：如果在学习软件、绘制原型的过程中 ， 把产出的作品当作是一个产品去对待 ， 那么收获的产品思维是不是会更加的实用？
作者：GrowingPM；公众号：GrowingPM
本文由 @曹蜀黍 原创发布于人人都是产品经理 ， 未经许可 ， 禁止转载
题图来自Unsplash ， 基于CC0协议 。


    推荐阅读


    上一篇：|Zepp全球发布Zepp Z旗舰智能腕表

    下一篇：带你看看曹云金的豪宅：头次见家里有地下室，装修豪华又霸气