Web产品设计与开发课程研究与实践·王晓轩·20150419.doc

“Web产品设计与开发”课程 设计与实践 王晓轩、徐佳、刘媛 王晓轩，硕士研究生，讲师，研究方向：电子商务业务模式，企业信息化 徐佳：硕士研究生，讲师，研究方向： 刘媛：硕士研究生，讲师，研究方向 （辽宁现代服务职业技术学院 商业管理系，辽宁 沈阳 110164） 摘要：Web产品设计与开发课程的设计，从Web产品的工作过程入手，以开发团队与用户在互联网产品“体验—反馈”的互动过程作为整个课程设计的动力，以项目引导和任务驱动的过程中实现各环节的技术要求，摒弃了传统同类课程中的以软件开发的模式去实现基于互联网产品的课程实施。 关键词：Web产品；工作过程；课程设计 一、 背景：对Web产品的理解 将基于Web的应用，如大到航空票务网站，小到一个logo的设计与开发过程当成一个产品处理，与应用的规模是无关的。当引入“产品”概念的时候，这意味着在互联网时代我们一方面强调要为用户提供个性化体验的同时，更在强调成果物的商品化实现速度。而这正是在工业化大规模生产时代之所长，通过不断探索确定一种可以不断复制的模式，找到盈亏平衡点，然后不断地放大。 二、 梳理基于工作过程的课程设计 1. 以用户体验为核心的课程设计 当前讲授本类课程的模式主要有两种，且多与主讲教师的专业背景有关。一类教师是多具有计算机、软件或网络等相关专业背景，在课程的设计和实施过程中不可避免地将“瀑布模型”等软件开发的传统模式做为Web产品的工作过程 Jonathan Arnowitz等，Effective Prototyping for Software Makers，Morgan Kaufmann，2014 ；而如果将人机互动方面的设计准则应用于Web产品方面，那么则要注意这些出自于实验室的约束条件，以及这类教师的认知或心理学的学术背景 Jeff Johnson，Designing with the Mind in Mind 2nd Edition，Morgan Kaufmann，2014 。 “设计与开发的原点不是产品，而是人” 原研哉，设计中的设计，广西师范大学出版社，2010.9 ，作为互联网的产品价值是为用户提供功能方面的服务的同时，还要为用户带去超过预期的体验。在参考了腾讯的“Web一站式开发” 腾讯公司用户研究与体验设计部，《在你身边，为你设计》，电子工业出版社，2013.2 、小米的“橙色星期五” 黎万强，《参与感》，中信出版社，2014.8 等国内外互联网企业的开发模式之后，结合精益和敏捷开发方法，在设计Web产品的设计与开发的工作过程时，有意识地将用户在与产品“接触→测试”后“体验→反馈”的过程嵌入到整个的开发体系中来，而非传统的由最终成果物所驱动的迭代过程。 在图1中，由里至外三个同心圆的第一个，代表着整个课程的由“定义”开始顺时针的三个阶段；第二个层次，为每个阶段的细分岗位工作流程；第三个层次则是每个岗位工作流程所获得的成果物。三个层次反复迭代地思考出发，从实践中得到反馈，从而不断地根据用户对产品的体验持续地优化。 图1：Web产品设计与开发工作过程图 2. “定义”阶段 在“定义”阶段，所要解决的是业务需求的提炼。本课程让学生在一开始就进入业务的角色，让其切身地体验在设定一个产品时，能够为企业的业务目标达成带来多大的利润，而这种无法通过代码的编辑所达到商业训练，是需要通过商务分析所主导的业务需求实现的。在教学实践中，我们通过一个具有可复制性的小型网站设计与开发的案例，通过对利益相关者的视频、访谈或案例回放的形式，训练学生从客户纷繁杂乱的描述中提炼出产品的需求定义，并形成“产品需求文档”；接下来通过定量、定性的分析方法，对产品的未来市场做出相应的调研报告，从而为下一阶段的设计提供功能的描述和界定。 3. “设计”阶段 在“设计”阶段，是要为用户在用到产品时创建一种易于理解且便于操作的体验 Randy J.Hunt，《互联网产品设计》，人民邮电出版社，2014.7 。在教学实践中，可以通过分组的方式，由教师指定或由学生根据自己某些技能掌握情况，如Axure和Photoshop，形成一个互补且协作的小组。首先，根据“定义”阶段所形成的产品需求文档和市场调研报告，在“交互设计”岗位通过低保真的原型——线框图，实现功能上的需求；然后交与“视觉设计”岗位，根据汇总的各种文档形成精确到像素级的效果图；最后形成高保真的产品原型。 4. “开发”阶段 这一阶段是对想法和设计的实现。互联网产品的最大特点发布快、更新快，在这背后意味着是对功能的完善和对用户体验的提升。代码的编写过程，不再是被动地根据需求文档去实现各种功能，而是带着商业目标、用户体验和功能扩展等目标实现快速更新的代码，在产品的阶段性成果物迅速发布，通过用户的体验获取评估反馈，然后用于指导下一个阶段产品的“定义——设计——开发”迭代过程。 三、 确定职业技能目标 本课程要实现的技能，根据Web产品设计与开发的工作过程，并考虑学生学习认知的过程和习惯，设定的具体职业技能目标如下： n 需求分析与用户研究 Steve Mulder，Ziv Yaar，赢在用户，机械工业出版社，2007.7 u Web设计与开发的投资回报分析； u 设计调查/访谈问卷，通过多种形式观察用户行为； u 设计并实施卡片排序（Card Sorting），分析结果并应用于Web项目； u 设计人物角色，创建用户背景故事，按照不同环境分析用户需求； u 利用Excel等工具软件进行量化分析； n 交互与原型设计 u 掌握项目管理的基本过程和需求分析的基本方法 u 掌握线框图的工具、图形和绘制方法 u 掌握Axure动态面板、交互行为、用例动作和基本逻辑判断语句编辑 u 创建互动的原型 n 视觉设计 u 能够根据项目需求和线框图创建符合要求的矢量蒙版 u 能够对颜色进行选取、混色和混合 u 能够对图形和文字通过颜色工具设计多种效果 u 能够通过自带和外部材质，实现文本、图形的效果多样化 u 能够通过剪切、修建、切片（9切片缩放）等裁量工具输出多种尺寸的图片 u 掌握层的使用 u 能够创建和复用元件 u 能够创建和输出多种优化格式的图像文件 u 能够创建静态原型并导出为PDF文件 n 代码设计 u 能够编写符合语义的HTML和CSS标签与属性 u 掌握不同的浏览器的特性，并能够选择适合的标签 u 能够使用Firebug等工具分析和调试代码 u 能够使用基本的HTML5标签编辑网站框架 u 能够使用CSS3控制HTML元素的表现 u 能够利用jQuery为内容的显示增加特效 u 能够使用版本控制系统管理代码的发布、协同和维护 u 根据SEO的需求，对网站优化 四、 教学组织 课程在教学中融理论教学和实践教学为一体，按照项目导向和任务驱动的方式引导学生学习。每次上课时，首先展示的是本节任务的成果物，在将学生分为若干学习小组的前提下，组织学生讨论如何实现，鼓励动手操作，然后教师总结的方式。教学过程操作如下： l 任务导入：在每次课程（学时的长度以每个任务为单位）时，首先通过实际的案例成品，向学生展示本次要完成的任务模块，联系前后任务，让学生明确此次任务的范围边界； l 讲解示范：基于已学知识和技能，教师对本次任务所需要用到的知识和技能进行实例化的讲解和操作示范。然后将新知识和技能应用于本次新任务。示范的程度以能够实现本次任务的80%功能为标准即可； l 模仿操作：根据项目和任务的复杂程度，以个人或小组为单位，根据上面的讲解示范步骤，自己动手模仿实践。同时，教师巡视过程中对所发现的问题及时地纠正和指导，并在课堂的实践中寻找并任命领悟速度比较快的学生为团队leader，在小组间形成互相促进。 l 进阶思考：每次课程后，对于课上的任务环节需要进行延伸的任务指定。这样既可以让学生把学习延续，也可以通过“拔高”的内容开拓学生的思维观念和加强动手操作的训练； l 学以致用：课堂上教师所示范和指导的项目属于半成品，学生在完成项目的同时，已经具备基本的Web设计知识和技能。在接下来的活动中，可以个人或小组为单位，“承接”真正项目。 五、 总结与后续思考 在2013-14学年的第二学期，本课程已经在我院13级电子商务专业中实施过。在教学过程中，取得了一定的教学成果之外，也暴露出一些不足： l 学生对线框图等图形化设计部分接受较好，但在编码部分的学习，对基础的HTML和CSS代码从认识到独立编辑曲线较长。后期可以尽量简化在手工编码的任务量，如通过Adobe的Muse和Edge等软件，已经可以实现将大部分的代码编辑过程节省下来，为设计环节创造更多的空间和时间； l 对移动互联网内容的加入。由于是第一次开设本课，加之移动互联网在今年的发展速度远远超过预期，这不仅反映了技术本身的进步，更重要的是体现了企业对这部分内容未来的需求； l 对企业需求调研不足。尽管可以通过公开出版的行业或企业资料，获得相应的教学内容的需要，如岗位需求、开发模式、使用的技术、素材等，但考虑到企业在产品生命周期上的先进性和教学上的知识更新的延后，应该随时关注企业技术发展和人才需求变化，以及以学期为单位，通过专业指导委员会的方式总结和调研； l 对技能点考核方式的多样化。在考核中通过将一个项目分解为任务（即传统的题）的方式，但是受限于计算资源、网络环境、考核方式、教学/考核时间安排，使得考核的形式稍显不足。尽管我们在考核中加入了期末答辩环节，但学生对此类方式的不熟悉使得在第一次的尝试中出现了准备不足的情况，但这并不影响这种一对一考核方式的有效性。后期我们会继续开发针对不同技能点的考核方式。