設(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/