CHAPTER 02 線框圖設計指南

2.1 線框圖的重要性

2.1.1 線框圖概念理解

? 概念

線框圖，英文為Wireframe或Wireframing。本書所說的線框圖是指在網站設計（不僅僅用于網頁界面設計）中對網站結構和層級關系做出表現的一種方式。它一般用來布置內容和功能，滿足用戶的頁面瀏覽需求。

線框圖設計一般在視覺設計前期進行，是在添加完整的視覺設計和網站具體內容之前所做的工作。實際工作中，設計會受諸多因素影響，如產品經理、客戶、素材、靈感、團隊、項目需求等。項目需求的變化、人為主觀因素的變化也將導致稿件的多次修改。那么線框圖是否能作為一個節省時間的前期溝通工具呢？事實上線框圖一般不作為與客戶溝通的工具，因為它在細節上可以和最終的設計媲美，需要花大量的時間和精力去制作，與客戶前期溝通時建議使用簡潔的交互原型圖。在本章后面的內容中，大家會學到如何做一個交互原型圖。這里推薦大家直接使用Photoshop設計線框圖，不要將它當作是“草稿”，這一步是為了減少重復設計，方便直接將線框圖應用到視覺設計階段。圖2-1所示為最終的線框圖效果。

? 掌握線框圖設計的好處

設計線框圖是一個可選工作流程，設計師可以根據具體的項目進行取舍。設計過程中不要求大家一定要使用線框圖來進行視覺設計，但線框圖的制作具有以下幾個方面的價值。

· 養成良好的設計習慣，好的設計習慣能給你未來的工作創造更多的可能。

· 線框圖也反映了現代化的工作流程，能夠讓你學會更多的Photoshop技巧。

· 作為視覺設計的一個起點，能提高后期視覺設計的便利性，提高設計質量。

· 能夠靈活更換不同的圖片、文字，節省試錯的時間。

· 可以快速調整整體布局，不會因為復雜的設計元素造成調整過程中的浪費。

· PSD文件可以直接用于后期的視覺設計階段。

2.1.2 與原型圖的關系

既然提到線框，就再說一說原型（Prototype）。簡單通俗地講，原型可以理解為是一個功能全面的產品的“工作和演示”模型。原型在不同領域（如心理學、文藝創作、機械設計制造）的概念也不是一致的，本書只針對Web設計的原型做一個簡單的解讀。在實際工作中，需要將網頁界面變成可以使用的代碼，通過瀏覽器和電子設備去訪問和使用。單純的界面其實是沒有可用性的，所以我們必須考慮配合前端和后端開發人員的工作，還要考慮配合產品經理等工作。市面上已經有很多成熟的原型圖制作工具。

一個完整的網站，需要經過設計，經過前端耐心的打磨。雖然目前很多制作網頁原型的工具很強大，但由于越來越多的網頁的定制化需求增多，原型工具直接生成的項目不能給開發人員提供可行性和可擴展性極強的代碼，這就會造成返工。所以筆者并不建議使用工具直接生成Web項目原型，雖然它可以點擊，有交互動畫，但是最終要提高項目質量，前端工程師還得重新去選擇框架、重新編碼。在一些云端工作非常成熟的企業，它們會有自己的協作工具，有匹配的原型生成工具，這種情況使用原型工具是非常具有優勢的。

大家注意，這里要區分“原型”“原型圖”和“交互原型圖”。原型的知識面比較廣，想深入了解可以找相關的專業圖書和知識內容進行學習。這里講述的原型圖是專門針對Web設計前期的一個對網站總體的模型構想圖，書中也稱其為“交互原型圖”。針對Web設計，設計時需要有一個人機交互的思想，如何將設計運用到實際操作中，如何面對用戶，這是設計師需要考慮的問題。但是單純地使用圖片很難直接表達自己的想法，使用一些可以生成代碼的原型工具，會由于操作不方便及一些局限性，阻礙設計師的設計思想。而“交互原型圖”就是使用圖片序列，來表述對網站的交互設計思想的一套圖片。本書的“原型圖”和“交互原型圖”實際上是一個概念。其他領域的原型圖和原型不一定和網頁設計領域一致，大家應該具體問題具體分析，不要一概而論。在這里講解原型的一些零散的概念，是為了讓大家更好地理解原型和線框的區別和聯系，有一個更靈活的意識去做界面。

在實際運用中，經常會有將原型圖與線框圖放在一起表述的情況，大家只要合理地理解它們的關系就可以，它們之間并無明顯的概念對錯。在Web設計過程中，為了提高效率和質量，減少返工率，也經常會將線框圖和原型圖搭配在一起使用。

其實線框圖和原型圖在工作流程和需求上有很多類似之處，主要區別在于功能。下表詳細列出了它們的區別。

表　線框圖和原型圖的區別

這里介紹一種“交互原型圖”，它常用來與客戶溝通，用作設計效果的展示及線框圖設計的工作模型，它能夠反映設計者的設計思想及頁面交互行為。它不能夠直接用作線框圖設計，而是作為一個參考和溝通工具來使用。本書介紹的交互原型圖也屬于設計草圖的范疇，但是由于紙張的表現力不夠，而且我們需要構建一個演示模型，所以筆者比較推薦使用這種方法。如果大家覺得這種稱呼不習慣，可以叫它草圖，也可以叫它原型圖。圖2-2為商業項目的初期溝通用的交互原型圖，它有以下幾個特征。

· 直接使用PSD，便于修改。

· 分屏，能夠更好地表現網站的動態效果。

· 使用簡單的形狀和色塊替換可變內容，節省時間，利于思路的擴展。

· 能夠更好地將前期的設計思維傳達給客戶，提高過稿率，減少后期設計階段返工的可能性。

· 直觀大方，可以在任何地方增加注釋。

· 使用現成的PSD模板，節省基本原型的制作時間。

2.1.3 與效果圖的關系

這里所說的效果圖，就是在線框圖基礎上進行的比較具體、完整的視覺設計。它反映了一個網站的所有細節：品牌標識、文本樣式、導航菜單、Head、Footer、色彩關系、字體、布局等，甚至是比較抽象的用戶體驗、頁面操作流程、交互效果、行業特征、目標人群特征等。

圖2-3所示的效果圖與圖2-1相似，是線框圖的具體視覺表現。在下一章中，我們會通過設計規范，來具體講解實際操作和技巧。

2.1.4 與設計軟件的關系

線框圖的設計工具軟件多樣，可以是Photoshop，也可以是Illustrator、OmniGraffle、Indesign、Fireworks、ProtoShare、Word，還可以是其他的非主流軟件。專業的設計師推薦使用Photoshop，當然并不是只能用Photoshop，你甚至可以搭配其他軟件，協作設計。而使用Photoshop有以下一些原因。

· 可以自定義字符樣式、段落樣式、圖層樣式等，并重復使用它們。

· 很容易修改、移動或縮放任意圖形對象。

· 容易在最少的細節設計階段調整布局。

· Photoshop在圖形處理方面具有強大的性能，可以對色彩、圖形效果做多種模擬。

· 可以直接用作視覺設計的PSD正式稿，而不是單純作為參考。

如圖2-4和圖2-5所示，圖中將設計中常用的字符或段落樣式都儲存為模板，以供重復使用，大大提高了設計效率。真正做設計時，網站線框圖設計是一個必須的過程，大家不妨嘗試用這種方式去設計界面。從Photoshop菜單欄中執行【窗口→字符樣式/段落樣式】命令，打開對應的面板，即可編輯自定義樣式，然后直接選中文本圖層即可快速應用效果。在創建線框圖的實際操作中我們會詳細講解此功能。