CSC的程設紀錄

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

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


嗯呃...最近真的寫程式畫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 則留言 :

張貼留言

四天寫了一個新app



先講一下之前的app的情形,簡單來說就是,我真的把舊app都下架了,因為就算有時間也不是很想更新資料,而且非官方的Costco論壇有做Mobile介面,應該還夠大家用吧?(話說我自己也很久沒買Costco的東西了,反正附卡家人有在用。)

另外就是這個新的app了,新的app是一個LBS的app,正確來說它是一個LBBBS(Location-based bulletin board system),基於地點的留言板。概念的來源很簡單,PTT不是都有地方板嗎?為什麼不開一個手機用的,還可以自動偵測地點耶。就這樣。

當初想到這個東西之後,網路上真的隨便查都有類似的,例如這個YC出身的MessageParty (已經關了),還有一些我已經忘記名字的,最近隨便查也有一些新的像是Mixer之類的。但是好像都沒有一個做起來的喔?XD

無論如何,人家做不起來沒關係,我也做不起來也很正常,但是可以做為什麼不做出來玩玩看?順便練習一下一些不熟的工具也不錯。

所以這個app就上架了,兩天寫後端兩天寫app,上架,就這麼簡單。
Play連結: 點這裡

為什麼可以那麼快上架呢,當然是因為我把功能砍到最低底限了XD
這個app的功能就只有找附近留言板,建立現在地點的留言板,看留言,寫留言,這樣而已。
而且完全沒做登入功能,也完全沒有安全性跟隱私可言,如果稍微有點技術底的人也可以輕鬆做出幾千公里外的留言板,或者直接寫程式把資料庫塞爆。

不過沒差啦,因為這次用的是heroku+MongoLab,爆了也不會跟我要錢啊XD

來數一下技術的東西吧,後端是用Play Framework寫的,只有要寫簡單的API所以很快,然後丟上heroku讓它跑,稍微麻煩的只有跟MongoLab接起來的地方,照慣例是用gson做ORM直接塞MongoDB,因為我討厭SQL,速度應該是一點都不快啦,不過能用就好。有趣的地方是在於MongoDB有個2d Index的功能,可以直接照經緯度資料去搜地點接近的資訊,不用自己寫程式處理這段。app的部份也是超級簡單,icon直接用SDK做,內容就兩個Activity解決,一個列留言板一個列留言,打完收工。

小Bug還很多啦,像是我要了fine location的權限,但是完全忘記寫程式去要GPS定位資料,所以現在用的應該都只有AGPS。不過會不會改就看有沒有人要用啦,我是覺得應該沒有啦XD。我自己倒是覺得可以拿來留一些廢話,像是去到辦公室就留言當打卡,去到哪邊吃飯就開個留言板評論一下,也不錯啦。

下次想做的東西是遺失物公告整合查詢資料庫,因為最近掉了東西滿難過的,打算拿這個去g0v玩玩......






沒有留言 :

張貼留言

app嘛,Startup嘛,你知道的...


這個blog好久沒文章,想說整理一下,講一下工作跟app的近況...

(謎之聲:你寫的app怎麼都沒更新,有一個還下架了?)

嗯...正確來說我本來兩個都想下架的(爆)

要一直持續手動更新資料其實比大家想像中的還煩人很多,
就算可以自動爬資料的樂透程式,也要有時間去寫自動更新吧...

其實內心有個聲音是很想把程式UI大幅更新的,
至少改成Holo theme、側滑選單、ActionBar吧!
這年頭誰還在用主選單跟Menu鍵啊!
(好吧,其實接案的時候案主還是可能會要求用主選單喔啾咪^_<) 

但是我還是沒動工,因為我懶因為我有更多事情要煩惱...

=========

總之,簡潔扼要來說,這幾個月我到了一家Startup(新創公司),
其實這裡一開始看起來一切都很好,但是最近搞到差點想要走人了。

(有沒有接下來會變成婊人大會的感覺...)

讓我先來數數看,一個好的Startup的Founder有幾個必備條件:
  1. 具有豐富業界相關經驗
  2. 對於產品有自己的想法與堅持,並且能說服他人
  3. 能跟眾人討論出最適合前進的方向、並且堅持下去 
  4. 溝通能力良好,能作為團隊溝通的橋樑
  5. 管理能力良好,能讓團隊每個人的能力都好好發揮
