在設(shè)計中經(jīng)常遇到這幾個問題：
在大多數(shù)的情況下，瀏覽者并不是在全屏的條件下瀏覽網(wǎng)站頁面，假如說頁面可以隨著瀏覽器的大小變化而變化，這樣是不是能夠增加用戶的體驗度呢?有沒有辦法能有效解決這些問題呢?海淘科技的小編給出了以下的答案：
響應(yīng)網(wǎng)頁設(shè)計概念是頁面設(shè)計和開發(fā)應(yīng)根據(jù)設(shè)備環(huán)境(屏幕大小、屏幕定位、系統(tǒng)平臺、等)和用戶行為(改變窗口大小等)響應(yīng)并作出相應(yīng)調(diào)整。具體做法包括許多方面,包括彈性網(wǎng)格和布局、圖像、CSS媒體查詢使用,等用戶是否使用電腦,平板電腦,或者手機(jī),是否全屏或半屏,屏幕是水平或垂直,頁面應(yīng)該能夠自動切換分辨率,圖像大小和相關(guān)腳本函數(shù),等等,以適應(yīng)不同的設(shè)備。
開發(fā)、維護(hù)、運營成本優(yōu)勢：在設(shè)計上，針對具有分辨率和設(shè)備環(huán)境上的不同，這只是針對單一的頁面，因此，在開發(fā)，開發(fā),維護(hù)和運營,相對于多個版本,可以節(jié)省成本。
兼容性優(yōu)勢：移動設(shè)備屢見不鮮,通常只適用于一些新的尺寸，定制版本的規(guī)格設(shè)備,如果新設(shè)備分辨率變化較大,常常不能兼容,以及新版本的發(fā)展需要時間,這次訪問是一個問題,但響應(yīng)網(wǎng)頁Web設(shè)計可以阻止這個問題的發(fā)生。
操作靈活：響應(yīng)頁面設(shè)計,只能改變所需的頁面,其他頁面不受影響。
實例展示
當(dāng)瀏覽器的寬度變小時，網(wǎng)站頁面的左右兩端也會隨著寬度變小，放在左邊的banner圖與視頻也會相應(yīng)的變小，右邊的頭像為了適應(yīng)屏幕寬度的變化，由原來的4個變?yōu)?排2個
當(dāng)瀏覽器寬度進(jìn)一步減少后,網(wǎng)站頁面的的結(jié)構(gòu)由原來的兩欄變成一欄，一部分的尺寸也隨著寬度的進(jìn)一步縮小而變小，搜索欄由導(dǎo)航內(nèi)轉(zhuǎn)向了導(dǎo)航外
第一步：確定需要兼容的設(shè)備類型、屏幕尺寸，通過用戶研究，了解用戶使用的設(shè)備分布情況，確定需要兼容的設(shè)備類型、屏幕尺寸。
設(shè)備類型：包括移動設(shè)備(手機(jī)、平板電腦)和電腦。對于移動設(shè)備來說,設(shè)計和實現(xiàn)的時候注意增加手勢的功能。
屏幕尺寸：包括各種各樣的手機(jī)屏幕尺寸(包括水平和垂直),各種大小的平板電腦(包括水平和垂直),一般的電腦屏幕和寬屏。
需要考慮的問題：
響應(yīng)頁面設(shè)計適用范圍的大小是什么?搜索結(jié)果頁面1688頁面,例如,可以跨越從手機(jī)到寬屏的,但是1688的主頁,因為結(jié)構(gòu)太復(fù)雜,想直接轉(zhuǎn)移到手機(jī),不現(xiàn)實,倒不如直接設(shè)計一個移動版本的主頁。
結(jié)合用戶需求和實現(xiàn)成本,選擇合適的尺寸。一些功能操作頁面,例如,用戶不使用移動終端需求,不需要響應(yīng)設(shè)計。
第二步：制作線框原型
制定幾個不同大小的尺寸，分別按照線框原型去做，除此之外，頁面的整體布局,如何改變內(nèi)容大小縮放、功能、內(nèi)容、甚至在專門設(shè)計的特殊環(huán)境,等。這個過程需要設(shè)計師和前端開發(fā)人員保持密切溝通。
第三步：測試線框原型
導(dǎo)入圖片對應(yīng)的設(shè)備進(jìn)行一些不復(fù)雜的測試,可以幫助我們檢測的可訪問性、可讀性和其他問題。
第四步：視覺設(shè)計
我們需要留意的是移動網(wǎng)站設(shè)備屏幕的每英寸屏幕所擁有的像素數(shù)是不同于傳統(tǒng)的電腦屏幕,在設(shè)計的時候要確保內(nèi)容文本是可讀的而并非是不能讀的,可點擊區(qū)域的面積控制等。
相比與傳統(tǒng)的響應(yīng)式web開發(fā),響應(yīng)設(shè)計頁面,頁面整體布局結(jié)構(gòu),網(wǎng)站內(nèi)容,網(wǎng)站尺寸改變了,所以最終的輸出更容易與之前的設(shè)計稿不同,因此更需要前端開發(fā)人員和設(shè)計人員溝通。
