iPhone 更新的硬件提升對我們 UI 來說聊勝于無，iOS 15 更新步子也很小，感知不明顯。但是 iOS 15 的設(shè)計規(guī)范，卻一聲不響的迎來一波重大更新！
更新的內(nèi)容不是我們前面分享過的 iOS 文字規(guī)范，而是規(guī)范附帶的組件庫內(nèi)容。首先官網(wǎng)的資源頁面就迎來了一波更新，終于從混亂不堪的排版改成 “人看” 的信息架構(gòu)了。
在規(guī)范組件庫內(nèi)，可以通過查看 Design Templates + Components + Guides 這個文件的 UI Components – iPhone 頁面，來檢索 iPhone 新的官方素材。
新版和老版 iOS 13 的對比，多了一些奇怪的（不痛不癢的）更新，你可以通過打開兩個版本查看相同的模塊來認(rèn)識它們的區(qū)別。
真正的重頭戲，在于這次更新中蘋果終于更新了默認(rèn)的畫布尺寸。由原來的 375 變更成了 390。
390 這個寬是 12、12pro、13、13pro 的標(biāo)準(zhǔn)尺寸，而 375 是從 iPhone6 時代開始，一直延續(xù)到今天 iPhone mini 的屏幕寬度。
在軟件行業(yè)中，為了滿足適配需要的設(shè)計稿，通常從中間尺寸開始設(shè)計，然后向兩側(cè)兼容。所以長期以來 375 款的設(shè)備一直是中間尺寸的設(shè)備，包括 iphone6、X、mini。
但隨著 13 系列發(fā)布，iPhone8 下架，SE 無人問津，mini 成為 iPhone 主流機(jī)型中的的最小尺寸了。
并且，12、12pro、13、13pro 做為中間尺寸和構(gòu)成了目前市面占比最高的設(shè)備。自然而然這個尺寸就成為了蘋果官方的選擇。
對我們來說，也就是未來創(chuàng)建設(shè)計稿，可以使用 390 * 844，忘掉 375 * 812 吧。
雖然在實(shí)際項(xiàng)目里變更尺寸不是一夜之間就能完成的，但這是遲早要面對的問題，所以，如何完成老版本界面的適配？
給大家一個簡單的思路，那就在下一個版本逐步替換設(shè)計元素。先對版本涉及到的界面創(chuàng)建 390 的畫布完成設(shè)計，再逐一修改涉及到具體寬度的組件元素。
如果對手機(jī)元素尺寸的適配沒有太清晰的認(rèn)識，可以看看下面的幾個簡單的示例：
這些都是最簡單的適配原則，終于畫布奇數(shù)變偶數(shù)，雙列設(shè)計的間距可以使用偶數(shù)了。
如果你們用 Figma 做界面，使用了 Frame 和 Auto layauto 功能，那么適配就非常的輕松，把原設(shè)計畫布拉寬就完事了，最多再變更下雙列設(shè)計的間距。
但如果你是用 Sketch 或 XD 甚至是 PS 的話，那就只能老老實(shí)實(shí)用我上面提到的辦法手動更新了。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。