界面原型设计 课件 第2章 界面原型设计标准

第2章界面原型设计标准模块一项目准备阶段教学重点难点PARTONE设计尺寸与规范PARTTWO页面与自适应视图PARTTHREE元件详解PARTFOUR交互事件与动态面板PARTFIVE中继器与母版PARTSIX目录CONTENTS.变量函数与团队协作PARTSEVEN教学小结与课堂作业PARTEIGHT目录CONTENTS.（01）教学重点难点PART-牢记各类终端的统一设计尺寸与基础规范，熟练运用Axure中的页面、自适应视图、元件、动态面板、中继器、母版、变量与函数、团队协作与发布功能。教学重点教学重点与难点在有限时间内将规范尺寸与元件逻辑准确转化为可交互原型；理解自适应视图与动态面板、中继器之间的配合关系；掌握变量与函数在复杂交互中的实际应用，避免逻辑冲突。教学难点（02）设计尺寸与规范PART-设计尺寸参考各类终端原型设计尺寸参考为保证演示文件效果规范，建议统一采用AxureUX提供的各类终端原型设计尺寸标准，仅限定宽度，高度随内容自动变化。图2-1所示为AxureUX目前所采用的各类终端原型设计尺寸标准，基本符合主流设计规范，便于后续跨设备展示。设计时建议使用辅助线帮助排版，使页面效果更规范。辅助线排版基础设计规范参考WEB端横向区块列数常用2、3、4列，图2-2给出各设计尺寸下每列内容区块宽度对照表。内容区块间距常用10px或20px，Axure中按住Shift键+方向键每次移动10px。区块列数与间距创建新项目时应先设置元件及页面默认样式，确保原型样式统一。推荐字号18px、16px、14px、12px，行间距28、24、20，均使用偶数。设置页面样式（03）页面与自适应视图PART-AxureRP9中，页面用于设计和展示界面布局与样式，每个页面可包含按钮、输入框、列表等元件，用户可添加、删除、重命名和组织页面。自适应视图用于测试不同分辨率与设备的界面布局与自适应性，用户可预览不同分辨率效果并测试设备上的自适应性能。页面与自适应视图页面与自适应视图概念（04）元件详解PART-MAINAxureRP9元件是构建原型的基本构建块，图2-5展示元件面板。常用元件包括按钮、标签、文本框、下拉框、复选框、单选框、图像、轮播图、列表、进度条、导航栏等。高级元件有交互面板、面板组、滑块等，支持自定义元件库，便于快速创建和测试不同用户界面与交互方式。元件功能常用元件功能一览CONTENT（05）交互事件与动态面板PART-交互决定部件和页面动态行为，如单击按钮导航或鼠标悬停显示部件，可在交互窗格创建和管理，图2-6示意交互窗格，图2-7示意交互用例。动态面板是容器，将部件保存在状态中，一次仅显示一种状态，图2-8示意动态面板结构。动态面板支持拖动滑动及固定位置，适合轮播、幻灯片、导航标题和侧边栏。动态面板非常适合创建轮播和幻灯片，因为可以动态设置可见状态，实现不同内容的切换展示。交互事件动态面板应用场景交互事件与动态面板（06）中继器与母版PART-中继器是高级部件，用于显示文本、图像等重复集合，图2-9示意中继器结构。数据驱动，可动态排序筛选，适合动态表或产品列表。中继器母版是部件集合，可集中维护并重复使用，修改自动更新所有实例，图2-10示意母版管理，常用于页眉、页脚、导航栏，提升效率与一致性。母版中继器与母版功能（07）变量函数与团队协作PART-变量与函数Axure函数为特殊变量，通过调用获取特定值，仅用于表达式。图2-13示意编辑文字对话框，用于插入变量、属性、函数或运算符。函数变量包括全局变量和局部变量，可存储文本数字供后续使用，图2-11示意全局变量，图2-12示意局部变量。变量可在元件文本、条件逻辑、函数表达式中调用。变量团队合作与发布输出团队合作与发布团队项目允许多个AxureRP9用户共同创作原型，图2-14示意创建团队项目对话框。可通过菜单新建或转换现有项目为团队项目。设计完成后，单击预览按钮或发布→预览命令直接预览，也可选择发布→生成原型文件，在发布项目对话框设置信息后输出，便于他人使用与测试。（08）教学小结与课堂作业PART-通过本章学习，学生应掌握统一设计尺寸与基础规范，熟练运用Axure页面、自适应视图、元件、动态面板、中继器、母版、变量与函数，理解团队协作与发布流程，为后续高保真原型制作奠定理论与操作基础。教学小结整体教学小结任务1：按本章尺寸规范绘制首页低保真线框图；任务2：使用动态面板实现轮播图，中继器展示商品列表；任务3：创建母版统一页眉页脚。作业任务提交Axure源文件及300字设计说明，说明如何确保尺寸规范与元件复用。提交要求校园二手书交易平台原型标准实践。作业主题课堂综合作业任选一款常用APP，完成“规范符合度”评估报告：列出3处未遵循本章尺寸或规范的具体界面元素，用Ax