頁面

RWD 適應性網頁設計

適應性網頁設計簡介

適應性網頁設計 (Responsive Web Design) 簡稱 RWD ，也有人說是自適應網頁設計，或是響應式網頁設計。隨著行動裝置愈來愈多樣化，適應性網頁設計也愈來愈流行。

RWD 是一種網頁設計的技術，這種設計主要是希望讓網站在多種瀏覽裝置上（例如：個人電腦、平板電腦，以及手機…等行動裝置），都能夠順利閱讀和導覽，並且可以減少在小型裝置瀏覽器上，縮放、平移和捲動螢幕的操作。

適應性網頁設計和過去的網頁設計方式，究竟有什麼不同呢？

傳統網頁設計的瀏覽呈現

傳統的網頁設計方式，在不同裝置上，都是同樣的呈現方式。在小型裝置瀏覽器下顯示，只是網頁依比例縮小。有時照片、文字、選單、按鈕…等，都小到看不清楚，或是不容易點選。所以需要使用縮放手勢，不斷的去放大縮小觀看網頁。 (如下圖)

傳統網頁設計 - 瀏覽示意圖

適應性網頁設計的瀏覽呈現

RWD 的網頁設計方式，則是依不同的螢幕解析寬度，去調整不一樣的網頁顯示及導覽方式，讓小型裝置瀏覽器上的網頁，字體不至於縮到太小，選單、按鈕、連結…等，也不太需要經過縮放，就能方便點選操作。 (如下圖)

RWD 適應性網頁設計 - 瀏覽示意圖

※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。

網站案例

Windows Store App 開發參考規格表

Windows Store App 為近來 App 大戰中的後起之秀，但隨著 Windows 8 上市，整個 Windows Store App 應用範圍已是愈來愈廣。

與 iOS App 、 Android App 不同的是， Windows Store App 可以原生支援更多種程式語言來開發。對於開發人員來說，選擇的彈性更多了。而 HTML5 + Java Script 的原生支援，與其它平台只能用在 Web App 或混合式 App 不同，有其獨特的優勢。

並且自 Windows Phone 7 起的 Metro Style 介面，也走出與 iOS 及 Android 不同的風格，別有一番特色。

Microsoft Windows App 開發參考規格表
作業系統廠商 Microsoft
裝置類型 Windows Phone 手機 Windows 電腦 (ARM) Windows 電腦 (x86/x64)
最新作業系統 Windows Phone 8.1 Windows 8.1 RT Windows 8.1
應用程式商店 Windows Phone Store Windows Store Windows Store
主要開發工具 Visual Studio Visual Studio Visual Studio
SDK Windows Phone SDK 8.1 Windows 8.1 SDK Windows 8.1 SDK
主要程式語言 C / C++
C# / VB.NET
HTML5 + Java Script		 XAML + C / C++
XAML + C# / VB.NET
DirectX + C++
HTML5 + Java Script		 XAML + C / C++
XAML + C# / VB.NET
DirectX + C++
HTML5 + Java Script
參考型號
  • HTC 8X (Accord)
  • Nokia Lumia 920
  • Microsoft Surface
  • Acer Aspire S7
  • Microsoft Surface Pro
預設瀏覽器 Internet Explorer Mobile 11 Internet Explorer 11 Internet Explorer 11
排版引擎 Trident Trident Trident
Java Script 引擎 Chakra Chakra Chakra
HTML5 支援度 未知 78 % 78 %
  • 以上資訊為博全科技彙整，僅供 App 開發參考。相關資訊可能隨著時間而有所改變，一切應以 Microsoft 網站提供之最新資訊為準。
  • 以上未特別註明的「電腦」即泛指包含「平板電腦、筆記型電腦、桌面型電腦」的裝置。
  • HTML5 支援度之數據，為 caniuse.com 網站之統計結果。
<< 上一篇： Android App 規格表 [ App 開發簡介 ]

※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。

App 應用程式開發簡介

App 的定義

App 原是為電腦應用程式 (Application) 的簡稱，過去大家一般也叫它軟體 (Software) 。

但由於近來 iPhone 、 iPad 、 Android 手機及平板電腦的風行，加上 iOS 下載應用程式的商店 App Store 中的 "App" 這個名詞，讓現在人認為在行動手持裝置上執行的程式叫做 App ，而幾乎快忘了原來桌面電腦上的應用程式軟體，其實也是 App 。

因此，以下我們所提及的 App 說明，也著重以多數人認定的行動裝置 App 為主。

App 的開發方式分類

原生應用程式 (Native App) 開發
一般使用 Objective-C 、 Swift 、 Java 、 Kotlin 、 C 、 C++ 、 C# … 等程式語言開發用戶端程式，並可上架至應用程式商店。 < 深入瞭解 >
網頁應用程式 (Web App) 開發
一般使用 HTML / XHTML / HTML5 + CSS + Java Script … 等網頁技術開發用戶端程式，並使用瀏覽器開啟執行。 < 深入瞭解 >
混合式應用程式 (Hybrid App) 開發
一般以 Web App 方式開發用戶端程式，但會透過 PhoneGap 等框架工具跟行動裝置硬體設備互動，或加上部份原生程式，最後可包裝上 Native App 的外殼，上架至應用程式商店。 < 深入瞭解 >

各家 App 開發的相關規格

下一篇： 原生 App 開發 >>

※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。

原生 App 程式開發

原生 App 的定義

在此所指的原生應用程式 (Native App) ，指的是作業系統廠商本身提供 SDK 或建議的開發方式。

以下開發方式屬於這一類：

  • 使用 Xcode & Objective-C / Swift 開發，上架到 App Store 或 Mac App Store 上的 iOS App 。
  • 使用 Android Studio & Java / Kotlin 或 Eclipse 開發，上架到 Google Play 的 Android App (也可不上架，直接執行 apk 檔安裝) 。
  • 使用 Visual Studio & C / C++ / C# / VB.NET / HTML5 + Java Script 開發，上架到 Windows Mobile Store 或 Windows Store 的 Windows Store App 。

優點

  • 原生 App 執行速度快，效能佳。適合需要極快速反應的程式、複雜的動畫、遊戲 … 等類型。
  • 原生 App 對硬體裝置的支援度較好，可以應用幾乎所有硬體上的功能。例如：相機功能、 GPS 地理定位、測速計、磁力計、陀螺儀 … 等。
  • 可以在官方線上商店上架，設定下載 App 的人是否要付錢，用以賺取費用。
  • 使用已安裝的 App 時，不需要開瀏覽器及輸入網址。

缺點

  • 不同裝置的原生 App 必須使用指定的程式語言及 SDK 開發。例如若 App 要用原生程式開發，且希望在 iOS 、 Android 、 Windows Mobile 上都能下載使用，就必須要開發 3 套不同程式語言寫的 App 。
  • 開發過程中，要測試原生 App 功能必須先經過程式編譯 (Compile) 、部署安裝在裝置上，才能夠執行測試。一但有任何問題，每次修改都必須重新編譯、部署安裝的流程才行，開發測試較不方便。 (透過裝置模擬器可以測試部份功能，但模擬執行的速度也很慢)
  • 部份 App 的開發者必須要繳年費給官方，才能開發原生 App 及將 App 上架。
  • 將 App 上架需要經過官方審核程序。
  • 付費 App 下載需讓官方抽成。
  • 原生 App 程式若有更新，就需要重新上架、審核，而使用者也必須更新或重新下載，才能使用新的功能。
<< 上一篇： App 開發簡介 下一篇： Web App 開發 >>

※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。