随着移动互联网的发展与智能设备的兴起,涉及用户体验的相关行业对人才的需求日趋紧迫,使得交互设计也正在成为国内设计院校中的新兴培养方向。然而,交互设计教学在国内现行设计教育课程体系中尚处于蹒跚起步的阶段^[1-3],对如何有效培养符合行业需求的交互设计专业人才,如何科学合理地优化课程设计环节,国内教育工作者们正处于边实践边探索的过程中,其中低保真原型设计在整个教学环节中的作用与地位正在逐渐凸显出来^[4-5]。

原型(prototype)一词来源于希腊语“prototypos”,最初的意思是具有原创性的初始模型^[6]。随着时间的推移,原型的含义已经演化,如今在交互设计的概念中,原型可以理解成是在最终方案成形之前的一种设计呈现形式^[7]。它将系统核心功能和关键流程以可视化的形态展现给用户,用来征求意见、明确需求,同时也是开发团队成员之间用来讨论、分析和验证设计方案的工具。

根据制作精度与用途,原型可大致分为高保真与低保真两类^[8],其中高保真原型在交互体验与视觉效果上均与最终产品非常接近,可提供最直观的体验效果,但其需要借助专业的原型软件来制作完成,需要投入的时间、精力较多,并不适合在交互设计阶段过早启用。在设计方案尚未被验证的前期阶段,产品形态还存在诸多变数,一旦方案需要大的调整甚至推翻重来,将会产生大量的资源浪费,因此高保真原型更多被使用在整个开发流程的后期。如图1所示,低保真原型的主要呈现介质是纸面,形式上以手工绘制的线框元素为主,它具有构建快速、成本低廉的特点,可适应反复的测试验证与修改重建,满足了前期阶段的设计需求。

图1 课程教学中制作的纸面原型
Fig.1 Paper prototypes produced in course teaching

浙江科技学院工业设计专业从2012年起在本科高年级开设交互设计模块化课程,在最初的教学设计中,借鉴企业经验并参考用户体验专家GARRETT对于用户体验要素5个层次(战略层、范围层、结构层、框架层和表现层)的经典论述^[9]。如图2所示,将设计流程大致分解为“需求挖掘-概念设计-交互设计-视觉设计-高保真原型”,基本涵盖了用户体验设计的完整流程,也符合该专业对学生的培养目标与定位:培养具有产品全局观的交互设计师、UI设计师。

图2 用户体验要素的5个层次
Fig.2 Five levels of user experience elements

然而,在实际教学中很快暴露了出问题,尽管课程对设计流程的划分明确,但依旧有很多学生在各环节比重把握上存在较大的随意性。学生依据自身性格、兴趣的差异自然分化为两个群体:一部分学生在前期阶段较活跃,对选题分析、挖掘用户需求与定义功能范围等兴趣浓厚,即专注于战略层与范围层的内容,善于撰写调研分析报告,可是缺乏将概念进一步转化成具体方案的动力和能力,出现虎头蛇尾的现象; 另一部分学生在选题与初稿之后,就一头钻进自己喜欢的表现层设计中,执迷于高保真原型的视觉与动态效果,甚至在完成视觉设计的细腻效果之后再反推交互流程与页面逻辑。这两种倾向都忽视了与用户行为逻辑最直接的框架层与结构层,导致用户体验设计流程的割裂,学生所做设计存在页面逻辑错误与交互体验不佳的问题也就不足为奇了。

这一状态明显偏离了培养目标,因此,本课题组着手对教学环节作调整,以实现范围层到框架层之间的有效衔接。在原有信息架构与线框草图设计的基础上引入低保真原型设计,淡化高保真原型的要求,并增加原型测试环节,让交互方案在进入视觉设计流程之前,有可能进行多次迭代修改,从而避免交互体验上的结构性错误^[10]。

低保真原型在Google、腾讯、阿里巴巴、网易等国内外知名互联网企业的产品开发流程中已有较为广泛的运用,设计师们通过实践总结出了一系列值得借鉴的经验^[11-13]。但由于学校与企业在人员专业程度、团队协作能力、真实数据支撑等诸多方面存在着客观差距,因此,低保真原型在高校教学环境中的应用实施还需要根据实际情况,在多个方面做到因地制宜,以更符合学生能力与教学场景的实际。

