作者:黃玄鏈接:https://www.zhihu.com/question/25836425/answer/31564174來源:知乎著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。根據(jù)你的產(chǎn)品特點,進(jìn)行兩種不同的設(shè)計,****根據(jù)你的設(shè)計需求,選擇合適的技術(shù)方案。
A與B不是硬幣的正反面,它們?yōu)榱私鉀Q同一個問題而生,它們是同一種思想的延伸。
移動和桌面設(shè)計的差別遠(yuǎn)不止是布局問題。只要有足夠的編程量,這些差別是可以通過響應(yīng)式設(shè)計來解決的。事實上,你可以認(rèn)為如果一種設(shè)計不能兼顧兩種平臺的主要差別,就不能算是合格的響應(yīng)式設(shè)計。但是,如果確實想要處理好平臺間的所有差異,我們就回到了原點:進(jìn)行兩種不同的設(shè)計?!禡obile Usability》(《貼心設(shè)計 打造高可用性的移動產(chǎn)品》)
其實無論是什么解決方案,我們先來看看我們想要解決的問題:
“屏幕尺寸越來越多,不同設(shè)備的交互特質(zhì)也有著巨大的差別,我們希望我們的網(wǎng)站能夠在移動手機(jī)、平板、桌面電腦,在鍵鼠、觸摸、無障礙設(shè)備上都有優(yōu)秀的用戶體驗。所以,我們需要網(wǎng)站的用戶界面在不同的平臺上有所不同?!?/strong>
那怎么做呢,一個解決方案應(yīng)運而生:
響應(yīng)式設(shè)計 (Responsive Web design)
狹義上,我們把主要依靠前端 CSS (包括 Media Query 媒體查詢,百分比流式布局,網(wǎng)格與Typography系統(tǒng)……)來對各種屏幕尺寸進(jìn)行響應(yīng)的做法,稱之為響應(yīng)式布局,又稱作自適應(yīng)網(wǎng)頁設(shè)計,或者彈性設(shè)計。
這種主要依靠CSS的方案有很多優(yōu)點,比如:設(shè)計元素很容易被復(fù)用,設(shè)計成本低
前端只需要維護(hù)一套CSS代碼,維護(hù)成本低
桌面端與移動端的設(shè)計十分接近,令用戶感到“熟悉”
不需要任何服務(wù)器端的支持
與業(yè)務(wù)耦合程度低,復(fù)用程度高( 以至于 Bootstrap、Foundation 等一干框架都跟進(jìn)了這個解決方案 )
但問題也很明顯,比如:設(shè)計需求復(fù)雜時,前端的開發(fā)成本沒有任何減輕
無論是針對桌面還是移動的CSS代碼(甚至圖片資源文件)都會被同等的下載到客戶端(沒有考慮移動端的網(wǎng)絡(luò)優(yōu)化)
如果JS不寫兩套,桌面端的交互和移動端的交互很難針對平臺作出差異
如果你的****移動用戶對網(wǎng)站所有的功能和內(nèi)容有著與桌面用戶同等的需求,比如 新聞、報紙(媒體類)網(wǎng)站,或者活動、專題頁等 偏重信息傳達(dá)而輕交互 的網(wǎng)站,那么這個解決方案其實恰到好處:觸摸屏優(yōu)化(胖手指)、減少次要信息…… 這些通過 CSS 解決就夠了。
但是,如果我想要做更多的 「移動化設(shè)計」,比如 減少信息層級、增強(qiáng)手勢操作、讓網(wǎng)頁更接近一個Native App ?
好吧,為了更復(fù)雜的需求,為了我們的網(wǎng)站能更牛逼的 「響應(yīng)」 各個平臺,又有了這些解決方案:
服務(wù)器端(后端):
RESS (Responsive Web Design with Server Side Components)通過服務(wù)器端組件的響應(yīng)式網(wǎng)頁設(shè)計
提倡 RESS 的人認(rèn)為:基于前端 CSS 的響應(yīng)式方案只是一種妥協(xié):“ UI 只是在很被動的進(jìn)行「調(diào)整」,而不能真正達(dá)到各個平臺的最優(yōu)。好的設(shè)計應(yīng)該達(dá)到「這個設(shè)備該有的體驗」(Device Experiences)。 ”****Device Experiences :A device experience is defined by how a device is most commonly used and the technical capabilities or limitations it possesses.
RESS 的本質(zhì)還是服務(wù)器端動態(tài)的生成,返回 HTML、JS、CSS、圖像等資源文件,但是只使用同一個 URL 就可以提供給移動端定制化更強(qiáng)的網(wǎng)頁,同時還大大節(jié)省了網(wǎng)絡(luò)資源。
前端(主要是JS),比如:
在 JavaScript 中實現(xiàn)兩套邏輯,分別兼容鍵鼠、觸摸設(shè)備
通過 UA、特性檢測 在前端做設(shè)備判斷,對資源進(jìn)行異步加載,渲染不同模版
通過 特性檢測 在前端做設(shè)備判斷,使用不同的業(yè)務(wù)邏輯
前端的模塊化也可以幫助解決這個問題,比如針對不同的平臺加載不同的模塊
……
這下,我們的網(wǎng)站可以更牛逼的 “響應(yīng)” 各個平臺了。(對,我還是稱之為響應(yīng):這的確還是在“響應(yīng)”啊 ,不是嗎?)
但是等下……后端開發(fā)成本上去了,前端開發(fā)成本也上去了,配合著估計產(chǎn)品、設(shè)計資源也都上去了,那我們?yōu)槭裁床桓纱喟?移動設(shè)備網(wǎng)站 和 桌面設(shè)備網(wǎng)站 分開呢???
是啊,如果你的需求真的都到這一步了,你的移動網(wǎng)站也應(yīng)該可以被稱作 WebApp 了。這種時候,把移動設(shè)備網(wǎng)站徹底分開或許真的是更好的選擇。
開發(fā)資源如此充足,你還可以讓專門的團(tuán)隊來維護(hù)移動端的網(wǎng)站。(嗯,BAT 就是這么干的)
于是又一個概念來了:
獨立的移動版網(wǎng)站 (按題主的話來說:手機(jī)和PC端分開來寫)
不過,它有那么獨立么?我們知道,我們訪問網(wǎng)站是通過 URL 來訪問的。將移動網(wǎng)站 和 桌面網(wǎng)站 分開,如果不使用 RESS 技術(shù),往往也就意味著要維護(hù)兩個URL(不同的二級域名)難道我們要讓所有桌面用戶自覺訪問 http://taobao.com** ,所有 移動用戶 都自覺訪問 http://m.taobao.com** ?
不可能吧 = =。
于是,我們還是得依靠前端或服務(wù)器端的一次 “響應(yīng)”(設(shè)備檢測),做 URL 重定向,才能將不同設(shè)備的用戶帶到那個為他們準(zhǔn)備的網(wǎng)站。
所以其實在我看來,手機(jī)和PC端分開來寫,只是 狹義響應(yīng)式設(shè)計 的一種發(fā)展和延伸罷了。他們的界限沒有,也并不需要那么清晰。
就如開題所引用的:事實上,你可以認(rèn)為如果一種設(shè)計不能兼顧兩種平臺的主要差別,就不能算是合格的響應(yīng)式設(shè)計。
“而無論是用什么解決方案?!?—— 這句是我補(bǔ)的。
故我的結(jié)論是:
這不是一個二選一的問題,而是選擇一個合適的度(你的桌面版本代碼與移動版本代碼分離、耦合的程度)
而這個度,則是由你的設(shè)計需求決定的。而我們的需求原點其實也很簡單:
“根據(jù)你的產(chǎn)品特點,進(jìn)行兩種不同的設(shè)計”。
以上。