RELATEED CONSULTING
相關咨詢
選擇下列産品馬上在線溝通
服務時間:9:30-18:00
你可能遇到了下面的問題
关闭右侧工具栏
響應式網站的設計流程是怎麼樣的呢?
  • 作者:虚拟货币行情科技
  • 發表時間:2017-06-24 23:44
  • 來源:未知

第一步:确定需要兼容的設備類型、屏幕尺寸
通過用戶研究,了解用戶使用的設備分布情況,确定需要兼容的設備類型、屏幕尺寸。
設備類型:包括移動設備(手機、平闆)和pc。對于移動設備,設計和實現的時候注意增加手勢的功能。
屏幕尺寸:包括各種手機屏幕的尺寸(包括橫向和豎向)、各種平闆的尺寸(包括橫向和豎向)、普通電腦屏幕和寬屏。
需要考慮的問題:
某個頁面進行響應式設計時其适用的尺寸範圍是哪些?比如,1688搜索結果頁面,跨度可以從手機到寬屏,而1688虚拟货币行情,由于結構過于複雜,想直接遷移到手機上,不太現實,不如直接設計一個手機版的虚拟货币行情。
結合用戶需求和實現成本,對适用的尺寸進行取舍。比如一些功能操作的頁面,用戶一般沒有在移動端進行操作的需求,沒有必要進行響應式設計。
第二步:制作線框原型
針對确定下來的幾個尺寸分别制作不同的線框原型,需要考慮清楚不同尺寸下,頁面的布局如何變化,内容尺寸如何縮放,功能、内容的删減,甚至針對特殊的環境作特殊化的設計等。這個過程需要設計師和前端開發人員保持密切的溝通。
第三步:測試線框原型
将圖片導入到相應的設備進行一些簡單的測試,可幫助我們盡早發現可訪問性、可讀性等方面存在的問題。
第四步:視覺設計注意,移動設備的屏幕像素密度與傳統電腦屏幕不一樣,在設計的時候需要保證内容文字的可讀性、控件可點擊區域的
 
面積等。
第五步:前端實現
與傳統的web開發相比,響應式設計的頁面由于頁面布局、内容尺寸發生了變化,所以最終的産出更有可能與設計稿出入較大,需要前端開
 
發人員和設計師多溝通。