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

0 评论 2744 浏览 2 收藏 9 分钟

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

下图对组件的标注,只是为了方便讲解这个案例,实际的制作并不需要按照该标准进行。

为了保持页面的一致性,这里选择用黑色的矩形代替系统的图片组件;在不强调绘制高保真原型时,使用矩形代替图片会让原型的制作更加的灵活。

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

一、ToolBar组件标准化制作流程

如果按照常规的方式去绘制一个具有一定规范的原型(如上图所示),是一件非常困难的事情,即便你是一个使用Axure非常熟练的人。

由于组件与组件之间的约束关系会随着组件数量的增多而变得复杂,从而使得组件的拖拽,或是对齐、居中等操作变的繁琐;虽然我们可以通过组件的组合来减少这种约束关系,但并不能从根本上解决效率底下的问题,我想这应该是很多产品经理不愿去设计规范产品原型的原因之一。

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

那么我们如果按照下面这种方法进行组件的设计会怎样?

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

从上面的操作可以看出,我们减少了按钮与按钮之间、按钮与ToolBar背景占位矩形之间的约束,从而让组件的排版变得简单;通过对按钮单元组件的复制、粘贴、拖拽,配合智能参考线,组件吸附等功能的辅助,便能够快速的创建一个具有规范的静态ToolBar组件。

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

在产品原型的设计当中,组件样式的设置相对其位置的摆放而言,比较简单而且可控,合理的使用会极大的提升你的绘制效率。

Axure支持四则运算,所以在一些涉及到数字的地方,我们可以通过直接输入计算逻辑来达到我们的目的;比如设置【文本标签】宽度时,我们直接入数375/4,也就是ToolBar的宽度/按钮个数,即可得到文本的宽度值。

对于组件相对位置的调整,除了常规的做法以外,我们还可以通过下面的步骤进行:

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

对于ToolBar这个组件来讲,我们知道它有两种状态:选中和未选中。

常规方式下我们会对图标和文本的色值进行分别设置,但是当组件的数量变多时,这种调整就会变得比较繁琐,尤其是我们对组件进行组合操作之后;可如果我们通过调整组件的透明度发现一样能够达到目的,而且这个过程相对简单,更容易操作。

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

到这里我们不难看出,绘制一个具有一定规范的原型(组件),其实并不复杂,但前提是我们找对了方法。

接下来,我们通过产品迭代的思路,对ToolBar这个组件进行一定的优化,使其具有复用的可能;而这才是提升原型绘制效率的根本,我们要善于从Axure的学习、使用中创建属于自己的组件库。

二、ToolBar组件的优化

ToolBar组件中的按钮个数决定了页面调用的次数,当组件位于不同的页面中时,如果组件发生了变化,那么修改起来会变得非常麻烦,反倒不如重新设计;所以我们需要对ToolBar组件进行调整,让跨页面修改变得简单。

母版能够很好的解决跨页面修改的问题,但也会带来一些新的问题:母版中组件的结构及样式一旦设定,所调用的页面会与其保持一致,采用这种方式会导致ToolBar的选中未选中的样式无法设置。

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

通过样式交互以及添加对应的交互事件,能够帮助我们解决这个问题。

如何快速高效创建产品原型组件之APP 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协议。

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!