1. 程式人生 > >移動端/PC端網頁開發建議

移動端/PC端網頁開發建議

根據你的產品特點,進行兩種不同的設計,
根據你的設計需求,選擇合適的技術方案

A與B不是硬幣的正反面,它們為了解決同一個問題而生,它們是同一種思想的延伸。

移動和桌面設計的差別遠不止是佈局問題。只要有足夠的程式設計量,這些差別是可以通過響應式設計來解決的。事實上,你可以認為如果一種設計不能兼顧兩種平臺的主要差別,就不能算是合格的響應式設計。但是,如果確實想要處理好平臺間的所有差異,我們就回到了原點:進行兩種不同的設計。

——《Mobile Usability》(《貼心設計 打造高可用性的移動產品》)


其實無論是什麼解決方案,我們先來看看我們想要解決的問題:

“螢幕尺寸越來越多,不同裝置的互動特質也有著巨大的差別,我們希望我們的網站能夠在移動手機、平板、桌面電腦,在鍵鼠、觸控、無障礙裝置上都有優秀的使用者體驗。所以,我們需要網站的使用者介面在不同的平臺上有所不同。”


那怎麼做呢,一個解決方案應運而生:

  • 響應式設計 (Responsive Web design)

狹義上,我們把主要依靠前端 CSS (包括 Media Query 媒體查詢,百分比流式佈局,網格與Typography系統……)來對各種螢幕尺寸進行響應的做法,稱之為響應式佈局,又稱作自適應網頁設計,或者彈性設計。

這種主要依靠CSS的方案有很多優點,比如:
  • 設計元素很容易被複用,設計成本低
  • 前端只需要維護一套CSS程式碼,維護成本
  • 桌面端與移動端的設計十分接近,令使用者感到“熟悉”
  • 不需要任何伺服器端的支援
  • 與業務耦合程度低,複用程度高( 以至於 Bootstrap、Foundation 等一干框架都跟進了這個解決方案 )
但問題也很明顯,比如:
  • 設計需求複雜時,前端的開發成本沒有任何減輕
  • 無論是針對桌面還是移動的CSS程式碼(甚至圖片資原始檔)都會被同等的下載到客戶端(沒有考慮移動端的網路優化
  • 如果JS不寫兩套,桌面端的互動和移動端的互動很難針對平臺作出差異


如果你的移動使用者對網站所有的功能和內容有著與桌面使用者同等的需求,比如 新聞、報紙(媒體類)網站,或者活動、專題頁等 偏重資訊傳達而輕互動 的網站,那麼這個解決方案其實恰到好處:
觸控式螢幕優化(胖手指)、減少次要資訊…… 這些通過 CSS 解決就夠了。


但是,如果我想要做更多的 「移動化設計」,比如 減少資訊層級、增強手勢操作、讓網頁更接近一個Native App ?

好吧,為了更復雜的需求,為了我們的網站能更牛逼的 「響應」 各個平臺,
又有了這些解決方案:


  • 伺服器端(後端):
    • RESS (Responsive Web Design with Server Side Components)通過伺服器端元件的響應式網頁設計
提倡 RESS 的人認為:基於前端 CSS 的響應式方案只是一種妥協:
“ UI 只是在很被動的進行「調整」,而不能真正達到各個平臺的最優。好的設計應該達到「這個裝置該有的體驗」(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 的本質還是伺服器端動態的生成,返回 HTML、JS、CSS、影象等資原始檔,但是隻使用同一個 URL 就可以提供給移動端定製化更強的網頁,同時還大大節省了網路資源。


  • 前端(主要是JS),比如:
    • 在 JavaScript 中實現兩套邏輯,分別相容鍵鼠、觸控裝置
    • 通過 UA、特性檢測 在前端做裝置判斷,對資源進行非同步載入,渲染不同模版
    • 通過 特性檢測 在前端做裝置判斷,使用不同的業務邏輯
    • 前端的模組化也可以幫助解決這個問題,比如針對不同的平臺載入不同的模組
    • ……


這下,我們的網站可以更牛逼的 “響應” 各個平臺了。
(對,我還是稱之為響應:這的確還是在“響應”啊 ,不是嗎?)


但是等下……
後端開發成本上去了,前端開發成本也上去了,配合著估計產品、設計資源也都上去了,那我們為什麼不乾脆把 移動裝置網站 和 桌面裝置網站 分開呢!?


是啊,如果你的需求真的都到這一步了,你的移動網站也應該可以被稱作 WebApp 了。這種時候,把移動裝置網站徹底分開或許真的是更好的選擇。

開發資源如此充足,你還可以讓專門的團隊來維護移動端的網站。
(嗯,BAT 就是這麼幹的)

於是又一個概念來了:

  • 獨立的移動版網站 (按題主的話來說:手機和PC端分開來寫)

不過,它有那麼獨立麼?
我們知道,我們訪問網站是通過 URL 來訪問的。
將移動網站 和 桌面網站 分開,如果不使用 RESS 技術,往往也就意味著要維護兩個URL(不同的二級域名)
難道我們要讓所有桌面使用者自覺訪問 taobao.com ,所有 移動使用者 都自覺訪問 m.taobao.com

不可能吧 = =。

於是,我們還是得依靠前端或伺服器端的一次 “響應”(裝置檢測),做 URL 重定向,才能將不同裝置的使用者帶到那個為他們準備的網站。



所以其實在我看來,手機和PC端分開來寫,只是 狹義響應式設計 的一種發展和延伸罷了。他們的界限沒有,也並不需要那麼清晰。

就如開題所引用的:
事實上,你可以認為如果一種設計不能兼顧兩種平臺的主要差別,就不能算是合格的響應式設計。

“而無論是用什麼解決方案。” —— 這句是我補的。




故我的結論是:

這不是一個二選一的問題,而是選擇一個合適的度(你的桌面版本程式碼與移動版本程式碼分離、耦合的程度)

而這個度,則是由你的設計需求決定的。
而我們的需求原點其實也很簡單:

根據你的產品特點,進行兩種不同的設計”。