UI 設(shè)計(jì)界面不像運(yùn)營視覺的頁面，它沒有那么多強(qiáng)視覺、花里胡哨的東西，我們大多時(shí)候需要在排版上發(fā)力，整合組織信息，只為了能更好地服務(wù)用戶使用頁面中的功能。

當(dāng)然在頁面上還可以增加更多的設(shè)計(jì)細(xì)節(jié)，那怎么去豐富這些特別的設(shè)計(jì)細(xì)節(jié)呢？這里就跟大家分享三個(gè)方法，分別是異形、破界、分割。

一、異形

將常見的圖形做一些變換，讓它的形狀不常規(guī)，是豐富頁面設(shè)計(jì)細(xì)節(jié)快速又有效的方式。

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

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

上面的兩種挖出形狀后，填上的都是裝飾物，當(dāng)然我們也可以填主體物，這種方式就經(jīng)?？梢娫?會(huì)員卡片、彈窗上

2. 缺角不一：其實(shí)就是矩形卡片的四個(gè)角圓角大小不一，呈現(xiàn)出來的效果，去豐富設(shè)計(jì)細(xì)節(jié)

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

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

也可以是單個(gè)卡片做成斜切的

或者是三張斜切并排的

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

二、破界

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

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

1. 物體破界：我們先來看一個(gè)非常常見的破界方式，物體破界，這種方式會(huì)使得破界的物體特別突出、強(qiáng)調(diào)

這種破界方式也經(jīng)常用在做彈窗的視覺上

當(dāng)然物體破界，并不只出現(xiàn)在卡片的上半部，大家可以根據(jù)自己物體在卡片上的擺放位置，想想看它是否可以破界而出

2. 圖形破界：在卡片的基礎(chǔ)上再疊一個(gè)圖形破出，這個(gè)圖形能夠幫助你承載一些信息內(nèi)容，豐富設(shè)計(jì)形式。

當(dāng)然你也可以不止用 1 次破界，用 2 次以上的破界去增加更多的設(shè)計(jì)感。

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

三、分割

大家在做標(biāo)簽的時(shí)候會(huì)怎么做呢？比如下方這個(gè)商品，需要將「3 折，立省 30 元」這段文字做成標(biāo)簽

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

但是僅一層標(biāo)簽，在設(shè)計(jì)形式上有些單調(diào)，所以我們不妨對標(biāo)簽進(jìn)行分割

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

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

不只是標(biāo)簽，活學(xué)活用，這種分割方式也可以用在按鈕處

還有一種標(biāo)簽的分割樣式也是比較常見的

大家也可以基于產(chǎn)品風(fēng)格、調(diào)性，自己想一些分割方式，比如之前做的像素風(fēng)格頁面，在分割這塊就聯(lián)想到用像素塊進(jìn)行表達(dá)。

總之，分割設(shè)計(jì)樣式是多種多樣的，大家可以多多嘗試多多聯(lián)想！

總結(jié)

以上總結(jié)的這些豐富設(shè)計(jì)細(xì)節(jié)的方法——異形、破界、分割，既可以單個(gè)使用，也可以組合使用

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

作者：菜心設(shè)計(jì)鋪