基于框架的WEB 前端設計

朱守平 楊恒宇 劉亞尼 攀枝花學院

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

1 web 前端設計變化

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

2 web 前端設計原則

2.1 簡單

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

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

2.2 以用戶為中心

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

2.3 視覺美觀

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

2.4 主題明確

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

2.5 任何設計都有一定的內容和形式。

設計的內容是指主題、內容元素等，形式是指結構、設計風格等表現方式。一個優秀的網頁是內容與形式統一的完美體現，在主題、形象、風格等方面都是統一的。

3 框架介紹

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

4 結語

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