7.1 線框圖概述
目的--幫助項目團隊對產品頁面的功能、行為、內容相關優先級的理解。內容指用戶在界面上看到或者操作的任何元素。
受眾--項目團隊所有成員
工作量--取決于使用方式和實現方式
情境--在較高層級的結構設計（流程圖或站點地圖）和屏幕設計之間創建的
格式--高保真、低保真
7.2 線框圖簡介
線框圖與最終產品的對比：
可以在線框圖中加入操作相應。（并不是制作成低保真demo）
線框圖可以使團隊的關注集中在：顯示信息的種類、可用功能的范圍、信息與功能的相對優先級、顯示特定類型信息的規則、不同場景的顯示效果。
線框圖本身也需要文字說明，本章結尾部分介紹如何給圖片添加文字說明。
線框圖面臨的挑戰：1現實--無法反應頁面布局、無法演示交互活動。2負擔--讓線框圖接近實際界面效果；在線框圖中解決過于細節的問題，容易使人誤解線框圖的作用。
線框圖的真正挑戰是了解功能從哪里開始，到哪里結束，以及它們解決這些問題到什么樣的程度。
7.3 線框圖剖析
7.3.1 第1層：矩形，且只用矩形
（這一層的內容并不是我以前理解的交互設計線框圖，而是把內容以矩形框的形式按照優先級進行排列，與真實頁面的長相無關）
1、內容區域--一兩句話說明內容區域的用途。規劃好結構區域、可重用區域、獨特區域
2、優先級與區別--
3、屏幕標識符--給屏幕加唯一標簽，便于檢索。
標明變化、代碼等，如果有需要。
7.3.2 第2層：矩形與表單
使頁面的結構接近真實頁面可能會有風險。（這一層的線框圖會漸漸接近真實頁面的長相）
1、布局--通過矩形的尺寸來表示優先級，與位置無關。為線框圖添加布局，需要明確頁面的外觀。項目團隊的思維需要從矢量繪圖轉變到瀏覽器渲染。
2、標簽、結構和指示性內容--幫助導航，確認當前頁面的位置。（？）使用顏色來說明錯誤消息等特定類型的文字。
3、示例內容--真實內容能幫助項目團隊評估界面效果。創造內容的方法：虛構內容、象征性內容、標簽形式的內容、拉丁文lorem、曲線
4、功能元素--即交互元素。顯示這些界面控件可以表示界面所提供的行為范圍，并且可以建立用戶所需的輸入范圍。保真度到使用這個widget的最簡單方法。明確實現行為的范圍，描述用戶如何觸發這些行為，顯示響應用戶操作的界面組件。
7.3.3 第3層：其他形狀
這一層的元素能美化線框圖，非實現線框圖用途的必需，有可能會轉移你原本希望通過圖形傳達的內容。
1、網格--視線框圖美觀，利于交流優先級。但是非專業設計人員使用網格可能達不到預期效果。可使用960網格
2、優先級樣式--對線框圖部分使用樣式來強調優先級和功能
3、美學元素--第3層的顏色不同于第2層中的顏色，第3層的顏色指的是產品色調等。給線框圖增加樣式可能會轉移人們對線框圖用途的關注，但它能增加一定的真實性。
7.4 創建線框圖
7.4.1 基本決策
1、規模：頁面或是內容區域--既可以每個線框圖對應一個頁面，也可以創建某個內容區域的線框圖。可以創建頁面組件以重復使用。對于單個內容區域的線框圖，要在這個線框圖的交付件中說明這些組件如何相互協作，如何整合到界面上。記錄單個內容區域的時候，也要使用可視化提示，幫助人們理解他們看到的只是局部。
2、保真度：需要多貼近實際--根據目的、顧客、項目的上下文來決定線框圖的保真程度。低保真（lo-fi）-新Ui、團隊角度、開發新產品。高保真（hi-fi）-可用性測試、經驗不豐富的項目參與者、重設計一個完善的產品。
3、抽象性：內容要多具體--解釋行為時，抽象內容適合描述功能規范。給項目團隊形象描述交互過程時，設計過程中月具體越好。
4、深度：要有多少變化--表面描述基本的屏幕，深入層次描述詳細的信息。屏幕、頁面在不同環境中的變化、屏幕某個部分在不同場景下的變化
5、目的--藍圖，給開發看，包含所有細節。概念，獲取可行性或需求的反饋。測試，添加真實內容和能連接的這種狀態的界面。
6、受眾--使用線框圖的人，這些人對抽象程度的接受度。
7.4.2線框圖技巧
1、先畫草圖--解決基本問題，繪制少量草圖，進行多次迭代，解決不同的問題。關注質量。
2、確定頁面的目的--為每個界面設置目的，可以幫助進行設計決定、優先級。
3、回憶設計原則--項目開始時定下來的基礎指導和設計原則（比如微信的收件人體驗高于發件人）
4、列出頁面內容--有選擇的加入到線框圖中
5、使用真實場景--多個場景具有變化時，為每個場景創建單獨的線框圖。
7.4.3 提高你的線框圖繪制技能
1、采用模塊化方法--設計組件，排列組合成界面。為組件編碼易于檢索。
2、建立樣式--為保持一致性，創建一組簡單的樣式。
3、創建元素庫--（有的軟件會提供現成的元素庫）
4、保持一個設計工作室--多人協作。
7.5 推介線框圖
7.5.1 確定會議目的
任何線框圖檢查會議的目的都是討論用戶體驗。
1、確定一個概念--校準性，能清晰追溯到所對應的設計問題。復雜性，少量的線框圖可能與產品實際的復雜程度不相符。剩余工作，描述還有那些設計工作需要在開發之前完成、討論。
2、站在更高角度來討論體驗--這些方法能否實現所有目標？這個方法是否符合設計原則和良好的設計實踐方法？我們需要重新評估需求嗎？這個界面暗示什么？基于討論結果獲得新的線框圖。
3、從一個更深層次討論體驗--是否處理了所有可能的場景？項目團隊是否有足夠的信息來呈現一個可視化設計？界面需要什么樣的內容？
7.5.2 調整推介
1、建立情境背景--目前設計階段處在項目的什么位置，設立會議目標，本次會議評審界面屬于哪些場景。
2、描述視覺規則
3、突出重要的設計決定--全部主題，主要目標、原則、需求，頁面目標，重要的設計創新
4、提出原理和確定約束
5、闡述細節
6、表達的含義
7、獲取反饋
8、提供評審框架
7.5.3 避免新手問題
1、設定關于目標的預期
2、內容分歧--明確討論范圍
3、視覺設計的分歧--線框圖不是解決這些問題的正確工具
4、結構、美化和聲音：控制重疊--不要獨立三者的關系
5、拒絕反饋和自我封閉--這兩者要避免。設計決定應該由以下驅動：計劃，標準，合理、相關和正確的測試。
7.6 運用線框圖
7.6.1 注釋線框圖
使用標記來指出線框圖的重要部分，然后再旁邊注釋進行細化。也可以使用用半透明的區域進行注釋。可根據需要選擇進行輕注釋（只介紹界面功能和行為）還是重注釋（詳細到可以開發）。
1、概述--“當...時使用”“當...時不使用”、場景、更多信息
2、行為--界面如何響應用戶輸入。鏈接、表單元素、表單提交、轉變、其他規則
3、內容規則--最近、數量、類型、主題、其他元數據、實用性和通用性、默認值、來源、格式
4、狀態--頁面的一個區域在不同情況下不同格式的顯示稱為狀態。
7.6.2 線框圖與其他交付件的關聯
1、為頁面提供情境背景--站點地圖和流程圖有利于為線框圖提供情境，顯示它是如何與其他頁面或模板關聯的。技巧：放大關鍵部分、從站點地圖的結構中去掉大多數或者全部格式、突出站點地圖中結構相關頁面
2、提供組件的上下文背景--可以把相關頁面的一個小縮略圖合并進來突出組件。
7.6.3 線框圖原型測試和可用性測試
1、建立場景--原型
2、選擇原型方法--軟件
3、加入范圍以外的頁面--（本次設計涉及的頁面以外的頁面）
7.6.4 即時線框圖
在會議上及時根據反饋整合設計創意，并在需要時創建下一個版本。
7.7 以書寫方式進行設計
隨著技術的進步等等，線框圖可能會在將來發生改變，但是它闡述事物復雜性的本質保持不變。
