- 相關推薦
網頁設計前端頁面規(guī)范要求和注意事項
網頁前端的設計是直接面向用戶的，是用戶所看得見的效果，以下是小編整理的網頁設計前端頁面規(guī)范要求和注意事項，歡迎參考閱讀!
網頁設計前端頁面規(guī)范要求和注意事項
1．盡量把頁面的背景圖及小圖標整合到一張圖片，用CSS定位方法。這樣以減少http請求，從而降底網站的下載的速度。
2．尊從內容與頁面樣式的脫離，如需要，同樣也要做到布局與COLOR的脫離。什么樣的圖片屬于內容：從數據庫里取出來的圖片。凡是不屬于內容的圖片請都用背景。
1）頁面代碼，做到精簡，邏輯性清楚；公用部位可以引入進來，比如頭部，腳部。
2）CSS邏輯清析，精簡。可在不改變功能的前提內，做到能更換頁面布局及換色。
CSS樣式每個頁面引入不超過兩個文件，一個是COMMON：它包含整個站點都需用到的公用部分，如整體布局，頭部，腳部，框，按扭等。另一個是當前頁的CSS。CSS文件引入在2個之內，減少http請求避免CSS的表達式。
3． 將腳本放在底部。
這樣頁面就可以逐步呈現，而且頁面中的可視組件可以盡早下裁。
配合程序開發(fā)人員我們需要注意的（xhtml）：
1．了解用戶可編輯上傳修改的“圖片”，“文字”區(qū)域的需求。根據需求來定位控制，以保證頁面的穩(wěn)定顯示。如圖片，需了解：
1）寬度是否是固定大小，
2）寬度最大限度，
3）大小不一樣時的居中顯示
如文字，需了解：
1) 文字的最大長度。及加“…”省略號區(qū)域,
2) 在測試中經常也會碰到英文無空格情況，得用overflow: hidden的方法隱藏溢出部分。
2．每個頁面加上正確顯示的TITLE。
3．在頁面中盡量完成每步交互效果，包括既時響應的。
4．提交程序員的DEMO必須是連貫的，交互效里齊全，而且經過自已在IE6.0，IE7.0，FIREFOX一次以上的整體測試。
設計師需要注意的幾點：
1.盡量考慮為元素命名其本身的作用或”用意”，達到語義化。不要使用表面形式的命名。如:red/left/big等。
2.組合命名規(guī)則:
[元素類型]-[元素作用/內容] 如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news
3.涉及到交互行為的元素命名:
凡涉及交互行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式，命名可參考以下規(guī)則:
鼠標懸停:hover 點擊：click 已瀏覽：visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
4.用戶體驗方面需要注意的：
1）． 每個連接，按鈕要做上鼠標hover時的一個變化效果。如果hover時是換一張背景圖片，請把這兩張圖片整合在一張圖片中，以防止在hover時，頁面還在download變化的那張圖片，這樣會出現那個按鈕無圖的間隔；
2）． INPUT有個label，可以讓用戶在點擊字時，光標自動跳入相應input中；
3）． 圖片應該有alt屬性，以備圖片阻止時，文字的替換。
網頁設計要注意的事項
1、合理的頁面布局
在設計網頁時，一定要注意頁面布局的合理性。一個合理的布局和清晰的頁面可以讓人們感到舒適，并花時間去了解。注意版面設計，不要版面雜亂，搭配要注重協(xié)調與簡潔。要正確設計頁面的布局，以呈現一個新頁面。
2、舒適的色彩設計
無論哪個行業(yè)的網頁，在設計過程中都不要一味追求視覺刺激，做出奇怪的色彩搭配。在設計網頁的過程中，設計師必須注意頁面色彩的搭配，多用暖色、冷暖色調等。只有色彩足夠和諧、舒緩，才會讓人有繼續(xù)停留的想法。
3、新穎的內容
網頁內容就像人的靈魂一樣，是不能缺少的。設計一個網頁，肯定是想用來推廣某個企業(yè)或產品，如果想用內容吸引用戶，必須有新穎的內容。從文本或其他形式的內容開始，要注意內容的原創(chuàng)性和新穎性。
4、減少特殊字符的使用
在設計網頁時，使用盡可能少的特殊字符。在不同的計算機或不同的平臺上，看到的情況有時是不同的。如果使用特殊字符，可能會產生較差的顯示效果。因此，應該盡量減少特殊字符的使用。
網頁設計組成與規(guī)范需要遵循的原則及技巧
1、字體：中文常用宋體、微軟雅黑和黑體，其中黑體常用于導航或者標題，英文常用無襯線的Arial、Helvetica、Verdana和襯線的Georgia、Times。
2、字號：中文最小字號為12px，英文最小字號9px，不過建議10px起，因為網頁里面的字號通常為雙數。
3、樣式：網頁里宋體12px和14px通常設置為無，宋體的其他字號和其他字體通常平滑即可。
4、粗體：大片的閱讀性文字不適合加粗，文字加粗通常適用于導航、標題或者強調性的文字上。
5、顏色：除了標題或者交互等強調性的文字以外，其他重要文字用#333333居多，次要文字用#666666居多，輔助文字用#999999居多。
6、行高：行高可以根據字號來定，一般是字號的1.5-2倍居多。
網頁設計組成與規(guī)范需要遵循的原則及技巧
1、主次：也就是要大小混排，就連最簡單的電商列表頁，還要有側邊欄或者底部推薦產品的不同尺寸產品圖來陪襯，這樣的目的是避免瀏覽乏味，中和視覺。
2、大�。河械膹V告圖會比較大來增強視覺沖擊力，尤其是專題頁頭圖，建議不要超過一屏，不同分辨率的電腦一屏的尺寸會有所不同，一般800px上下最常見。
網頁設計組成與規(guī)范需要遵循的原則及技巧
1、寬度：邊框寬度1px即可。
2、顏色：邊框顏色一般#cccccc居多，或者更淺一點的顏色也可以。
3、重復：同一個模塊里面，如果已經有背景顏色或者邊框的存在，也就是說排版已經明顯整齊，就不要重疊使用邊框。
4、距離：有邊框的時候，內容要跟邊框分離一點，也就是內外邊距要有。
【網頁設計前端頁面規(guī)范要求和注意事項】相關文章：
網頁設計前端頁面制作的規(guī)范要求和注意事項05-29
網頁設計前端頁面制作要求02-11
交互頁面網頁設計07-19
網頁設計的頁面尺寸標準01-01
網頁設計和前端的區(qū)別04-09
網頁設計中的頁面尺寸標準08-06
網頁設計頁面尺寸的標準大小07-08
網頁設計中頁面尺寸標準06-17
網頁設計的尺寸規(guī)范04-21