以交互模块的核心课程“目标导向设计”为例,在完成目标识别、需求分析、信息架构等一系列前期任务之后,学生对自己设计的产品逻辑已初步形成,此时开始指导学生进入低保真原型设计环节是较为合适的时间点。同时,由于原型制作的目的在于沟通、测试、评估与完善方案,而并不是作为交付效果的展示,因此,在初步完成信息架构与流程图草稿后就着手制作原型,也利于学生尽早通过原型测试来验证前期内容,形成设计上的快速迭代。

纸面原型的制作、讨论与测试工作较适合多人合作,所以课程教学中一般将班级学生按选题划分成3人小组的形式,通过组员间的协作来完善交互逻辑并且提高工作效率。

纸面原型的创建较为简便,材料方面只需要一些日常文具,例如纸张、易事贴、固体胶、签字笔、马克笔、尺子、剪刀等,它们简单轻便且不依赖电源和网络,便于在普通教室中开展。

纸面原型的制作方式较为简便,例如针对移动端APP设计,可将手机轮廓线框打印出来做模板底稿使用以提高效率。如图3所示,指导学生用简约朴实的线条与文字,把概念设计中的界面元素按比例绘制在原型底稿上即可,同时将图标状态、浮层与弹出框等元素制作成独立模块,以便测试时配合手工操作来使用。

图3 学生制作的“烘焙菜谱APP”纸面原型
Fig.3 Paper prototypes of “Baking recipes APP” made by students

在低保真的纸面原型制作环节中,有以下几个要点值得注意:

一是真实的原型尺寸。目前教学中的设计对象以移动端APP为主,可选择较主流的手机轮廓作为原型底板(如iPhone、小米等)。与电脑网页用鼠标移动点击不同,智能手机在操作上通过手指直接触摸,原型物理尺寸会影响到测试用户对产品的理解和操作感受,所以在原型尺寸的设定上要尽量接近真实手机的数据^[14-15]。

二是提前准备常用控件。在移动端APP的设计中,不论iOS还是Android系统,都有一些系统标准的控件元素可以拆分出来单独制作。如图4所示,控件包括标签栏、键盘、文本输入框、高亮框、通知、分段式标签等。灵活运用这些控件,能在很大程度上提高效率^[16]。

图4 学生自制的纸面原型控件库
Fig.4 Paper prototyping control library made by students

三是色彩以黑白灰为主。除少量色彩点缀强调外,整体尽量采用黑白灰色,在绘制方式上也最好保持简约朴实的风格,以避免视觉因素对测试环节产生干扰。

四是灵活处理交互细节。对于下拉刷新、进度条百分比、图片翻转等动态效果,无需花费时间精力在纸面原型中去模拟。小组成员可以在原型测试场景中结合口述提示的方式来灵活处理,例如“此处有下拉刷新动画”“进度条在行进中”,等等。

在课程中纸面原型是小组成员用来沟通设计方案的有效方法,也是进行可用性测试评估的重要环节。纸面原型是用纸片素材模拟交互元素,因此本身并不具备反馈能力,需要成员间的合作才能真正发挥作用^[17]。

首先进行适当的角色分工,小组中的三名学生分别充当系统、主持人、记录员的角色。系统角色负责模拟系统的操作反馈,例如进行界面元素的移动、切换,必要时用语言描述交互效果等; 主持人对被测用户进行必要的引导、辅助与解释; 记录员将测试环节中的反馈与问题记录备用。然后从小组以外邀请测试用户角色,因为没有参与过该原型设计的学生,对交互方案的理解水平和反应状态会更趋于接近真实用户,如此得出的测试结果才更客观有效^[18]。

通过将低保真原型带入课堂,给交互设计课程的教学带来了清新之风,学生改变了以往空谈概念难以落地转化,或执迷于视觉效果而忽视交互体验的学习状态。具体表现在以下几个方面。

