設備類(lèi)型：包括移動(dòng)設備（手機、平板）和pc。對于移動(dòng)設備，設計和實(shí)現的時(shí)候注意增加手勢的功能。屏幕尺寸：包括各種手機屏幕的尺寸（包括橫向和豎向）、各種平板的尺寸（包括橫向和豎向）、普通電腦屏幕和寬屏。

第一步：確定需要兼容的設備類(lèi)型、屏幕尺寸通過(guò)用戶(hù)研究，了解用戶(hù)使用的設備分布情況，確定需要兼容的設備類(lèi)型、屏幕尺寸。

向揚網(wǎng)絡(luò )響應式設計尺寸：1920-1280、1024、960、800、768、640、600、540、480、320需要考慮的問(wèn)題：某個(gè)頁(yè)面進(jìn)行響應式設計時(shí)其適用的尺寸范圍是哪些？比如，1688搜索結果頁(yè)面，跨度可以從手機到寬屏，而1688首頁(yè)，由于結構過(guò)于復雜，想直接遷移到手機上，不太現實(shí)，不如直接設計一個(gè)手機版的首頁(yè)。結合用戶(hù)需求和實(shí)現成本，對適用的尺寸進(jìn)行取舍。比如一些功能操作的頁(yè)面，用戶(hù)一般沒(méi)有在移動(dòng)端進(jìn)行操作的需求，沒(méi)有必要進(jìn)行響應式設計。

第二步：制作線(xiàn)框原型針對確定下來(lái)的幾個(gè)尺寸分別制作不同的線(xiàn)框原型，需要考慮清楚不同尺寸下，頁(yè)面的布局如何變化，內容尺寸如何縮放，功能、內容的刪減，甚至針對特殊的環(huán)境作特殊化的設計等。這個(gè)過(guò)程需要設計師和前端開(kāi)發(fā)人員保持密切的溝通。

第三步：測試線(xiàn)框原型將圖片導入到相應的設備進(jìn)行一些簡(jiǎn)單的測試，可幫助我們盡早發(fā)現可訪(fǎng)問(wèn)性、可讀性等方面存在的問(wèn)題。

第四步：視覺(jué)設計注意，移動(dòng)設備的屏幕像素密度與傳統電腦屏幕不一樣，在設計的時(shí)候需要保證內容文字的可讀性、控件可點(diǎn)擊區域的面積等。

第五步：前端實(shí)現與傳統的web開(kāi)發(fā)相比，響應式設計的頁(yè)面由于頁(yè)面布局、內容尺寸發(fā)生了變化，所以最終的產(chǎn)出更有可能與設計稿出入較大，需要前端開(kāi)發(fā)人員和設計師多溝通。

響應式頁(yè)面的設計流程由東莞網(wǎng)站設計編輯 http://www.futanlvdanban.cn/qd/news/9811.html如需轉載請注明出處

東莞網(wǎng)站開(kāi)發(fā) 東莞網(wǎng)站制作 東莞響應式網(wǎng)站 東莞小程序商城開(kāi)發(fā) 東莞建網(wǎng)站 東莞微信小程序商城 東莞網(wǎng)站建設 東莞做網(wǎng)站 汕尾網(wǎng)站建設 河源網(wǎng)站建設 企業(yè)網(wǎng)站建設 肇慶網(wǎng)站建設 營(yíng)銷(xiāo)型網(wǎng)站建設 外貿網(wǎng)站建設 廣東網(wǎng)站建設 揭陽(yáng)網(wǎng)站建設 汕頭網(wǎng)站建設 韶關(guān)網(wǎng)站建設 網(wǎng)站托管 SEO外包 關(guān)鍵詞優(yōu)化