Pages

Wednesday, March 28, 2012

Facebook Mobile App 整合上的 5 個 Pro Tips

App Discovery 的範例
不論是您正在設計新的串接 Facebook 平台 Mobile App 或者您正在享用手頭上一款整合 Facebook 平台的 App,是否可以找到這些整合的設計面向呢?當我們在 Facebook 平台上開發我們的 Mobile App,有幾個要點可以來讓我們更加專業。


Pro Tip #1 Add your mobile app to timeline

讓 App 為使用者完成事情,規劃將它可以發佈到該使用者的 Timeline 上,除了可以做為個人的重要記錄之外,朋友們看到這樣的故事分享,也會好奇想要使用該 App。這篇文章有個影片做更完整的說明。 https://www.facebook.com/help?faq=105925952849619


Pro Tip #2 Be cross platform

讓 App 可以跨平台無疑是希望可以讓使用者不會因為擁有某種平台的智慧型手機而受限不能使用,因此在開發上儘量考量到所有的 Mobile 的使用者,所以除了在 Native App 的開發之外,Facebook 也很鼓勵大家開發 Mobile Web 等形式來擴大使用者族群。


Pro Tip #3 Implement single-sign-on in iOS and Android Apps

為了讓使用者能方便使用 Mobile App,目前在 iOS App 和 Android App 都有 single-sign-on 的方案了,而我們在設計我們 Mobile App 時候,考量到如何讓使用者可以在初次使用認證過程可以非常的順暢與熟悉。


Pro Tip #4 Implement request for app discovery

當使用者開始使用了跟 Facebook 整合的 App,有幾種方式可以讓它更容易被使用與發覺。
  • Bookmarks - 當使用者在自己的 iPhone 上透過 Facebook app 認證使用後,之後在 Facebook App 的左手邊 Navigation 區塊的 Apps 區,就可以看到連出去到該 Mobile App,這功能好把為該 Mobile App 加上了書籤捷徑。
  • Requests - 使用者可以透過邀請功能邀請朋友來使用 App。
  • News Feed - 設計好分享的內容,讓使用者可以在分享他們自己的自己的 Wall 上之後,朋友們也可以看到這樣有趣吸引人的事件。
  • Authenticated Referrals - 讓使用者可以透過 Facebook 搜尋找到 App,而且訪客在開始使用這個 App 可以適當顯示需要的權限與說明。而這樣的功能讓使用者同意授權後,讓 App 可以設計出更好更個人化的體驗。
News Feed
這篇有詳細的額外說明。 https://developers.facebook.com/blog/post/575/


Pro Tip #5 Leverage existing friend graph

Facebook 有很多的方式可以來擴散讓朋友們一同來使用,可以從朋友清單之外,如何利用適當的 Send request 或者像是 Tag 讓朋友們可以透過這樣擴散的影響力,讓朋友們知道有這樣的 Mobile App 可以使用。

這些專業的方法,可以讓我們在設計整合 Facebook Mobile App 時候除了更加貼近好用之於,也可以讓使用者方便和簡易的邀請朋友們一起來使用。以上是我在 March 22, 2012 前往香港參加 Facebook Mobile Hack Event 的部分心得筆記,詳情當天活動資訊可參考 http://fbmobilehackhongkong.eventbrite.com/

Tuesday, March 27, 2012

Kensignton PowerLift, Back-up Battery & Dock

PowerLift
如果說一位 iOS App Developer 該有的隨身攜帶幫手,PowerLift 就是一個必須擁有的好幫手。從設計角度來看,它很方便、很容易使用、美觀、且實用,它擁有了以下三大功能特色:

Kickstand
如果說 iOS App Developer 每天都需要開啟 Xcode 將 App 建置到手機上,是否有想過過程是什麼?將 iPhone 插上 USB 線,讓它躺在桌子上,當建置好了開始在跑,再用手把它拿起來開始操作測試。這樣的取的動作可能不是那麼的方便。這個 Kickstand 能將 iPhone 站立起來,就好比我們平日時常看到的手機座。但是它跟手機座又有什麼不同呢?手機座沒有下方可插槽,所以用一般的手機座就只能站立而已。

