[APP] 從iPad APP: "bella儂儂"來談談讀者與數位雜誌之間的互動性

bella 儂儂

US$2.99
Category: Lifestyle
Size: 301 MB
Developer: Far Eastone

前言

這一兩年陸續的都在比較早的時間把玩iPad1與2，也一直在摸索到底我要拿iPad作什麼呢？而也在這樣的不確定性使用下，發覺躺在床上的使用習慣才是最適合我的使用時機。

在床上較常使用的方式就是拿來上網、看漫畫及閱讀雜誌；閱讀性來說，相較於兩代之間的手持舒適性，姑且不論兩代之間的重量差別，我個人認為重點是在”薄度”！薄度的不同，讓手持性一整個有了不同的體驗，所以iPad2讓我更加的喜歡拿來作閱讀。所以在入手iPad2後，也嘗試閱讀了較多類型的數位閱讀，當然從經典的 雜誌”Wired Magazine”、閱讀器”Flipboard”、RSS”MobileRSS”、影片式”TED”等，到國內的數位雜誌如”Vogue國際中文版”、”天下雜誌”、”FHM男人幫”、”GQ”、”一手車訊”等等，後面有時間的話再概略的比較各自的操作邏輯。



而當然的，今天為什麼要特別來介紹數位雜誌”bella儂儂”？

因為這個雜誌的閱讀性打破了一般雜誌商對雜誌該給讀者的觀念，並非只是一昧的將平面內容直接轉成一張張圖檔供讀者閱讀，而是整個對iPad的思考，感受到開發者是對閱讀者與內容供應者的關係重新的檢視，並把互動性作一個結合。（這裡的互動性並非單指只是多了個數位媒體影片等資源）再再的可以感受到開發者似乎想要傳達以及試著許多方式讓數位閱讀這個行為能重新定位。

而難能可貴的是，這是國內的APP。所以這就是為什麼我想要特地挑這個APP來分享主要原因。接下來我們就來看看”bella儂儂”雜誌有什麼不一樣的操作體驗。

介紹影片

看不到的話請摸摸我

操作概略

首先先來概略的說明操作邏輯，整個雜誌最不同的地方是把各個單元順序都打破了！由讀者來決定自己想要閱讀的順序，依照自己喜好來自訂。

（共有17個單元，供點選喜好的單元加入）

閱讀方式也顛覆了一般像是T字型閱讀方式（左右及往下閱讀的方式），或是PDF檔案類似方式，而是依據單元特性，訂立了各自單元的閱讀方式，輔以提示的小圖示讓讀者似乎有種在”玩”雜誌，而變得不只是”看”雜誌。


（加入了九宮格方塊遊戲概念）

以下就拿bella儂儂一些個人比較有興趣的操作方式來介紹：

操作範例1.
這個操作概念是由一個包包裡面取出照片來，一張一張的用手勢模擬抽取照片的slide show。直接點選可以放大照片，並秀出該物件的詳細資料。


（把iPad稍往前傾放，桌面就會重新配置）


（利用由下而上的手勢來抽取出一張張的照片集）


（點選照片可以近一步讀取該相片物件的詳細資料，包含價錢等）

操作範例2
接下來這個單元，是我覺得最有趣的閱讀模式。首先一進入到單元畫面，可以看到一些小細節有趣的地方---標籤會隨著iPad傾斜而跟著擺動。

點選進入後除了可以看到編輯為我們搭配好的幾款服飾外，還可以讓一件件單品讓我們來自己自由搭配！

選好上衣、褲（裙）子及想搭配的鞋子後，就可以看到Model穿好的樣子。


（單元主畫面，標籤隨著iPad擺動）


（自由搭配物件，這邊總共有上衣＊5、褲（裙）子＊4、鞋子＊5的單品）


（經過這樣的單品搭配，意味著該雜誌編輯得讓Model穿上100種搭配才能有這樣的呈現效果！這邊可以看出製作該產品的用心）

操作範例3
這個也是讓讀者來搭配喜歡的配件，進而讓系統對讀者的搭配選擇進行評分，來看看自己的品味如何！也是一種互動相當有趣的操作方式。


（把上方的物件拖曳到方格內）


（上方分數以及簡單的評語）

操作範例4
這個單原則是彩妝方面的互動方式，首先先選定讀者要的色系，接著進入到step by step的方式說明整個彩妝的化妝過程，而讀者只要把工具拖曳到畫面中，就可以一步一步的了解整個過程。整個閱讀體驗真是與紙本不同。


（先選定你要的色系款式）


（左上角的工具拖曳到畫面中的model，右上角畫面可以看到細部）


