關於手機網頁APP UI設計的兩三事

做網頁APP因為不用為不同系統個別寫一套原生程式,我原本認為會比較輕鬆,因此公司開發新APP時就決定用網頁來開發,沒想到就此開啟了一段自虐的旅程,開發了一段時間後就決定打掉重練,重新用原生程式寫。以下是我們遇到的一些UI問題,也跪求各位先進的意見~

DPI(Dots per Inch)

遇到的問題大致上都跟不同手機的解析度和dpi有關。解析度大家都時常接觸,但什麼是dpi呢?

Dpi是手機上主要的畫面測量單位,也就是一英寸的範圍能夠塞進多少個點(像素)。以mdpi來說,大約可在一英寸內塞進160個像素,hdpi則可塞進240個像素。

如果同樣在mdpi和hdpi中塞入一個80x80像素的圖,則可看到圖在hdpi中會比較小。

所以通常設計手機UI時會為個別dpi設計不同大小的圖,就像如果讓hdpi的裝置讀取120x120像素的圖,大小就跟mdpi看起來差不多了~

目前Android手機上把不同dpi大致歸類為五類: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。ldpi Android系統會用hdpi去縮,所以基本上同樣一個圖檔會要製作五種不同的大小,用mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi = 1:1.5:2:3:4比例去作圖,顯示才會差不多一樣。

出包的手機網頁APP

寫網頁大致上會用百分比(%)而不是dpi為單位來定義版面位置,然後規劃在不同的螢幕大小時讀取不同的css做版面配置。但在手機上不用dpi則會容易造成版面跑版,網頁也沒又支援dpi的寫法。

  1. 解析度不同dpi一致

跑版的第一種情況是解析度不同dpi一致的情形。例如Google Nexus 4約hdpi(318dpi),解析度為1280 x 768px。Google Nexus也約為hdpi(316dpi),解析度卻為1280 x 720px。

以一個橫向登入頁面來看,網頁在Google Nexus 4時剛好塞的下,在Google Nexus時下方的區域就會被截掉。

當然這種情形以dpi為單位去做也還是會發生,不過手機網頁APP除了要對付這種情形之外,還需要解決解析度相同dpi不一致的狀況。

2. 解析度相同dpi不一致

舉個例子來說,HTC One Mini的解析度為1280 x 720px,並約為xhdpi (342dpi),而Samsung Galaxy S III的解析度同樣為1280 x 720px,卻是約為hdpi(306dpi)。

這時如果設定網頁裡面的元件寬度為畫面的25%,高度同比例增長,元件在Samsung Galaxy S III和HTC One Mini的寬度會同樣會是1280x 25% = 320px,但320px 在HTC One Mini卻看起來小小的(以下為示意圖)。

如果此時用原生程式寫,就會以dpi為單位去定義寬度,而hdpi的320px約為213dpi, 在xhdpi時213dpi就會調整成約426px,看起來大小就差不多了。

很可惜,網頁上並沒有支援dpi的這種寫法 ,因此如果用寬的百分比去定義大小,在任何dpi中只要螢幕寬度相同都會顯示同樣的像素,造成有一些裝置畫面排版會過大或過小。

怎麼修正呢?

解析度不同dpi一致

這種情形大概就會調整排版為主,用以上的例子來看,就例如讓兩個按鈕併排、讓logo縮小、或將上下的邊距調小,就可以讓高度縮減。但在怎麼調還是有可能出現例外的情形,所以另一種方式就是除了用寬度去判別該讀取哪一組css之外,還可以再加一個高度的條件去設,另外保險起見,還要再加上橫幅和直幅兩種版面再去設。

所以在做css規劃時(media query planning),手機網頁app必須要設置寬度、高度、橫幅、直幅四種不同要素來做,是一件非常麻煩的事情。

解析度相同dpi不一致

這種情形除了去偵測手機是哪一隻,再讀取特別為那隻手機設計的css之外,我們就想不出有其他的解法了。但世界上手機大小何其多,要做一隻都通用的app是非常困難的。

心得

在這一連串的過程之中,其實有感覺得出來手機網頁app開發雖然只須寫一套程式,但如果考量css規劃和debug的過程,卻是非常麻煩的。當然手機網頁app也有適用的情形,例如app中沒有太多複雜的版面配置,單純都是列表之類的,功能單純以後也不會要擴充,那就應該也可以用網頁去開發。不過如果app必須支援到每隻手機,功能也比較複雜,那其實還是用原生程式寫會比較輕鬆。

其他文章:

原來104徵才系統是這樣找人的

Scrutinizing Video Footage — Surveillance AB Repeat

Surveillance Playback — The evolution of timeline

Show your support

Clapping shows how much you appreciated Hank Liu’s story.