響應(yīng)式網(wǎng)站前端的設(shè)計(jì)尺寸標(biāo)準(zhǔn)

設(shè)計(jì)是很靈活的，但同一個(gè)項(xiàng)目/產(chǎn)品的設(shè)計(jì)，就必須要有它的規(guī)范，而這些規(guī)范，必須要遵循設(shè)計(jì)的原理，對(duì)自己而言，以后再同一項(xiàng)目做更新優(yōu)化時(shí)能用更快的時(shí)間搞定，對(duì)他人而言，不讓人噴的同時(shí)認(rèn)同你是個(gè)專業(yè)的設(shè)計(jì)師。

最近咨詢網(wǎng)頁(yè)前端設(shè)計(jì)的朋友比較多，當(dāng)然大部分是求PSD~，授人以魚不如授人以漁，是時(shí)候分享一些干貨給大家了。這篇文章是出于對(duì)客觀的理解加上藤設(shè)計(jì)經(jīng)驗(yàn)，因此有些地方可能會(huì)跟大家的想法有出入，不對(duì)的地方請(qǐng)指出。

前端設(shè)計(jì)也是屬于網(wǎng)頁(yè)設(shè)計(jì)的一部分，自從有了H5，網(wǎng)頁(yè)設(shè)計(jì)的展現(xiàn)形式真是千變?nèi)f化，但是要做一個(gè)讓大部分非IT的人操作的PC端前端，你把它做的很炫，請(qǐng)問(wèn)用戶答應(yīng)嗎？前端和開發(fā)都不想答應(yīng)。當(dāng)然，對(duì)于一些控件/元件是可以做一些輕動(dòng)畫交互。

居中對(duì)齊的網(wǎng)頁(yè)
這個(gè)尺寸的網(wǎng)頁(yè)尺寸很好把握，新建畫布A（白色圖層），然后新建另外一個(gè)網(wǎng)頁(yè)有效區(qū)的畫布B(黃色圖層)，把畫布B的圖層拖到畫布A，居中對(duì)齊，然后拖兩條參考線，刪除黃色圖層，這個(gè)時(shí)候就可以在這個(gè)畫布上大展身手了。

那么，畫布A的寬度到底應(yīng)該是多少分辨率呢？很明顯，只要大于有效區(qū)即可。因?yàn)檫@種網(wǎng)頁(yè)設(shè)計(jì)尺寸是固定的，控件和元件等的都設(shè)置一個(gè)固定值，比如間距剛剛好是30px，按鈕剛剛好是100px，表格剛剛好是700px等。網(wǎng)頁(yè)有效區(qū)的寬度從以前的600px漲到現(xiàn)在1200px，甚至更高，因此，結(jié)合我們當(dāng)前使用的主流顯示器，例，做一個(gè)1200px寬度的網(wǎng)頁(yè)，那么畫布B就是要設(shè)置的寬度，而畫布A則是大于1200px寬度，就算網(wǎng)頁(yè)的有效區(qū)已經(jīng)固定，然而很多時(shí)候，你肯定會(huì)設(shè)計(jì)通欄的banner，用上1920分辨率顯示器的你，當(dāng)然是用1920的寬度比較爽比較任性好嗎？

本文標(biāo)題：響應(yīng)式網(wǎng)站前端的設(shè)計(jì)尺寸標(biāo)準(zhǔn)
文章URL：http://muchs.cn/news39/64089.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)