（到這個步驟來可以比對已經與上一張不同的樣貌）（謎之音：女人的化術真不是蓋的）

其他操作範例：


（雜誌中許多的小圖，點按了之後會出現解析度更高的照片以及廠牌價錢等資訊）


（時間軸的快慢暗示著保養品留住歲月的快慢）


（還有一些問答的小遊戲）


（利用影片影格方式介紹該單元物件）


（電影單元搭配著應景的爆米花，左右傾斜iPad，爆米花也會跟著掉落）

還有其他小細節的部分也留待大家慢慢去發掘！


其他APP特色比較：
1.Wired Magazine

這款APP是很經典的軟體，應該算是第一個把iPad與雜誌的互動模式作的較為完整的APP，整個架構很完整，整個閱讀方式也是T字型的方式，但在各個細節處加上了許多有趣的操作，大家就看以下照片可以了解大概。


（封面）


（透過放大鏡尋找地點，即便是廣告也是有著互動性）


（從商品資訊中可以直接點選到網路商店01）


（ 從商品資訊中可以直接點選到網路商店02）


（音波的圖案就是聲音的開關）


（穿插著詼諧的效果）（前一頁的影片）


（穿插著詼諧的效果）（後一頁的影片）


2.FHM Taiwan 2011 Jan.

來看看國內的男人幫(FHM)，這個軟體我覺得寫的很棒，也是一個針對iPad特性而製作的軟體，可以想見開發者應該也是花了許多心思在這一期雜誌。閱讀邏輯還是一樣照著T字型方式，但是這個軟體卻存在著一個缺點（個人認為是缺點），即是當我閱讀完該單元，處在下方的頁面時，並不能直接往右頁直接到下一單元，必須得回到最上頁。不曉得後面的幾期有沒有改進這缺點，還請指點。不過整體上是很不錯的雜誌軟體。


（FHM封面，一開啟就會有動畫增加生動性）


（點選頁面即可顯示商品資訊）


（點選左邊的小圖即可切換大圖的照片）


（點選頁面的地址可以直接讀取網路地圖功能）


3.GQ國際中文版

GQ相對於上述幾個軟體來說，個人覺得就比較像是傳統的雜誌出版社的觀念，書本既定的閱讀習慣複製到iPad上，應該是類似PDF檔的方式，只是再稍微加點工作了一點點變化。或許對於傳統閱讀讀者來說，比較容易上手，但是相對於上述的軟體開發就少那麼一點用心。GQ閱讀邏輯即是一線形的方式左右翻頁，個人以為適合年紀稍大的長輩來做閱讀。


（GQ國際中文版封面）


（文章的捲軸效果）


（右下角的圖面可以用手勢更換圖片）


（上圖經過雙指放大功能後，切換照片的功能就不能使用了）


總結：

經過了一些比較後，bella儂儂雜誌閱讀性上除了採用T字型閱讀方式外，再加入了主題式方式讓讀者來自己決定自己想要的單元順序，孰以為是一個不錯的概念，打破傳統書本的方式。但當然的閱讀性對於每個人來說，都會有不同見解，這邊就不作進一步評斷，留待大家去體驗感受。

而在互動性上，bella儂儂確實作了一個示範，可以供國內其他雜誌業者學習的對象。而當然的bella儂儂雜誌有一些地方也需要改進，例如：
1.影片播放沒辦法支援橫式全螢幕播放。
2.互動方式很多，但有時候太多對讀者來說是一種必須學習的煩惱，希望以後bella儂儂可以精簡一些。
3.再切換單元與單元間，必須一次一次的讀取，對於閱讀順暢性來說有一點點中斷。


===============================5/23新增===========================

新增一個相當棒的互動式電子書的案例：
Mike Matas: A next-generation digital book | Video on TED.com (麥克馬塔斯: 次世代的電子書)


由高爾以及前任Apple軟體工程師Mike Matas(當時參與協助iOS系統的使用者介面開發)一起開發，製作了一個多媒體套件。未來可以讓出版商或甚至是個人，在不是專門寫程式的背景下，也可以製作屬於自己的APP。

有興趣的朋友可以點選以下連結觀看：


看不到的請點選這邊(有中文字幕)


影片中可以看到，許多的資訊都可以透過互動方式簡單明瞭的呈現，是一個相當有趣的互動。


以上是自己對於這本雜誌的看法，有什麼不足或缺漏的地方還請多指教指教小弟。


法蘭克




本篇之文章所載之照片，版權歸原作者所有，如原作者認為有不妥之處請通知本人，將儘速處理。