Dock connector for iPhone
在這台上面裝置了 USB 線,它跟另外一頭跟 Mac 接上之外,這邊的這端就是 iPhone 下方的插槽,可以讓 iPhone 跟 Mac 串接起來,不論是 Build & Run 或者是要用 iTune 同步備份,或者只是要讓 iPhone 充電,這樣的設計完成了這些行為。

Power check button and 2-position charging
他除了是辦公室書桌上的之外,更是我們平日攜帶在旁的好工具。別把它丟置在家或者是辦公室,它是一個方便攜帶的充電電池呢!這顆擁有 1200 mAh 的電容量,對應 iPhone 4S 的電池 1420 mAh,可以將 iPhone 4S 完成充電約莫 85% 的電容量,這樣攜帶 iPhone 4S 在外一整天,都可以充分使用無太需要擔心 iPhone 沒電。

這樣的商品可以設計如此貼近我們的生活所需,方便又實用且美觀之餘,它可是得到 2011 Design & Engineering Showcase Honors 的殊榮。如果下次您在 Apple Store 逛的時候,不仿留意一下此商品吧!了解更多 Kensington - Smartphone - iPhone & iPod - Batteries - PowerLift™ Back-Up Battery, Dock and Stand http://bit.ly/H8JRl2

Monday, March 5, 2012

UIButton 的設計讓 Now Playing 文字與背景圖完美組合呈現

Playing Button
音樂類型的 App 功能上幾乎都可以聽歌曲或是電台,而有一種操作上體驗是當進入播放 Player 聽歌時候,可以讓使用者回上一頁,到 App 裡面任何操作同時,依然可以正常聽著音樂。但是在不同頁面操作時候,又需要可以回到剛剛 Player,那麼進入點就是那顆 Now Playing 正在播放的 UIButton。

Now Playing 的按鈕在設計上不一樣地方在於它的形狀會跟一般的按鈕不同,一般的按鈕是方形的,所以我們只要使用一般按鈕加上文字標題組合上去即可,但是講到 Now Playing 最大特色是它是右邊箭頭的按鈕,也就是明確跟使用者說按下去會往右邊進去進入 Player。

所以我們準備素材就變成需要,一個 Now Playing 的背景圖、UIButton 和 Text 來呈現。如果單純以這三個來組合會發現,圖片沒有錯,文字也是在整個 Button 的正中間,但是畫面看上去就會變成文字太靠近右邊問題了,該怎麼辦?

如何讓文字正常的呈現在左邊那塊黑色區塊正中間呢?有很多種方法,有一種最恰當做法是用一個留白的技巧,因為原先問題是文字太靠近右邊了,因此我們需要重新設計我們的背景圖,將圖片左邊再多一點寬度空間,最後組成一張讓文字置中,再加上後面背景圖置中,又可以讓使用者視覺看上去恰當的呈現在左邊的黑色區塊內了。

依照圖片三個區塊來說明即是:
  1. 區塊ㄧ、原來背景圖、加上 button text 來呈現,發現視覺上文字靠右問題。
  2. 區塊二、利用背景設定為白色,讓我們知道這張背景圖實際的長相。
  3. 區塊三、經過些技巧,讓文字在視覺上可以正常的出現在方塊裡面。

Thursday, March 1, 2012

Automatic Reference Counting in Objective-C and Xcode

Automatic Reference Counting
Automatic Reference Counting (ARC) 可以幫我們 Developer 程式開發上移除大量的記憶體管理,如此一來幫我們降低 Bugs,不論是 leaking 或是重複釋放物件 (objects)。雖然 ARC 擁有這樣棒的功能,我們還是有很多細節要處理。

在 Apple 的文件對於 ARC 解釋是:
Automatic Reference Counting (ARC) is a compiler-level feature that simplifies the process of managing object lifetimes (memory management) in Cocoa applications.

在還沒有 ARC 以前我們程式上要寫 retain, release 和 autorelease 來確保我們有適當的使用記憶體空間,當不使用了有正常的釋放。更不要說呼叫到一個需要 retain 的物件造成 App crash 或者重複忘記 release 造成 App 變成 memory leak。從 Xcode 4.2 開始,新的 Apple LLVM compiler 編譯器讓這些耗功的地方可以在編譯階段獲得處理,在編譯階段根據 Code 來處理 Release 物件。