用戶體驗詞條-22.線框圖（Wireframe）

【詞條】

線框圖(Wireframe)是軟體或者網站設計過程中非常重要的一個環節。線框圖是整合在結構層的全部三種要素的方法：通過安排和選擇界面元素來整合界面設計；通過識別和定義核心導航系統來整合導航設計；通過放置和排列信息組成部分的優先順序來整合信息設計。通過把這三者放到一個文檔中，線框圖可以確定一個建立在基本概念結構上的架構，同時指出了視覺設計應該前進的方向。

【案例】創建線框圖

創建線框圖需要完成以下三個層次的工作：

1. 明確線框圖的基本要素。線框圖的基本要素包括內容區域、內容描述、內容優先權層級、辨識信息、管理信息。

2. 填寫故事。內容包括場景、鏈接和窗體元素、注釋、目標和基本原理、版本歷史。

3. 增加可選細節。包括排布和視覺設計、整個設計中的背景信息和內容舉例。

下面給各位朋友分享一下，一位德國用戶體驗專家所做的線框圖（節選）。

這是一段可用性測試軟體的線框圖的節選，這個可用性測試軟體給出的是一個可用性測試項目，從制定項目計劃，到執行測試，最後到撰寫可用性測試報告的解決方案。節選部分是查看一個測試計劃：

1. 選定一個在項目中承擔的角色。

2. 選擇某一個項目。

3. 查看細節。

這三張圖，已經可以完美詮釋線框圖的各種組成要素。內容區域劃分明確、內容優先權層級劃分得當、場景、鏈接等頁面元素表達豐富、排布和視覺設計接近實際、使用顏色區分。

推薦閱讀：