【經驗分享】響應式網站項目實操過程當中的那些事兒

本次網站改版升級是我來到新公司的第一個項目，需求之初並無說起要作響應式，在首次評審時領導和研發均認爲響應式處理與咱們網站相對契合，就這樣我開始了我職場生涯中第一個響應式網站設計。下面就跟你們分享響應式網站設計中的那些事兒。

由於本人以前並無接觸過響應式設計，在項目開始前便惡補了一些響應式的基礎知識。理論性資料網上衆多，爲了使各位對響應式有初步印象和認知，我在這裏只作簡單描述，各位若想要更全面深刻的瞭解可自行百度。

1什麼叫響應式設計，爲何要作響應式設計

（1）頁面的設計和開發應當根據用戶行爲以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、css media query的使用等。不管用戶正在使用筆記本仍是iPad，咱們的頁面都應該可以自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不一樣設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式設計使用戶在不一樣設備上訪問網站時都能得到最佳的瀏覽體驗。[來自百度百科]

（2）響應式網頁設計就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這樣，咱們就能夠沒必要爲不斷到來的新設備作專門的版本設計和開發了，響應式設計不只下降了開發成本，並且一套後臺維護管理一個網站版本，大大減小了運營成本。

2作響應式網站設計時，原型和設計圖應該出幾套

網上關於響應式網站設計的知識分享確實「海量」，但要麼偏向理論，要麼偏向技術，項目實操經驗分享少之又少。這也是爲何我要寫這篇文章，就是爲了從此再有產品經理作響應式項目時，有經驗可循。

先說咱們的狀況。

我在設計原型時確實沒有想到原型出幾套的問題，出於對PC端和手機端的格外重視，我原型也對應這兩個主流出了兩套，評審時你們也沒有任何異議。

後面故事就來了。

設計只出了一套PC端的設計圖便交付了，理由是響應式對文字和圖片的處理基本採用等比縮放的處理方法，因此只須要一套PC端的設計圖，到了其餘尺寸只須要前端看着等比處理便可，無需再出設計圖。

在我淺薄的認知和可憐的項目經驗裏，並無關於響應式網站設計應該出幾套設計圖的定義，我只能求助百度和其餘產品/前端同事，百度基本無果，同事給出的意見是出一套PC圖便可，其餘的由前端自行處理。評審時前端也沒有就出幾套設計圖給出明確要求，故，我也默認了此說法。

等前端動工，便開始頻繁質問我：你只給了PC端設計圖，那其餘屏幕尺寸時，我怎麼作啊。我本身決定不了，屏幕過渡時頁面佈局大家也得給出來，前端都是根據設計圖來的，反正設計圖有什麼我就作什麼。

前端反應激烈，態度強硬，脾氣火爆，我意識到問題有些嚴重，便趕忙召集設計和前端開會討論，最終結果是前端先自行對頁面進行響應式處理，如須要設計出圖，那麼設計根據前端要求出圖，在非技術難點問題上要產品下決策。

由於工期緊張，你們各讓一步便開始緊鑼密鼓的忙活起來。所幸你們工做態度不錯，都但願項目可以按時按質交付完成，這場小插曲便過去了。也確實辛苦前端妹子。

經過此次中場討論，我也瞭然這個問題的答案：

（1）若是網站版塊設計規整，柵格佈局，圖文內容簡單，交互簡潔，那麼就只要產品經理出一套PC原型，設計出一套PC設計圖便可。前端徹底能夠根據響應式基本原則，針對不一樣屏幕尺寸調整佈局。至於內容或模塊的刪減，須要產品決定，產品應提早告知前端。建議產品畫出線框圖，並在線框圖上標明響應到ipad尺寸和手機端尺寸時頁面如何佈局，內容如何刪減。這種最典型的適用於於單頁網站。

（2）再稍微複雜一些的頁面，好比咱們的網站，包含圖文、視頻、報名表單、通欄banner等，而且對移動端的導航樣式有特殊要求，這些都須要產品提早規劃好並告知前端。同時只須要出PC端設計圖和手機端的線框圖，前端基本能夠參照設計圖和線框圖去作。

拿咱們的項目舉例，對移動端有有特殊要求：

（3）但若是網站佈局和交互複雜，內容信息太重，建議產品和設計根據PC尺寸、IPAD尺寸和手機尺寸分別出三套原型和設計圖。這樣前端基本知道過渡尺寸時都如何處理，也知道在不一樣尺寸時響應的重點是什麼，節約溝通和研發成本。

例如：

https://cloud.tencent.com/act/mid-year?fromSource=gwzcw.930926.930926.930926

3響應式網站上線後，運營須要注意什麼

咱們的網站改版上線後，響應式效果比較理想，最着重向運營強調的有如下兩點：

（1）圖片問題：banner及寬度較長的通欄圖片，須要出兩套，一套PC、一套移動。

由於響應式不在前臺對圖片尺寸進行固定，故運營上傳的圖片必須通過處理，確保圖片尺寸正確，上傳完畢後自行到前臺檢查；尺寸一旦不統一，便會出現錯位。

（2）視頻問題：視頻存儲在咱們本身的後臺，不使用騰訊視頻或其餘視頻播放器，若想要視頻響應，須要肯定上傳的視頻爲MP4格式。

4項目經驗總結

（1）在作響應式設計時，提早規劃清楚響應各屏幕尺寸時要刪減的內容和頁面佈局，建議產品經理畫出PC、iPad和手機尺寸的線框圖，這樣直觀明瞭，前端不用來回確認，節省開發時間。固然了，若是是有充分的設計/開發資源和充足的項目時間，能夠給出以上三個尺寸的設計圖。

（2）產品經理要充分理解和尊重設計與研發的意見和建議，可是在關鍵點上由產品下決定，在非技術難點上產品要給出解決方案。經過此次項目，個人統籌和決策能力都與明顯提高。

（3）因爲產品經理缺少此類項目的專業知識和項目經驗，沒有作到合理統籌安排，設計和前端職責劃分不清晰，從而形成了一些爭端，這也是實操該項目給個人最大教訓。