Apple 是如何設計與裁切 App Icon 的圓角弧度？

在 iOS、iPadOS 和 macOS 上，App 都有明顯但又不會太過頭的圓角，而 Apple 又是如何對這些正方形的 Icon 做圓角裁切？

不同的 Apple 平台有不同的 App Icon 樣式

如果我們去看 Apple 的 Design Guidelines 對 App Icon 的設計介紹，會先知道，不同的 Apple 平台有不同的 App Icon 樣式：在 iOS、iPadOS 和 macOS 上，App 是正方帶圓弧的，而 macOS 會多了點立體感；在 tvOS 上，App 是長方帶圓弧；而在 watchOS 和 visionOS 上，App 則是正圓形的。

iOS 與 macOS 的 App Icon 設計差異

Xcode 只幫 iOS 的 App Icon 裁切圓角

一般在開發 iOS App 的時候，我們可以直接餵給 Xcode 正方形的 App Icon 圖片，而 App 在 iPhone 上的各個地方，都會被自動的切出圓角。但如果是 macOS App 的話，如果我們直接給 Xcode 正方形的 App Icon 圖片，那 Mac 上的 App 就都會直接呈現歧異的直角方形。

為什麼 Xcode 不幫 macOS 的 App Icon 切出圓角？

Xcode 不幫 macOS 的 App Icon 切出圓角的原因其實很簡單！在 Apple 對 App Icon 的設計 Guidelines 中就有提到：macOS App 的 Icon 是可以設計成 3D 且超出原正方形的範圍來塑造出一種實體物件感的，最直接的例子就是：「文字編輯」與「Xcode」了。

在這樣的情境下，macOS 的 App Icon 設計是可以很多樣且不受侷限的！所以 Xcode 也無法預先知道我們會設計成什麼樣子，也就不幫我們切圓角了。想想如果 Xcode 的 App Icon 被切圓角的話，那鐵鎚的部分就會被削一塊了。

Apple 是如何裁切 App 的圓角弧度？

Apple 在 App 的方形圓角上，設計地看起來舒服但又不會過多。但以上面提到的，如果我們有個正方形的圖片，想當作 macOS App 的 Icon，或是在網頁上想要放上 App Icon，要怎麼自己切圓角呢？

這個 App Icon 的圓角弧度可以從 App Store 的網頁中看出來，我們隨便找一個 App 並去翻它的網頁原始碼，會找到 Apple 對 App Icon 的圖片用了 CSS 的 border-radius 來設定圓角。

border-radius: 22.5%; // 網頁元素的邊線弧度

而它的值是「22.5%」，這個意思是弧度為長寬的百分之 22.5，所以如果我們的圖片是 2880×2880 的話，那弧度就要是 2880×22.5%＝648（px）。

感受為何 Apple 會使用 22.5% 這個弧度

這裡我們再幫結束弧度的地方加上四條輔助線：

在各個邊上，有弧度的地方佔比為 22.5%×2＝45%，而直線的佔比就是 1−45%＝55%，Apple 這樣的切法，讓四角弧度夠多，但又不超過直線的佔比，給 App Icon 一種圓潤又保有方形的感覺。