数十万互联网从业者的共同关注！

作者：朝聆夕改。作者原创并投稿早读课发布。

微信ID:cunzai437049590

背景介绍

前些天有个香港的邮件营销系统公司的Chester（UX设计师）找到我，他提供他们公司产品的Software Web application（软件的Web式应用，类似GA）的UI视觉图，让我帮他们用Axure完成交互，制作成高保真原型文件，以方面展示以及后期迭代修改。刚开始的时候因为他只拿出了40页左右的发布在Axshare上的视觉稿件，而我也正辞职在家休息，学习也正乏力，所以就欣然接受了这次委任。Chester希望先完成最重要的6个页面，任务完成的时间是两天。于是我在第二天的早上用了4个小时完成了任务并交给了他。

我不知道他是否对我的速度特别有信心，总之接下来他就给我安排了一个艰巨的任务：完成另一份110多页的UI设计稿的高保真原型制作，时间是3天。我一方面觉得压力巨大，另外一方面又想要挑战自己，同时争取这份难得的机会。于是经过慎重分析，我接下了这个Case。

工作经历

1、前期工作

1.1页面逻辑梳理

利用思维导图，以功能点（完成目标）为导图的第一级子集，梳理页面，其实这件事情很困难，如果没有熟悉业务的同事帮助，会消耗相当长的时间，我这里也是很大方面借助了Chester之前的整理。由于整个的视觉文件都是英文的，所以还是花了不少时间去理解。

之后我根据页面布局，将布局类似的页面从新归类到一起，这是为了方便后期多层动态面板的设置及页面间的复制。

1.2得心应手的部件库

使用Axure，自然少不了给力的部件库，强大的部件库可以极大程度上提高我们的效率，增强演示效果。网上也可以搜索到一些还不错的部件库，比如小楼老师的axure7.0部件库。但是别人的部件库未必适合我们的产品风格及需要，所以最好还是要有自己的部件库。我是个懒人，所以我经常做一劳永逸的事情，由于我长期从事电商工作，所以我专门设计了一个电商专用部件库，再加上从其他人的部件库中汲取的复杂交互部件，现在我的部件库中已具备了90余个部件，基本可以应对常规设计的绝大部分情况。

另外，由于部件库是自己制作的，所以非常熟悉，用起来自然得心应手，事半功倍。

2、正式工作

2.1背景设置

这里说的背景设置一方面就是你们所理解的背景设置，另外一方面是指通过设置形状（无边框，填充颜色同背景色或透明）来设置背景。为什么要做这么一件多此一举的事情呢？这是考虑到一些可变部件，比如移动到绝对位置，固定在浏览器等等，另外一方面如果不制作这层背景，那么在制作动态面板时，搞不清楚外部情况，或者文字/图片放在最顶部，绝对是件很别扭的事。

2.2交互规则统一

由于我所设计Software Web application是由UI设计师完成的，所以在交互规则上欠统一，主要是以下几个方面：1、下拉效果2、tab滑动效果3、hover选中4、面板切换推拉方式。这时，我就与Chester商量统一的方式，他给予我极大的信任及自由，这让我不再畏手畏脚，从而放心大胆地选择或从新设计交互方式。

2.3设计风格统一

主要是字体，字号、颜色、形状、圆角等，在此不提。

2.4母版制作

母版，相信大家都经常用的，好处多多，诸如方便修改，复制简单等等。这里我要说说自己的母版制作规则：

1.只做频繁使用的地方

只是为了控制母版的数量，方便后期迭代时的梳理与查找。

2.先难后易

复杂交互往往是由多个简单交互组成，所以在完成了复杂交互后，许多简单交互只需要复制即可，而如果先做简单交互，则在组成复杂交互时可能会受到逻辑顺序和层级关系的影响，反而增加制作难度。

3.先全局后细节

在制作母版时，往往会遇到做完一个母版后，发现之前的母版可以跟这个母版合并，因此先做全局的母版更容易考虑到一些细节性的部件，进而减少操作难度。同时先做全局母版也更利于我对页面布局的把控，能够增加效率与成就感。

