App of the Week - Clear

在所有的APP類別中，我對行事曆和待辦事項這類的日常生活工具，有著近乎迷戀的喜好。只要有UI設計的特別美或是熱門的這類APP上架，我幾乎都會下載來用看看。

我的本週最佳UI首選是最近很熱門的待辦事項工具 ﹣ Clear。和過去的待辦事件工具在外觀上完全的不同，所以在第一時間，其實沒什麼吸引到我的注意。後來看它在APP排行上一直高居不下，想說一定有它的過人之處，那當然要給它一個機會了，一用就決定要把本週最佳UI首選頒給它了。 

其實它的UI並沒有特別美，但是它的UI操作方式同時具備了傳統與創新。傳統是指他將iPhone上原本的手勢（像是向右滑動刪除資料，拖曳資料調整事件的重要性）發揚光大，更加入了它自創的一些手勢，請看下面這段影片比較清楚，用講的不太容易敘述。

 

說實在的，我目前還是不會把Clear設為我日常紀錄待辦事項的APP（我現在是用Refills）, 主要是因為他沒辦法和任何雲端的待辦事項(像是iCloud或是google calendar)同步，所以你建的資料就只能待在你的手機裡，其它設備都不能同步。雖然說同步好像也沒什麼特別意義，但是覺得好像這種工具沒上雲端就是半殘。不過我相信這套APP在這一輪的熱賣中，應該也撈了不少錢，應該很有本錢拿來改進下個版本才對。我是非常期待下個改進的版本更新。

有興趣可以參考一下這家公司的網站：Realmac Software

鋼鐵人的HUD實作

從我開始寫APP的第一天開始，我就夢想著有一天可以做出像是關鍵報告或是鋼鐵人那種充滿未來性、科技感的操作界面，但是說實在的，也不是這麼難，這裡就來示範一下怎麼做實作出這麼酷的UI。

首先，先要把這基本的HUD（抬頭顯示器？）畫出來，在這裡有教學網頁教怎麼用photoshop畫出類似的風格。我是沒照著那裡教的畫，直接看著上面這張電影裡的截圖畫了幾個圈示意一下。

雖然在那個教學網站裡，教你畫出這一堆圓圈後，他的工作就完成了，但是，對我們來說，不是只是要“看”起來像鋼鐵人的畫面，我們是要讓他“用”起來像鋼鐵人用的才酷。

所以，先把剛才畫的一堆圈圈拆成個別的一個一個的圈圈，我是拆成5個圈圈，分別存成5個PNG檔（如下圖）。分別命名為circle1Image到circle5Image。實作方式請看下列程式說明。

先在.h宣告如下：

//4個圈圈的UIImageView

    IBOutlet UIImageView *circle1Image;

    IBOutlet UIImageView *circle2Image;

    IBOutlet UIImageView *circle3Image;

    IBOutlet UIImageView *circle5Image;

//4個圈圈的CGAffineTransform

    CGAffineTransform circle1Transform;

    CGAffineTransform circle2Transform;

    CGAffineTransform circle3Transform;

    CGAffineTransform circle5Transform;

然後在.m實作

在initWithNibName裡先宣告一個NSTimer可以讓圈圈自已轉起來

//每0.03秒執行一次selfMoveCircle這個程序

timer =[NSTimer scheduledTimerWithTimeInterval:0.03f 

target:self

                              selector:@selector(selfMoveCircle)

      userInfo:nil

       repeats:YES];

//在這個selfMoveCircle裡只讓3個圈圈自已會一直轉，另外2個圈圈是要聽令於我們的指揮，當作操作控制的轉盤。

-(void)selfMoveCircle{

    circle5Transform = circle5Image.transform;

    circle3Transform = circle3Image.transform;

    circle2Transform = circle2Image.transform;
    //把3個圈轉動的速度設成不同，感覺比較不會這麼死板

    circle5Image.transform = CGAffineTransformRotate(circle5Transform, 0.02);

    circle3Image.transform = CGAffineTransformRotate(circle3Transform, 0.02);

    circle2Image.transform = CGAffineTransformRotate(circle2Transform, 0.04);

}

