學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)需要遵守的規(guī)范有哪些？

一、畫(huà)板尺寸

1、設(shè)計(jì)基準(zhǔn)尺寸

      因?yàn)榫W(wǎng)頁(yè)尺寸與用戶屏幕相關(guān)，而用戶屏幕的種類難以統(tǒng)計(jì)。所以我們的設(shè)計(jì)稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來(lái)解決。

      做網(wǎng)站時(shí)建議按主流的分辨率1920*1080px來(lái)設(shè)計(jì)。所以我們通常設(shè)計(jì)網(wǎng)站時(shí)的網(wǎng)站寬度為1920px，每個(gè)屏幕的高度約為900px。為什么是900px呢？因?yàn)?080還要減去瀏覽器頭部和底部高度，大約就是900px了。

2、安全區(qū)域?qū)挾?/span>

      以1920px寬度作為設(shè)計(jì)標(biāo)準(zhǔn)，在整個(gè)頁(yè)面中，網(wǎng)頁(yè)的安全區(qū)域則為1200px。換句話說(shuō)，我們只要保證網(wǎng)頁(yè)的實(shí)際內(nèi)容展示區(qū)域控制在1200px這個(gè)范圍內(nèi)，就能保證整個(gè)頁(yè)面在不同尺寸的瀏覽器訪問(wèn)時(shí)能夠完整的顯示出所有的內(nèi)容。

二、視覺(jué)規(guī)范

1、文字規(guī)范

      PC系統(tǒng)默認(rèn)中文字：微軟雅黑（僅僅作為屏幕輸出，不能用在banner，否則會(huì)侵權(quán)）。

      Mac系統(tǒng)默認(rèn)中文：蘋(píng)方系列；英文可以使用：Arial、DIN。

      正文字體≥12px即可，目前很多網(wǎng)站字體已經(jīng)14px起步�？筛鶕�(jù)實(shí)際效果進(jìn)行選擇，但盡量使用偶數(shù)。

2、圖片規(guī)范

      網(wǎng)站設(shè)計(jì)中的圖片常用寬高多為4:3、16:9、1:1等比例。具體圖片大小沒(méi)有固定要求，但整數(shù)和偶數(shù)為佳，主要是考慮到一些適配的問(wèn)題。

      應(yīng)該遵循品牌VI規(guī)范體系，需要注意不同狀態(tài)的用色規(guī)范（默認(rèn)、懸停、按下 、成功反饋、警示反饋、錯(cuò)誤反饋），顏色不宜過(guò)多，控制在3種以內(nèi)，文字色彩盡量避免純黑色。

4、按鈕規(guī)范

      可分為線型按鈕、面型按鈕、文字按鈕、圖標(biāo)按鈕、文字+圖標(biāo)按鈕。按鈕的狀態(tài)一般有默認(rèn)、按下、懸停、禁用。按鈕大小可遵循8點(diǎn)柵格原則。

5、圖標(biāo)規(guī)范

      圖標(biāo)設(shè)計(jì)取整數(shù)制作，完成后輸出SVG格式，上傳到阿里巴巴矢量圖標(biāo)庫(kù)，方便前端調(diào)用。注意不同形狀圖標(biāo)視覺(jué)的大小統(tǒng)一（橢圓、方、圓、長(zhǎng)方、三角），可遵循8點(diǎn)柵格原則。

6、表單規(guī)范

      系統(tǒng)表單設(shè)計(jì)中，注意輸入框樣式統(tǒng)一，一般有默認(rèn)、選中、輸入、禁用、校驗(yàn)錯(cuò)誤等，另外還有單選、多選、下拉等組件。可遵循8點(diǎn)柵格原則。

7、彈窗規(guī)范

      分模態(tài)彈窗和非模態(tài)彈窗，他們最大的區(qū)別在于是否強(qiáng)制用戶交互，是否打斷用戶當(dāng)前操作流程。彈窗大小可根據(jù)顯示的內(nèi)容、邊距來(lái)設(shè)計(jì)，位置保持全居中。非模態(tài)彈窗，需要考慮自動(dòng)消失的提示時(shí)間。可遵循8點(diǎn)柵格原則。

      在系統(tǒng)中很多控件需要設(shè)計(jì)師來(lái)優(yōu)化設(shè)計(jì)，保證控件的統(tǒng)一風(fēng)格，也方便后期迭代。在實(shí)際工作中為了節(jié)省開(kāi)發(fā)時(shí)間，前端也會(huì)提供封裝好的控件讓我們來(lái)選擇，我們要協(xié)助前端規(guī)范好控件的樣式�？勺裱�8點(diǎn)柵格原則。

