基于框架的WEB 前端設(shè)計

朱守平 楊恒宇 劉亞尼 攀枝花學(xué)院

Web 前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0 時代產(chǎn)物，與之前的網(wǎng)絡(luò)環(huán)境相比較，那是網(wǎng)站是一種靜態(tài)的模式，用戶在網(wǎng)站中瀏覽信息，沒有更多的作用。在互聯(lián)網(wǎng)不斷的發(fā)展過程中，網(wǎng)站的前端設(shè)計發(fā)生了變化，網(wǎng)頁也不僅僅只是向人們展示單一的圖片與文字，各種應(yīng)用以及媒體讓網(wǎng)頁變得豐富，給予用戶更好的體驗，一切的發(fā)展都基于前端設(shè)計的變化。

1 web 前端設(shè)計變化

Web 前端開發(fā)是一項很特殊的工作，涵蓋的知識非常廣，既有具體技術(shù)，又有抽象的理念。簡單地說，它的主要職能是把網(wǎng)站的界面更好的呈現(xiàn)給用戶。以前會Photoshop 和Dreamweaver 就可以制作網(wǎng)頁。隨著時代的發(fā)展，互聯(lián)網(wǎng)不斷的發(fā)展，僅僅掌握這些技術(shù)已經(jīng)不能滿足用戶的需求，也不能適應(yīng)網(wǎng)絡(luò)環(huán)境的發(fā)展，在開發(fā)難度上不斷的增加，名稱也發(fā)生了變化，之前叫做網(wǎng)頁設(shè)計，現(xiàn)在較多web 前端開發(fā)。Web 前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，需要專業(yè)的設(shè)計師進(jìn)行設(shè)計，對web 前端設(shè)計師提出了較高的要求。

2 web 前端設(shè)計原則

2.1 簡單

簡單的目的就是要方便用戶的使用，于此同時需要滿足兩項標(biāo)準(zhǔn)。在設(shè)計中，要保證用戶不需要思考，界面上所有元素所提供的功能一目了然，沒有歧義，易于理解。在用戶使用過程中不需要學(xué)習(xí)，保證整個環(huán)節(jié)較為簡便，不需要專業(yè)的培訓(xùn)，所有的功能遵循操作的習(xí)慣，直接上手可以使用。在設(shè)計時，保證界面上的元素要少，不然會讓用戶產(chǎn)生一定的壓力，面對整個頁面不知如何下手，不需要用戶仔細(xì)觀察和思考之后，才知道對哪些元素進(jìn)行操作才能夠達(dá)到自己的目的，需要讓用戶可以更加直觀方便的了解到網(wǎng)頁所帶來的便利。

我們經(jīng)常會在一些產(chǎn)品的界面上看到許多不必要的元素，比方說在輸入聯(lián)系方式的時候，有“電話”、“地址”、“傳真”、“手機”、“Email”，對于多余復(fù)雜的元素我們可以進(jìn)行刪除，保證頁面的整潔。其次，要讓應(yīng)用的后臺做更多的工作，盡可能地把更多的操作自動化，減少用戶的操作，減少了出現(xiàn)誤操作的可能。

2.2 以用戶為中心

以用戶為中心的原則要求設(shè)計師站在用戶的角度進(jìn)行思考，了解用戶的目的什么，什么樣的設(shè)計可以吸引用戶瀏覽使用。在整個設(shè)計中保證用戶需求什么，設(shè)計師就設(shè)計什么。如果設(shè)計是一味的追求自身滿足，即使網(wǎng)頁設(shè)計的再具有美感，如果不是用戶所需，也是失敗的設(shè)計。其次，考慮用戶帶寬設(shè)計網(wǎng)頁時需要考慮用戶的帶寬，以當(dāng)前的網(wǎng)絡(luò)發(fā)展為基準(zhǔn)，在網(wǎng)頁中設(shè)計一些吸引用戶的元素，保證網(wǎng)絡(luò)的快速運行，同時豐富的網(wǎng)頁效果。

2.3 視覺美觀

視覺美觀是網(wǎng)頁設(shè)計基本的原則。由于網(wǎng)頁的眾多，想要在眾多網(wǎng)頁中脫穎而出，不僅僅需要注重功能，還需要保證網(wǎng)頁賞心悅目、富有創(chuàng)意，通過這些美觀設(shè)計抓住訪問者的眼球。設(shè)計師在設(shè)計時，根據(jù)面向人群，以及人們的審美觀念進(jìn)行設(shè)計，保證頁面的美觀，空間設(shè)計的和諧，網(wǎng)頁中各個元素進(jìn)行完美的融合。

2.4 主題明確

鮮明的主題可以使網(wǎng)站輕松轉(zhuǎn)化一些高質(zhì)量有直接需求的用戶，還可以增加搜索引擎的友好性。這就要求設(shè)計師在設(shè)計頁面時不僅要注意頁面美觀，還要有主有次，在凸顯藝術(shù)性的同時，通過強烈的視覺沖擊力體現(xiàn)主題。

2.5 任何設(shè)計都有一定的內(nèi)容和形式。

設(shè)計的內(nèi)容是指主題、內(nèi)容元素等，形式是指結(jié)構(gòu)、設(shè)計風(fēng)格等表現(xiàn)方式。一個優(yōu)秀的網(wǎng)頁是內(nèi)容與形式統(tǒng)一的完美體現(xiàn)，在主題、形象、風(fēng)格等方面都是統(tǒng)一的。

3 框架介紹

框架是隨著軟件工程的發(fā)展演變而來的，在軟件開發(fā)過程中，很多項目要解決的問題和實現(xiàn)的功能是一樣的。依照這種背景，需要把功能一致的代碼進(jìn)行整合，便于之后設(shè)計的開發(fā)與使用。代碼可以重寫與替換拓展，業(yè)界人士將相同功能的實現(xiàn)和問題的解決方法進(jìn)行抽象,最終抽取和形成一個應(yīng)用框架。框架可以使軟件開發(fā)人員將大部分時間用來分析和處理業(yè)務(wù)。在web 前端設(shè)計中應(yīng)用框架，主要因為框架重用性好，開發(fā)效率高。應(yīng)用開發(fā)人員可以按照框架的思想將應(yīng)用進(jìn)行分析并將其分解為同樣的組件，框架還提供了可重用的概要設(shè)計和詳細(xì)設(shè)計，將應(yīng)用分解成較小的組件和接口。在設(shè)計過程中使用框架，保證了整個前端設(shè)計的開發(fā)周期短，成本低，可維護(hù)性較好。使用框架開發(fā)應(yīng)用，大幅度縮短了應(yīng)用和軟件的開發(fā)周期，顯著提高了軟件開發(fā)質(zhì)量。大粒度的重用使得應(yīng)用和軟件開發(fā)成本大大降低，開發(fā)時間成倍減少，框架使得應(yīng)用開發(fā)的適應(yīng)性和靈活性也得到增強，可維護(hù)性較好。

4 結(jié)語

在基于框架的web前端設(shè)計中，需要不斷地重視網(wǎng)站的用戶開發(fā)，采用適合網(wǎng)站發(fā)展的模式，增加一定的難度與維護(hù)措施，保證在運行過程中可以被更好的利用。如果企業(yè)跟不上技術(shù)的發(fā)展，就會面臨淘汰。在傳統(tǒng)的開發(fā)模式下積極創(chuàng)新，按照設(shè)計原則進(jìn)行設(shè)計，保證前端和后端可以進(jìn)行對接，職責(zé)分明，讓web 更加完善。