- Objective: 构建低保真度的蓝图、框架 - Breadcrumb: # 概念阐释 线框 wireframe 是构建数字页面的**低保真度**表示，是创建数字页面的第一步蓝图、框架。线框表示了数字界面的结构布局和排列。 # 实例 线框图工具： - figma - Adobe XD - sketch - Balsamiq  # 相关内容 ## 线框与草图的区别 - 低保真度虽然看起来像用笔和纸坐的素描，但它和草图不同，草图更加重视概念、想法，线框是用来呈现已经构建好的界面的框架。 ## 线框元素 - 这些低保真元素用作**高保真**设计元素的[占位符](https://www.codecademy.com/resources/docs/uiux/placeholders)， - 高保真都是真正填充细节的部分，在线框中会通过注释来记录使用什么材料。 - 其中包括但不限于： - 徽标logo：标记为 logo 的矩形 - 导航Navigation：包含导航链接的矩形 - [搜索字段](https://www.codecademy.com/resources/docs/uiux/search-fields) search fields：标有搜索字段的矩形，带有放大镜 - [文本](https://www.codecademy.com/resources/docs/uiux/text)text：标有文本字段的矩形 - 按钮button: 标有按钮的矩形或药丸形 - 图像images：标有图像的框 - 视频Videos：标有视频的框，通常带有播放箭头 - 调色板、图像和[版式](https://www.codecademy.com/resources/docs/uiux/typography)等装饰性界面元素将在设计过程的稍后部分引入。  # 参考资料 - [演示示例](https://www.codecademy.com/courses/intro-to-ui-ux/projects/ui-and-ux-wirecademy-ridgeline)