页面信息架构模型设计与实践
时间：2023-09-08 15:06:01 | 来源：网站运营
时间：2023-09-08 15:06:01 来源：网站运营
页面信息架构模型设计与实践：
在现在产品设计中，除了页面功能细节的设计外，页面空间的操作设计以及页面与页面之间的路径导航设计，对整个产品设计同样起着重要的作用。
在用户体验五层产品设计中，结构层的信息架构是对基本功能、框架、布局等进行概念设计。概念设计最终要体现在产品的页面中，在完成需求分析后，在信息架构概念设计基础上，如何对页面进行信息架构模型设计与运用至关重要。
一、什么是页面信息架构模型
页面信息架构模型包含页面之间以及页面内的功能空间布局和导航路径设计，确保每个功能有一个“空间”，并且从一处到另一处路线的导航充分高效的支持交互工作流程。
因此，页面信息架构模型是任何交互系统中用户界面的基础。
二、页面信息架构模型设计
页面信息架构模型需要基础的信息架构设计，信息架构设计请查看《信息架构-结构层》。
1、页面信息架构模型基础模块页面信息架构模型基础模块包含空间布局和导航路径两个方面。
常用的空间布局容器
页面Page弹窗Dialog侧边栏Drawer常见的导航路径页面组件
Menu导航菜单Tabs标签页Breadcrumb面包屑PageHeader页头Steps步骤条Affix固钉Anchor锚点...页面间、页面内通过对空间布局和导航路径的设计，从而完成页面信息架构模型的设计。
2、页面信息架构模型设计页面信息架构模型设计包含页面间信息架构设计和页面内信息架构设计。
页面间信息架构依据信息架构以及业务流程，划分好页面，并做好页面之间的跳转路径。
页面内信息架构包含主框架页面信息架构设计和一般业务信息架构设计。主框架页面信息架构设计需要包含所有基础功能，巨细的功能可以设计新的页面空间承载，主要在于整个功能布局和功能页面路径导航的设计。
例如：XX模块页面，包含2个子页面，一个抽屉模态空间，一个弹窗模态空间的页面信息架构设计（JINGWHALE Sketch插件）如下：
JINGWHALE Sketch插件Interact Logic功能生成主要包含4条空间布局和导航路径：
XX模块主页面->子页面1->弹窗模块XX模块主页面->子页面2->抽屉模块->弹窗模块XX模块主页面->抽屉模块XX模块主页面->弹窗模块3、页面信息架构模型描述评估当页面信息架构模型设计出来后，可以使用以下 5 个用户绩效因素来评估概念模型的影响：
1、心理模型与理解力。如果你了解它，你就可以使用它！2、位置感知。如果你知道自己在哪，你就可以到达目的地！3、视觉搜索效率。如果你能找到自己所寻找的，你就可以完成目标！4、操作（执行动作）负荷。如果你的操作较少，花费的精力也就减少了！5、工作记忆负荷。如果你不需记住太多内容，你就可以做到更多！三、设计稿信息架构展示
依据页面信息架构模型，使用项目设计系统规范进行页面设计，设计稿完成以后，展示整个模块的页面信息架构。
例如：XX模块页面的设计稿页面信息架构展示如下：
JINGWHALE Sketch插件Interact Logic功能生成
JINGWHALE，致力于设计出最符合用户体验的产品。
在线咨询
