線框圖

線框圖(Wireframe)是軟體或者網站設計過程中非常重要的一個環節。

基本介紹

• 中文名：線框圖
• 外文名：Wireframe)
• 過程：軟體或者網站設計過程
• 目的：建立頁面模板

線框圖簡介

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

線框圖建立頁面模板

其實對於更小或更簡單的網站來說，一個線框圖就足夠作為所有即將建立的頁面的模板。對於大多數項目來說，無論如何，都需要用多個線框圖來傳達複雜的預期結果。不過，你不需要為網站的每一個頁面都準備一個線框圖。正如結構設計流程允許我們把內容要素總結成各個種類一樣，一個數量相對較少的標準頁面類型將在繪製線框圖的過程中慢慢浮現。

線框圖的視覺設計

線框圖在正式建立網站的視覺設計的流程中，是必要的第一步，但是幾乎每一個參與這個開發過程的人都會在一些任務點中使用它。負責戰略層、範圍層和結構層的設計者可以藉助線框圖來保證最終產品能滿足他們的期望。真正負責建設這個網站的人，則使用線框圖來回答關於網站應該如何運作的問題。

隨著用戶體驗領域的不斷成熟和發展，線框圖的責任有時還成為企業內部某種口水戰的主題。一些網站研發團隊很鮮明地把這部分工作分成兩個部分，由兩個獨立的角色（有時候是整個部門）“信息架構師”和“設計師”來承擔。

線框圖的設計工具

在Web開發和軟體開發項目中線框扮演著極其重要的角色，因為它能允許開發者和客戶在項目搭建中可視化網頁。友好性、易操作以及內容多樣化對於網站來說非常重要，利用線框工具可以幫助你簡化繁瑣的設計過程為你節省時間和精力。常用的工具包括PowerMockup—為PPT添加線框、Moqups—線上Mockup線框工具、Wireframe.cc — 線上線框工具等。