WEB前端設(shè)計之我見

郭琳

摘 要：近年來網(wǎng)頁制作技術(shù)突飛猛進地發(fā)展，各種WEB前端設(shè)計技術(shù)與工具層出不窮，如何做到設(shè)計與技術(shù)完美結(jié)合，合理利用現(xiàn)有工具提高設(shè)計的質(zhì)量和效率，是專業(yè)技術(shù)人員不斷探討的問題。該文結(jié)合筆者自身多年教學和實踐經(jīng)驗，從WEB前端設(shè)計的基礎(chǔ)知識儲備、設(shè)計工具選擇、設(shè)計思想、設(shè)計流程等幾個方面，從實用性、易用性角度出發(fā)進行了較為全面地闡述。

關(guān)鍵詞：WEB前端設(shè)計 Bootstrap Axure Kuler WEB前端設(shè)計流程

中圖分類號：TP31 文獻標識碼：A 文章編號：1672-3791（2016）05（c）-0007-04

通過多年教學和項目實踐發(fā)現(xiàn)，任何一個學科、一門技術(shù)都不是單一知識、單純技術(shù)的羅列。WEB前端設(shè)計也是如此，它不僅需要設(shè)計人員具備豐富的設(shè)計知識儲備，還需要通過科學合理的實施步驟及高效的工具將這些設(shè)計思想付諸于實踐。工欲善其事，必先利其器。不妨從WEB前端設(shè)計所需要的知識儲備情況和使用工具開始說起。

1 WEB前端設(shè)計知識儲備與工具

1.1 知識儲備

（1）必備：平面構(gòu)成、色彩構(gòu)成、字體設(shè)計、標志設(shè)計、版式設(shè)計、HTML、DIV、CSS和JavaScript。

其中，平面構(gòu)成、色彩構(gòu)成、字體設(shè)計、標志設(shè)計和版式設(shè)計是做好WEB前端設(shè)計的基礎(chǔ)理論。都說人是視覺動物，沒錯，往往人們對第一次訪問的網(wǎng)頁的關(guān)注時間僅為3～10 s，設(shè)計得好的網(wǎng)頁能在短時間內(nèi)快速載入并從視覺和內(nèi)容兩個方面吸引瀏覽者，這樣才能讓提升網(wǎng)站的點擊率和關(guān)注度。

同時，HTML、DIV和JavaScript則是將設(shè)計好的素材、整理好的文字進行擺放歸位和進行動態(tài)交互的基礎(chǔ)。可以用圖1和圖2進行說明它們之間的關(guān)系。

用一句話來概括就是“兩個構(gòu)成+3個設(shè)計=設(shè)計思想”。

而HTML、DIV、CSS和Javascript的作用可以用圖2來說明。

用簡單的一句話來描述，它們的作用就是“按塊就搬、美化外觀、實現(xiàn)交互”。

（2）可選：Bootstrap、FlatUI、Ajax、jQuery等。

Bootstrap，是前端框架。它基于HTML、CSS和Javascript，方便易用，使前端開發(fā)更加高效。其新穎的布局方法和容易上手的組件和插件尤為實用，在不同客戶端的兼容性極佳。Bootstrap已經(jīng)成為現(xiàn)在前端框架設(shè)計的主流技術(shù)，值得掌握。

FlatUI是iOS上易用的扁平風格效果，模擬iOS 7的風格，是受歡迎的免費的WEB界面工具組件庫。

Ajax和jQuery同JavaScript一樣，用于完成WEB前端頁面交互性，三者具體介紹詳見設(shè)計流程部分。

1.2 設(shè)計工具

（1）必備：Photoshop、Dreamweaver、Flash、Firework、Illustrator。

（2）可選：Axure、LayoutIt、Kuler等。

必備的工具中Dreamweaver和Flash一個是疊碼測試工具，一個是動畫工具，分工明確。值得比較的是Photoshop和Illustrator，F(xiàn)irework和Axure。

具體功能比較如表1和表2。

