設計是很靈活的，但同一個專案/產品的設計，就必須要有它的規範，而這些規範，必須要遵循設計的原理，對自己而言，以後再同一專案做更新優化時能用更快的時間搞定，對他人而言，不讓人噴的同時認同您是個專業的設計師。最近諮詢網頁前端設計的朋友比較多，當然大部分是求 PSD~，授人以魚不如授人以漁，是時候分享一些推薦給大家了。這篇文章是出於對客觀的理解加上小編的設計經驗，因此有些地方可能會跟大家的想法有出入，不對的地方請指出。前端設計也是屬於網頁設計的一部分，自從有了 H5，網頁設計的展現形式真是千變萬化，但是要做一個讓大部分非 IT 的人操作的 PC 端前端，您把它做的很炫，請問多用户答應嗎？前端和開發都不想答應。當然，對於一些控制組件/組件是可以做一些輕動畫互動。居中對齊的網頁這個尺寸的網頁尺寸很好把握，新建畫布 A（白色圖層），然後新建另外一個網頁有效區的畫布 B(黃色圖層)，把畫布 B 的圖層拖到畫布 A，居中對齊，然後拖兩條參考線，刪除黃色圖層，這個時候就可以在這個畫布上大展身手了。那麼，畫布 A 的寬度到底應該是多少解析度呢？很明顯，只要大於有效區即可。因為這種網頁設計尺寸是固定的，控制組件和組件等的都設定一個固定值，比如間距剛剛好是 30px，按鈕剛剛好是 100px，表格剛剛好是 700px 等。網頁有效區的寬度從以前的 600px 漲到現在 1200px，甚至更高，因此，結合我們當前使用的主流顯示器，例，做一個 1200px 寬度的網頁，那麼畫布 B 就是要設定的寬度，而畫布 A 則是大於 1200px 寬度，就算網頁的有效區已經固定，然而很多時候，您肯定會設計通欄的 banner，用上 1920 解析度顯示器的您，當然是用 1920 的寬度比較爽比較任性好嗎？版面解析度的設定，常見的網頁結構型別科學的網頁結構能夠更好地展現網站資訊，讓任務的完成更容易，對內容的存取更直接。網頁結構的科學性和藝術性，可易於資訊的管理。 常見的網頁佈局結構主要有以下幾種：1.“T” 形佈局所謂 “T” 形佈局就是指頁面頂部為橫條網站標誌與廣告條，下方左面為主選單，右面顯示內容的佈局，因為選單條背景較深，整體效果類似，英文字母 “T”，所以我們稱之為 “T” 形佈局，這是網頁設計中用得廣泛的一種佈局方式。這種佈局的優點是頁面結構清晰，主次分明，是初學者容易上手的佈局方法。缺點是規矩呆板，如果細節色彩上不注意加工，很容易讓人 “看之無味” 。 2.“口” 形佈局這是一個象形的説法，一般就是頁面上下各有一個廣告條，左面是主選單，右面放友情連結等，中間是主要內容。這種佈局的優點是充分利用版面，資訊量大。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中視窗形佈局。 3.“三” 形佈局這種佈局多為國外站點使用，國內用得不多。特點是頁面上橫向兩條色塊，將頁面整體分割為三部分，色塊中大多放廣告條。 4. 對稱對比佈局顧名思義，採取左右或者上下對稱的佈局，一半深色，一半淺色，般用於設計型站點，優點是視覺衝擊力強，缺點是對兩部分進行有機的結合比較困難。 5.POP 佈局 POP 引自廣告術語，就是指頁面佈局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。這種佈局常用於時尚類站點，優點顯而易見：漂亮，吸引人。缺點就是速度慢。佈滿全屏的網頁對於全屏展示的網頁，又分為自適應和響應式。自適應是根據瀏覽器的解析度大小自動適配尺寸佈滿全屏，它所呈現的樣式一直都是一個終端的（如 PC 端）效果，通常前端會給這種網頁設定一個最小值（min-width），當瀏覽器的解析度小於這個值的時候，瀏覽器會出現橫向滾動條。另外一種就是近幾年超流行的人們常説的 H5 響應式佈局（柵格化佈局），一般把瀏覽器解析度三等分，在每個等分割槽間展示的佈局都不盡相同，也就是我們説手機端、平板、 PC 端的展示，並且在每一個區間的解析度的縮放也應包括了自適應。因此在設計這種網頁時，通常要做三種尺寸的設計。響應式佈局網頁固然有很大的優勢，但是在很多約束的現實情況，後台設計（一般指資訊/資料型的管理系統）並不會採取這種方式，而是選擇自適應的 PC 端設計，當然如果產品需要，一般開發上會分開做成兩種形式，PC 端和移動端。正因為是 PC 端的後台，它的解析度（瀏覽器解析度）仍然有大有小，全屏自適應的佈局會根據解析度的大小而改變。 PC 端後台介面會設計一個最小寬度 min-width，如果瀏覽器小於這個值，那麼只能用滾動條拖動了。既然是佈滿全屏的網頁，那麼新建的畫布尺寸就可以更主觀了，一般就按照自己使用的顯示器的更佳 解析度來設定，至於在什麼樣的尺寸展示什麼樣的佈局，那是前端的技術，設計只提供各個解析度展示的效果圖，但是，您必須理解其中的原理，否則前端直接跟您説做不了您也沒轍。對於後台設計，佈滿全屏的網頁尺寸在當下的環境顯得更為主流，因為後台的更新優化實在是太頻繁了，固定寬度有時候很難滿足互動需求。