幾何

最近設計項目中涉及到”瓷片區“,我們在UI設計中會經常用到“瓷片區”,于是和一些設計伙伴請教了解了一下,在此記錄總結,也希望通過本篇總結,可以對大家有些小小的幫助。

 

1. 什么是瓷片區

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

根據下圖我們可以了解到,瓷片區在產品中的應用。

 

2. 瓷片區的功能

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

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

 

3. 瓷片區常見類型

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

3.1 實物類

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

優點:識別度高、適配千人千面、元素更換靈活;

缺點:圖片質量要求較高;

 

3.2 插畫類

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

優點:高度概括主題的圖形,通過插畫增加產品的調性和趣味性;

缺點:針對性比較強,難復用,花費時間;

 

4. 設計關鍵點

4.1 排版

瓷片區常見排版方式:左右排版、上下排版和對角線排版。設計師可以將三種排版方式組合設計,使頁面更具有節奏感;

  • 左右排版:圖標/插畫左右布局,一行展示 1 塊或 2 塊,適用各種場景;
  • 上下排版:圖文上下結構布局,一行至少展示 3 塊瓷片,適用于功能入口;
  • 對角線排版:圖文呈對角線布局,一行顯示兩塊瓷片,適用于文字信息較多的需求;

 

4.2 圖片

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

  • 配圖質量:高質量、符合產品調性、背景簡潔、摳圖邊緣一定要干凈;
  • 配圖規范:統一圖片或插圖的尺寸和視覺面積;保證圖片之間的差異性;提煉關鍵文案信息。

 

4.3 文字

  • 主副標題:通過大小、粗細和顏色進行區分,顏色不宜過多;
  • 標簽文字:結合需求屬性和定位,處理不同層面的標簽;

 

4.4 背景

瓷片區背景常見類型:白色/淺色背景、漸變色背景;設計師根據產品調性及業務需求對背景進行靈活使用,但要遵守以下原則:

  • 層次清晰,是否對最重要的元素有所突出;
  • 易讀,保證文本及商品符合所有設備的易讀標準;
  • 視覺表現力,強化品牌風格;

 

小結

文中從四點對瓷片區進行了一個概括性的了解總結,設計要點的話在排版設計中都是需要注意的基礎知識所以未多加贅述,以此為自己在項目中遇到的知識點做一次沉淀,第二篇了,繼續努力吧~

 

原文地址:木子的小千世界(公眾號)

作者:擼貓被抓的木子

轉載請注明:學UI網 » 關于瓷片區的筆記

登錄收藏
 
你可能喜歡的:
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
設計驅動案例-如何優化金融產品購買體驗?設計驅動案例-如何優化金融產品購買體驗?
Material Design Gestures 手勢Material Design Gestures 手勢
設計沉思錄丨如何利用場景化設計提升用戶決策效率設計沉思錄丨如何利用場景化設計提升用戶決策效率
用灰色文本字段來拯救你的注冊表單設計用灰色文本字段來拯救你的注冊表單設計
1套流程,帶你看遍1000萬個產品設計的從0到11套流程,帶你看遍1000萬個產品設計的從0到1
聊聊加載等待的那些事之“進度指示器“(落地篇)聊聊加載等待的那些事之“進度指示器“(落地篇)
?
街机捕鱼城金库券