行動裝置看漲!跨屏介面設計的現況與未來

所謂工欲善其事,必先利其器。這個月中Business insider在IGNITION大會中提出的「數位未來趨勢報告(The Future Of Digital)」最近已經引起了廣泛引用,而Phimedia社群小組認為其中最重要的就是「企業必須要將使用行動裝置(Mobile)的用戶納入考量」,原因就在於目前已經有6成的上網設備都是行動裝置!

因此為行動裝置用戶創造出友善的跨屏介面已經成了企業的重要課題,這次要跟大家聊聊跨屏介面設計的現況與未來。

1102450_693329077350468_1833639606_o

圖1.松菸誠品的新媒體網站呈現不同的跨屏視覺

  • 跨屏設計的現況

    隨著智慧型手機的普及,企業紛紛開始思考跨屏策略,有的企業只以網站(Web)的方向作思考,常問「我們該選擇另外打造一個行動版網站,還是僅在原本的網站中加入響應式網頁設計?」。

    有的企業則以提供App下載為跨屏的策略,所以許多人也開始問「在提升使用者體驗時,該從App還是網站下手?」。

不過這些問題都是為了提升使用者體驗,應該以企業的策略來決定,目前跨屏設計方向可分為:Native App、Web App、Hybrid App,而企業可思考何者較適合自己。

App

圖2.這張圖會不會不小心讓大家想起來學交集、聯集時的痛苦回憶

  • ### Native App

Native App大家最為熟悉,例如App Store中的商業週刊、蘋果日報、CNN新聞…等等的應用程式,功能最強大,使用體驗、流暢度也最為良好,即使在待機中,Native App也可以推播最新消息到手機的主畫面中吸引用戶開啟使用,當然有需要的話也可以使用任何手機內建的功能,如手電筒、照相機、衛星定位之類的功能。

2013-11-25_14-13-11

圖3.Native App能夠提供最順暢的使用體驗

一個展現Native App優點的絕佳範例就是Facebook,使用App Store中下載的Facebook跟手機中用瀏覽器開啟的 Facebook,相信大家一定能夠感受到兩者之間的差異。

  • ### Web App

Web App其實一樣是個網站(Web),但因為加入Html5語法,提供近似Native App的流暢性故得其名。最大的好處是只要用瀏覽器就能開啟,所以不用抉擇要在iOS還是Android上開發。可惜像推播、照相之類的手機功能等等,本質為網站的Web App仍無法自由使用。

手機版的Gmail就是個Web App的好例子,在操作的流暢性上會讓人驚訝它竟然是一個網頁,如果你沒有Gmail帳號可以測試的話也別太難過,Google首頁也是,不過Google首頁較簡潔,給大家的體會也許就沒那麼深。

2013-11-25_14-14-19

圖4.由於Web App沒辦法推撥告知有新信,只好開啟網站來檢查

  • ### Hybrid App

最後是Hybrid App,這算是一種因Web App功能不夠成熟而出現的混合方法。

同樣要由App Store中下載,所以保留了Native App的特點,能夠流暢使用及喚醒手機的內建功能,但是內容其實只是將用Html5寫的網頁嵌入App,因此也像Web App般容易維護,又能降低開發Native App的成本,但整體來說流暢性與成本皆介於Native App、Web App之間。

如Walgreens這款網拍App,粉絲們可以發現其內容跟行動版網頁內容一模一樣,好處當然就是對於企業來說只需用Html5寫一個語法,就可同時維護網頁及App程式,壞處就是採用網頁嵌入的部分可能因此喪失了一些Native App可有的變化性。

WALGREEN

圖5.雖然是個App,但其實內容跟行動版網頁一模一樣

  • ### 哪個比較好呢?

如同前面所說的,應該要考慮的是哪個比較適合企業自身需求、網站類型,用戶背景。不過資深研究員Raluca Budiu為我們整理了幾個方向做比較,其中四點較特別的如下:

● 能見度

有兩個原因使Web App 絕對是讓傳遞的內容(Content)較能被看見的方法,第一,Native App大部份的安裝量都來自20%的App軟體,其它的甚至連在目錄中被看見的機會都沒有;第二,當人們有資訊需求時,他們會習慣去Google或Yahoo等搜尋引擎尋找網頁,而非到App Store中。

● 安裝

Web App不需安裝、不占空間,只需將連結加到桌面即可快速開啟,不過儘管如此,在目前,人們習慣的方式是到App Store中安裝App,將書籤連結到桌面的方式對人們來說仍然很陌生。

● 內容限制、核准與收費

App Store裡有許多的內容限制跟漫長審核,甚至會收取費用,相比之下,Web App完全不會有這些困擾。這對被削了一層皮的企業而言,絕對是個福音,Playboy雜誌也的確因此打造了一個自己的Web App。

● 開發成本

別懷疑,打造一個Web App或Hybrid App絕對會讓你的開發成本較低,除了本身Html5易學且能跨平台開發以外,日後的維護難度也較Native App低。

除此之外,再次提醒企業必須思考自身的類型,比方說若你是個律師仰賴與客戶間當面對談,那麼花大錢打造一個昂貴的Native App也許不該是你的第一考量。

WHICH1

圖6.究竟哪個方法比較好呀?

● 跨屏設計的未來趨勢

有些人認為Native App將在未來消失,Web App不需學習多種語法、不用下載、擁有較高的曝光度,絕對會在未來引起革新。

不過也有人認為比較兩者就像是電視跟報紙一樣,並不會互相取代。*
*

但其實這之間還有一個因素要考量,那就是Apple、Google的策略問題。

如果它們將Safari、Chrome等瀏覽器功能做改造,使Web App可以連結手機中推播、照相之類的功能,將會使Web App更為全能,但是相對而言會減損App Store的收益,而且,若任何網站都可以完全使用手機內建功能,也有可能會造成安全上的疑慮。

不過儘管如此,目前我們已經看到瀏覽器開發商們做出了讓步,使得我們能看到許多方便的Web App。

 

最後來分享兩個有趣的案例。

● Financial Times的Web App

提到Web App最歷久彌新的例子,是2011年Financial Times為了規避App Store的收費而推出的Web App,可惜目前行動裝置上似乎只有iOS的Safari瀏覽器能夠流暢操作,沒有iPad或iPhone可以用電腦版的Chrome開啟來過過乾癮,想像一下你的鼠標就等於你的手指,你絕對不會相信這是一個手機版網頁能做到的事。

● 百度將推出的Hybrid App

百度將在下個月全面開放「輕應用」服務,其實這是Hybrid App的一種新嘗試,在App Store中下載百度瀏覽器後,除了可以搜尋一般資訊外,也可蒐尋到與百度合作的輕應用,直接在百度瀏覽器中以不需下載的方式開啟。

輕應用圖

圖7.無須下載,搜尋到輕應用即可直接開啟,喜歡的話也可訂閱收集

跨屏設計的未來將怎麼走,有許多人都引頸期盼、或者發表評論預測未來,Todd Nienkerk用使用者的角度提供了很有趣的看法,用戶根本不在乎使用的是Web App還是 Native App,用戶只在乎能夠讓他們越方便越好。

apps-are-icons-header

圖8.只要你能夠方便開啟,用戶就買單

出自Phimedia通泰媒體