web前端設計對網頁設計是一個重要的環節,好看的前端更能吸引使用者。那麼你知道web前端設計基礎知識都有哪些呢?下面是小編精心為你準備的web前端設計基礎知識,希望對你有幫助!
web前端設計基礎知識
JavaScript的基本資料型別
內建物件的常用方法
理解事件機制
理解原型繼承
理解作用域問題
理解模組化
效能優化
知道基本的程式設計語法,比如迴圈,判斷,try/catch 等等
理解包括多種函式定義以及賦值的方式,包括匿名函式
理解基本的名稱空間,全域性(window)空間以及物件空間(不包括閉包)
理解上下文的角色以及 this 變數的使用
理解各種物件以及函式的初始化和宣告方式
理解 javascript 比較操作符,如<,>, ==, ===,以及物件和字串比較的原理和物件對映
理解物件屬性和函式的陣列索引,以及這和真實的陣列之間的區別。
Web前端設計排版技巧
一、強調字型
字型的設計與強調在網頁當中相當重要,合適的排版和適當的字型強調,不僅可以讓使用者快速的抓住網站中的重點,同樣可以增強網站對使用者的吸引力
二、單頁面設計
隨著網際網路的發展,使用者的`習慣更傾向於滑鼠滾輪。在使用者的體驗和習慣方面來講,與其在多個頁面中來回點選檢視,不如直接滾輪來的方便。
三、網頁色塊設計
隨著網際網路的發展和H5的出現,網站網頁的排版方式越來越傾向於簡潔大方,這最根本的原因在於:使用者的視覺和心理。不同的色塊放在一起形成強烈的對比,要麼以純文字形式,要麼以方形照片配上文字形式,這兩者在一定程度上刺激了使用者的視覺興趣,進而使使用者繼續探索。
四、背景
網頁以什麼樣的方式作為背景呢?純色?漸變?圖片?這三種都是可以的,但以商業化為目的展示,用照片作為網站網頁的背景,不僅可以達到展示的目的,而且還可以達到強烈的視覺表達效果。這種設計方式在時尚、品牌和旅遊等行業最為常見。
五、圖片
簡約、設計時尚、顏色對比突出,表達清楚、突出目的的大圖,是很多網站開發者所追捧的。同樣與枯燥的文字相比,使用者也更願意繼續觀賞這樣的網站。
六、響應式設計
隨著手機和移動端裝置廣泛的被人們使用,響應式設計成為目前網站開發比不可少的內容。不僅能節省開發者的成本和時間,更能方便使用者在不同尺寸的裝置上暢通無阻的瀏覽你的網站。
七、視差滾動
讓多層背景以不同的速度移動,形成運動視差的3D效果,這樣的效果以後很可能會在H5的網站中更加常見和流行
Web前端設計原則
KISS原則(Keep it Simple and Stupid)
一切儘可能簡單,簡單,簡單!!! 簡單就是美,能簡單的絕不復雜
DRY原則(Don’t Repeat Yourself)
顧名思義,任何一段程式碼如果需要複製第三次,需要進行抽象
最少知道原則
高內聚,低耦合,任何事物應該保持對外界的最少知道原則
分治原則
複雜的問題,負責的功能,應該拆分,由更小的部分組成