CSC的程式設計相關研究紀錄、開發日誌

Design for Android - 給Designer的小小建議(一)

1 則留言

嗯呃...最近真的寫程式畫UI搞得我不爽到很想寫這個題目。當然啦,新手沒有錯,甚至有的人可能覺得我不是新手、我做網頁作很久了,所以問題其實是出在,為什麼沒Mobile經驗的設計師會被直接找來做Mobile UI Design............算了這不是重點啦

重點是,如果你做過網頁做過Flash甚至做過iOS UI Design,歡迎大家來跟Android app攻城屍合作,但是合作之前可能你會有幾點需要了解的:


1. 做Android UI跟Flash不一樣,完完全全不一樣


我知道台灣很多設計師之前都做網頁跟Flash的,或者有很多人設計Mobile UI是iOS先弄再來考慮Android,但是Flash跟iOS有個Android沒有的特色,就是"長寬大小可以固定"(iOS的iPhone 5有變長,但是還是比Android好解決),例如我寫一個Flash可以固定在1024x768,然後更大的螢幕我就讓它embed區域置中,而且也不太需要考慮DPI的問題(好啦,retina display出來之前是這樣XD),更不用考慮"長寬比"的問題。差別在哪裡呢?最大的差別就是,大小固定的狀態之下你可以把按鍵或者任何"可按範圍"的大小跟位置都寫死成px的單位,例如先貼一張背景大圖,左上角有一朵雲在50,50的位置、可按大小是100x60、然後右下角有一棟房子八啦八啦,我知道超多Flash的主選單設計成這樣的,但是能不能拜託你們不要把這東西帶到手機上啊

回到Android的世界,這樣的設計會有什麼問題呢?Android UI在Layout的時候是沒人在用px這種東西的,Android UI基本的長度單位是dp(詳細說明,不好意思,英文的),它的定義是無視螢幕密度的pixel,講白一點就是1dp在不同實體螢幕看到的"物理長度"應該要是大約一樣的(但是不會完全一樣),實際上160dp約是1英吋左右的長度。所以把px寫死的作法,換成把dp寫死的時候,遇到dpi跟解析度不同的螢幕時,可按的位置就可能會跑掉,也就是說在大圖上面蓋透明按鈕的作法,在Android上是行不通的,真的要做的話就請把能按的部份乖乖切出來,並且背景圖跟可按圖樣要能設計成適應不同解析度跟長寬比......很麻煩對不對,所以請不要在手機上做這種設計吧。

(好吧,我承認這個問題還是有解,因為我遇到了這種設計所以不得不做出來,目前的唯一解法應該是背景大圖用ImageView、scaleType設fitXY,前景的透明Button請放在LinearLayout裡,大小全部用layout_weight去調,不要管IDE給你的"nested wight"警告XD,這樣做唯一的缺點就是會跟著螢幕長寬被拉變形,反正變形跟留黑邊總是要挑一個,至少變形的比較好做(爆))

另外一個跟dp相關的問題就是,因為現在該死的超大螢幕Android手機非常多,所以設計上最好要考慮到各種螢幕大小的情形,不然就會變成一直被客戶或使用者抱怨,然後工程師只能慢慢調。基本上Android官方喜歡的設計是左右寬度拉到底(match_parent),然後上下可以按照大小調整高度,太高就要可以捲動(wrap_content or XXdp + ScrollView or ListView),但是因為設計師跟客戶的異想天開天馬行空設計,常常會把高度限制住,有時候甚至不給scroll,那就要考慮你的內容的dp長度是不是能在大小螢幕手機都塞得下,看是要乾脆都設成layout_margin(邊界寬度)以內的都是內容,或是寫死一個dp大小。不管是哪種情形的設計,其實工程師都很可能還是得做額外調整,請大家愛用value-swXXXdp/dimen.xml,雖然這東西API 11才有,不過反正大螢幕的手機都是新的XDrz。

2. 提供檔案時請注意下列事項:

  • Android要放在res目錄包進apk的圖檔命名,檔名只能有小寫字母+數字+底線"_",所以請不要有"大寫字母"跟"-",我知道用Windows的人很多,但是請替mac和linux user著想,而且Android本來就是linux kernel,大小寫是分開的。
  • 單色背景、文字顏色跟文字陰影顏色,可以直接給ARGB色碼,讓工程師自己寫xml就好。
  • 比較簡單的按鈕背景或者單純的區塊背景,請盡量作成可以nine-patch化的樣子,當然可以作成Android吃的.9.png最好,但是沒有的話至少讓工程師可以自己做,如果堅持要用陰影比較複雜的圖檔,那就要有pixel被scale之後糊掉的心理準備XDrz
  • 可以按的區域請至少提供按下去(pressed)之後的效果,事實上Google官方會希望你連被聚焦都做(focused,就是被"選擇"但是還沒點下去,找個網頁按tab你就知道了XD)。
  • 圖檔會需要不同dpi的版本,如果想要支援比較舊的手機(或者平板XDrz),那從ldpi(0.75X),mdpi(1X),hdpi(1.5X),xhdpi(2X)(例如S3跟note),xxhdpi(3X)(S4跟butterfly)都會需要支援,如果不想管太舊的(還有平板XDDrz),那就把ldpi忘了吧(?),如果圖檔很多又很大,那還是把xxhdpi忘了吧(不然apk size真的會爆,尤其png的bit數還設很高的,破百沒問題),被忽略的手機上的圖就可能會有點糊(小變大)或者跑不動(大變小),其實小圖拉大我個人看起來是沒差很多啦(裝死)。然後如果覺得準備那麼多解析度很煩,那就做個最大的叫工程師自己用xnview或automator自己resize吧(爆),反正這樣也省得一直傳檔案。
3. 做Android UI跟iOS也不一樣,真的不一樣

這個多到應該另外開一篇文章來講,總之雖然很多東西跟元件要作成iOS style也不是辦不到,但是不建議,真的不建議,因為使用者習慣和平台UX設計就完全不同了,混在一起會讓工程師困擾,使用者困擾,最後只有少做一套的設計師跟自以為很統一的客戶笑得出來...
而且Google官方很強調這點,某次GTUG的時候Google advocator就講過,剛好這幾天Android Developer官方影片也有提到:影片連結

這個影片的東西值得翻譯成中文再寫一篇了XD,我們下次再見

Main Ref: http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/







1 則留言 :

  1. 四年前從Android跳到iOS就覺的UI設計真的比較輕鬆一點

    回覆刪除