Skip to Content
部落格Squircle 不是圓角

Squircle 不是圓角

把圓角滑條拉滿,看起來仍像一張貼紙。

iOS 主螢幕吃的是連續曲率(超橢圓),不是 CSS 的 border-radius。2025-12-10 的版本把 Squircle 和漸變編輯放進同一條路徑。

Zapicon · Squircle
圆角矩形
Squircle

左边是普通圆角矩形。右边是连续曲率。iOS 主屏幕认后者。

什麼時候開

做 iOS 或要跟 iOS 放在一起的營銷圖:開 Squircle,留內邊距,底不要透明。Apple 會鋪滿遮罩。

做 Android:別依賴 Squircle 當最終形狀。系統還要套自適應遮罩。前景往裡收。見 設計規範。

做 Windows / Web:方形或透明底更常見。Squircle 當預覽可以,當唯一真源不行。

漸變底在這一版一起好用了。兩色加角度夠大多數品牌。第三色用主題預設,見 二十五套預設。

高 DPI 上預覽發糊,後來在 1.1.5 修過。若你還在舊預覽裡對畫素,更新客戶端。

不要做的

  • 不要用圓形當 iOS 圖示。App Store 會再套一層。
  • 不要把文字放到 Squircle 邊緣。輔助線在,見 輔助線不進包。
  • 不要給每個平臺各畫一個圓角。先出一套,再只改認不出的那一端。

下一步:調到它坐穩、先看裝置。

最後更新於