由表1可見，在矢量圖繪制、輸出上Illustrator占優(yōu)勢，而在圖像處理方面Photoshop占優(yōu)勢。所以在WEB前端設(shè)計中，logo、圖標和Flash動畫原型的設(shè)計推薦使用Illustrator，其矢量繪圖工具豐富，而且矢量圖也比位圖在制作動畫時更節(jié)省存儲空間，有利于動畫的優(yōu)化輸出，從而降低網(wǎng)頁載入的時間成本。

由表2可見，F(xiàn)irework作為傳統(tǒng)的網(wǎng)頁三劍客之一，其功能強大性方面是毋庸置疑的，在網(wǎng)頁布局、GIF動畫和優(yōu)化輸入及與Flash等Adobe系列軟件銜接方便都表現(xiàn)出色，但與Axure比較起來，其在方便易用和交互性演示方面還是略顯遜色。在具體設(shè)計過程中，可根據(jù)不同的需要選擇合適的工具。

LayoutIt是Bootstrap的可視化在線布局系統(tǒng)，其可通過簡單的拖拽完成布局設(shè)置、基本CSS、組件和交互組件的快速布局，并可對已布局好的網(wǎng)頁進行預覽、原碼下載和保存。LayoutIt的好處就是按布局放代碼塊，然后再根據(jù)實際需要修改代碼，節(jié)省了大量的壘碼時間。

Kuler是Adobe的一個實用擴展插件，用戶可以很容易在完整安裝的Flash、Photoshop等軟件中找到它。Kuler是一個關(guān)于色彩和靈感的在線社區(qū)，設(shè)計愛好者們在這里探索、創(chuàng)建和共享顏色主題。Kuler的界面如圖3所示。

另外，很多可以快速上手的前端頁面生成工具也很吸引人們的注目，它們以新穎的設(shè)計理念、豐富的模板庫和良好的客戶端兼容性廣受用戶的歡迎。

2 WEB前端設(shè)計思想

2.1 遵循設(shè)計的四大基本原則

無論是平面設(shè)計還是WEB前端設(shè)計都是設(shè)計，而放之四海而皆準的設(shè)計原則是不變的。只要明確設(shè)計的四大基本原則并會靈活使用，設(shè)計質(zhì)量一般都會得到基本保證。

2.1.1 親密性

相關(guān)類目放在一個視覺單元內(nèi)是必須的。這樣做有利于理順瀏覽者的思路，避免混亂。

2.1.2 對齊

整齊有序的內(nèi)容有得于建立頁面內(nèi)容間的視覺聯(lián)系，便于瀏覽者瀏覽，而且給人以清晰、清爽的外觀印象。

2.1.3 重復

主要是指設(shè)計中視覺要素的重復。例如顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小和圖片等。使設(shè)計既增加了條理性，風格上也趨于統(tǒng)一。

2.1.4 對比

對比可以避免頁面上的元素太過相似，并突出頁面要強調(diào)的重點內(nèi)容，從而使頁面達到引人注目的最終目的。

2.2 注意WEB前端設(shè)計與出版物設(shè)計的差別

（1）為統(tǒng)一WEB前端設(shè)計風格，重復原則往往更為有效。主要體現(xiàn)在配色方案、字體和組件等方面，CSS在這里將發(fā)揮巨大的作用。

（2）不要讓訪問者頁面上“滾來滾去”，頁面，特別是訪問者進入的第一頁面，保證其頁面內(nèi)容的精簡、完整性是很重要的。

（3）增加可讀性。行寬要更小。字體的選擇上也要選擇易讀性強的字體。例如，中文正文一般采用宋體或幼圓。

（4）精簡性。界面設(shè)計應盡量簡潔，便于具體功能實現(xiàn)。

3 設(shè)計流程

3.1 了解用戶需求，形成設(shè)計草圖

在設(shè)計之前應根據(jù)用戶的具體頁面風格要求和功能需求形成設(shè)計草圖。為避免重復工作，此處草圖應進行反復推敲，在保證簡潔美觀的前提下，還要考慮后臺開發(fā)人員的開發(fā)難度。

3.2 形成設(shè)計圖

可利用專業(yè)的設(shè)計軟件來實現(xiàn)，例如PS、AI等，保證尺寸精度和顏色的準確度并細化到位。對顏色、字體、布局最好形成標準化的表格、圖解作以說明，方便后續(xù)CSS文件的編寫。然后輔助以FW、Axuer之類的軟件可以選擇生成切片、HTML頁面和CSS文件，不過CSS文件中的樣式名都是默認生成的。

