WireFrame.cc:線上線框圖繪製工具是款極簡主義的線框圖繪製的應用，不僅易用而且介面漂亮。操作簡單、直觀，輸出物也非常吸引人。

WireFrame.cc跟Mockflow這些線上原型工具類似，但是Wireframe.cc要更簡潔一些，控制元件也非常基本簡單，支援網頁和手機橫豎版三種模版。

1、線框圖的定義

線框圖是WEB頁面的草圖，展示了導航系統的骨架，或者每一頁的內容的基本資訊。線框圖可以作為和專案成員、

客戶分析討論的視覺工具，從頁面設計的需求、概念到架構圖的過程中，都可以使用。

線框圖的一個主要職能是界定頁面模版的佈局。

2、什麼是線框圖?

線框圖是通過一系列的基本圖形，如矩形、菱形、線條來設計頁面的基本框架、界定頁面包含的內容、各內容的排版，

這些內容可以是Logo、導航、目錄選單、統一的頂部、底部、名牌、內容等等。

3、線框圖為什麼會有效?

只需要最小的技能就可以建立頁面原型。允許對設計進行快速的反覆測試。聚焦網站是如何工作和展示，而不是視覺的美感，避免在開發早期落入細節的誤區。在專案早期就可以交付給客戶稽核，減少美工在設計階段的反覆工作量。

4、線框圖處理什麼?

當專案組提交一份網站的設計原型出來時，使用者、客戶和設計者會傾向視覺化的原型具體元素而相對忽視原型的頁面

結構和排版等。線框圖嘗試將網站的視覺感受和工作及閱讀形式分離出來，避免美觀的元素的頁面框架的分析造成干擾。

線框圖應該包含哪些元素:

a、關鍵的頁面元素及其位置:頭部、底部、導航、內容物件、品牌元素、產品列表等。

b、分組:邊欄、導航欄、內容區域等等。

c、標籤:頁面標題、導航連結、內容物件的頭部等。

d、標籤和偽文字:線上框圖中放置示範性的標籤和文字。

5. 那些頁面應該製作線框圖?

簡單而言:主頁和模板。

詳細的說法是:任何需要客戶批准的、和主頁有著截然不同的排版和內容的頁面。

下列這些頁面應該設計線框圖(包含但不限於此列):

主頁、各子站點或主欄目的展示頁、內容頁面模板、討論頁、搜尋結果頁、產品列表頁、產品詳細頁面、結賬流程及其他流程頁面、我的賬號主頁和模板頁面、404 錯誤頁。

6、線框圖的設計詳細程度

線框圖的設計詳細程度依賴於專案處於那個階段。

線框圖有三類級別:抽象檢視、低保真度、高保真度；

抽象檢視:僅展示基本的頁面元素和功能名稱，不涉及該內容和功能的細節，不涉及頁面排版。

低保真度:只列出每頁所需的頭部、底部、導航型別、內容物件等，涉及基本的排版佈局。

高保真度:和最終的設計非常接近，包含導航元素的尺寸和位置、標籤、標題、清晰明確的排版佈局。

7、標籤和文字的展示

目前而言有兩種觀點，一種是建議使用偽文字，因為這樣閱讀者不會被內容干擾。另一種則是尋求線框圖中反映有代表性的內容，這樣可以捕捉到長標籤和動態文字引起的問題，更加貼近實際使用。

8、是否需要顏色?

線上框圖中，顏色應該被保守的使用，原因很簡單，視線容易被有顏色的元素所吸引而影響了對整體佈局邏輯的理解。

一般而言，不使用顏色會讓讀者著重於思考頁面的設計邏輯而不是頁面的設計美感。所以一般線框圖都是黑、灰和白三種顏色為好。