關(guān)于Universal App(通用應(yīng)用),您了解多少?

設(shè)計(jì)師通常是不需要寫代碼,但是為了讓產(chǎn)品更好,了解一些技術(shù)是非常有必要的。要讓產(chǎn)品有競(jìng)爭(zhēng)力,您需要與開發(fā)人員使用相同的語言進(jìn)行交流,并了解產(chǎn)品實(shí)現(xiàn)的所有技術(shù)。作者從事設(shè)計(jì)工作已經(jīng)超過5年了,大部分工作都是與移動(dòng)app有關(guān)。在工作過程中,作者注意到很多設(shè)計(jì)師不了解通用應(yīng)用Universal App),所以,我們今天將定義Universal App以及它的優(yōu)點(diǎn),然后再講解如何進(jìn)行相關(guān)的設(shè)計(jì)。

最新的WWDC 2018上展示了新的MacOS Mojave, iOS 應(yīng)用將“搬家”到 macOS 上,這一功能被稱作 Sneak Peak。蘋果將 iOS 的 UIKit 框架的一部分加入到了 macOS 的 AppKit 上,這意味著 iOS 的 App 將能夠在 macOS 環(huán)境運(yùn)行了。蘋果表示在第一階段,股票、新聞、錄影機(jī)等本屬于 iOS 的 App 就是通過 Sneak Peak 移植到到 macOS 中的。讓用戶的使用體驗(yàn)保持一致。所以,我相信,會(huì)有越來越多這樣的應(yīng)用出現(xiàn),所以Universal App將會(huì)是未來的一個(gè)趨勢(shì),設(shè)計(jì)師也要有所準(zhǔn)備。

Apple的設(shè)備包括了iPhone SE,iPhone 8和8+,iPhone X,早期型號(hào),iPad和iPad Pro等,這些設(shè)備的尺寸不同,而且使用的行為習(xí)慣也不一樣。作為設(shè)計(jì)師,都希望設(shè)計(jì)的app在這些設(shè)備上看來都很棒,特別是在iPhone和iPad,橫屏和豎屏上能夠正確的顯示。此外,ipad新增的多任務(wù)中的分割視圖模式中也是一個(gè)顯示方式。所以,一個(gè)iOS應(yīng)用將有多達(dá)300多種的顯示組合,app也需要網(wǎng)頁一樣的自適應(yīng),或者是我們這邊稱為的:通用應(yīng)用Universal App)。

什么是通用應(yīng)用?

通用應(yīng)用Universal App)是適用于多個(gè)iOS設(shè)備(例如iPad和iPhone)的單個(gè)應(yīng)用。

通用應(yīng)用的優(yōu)點(diǎn)

讓我們從用戶,設(shè)計(jì)人員和開發(fā)人員的角度考慮創(chuàng)建通用應(yīng)用的好處。

1,開發(fā)人員:最可能的好處是開發(fā)能夠支持所有iOS設(shè)備的應(yīng)用。在這之前,開發(fā)人員必須為iPad和iPhone創(chuàng)建不同的獨(dú)立應(yīng)用。

2,設(shè)計(jì)人員:可以方便地設(shè)計(jì)單個(gè)應(yīng)用,并在所有的iOS設(shè)備上保持一致的用戶體驗(yàn)。

3,用戶:不需要下載分別用于iPad和iPhone的應(yīng)用。用戶可以看到適用于iPad的應(yīng)用程序視圖。

分割視圖和SizeClasses(屏幕適配)

隨著市場(chǎng)上越來越多不同尺寸的設(shè)備的出現(xiàn),Apple推出了用于iOS 8的自適應(yīng)模型,用于iOS 9的分屏技術(shù)。

分屏是一種技術(shù),允許您在iPad或iPhone 8+上同時(shí)在橫向視圖中使用多個(gè)應(yīng)用。為確保應(yīng)用內(nèi)的不間斷工作,通常會(huì)創(chuàng)建自適應(yīng)布局。

