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

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

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

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

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

2.1 簡(jiǎn)單

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

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

2.2 以用戶為中心

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

2.3 視覺美觀

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

2.4 主題明確

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

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

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

3 框架介紹

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

4 結(jié)語

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