全面解析瓷片區(qū)的設(shè)計(jì)要點(diǎn)

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

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

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

 

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

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

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

　　優(yōu)點(diǎn)：識別性高、視覺上更直觀、可復(fù)用、設(shè)計(jì)效率高。
 

　　缺點(diǎn)：對圖片素材要求較高。
 

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

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

　　2.2. 插畫類
 

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

　　缺點(diǎn)：含義表達(dá)不是很直接、難以復(fù)用、繪制耗
 

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

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

 

　　3、瓷片區(qū)設(shè)計(jì)要點(diǎn)
 

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

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

 

　　3.1實(shí)物圖片
 

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

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

 

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

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

 

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

　　3.2.插圖
 

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

　　3.3、文字
 

　　非標(biāo)簽類文字：
 

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

　　標(biāo)簽類文字：
 

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

　　3.4、背景
 

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

　　(1) 白色背景：

 

　　(2) 淺灰色背景：

 

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

 

　　(4) 漸變色背景：

 

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

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

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

　　3.5、點(diǎn)綴
 

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

　　3.6.圖文排版方式
 

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

　　總結(jié)
 

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