4.常用break away

这里即把母版作为一个部件用，因为在设计中不能及时制作相应的部件，所以将常用部件生成母版后，通过break away还原成部件是一个不错的选择。

5.命名很重要

命名真的很重要，如果名字起不好，就很有可能混淆，尤其是与其他人共同完成时，命名尤为重要。

2.5疯狂的中继器

中继器是Axure7.0推出的功能，许多axure的使用者看到中继器的高级函数就望而却步，加上动态面板足够强大，以至于明珠蒙尘。我在高保真的制作中使用了大量的中继器，一个页面中甚至使用超过4个，我甚至想到把绝大多是部件都转化成中继器。个人认为中继器有以下几个好处：

1.灵活性强

2.交互简单

3.复制简单

当然中继器也有诸多不足，动态面板依然是Axure部件中的王者。

2.6多层动态面板

针对页面布局类似的页面，我采用了多层动态面板的做法，以至于最终那110页视觉图被我做成了9张网页，最多的一个页面的主动态面板有8层，演示下来也是相当流畅。在使用多层动态面板时，应注意如下几点：

1.注意面板层级及其他页面的逻辑

因为在制作页面或动态面板时，往往是做好了前面一个再做后面后面，或者复制前面一个为新的页面或模板，而之前页面或面板与之后的对象之间的联系，如链接，按键等的交互是在后期加上去的，这就会出现忘记增加交互的情况。

2.注意层级关系，善用面板隐藏

各个部件间的层级关系许多妥善处理，并且经常使用部件管理中的隐藏部件功能，才不会犯层级错误，显示不完全的低级错误。

3.命名很重要

同母版部分。

2.7其他

1.细节讨论

问题是在执行时发现的，遇到疑惑或者赶紧不合理的地方，记录下来，与业务人员或者设计人员讨论，并提出自己的观点，确保大家都clear，才能保证设计的快速展开。

2.时间管理

拿到任务后，我对任务进行了评估，然后得出自己每天工作9个小时要完成35页左右的结论。但实际上有经验的axure使用者都知道，困难都在前期，后面速度会非常快。

我使用的是番茄计时器，3天里平均每天工作19个番茄时间（25min*19），加上休息时间，大概每天工作9~10个小时，第一天第一个母版我做了5个小时，全天完成22个页面，但在第三天的下午5点钟我就完成了110个页面的任务。

3.进度管理

为了明确知道自己的进度，我使用前期准备的页面逻辑导图，每隔一段时间就在导图上用黑色标注自己已经完成的页面，这样一方面让我对自己的进度有了较好的把控，另一方面也让Chester那边明确我的进度，能够知根知底。

3、收尾工作

3.1任务找茬

利用Axure预览生成的页面，加上之前做的导图，地毯式找茬。主要找以下几个方面的问题：1、交互、设计风格统一2、链接是否正确3、排版问题

3.2完善复杂交互

在制作过程中，为了赶进度，再征得Chester的同意的情况下，我漏掉了极少的诸如记录地址，中继器多种排序等复杂交互，这个时候自然查漏补缺，尽量完善

3.3撰写原型修改记录文档

由于我对原视觉设计图进行了较大的修改，虽然很多部分已经讲给 Chester听了，但撰写这份文档还是很有必要的。按照页面--模块--交互的层级关系，我最终整理了7页的修改记录文档反馈给Chester。

总结

交互设计应当是每个产品经理的基本功，虽然交互工具的使用并不代表交互水平，但善用交互工具无疑能够增强我们的交互功力，使我们的思维逻辑更加缜密，并能了解产品逻辑，甚至研发实现难度。

互联网早读课

每天八点，风雨无阻

专注产品、设计、交互、运营

投稿：mm@zaodula.com

加群密码：职位-地区-昵称

互联网早读课是WeMedia自媒体成员之一，

WeMedia是自媒体第一联盟，覆盖3000万人群