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