天天看點

App更新iOS7體會App更新iOS7體會管窺全豹項目評估(Scoping the Project) Updating the UI(更新UI)

扁平化的設計已經“流傳”了很久,iOS7上标準控件(UIKit)有了翻天覆地的變化:按鈕沒有邊,狀态欄透明,導航欄變半透明,alert/progress/picker完全是新的表現形式等等。當然,庫也更新了不少。印象最深的就是試圖控制器中view的尺寸是全屏:即view的尺寸是320×480,包含了頂部的status bar。這一點之是以深刻,是因為之前做過view全屏和非全屏之間的切換。在iOS7裡,全屏應該更容易實作。 Apple推出xcode5後,有可能4在不久的将來不能再釋出App。在最近這段時間需要說明的是:用xcode4打包的App在iOS7上運作除了alert/preogress等控件是iOS7的樣子,其他還是舊的形式。

Apple宣稱iOS7的設計遵循三大主題:

Deference:UI幫助使用者了解和使用内容,但不要喧賓奪主(不要讓使用者重UI而不重内容)

Clarity:文字要清晰,icon要清楚地言名答意,修飾要适當不可畫蛇添足,總之要以實作功能為先來推動設計

Depth: 視覺的層次感和現實的運動感,可以加強使用者的好感和了解

在(重)設計App前,還需要考慮:

是否使用Auto Layout

App是否需要支援iOS6

ps:Apple似乎隻為開發者“考慮”了ios6上App的更新,不知道還有很多地方的人還在為4.3,5.x的系統奮鬥! 為了更好的區分App類型,從使用控件的角度,Apple将App分成三種類型:

standard:标準型,控件全是UIKit提供的

custom:自定義型,不包含任何UIKit提供的控件

Hybrid: 混合型,UIkit和非UIkit的控件兼而有之

标準型的話,需要做的修改可能相對少一點,但是因為iOS7的變化太大了,還是會有“莫名”的問題:

nav bar帶有背景圖檔:背景圖檔是某種深色的帶漸變的效果,iOS7上直接導緻上面的按鈕(傳回鍵,添加的功能鍵)不見了,但是能點選

某個subview到statu bar後去了

這些問題通過文檔都能比較容易的解決,标準型App更新主要遇到的是:布局,對于互動方面的修改更新不會太大。 對于非标準型控件來說,我覺得最大的問題就是風格要和系統協調(說了句廢話)。這主要還是設計師費神的事情了,我和設計師溝通的結果就是認為App的配色需要好好修改,大家仁者見仁,智者見智吧。

以下就是Apple提供的cheklist。

更新icon:120×120;150×150(for ipad);注意ios7下icon不支援高亮和陰影;而且icon的圓角方式也和以前的不一樣

更新啟動畫面:頁面尺寸要包含狀态欄

要支援retina顯示

確定在透明的UI環境下,内容清楚可見,比如bar,鍵盤還有透明的狀态欄。視圖控制器的全屏特性也要注意(其實就是要考慮狀态欄消失時的布局)

重新設計自定義的bar button

準備無邊界的按鈕: 重新考慮按鈕是否還需要背景圖檔之類

檢查寫死的UI值:比如大小/位置等,嘗試通過系統的方法來确定這些值

檢查UI控件更新導緻的問題:如進度條變窄, group型table不是分組顯示的了

采用動态類型(Dynamic Type):iOS7下使用者可以調整字型大小。是以當使用了Dynamic Type,你需要讓文本響應使用者的調整(這個還沒試驗)

做好使用者會從下向上滑進入控制中心的準備:系統檢測到從下向上的手勢,就會進入控制中心,而不會把事件傳遞到App。如果手勢沒有喚起控制中心,那事件會——有些輕微的延遲,傳遞到App

重新審視陰影,漸變,貝塞爾漸變。因為iOS7中光滑和層次感是美學中心,——不再推崇拟物化的風格

