背景介绍 前些天有个香港的邮件营销系统公司的Chester(UX设计师)找到我,他提供他们公司产品的Software Web application(软件的Web式应用,类似GA)的UI视觉图,让我帮他们用Axure完成交互,制作成高保真原型文件,以方面展示以及后期迭代修改。 刚开始的时候因为他只拿出了40页左右的发布在Axshare上的视觉稿件,而我也正辞职在家休息,学习也正乏力,所以就欣然接受了这次委任。Chester希望先完成最重要的6个页面,任务完成的时间是两天。于是我在第二天的早上用了4个小时完成了任务并交给了他。 我不知道他是否对我的速度特别有信心,总之接下来他就给我安排了一个艰巨的任务:完成另一份110多页的UI设计稿的高保真原型制作,时间是3天。我一方面觉得压力巨大,另外一方面又想要挑战自己,同时争取这份难得的机会。于是经过慎重分析,我接下了这个Case。 工作经历 前期工作 页面逻辑梳理 利用思维导图,以功能点(完成目标)为导图的第一级子集,梳理页面,其实这件事情很困难,如果没有熟悉业务的同事帮助,会消耗相当长的时间,我这里也是很大方面借助了Chester之前的整理。由于整个的视觉文件都是英文的,所以还是花了不少时间去理解。 之后我根据页面布局,将布局类似的页面从新归类到一起,这是为了方便后期多层动态面板的设置及页面间的复制。 得心应手的部件库 使用Axure,自然少不了给力的部件库,强大的部件库可以极大程度上提高我们的效率,增强演示效果。网上也可以搜索到一些还不错的部件库。但是别人的部件库未必适合我们的产品风格及需要,所以最好还是要有自己的部件库。我是个懒人,所以我经常做一劳永逸的事情,由于我长期从事电商工作,所以我专门设计了一个电商专用部件库,再加上从其他人的部件库中汲取的复杂交互部件,现在我的部件库中已具备了90余个部件,基本可以应对常规设计的绝大部分情况。 另外,由于部件库是自己制作的,所以非常熟悉,用起来自然得心应手,事半功倍。 正式工作 背景设置 这里说的背景设置一方面就是你们所理解的背景设置,另外一方面是指通过设置形状(无边框,填充颜色同背景色或透明)来设置背景。 为什么要做这么一件多此一举的事情呢?这是考虑到一些可变部件,比如移动到绝对位置,固定在浏览器等等,另外一方面如果不制作这层背景,那么在制作动态面板时,搞不清楚外部情况,或者文字/图片放在最顶部,绝对是件很别扭的事。 交互规则统一 由于我所设计Software Web application是由UI设计师完成的,所以在交互规则上欠统一,主要是以下几个方面:1、下拉效果2、tab滑动效果3、hover选中4、面板切换推拉方式。这时,我就与Chester商量统一的方式,他给予我极大的信任及自由,这让我不再畏手畏脚,从而放心大胆地选择或从新设计交互方式。 设计风格统一 主要是字体,字号、颜色、形状、圆角等,在此不提。 母版制作 母版,相信大家都经常用的,好处多多,诸如方便修改,复制简单等等。这里我要说说自己的母版制作规则: 1.只做频繁使用的地方 只是为了控制母版的数量,方便后期迭代时的梳理与查找。 2.先难后易 复杂交互往往是由多个简单交互组成,所以在完成了复杂交互后,许多简单交互只需要复制即可,而如果先做简单交互,则在组成复杂交互时可能会受到逻辑顺序和层级关系的影响,反而增加制作难度。 3.先全局后细节 在制作母版时,往往会遇到做完一个母版后,发现之前的母版可以跟这个母版合并,因此先做全局的母版更容易考虑到一些细节性的部件,进而减少操作难度。同时先做全局母版也更利于我对页面布局的把控,能够增加效率与成就感。 4.常用break away 这里即把母版作为一个部件用,因为在设计中不能及时制作相应的部件,所以将常用部件生成母版后,通过break away还原成部件是一个不错的选择。 5.命名很重要 命名真的很重要,如果名字起不好,就很有可能混淆,尤其是与其他人共同完成时,命名尤为重要。 2.5疯狂的中继器 中继器是Axure7.0推出的功能,许多axure的使用者看到中继器的高级函数就望而却步,加上动态面板足够强大,以至于明珠蒙尘。我在高保真的制作中使用了大量的中继器,一个页面中甚至使用超过4个,我甚至想到把绝大多是部件都转化成中继器。个人认为中继器有以下几个好处: 1.灵活性强 2.交互简单 3.复制简单 当然中继器也有诸多不足,动态面板依然是Axure部件中的王者。 多层动态面板 针对页面布局类似的页面,我采用了多层动态面板的做法,以至于最终那110页视觉图被我做成了9张网页,最多的一个页面的主动态面板有8层,演示下来也是相当流畅。在使用多层动态面板时,应注意如下几点: 1.注意面板层级及其他页面的逻辑 因为在制作页面或动态面板时,往往是做好了前面一个再做后面后面,或者复制前面一个为新的页面或模板,而之前页面或面板与之后的对象之间的联系,如链接,按键等的交互是在后期加上去的,这就会出现忘记增加交互的情况。 2.注意层级关系,善用面板隐藏 各个部件间的层级关系许多妥善处理,并且经常使用部件管理中的隐藏部件功能,才不会犯层级错误,显示不完全的低级错误。 3.命名很重要 同母版部分。 其他 1.细节讨论 问题是在执行时发现的,遇到疑惑或者赶紧不合理的地方,记录下来,与业务人员或者设计人员讨论,并提出自己的观点,确保大家都clear,才能保证设计的快速展开。 2.时间管理 拿到任务后,我对任务进行了评估,然后得出自己每天工作9个小时要完成35页左右的结论。但实际上有经验的axure使用者都知道,困难都在前期,后面速度会非常快。 我使用的是番茄计时器,3天里平均每天工作19个番茄时间(25min*19),加上休息时间,大概每天工作9~10个小时,第一天第一个母版我做了5个小时,全天完成22个页面,但在第三天的下午5点钟我就完成了110个页面的任务。 3.进度管理 为了明确知道自己的进度,我使用前期准备的页面逻辑导图,每隔一段时间就在导图上用黑色标注自己已经完成的页面,这样一方面让我对自己的进度有了较好的把控,另一方面也让Chester那边明确我的进度,能够知根知底。 收尾工作 任务找茬 利用Axure预览生成的页面,加上之前做的导图,地毯式找茬。主要找以下几个方面的问题:1、交互、设计风格统一2、链接是否正确3、排版问题 完善复杂交互 在制作过程中,为了赶进度,再征得Chester的同意的情况下,我漏掉了极少的诸如记录地址,中继器多种排序等复杂交互,这个时候自然查漏补缺,尽量完善 撰写原型修改记录文档 由于我对原视觉设计图进行了较大的修改,虽然很多部分已经讲给 Chester听了,但撰写这份文档还是很有必要的。按照页面–模块–交互的层级关系,我最终整理了7页的修改记录文档反馈给Chester。 总结 交互设计应当是每个产品经理的基本功,虽然交互工具的使用并不代表交互水平,但善用交互工具无疑能够增强我们的交互功力,使我们的思维逻辑更加缜密,并能了解产品逻辑,甚至研发实现难度。