Google Mobile UX Marathon 雙週心得(一)
Jasmine Lin
2.2K2

Hi Jasmine:

我是一個網頁開發者,我叫 Askie。對 UI/UX 領域有興趣,多虧妳的文章讓我發現新的學習資源,謝謝啦:)

在這篇文章內容當中,本來對於「Mobile Web、響應式網頁」等詞彙有點混淆。剛剛簡單看了 Google 的介紹跟妳回覆給我的延伸文章,我可以用我的經驗跟理解的內容在這裡做個歸納,也希望對妳有幫助:

TL; DR;

根據網站定位不同,也會使用不同的方式。以智慧型裝置為優先的網頁設計若能結合 RWD,會比較容易維護,也不會違背 Mobile First 的概念。PWA 是讓網頁擁有像操作原生 APP 般的實踐方法、網頁技術,那麼 Mobile Web 就是指這一整塊在未來的成長將會非常可觀,因為透過網頁技術( JavaScript)即可達到跨平台開發任何應用程式。

Web

基於瀏覽器為載體的網頁。

Mobile Web

基於智慧型裝置(智慧型手機、平板等)中的瀏覽器為載體的網頁。

Desktop Web

基於電腦中的瀏覽器為載體的網頁。

Web Apps

網頁透過 PWA 的實作,可以令其在手機端擁有像是使用原生 App 般的功能(如加到主畫面、推播、通知、可離線…等)。

網頁技術

RWD,全名是 Responsive Web Design

透過 Media Queries (偵測裝置的寬高以及裝置方向….等)可以讓一個網頁中的元件,在不同的裝置時,自動調整寬高、位置、顯示與否、顏色、動畫。也就是說不只有重組及縮放。

PWA,全名是 Progressive Web App

透過這個技術的實踐,使用者將不限定任何人、於任何載體、在任何時候都可以使用。瀏覽網頁時,可以直接加到主畫面,顯示妳所設定的 Logo Icon、發送通知,如同使用原生 App 一樣,加到主畫面後自然也沒有網址的 URL Bar。而這 RWD 與 PWA 兩個技術之間並無衝突。

不同設計導向的網站

Full (or Desktop) Sites

以桌面優先設計的網站。

Mobile-dedicated Sites

以行動裝置優先設計的網站,通常是已經非常大的網站結構,頁面的元件非常多,需要針對裝置使用者專門開發一個專屬網頁做最佳優化,規劃不同動線與操作流程,如 Yahoo!、Facebook,擁有如 m.site.com 的網址(一個新的網站,專門給智慧型裝置使用者瀏覽)。

所以有這樣第二站點的網站通常會搭配 JavaScript 去判定裝置類型,轉址想給使用者瀏覽的 URL。

Responsive-design Sites

設計一個頁面,就能根據裝置寬高或方向不同,呈現不同的樣式,甚至是內容也能依據商業邏輯的權重來決定在哪個裝置呈現哪些資訊。