首頁 響應式網頁 什麼是響應式網頁 ?
以類別搜尋
以關鍵字搜尋
什麼是響應式網頁 ?

到底甚麼是 "響應式網頁" ?  最常聽到的詮釋就是可同時可以支援 手機平板電腦  瀏覽器 顯示的網頁,一套底三套 !  接著會看到如下的一張示意圖來強化這個概念。

 

 

說實話,在大部分的情況下,的確是可以這樣解釋,不過這也限制了原本響應式這個名詞的可以發揮的創意。

 

最早 響應式網頁設計(Responsive Web Design) 這個名詞是由 Ethan Marcotte 於 2010 年 5 月 在其文章 A List Apart  提出的,他所期待的 響應式 應該是 : 

 

網站會根據任何可能的環境因素,包括  :

  • 瀏覽器寬度、高度
  • 網路頻寬
  • 裝置種類(手機、平板、電腦 或 電視)
  • 地點
  • 天氣
  • 地心引力
  • 甚至是 使用者本身

來決定如何 回應(Response) 出一個適當的網頁內容結構

 

我們現在最好開始這樣重新認知響應式這個名詞,因為希塔網路就是以這樣的格局來全方位發展響應式網頁。

 

 

 

什麼又是響應式設計 ?

 

不只網頁,APP 也早就在用響應式設計

 

有在寫 APP 的人都知道,為了開發效率問題,現在無法為每一種尺寸的裝置去開發一組獨立的程式,現在的作法也已經改為響應式,一套程式語法,應付各種尺寸的螢幕裝置。雖然目前如果要支援不同作業系統(iOSAndroid 與 Windows),他們使用的開發語言就不同 , 這部分還是要分開來開發。

 

響應式設計 的方法核心就是盡量以一套語法邏輯來面對各種環境

 

響應式設計 的 另一項要求就是 盡量汲取 當下環境因素 來回應使用者,所以說 :

如果使用者正在拿的是手機 或 平板 瀏覽器,響應式網頁或者 APP 就必須有 觸控功能 :

 

 

3D RPG 射擊遊戲 3D RPG 射擊遊戲
純 HTML 的 室內 3D 射擊遊戲,但是沒有作得很完整。
圖片自動 轉 3D 圖片自動 轉 3D
透過四面八方拍幾張照片,就可以把整個城市的 3D 物件建出來,沒有拍到的地方還會自動猜測。
3D 賽車 3D 賽車
3D 方塊消去遊戲 3D 方塊消去遊戲
純 HTML 製作的 3D 方塊消去遊戲 。也許您曾經玩過電腦版的。
3D 雲 3D 雲
純 HTML 作出來的擬真 3D 雲,不是真的 3D, 但很逼真,也可以隨滑鼠操控方向。
3D 地球 3D 地球
純 HTML 拚出來 圓形地球,有各個國家,上面還有雲在飄,整個地球還會轉 !

 

如果手機是拿直立的,就以直式顯示畫面,如果手機橫放,就必須以橫式顯示畫面,兩者排列方式可能完全不一樣,我們已 APP "Candy Crush" 為例 :

 

     

Candy Crush 直立 與 橫放

 

 

 Yahoo 行動版首頁有時會汲取 地點 與 天氣 等 環境因素,回應一個貼心的畫面 :

 

 Yahoo 行動版

 

 我們可以想像 響應式設計的概念 在未來將可以激發出多少的創意與功能。

 

 

 

響應式設計的未來

 

隨著 裝置(包括行動 與 非行動 裝置)越來越多樣化,功能越來越多,響應式網頁 與 APP 在開發上可能會越來越付挑戰性,這邊我們列出一些頗具市場性的前衛裝置。

  • Apple Watch
    美國蘋果公司設計研發的穿戴式行動裝置




     
  • Cicret Bracelet投影智慧手環  
    法國 Cicret 團隊設計研發,將手機螢幕投影於手臂上,目前已開始量產

    大型商城模式 大型商城模式

    如 PCHOME / MOMO

    開放供應商進入

    供應商自動收到出貨通知

    供應商可自行登入後台管理商品

    商品類別無限階層 商品類別無限階層

    如 美妝\專櫃保養\成效分類\保濕\...

    類別結構可以任意調整

    => 父類別 子類別對應

    類別排列順序 可以任提調整

    單一商品多重規格 單一商品多重規格

    同一商品可以有多重規格

    如 衣服可以有 不同的尺寸 , 顏色

    但是價格一樣

    支援數位商品銷售 支援數位商品銷售

    虛實商品整合銷售

    影像圖片檔 (攝影作品)

    多媒體影音檔案(.MP3 / .MP4)

    傳統程式碼下載

    動態網址路徑

    多元付款 多元付款

    信用卡 

    貨到付款 

    銀行轉帳 

    PayPal 

    支付寶 

    超商取貨付款

    促銷方式 促銷方式

    會員等級分類

    紅利點數累積

    禮物卡

    折價劵

    買越多 省越多

    限時搶購


     
  • OmniTouch
    由微軟打造的下一代互動式投影顯示器

    大型商城模式 大型商城模式

    如 PCHOME / MOMO

    開放供應商進入

    供應商自動收到出貨通知

    供應商可自行登入後台管理商品

    商品類別無限階層 商品類別無限階層

    如 美妝\專櫃保養\成效分類\保濕\...

    類別結構可以任意調整

    => 父類別 子類別對應

    類別排列順序 可以任提調整

    單一商品多重規格 單一商品多重規格

    同一商品可以有多重規格

    如 衣服可以有 不同的尺寸 , 顏色

    但是價格一樣

    支援數位商品銷售 支援數位商品銷售

    虛實商品整合銷售

    影像圖片檔 (攝影作品)

    多媒體影音檔案(.MP3 / .MP4)

    傳統程式碼下載

    動態網址路徑

    多元付款 多元付款

    信用卡 

    貨到付款 

    銀行轉帳 

    PayPal 

    支付寶 

    超商取貨付款

    促銷方式 促銷方式

    會員等級分類

    紅利點數累積

    禮物卡

    折價劵

    買越多 省越多

    限時搶購

 

每一種創新裝置的出現,都帶來更多的挑戰與討論,我們不能夠再僅以 "瀏覽起寬度" 當作設計響應式網頁的單一原則了,要開始認真面對與享受下一代嶄新的變革與創意。

 

 

 

 

 


@2013 希塔網路 . 0958636150 . All Rights Reserved.