是的,經過幾個月,我發現我們家的Founder 全 部 不 符 合  XD
  1. 他跟我是差不多Level的菜鳥,工作經驗沒差多少XD
  2. 他永遠有自己的想法而且超堅持,但是常常說不出能說服人的理由(因為都靠直覺啊)
  3. 他常常想做不一樣的東西,在外面談業務發現有人對某功能有興趣,就會開始想做。
  4. 他老是講話不經大腦得罪人,常常讓人覺得被當白痴 XD
  5. 他什麼事都想攬在自己身上做,沒自己做的也會跑過來給很多意見
簡單來說就是沒經驗、不夠Focus、不夠成熟、不夠深思熟慮、又不敢信任別人 XD
通常遇到這種情形,正常人會被嚇跑或者被氣走,就跟我兩個前同事一樣,
但是我現在還在這裡,有幾個原因:
  1. 這間公司在Founder之上還有個很好的老闆,基本上上面說的好領導者的要件我們老闆都有,只是老闆年紀比較大,比較不熟悉我們年輕人玩的"app",但是他也很努力在了解。
  2. 我們家的Founder雖然有很多缺點(誰沒有缺點),但是絕對不是壞人,你看我要打這篇文章還有先通知他喔XD。這篇文章會不會讓他很難做人?其實我也很擔心XD,但是人都是有優缺點的,他的優點就是敢衝敢試敢到處拿著自己的東西推銷,這個我就完全不行,所以希望各位大德遇到他出門談生意的時候請對他好一點。
  3. 來到這裡,權限也不算小,沒真的做出什麼東西就走人真的很空虛。
  4. 這間公司的前景其實還是很好,Founder跟強者Co-Founder一起弄的技術有很多可能的應用可以玩。 (多到會讓你很難Focus一個產品XD)
  5. 其實我也不知道走了能去哪裡(爆)

好吧,講到這裡,我真正要說的其實是這間公司正在徵人,
會講那麼多,也是希望到時候有人來應徵可以少講一些,
然後進來的人有個心理準備,比較不會被嚇跑XD

我們是默科資訊(Mercue Inc.),看網站可能會完全搞不懂這邊在幹嘛,
沒關係,我們上過數位時代的創業之星還有月初的NTU Startup Day也弄了個很陽春的demo影片...

看完了嗎?我知道大家還是搞不懂我們要幹嘛...

當然的啊,我們有個很難理解的技術,但是我們自己都還沒確定要拿來幹嘛

不過其實大致上有一些方向,所以歡迎大家一起來討論要拿這個技術做什麼產品

最主要要徵的人有幾種人,但是其實總Head Count有幾個我也不知道(爆):

  1. Server-side developer:徵才內容寫了那麼多,但是其實我也不知道要用哪種技術比較好,我是很想試試看RoR,因為我不會。總之會架站的就來吧,但是要做得出能給app用的API喔。
  2. iOS developer:這個比較單純啦,會寫iOS app的都可以喔,因為我也不會
  3. 通訊技術工程師:這個就麻煩啦,因為你要跟我們Founder溝通,所以你進來的話必須先取得他的信任,而且還要會訊號與系統、數位訊號處理、通訊原理這些我在誤入歧途念電機系的時候被當了一門還退選兩門的課。基本上我們不太期望有人能精通這部份,但是我們非常需要有人幫忙......
然後不管是寫什麼程式的,我們希望進來的人熟悉git怎麼用,不是因為我們都用git做版本控制,而是因為我們都還不太熟git但是想用

(謎之聲:那你到底會什麼?) 你沒看到Blog標題嗎?Android啊、Java啊!XD


我知道大家都想跟隨強者的腳步,但是我們這裡沒有強者,只有我這個小咖,所以歡迎大家進來陪我一起討論怎麼變成強者。拜託你們快來,沒人來的話我就要走了,就跟玩線上遊戲組隊一樣你知道的,沒人加入隊伍當然只能下線睡覺

我相信全台灣沒有公司徵才那麼老實的,反正如果我不老實,人進來了也會轉頭就走,如果看到這邊還沒被嚇跑,那請您寄信到:contact@mercue.biz 或者 jacob@mercue.biz直接找我也可以,再要不然可以加我Google+或者Facebook慢慢聊,謝謝大家。



3 則留言 :

張貼留言