產(chǎn)品經(jīng)理以為的響應(yīng)式，還并不簡單

如何讓web產(chǎn)品快速支持移動端？

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

但實際上，完成一個web產(chǎn)品的從PC到移動端的跨平臺。響應(yīng)式還并不簡單。

響應(yīng)式曾經(jīng)成了越來越多的互聯(lián)網(wǎng)公司在網(wǎng)站搭建上，因為可以減少開發(fā)成本，快速開發(fā)還有多樣的模板，所以吸引了不少人選擇?？墒悄阒绬犴憫?yīng)式并不是萬能的。

響應(yīng)式是什么？

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。

響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計師采用這個技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

▲  響應(yīng)式下的pad\mobile\pc 

但仍然有響應(yīng)式的3點誤區(qū)，我分享給產(chǎn)品、運營同學(xué)

1. 響應(yīng)式不是等于只需要開發(fā)一次

就算是響應(yīng)式，仍然需要前端開發(fā)同學(xué)完成web端頁面、移動端頁面的開發(fā)。所以開發(fā)的工作量仍然是2套。但由于響應(yīng)式的web端和移動端在功能邏輯、頁面樣式、交互行為上相近，所以可以復(fù)用較多的代碼能力。

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

2.響應(yīng)式對UI設(shè)計要求高

和產(chǎn)品經(jīng)理不同，UI設(shè)計師的畫面是直接影響到前端開發(fā)者。因此UI設(shè)計師能不能按照響應(yīng)式規(guī)范做設(shè)計，懂得響應(yīng)式下web端的尺寸、結(jié)構(gòu)，會直接影響工作量的。

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

▲  WordPress開源web框架 

▲  whatsns開源框架 

現(xiàn)在市面上已經(jīng)有成熟的響應(yīng)式框架，可以減少UI設(shè)計工作。

3.產(chǎn)品經(jīng)理需要針對響應(yīng)式做需求裁剪

響應(yīng)式中，最大的變化是用戶使用場景的改變。從PC到移動端，導(dǎo)航欄、按鈕、內(nèi)容展示字段都有影響。

因此移動端的響應(yīng)式下，要主要實現(xiàn)用戶的什么功能？或那些數(shù)據(jù)瀏覽？其實是產(chǎn)品經(jīng)理要聚焦的。

▲  響應(yīng)式下功能不變，但功能使用場景變化 

響應(yīng)式下，web端和移動端的功有很多的變化，比如某社區(qū)產(chǎn)品采用響應(yīng)式結(jié)構(gòu)。pc端下導(dǎo)航欄和響應(yīng)式導(dǎo)航欄

▲  

掘金社區(qū)的web端形態(tài) 

▲  掘金的響應(yīng)式形態(tài) 

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

4.如何判斷產(chǎn)品是否屬于響應(yīng)式？

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

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

2、同一頁面在不同分辨率上看起來都應(yīng)該是合理的；

4、同一頁面在不同操作方式（如鼠標(biāo)和觸屏）下，體驗應(yīng)該是統(tǒng)一的；

5、同一頁面在不同類型的設(shè)備（手機、平板、電腦）上，交互方式應(yīng)該是符合習(xí)慣的。

來自用戶體驗設(shè)計公眾號

現(xiàn)在做響應(yīng)式越來越少了

由于現(xiàn)在的需求較為復(fù)雜，已經(jīng)不再是用戶瀏覽、查詢數(shù)據(jù)的能力。移動端H5需要提供內(nèi)容產(chǎn)生、用戶交互、邏輯等行為。僅僅用響應(yīng)式是不顯示的。

所以響應(yīng)式注定只適合內(nèi)容展示、內(nèi)容瀏覽的場景。比如新聞網(wǎng)站、資訊網(wǎng)站、股票證券網(wǎng)站。但牽涉到用戶交易、業(yè)務(wù)服務(wù)的流程，對移動端的場景要求更高，則不適合響應(yīng)式。

同時移動端因為特有的使用場景，導(dǎo)致和web端場景即使相同功能下，用戶路徑也有區(qū)別。

產(chǎn)品經(jīng)理還是老實的回歸到需求調(diào)研到原型設(shè)計，輸出移動端的原型頁面吧。

產(chǎn)品經(jīng)理可以體驗多個APP來對比響應(yīng)式、和自研H5的區(qū)別。體驗較多APP后就會清除響應(yīng)式的局限性。

今天的分享就在這里。

每天體驗1款A(yù)PP圈子

加入后365天，每天體驗一款A(yù)PP。提升產(chǎn)品設(shè)計能力，同時有1300份體驗報告幫助你找到競品。

從優(yōu)化&建議、商業(yè)模式、運營、功能描述、交互設(shè)計、產(chǎn)品定位至少6個維度，體驗一款應(yīng)用。

平均1天1塊錢，掃碼購買即可加入

連續(xù)體驗90款應(yīng)用，通過后原路退回