CHAPTER 02 線框圖設(shè)計指南

2.1 線框圖的重要性

2.1.1 線框圖概念理解

? 概念

線框圖，英文為Wireframe或Wireframing。本書所說的線框圖是指在網(wǎng)站設(shè)計（不僅僅用于網(wǎng)頁界面設(shè)計）中對網(wǎng)站結(jié)構(gòu)和層級關(guān)系做出表現(xiàn)的一種方式。它一般用來布置內(nèi)容和功能，滿足用戶的頁面瀏覽需求。

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

? 掌握線框圖設(shè)計的好處

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

· 養(yǎng)成良好的設(shè)計習(xí)慣，好的設(shè)計習(xí)慣能給你未來的工作創(chuàng)造更多的可能。

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

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

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

· 可以快速調(diào)整整體布局，不會因為復(fù)雜的設(shè)計元素造成調(diào)整過程中的浪費。

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

2.1.2 與原型圖的關(guān)系

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

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

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

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

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

表　線框圖和原型圖的區(qū)別

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

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

· 分屏，能夠更好地表現(xiàn)網(wǎng)站的動態(tài)效果。

· 使用簡單的形狀和色塊替換可變內(nèi)容，節(jié)省時間，利于思路的擴(kuò)展。

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

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

· 使用現(xiàn)成的PSD模板，節(jié)省基本原型的制作時間。

2.1.3 與效果圖的關(guān)系

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

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

2.1.4 與設(shè)計軟件的關(guān)系

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

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

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

· 容易在最少的細(xì)節(jié)設(shè)計階段調(diào)整布局。

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

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

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