Issuu on Google+

將行動裝置納入考量的介面設計趨勢 將行動裝置納入考量的介面設計趨勢 Web Interface Design Trends Adapted to the Rise of Mobile Devices Web Interface Design Trends Adapted to the Rise of Mobile Devices.


PC/Laptop 滑鼠/鍵盤

過去

有 線 網 路

全球資訊

為主

現在

解析度/螢幕大小 互動媒介 品牌 系統 介面

無 線 訊 號 為主

個人

裝置/媒介

世界各地 (via網際網路)


行動裝置的普級化 不同解析度的載具被研發出來 透過不同裝置來上網的需求增加 更多元的人機互動


1985

 簡 

Windows 1.0

1995

Windows 95

 繁    簡?   2002

Windows XP

Windows 8 2009

PRESENT

Windows 7


http://fortawesome.github.io/Font-Awesome/icons/

http://www.google.com/fonts/

Web Font / Icon Font

App Style Interface


什麼是Responsive Web Design? 顯示的介面不同卻使用同一份 HTML 網頁,運用 CSS Media Query 做調整,讓它在不同的介面上能 夠適應,這就叫自適應 網頁(RWD)

用意為何?

Responsive Web Design

讓同一個網頁在不同的解析度下有不同的介面呈現 ,使其在 PC、Mobile 上都可以有較佳的瀏覽效果

優點: • 開發成本比 Native App 低 • 無須重寫 HTML,方便維護 • 可以針對許多不同裝置分別調整

缺點: • 載入速度的問題 • 未針對Mobile的使用流程而設計 • IE8以下的瀏覽器不支援


Time Inc.

包括手機、平板還有桌面電腦的每次造訪頁 數 (Page per visit) 都顯著的上升 手機的每次造訪頁數多了 23% 首頁的不重複訪客量多了 15%,在上面停留 的時間多了 7.5% 手機的跳出率(Bounce Rate)減少了 26%

O’Neill Clothing

Responsive Web Design

在 iPhone/iPod 上面的轉換率提昇了 65.7% 在 iPhone/iPod 上面的收入成長了 101.2% 在 Android 上面的轉換率提昇了 407.3% 在 Android 上面的收入成長了 591.4% 在非手持裝置上面轉換率提昇了 20.3% 在非手持裝置上面收入成長了 41.1%

Skinny Ties

在所有裝置上面的收入成長了 42% 轉換率提昇了 13.6% 在 iPhone 上面收入成長了 377.6% 在 iPhone 上面轉換率提昇了 71.9% 停留時間增加了 44.6% 跳出率降低了 23.3%


Responsive Web Design


Vertical Parallax Scrolling

什麼是Vertical Scrolling Website? 即所謂的單頁式網頁(one-page website),網站的全部內容 資訊都在同一頁,通常會有導覽工具列在最上方。

用意為何? 此類網頁設計常見於企業用storytelling的方式來推銷產品 ,上方的導覽列讓使用者能迅速滑至對應的內容,此方式應 用於觸控式介面則稱作Kinetic Scrolling.

優點:

缺點:

1. 互動性強 2. 便於使用移動裝置瀏覽

1. 僅適用於資訊類網頁 2. 載入緩慢 3. 不利於SEO

範例:

http://www.ok-studios.de/home/ http://5emegauche.com/agence http://www.curiousgenerationgroup.com/ http://www.mastermindsagency.com/ Ad agency https://www.airbnb.com/annual/

Infinite Scrolling: Tumblr, Twitter, Pinterest, Facebook, etc.


Vertical Parallax Scrolling


早期:使用性需求

現在:使用者經驗需求 開始重視使用

不同的操作需求 。


易視性:以簡單的標示告訴使 用者如何正確的操作。

配對性:讓使用者知道自己的操 作會控制到什麼東西。

回饋性:讓使用者清楚知道自 己的操作是有效的。


迷思: 到底什麼才是好的介面設計? 追隨當下的潮流趨勢才是王道? 或 以自家產品或服務本身來出發? 線上遊戲需要華麗的畫面及刺激的效果來吸引玩家,天氣預報或 時間顯示則是以簡單清楚為主,為何有此不同?


視覺上的呈現手法,取決於這個產品或服務本身的 核心價值 ,或是有無幫使用者 解決問題 。 在這些前提被滿足的情況下,最後才去選擇適當的設計 方式去呈現畫面。 擬物化要被遺棄了嗎? Flash網頁過時了嗎? 連Apple也妥協了嗎? 到後來,難道所有的設計都只注重 資訊內容 視覺享受 的考量了嗎?

而失去


你如何看待介面設計?

裝飾/附加價值 助於發揮功能及提高價值 個人審美觀或習慣 那是視覺/UI/網頁設計部門的事

Mere decoration or a bonus Enhance functionality Depends on individuals None of my business

獨特性 產品獨特性? 介面獨特性? 品牌獨特性?

黏著度 然後思考...

你的使用者如何看待介面設計? 你想要你的使用者如何看待你的產品/服務?

產品黏著度? 介面黏著度? 品牌黏著度?


The Web Interface Trends Adapted to Mobile Device將行動裝置納入考量的網頁介面設計趨勢