全面解析瓷片區(qū)的設計要點

　　很多同學不知道瓷片區(qū)是什么，于是和一些設計老師請教了解了一下，發(fā)現(xiàn)一些新的知識點，今天AAA教育郭老師就針對瓷片區(qū)的設計要點進行簡單的說明。
 

　　1、什么是瓷片區(qū)?
 

　　瓷片區(qū)就是板塊拼接在一起形成的運營位，視覺上像一塊塊瓷片貼在版面上，所以叫做”瓷片區(qū)“。通過各類促銷模式，具有較高的轉化率，往往能夠提升整個產(chǎn)品的留存率。如果你對上面的概念還是不太理解，請看下圖：

 

　　2、瓷片區(qū)常見類型有哪些?
 

　　瓷片區(qū)屬于運營內(nèi)容區(qū)，是流量導流出口，適用于平臺、電商、金融、娛樂類等產(chǎn)品，目前常見類型有：1.產(chǎn)品實物圖片類 2.插圖類。
 

　　2.1. 產(chǎn)品實物圖片類
 

　　優(yōu)點：識別性高、視覺上更直觀、可復用、設計效率高。
 

　　缺點：對圖片素材要求較高。
 

　　適用場景：用實物圖能更直觀的表達內(nèi)容的產(chǎn)品類型，例如外賣類、旅游類、電商類、租房類等。
 

　　為何適用于這些產(chǎn)品：外賣、旅游、電商、租房等是用戶購買真實的物品，代入感強、用戶可以感知產(chǎn)品的質(zhì)感、味覺等，舉個例子：比如你看到一個色澤飽滿的雞腿實物圖片和一副雞腿插畫，是不是前者更能讓你垂涎欲滴呢，所以使用真實產(chǎn)品圖片是最有效的吸引用戶下單的方法。
 

　　2.2. 插畫類
 

　　優(yōu)點：創(chuàng)意性強、具有趣味性
 

　　缺點：含義表達不是很直接、難以復用、繪制耗
 

　　適用場景：偏概念型的產(chǎn)品類型，例如金融類、虛擬產(chǎn)品類、設計類等
 

　　為何適用于這些產(chǎn)品：金融類、虛擬產(chǎn)品、設計類這些是偏概念型的產(chǎn)品，有時候會有多個含義融合在一起，這時用插畫形式能更好的表達

 

　　3、瓷片區(qū)設計要點
 

　　說了這么多，是不是對怎么設計瓷片區(qū)有了更多的期待，下面我們一起來看看：
 

　　通過拆解可以總結出瓷片區(qū)由：圖片/插圖+文字+背景+點綴組成，下面我們來一一分析各自的設計要點。

 

　　3.1實物圖片
 

　　(1)全景配圖：即配圖占據(jù)整個瓷片區(qū)域，適用于外賣類、旅游類等產(chǎn)品。
 

　　配圖要求：圖片素材要求清晰度高，色彩飽和度高;一般主體占1/2，背景盡量簡潔，以突出主體內(nèi)容為主。

 

　　(2)局部配圖：即配圖占據(jù)部分瓷片區(qū)域，適用于大多數(shù)產(chǎn)品。
 

　　配圖要求：圖片素材要求摳圖干凈、飽和度高;

 

　　(3)摳圖組合：適用于餐飲類、平臺類產(chǎn)品。通過不同素材摳圖重新組合，利用多樣產(chǎn)品把興趣最大化，以高價商品帶動低價商品。
 

　　3.2.插圖
 

　　插圖繪制要注意提煉關鍵文案信息，通過關鍵詞發(fā)散繪制關鍵性元素來表達商品的核心意思。
 

　　3.3、文字
 

　　非標簽類文字：
 

　　主副文案通過大小、粗細和顏色進行區(qū)分，主文案字號建議在30~34px，副文案字號建議在24~26px;不同內(nèi)容板塊也可采用不同顏色，但顏色一般不要超過4種;在使用顏色的時候，可以匹配業(yè)務特點進行色彩選擇，如科技使用藍色，福利使用紅色等。
 

　　標簽類文字：
 

　　標簽也可分為主副文案兩個板塊， 標簽底部顏色選取可以使用圖片的鄰近色，或者根據(jù)業(yè)務屬性使用情緒板取色。標簽一般位于瓷片區(qū)域的左上角或左邊居中的位置。
 

　　3.4、背景
 

　　背景可分為白色背景、淺灰色背景、淺純色背景、漸變色背景這幾種，下面是背景顏色應用場景。
 

　　(1) 白色背景：

 

　　(2) 淺灰色背景：

 

　　(3) 淺彩色背景：背景色通常跟實物圖片或插圖的主色調(diào)鄰近

 

　　(4) 漸變色背景：

 

　　a淺色系漸變：選定一種顏色，向白色過渡,顏色飽和度較低、明度較高。
 

　　b同色系漸變：同一種顏色，變化飽和度。
 

　　c不同色系漸變：色相+飽和度變化
 

　　3.5、點綴
 

　　點綴可以豐富視覺效果;常用點綴元素有波浪線、圓形等幾何圖形;樹葉、絲帶等烘托氣氛的元素。
 

　　3.6.圖文排版方式
 

　　常見有四種排版方式：上下排版、左右排版、對角線排版、組合型排版：如對角線和上下排版組合、全景配圖和局部配圖組合等。
 

　　總結
 

　　文中對瓷片區(qū)進行了一個概括性的了解總結，設計要點的話在排版設計中都是需要注意的基礎知識所以未多加贅述。因此，您現(xiàn)在已經(jīng)了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。