原型设计课程教学设计与实施——基于Axure RP9的秋季运动会报名表单原型设计.pdf

247 Vol.40,No.2February,2024第 40 卷第 2 期2024 年 2 月IT REPORT0 引言原型设计可以帮助产品经理将自己的产品设计思路、运行逻辑、业务流程传递给项目组成员，解决了产品经理清晰明了地表达自己想法的难题。4相应的，在原型设计教学过程中，存在一个明显的问题，教师如何为学生挑选并设计合适的原型案例进行课堂训练。完整的 APP、网页原型案例能够反映真实的岗位工作内容1，理应是课堂训练的最优选择，但以上案例往往需要涉及到动态面板、中继器、函数与变量等多种知识综合运用，学生在学习的早期，掌握的知识薄弱，不具备直接上手的能力。而授课原型设计课程教学设计与实施基于 Axure RP9 的秋季运动会报名表单原型设计 王玮思（厦门海洋职业技术学院，福建厦门361102）摘要：原型设计是产品经理用于表达思路、创意的最佳工具。关于原型设计教学，在打基础的教学环节，存在一个明显的问题，如何为学生挑选并设计合适的原型案例作为课堂训练。选择 App、小程序、网页等大型设计案例，对初学者来说覆盖知识面过广，难度过大；以单一知识点设计的案例训练，存在答案的直接导向性，无法调动学生积极性与激发挑战心理，难以促进学生进行深度思考和有效的创新思维训练，难以培养学生对界面设计整体风格的把握。为了解决以上问题，本文设计了表单元件的综合案例。关键词：Axure RP；原型设计；教学案例设计中图分类号：TP311.52文献标志码：A文章编号：1672-4739（2024）02-0247-03Teaching Design and Implementation of Prototyping Course-Axure RP9-based Prototyping of Autumn Games Registration FormsWANG Weisi（Xiamen Ocean Vocational College,Xiamen 361102,China）Abstract：Prototyping is the best tool used by product managers to express their thoughts and ideas.Regarding the teaching of prototyping,there is an obvious problem in the teaching session of laying the foundation,how to select and design suitable prototype cases for students as classroom training.Selecting large-scale design cases such as apps,applets,web pages,etc.,covers too much knowledge for beginners and is too difficult;case training designed with a single point of knowledge,there is a direct orientation of the answer,which can not mobilise students motivation and stimulate the psychology of challenge,and it is difficult to promote students in-depth thinking and effective training in creative thinking,and it is difficult to cultivate students grasp of the overall style of the interface design.In order to solve the above problems,this paper designs a comprehensive case of form components.Keywords：Axure RP；prototype design；teaching case design过程中，每个单元的背后，亟需充分的案例训练来帮助学生理解与巩固，若以单一的知识设计案例作为课堂训练，长此以往存在几个问题：训练内容过于简单直白，学生易产生“轻敌”心理，难以进行深度思考，获得创新思维的有效训练，难以培养学生对界面设计整体风格的把握。尤其是原型设计课程中，表单元件知识点较为简单，若没有合理的案例帮助学生巩固提升，本单元学生的学习将停留于表面，为了解决以上问题，本文设计了关于表单元件的综合案例。1 表单元件介绍Axure RP9 为用户提供了丰富的表单元件，主要包括文本框、下拉列表、复选框和单选按钮等，这些元件有不同功能和作用，如表 1。5不同的表单元件，在初次学习过程中，学生会因为简单易懂的知识点而产生松懈心理，进而无法进一步探索表收稿日期：2024-01-11作者简介：王玮思（1995.08-），女，汉族，福建厦门人，硕士，助教，研究方向：软件技术。248 Vol.40,No.2February,2024第 40 卷第 2 期2024 年 2 月IT REPORT单元件的实际运用。如果只是停留在简单的、单一的表单元件训练，结果导向性太强，难以调动学生的学习兴趣和激情，激发学生思考和讨论。对此，本文任务应结合多个表单元件的综合运用，提升案例难度和趣味性，帮助学生理解并熟练运用多种表单元件。2 基于表单元件特点综合教学案例设计基于表单元件特点，本文设计“秋季运动会参赛报名表”案例作为课堂综合案例，案例背景设立于学校秋季运动会之际，要求学生利用Axure RP9软件制作参赛报名表，充分运用课堂所学表单元件完成报名表制作具体要求2。2.1 案例要求2.1.1 背景资料利用 Axure RP9 软件制作秋季运动会报名表原型。提供学院与参赛项目详细资料：提供学校的二级学院信息，如信息工程学院、国际商贸学院等。运动会赛项信息：如男子 100 米、女子 100 米等，要求学生实现运动会项目与性别之间的关联交互。2.1.2 要求原型启到充分的提示作用对应的文本框应有合理的文本提示，当鼠标键入后提示文本消失。一寸照片下方文本框，应通过交互设置，模拟本地图片上传效果。2.1.3 按钮反馈用户执行“保存”按钮操作，显示“保存成功！”的反馈；单击“重置”按钮，将所有已填信息重置为初始空白状态3。2.1.4 布局要求对于各类表单元件，应做到交互逻辑合理，排列得当，间距适宜，整体布局美观。示例如图 1。3 基于表单元件特点综合教学案例难点与剖析该综合案例主要考察学生对于表单元件的综合运用，将不同表单元件的逻辑关系梳理清晰，并建立合理的交互是本案例的难点，案例训练时间建议为 45 分钟，前期需要学生开展讨论，梳理每个表单元件的设计要点和不同元件之间的联系。本综合案例的解析和考察要点如下。3.1 单行文本框的提示文本设置对于姓名、电子邮箱、手机号码和所在班级，涉及到用户填入信息的内容，学生需要使用单行文本框，并对其设置特定的交互样式“提示文本”，如“请输入您的姓名”等，并选择合适的提示文本样式，是在用户获取光标后隐藏提示文本，抑或用户键入内容后隐藏提示文本，起到充分提示而不影响用户正常输入内容的作用。此处主要考察学生对单行文本框的掌握，设置不同的提示文本文案，锻炼学生细致能力。3.2 单行文本框的输入类型设置与最大输入字数限制对于姓名、出生日期、电子邮箱、手机号码、所在班级和一寸照片的单行文本框，要求学生设置不同的输入类型，分别为文本、日期、电子邮箱、电话、文本和文件类型。一寸照片下方文本框，设置为“文件”类型，在预览界面就可以模拟本地文件的上传效果。手机号码的输入设置，可以进一步要求学生限制最大输入字符为 11 位，帮表 1 文本框与文本域、下拉列表与列表框、复选框和单选按钮区别与联系表单类型文本框文本域下拉列表列表框复选框单选按钮定义支持输入单行文本的表单元件。支持输入多行文本的表单元件。用来显示列表选项，以便用户进行单项选择。显示多个列表选项，以便用户进行多选。允许用户从多个选项进行多选的表单元件，选中状态为“”。仅允许用户从多个选择中进行唯一的选择，选中状态为“”相同之处可设置提示文本（如“请输入密码”），分别为键入和获取焦点方式，支持文本输入。可供用户进行选择区别之处可限制输入类型和输入字符的最大长度。可输入多行文本，没有限制。仅允许用户在下拉列表框中进行单选。允许用户在列表框进行多选。用户可以选择多个复选框。用户对单选按钮组只能做唯一的选择。图1 秋季运动会参赛报名表 249 Vol.40,No.2February,2024第 40 卷第 2 期2024 年 2 月IT REPORT助巩固学生单行文本框最大输入字符的设置。3.3 单选框的选择唯一性设置性别设置，要求学生使用 2 个单选框元件，将单选框文字分别设置为“男”和“女”，并指定 2 个单选框的组为“性别组”，通过该操作，两个单选框有且仅有一个能够被选择。该训练帮助学生巩固单选框的特点“选择的唯一性”的设置，通常用于性别、婚姻情况、是否意愿等情景。3.4 性别单选框与参赛项目复选框的关联关系设置对于性别，用户只能选择其一，故采用单选框；对于参赛项目，用户可以报名多项赛事，故采用复选框元件。学生首先应将复选框的文字设置为赛项名称，合理对齐排布后，根据性别属性分为三组，组内进行“组合”操作，并将 3 个组合分别命名为“男子项目组”、“女子项目组”与“通用项目组”。对性别单选框进行交互设置，如对单选框男（性别）进行交互设置：（1）当单选框“男”被选中时，首先设置“女子项目组”为假，即取消先前已被选中的“女子项目组”；其次，禁用“女子项目组”，即防止男性用户误触报名女子参赛项目。（2）当单选框男“男”被取消选中时，取消禁用“女子项目组”。（3）同理，对单选框“女”进行交互设置。学生在交互设计时，确保性别单选框与参赛项目复选框的关联关系逻辑正确，这将是综合案例的重点和难点，考验学生思考的严谨性和周全性。学生如果想当然，简单得出结论，认为两者之间交互设置只需要：用户选择单选框“男”则禁用“女子项目组”，用户选择单选框“女”则禁用“男子项目组”，则会犯两点错误。一为用户误选性别“女”，重新选择正确的性别“男”，由于禁用未解除，无法点击男子相关的参赛项目；错误之二用户先选性别“女”，并且选择部分“女子项目组”参赛项目，如“女子 100 米”，后续用户意识到错误，重新选择正确的性别“男”，原有“女子 100 米”仍处于被选择状态，产生逻辑相悖的错误。对此，该案例训练学生周全考虑到用户操作的不确定性、结果复杂性性来提升交互的容错性和逻辑正确性。3.5 下拉框列表交互设置所在学院项目则重点考察学生对于下拉列表框的运用，对于大量的信息如何批量输入列表，并合理地设置默认项和首项为“请选择”。该设置相对简单，需要学生耐心批量设置二级学院，细节在于默认项的设置，为后续“重置”按钮的交互做好铺垫。3.6 “保存”与“重置”按钮交互设置案例要求“保存”按钮则设置交互为单击时显示“保存成功！”字样，涉及反馈的显示和隐藏。“重置”按钮则为本综合案例的第二个难点，用户点击“重置”按钮后，所有已填信息应该全部恢复初始状态，这里需要学生分元件、全方位多角度地思考交互如何设计，建议采用小组讨论后绘制思维导图或者表格辅助设计，确保交互的完整性。表 2 不同表单元件“重置”交互设置元件类型点击“重置”后，表单元件应恢复状态“重置”所需设置的交互文本框文本框中已输入的文字应被清空单击“重置”按钮，文本框内容被设置为空。下拉列表框下拉列表框被勾选的选项取消勾选，恢复到默认状态“请选择”单击“重置”按钮，设置下拉列表框列表选中项为“请选择”。单选框、复选框单选框和复选框被勾选的选项取消勾选，恢复到默认未选择状态单击“重置”按钮，设置单选框和复选框设置选中到“假”。4 结语本研究以 Axure RP 表单元件教学为研究对象，将“秋季运动会参赛报名表”案例引入课堂综合案例中，通过该案例帮助学生厘清表单元件之间的区别与联系，引导学生对表单设计进行独立的需求分析，完成合理的逻辑关系梳理和元件布局设计。通过本案例，学生学习原型设计课程中表单元件单元，不仅可以更好的搭建完整的学习框架，对不同表单元件之间的的联系和交互设计有更深刻的理解，还能更好地验证产品流程是否满足实际需求，利用Axure RP9 软件更好地提高自己的设计水平。参考文献：1 周金容,张海波,唐天国等.基于 Axure 的教育APP 交互界面的原型设计与应用J.网络安全技术与应用,2023(04):61-64.2张乐,张凯.复旦大学 以 Axure 原型设计一站式服务系统J.中国教育网络,2020(Z1):79-80.3包文夏,吴梓恩,朱宝怡.基于 Axure 平台的校园跑腿 APP原型设计J.办公自动化,2022,27(08):15-18.4陈颖,张玉彤.Axure RP9 互联网产品原型设计M.2021 年11 月第1 版.人民邮电出版社,2021:69-73.5王鹏.Axure RP9 网站与 App 原型设计实战M.2021 年 1月第1 版.人民邮电出版社,2021:27-33.