最近在公司寫的頁面的都是使用了響應(yīng)式布局，也正是這點(diǎn)在設(shè)計(jì)與開發(fā)溝通上引發(fā)了許多口水，因此在設(shè)計(jì)規(guī)范上寫下幾點(diǎn)響應(yīng)式網(wǎng)站設(shè)計(jì)注意事項(xiàng)，望共勉。

　　一、什么是響應(yīng)式設(shè)計(jì)？

　　先科普一下，所謂的響應(yīng)式網(wǎng)站就是網(wǎng)站頁面隨瀏覽設(shè)備的不同而自行響應(yīng)，動態(tài)的調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設(shè)備的用戶。效果如圖下：

　　pc端環(huán)境下效果

　　平板環(huán)境下效果

　　移動端環(huán)境下效果

　　通過以上圖片可以發(fā)現(xiàn)不同設(shè)備環(huán)境下網(wǎng)頁的布局結(jié)構(gòu)是不一樣的，但內(nèi)容卻不變。

　　二、注意細(xì)節(jié)

　　A、盡量避免大量使用圖片充當(dāng)背景。在響應(yīng)式網(wǎng)站上，不同設(shè)備下背景圖片適配是開發(fā)者的一個(gè)痛點(diǎn)。在開發(fā)原理上，前端是按比例適配圖片，那么這將出現(xiàn)以下三種情況：

　　1、第一種：按容器比例撐滿。

圖片看起來好像沒問題，但是在小設(shè)備環(huán)境下圖片會出現(xiàn)壓縮變形的情況。

　　2、第二種：圖片寬度按容器比例撐滿、高度自適應(yīng)大小。

圖片看起來好像也沒有問題，同理在小設(shè)備環(huán)境下圖片底部會出現(xiàn)空白情況。

　　3、第三種：把背景圖片放大到適合元素容器的尺寸，圖片比例不變。

圖片看起來好像沒有問題，同理在小設(shè)備環(huán)境下超出容器的部分可能會裁掉。

　　解決方案：

　　一張背景圖片引發(fā)各種強(qiáng)迫癥，騷年你還敢亂用？

　　1、盡量少用圖片充當(dāng)背景(這里指的是在響應(yīng)式網(wǎng)站上)

　　2、通過調(diào)查使用裁剪這種方法比較多，設(shè)計(jì)師需要輸出不同設(shè)備下的背景圖片(pc 平板 移動端)。

　　3、可以使用背景圖片，但是背景和圖片需要分開，而且背景只能是純色調(diào)或者是有規(guī)律的圖片(這樣前端可以重復(fù)使用背景圖片。就可以避免底部出現(xiàn)空白的尷尬情況了)。

　　4、設(shè)計(jì)師輸出不同設(shè)備下的圖片效果(不推薦、效率低)

　　B、該顯示的顯示該隱藏的隱藏。例如導(dǎo)航欄，在pc端顯示上導(dǎo)航的存在可能沒什么，如圖2-2。但是在移動端上查看的時(shí)候，導(dǎo)航還是盡量隱藏起來，需要的時(shí)候再顯現(xiàn)。在移動端上導(dǎo)航可以用漢堡按鈕的形式展現(xiàn)。

　　C、不同設(shè)備環(huán)境下使用不同布局結(jié)構(gòu)，這樣能顯示最友好的視覺效果。

　　三、使用場景

　　并不是所有網(wǎng)站都適合用響應(yīng)式，如果用了響應(yīng)式，那么移動端的UI就不能要求太高，畢竟響應(yīng)式只是適配一下排版布局，排版都是按規(guī)律順序進(jìn)行調(diào)整的。如果移動端UI和PC端相差太大，那還不如直接寫2套代碼性能還更好。而且，后期響應(yīng)式網(wǎng)站維護(hù)起來也不簡單。

　　如果是單個(gè)頁面或比較少頁面的網(wǎng)站(網(wǎng)站結(jié)構(gòu)不復(fù)雜的，比如官網(wǎng)、個(gè)人博客等)，建議做響應(yīng)式；

　　反之，不建議(比如商城、社區(qū)等)。

　　四、總結(jié)

　　以上就是對響應(yīng)式網(wǎng)站設(shè)計(jì)注意事項(xiàng)的一些總結(jié)，在實(shí)施上需要設(shè)計(jì)師和前端er一起探討制定規(guī)范。更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。

　　注：本文部分文字和圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系刪除。版權(quán)歸原作者所有!