1.2.2 交互设计

在头脑风暴之后,产品经理会将大家的想法整理成需求文档,并通过邮件发送给项目组的每一个人。UI设计师在接到详细的需求文档之后,需要将文档以交互稿的形式呈现给项目组。注意,交互稿阶段主要是将大家对产品的最初想法落在现实中,而不是做出一套完成的交互设计。交互设计分为两个阶段,一是前期的交互草稿(低保真原型)阶段,二是交互精稿(高保真原型)阶段。

交互草稿(低保真原型)阶段,也需要大家以讨论的形式完成,可以用便签将需求文档的大概交互内容绘制出来,然后按照交互操作的逻辑顺序,将它们粘贴到一个大的玻璃墙或者黑板上,也可以直接在一张大白板上用马克笔直接将交互稿绘制出来,大家一起讨论这套交互逻辑是否顺畅。

交互草稿不需要画得很细致,只需把操作逻辑和步骤交代清楚就可以了,通常会用简单的线条勾勒。在此阶段,要体现出每个界面存在的意义,也就是用户想在当前界面希望看到的内容,并且在摆放各个界面的过程中,要表达出界面与界面之间的优先级。即使进行到了这一步,团队还是要不断地进行讨论,不断地将之前的定论推翻,思考有没有更好的逻辑和操作模式。因为在草稿上进行手绘交互稿的设计比较快捷,也比较方便修改,所以大家会不断地根据交互草稿进行流程上的讨论和修改。

不要小看这一步大家的讨论结果,这是项目前期最初确定的逻辑,以后的产品设计和程序制作都会按照这个基本的逻辑来实现。如果在早期没有及时发现并解决问题,在产品制作过程中或完成后再发现问题、进行修改,势必会影响产品整体的上线时间及项目组的人力和物力。

在交互精稿(高保真原型)阶段,高保真原型图通常是通过计算机软件辅助完成绘制的。

初步确定了交互草稿之后,要选择一款能实现交互设计的软件,将草稿上面的内容更精准地表现在高保真原型图上。本书后面会教大家用Sketch来绘制原型图。除了Sketch,还有Axure RP、XD、墨刀、POP等软件,都可以用来绘制原型图。高保真灰度线框图的界面布局及交互逻辑效果要比低保真交互图更细致,实际效果也更接近真实产品,最终制作成产品交互演示Demo,能帮助团队或者客户更好地体验模型。通过Demo的展示,还会发现很多交互设计中存在的问题,项目组还需要继续讨论这些问题并修改交互稿。

注意,高保真交互原型图要展示一个完整的交互效果,设计师一般会将它在团队中或者客户面前展示,所以要注意它的界面规范和美感。如下页图为利用Sketch绘制的发现音乐App高保真原型图。