-
IPhone人機界面指南(HIG)
Continue Reading…: IPhone人機界面指南(HIG)中文版下載:iPhone-HIG(人機界面指南) 英文版下載:MobileHIG HIG(人機界面指南)是apple在審核app時,給開發者去參考的條文, 只要想要在ios平台上開發app的開發者,在上架時,都必需同意自己的應用程式符合裡面的規範。 這也是app開發者在開發完APP後,常常會被apple退件的原因。 因此建議有志要開發iphone app的人可以在開發前先研讀一下這本規範手冊。 HIG將應用程式分類成三大類型 生產力應用程式:幫忙使用者管理資訊及完成工作。資訊是階層架構的,可以透過向下深入更多層級而瀏覽更多資訊。 效率型應用程式一般採用多個視圖,通常每一視圖顯示一個層次的資訊。使用介面通常簡單,整潔且由標準視圖和控制元件組成。效率型應用程式通常沒有很多自定義介面。原因在於效率型應用程式專注於資訊和任務,而非環境或體驗。 融入式應用程式:遊戲是典型的例子,這種應用程式使用非常客製化的介面,讓使用者與裝置互動,HIG對這種應用程式的規範比較不那麼嚴格。 使用者的焦點在於視覺上的內容和體驗,而非體驗背後的數據。 工具應用程式:透過盡可能少的互動與組態設定提供使用者特定的資訊。這種APP通常比生產力應用程式有更多的介面且更加被要求要符合HIG規範。 實用型應用程式俱有視覺上的吸引力,但是又能夠突出它們顯示的資訊。使用者使用實用型應用程式來查看一些事情的狀態或是查找一些東西,所以使用者希望能夠快速方便地看到他們感興趣的資訊。因此,實用型應用程式的使用者介面十分簡潔,並提供簡單的,標準的視圖和控制元件。 實用型應用程式一般以平面列表的方式顯示資訊;使用者通常不需要深入資訊層次結構。實用型應用程式中的每一個視圖通常都提供同樣的數據組織結構和細節深度,但是數據來源可以不同。由此,使用者可以打開單個實用型應用程式以對多個主題進行相似處理。一些實用型應用程式能顯示打開的視圖的數量;由此使用者可以按順序瀏覽,在一個視圖後選擇另一個視圖。(例如下圖使用者可以用上一層的設定界面讓下一層的天氣資料顯示不同地區的資訊) 開發APP時要注意的點 畫面比電腦小很多:應考量將複雜的畫面簡化 記憶體有限:因為ios的記憶體不包括磁碟交換空間,所以在app開發時要注意不能同時使用太高的記憶體,ios在記憶體不足時,也是會從耗記憶體最高的app開始關閉。 每次只能顯示一個視窗:不能同時瀏覽多個視窗,只可以依序瀏覽。 同一時間只能運行一個程式:因為當接電話、切到另一個應用程式等,現有的應用程式將被關閉。應要注意在使用者離開再回來時的畫面順暢度。 簡單易懂的操作說明 人機介面準則 當使用者操作螢幕上的對象時,這些對象保持可見,並且操作結果是一目了然的。 讓使用者做出選擇,而不是要求他們進行開放式的輸入,這樣能夠讓使用者能夠集中精力通過您的程式完成任務,而不是疲於記憶如何操作。 如果有一個動作,使用者需要長時間的等待,應該回饋一個音效或圖案。在完成資料下載時,也應讓使用者知道動作已完成。應隨時回饋使用者,讓他能了解現在系統正在做什麼。 使用者控制:由使用者來觸發和控制操作 美學完整性:美學上的完整性並不是用來衡量您的程式有多漂亮,而是衡量您程式的外觀和程式功能結合得有多好。例如,一個效率型應用程式應盡量精簡裝飾性的元素並置於背景中,同時使用標準控制元件和行為以突出任務。 優秀iPhone應用程式的共性 簡單和易用性 顯而易見:您可以最大限度地減少使用者必須選擇的控制元件數量,並清晰地標識這些控制元件以便使用者明白它們的功能。 由上而下的佈局:使用者可以用手指或大拇指點選一個iPhone OS的裝置的螢幕。使用者傾向於用他們的非慣用手握住裝置(或擱在手心),用慣用手的手指點選裝置。當使用大拇指時,人們要麼將裝置一手握住,然後用大拇指點選,要麼將裝置握於雙手間,同時用兩根大拇指點選。 無論用哪一種方式,對於使用者來說螢幕最上方都是最顯眼的。因此把最重要的資訊放在上方。 最大限度地減少所需的輸入:向使用者請求輸入時,考慮使用表格視圖(或選擇器)來代替文字輸入框。 簡潔地表達資訊:當使用者介面上的文字簡短而又直接的話,使用者就能夠快速地理解它。 為控制元件提供指尖大小的目標區域:一個簡單易用的使用者介面應該合理地分配控制元件和其他使用者介面元素,使得使用者能夠更方便地點中控制元件。 將重點放在主要功能上:確定在每個上下文中甚麼是最重要。 有效地溝通:避免使用技術性術語,讓使用者看不懂 適當的支援手勢:例如在表格list裡抓取使用者向右滑動的手勢,來顯示刪除功能。 慎重地融合品牌元素:應該以一種低調的方式引入您的品牌的顏色或圖片
-
UIViewController切換、Notification、Delegate及繪圖練習
Continue Reading…: UIViewController切換、Notification、Delegate及繪圖練習練習目標:http://www.youtube.com/watch?v=xiHBN2B1Vt4&list=UUPRP4bs_BNpx6XWI5Wm7O5g 老師範例:DrawSomething 我的作品:homework0810 在這個範例中,我使用了兩個viewController,去控制兩個頁面的畫面。 第一個用來顯示動畫的地方的viewController如下, 在這個頁面上除了球之外,還會有一個控制開關的鈕,當打開時代表不去管路徑如何直接讓球到圓點, 而關閉則會讓球一步步照著所繪的路線移動。 #import “ViewController.h” @interface ViewController () @property (weak, nonatomic) IBOutlet UISwitch *straightSwitch; @property (weak, nonatomic) IBOutlet UIImageView *myBall; @end @implementation ViewController – (void)viewDidLoad { [super viewDidLoad]; } – (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } /*…
-
提升Flash效能的幾個注意事項
Continue Reading…: 提升Flash效能的幾個注意事項本文為看這篇文章之後的重點整理: http://www.adobe.com/devnet/flash/articles/efficiency-tips.html 這篇文章同時會對Flash開發程式師、動畫及美術有幫助。 提升效能 關掉沒有用到的物件的互動功能: 減少畫面中active的物件能有效的增加效能,下面這段CODE可以關閉掉MovieClip和其他物件的所有互動關係。 mouseEnabled = false; mouseChildren = false; 如果仍要與其他的元件做互動則使用mouseChildren = false;就好。 判斷何時該用點陣圖(Bitmap)何時該用形狀(Shape): 使用Bitmap:當今天圖片有許多漸層、複雜圖案、顏色很多時,用Bitmap較好。 使用Shape:當今天的圖片是大塊色塊組成,感覺不利於縮放、但卻不需要縮放時,則使用Shape。(點陣圖按CTRL+B) 將線段轉成色塊:線段所需要耗用的效能較多,因此可將不必要的線段轉換為填色。(在修改>形狀>將線段轉換成填色) 避免使用虛線或點線,因為此種線段很耗費效能。 避免使用圓角,圓角比起直角的處理上耗效能。 避免圖像的坐標坐落位置帶有小數點,因為小數點的運算比起整數會耗費更多效能。 向量圖形最佳化 減少圖形中的節點(按修改>圖像>最佳化),或使用平滑工具來減少節點。 避免使用漸層:漸層是非常耗效能的,若是必需要使用漸層,可在完成後,將其轉為Bitmap格式,或者以純色去取代。 不要使用不必要大小的bitmap圖片,或多餘的aplha值=0的透明色塊。因為這樣會增加所耗費的效能。 避免使用遮罩:使用遮罩時,每次進入下一個影格都會重新繪製並產生裡面的元件,因此會耗費大量的效能。所以我們要盡量避免使用遮罩功能,若真的有需要,可以改用程式裡的scrollRect功能來取代遮罩,這樣在實務上會省下許多的資源,缺點是只能做方形遮罩。 靜態物件避免使用濾鏡特效:因為濾鏡特效是每次重繪時都要重新計算一次特效顯示的值,若是今天是靜態物件要做濾鏡效果,可先在PHOTOSHOP內做好,便可節省濾鏡特效的運算時間。 將陰影效果的品質調低 假如圖片要resize,不要直接在flash裡改變圖片大小,而應該在外部先做好resize再loading進來。可以使用mipmapping 來計算圖片的最佳大小。 降低影格速度 避免MovieClip呈現槽狀結構 動畫目標物件可設置快取為點陣圖以節省效能,但此時要注意不要對該元件設置任何濾鏡,不然他每一個影格都會重新快取一次目標物件,這會耗費非常高的效能。 濾鏡特效的設定值設為2的指數(ex: 2 4 8 16….) 如果只是非常簡單的動畫(如單純的位移事件),可以用程式碼去替代(如TweenLite),會更高彈性且節省效能。…
-
AS3的事件傳遞機制(Event、dispatchEvent及addEventListener)
Continue Reading…: AS3的事件傳遞機制(Event、dispatchEvent及addEventListener)當事件被發送出來之後。Event一般來説都會有一個Flow。 Flow分三個部分: Capture(捕獲階段) Targeting(目標階段) Bubbling(冒泡階段) 其關係圖如下:(來源為http://www.adobe.com/devnet/actionscript/articles/event_handling_as3.html) 值得一提的是,在FLASH裡,只有和UI相關的物件,會有上圖所示的目標及補獲階段的事件流, 一般像是Timer、Loader事件,是直接進入目標階段,並不會有上圖所示的事件流的流程。 在宣告Event時,也可以先指定事件是否要完整的跑完全部的流程。 宣告事件的語法及及參數意義如下: var event:Event = new Event(type, bubbles, cancelable); 參數說明(官方文件) type:String是要發送的事件的識別名稱EX:Event.COMPLETE bubbles:Boolean預設值是false,這個值是用來設定是否要有冒泡階段,如果傳false,代表他不會跑完全部的流程,只會從Capture到target階段就停止。 cancelable:Boolean預設值是false,這個值是用來設定是否這個事件可以被event.preventDefault();取消,如果設定為true的話,代表此事件是可以被取消的(稍候在dispatchEvent會更詳述這部份)。 常用的可以取消的事件有(cancelable為true): FocusEvent.MOUSE_FOCUS_CHANGE、FocusEvent.KEY_FOCUS_CHANGE、TextEvent.TEXT_INPUT。 而發送事件則是用這一段程式碼: var result:Boolean = box.dispatchEvent(event); 在發送事件時,要注意,假使今天我們是在STAGE裡面有一個box物件,那當我們用box.dispatchEvent(event); 即使事件是用box發送的,事件還是會從stage > root > box這樣跑。(請見上圖) 假如在建立Event時,bubbles設為true,那在上圖跑的流程為stage > root > box >…
-
UIView及繪圖練習範例APP
Continue Reading…: UIView及繪圖練習範例APP作業目標:Youtube操作影片 練習原始碼:homework0803 這個作業主要是在練習對view以及簡單的繪圖的操作,還有timer的使用 因此我截錄一些我覺得是練習關鍵的程式碼 下面的是viewController的相關程式碼 一個個出現的程式碼,按下show按鈕時觸發 – (IBAction)showButtonClick { [self clearButtonClick]; [self.circleNumber resignFirstResponder]; total = [self.circleNumber.text integerValue]; index = 0; //設定間隔一個個產生circle [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(addItems:) userInfo:NULL repeats:YES]; } 取得圓圈排列坐標的程式碼,傳入值為圓半徑及角度 //取得坐標 – (CGPoint)getPoint:(int) radius withAngel:(CGFloat) degrees{ int y = sin(degrees *…
-
上課筆記(五) – UIView操作及繪圖介紹
Continue Reading…: 上課筆記(五) – UIView操作及繪圖介紹view介紹 UIWindow是會在一開始便被xcode建立起來,裡面有很多view。 View的操作: 於上層操作subview: 在supervview裡是用MutableArray的index去管理subView,這index就是tag,tag=0是代表subview自己。 [self addSubView: view];//新增view [self insertSubView: view atIndex:0];//新增view在layer0 [self insertSubView:view belowSubview:upView];//新增view在upView之下 [self insertSubView:view aboveSubview:upView];//新增view在upView之上 [self exchangeSubviewAtIndex:0 withSubviewAtIndex:1];//將第0層的物件和第1層的調換 UIView view = [self viewWithTag:1];//取出在storyboard中tag為1的物件 移除自己: [view removeFromSuperview]; 設為隱藏:[view setHidden:YES]; 繪圖資訊相關的包括CGRect和CGSize及CGPoint,可以用NSValue包起來 //將NSRect放入NSArray中 NSMutableArray *array = [[NSMutableArray alloc] init]; NSValue…
-
切換View會用到的函數
Continue Reading…: 切換View會用到的函數切換UIViewController的兩種方式 1. 有NavigationController時 方法一:右側進入 SecondViewController* svc=[[SecondViewController alloc]init]; [self.navigationController pushViewController:svc animated:YES]; 返回到上一頁 [self.navigationController popViewControllerAnimated:YES]; 方法二:下面切入 SecondViewController* svc=[[SecondViewController alloc]init]; [self.navigationController presentModalViewController:svc animated:YES]; 返回到上一個UIViewController [self.navigationController dismissModalViewControllerAnimated:YES]; 2、没有NavigationController的切換方法 SecondViewController* svc=[[SecondViewController alloc]init]; [self presentModalViewController:svc animated:YES]; 返回到上一個UIViewController [self dismissModalViewControllerAnimated:YES]; 取得子viewController或父ViewController的方式 假設View A是來源的ViewController,而View B是目標ViewController。 1.取得子viewController ((B *)self.presentedViewController).屬性名…
-
簡易記帳APP範例
Continue Reading…: 簡易記帳APP範例source code在此:範例檔案下載AppPrototype 難得周日在家,就把昨天老師說的練習做完 老實說其實我弄很久(大概有八~九小時跑不掉= =) 可見真的很不熟悉,debug之類都超級慢的 首先就是在跳去圖表的地方, 原本在實作實際功能前可以正常出現圖表,後來不知為何會當掉, 光這個無聊的bug就找了兩三小時(遮臉) 後來發現是因為下面這段程式碼 -(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ InputViewController * inputCon = segue.destinationViewController; inputCon.delegate = self; } 因為只要是storyboard控制的頁面切換,都會呼叫prepareForSegue 我同時用storyboard去切換新增資料和圖表頁面, 所以圖表的segue.destinationViewController不是InputViewController就會跳錯誤。 在這邊也要說,老師說的inputCon.delegate等於setDelegate是很重要的 因為錯誤訊息一直說沒有setDelegate這個方法 結果我還一直傻傻看不懂是什麼意思~>”<~ (老師上課有說!妳有沒有在聽阿!) 然後第二個遇到的困難,就是我要在轉圖表畫面時,需要把現有資料傳至圖表畫面 一開始我還傻傻的在那又把CostViewController弄一個@protocol 想說要實作一個delegate機制,又是一方面要實作別人的delegate,又要是別人的protocol, 搞得我好混亂阿~ 後來才發現delegate似乎是被呼叫者,要把資料傳給呼叫者時才需使用(不確定,有錯請指正) 後來為了要傳遞資料,我不去使用storyboard的切換頁面方式,改使用程式去自行切換頁面 以下為傳送列表資料的程式碼 – (IBAction)showPieChart:(id)sender {…
-
上課筆記(四) – Naming Convention、記憶體管理
Continue Reading…: 上課筆記(四) – Naming Convention、記憶體管理Naming Convention 命名原則: 具解釋性 清楚 不會混淆 類別名稱: 第一個字大寫 前置namespace(在新增專案時會有Class Prefix,就是在設定這個) 駝峰式的寫法 變數名稱 變數類型不需特別表明,可以用名稱去讓人聯想型別,例: BOOL isEditable; NSString * accountName; NSMutableArray * mailBoxes; UIImage * previewPaneImage; NSDictionary * messageDict; 方法名稱:可以清楚表明意思 參數名稱:避免和ivar同名 記憶體管理(IOS沒有gc) 配置記憶體:alloc;清除記憶體:dealloc zomble:不該用到卻用到(值為nil);memory leak:已沒辦法存取卻未把記憶體清掉 使用arc比較容易發生zomble,不用arc則容易發生memory leak。 若是有一段程式碼之中會用到大量的記憶體,則可以用@autoreleasepoll{…}包起來 缺點:速度會慢一些 優點:記憶體較好(在ios裡面,記憶體較重要) strong與weak的差別:變數的宣告值strong代表這個變數會增加retain的值,而weak則不會。 weak比較像依賴的關係,當今天主要strong的變數被刪除了,weak裡的值也會變為空值。…
-
上課筆記(三) – Operation、Delegation、基本類別介紹
Continue Reading…: 上課筆記(三) – Operation、Delegation、基本類別介紹Operation 取得class資料的相關變數 Class me = [obj class]; NSString * name = [obj className]; //判斷是否繼承於UIView if( [ obj isKindOfClass:[UIView class] ] ){ NSLog(@"obj繼承於UIView"); } //判斷是否是這個class的實體 if( [ obj isMemberOfClass: [NSString class] ] ){ NSLog(@"obj的類別是NSString"); } 確認兩個變數指向同一個記憶體位置 if(obj1 == obj2) {} 確認兩個實體的值相同…
Search
About Me
17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。
如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!