3.3 植入框架，統(tǒng)一外觀

（1）植入框架。

根據(jù)切片的尺寸利用DIV進行布局，而使用Bootstrap前端框架則更為簡單，其可以檢測不同的客戶端設(shè)備進行自適應的布局，而它的網(wǎng)格系統(tǒng)也使用戶瀏覽頁面得到更好體驗的同時，也降低了用戶端的負載。

媒體查詢代碼示例：

@media （min-width： @screen-sm-min） { … }

自適應布局示例：

同時，Bootstrap豐富的布局組件和插件可以快速完成前端頁面的交互性布局需要。

（2）統(tǒng)一外觀。

這里的統(tǒng)一指的是通過CSS文件編寫或修改使前端各頁面在文本、顏色、頁面布局、組件風格等方面達到外觀上的統(tǒng)一，例如Header、Footer等部分。

3.4 體現(xiàn)交互性

實現(xiàn)交互性的主要手段的有JavaScript、Ajax、jQuery。下面將3種技術(shù)進行對比。

（1）JavaScript是一種網(wǎng)絡(luò)腳本語言，被用來改進設(shè)計、驗證表單、檢測瀏覽器、創(chuàng)建cookies，以及更多的應用。

（2）AJAX即Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），是一種組合技術(shù)。它可以在不重新加載整個頁面的情況下與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁。

（3）jQuery是一個JavaScript函數(shù)庫，極大地簡化了JavaScript的編程。它包含以下幾項特征。

①HTML元素選取。

②HTML元素操作。

③CSS操作。

④HTML事件函數(shù)。

⑤JavaScript特效和動畫。

⑥HTML DOM遍歷和修改。

⑦AJAX。

⑧Utilities。

由此可見，jQuery實際上是完成了對JS的封裝，使JS和Ajax使用起來更加方便。

在實際WEB前端設(shè)計中，設(shè)計者可以根據(jù)用戶具體需求使用上面的技術(shù)。

3.5 完成兼容性

造成WEB前端頁面不兼容的本質(zhì)原因是不同瀏覽器內(nèi)核解析同一段代碼的方法不一樣。比如說margin和padding參數(shù)，在不受控制的情況下會被解析成不同的默認值，解決的辦法就是讓它們都固定下來，例如，都設(shè)置為0；再比如說由于為塊設(shè)置了float而帶來的一系列問題等等。解決的辦法就是通過不斷的摸索，掌握清楚主流瀏覽器的解析習慣，并通過一些有效的代碼（例如CSS Hack）去規(guī)避兼容性問題，還要學會利用工具（例如BrowserShots）去測試。

但是，往往嚴謹?shù)那岸嗽O(shè)計師很少會遇到棘手的兼容性問題。可見，設(shè)計沒有捷徑可言，只有以嚴謹認真的設(shè)計態(tài)度，才能得到令人滿意的頁面。

3.6 SEO優(yōu)化

SEO（Search Engine Optimization），即搜索引擎優(yōu)化，也是WEB前端設(shè)計要考慮的重要環(huán)節(jié)。Head、標題、圖片名稱及alt還有黑體文字等要素在設(shè)計時就要做好文章，不要等到最后完成頁面時再去優(yōu)化。SEO一定要變成設(shè)計時的潛意識。

4 結(jié)語

WEB前端設(shè)計看似簡單，實則不然，不僅需要充分了解用戶的訴求，還要運用有效的設(shè)計思想和設(shè)計手段，遵循嚴謹?shù)脑O(shè)計步驟，秉承嚴謹?shù)墓ぷ髯黠L和不斷學習的精神，才能達到預期的設(shè)計目標。

參考文獻

[1] （美）Robin Williams.寫給大家看的設(shè)計書[M].3版.蘇金國，劉亮，譯.北京：人民郵電出版社，2009.

[2] （美）David Cochran，Ian Whitley，著.Bootstrap實戰(zhàn)[M].李松峰，譯.北京：人民郵電出版社，2015.

[3] 金烏.Axure RP7網(wǎng)站和APP原型制作從入門到精通[M].北京：人民郵電出版社，2015.