WEB前端設計之我見

郭琳

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

關鍵詞：WEB前端設計 Bootstrap Axure Kuler WEB前端設計流程

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

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

1 WEB前端設計知識儲備與工具

1.1 知識儲備

（1）必備：平面構成、色彩構成、字體設計、標志設計、版式設計、HTML、DIV、CSS和JavaScript。

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

同時，HTML、DIV和JavaScript則是將設計好的素材、整理好的文字進行擺放歸位和進行動態(tài)交互的基礎?？梢杂脠D1和圖2進行說明它們之間的關系。

用一句話來概括就是“兩個構成+3個設計=設計思想”。

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

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

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

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

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

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

1.2 設計工具

（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前端設計中，logo、圖標和Flash動畫原型的設計推薦使用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比較起來，其在方便易用和交互性演示方面還是略顯遜色。在具體設計過程中，可根據(jù)不同的需要選擇合適的工具。

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

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

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

2 WEB前端設計思想

2.1 遵循設計的四大基本原則

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

2.1.1 親密性

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

2.1.2 對齊

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

2.1.3 重復

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

2.1.4 對比

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

2.2 注意WEB前端設計與出版物設計的差別

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

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

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

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

3 設計流程

3.1 了解用戶需求，形成設計草圖

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

3.2 形成設計圖

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

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

（1）植入框架。

根據(jù)切片的尺寸利用DIV進行布局，而使用Bootstrap前端框架則更為簡單，其可以檢測不同的客戶端設備進行自適應的布局，而它的網(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種技術進行對比。

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

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

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

①HTML元素選取。

②HTML元素操作。

③CSS操作。

④HTML事件函數(shù)。

⑤JavaScript特效和動畫。

⑥HTML DOM遍歷和修改。

⑦AJAX。

⑧Utilities。

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

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

3.5 完成兼容性

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

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

3.6 SEO優(yōu)化

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

4 結語

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

參考文獻

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

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

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