在設計中，經常會運用到留白。使用留白的極簡主義是現在設計的大趨勢之一。巧妙的使用留白，可以讓用戶閱讀起來更為輕鬆，但是用少量的元素和大量的留白做設計還是有些難度的。今天米醋就來跟大家一起來說說版面設計中幾種留白的方法。

摳圖法

在處理圖片素材的時候，常常會碰到圖片背景雜亂，產品不夠突出的問題。在設計之前我們可以對素材先進行處理，將產品直接摳出來。利用這種方式可以找到產品的形狀，越明確的形狀越能反映用戶對產品的認知度，同時產品的獨特性也能快速明確的表達給用戶，用戶完全可以在潛意識中第一時間判斷出產品的類型和使用特性。

案例分析

見圖這是一個曲奇餅乾的網站，將主餅乾的輪廓勾出來，進行層次感的區分。在產品介紹中採用了側面的實物摳圖，體現出了曲奇餅乾最為真實的厚度，然後運用碎落的餅乾塊虛化拉開產品的層次，而深色的背景與餅乾形成強烈的對比，更是直接凸顯了實物的形狀，讓用戶一目了然，食慾大增，從而增強了用戶的購買慾望。

在很多的電商App中也經常採用摳圖法去除多餘雜亂的信息，利用產品的形狀直接體現不同商品的特點，這樣的介面讓用戶閱讀起來輕鬆而又愉悅，如圖所示。

破界法

如果需要展示的信息較多，採用分割區域的方法可以使介面顯得整齊乾淨；而當信息較少時，設計師可以大膽選用「局部出血」的方式，建立邊界，再突破它，增加層次感和衝擊力，以凸顯主題。一定要記得設定好的內容範圍是為了讓頁面顯得整體化，而不僅僅是擺放和拼圖。

案例分析

在網頁設計中，有時候會見到「破界法」這種方式，而在手機、平板等UI設計中我們也完全可以直接套用。運用圖片的穿插來區分背景和產品或形象的層次感，處理出來的介面會更加富有生命力，如圖所示。

放大需要突出的主形象，把它作為第一焦點展現在用戶眼前，有種強烈的「面對面」感受，如圖所示。

另外，破界法還可以很好地拉開背景和主體之間的層次，加強主體的衝擊力，如圖所示。

在App中，將圖片的局部突出來，能拉開信息的層次，同時也可以將需要突出的圖片信息第一時間展示給用戶，當然這樣也可以方便和引導用戶進行點擊，如圖所示。在App引導圖或展示圖中經常會運用到這種方式來體現產品的功能層級，從而讓單薄的畫面豐富起來，如圖所示。

另外，設計師還可以利用文字的破圖法來體現圖片與描述之間的層次關係，如圖所示。

在圖標設計中，我們也會經常用到破界法。在統一的圓角矩形中，將表達寓意的圖形局部超出，可以讓圖標顯得更有空間感和靈活性。採用這種方式設計出來的圖標的空間感和層次感都比較強，能使產品形象顯得更為突出，如圖所示。

在字體設計中，也經常運用到破界法，使設計出來的字體更為生動，而且在破字的過程中還能引發出不同的創意點。

在「大美青海0971」字體設計中，將數字9破出了方塊，而在「優車尚品」字體設計中，通過品字的破圖找到了車的聯想，讓整個字體設計顯得更為貼切靈動。

局部提取

有時候在我們處理完素材後發現圖片比較平常，用戶一眼就知道是什麼。這個時候，可以考慮保留局部的方式，營造殘缺美，增加時尚感。不用擔心用戶看懂，因為用戶的腦補能力是很強的。當然，要用這種方案的話還是需要先與客戶或者產品經理及時溝通，因為殘缺美不是所有人動能接受的。

案例分析

見圖這兩張圖在設計前先將圖片放大，找出產品特點，然後選擇能撐起整個頁面構圖的位置，切除不必要的圖形，讓圖片衝出畫面。通過這樣處理後，頁面顯得非常富有張力，激發了用戶想看到產品整個形象的慾望，起到產品預熱的效果。

在Apple Watch的預熱官網中，設計師將圖片放大，裁取有特點的部位進行展示，引導用戶點擊觀看產品的整體形象，激發了用戶去了解產品特性的強烈慾望，如圖所示。從版面角度上看，局部放大裁切圖片，增加了留白，同時增加了版式率，讓整個頁面顯得更加飽滿，而微距的效果會使用戶與產品更親近。