//當我們轉動轉盤的時侯，最外圍的圈circle1Image, 跟著我們轉動的方向反方向轉動。

- (void)controlCircleMove:(NSInteger)wheelCV{

    if (wheelCV >0) {

        circle1Transform = circle1Image.transform;

        circle1Image.transform = CGAffineTransformRotate(circle1Transform, -0.6);

    }else {

        circle1Transform = circle1Image.transform;

        circle1Image.transform = CGAffineTransformRotate(circle1Transform, 0.6);

    }

}

耶...怎麼沒宣告和實作到circle4Image呢？因為circle4Image是我們主要的操控盤，也就是我們手指怎麼轉，它就跟著怎麼轉，所以它是要另外再宣告在一個wheelView.h，並實作在wheelView.m負責控管我們手指的轉動方向，並把轉動的值傳回到這裡來告訴circle1Image要怎麼轉。但是實作轉輪又是一個大工程，另外再寫一篇怎麼實作好了。

探討工業設計的紀錄片 ﹣ Objectified

我也忘了是在哪看到這部紀錄片了，應該是在pps上吧....其中讓我印象最深刻的一段話，是訪問Apple的設計師（正確的頭銜應該是『工業設計副總裁』）Janathan Ive談什麼是好的設計的一段話，後來我發現還滿多設計相關的部落格都曾節錄過這段話：原文是：

[Get] design out of the way. When forms are developed with reason and not arbitrary shapes, it feels almost inevitable. It feels almost undesigned. - Jonathan Ive

大概的意思是一個好的設計應該會讓人感覺不出他是刻意的去“設計”過的，讓人覺得這是渾然天成的。我想Jonathan Ive的意思是如果上帝造完天地萬物後，還有多的時間請祂來設計一支手機，祂做出來的手機應該差不多就是iPhone那個樣子了。我也在youTube上找到了這個片段，很值得一看。

 

參考資料：Objectified紀錄片網站

App store 審核退件經驗談

在網路上有很多iOS開發者談到送他們的app送app store被退件的經驗， 感覺這個審核機制就像是個黑衙門，判生判死全是看apple審核者的心情。有時侯真的是這樣的，我就來談談我的2個app被退件的經驗。


雖然說只是2個app被退件，但是不是代表被退2次而已，我的第一個app被退了大概5次，而且是弄到最後完全沒有頭緒該怎麼進行下去了，正想放棄的時侯，居然接到apple的審核者打來的電話，聽到這裡，我想一定有很多本來想開發app的人心想“完了，要用英文對話，我還是放棄好了”。但是放心...打來的人是講中文，我是不知道是從美國打來的還是中國大陸打來的，總之是個操京片子的人。他一點一點的解釋我被退件的原因，我也一點一點反駁我看哪個APP也是這樣做，但是也上架了，為什麼我的不行，大部份得到的回答都是現在和以前不一樣了，現在apple控制的比較嚴格，雖然口不服，但是也心服了。


用電話直接溝通的好處就是可以把我原本要試的改法全部一次問清楚哪個是可行的，不需要一次一次送審，再一次一次退件，自信都被磨光了。最後得到一個可行的作法，當天我改完馬上送審，第二天就審核通過上架了（通常審核需要1個星期左右）。


第一個app當初被退件的原因我已經記不起來了。但是昨天我送審的app又被退件了，在我忘了之前快和大家分享退件原因，免得將來大家又犯了一樣的問題。這次的退件原因有3點：

