關(guān)于響應(yīng)式

作者:黃玄鏈接: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è)計”。
以上。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,818評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,185評論 3 414
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,656評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,647評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,446評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,951評論 1 321
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,041評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,189評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,718評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,800評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,419評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,420評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,755評論 2 371

推薦閱讀更多精彩內(nèi)容