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

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

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

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

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

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

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

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

三、組合拼貼式破形

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

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

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

五、破形延伸視覺(jué)，提升場(chǎng)景銜接感和空間感

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

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

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

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

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

最后

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

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

作者：DD