1. 在描述(description）的部份出現了"demo", "trial", "beta", or "test"等字，不可以。
2. 在App名稱用了“Pad"這個字，犯了apple的大忌，不可以。
3. Support URL的網址打錯了，連不上任何相關的網站。（這不是我的錯，是他自已在我給的url後多打了一個”，“）

所以基本上，送審沒有這麼可怕的。事出必有因，最後一定都能順利上架的。也祝大家都能上架愉快。


對了，再補充一點，送審的description一定要寫英文嗎？答案是不一定，全部寫中文也可以。Apple裡人才濟濟啊，你寫什麼文他們都可以找到人來看懂的。

Vin Gear畫面拆解

我想大部份的男生都是機械迷， 從小玩樂高，長大就迷機車、汽車，有了錢就迷相機，機械錶。對這些小零件組合起來的神奇工具從小就無法抗拒。

我也是個機械迷，所以我在設計第一個APP的時侯，最初的想法就是從機械錶開始發想的。雖然最後的成果和錶無關，但是從這個APP中不難看出機械錶對這個APP最終操作的影響。

每一個轉輪都像齒輪的連動一樣，當初我花了很多的時間在計算每個轉盤轉動的角度，然後把這些角度轉換成代表的數值。下次有時間我再來分享這些換算的方法。

Cocos2D 教學影片

在寫遊戲的過程中，有很多的技巧和寫一般的程式很不同，尤其是一些動畫和遊戲中物件的互動方式，讓我花了很多的時間在網路上找相關的資料。在找資料的過程中，cocos2D這個字一直出現在我的搜尋結果裡，我只知道它是一個“物理引擎”， Angry Bird就是用cocos2D（正確的說法應該是Box2D）來做到像是被彈弓射出去的鳥，或是被鳥打到垮掉的房子等。一聽起來就很艱深的感覺，所以我就一直對cocos2D視而不見，覺得那是寫遊戲的大公司才會用到的工具。

直到昨天看到了這段教學影片，突然覺得茅塞頓開、有如醍醐灌頂，原來是這麼簡單啊！如果早個幾個月看到這段影片，有很多的功能我就不必寫了幾百行的程式只為了達到cocos2D寫個2行程式的功能。一共有20段影片，每一段都十分鐘左右，大概專心的花個2天看完，功力應該就可以比自已花1個月看書來的高強了。以下是第一段影片，每一段影片完後都會出現下一堂課的影片，如果對遊戲製作有興趣的人，絕對值得花幾個小時的時間把這些影片看完。

從電影來的靈感

在設計iphone APP UI的時侯，我會習慣性的重覆看Mark Coleran的作品來找靈感， Mark Coleran幫很多的電影設計過在電影裡出現的華麗具科技感的電腦畫面，大家看了以下的demo影片應該會覺得很熟悉。

Mark Coleran帶給我最大的靈感不是畫面的設計而已，我從他的設計裡學到很多過場效果的呈現。我覺得一個APP能讓使用者有“哇”的感覺，最重要的元素就是音效和動畫。每一次使用者點擊螢幕都是充滿期待，如果程式的回應只是安靜的直接換個畫面，雖然不至於讓使用者失望，但是就好像少了點什麼吸引人的元素。

我在每個APP設計時在找適合的音效和設計動畫的呈現上都花了很多的時間，但是得到正面的回應都會讓我覺得這時間花的很值得。

下次再來分享鋼鐵人HUD畫面的實作方法。

這裡是Mark Coleran的網頁，非常的具有參考價值。

用AVAudioRecorder感應聲音

這是一個還沒有完成的app, 這2年其實還有不少寫到一半就荒癈的程式，有時侯是靈感沒了，有時侯是突然有別的想法就全心投入另一件事了，有時侯是突然接到案子，有錢賺的事當然優先，所以就丟下做到一半的事。當初想寫這個app是因為我姐剛生了小baby, 我就想寫一個app是可以感應到baby的哭聲，然後就會開始放安撫小孩的音樂。因為當初我女兒小時侯有一個類似的玩具，就是小孩哭的時侯他會自已播音樂，我覺得iphone應該也能做到同樣的功能。

當初我是設計了白天模式與夜晚模式可以切換，白天模式（其實也不一定是白天用，就是手動模式）可以自已選曲，自已手動啟動，就像是個音樂盒，大人可以手動播音樂給baby聽。夜間模式就是大家都睡了的時侯，他會自動偵測是不是有baby的哭聲，如果偵測到了，就會自已播放音樂安撫baby。

怎麼去設定感應的敏感度下次再談，等一下要出門去吃喜酒，先把怎麼設感應聲音的功能分享一下，免得又忘了。

在.h先import AVFoundation

#import <AVFoundation/AVFoundation.h>

然後宣告

AVAudioRecorder *recorder;

在.m的ViewDidLoad裡init recorder

recorder = [[AVAudioRecorder alloc] initWithURL:url settings:settings error:&error];

設定一個NSTimer固定頻率去偵測有沒有哭聲

-(void)levelTimerCallback:(NSTimer *)timer{

[recorder updateMeters];

const double ALPHA = 0.05;

  double peakPowerForChannel = pow(10, (0.05 *[recorder peakPowerForChannel:0]));

  lowPassResults = ALPHA * peakPowerForChannel + (1.0 - ALPHA) * lowPassResults;

  if (pause = NO) {

  if (lowPassResults > senseValue) {

  NSLog(@"baby cry detected");

  [playSong play];

  playing = YES;

  [playStatus setImage:[UIImage imageNamed:@"StopIcon.png"]];

  }

  }

}

先出門了，還沒完，下次再補...sorry....

App of the Week - Picture Show

現在是怎麼樣，每一個APP都要拍一段這麼美的Demo嗎？那叫我們這種一人工作室怎麼活下去呢？

   

今天要推薦的是這個我最常用的拍照APP - Picture Show。與其說是拍照APP，它應該比較算是後製APP。同樣的，第一眼會吸引我的都是它特別美的UI, 在操作後更吸引我的是它真是什麼拍照軟體該有的後製功能都有，而且操作起來不會憋手憋腳的感覺，很直覺，也很流暢。

我也寫過類似的拍照APP, 是在發現Picture Show前寫的，後來才發現Picture Show完全是我要寫出來的樣子，而且比我能寫出來的好多了，所以我的拍照APP現在又變成另一個荒癈的專案，被塵封在“未完成的專案”目錄中。不過那支程式裡也滿多部份可以分享的，有機會再來分享拍照相機的一些實作方法。

有興趣可以參考一下這家公司的網站：Picture Show

UIView 同時移動、旋轉、放大的作法

在orderGear裡有個我很喜歡的動畫效果，就是如果點選左手邊的菜色相片，它就會移動到畫面的中央並放大、轉正。

點選前：

點選後：

這裡來示範一下怎麼用setAnimation來實作這樣的效果。

先在.h宣告

IBOutlet UIView *photoframeView_4;


因為這張看似拍立得的相片中包含了相片、框、菜名、按揵等好幾個物件，所以設定為UIView來包含所有物件, 而不是用UIImageView, 如果只有一張圖的時侯還是可以用UIImageView。

然後在.m實作一個IBAction，就是當按下這張相片時的動作。

-(IBAction) showEnlargePhotoframe:(id)sender{

   CGPoint photoframe_4CurrentPOS = photoframeView_4.center;

photoframe_4CurrentPOS.x = 142; //移動前的x座標

photoframe_4CurrentPOS.y = 573; //移動前的y座標

photoframeView_4.center = photoframe_4CurrentPOS;

float angle_4  = -14*(PI/100); //原來旋轉的角度

CGAffineTransform transformRotate_4 = CGAffineTransformMakeRotation(angle_4);

CGAffineTransform transform_4 = CGAffineTransformScale(transformRotate_4, 0.36, 0.36); //原來的大小（原本尺寸縮到36%的大小)

[photoframeView_4 setTransform:transform_4];

[UIView beginAnimations:nil context:nil];

[UIView setAnimationDuration:0.5f];

[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

photoframeView_4.hidden = NO;

enlargeButton_4.hidden = YES; //隱藏放大的按鍵

normalButton_4.hidden = NO; //顯示放大後的按鍵

photoframe_4CurrentPOS.x = 512; //移動後的x座標

photoframe_4CurrentPOS.y = 374; //移動後的y座標

photoframeView_4.center = photoframe_4CurrentPOS;

angle_4  = 0*(PI/100); //旋轉UIView成正的

transformRotate_4 = CGAffineTransformMakeRotation(angle_4);

transform_4 = CGAffineTransformScale(transformRotate_4, 1, 1); //放大回原本大小

[photoframeView_4 setTransform:transform_4];

[UIView commitAnimations]; //執行動畫

}

所以，與其說是點選後開始變型(transform), 不如說是讓原本又小又歪的圖在點選後回復成原本的角度和大小。

Introduce Order Gear

Introduce 樂田麵包屋 (Game)