Posts Tagged ‘iPhone Develop’

一些設計App的UI時要注意的地方

Friday, January 3rd, 2014


以下講的是基本原則,不是說完全不可以,但最好盡量避免。請記得一件事,你每設計一個讓使用者覺得不好用、不方便、不直覺的東西,就是加速他離開你的App不用。

1. 不要在一個頁面同時有垂直滑動(Vertical Scroll)及水平滑動(Horizontal Scroll)的UI設計。因為這會造成使用者操作非常不便,會常常誤判。不用說某某知名的App有這樣做,我們就一定要學著他做。因為搞不好它的使用者也是在抱怨它這設計很難用,只是他們不得不用它。

2. 不要將網頁的操作動作搬到App來。也就是Double-Click及鼠標滑過(Hover)的提醒都不要有。另外長壓(Long-Touch)的動作也最好不要有,因為這些動作對Touch Screen的使用者說來是一種很不直覺的動作。以工具類型的App來說,比較好的UI設計最好就只有點擊(Single-Click)與滑動(Scroll)兩種動作就好。多指觸碰(Multi-Touch)和Shake的動作必要時再加入。拖曳(drag & drop)的動作,要視狀況而定,如果可以幫使用者省下很多操作&設定的動作,那就做吧!

3. 功能button的擺放位置要與Device本身的設計一致。例如,Apple的確認視窗cancel button都是擺左邊,submit button都是擺右邊。那我們設計的App中有出現cancel / submit button的位置也要一致比較好。

4. 每一個頁面若有功能類似的UI元件(例如toolbar),最好都擺在固定的位置,不要跳來跳去。讓使用者知道,當他要用到這個功能時,就是要到那位置去找。

5. 每個button或可點擊區域的最小尺寸不宜小於 32 x 32。再小就會讓使用者覺得很難按。可以是圖片呈現的大小比較小一點,但是trigger touch event的區域大於呈現的區域。

6. 該換頁的地方就要換頁,該有back按鈕的地方就要擺。不要想說為了畫面的美觀而犧牲了操作的便利性。操作流暢度的重要性並不會比畫面美觀低。

7. 不要只從開發者、測試者的角度去想UI要怎麼做。如果有個地方對常常需要做測試的人是個很困擾的或覺得有點奇怪,但對使用者來說完全沒有影響。那就應該保留它,而不是多做了一些額外的判斷或功能或選項,這樣反而會讓使用者覺得很困惑。

8. 有些規範(rule)去適度得限制使用者能做的事是好的。有時候不需要給使用者太多彈性。如果說因為要有彈性而需要使用者多做一些事操作和設定,這樣反而會讓使用者覺得更麻煩。我舉個例子,python這程式語言嚴格限制了程式縮排及換行的標準,開發者只要寫錯一個空行,編譯就會失敗。就像你寫一篇作文時,老師叫你每一個段落開頭都要空兩格一樣的意思。這對開發者來說是很不彈性的。但是python開發者寫出來的東西,一定保證都是排版整齊的程式碼。這作法在其他程式語言很少見,但卻沒有人去抱怨它,反而很多人覺得這是一個超棒的設計。因為我再也不會看到亂七八糟的程式碼了!! 結論: 人類是需要規範的生物(對某些人來說)

圖片的部份:
1. 不要將任何語言文字做在圖片上,因為這對日後App要做多國語言時,會是一個很大的困擾。例: 不要做三張底圖一樣,但文字不一樣的”確定”、”取消”、”重設”按鈕圖。而是只要一張不包含文字的按鈕底圖。

2. 圖片的的尺寸要盡量精簡不要做成全螢幕滿版。意思是,如果有一張圖片你知道在某個頁面只會擺那張圖,而且一定是放在正中間的位置,但它的實際尺寸可能只有240 x 60。那你就應該只做成240 x 60的去背圖片,而不是滿版已經置中的320 x 480圖片。一來是這樣圖片所暫用的記憶體會比較小(開發App時,記憶體的使用量是緇絑必較)。二來是擺放位置讓開發者自己調,日後如果要更改位置也比較方便,且不會有不同螢幕解析度而導致圖片變形的情形。

3. 同類型or同功能的圖片最好尺寸做的一樣。這樣程式在做排版時會比較方便計算位置。

4. 檔名統一用小寫英文及底線組成。例:
CalendarEvent-1.PNG -> X
calendarEvent1.png -> X
calendar_event_1.png -> O

5. 檔名內的文字命名的順序,以功能或類別為優先。例:
setting_account_btn.png -> X
btn_setting_account.png -> O
1_wanwan_sticker.png -> X
sticker_wanwan_1.png -> O

6. 做圖片時,原始檔盡量做大一點的尺寸。因為圖片縮小後不會差太多,但一放大就悲劇了。例: 如果App裡有個地方需要一個64 x 64的button圖片。那你應該是做一個512 x 512的原始圖檔,放到App時再去縮。不要只做剛好64×64的圖片,不然哪一天又出了一個4倍解析度螢幕的手機時,就悲劇了。

to be continued…
有想到再補上

【iPhone App】新遊戲App: Ultimate Fleet 的開發筆記

Saturday, September 8th, 2012


(PS. 這App Logo跟目前上架的不一樣,因為下一版才會用新做的Logo :p)

前言
今天Ultimate Fleet App終於上架了! \ ̄▽ ̄/ 心裡當然是很興奮,因為這次做了好久。這個App的idea,其實從去年年初就有了,但那時還沒有想過真正要把它做出來。因為那個時候,我根本還沒有寫過任何一款iOS的遊戲。如果那時候就開始動手做,對我來說實在太難了。真正開始做,是從今年過完農曆年後那時候。因為那時候前一款遊戲Monster Lord也改版改得差不多了,比較有空想想新的東西。而且最重要的原因是,過完年後我才確定可以再繼續寫iOS App下去(詳情請看另一篇)。

遊戲設計 & 起源

之所以會有這款遊戲的誕生,其實要把時間拉到20年前,也就是差不多我國中的時候(我好老 ~”~)。那個時候我和我哥買了一款簡單又好玩的太空戰略遊戲,名字我實在想不起來,而且也不是什麼超級大作。那時候畫面還是單色的,戰機的樣子和遊戲玩法也蠻陽春的,就是不斷得出任務賺錢、賺經驗值。不過每隔一段時間飛行員就會老死,得另外重新開始一個新飛行員和戰機(我對這點設計實在有點討厭,為何不讓我可以保留呢 \_/),但之前賺的錢會留著。不過它的任務還蠻多種的,有的是要去救一架友軍的戰機,有的是要協助防衛太空站…等等的。而且,不同的武器特性會對目標造成不同的作用傷害,這點深深吸引了我。所以我很喜歡一再得嘗試新的組合,試著讓我的戰機變得非常強大。尤其是看著自己戰機發射無數的雷射、砲彈把敵人戰機打爆的那一個瞬間,很有快感~ XD。但後來,這二十年來,我就再也沒玩過類似的遊戲了,即便是我已經玩過上百種遊戲過。一直到長大工作了好幾年後,我一直在等有一天有人會做出一個像我那時候玩到的那款遊戲一樣。但很不辛的,真的一個也沒有(有些可能有點類似,但還是不太一樣)。也因此,我才會想要做一個自己也很愛玩的這種太空戰機類型的SLG遊戲,算是滿足自己兒時的夢想吧。

遊戲中戰鬥的部份,有蠻多是參考自我記憶中的那款遊戲的玩法。例加武器的類型有分成穿刺、破壞、熔化三種,而我自己又多加了一種弱化的類型,當擊中目標時會各自有不同的變化。所以玩家需要自己嘗試各種組合,看哪一種組合比較適合。而另外我又多加了許多副屬裝備和傭兵系統,這部份完全是新的,是以前那款遊戲中所沒有的。副屬裝備的作用是來增加戰機的能力,例如: 可以暫時飛得比較快快、可以暫時無敵…等等的。傭兵系統的靈感則是來自於玩過的魔法門七。而戰鬥方式就跟以前我玩到的方式一樣,用六角格地圖和回合制的方式來執行。這部份對我來說非常苦手,因為我以前完全沒有開發過像這種六角格地圖的戰棋遊戲,連演算法還有很多AI都不知道該怎麼開始寫。所以在開發的期間,有一大段時間都是在摸這些遊戲的演算法,到處找網路上遊戲高人自己寫的教學。還好這不算是很冷門的遊戲演算法,還蠻多資料可以參考的。說真的,我覺得自己居然可以把演算法寫出來,真的是很神奇的一件事。在開始做之前,我還會怕說萬一演算法寫不出來怎麼辦… ~”~ 但我還是硬逼著自己一定要試,一定要做出來!! 感謝老天賜我神力… ~o~ 這裡面,其實有很多的細節要做,例如說: A戰機攻擊B戰機時是在它的30度角的方向,所以程式要判斷A是攻擊B的”前端”部份,因此要損壞的部位應該是B戰機的前端護甲。還有例如: 當戰機要攻擊時,必須很快得取得它前方n格範圍內所有可被攻擊的敵方戰機資料。因為我不想用while迴圈慢慢一個一個找,而是想用複雜度為常數的演算法一次解決,這也讓我搞了好久,一直試不出正確的,還好最後有生出來… ~”~。

