第16节线框图16.121课件.pptxVIP

16.1线框图概述16.2线框图设计内容16.3线框图-注释16.4线框图绘制要点16.5线框图的作用第16节线框图

线框图是界面的二维示意图，重点关注界面的内容、功能和预期行为的空间分配和优先级排序。简单地说，它是一个页面或屏幕的布局，演示了特定页面或屏幕上将存在哪些元素，可以将其视为一个页面的界面框架。16.1线框图(wireframe)概述

线框图把产品（或系统）所有的界面布局、界面上的交互操作以及界面之间的关系都完整、准确、详细地描述出来。包含界面功能、信息层次、交互行为和方式等。16.1线框图(wireframe)概述

线框图设计内容包括导航、标题、图片、图标、文字内容、按钮、控件等，是交互设计师交付给软件开发人员和视觉交互设计师的交付件，是交互设计师与开发人员之间交流的工具，开发人员通过线框图进行设计开发。16.2线框图设计内容

注释提供了某些事物将如何工作的情境。设计线框图时，使用注释不仅可以说明设计本身，还可以说明其在动态环境中的工作方式。首先从用户流程开始，显示用户如何与设计交互的总体逻辑和过程。比如，用户从哪里开始、用户如何选择以及用户将看到什么？16.3线框图-注释

16.4线框图绘制要点线框图在绘制的过程中要注意以下几点：尽量不适用图片和颜色，通过明暗对比表达关系专注信息元素，界面功能和布局表达清楚UI逻辑

16.5线框