最近設計項目中涉及到「瓷片區(qū)」，于是和一些設計伙伴請教了解了一下，在此記錄總結一下，也希望可以對大家有些小小的幫助。

什么是app瓷片區(qū)

聽說：美團內部將首頁的運營廣告位模塊稱為瓷片位，其可以根據需求變動靈活調整，就像瓷片一樣靈活適用，顧名思義，瓷片區(qū)也就被叫開來了。

根據下圖我們可以了解到，瓷片區(qū)在產品中的應用。

瓷片區(qū)的功能

瓷片區(qū)作為與 Banner、金剛區(qū)并行的三大運營板塊，都負責著導流的功能。瓷片區(qū)較兩者更便于在頁面中進行布局，可以靈活復用。

在電商產品中，導流指的是通過某種形式，增加對商品/功能的曝光，使自己的用戶群去購買或了解感興趣的商品/功能。導流簡化流程：導流入口  落地頁  轉化率，設計師需要通過在這個流程中收集的數據，進行復盤反思優(yōu)化設計。

瓷片區(qū)常見類型

瓷片區(qū)屬于運營區(qū)，在頁面中通常位于用戶容易點擊的區(qū)域。通常為圖文混排，常見的類型有：實物類、插畫類。

1. 實物類

應用場景：需要對商品/服務有高曝光度的產品類型，如外賣、電商、旅游類等，通過對自有商品/服務的直觀展示，達到吸引用戶的目的。

優(yōu)點：識別度高、適配千人千面、元素更換靈活；

缺點：圖片質量要求較高；

2. 插畫類

應用場景：常見于金融類、虛擬類產品。

優(yōu)點：高度概括主題的圖形，通過插畫增加產品的調性和趣味性；

缺點：針對性比較強，難復用，花費時間；

設計關鍵點

1. 排版

瓷片區(qū)常見排版方式：左右排版、上下排版和對角線排版。設計師可以將三種排版方式組合設計，使頁面更具有節(jié)奏感；

• 左右排版：圖標/插畫左右布局，一行展示 1 塊或 2 塊，適用各種場景；

• 上下排版：圖文上下結構布局，一行至少展示 3 塊瓷片，適用于功能入口；

• 對角線排版：圖文呈對角線布局，一行顯示兩塊瓷片，適用于文字信息較多的需求；

2. 圖片

對于電商或商城類產品來說，配圖的好壞是影響用戶點擊率最直觀的元素；設計瓷片區(qū)時需要考慮全局配圖和局部配圖的情況：

• 配圖質量：高質量、符合產品調性、背景簡潔、摳圖邊緣一定要干凈；

• 配圖規(guī)范：統(tǒng)一圖片或插圖的尺寸和視覺面積；保證圖片之間的差異性；提煉關鍵文案信息。

3. 文字

• 主副標題：通過大小、粗細和顏色進行區(qū)分，顏色不宜過多；

• 標簽文字：結合需求屬性和定位，處理不同層面的標簽；

4. 背景

瓷片區(qū)背景常見類型：白色/淺色背景、漸變色背景；設計師根據產品調性及業(yè)務需求對背景進行靈活使用，但要遵守以下原則：

• 層次清晰，是否對最重要的元素有所突出；

• 易讀，保證文本及商品符合所有設備的易讀標準；

• 視覺表現(xiàn)力，強化品牌風格；

  
  

小結

文中從四點對瓷片區(qū)進行了一個概括性的了解總結，設計要點的話在排版設計中都是需要注意的基礎知識所以未多加贅述，以此為自己在項目中遇到的知識點做一次沉淀。

作者微信公眾號：木子的小千世界