APP Inventor音樂播放器:響應式手機App操作介面設計

APP Inventor必須考慮不同手機尺寸的可能狀況。本文以音樂播放器為例,介紹如何技巧性的定義水平及垂直配置,建立螢幕初始化事件,設計響應式手機App介面。

前兩章都有成功設計好具備特定功能的App,雖然可以用,但可能對於外人操作來說不易理解。如同上一章第四節所述,App Inventor除了自己學習開發使用之外,在本質上是分享給所有手機裝置持有者使用,因此有必要設計一套親切舒服、容易上手的使用者介面。本章即以手機基本功能之一:音樂播放為例,介紹App Inventor如何設計使用者界面。

一、音樂播放介面

萬事起頭難,可以先參考一下目前流行的範例,不但是站在巨人的肩膀上,也是對於自己程式設計功力的肯定。如圖所示,左邊蘋果為iPhone Xs Max OS 12.4音樂播放應用程式,右邊為小米MI9 MIUI 10.2.31的音樂App,兩者共通點是一張專輯圖片和幾個基本的按紐圖標。

APP Inventor音樂播放器:響應式手機App操作介面設計 1

二、Excel繪製圖標

在按紐圖標部份,有很多種取得方法,其中之一為辦公室最普遍常用的Excel編圖工具,這本書並非專門介紹Excel,在此僅順帶一提。

APP Inventor音樂播放器:響應式手機App操作介面設計 3

三、水平佈局元件

前往App Inventor網站,新建一個名為「ZanzanMusic」的專案,於「元件面板」中,「介面配置」便是關於設計使用者界面的元件集成。在這裡將「水平配置」加入到「工作面板」中:「水平佈局元件可以放置於其中的元件自左向右水平排列。」在此打算像第一步驟所看到的一樣,將播放按紐都放在同一個水平框框裡。

APP Inventor音樂播放器:響應式手機App操作介面設計 5

四、嵌套框架設計

除了播放按紐,還希望專輯圖片置於正中央,如此可以想像,需要一個和螢幕一樣大的框架,在此框架內,有一個置中的相片框,在相片框下是一列水平排列的圖標,所以總共三個框架,後面兩個小框架是放在前面大框架的上面。

像這樣框架、層次、父子的概念,是在設計程式界面時主要思考的點,其實如果有過網頁排版設計的經驗,會發現兩者在本質上是相同的,只不過操作實現的方法不同。App Inventor本來就注重簡便性,所以排版方式很直覺,拖曳一個「水平配置」、再拖曳一個「垂直配置」,然後在「工作面板」中,將「水平配置」拉到「垂直配罝」裡面,如此即實現了兩層框架,仔細看「元件清單」的樹狀結構,其實不難理解是三層框架,尚有最底層的「Screen1」。

除了框架之間層次關係,另外一個是元件本身的位置大小,此為透過屬性來作設定。如圖所示,將「元件屬性」的「水平對齊」設定為「置中:3」、「垂直對齊」設定為「置中:2」,這是該元件(「水平配置1」)相對於其上層框架(「垂直配置1」)的位置,在「高度」和「寛度」有「自動」、「填滿」、「像素」、「比例」,這是該元件(「水平配置1」)本身的大小設定。

APP Inventor音樂播放器:響應式手機App操作介面設計 7

五、初始化螢幕寛度

第一步驟的iPhone Xs Max OS 12.4音樂播放應用程式,專輯圖片顯然為正方形,看起來似乎簡單,但當我們也想將Andriod的「ZanzanMusic」專輯圖片(「水平配置1」)也設定為正方形,很快會發現「自動」、「填滿」、「像素」、「比例」四個選項都不太適合,似乎只要把高度寛度的「像素」設定為相同即可,但我們都知道安卓手機的尺寸差異相當大(現在連蘋果iPhone手機尺寸同樣如此),當程計設定固定等高等寛像素,如此會造成不同安卓手機的使用體驗有異,更麻煩的是,可能大手機看起來圖片小、小手機看起來圖片被切割,從這裡程式設計之不易,可見一斑。

縱然目前手機尺寸不一,但大多是高寛比接近於2:1,利用此特性,可以先得到螢幕的寛度,然後將專輯圖片(「水平配置1」)的高寛都設定等同於螢幕寛度,如此即適當地解決問題。

有此思惟後,接下來是如何在App Inventor的程式語言實現,如下「工作面板」截圖因應而生,相信在前兩章的基礎上,讀者不難理解此程式計之用意。

APP Inventor音樂播放器:響應式手機App操作介面設計 9

六、元件屬性規劃

在前兩章和本節到上一步驟為止,皆是以截圖說明元件屬性的設定,但隨著程式範例益加複雜,顯然已不再可行。在此開始以文字表列的方式陳述,讀者如有興趣練習,也請按照下表分別為每項元件進行屬性設定。

APP Inventor音樂播放器:響應式手機App操作介面設計 11

七、手機App測試

手機模擬測試,一如預期!

APP Inventor音樂播放器:響應式手機App操作介面設計 13

APP Inventor設計操作介面

這一節花了些篇幅介紹在APP Inventor如何設計介面,用到了諸如水平配置、垂直配置、層次框架、螢幕寬度等技巧,最終只得到一個相對置中對齊的圖片,距離一開始想設計的音樂播放介面,似乎仍有一大段距離。

從這裡可以瞭解到程式設計不是那麼容易,然而,同樣回到本節第一步驟所謂的「萬事起頭難」,一旦打下了基礎、跨出了第一步,接下來要再繼續延伸發展,困難度就會降低,下一節開始讀者應該就能有此體會。

APP Inventor音樂播放器:響應式手機App操作介面設計 17
歡迎加入贊贊小屋電腦程式臉書社團!