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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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