第一步:確定需要兼容的設備類(lèi)型、屏幕尺寸。
通過(guò)用戶(hù)研究，了解用戶(hù)使用的設備分布情況，確定需要兼容的設備類(lèi)型、屏幕尺寸。1設備類(lèi)型包括移動(dòng)設備(手機、平板)和PC。對于移動(dòng)設備，設計和實(shí)現的時(shí)候要注意增加手勢的功能。屏幕尺寸包括各種手機屏幕的尺寸( 包括橫向和豎向)、各種平板電腦的尺寸(包括橫向和豎向)、普通計算機屏幕和寬屏。需要考慮的問(wèn)題是，某個(gè)頁(yè)面進(jìn)行響應式設計時(shí)其適用的尺寸范圍有哪些?例如，某搜索網(wǎng)站的搜索結果頁(yè)面，跨度可以從手機到寬屏，而該首頁(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)框原型，需要考慮清楚在不同尺寸下，面的布局如何變化， 內容尺寸如何縮放，功能、內容的副減，甚至計對特殊的環(huán)境作特殊化的設計等。這個(gè)過(guò)程需要設計師和前端開(kāi)發(fā)人員保持密切的溝通。
第三步:測試線(xiàn)框原型。 可幫助我們盡早發(fā)現可訪(fǎng)問(wèn)性、可讀性等將圖片導入相應的設備進(jìn)行一些簡(jiǎn)單的測試，方面存在的問(wèn)題。
注意，移動(dòng)設備的屏存像素常第四步:視覺(jué)設計。有度與傳統計算機屏幕不一一樣， 在設計的時(shí)候需費保證內容文字的可讀性、控件可單擊區區域的面積等。
以最終的產(chǎn)出更有可第五步:前端實(shí)現。Web開(kāi)發(fā)相比，可能與設計稿響應式設i出入較大，計的頁(yè)面由于頁(yè)面布局、需要前端開(kāi)發(fā)人員和設計內容尺寸發(fā)生了變化，所師多進(jìn)行溝通。網(wǎng)站式建站資訊
本文地址：http://www.havencoinwallet.com//article/2019/1017/11076.html