美術和UI

這次遊戲中的美術和UI部份,幾乎全是我一個人包辦的,只有幾個page的背景圖是用買的,還有人物的頭像是外包請人畫的。有很多介面設計的靈感是參考自國外這位天才設計師的作品,然後自己慢慢try,做出有點像未來電腦使用的半透明發光介面。戰機的部份,則是去3D studio這個網站去買一些3D模型,再輸出成2D圖片自己套。3D圖像這部份之前也沒摸過,所以也是慢慢試了好久。做過才知道,原來3D的檔案格式和工具還有分這麼多種。花了好多時間在try怎麼把買來的3D模型成功正確得輸出。有些3D模型買來後,不知道是因為工具版本不合,或是本來就要再花時間自己慢慢貼材質,搞半天 ~”~。

遊戲配樂、音效
這部份跟之前一樣,也是都在SoundSnap這個網站買背景音樂和音效來用,比較沒什麼大的差別。這次背景音樂曲風絕大多數都是比較緊湊偏搖滾類的,比較符合太空未來的場景。

程式

跟前一款遊戲一樣,一樣是純Objective-C code + 半套cocos2d(只用粒子效果)。比較不一樣的部份是這次處理的邏輯演算法比較沒有像之前怪物有各種狀態疊加在一起那麼複雜,大部份都是在算角度、算距離,比起來比之前的簡單一點。難的部份前面提過,就是六角格地圖(Hexagon-Based Tile Map)演算法還有path finding的部份。Path Finding的演算法,最後是採用A*這套演算法,概念不算太難,第一次看的人應該就看的懂,只是要花點時間。電腦戰機AI的部份,倒是比原本想的簡單,蠻單純的,只要讓戰機找到最短路徑會追殺某一架玩家的戰機或特定友軍戰機就好。不用像之前要判斷一大堆怪物狀態和魔法才能做決定。

後記
其實這次開發的時間比我原本預估的多蠻多的。原本是預估四個月左右就要完成,沒想到拖了半年多(可能跟D3發片也有點關係 ~”~)。可能是這次我對畫面上的要求比較嚴格吧,很多UI介面的圖片做好之後,我一再的修改又修改。還有遊戲音效也是,tune了好久,常常一個音效弄好之後隔幾天自己測試覺得感覺不對,又一直調。另外就是這次企劃的時間也比之前多很多,因為想要一開始推出的版本就能達到一定的水準,不想讓玩家覺得好像有點單調,所以比之前的作品多加了很多不同的玩法或元素進去。之後的改版,我還是會再一直追加新的東西進去,希望能給玩家有更多的驚喜和變化。我自己真得也很愛玩這個遊戲,有時候明明7點多想好要去吃飯了,可是因為戰鬥打到一半覺得沒把敵人全都打爆就會有點難過 XD 目前進度聲望大概一萬多左右 :P 。未來改版應該還會加和不同玩家對戰的模式,不過我還在想要怎麼做才比較公平,等以後囉~ :mrgreen:

【iPhone App Dev】如何讓App保持在運作狀態

Saturday, February 18th, 2012

怕自己又忘記找半天,這裡記一下… 很簡單,就一行code:

[[UIApplication sharedApplication] setIdleTimerDisabled:YES];

可以把它寫在 application:didFinishLaunchingWithOptions: 裡面
這行code主要是把iPhone/iPad內部預設的idle計時關閉,不去計算目前App隔多久使用者沒有任何動作了而讓App進入睡眠(背景)模式