低保真原型的创建成本低,制作效率高,学生能够在课堂上借助简单材料快速创建出原型,边思考讨论,边动手制作,不再专注于对高保真视觉稿的描摹刻画,注意力转向到了探讨交互方案本身。如图5所示,学生们在课堂中绘制了大量纸上原型,虽然手工制作的低保真原型在视觉上也许比较简陋,但却夯实了框架层与结构层的工作,设计流程得到了切实改善。

图5 学生制作的纸面原型
Fig.5 Paper prototypes made by students

低保真原型作为一种适合多人协作的设计方法,几乎没有技术门槛,不受绘画与软件水平的制约,每个学生都能参与到小组讨论和制作中来。协作氛围让学生的思维更加活跃,设计灵感更易激发,通过相互检验还减少了逻辑漏洞的出现。

由于低保真原型的创建便捷,能够在短时间内发展出较多方案,并对它们进行测试比较,面对被验证为不合理的方案,学生也比以往更乐意放弃,因为修改甚至重建的成本都很低。

相比高保真原型,低保真原型不仅在制作上节约了大量时间和精力,同时由于形式上的简约朴实而排除了视觉因素的干扰,使学生能够更专注于交互设计的本身,最终更有效率地推举出最佳方案。

课堂教学环节的实践证明了低保真原型在交互设计教学中的有效性。但同时也发现以纸面原型为主的低保真原型自身也存在一定的局限性,主要表现在以下方面:

一是纸面原型保存不便。纸面原型由底稿、界面模块、控件等一系列纸质元件构成,一个完整的交互原型往往会包含多个独立界面,综合起来会产生大量的原型纸片,在客观上给管理与保存带来不便。

二是测试工作的制约因素较多。纸面原型没有计算机系统的参与,所有的交互反馈都需要人工模拟操作,因此,测试效果在较大程度上受制于模拟系统角色的成员表现。在一个小组只有一份纸面原型的情况下只能安排现场测试,无法邀请远程用户,也不能同时进行多位用户测试,使其效率受到限制。

三是对交互细节的支持不足。虽然这一点严格而论不能算纸面原型的缺点,本身目标定位就不在此,但交互体验是一个整体,要追求交互体验的最优化,细节完善也是重要的,而单一依靠纸面原型是做不到的。

针对上述问题,教学中在纸面原型的基础上进行了新的探索尝试,例如利用“POP-Prototyping on Paper”“快现”等移动端的原型设计应用,如图6所示,可以通过手机拍摄纸面原型,导入后在图片中增加链接热区(例如按钮区域、列表区域等),设定相应的交互动作(如单击、双击、滑动等),然后选择要跳转的目标页面图片,就可以完成一组交互动作。这种结合应用程序的方式,既保留了纸面原型简单快捷低成本的优势,又可以在手机屏幕上真实地操作体验,从而增强了实时互动性。此类应用的介入,让纸面原型的各种局限性都得到了很好的弥补。如今在学生群体中智能手机普及率近乎100%,因此,这种低保真原型的创新运用方式也便于在课堂教学中采用与推广。

图6 纸面原型结合POP使用演示
Fig.6 Combined use of paper prototypes and “POP” app

此外,在借助计算机的情况下,还可使用墨刀、InVision、Mockplus等原型工具,通过较丰富的交互元件库创建低保真原型,并输出到手机端进行实时交互的体验。但其学习曲线相对陡峭,学生们需要花费更多精力去掌握软件技能,这又对如何在课堂中保持设计的专注度提出了挑战。因此,这类工具在教学中只能根据必要性有选择地使用。

互联网时代各种新技术新应用不断涌现,面对众多选择,作为教育工作者需要把握交互设计教学中的任务核心,紧密围绕设计的本质选择最佳教学方案。纸面原型虽然存在一定局限性,但仍不失作为课堂运用的设计研讨方法。这一看似原始的低技术手段却最贴近心灵,由集体参与感所激发出的创作热情,是通过其他方法很难获得的。纸面原型与智能手机应用结合所创建的数字化低保真原型,进一步提升了原型的实用性,是当前较为值得采用的交互设计课堂教学方法。