Pages

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. 區塊三、經過些技巧,讓文字在視覺上可以正常的出現在方塊裡面。
程式上只要照著原來寫法即可

這一個小小細節,卻是影響使用者操作上的觀感,為了達到視覺上平衡目的,修改程式或是圖檔過程很難調整出來,所以記得在過程適當的讓 background color 調整為白色,如此一來再調整就知道微調的下一步方向了。

* 更新 2012/05/11 追加不換圖情況下,用程式碼來讓標題往左邊移動方式。

2 comments:

  1. Hi, 你好~請問如果使用UIEdgeInsets
    會比較靈活嗎~你覺得呢?

    ReplyDelete
  2. 謝謝分享,剛剛測試用原來圖片,搭配這樣 Code

    UIEdgeInsets titleInsets = UIEdgeInsetsMake(0.0, -8.0, 0.0, 0.0);
    button.titleEdgeInsets = titleInsets;

    即可達到讓標題向左一點效果!

    ReplyDelete