三、自適應(yīng)與響應(yīng)式網(wǎng)站

      我們看到有些網(wǎng)站使用電腦端或者手機(jī)端甚至 iPad 去瀏覽時(shí)體驗(yàn)都非常好。這就需要我們?yōu)榱擞脩趔w驗(yàn)而進(jìn)行網(wǎng)站的自適應(yīng)或響應(yīng)式布局了。響應(yīng)式與自適應(yīng)的原理是相似的，都是通過(guò)代碼檢測(cè)設(shè)備屏幕寬度，根據(jù)不同的設(shè)備加載不同的 css。

1、自適應(yīng)網(wǎng)站

      自適應(yīng)網(wǎng)站的設(shè)計(jì)稿是一致的，但是設(shè)計(jì)稿需要考慮屏幕變小時(shí)的變化方式。比如一個(gè)網(wǎng)站的內(nèi)容有5個(gè)區(qū)塊和4個(gè)間距，那么如果寬度縮小成900時(shí)需要如何變化，這就是自適應(yīng)布局。比如站酷網(wǎng)、Dribbble 等網(wǎng)站都采用了自適應(yīng)布局。

2、響應(yīng)式網(wǎng)站

      響應(yīng)式網(wǎng)站則需要設(shè)計(jì)不同版本的設(shè)計(jì)稿，然后根據(jù)不同的設(shè)備提供不同的 CSS 樣式。比如判定你設(shè)備的寬度是750px，那么網(wǎng)站就知道你使用了手機(jī)來(lái)訪問(wèn)，就會(huì)給你導(dǎo)入一份手機(jī)才有的樣式；如果是電腦的寬度就給你導(dǎo)入電腦的 CSS 樣式。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，自適應(yīng)需要考慮網(wǎng)站在不同設(shè)備寬度下的整除與排版；響應(yīng)式則需要設(shè)計(jì)電腦、平板、手機(jī)等至少三套設(shè)計(jì)稿（但這三套設(shè)計(jì)稿的內(nèi)容是一致的）。

3、適配的規(guī)范

      手機(jī)方面：適配手機(jī)頁(yè)面時(shí)，我們一般以 iPhone 為畫(huà)布標(biāo)準(zhǔn)。原因是 iPhone 相對(duì)顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時(shí)我們一般以750*1334px尺寸為主，然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾C(jī) APP 常常使用的漢堡包+抽屜式導(dǎo)航的形式。同時(shí)網(wǎng)站里的按鈕也需要變?yōu)槭謾C(jī) APP 中我們看到的左右?guī)缀鯘M屏的按鈕，并且每個(gè)按鈕要大于88px，方便手指的點(diǎn)擊。字體方面，我們要把網(wǎng)站的字體全部改為蘋(píng)方字體，英文則需要使用 SF-UI 代替，并且字號(hào)設(shè)置為24px以上。也就是將網(wǎng)站改變成一個(gè)類 APP 的手機(jī)網(wǎng)頁(yè)，這樣才可以保證手機(jī)用戶體驗(yàn)良好。如果用戶使用安卓手機(jī)，那么前端代碼則會(huì)基于設(shè)計(jì)稿的設(shè)計(jì)適度加大圖片與間距來(lái)適應(yīng)安卓屏幕。

      iPad：iPad的尺寸為1024*768、2048*1536px等，無(wú)論怎么變基本與電腦屏幕尺寸類似。所以在 iPad 上瀏覽網(wǎng)頁(yè)是基本舒適的。因此，很多網(wǎng)站并沒(méi)有專門(mén)為 iPad 做適配，如果我們希望 iPad 用戶用的更爽，可以從文字大�。�24px以上）、按鈕大�。�88px左右以及以上）、交互形式（抽屜式導(dǎo)航、導(dǎo)航不隨屏幕滾動(dòng)）等方式入手。

      本文由培訓(xùn)無(wú)憂網(wǎng)長(zhǎng)沙牛耳教育課程顧問(wèn)老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L(zhǎng)沙網(wǎng)頁(yè)美工設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無(wú)憂網(wǎng)電腦IT培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.universityresearchassociates.com/news-id-10880.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注網(wǎng)頁(yè)制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050