今天來講一個(gè)設(shè)計(jì)排版中常用的方法——破形設(shè)計(jì)。所謂破形設(shè)計(jì)即突破原有的形體、結(jié)構(gòu)、規(guī)則等限制，進(jìn)行新的排版設(shè)計(jì)，讓設(shè)計(jì)變得更加具有設(shè)計(jì)感。

破形設(shè)計(jì)通常會利用新的圖形、紋樣、文字、顏色等等設(shè)計(jì)元素來進(jìn)行解構(gòu)重組升級，讓原本呆板、固化的設(shè)計(jì)變得更加具有美感和差異度。

通過破形的設(shè)計(jì)，可以大大提升設(shè)計(jì)排版的設(shè)計(jì)感，通過對核心元素的強(qiáng)調(diào)、突出、銜接、切割等技法，讓原本比較常規(guī)、固化、死板的畫面變得具有活力和新鮮感。

翻了下國內(nèi)外的設(shè)計(jì)網(wǎng)站之后，給大家梳理了以下 7 種常見的破形設(shè)計(jì)手法。

更多作者干貨：

一、角色 IP 破形，強(qiáng)化游戲氛圍感

在一些游戲類的設(shè)計(jì)中，通常會結(jié)合角色 IP 來進(jìn)行破形處理，比如說下面這些案例，就是利用角色和背景底色互動的特點(diǎn)，讓選中的角色進(jìn)行了凸起設(shè)計(jì)，來強(qiáng)調(diào)當(dāng)前的角色。

二、切割破形，強(qiáng)化功能、信息的區(qū)塊感

比如下面的這些案例，就是利用 UI 結(jié)構(gòu)切割進(jìn)行破形，來突出核心的操作或者內(nèi)容，讓原本比較沉悶的方格子設(shè)計(jì)，變得更加具有設(shè)計(jì)感和幾何結(jié)構(gòu)感。

三、組合拼貼式破形

這種方式通常是在不破壞原有 UI 組合結(jié)構(gòu)的情況下進(jìn)行設(shè)計(jì)，通過背景與前景元素的錯(cuò)位來營造破形的空間感和層次感，這種類型與第一種方式一樣，都是為了強(qiáng)調(diào)主體，主要差異點(diǎn)在于表現(xiàn)的手法，第一種類型更依賴于設(shè)計(jì)的整體性，這種則更強(qiáng)調(diào)主體的突出性。

四、強(qiáng)調(diào)核心操作，騎縫破形強(qiáng)化體驗(yàn)

這種方式也比較常見，通常在底部導(dǎo)航的設(shè)計(jì)或者整個(gè)界面具備核心重要的操作時(shí)，會通過騎縫的設(shè)計(jì)方式來對原本完整的界面結(jié)構(gòu)進(jìn)行破形設(shè)計(jì)處理，強(qiáng)調(diào)了主操作之余也增加了結(jié)構(gòu)的裝飾性設(shè)計(jì)。圖片

五、破形延伸視覺，提升場景銜接感和空間感

在設(shè)計(jì)一些長網(wǎng)頁的時(shí)候，通常會在上下屏銜接的時(shí)候，利用角色或者部分視覺元素來進(jìn)行上下的破形銜接，可以通過一些簡單的元素進(jìn)行上下銜接或者空間擴(kuò)展的視覺變化，來突破原本固定化的視覺畫面感，讓整體的畫面更加具有張力，同時(shí)增加畫面閱讀的延伸感。

六、文字破形，強(qiáng)化圖文板式感

利用文字元素，通過侵入、遮擋、嵌入等方式進(jìn)行破形設(shè)計(jì)，常見于一些標(biāo)題的設(shè)計(jì)時(shí)可以利用文字的延展性來加強(qiáng)畫面的視覺延伸，提升了文字和場景的層次感和空間感。

七、錯(cuò)位破形，提升視覺穿插感

在同一組元素或者同一個(gè)模塊的元素內(nèi)，通過上下左右的視覺錯(cuò)位來打破原有的固定結(jié)構(gòu)造型，讓整體的設(shè)計(jì)變得更加具有排版的節(jié)奏感，提升畫面的視覺張力和設(shè)計(jì)感。

最后

如果你在設(shè)計(jì)排版的時(shí)候沒有特別好的靈感，不敢嘗試下破形的設(shè)計(jì)方法來提升下你的畫面張力，通過破形的設(shè)計(jì)可以讓原本呆板的設(shè)計(jì)變得更加具有生命力和設(shè)計(jì)感。

7種手法中，你認(rèn)為哪種最易出效果？留言分享你的實(shí)戰(zhàn)經(jīng)驗(yàn)！