應(yīng)用可以適應(yīng)16種尺寸大小。Apple建議使用屏幕適配來使應(yīng)用適應(yīng)任何大小和方向。

Sizeclasses有助于對(duì)寬度和高度進(jìn)行分類,并根據(jù)他們預(yù)測(cè)應(yīng)用的行為。Sizeclasses有三種:Compact(緊湊),Any(所有),Regular(常規(guī))。

Compact(緊湊)是一個(gè)有限的空間,Regular(常規(guī))是一個(gè)擴(kuò)展的空間。

就像下圖所示,iPad和iPad Pro在縱向和橫向視圖中具有常規(guī)寬度和高度。除iPhone 6/7/8 Plus外,iPhone還具有緊湊的寬度和高度。只有iPhone Plus在橫向視圖中具有常規(guī)寬度。

這邊有一個(gè)帶有Sizeclasses的sketch模板:(百度網(wǎng)盤下載地址? 密碼:aoab)

應(yīng)用導(dǎo)航與iOS設(shè)備視圖的相關(guān)性

如果追求完美,通用應(yīng)用的設(shè)計(jì)應(yīng)該從移動(dòng)端或者Compact(緊湊)視圖開始。而應(yīng)用在iPad上的設(shè)計(jì)則取決于導(dǎo)航欄的風(fēng)格。

Apple在設(shè)計(jì)規(guī)范中描述了幾種導(dǎo)航風(fēng)格:

1. 分級(jí)樣式(設(shè)置,郵件等)

2. 平面導(dǎo)航風(fēng)格(Apple Music和Apple Store)

3. 內(nèi)容驅(qū)動(dòng)或體驗(yàn)驅(qū)動(dòng)的導(dǎo)航(大多數(shù)游戲)

1,分級(jí)導(dǎo)航app(Hierarchical Navigation

我們以蘋果的郵件app為例來解釋分級(jí)導(dǎo)航。應(yīng)用頁面分為左側(cè)的字母列表和右側(cè)的詳細(xì)信息。

2,平面導(dǎo)航應(yīng)用(Flat Navigation)

平面導(dǎo)航應(yīng)用看起來與iPhone上的相同,只是它們適應(yīng)iPad的大小。Apple Music,App Store等。

面向內(nèi)容的應(yīng)用程序,如游戲,通常也會(huì)適應(yīng)iPad的大小,與iPhone上的大小相同。

復(fù)雜導(dǎo)航的應(yīng)用(Complex Navigation

有許多應(yīng)用程序具有更復(fù)雜的導(dǎo)航。例如 - 兩種導(dǎo)航類型的混合方式,例如平面導(dǎo)航和分級(jí)導(dǎo)航混合使用。

例如:Dropbox,結(jié)合了層次結(jié)構(gòu)和平面導(dǎo)航,同時(shí)將標(biāo)簽欄保留在屏幕的主控部分上。此結(jié)構(gòu)適用于文件系統(tǒng)。它使您能夠深入文件樹并獲取其詳細(xì)信息。

結(jié)論

要使用原生方法創(chuàng)建通用應(yīng)用,推薦以下流程:確定應(yīng)用程序的導(dǎo)航類型,然后開始為iPhone設(shè)計(jì),然后為iPad設(shè)計(jì)。如果你想創(chuàng)造一些自定義的東西,首先要問自己以下問題:為什么?我的解決方案能否證明所用的資源是合理的?

 

參考來源

自適應(yīng):https://developer.apple.com/library/content/featuredarticles/ViewControllerPGforiPhoneOS/TheAdaptiveModel.html

導(dǎo)航樣式:https://developer.apple.com/ios/human-interface-guidelines/app-architecture/navigation/

SizeClasses(屏幕適配)和核心組件:https://developer.apple.com/videos/play/wwdc2017/812/

每天更新,
全站高品質(zhì)素材免費(fèi)下載!