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