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

2.1 線框圖的重要性

2.1.1 線框圖概念理解

? 概念

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

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

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

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

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

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

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

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

· 可以快速調(diào)整整體布局，不會(huì)因?yàn)閺?fù)雜的設(shè)計(jì)元素造成調(diào)整過程中的浪費(fèi)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

· 很容易修改、移動(dòng)或縮放任意圖形對(duì)象。

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

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

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

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