來看看iOS 15 設(shè)計規(guī)范近年來最大的更新!
發(fā)布時間:2021-12-16 08:36 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2114

iPhone 更新的硬件提升對我們 UI 來說聊勝于無,iOS 15 更新步子也很小,感知不明顯。但是 iOS 15 設(shè)計規(guī)范,卻一聲不響的迎來一波重大更新!

更新的內(nèi)容不是我們前面分享過的 iOS 文字規(guī)范,而是規(guī)范附帶的組件庫內(nèi)容。首先官網(wǎng)的資源頁面就迎來了一波更新,終于從混亂不堪的排版改成 “人看” 的信息架構(gòu)了。

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

在規(guī)范組件庫內(nèi),可以通過查看 Design Templates + Components + Guides 這個文件的 UI Components – iPhone 頁面,來檢索 iPhone 新的官方素材。

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

新版和老版 iOS 13 的對比,多了一些奇怪的(不痛不癢的)更新,你可以通過打開兩個版本查看相同的模塊來認識它們的區(qū)別。

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

真正的重頭戲,在于這次更新中蘋果終于更新了默認的畫布尺寸。由原來的 375 變更成了 390。

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

390 這個寬是 12、12pro、13、13pro 的標(biāo)準尺寸,而 375 是從 iPhone6 時代開始,一直延續(xù)到今天 iPhone mini 的屏幕寬度。

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

在軟件行業(yè)中,為了滿足適配需要的設(shè)計稿,通常從中間尺寸開始設(shè)計,然后向兩側(cè)兼容。所以長期以來 375 款的設(shè)備一直是中間尺寸的設(shè)備,包括 iphone6、X、mini。

但隨著 13 系列發(fā)布,iPhone8 下架,SE 無人問津,mini 成為 iPhone 主流機型中的的最小尺寸了。

并且,12、12pro、13、13pro 做為中間尺寸和構(gòu)成了目前市面占比最高的設(shè)備。自然而然這個尺寸就成為了蘋果官方的選擇。

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

對我們來說,也就是未來創(chuàng)建設(shè)計稿,可以使用 390 * 844,忘掉 375 * 812 吧。

雖然在實際項目里變更尺寸不是一夜之間就能完成的,但這是遲早要面對的問題,所以,如何完成老版本界面的適配?

給大家一個簡單的思路,那就在下一個版本逐步替換設(shè)計元素。先對版本涉及到的界面創(chuàng)建 390 的畫布完成設(shè)計,再逐一修改涉及到具體寬度的組件元素。

如果對手機元素尺寸的適配沒有太清晰的認識,可以看看下面的幾個簡單的示例:

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

這些都是最簡單的適配原則,終于畫布奇數(shù)變偶數(shù),雙列設(shè)計的間距可以使用偶數(shù)了!!

如果你們用 Figma 做界面,使用了 Frame 和 Auto layauto 功能,那么適配就非常的輕松,把原設(shè)計畫布拉寬就完事了,最多再變更下雙列設(shè)計的間距。

iOS 15 設(shè)計規(guī)范近年來最大更新!來看看有哪些變化!

但如果你是用 Sketch 或 XD 甚至是 PS 的話,那就只能老老實實用我上面提到的辦法手動更新了。


零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC