UI 設計界面不像運營視覺的頁面，它沒有那么多強視覺、花里胡哨的東西，我們大多時候需要在排版上發力，整合組織信息，只為了能更好地服務用戶使用頁面中的功能。

當然在頁面上還可以增加更多的設計細節，那怎么去豐富這些特別的設計細節呢？這里就跟大家分享三個方法，分別是異形、破界、分割。

一、異形

將常見的圖形做一些變換，讓它的形狀不常規，是豐富頁面設計細節快速又有效的方式。

這里分享四種異形卡片的做法：

1. 圖形缺角：往往在矩形卡片右上角挖掉任意圖形，并且在挖掉后，再填充上其他修飾物，來讓排版更平衡

上面的兩種挖出形狀后，填上的都是裝飾物，當然我們也可以填主體物，這種方式就經常可見在 會員卡片、彈窗上

2. 缺角不一：其實就是矩形卡片的四個角圓角大小不一，呈現出來的效果，去豐富設計細節

3. 斜切角：將矩形卡片斜切，變成平行四邊形

可以是整張頁面這樣被斜切開

也可以是單個卡片做成斜切的

或者是三張斜切并排的

4. 品牌形狀：將品牌 logo 或者吉祥物形狀融入到卡片的設計中，以此來達到異形、設計感的目的

二、破界

在頁面中我們往往會用卡片或者色塊將頁面劃分出不同的界域。

一個界域一塊信息，但是會有一些物體突破自己原本所在的界域，到別人的地盤去，這種現象就是破界。

1. 物體破界：我們先來看一個非常常見的破界方式，物體破界，這種方式會使得破界的物體特別突出、強調

這種破界方式也經常用在做彈窗的視覺上

當然物體破界，并不只出現在卡片的上半部，大家可以根據自己物體在卡片上的擺放位置，想想看它是否可以破界而出

2. 圖形破界：在卡片的基礎上再疊一個圖形破出，這個圖形能夠幫助你承載一些信息內容，豐富設計形式。

當然你也可以不止用 1 次破界，用 2 次以上的破界去增加更多的設計感。

相信大家已經了解了兩種破界的形式，在之后的設計中更要活用起來，跟死板的設計說拜拜！

三、分割

大家在做標簽的時候會怎么做呢？比如下方這個商品，需要將「3 折，立省 30 元」這段文字做成標簽

最直接的就是這種方式，誰都能想到：

但是僅一層標簽，在設計形式上有些單調，所以我們不妨對標簽進行分割

其實到這一步標簽基本上就做好了，也沒啥大問題，但是如果想要把細節做得更好一些，我們可以把中間的分割做一些差異。

比如說分割線做成閃電的形狀：

不只是標簽，活學活用，這種分割方式也可以用在按鈕處

還有一種標簽的分割樣式也是比較常見的

大家也可以基于產品風格、調性，自己想一些分割方式，比如之前做的像素風格頁面，在分割這塊就聯想到用像素塊進行表達。

總之，分割設計樣式是多種多樣的，大家可以多多嘗試多多聯想！

總結

以上總結的這些豐富設計細節的方法——異形、破界、分割，既可以單個使用，也可以組合使用

以上就是本次 UI 界面的設計小細節分享，我攢了好久的參考圖，希望能幫大家解決一些設計不夠豐富的問題。

歡迎關注作者的微信公眾號：「菜心設計鋪」