可以的話,更新App來支援iOS6: 如使用Auto Layout,storyboards; 不要使用過期的API

從checklist可以看出Apple這次推陳出新的力度很大,我的感覺是以後的App最低隻要适配iOS6,但是對于天朝不知道5.x以及以前的系統使用者占比有多大了。還有,以後的開發一定要使用autolayout還有sb。在iOS7建立工程的模版裡已經沒有xib了,都是預設sb,還有都是預設ARC。

Apple所指的其實是支援ios7前的系統,隻不過他“眼裡”現在隻有ios6了。這裡列舉的方法,對于5.x的系統大部分也是使用的

App更新iOS7體會App更新iOS7體會管窺全豹項目評估(Scoping the Project) Updating the UI(更新UI)

ios7引入了Asset Catalog來更好的管理圖檔,這個會專門說。

這個以前版本更新的時候也遇到過,就是更新的時候有些API不用了,但是老系統裡還能使用,這時需要區分系統了。

}

這裡按照Apple文檔的脈絡,挑選那些我遇到的問題。

最主要變化就是view是320×480的尺寸。使用 wantsFullScreenLayout 的需要改過來,否則這個在iOS7上會有錯誤。下面分帶bar和不帶bar的情形,說一下layout需要注意的地方。

1帶有nav bar:

如果按之前的frame将y設定為0,有可能subview會被bar擋住。如果要是subview加在bar底的話可以通過設定:

self.edgesForExtendedLayout = UIRectEdgeNone;

這樣就可以了,在viewDidAppear裡你可以發現,view的frame已經去掉了bar占用的高度了。

此外,iOS7中的nav bar預設是帶透明的。但是如果選擇了非透明的bar呢?這時,viewcontroller的view會預設去掉bar和statu bar的高度。但是這時,如果想讓view的尺寸全屏又該如何呢。這時隻要設定:

self.extendedLayoutIncludesOpaqueBars = YES;

這個屬性的英文本身解釋得很到位了,就不多說了。

2不帶有nav bar:

這時statu bar無論如何都是占據掉20的高度,是以subview的布局需要計算在内。

此外,UIViewController還添加了automaticallyAdjustsScrollViewInsets, topLayoutGuide/bottomLayputGuide等屬性。有需要的可以自行測試

ios6,bar的tintcolor使用tintColor;ios7則要使用barTintColor(ios7裡bar的tintcolor用于設定BarButtonitem)。對于支援多個iOS的App,需要區分。此外,UIView新添加了tintColor的屬性。如果給window設定tintcolor:

self.window.tintColor = [UIColor redColor];

那麼,nav bar上的按鈕顔色會變成紅色。如果view沒有設定這個屬性(通常為nil),那麼預設使用父view的tintColor。對于頂層的window,tintColor是由系統定義的。需要提醒的是不能通過appearence的方式來設定tintColor。

據說使用Dynamic Type後,可以

系統會自動征對字型大小來調整字元間距和行高

可以設定帶有語義的文本,比如制訂headline,body,footer等

使用者在Settings裡修改大小,那麼文字會實時動态的響應

在iOS7中,使用者可以設定字型大小到自己認為合适的地方。如果程式想響應這種變化的話:

使用preferredFontForTextStyle:來生成字型

ios7新添了在runtime的時候,指定動作失敗的delegate。Apple舉例說明:系統本身有從下向上顯示控制中心的功能,那麼在App裡如果view也添加了這樣的手勢操作,那麼可以在delegate裡動态設定為nil進而先響應系統的。

Apple文檔中剩下的部分,詳細闡述了一些控件,control,和view的變化,文檔裡附有詳細的異同比較并有圖例。這裡就不再一一贅述了。

我個人從中學到的:

nav bar帶背景要慎重處理,自定義的bar button item需要多試幾次,需要圖檔的要好好設計

statu bar和view的全屏的處理

要用ib的話,就用storeboard

使用Auto Layout

2013-09-13

繼續閱讀