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要怎麼轉。但是實作轉輪又是一個大工程，另外再寫一篇怎麼實作好了。

Vin Gear畫面拆解

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

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

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

從電影來的靈感

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

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

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

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

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

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), 不如說是讓原本又小又歪的圖在點選後回復成原本的角度和大小。

『樂田麵包屋』過關畫面分解

在樂田麵包屋遊戲中，每一次過關的時侯，都會有一段6秒鐘的過關畫面。雖然只有短短的6秒鐘，但是裡面包含了不算簡單的工作。在此將這些動作分解讓大家瞭解一下。

這個畫面雖然只包含了4個元素（從上圖左手邊的objects可以看得出來），一張背景，一個小廚師的圖，一個獎牌，和小廚師身邊的星星。

實際上這6秒的畫面包含了以下的畫面：

1張背景

2張小廚師

- (void)chefAnimate{

    

    animationChef.animationImages = [NSArray arrayWithObjects:

                                    [UIImage imageNamed:@"chef_verygood1.png"],

                                    [UIImage imageNamed:@"chef_verygood2.png"],

                                     nil];

    

    [animationChef setAnimationRepeatCount:10];

    animationChef.animationDuration = 1.5;

    [animationChef startAnimating];

    

    

}

5張獎牌不同光澤

- (void)verygoodAnimate{

    

    animationVerygood.animationImages = [NSArray arrayWithObjects:

                                         [UIImage imageNamed:@"medalVerygood1.png"],

                                         [UIImage imageNamed:@"medalVerygood2.png"],

                                         [UIImage imageNamed:@"medalVerygood3.png"],

                                         [UIImage imageNamed:@"medalVerygood4.png"],

                                         [UIImage imageNamed:@"medalVerygood5.png"],

                                         [UIImage imageNamed:@"medalVerygood1.png"],nil];

    

    [animationVerygood setAnimationRepeatCount:10];

    animationVerygood.animationDuration = 1;

    [animationVerygood startAnimating];

    

    

}

1張閃爍不停的星星

- (void)starAnimation{

    starImage.alpha = 0;

    [UIView beginAnimations:nil context:NULL];

    [UIView setAnimationDuration:0.5];

    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

    starImage.alpha = 1.0;

    [UIView commitAnimations];

}

用presentModalViewController跳到另一個畫面

//如果是要從一個畫面（nib)跳到另一個畫面的方法，須指定要跳到的畫面，在這裡就是storeInfoViewController

- (IBAction)gotoStoreInfo:(id)sender {

    storeInfoViewController *storeView = [[storeInfoViewController alloc] initWithNibName:nil bundle:nil];

    [self presentModalViewController:storeView animated:YES];

}

//如果要回到剛才跳回來的畫面, 不需要指定要回到的畫面，反正它會自已回到剛才來的地方

- (IBAction)backToMenu:(id)sender {

    menuViewController *menuView = [[menuViewController alloc] initWithNibName:nil bundle:nil];

    [self presentModalViewController:menuView animated:YES];

}

操作的學習曲線

雖然大部份的人都會稱許iphone容易上手，連4.5歲的小朋友拿到手上幾分鐘後也知道怎麼操作，但是我相信還是有很大的一群人覺得iphone的操作方式和他們"熟悉的操作方式"很不同。

熟悉的操作方式對5,6年級生來說可能是大型遊戲機台，像快打旋風那種大支搖桿。對7.8年級生來說可能是線上遊戲打怪用的鍵盤加滑鼠，對9年級以後的可能是wii或kinect在空中比手劃腳的操作方式。第一支iPhone也不過是2007年才發表的，到現在也才5年不到的時間。對任何人來說，在螢幕上劃來劃去應該都不算是個原本熟悉的操作方式。所以在開發APP時，除非你是完全使用cocoa touch裡現成的UIController， 像是UITableView, UINavigator, UIPickerView...這些標準的操作界面，要不然只要你想創新，一定會遇到使用者學習曲線的問題。

我不喜歡用iOS裡制式的操作界面，我喜歡加入自已風格的操作方法，所以對剛拿到程式的使用者來說可能都需要多花一點時間去學習如何使用。如果是針對一般的使用者，我是沒辦法聽到他們邊學邊罵的實際狀況。但是如果是針對客戶，當著面看著他們一邊操作一邊抱怨怎麼會這麼的”不人性化“和他們熟悉的方法都不一樣，那真是會當場吐出血來。

雖然古有明訓 - 客戶永遠是對的，但是也不必因為這樣就放棄了創新的想法。任何的設計，其實多多少少都會有學習曲線。只是你怎麼在你的創新設計中加入讓使用者可以逐步趨近正確的行為。這可能又是一門大的學問了。這在『設計法則』（原點出版社）這本書裡提到這種設計法則叫Shaping，中文翻作“塑造”。以下節錄一小段內容來說明：

”塑造通常在無意識下發生。舉例來說，電玩遊戲利用塑造法則，當遊戲剛開始時，需要簡單的輸入就可以過關（得到『增強』），接下來的遊戲則需要益發複雜的操控行為，才能掌控更高的關卡。" ﹣ 設計法則 P.222

我除了在我開發的第一個APP裡有操作說明的選項外，其它的APP我都是用“提示”的作法，尤其是對第一次的操作者。沒有清楚的提示說明，不只讓操作者不容易猜出正確的操作方法，也有可能讓使用者錯失了你費心設計的貼心功能。

對於客戶的反應，其實就不需要太放在心上，只要善盡對客戶說明你設計的原意，相信客戶也不是非得要堅持他們的想法才對。我相信如果哈利波特的作者在發行第一集哈利波特前，拿著原稿去給你的客戶先看過，客戶應該也會說“你這不對啊，什麼咒語會叫”疾疾 護法現身“啊，以前我們都嘛說”天靈靈．地靈靈“才像真的咒語嘛”！

本來要提一下這篇“塑造”裡提到一個很酷的例子，叫“信鴿計畫”，但是快睡著了，下次再提好了。有興趣可以自已先查查"Project Pigeon"。

CWSI Gear 2.0 retina高解析版

自從iPhone 4上市後，我就深深為那retina的高畫質所吸引。那當然要所有程式改成高畫質版。

其實要把APP改成retina高畫質很容易，有用到圖的部份直接把圖放大一倍，像是原本480x320的畫面，就放大成960x640就可以了。如果是原本就是文字的部份不需要修改，iphone會自已變成細緻的高解析文字（左圖）。

還有，把圖放大一倍不是直接把原圖resize拉大哦，那解析度不會變的比較好。像我就是在photoshop裡重做一張960x640的圖取代原本480x320的圖。如果是直接把480 x320 resize成960x640就會右圖這樣，畫面就無法展現retina的精緻度了。看不出有什麼差別嗎？點圖進去放大看就可以看出不同了。

icon 設計

Vin Gear第一個版本的icon。這個icon只用了一個版本，下個版本就改掉了。主要是因為太複雜了，而且放到iPhone 3Gs，這種沒有retina的“低解析”營幕上就整個糊掉了。設計icon真是個學問，新版的icon(如下圖）有二個重點：

1. 簡化增加辨識度
2. 加入和APP相關元素（酒瓶）

順帶一提，icon的大小及弧度：

• corner radius for the 512x512 = 90 (iTunesArtwork)
• corner radius for the 114x114 = 18 (iPhone/iPod touch (Retina))
• corner radius for the 72x72 = 11 (iPad)
• corner radius for the 57x57 = 9 (iPhone/iPod touch)

資料來源：

https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

http://stackoverflow.com/questions/2105289/iphone-app-icons-exact-radius