189 6508 9135
前言：本文主要講解關(guān)于瓷片區(qū)的一些認(rèn)知，以及設(shè)計(jì)手法。
導(dǎo)讀：什么是瓷片區(qū)？瓷片區(qū)有哪些類型？瓷片區(qū)有哪些適用場景？如何設(shè)計(jì)好瓷片區(qū)？本文主要為大家解決這些問題。
一、什么是瓷片區(qū)
1.瓷片區(qū)是以圖片加文字方式呈現(xiàn)的運(yùn)營位
視覺外觀看上去就像一塊塊瓷片貼在版面上，故名“瓷片區(qū)”。
例如淘寶下方的運(yùn)營位，美團(tuán)外賣APP的優(yōu)惠專區(qū)，小米有品APP的有品推薦。
這類模塊的排列方式，和家里地面鋪的瓷磚很像，所以后文暫且將這一模塊統(tǒng)稱為瓷片區(qū)
二、瓷片區(qū)有哪些適用場景
運(yùn)營內(nèi)容區(qū)，適合于：平臺(tái)、電商、泛娛樂、屬于流量的入口，不適合用于工具類產(chǎn)品。
瓷片區(qū)位于用戶最容易點(diǎn)擊的區(qū)域，通過各類促銷模式，具有較高的轉(zhuǎn)化率，并能提升整個(gè)產(chǎn)品留存。
三、瓷片區(qū)有哪些類型
1.圖片實(shí)物類
? 優(yōu)點(diǎn)：圖片識(shí)別度高，代入感強(qiáng)，可復(fù)用，提高效率
? 缺點(diǎn)：對圖片素材要求高
? 使用場景：對實(shí)物圖需求較大的產(chǎn)品類型，外賣、家具、服裝等產(chǎn)品使用較多
2.插圖類
? 優(yōu)點(diǎn)：可以高度概括瓷片區(qū)的運(yùn)營含義，風(fēng)格可控
? 缺點(diǎn)：一對一，難以復(fù)用，時(shí)間成本較高
? 使用場景：金融，教育等產(chǎn)品，對風(fēng)格有明顯要求
? 注意點(diǎn)：繪制時(shí)注意對關(guān)鍵信息的提煉以及識(shí)別度
3.千人千面
? 優(yōu)點(diǎn)：根據(jù)用戶反饋數(shù)據(jù)高頻輸出內(nèi)容，符合用戶心智，轉(zhuǎn)化率更高
? 缺點(diǎn)：通過大數(shù)據(jù)反饋內(nèi)容，具有較高的技術(shù)壁壘。
? 使用場景：電商類、大數(shù)據(jù)、私人訂制類。
四、如何設(shè)計(jì)好瓷片區(qū)
1.圖片細(xì)節(jié)點(diǎn)
? 注意圖片的素材質(zhì)量
? 圖片色調(diào)明亮，飽和度高
? 配圖簡潔，呼吸感強(qiáng)，摳圖干凈
? 統(tǒng)一圖片高度于視覺大小
2.插圖細(xì)節(jié)點(diǎn)
? 風(fēng)格保持一致
? 視覺大小保持一致
? 形式簡潔，不影響整體風(fēng)格
? 概括性強(qiáng)，圖文表意一致
3.文字
非標(biāo)簽類文字：
主副文案通過大小、粗細(xì)和顏色進(jìn)行區(qū)分，不同業(yè)務(wù)板塊可采用不同顏色，但顏色不要超過4種；主文案字號建議在30~34px，副文案字號建議在24~26px；圖文排版方式有對角線分布、上下分布和左右分布。
標(biāo)簽類文字：
常用于旅游類、外賣類產(chǎn)品，標(biāo)簽分為主副文案兩個(gè)板塊，標(biāo)簽分為彩色標(biāo)簽和黑色透明標(biāo)簽，結(jié)合業(yè)務(wù)屬性和想突出的文案，分別對應(yīng)不同的標(biāo)簽；文案一般位于瓷片區(qū)域的左上角和左邊垂直居中的位置。
4.背景
白色背景：
畫面整潔干凈
純色背景：
背景色盡可能跟圖片或插圖的主色調(diào)鄰近
漸變背景：
使用插圖主色調(diào)設(shè)計(jì)
5.排版
對角線排版：
文字和圖片呈對角線上布局。一行顯示兩到三塊瓷片，單個(gè)瓷片形狀接近方形，此種文字的信息較多
左右排版：
一般在配圖為插畫、圖標(biāo)時(shí)候適用。此時(shí)單個(gè)瓷片形狀狹長，一行顯示一塊或兩塊瓷片
上下排版：
采用上文下圖的形式，一般在界面的功能入口較多時(shí)適用。此時(shí)單個(gè)瓷片形狀瘦高，一行顯示不少于3塊瓷片。
為了使版面更加豐富，建議是適當(dāng)場合，盡量選擇兩種排版組合使用，這樣能夠在排版上有所變化，提升設(shè)計(jì)美感的同時(shí)能夠?qū)π枨蟮膬?yōu)先級做出變化，做出更符合產(chǎn)品需求的設(shè)計(jì)。
總結(jié)
對關(guān)于瓷片區(qū)的設(shè)計(jì)要點(diǎn)：
1.排版——左右、上下、對角線(兩種排版，突出優(yōu)先級)
2.文字——層級拉開；突出重點(diǎn)(大小、顏色、字重等形式區(qū)分)
3.配圖——精致；大小、整體統(tǒng)一
4.插圖——表意一致；大小、風(fēng)格統(tǒng)一
5.背景——淡色取色畫板范圍左上角；漸變明色明度或者明度色相產(chǎn)生變化。