如何讓web產品快速支援移動端？

許多產品新人可能會挑選響應式做產品的設計方案。因為響應式帶來的前端體驗和設計長得差不多，認為交給前端開發即可，不需要太多時間就可以完成。

但實際上，完成一個web產品的從PC到移動端的跨平臺。響應式還並不簡單。

響應式曾經成了越來越多的網際網路公司在網站搭建上，因為可以減少開發成本，快速開發還有多樣的模板，所以吸引了不少人選擇。可是你知道嗎響應式並不是萬能的。

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。

響應式佈局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著大螢幕移動裝置的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

▲ 響應式下的pad\\mobile\\pc

但仍然有響應式的3點誤區，我分享給產品、運營同學

響應式不是等於只需要開發一次

就算是響應式，仍然需要前端開發同學完成web端頁面、移動端頁面的開發。所以開發的工作量仍然是2套。但由於響應式的web端和移動端在功能邏輯、頁面樣式、互動行為上相近，所以可以複用較多的程式碼能力。

如果涉及到IPAD端，那就還需要開發pad版本。

2.響應式對UI設計要求高

和產品經理不同，UI設計師的畫面是直接影響到前端開發者。因此UI設計師能不能按照響應式規範做設計，懂得響應式下web端的尺寸、結構，會直接影響工作量的。

所以你可以看到很多web產品的響應式其實提前已經有了，比如知名的wordpress、ask2，都是自帶響應式的。

▲ WordPress開源web框架

▲ whatsns開源框架

現在市面上已經有成熟的響應式框架，可以減少UI設計工作。

3.產品經理需要針對響應式做需求裁剪

因此移動端的響應式下，要主要實現使用者的什麼功能？或那些資料瀏覽？其實是產品經理要聚焦的。

▲ 響應式下功能不變，但功能使用場景變化

響應式下，web端和移動端的功有很多的變化，比如某社群產品採用響應式結構。pc端下導航欄和響應式導航欄

▲

掘金社群的web端形態

▲ 掘金的響應式形態

通過第三方成熟的框架，響應式能夠幫助解決移動端開發的成本、時間、設計工作。同時因為邏輯類似，響應式佈局甚至可以減少測試的工作難度和時間。

4.如何判斷產品是否屬於響應式？

這裡有4個體驗維度，幫助你驗證

1、同一頁面在不同大小和比例上看起來都應該是舒適的；

2、同一頁面在不同解析度上看起來都應該是合理的；

4、同一頁面在不同操作方式（如滑鼠和觸屏）下，體驗應該是統一的；

5、同一頁面在不同型別的裝置（手機、平板、電腦）上，互動方式應該是符合習慣的。

由於現在的需求較為複雜，已經不再是使用者瀏覽、查詢資料的能力。移動端H5需要提供內容產生、使用者互動、邏輯等行為。僅僅用響應式是不顯示的。

所以響應式註定只適合內容展示、內容瀏覽的場景。比如新聞網站、資訊網站、股票證券網站。但牽涉到使用者交易、業務服務的流程，對移動端的場景要求更高，則不適合響應式。

同時移動端因為特有的使用場景，導致和web端場景即使相同功能下，使用者路徑也有區別。

產品經理還是老實的迴歸到需求調研到原型設計，輸出移動端的原型頁面吧。

產品經理可以體驗多個APP來對比響應式、和自研H5的區別。體驗較多APP後就會清除響應式的侷限性。

今天的分享就在這裡。