浅谈原型设计在网页设计教学中的重要性

吕城

摘 要：本文旨在探尋针对设计艺术学院学生的网页设计教学重点，在传统网页视觉设计教学知识点基础上添砖加瓦，着力探讨原型设计是网页设计视觉化的重要基础。

关键词：原型设计；网页设计；视觉设计教学

对于交互设计教学，这是一个最好的时代，也是一个最坏的时代。随着科技的发展，交互设计这个名词越来越被人们熟知。而网页设计——隶属于交互设计领域的一个分支——已顺应时代的发展成为各类设计艺术学院视觉传达设计教学中不可或缺的一门课程。在传统的视觉传达设计教学与课程设置范畴内，网页设计的教学重点往往更侧重于界面设计、网页的视觉设计等方向。然而随着艺术与科技的融合，市场需求目的与学院培养目标的碰撞，更多元、更新型、更综合能力的复合型设计人才越来越受到青睐。这也意味着在院校网页设计中的教学方向需要顺应市场需求，定位在培养具有团队合作沟通能力、具备跨界知识结构的全局系统的复合型人才。这也正是本文旨在探讨如何顺应发展探寻设计艺术学院的网页设计教学重点，在传统网页视觉设计教学知识点基础上添砖加瓦，从而构筑更为丰富的知识架构。

1 原型设计的概念与定义

交互设计理论中，原型（Prototype）是对产品概念的形象化和具体化。因此在网页设计范畴内，网页的原型指的是将所需设网站的系统结构与相应功能建构成一个“模型”，并将这个“模型”用可视化的形式描绘出大概的框架，结合批注、说明以及流程图等要素。而网页原型设计建立的核心目标并非为了立即交付投入使用，而是通过这个原型去沟通、测试、修改，从而解决各种还未确定的问题。经过反复沟通、修改以及确认后，才进入网页的表现层也就是视觉化设计的阶段。这个过程当中所关注的影响网页浏览者的各种行为习惯因素，以及如何在网页交互环节里获得良好的体验，从初期创意IDEA草拟建立，到反复验证想法，进行价值评估，为继续深入设计提供数据的过程，称为“原型设计”。原型设计作为网页交互设计过程中不可或缺的部分，帮助设计团队成员或相关人员之间交流与评估的工具，是对产品概念的形象化和具体化。

2 原型设计在网页设计中的作用

一个网站的研创开发设计运营往往来自产品经理开发团队、后台程序代码人员以及前端视觉设计人员这三方面的团队默契地合作配合。原型设计所关注的是交互设计的核心，即“以用户为中心的设计”。因此，来自三方面的团队也必须秉持同样的一个核心目标，以用户为中心去进行建构设计网站。原型设计恰恰是沟通这三方面团队的桥梁，为来自不同专业背景的人员提供一个标准化的沟通平台。从创意概念，到市场调研以及网站整体流程图和各网页的线框图的绘制制定，再到低保真与高保真原型的制作，整个过程都是原型设计不可缺少的环节。作为设计艺术学院的学生，在毕业就业之后大多担任视觉设计这个环节的工作，所以也必须熟悉掌握整个团队工作的分工运作，以及自己所处环节与其他环节的关系。

3 原型设计之于网页设计教学

3.1 自我思路的沟通

在教学过程中，教师需要在教学大纲安排知识点时将原型设计先于视觉设计，首先让学生明确网站的设计从无到有，从概念到结构；然后才是从低保真原型过渡到高保真原型，通过网页的图形、图标、字体元素以及配色使网页的界面视觉设计完整，并且让视觉设计做到有理可依，而非为视觉而视觉。通过培养学生在设计网页开始时就引入原型设计的概念，把握交互设计中用户体验要素的五个核心层次的顺序，即依次实现网页设计的战略层、范围层、结构层、框架层、表现层。引导学生明确自己的设计思路，在设计的过程中做到有迹可循，通过自己的原型设计可以回顾、追溯自己的设计想法，审视、修改自己的设计问题，从而为进入网页的最后表现层设计也就是视觉化设计的阶段夯实基础，提高效率事半功倍。

3.2 师生之间的沟通

网页设计不同于其他传统视觉传达设计学科，它要求学生具有一定缜密的逻辑思维。例如，不同于海报招贴设计，设计艺术学院的学生可以在软件中天马行空地修改调整画面，使所见即所得。然而网页设计需要前期周密地构架各个网页之间的浏览流程，布置网页的基本框架，在低保真原型测试成功后，才进行更视觉化程度强的高保真原型，甚至是最终表现层的外观视觉界面设计。在教学的过程中发现学生往往会习惯于以往传统视觉传达设计方法的固有思维，也就是较为感性地去处理网页，将随时迸发出的灵感创意执行设计，这么做往往也导致网页结构，甚至是各个网页之间的逻辑浏览关系的破坏。而原型设计可以从某一个角度辅助教师去规范设计艺术学院的学生在设计时避免出现上述类似的“激情设计”，在每一个环节上使设计执行标准化、规范化，在作业或项目的执行上更好地互相沟通。

3.3 市场产学的沟通

结合以往的网页设计教学不难发现，计算机专业方向的学生具有逻辑较为缜密的理性思维，而设计艺术学院的学生则更擅长于视觉化表现设计的感性思维。但在产学研社会实践项目中，客户并不会计较学生具体来自哪一个学院，而是更关心他们怎样才能将他们的方案与要求执行好设计好。因此，原型设计在网页设计中的教学能够使学生更早地认识到网页设计团队的合作性，培养设计自觉与设计责任，胜任更具市场实践性的设计项目。在今后学院与市场的产学研实践衔接中，让学生有备而去，减少与团队、与市场的磨合期。

原型设计在网页设计教学中的地位显得尤为重要，可以说它是网页设计视觉化的基础。在当今市场主导设计的背景下，教师只有把握网页设计的行业规律，扩充课程的知识结构，意识到网页设计的教学不仅仅只局限在教会学生探寻更合理的颜色、字体、图片、版式这类将网页页面设计优化的视觉体验上，而是让学生理解设计师应当更多地给予浏览用户完美的交互体验，这一点也恰恰要求教师将原型设计的设计理念引入网页设计教学课程中去。要让学生了解，网页视觉界面的表现层设计并非无中生有或是全凭设计师的一时喜好，关键来自于严谨缜密的原型设计，只有夯实加固这个基础，网页的视觉设计才能够在其基础上随心所欲地去建构深发。

参考文献：

[1] 艾伦·库伯（Alan Cooper），罗伯特·瑞宁（Robert Reimann），大伟·克洛林（David Cronin）. About Face 3交互设计精髓[M].刘松涛，译.电子工业出版社，2012.

[2] 沃菲尔（Todd Zaki Warfel）.原型设计：实践者指南[M].汤海，李鸿，译.清华大学出版社，2013.

[3] 加瑞特（Jesse James Garrett）.用户体验要素：以用户为中心的产品设计[M].范晓燕，译.机械工业出版社，2011.

[4] 科尔科（Kolko J.）.交互设计沉思录[M].方舟，译.机械工业出版社，2012.