APP瓷片區設計基礎知識

一、什么是瓷片區？

瓷片區，顧名思義就是指像裝修中的瓷片一樣，多個整齊的貼在墻面上，給人整潔統一的感覺的矩形塊，這是從字面意思去理解，而瓷片區的準確定義是：瓷片區是指視覺整齊、布局靈活、方便更換的模塊化運營板塊。

APP瓷片區設計

在這個定義中，視覺整齊、布局靈活凸顯了瓷片區在布局多變的情況下依然能保證頁面的整潔，方便更換的運營化板塊說明了瓷片區作為運營板塊，隨時方便更換且可復用性高。這就是為何眾多業務復雜的APP（如電商、旅游）會大量使用瓷片區。
瓷片區作為與Banner、金剛區并行的三大運營板塊，都承接著業務導流的作用，但相對Banner與金剛區，瓷片區的布局靈活使它在頁面中能夠得到大量的復用。
二、瓷片區的類型
瓷片區大致可以分成兩種類型，一種是實物類瓷片區，一種是插畫類瓷片區。
1.實物類瓷片區
實物類瓷片區主要以實物配圖為主，多用在電商、旅游、生活服務類產品中，使用真實的圖片能夠直觀反映該瓷片區的產品吸引用戶點擊。如下圖：

APP瓷片區設計

優點：實物圖片更加直觀，能吸引用戶點擊，可以做到千人千面，比起插畫類瓷片繪制速度更快；
缺點：對實物圖片的質量要求比較高，劣質圖片會拉低整體頁面效果；
使用場景：多用在電商、旅游、生活服務類等可以具象化的產品，以及時間緊的項目。
2.插畫類瓷片區
插畫類瓷片主要以插畫配圖為主，通過對運營文案的思考繪制定制化的插畫，比起實物類瓷片區更有趣味性，能夠烘托氛圍。如下圖：

APP瓷片區設計

優點：插畫配圖更富有趣味性，能夠烘托情感氛圍，并且可以定制化的繪制插畫；
缺點：插畫繪制周期更長，沒有實物圖直觀；
使用場景：多用在瓷片區運營業務抽象無實物圖可選（如金融類產品），瓷片區內文案抽象，以及要烘托情感氛圍的場景中。
三、瓷片區的排版樣式
瓷片區的排版樣式要根據整體瓷片的布局合理選擇，常見的有三種排版樣式，分別是左右排版、上下排版、對角排版。
1.左右排版
瓷片區左右排版將文字與配圖左右分布，一般文字居左圖片居右，適合一行僅顯示兩塊瓷片等較狹長的瓷片區。

APP瓷片區設計

2.上下排版
上下排版的瓷片區將文字置于上方，圖片置于下方，適合一行顯示3個及以上的豎狀類瓷片，常見于電商類產品種。

APP瓷片區設計

3.對角排版

對角排版的瓷片區中，文字一般居于瓷片左上方，圖片居于瓷片右下方，呈對角分布，適合用在接近正方形的瓷片矩形中。

APP瓷片區設計

瓷片區的布局是非常靈活的，為了滿足不同布局的瓷片組合，在排版樣式的選擇中可以采用多種排版混合，豐富視覺的多樣性，同時可以突出主要的功能。如下圖：

APP瓷片區設計

圖中“生鮮半價日”與“荔枝一分錢”采用對角排版，與下面的四種瓷片業務入口的上下排版拉開區別，更加明顯，是京東到家近期主推售賣的產品。
四、瓷片區的設計要點
在對瓷片區進行設計時，除了最開始選擇好合理的排版，在文字、配圖與背景的設計中也有一些需要注意的細節。接下來我主要介紹文字的層級、配圖的優化、背景色與點綴這三個設計要點。
1.文字的層級
瓷片區承接著運營的作用，相比圖片，文字更能反應該瓷片的主要功能，優秀的文字層級能夠幫助用戶迅速理解瓷片功能。

要做好文字的層級，就是要做好文字的對比，可以從文字大小、顏色、粗細、字體四個方面考慮。在2倍率作圖下主要文案與次要文案至少相差4個像素，而標簽文字還會為其增加底部顏色塊或改變顏色以此與輔助文字拉開區別。

APP瓷片區設計

2.配圖的優化
前文講了瓷片區主要分為實物類和插畫類，這里的配圖主要介紹實物類配圖的優化細節，插畫類的配圖需要設計師有一定的運營設計能力。
1）圖片質量高

在選擇實物類圖片時，一定要采用像素較高的圖片。

APP瓷片區設計

像電商、外賣類的產品一般會選擇摳圖的產品圖片，在對圖片進行處理時，要保證摳圖背景干凈無毛邊，還可以調整它的明暗關系且要與背景色的光源方向保持一致，最后還可為其加上一層投影使圖片整體更富有空間感。在同一塊瓷片區中選擇產品圖片時也可以采用多種產品搭配提供更多的選擇，使用戶更有點擊的欲望。

APP瓷片區設計

像旅游酒店類的實物圖一般都是采用的整張圖片平鋪在瓷片區中即是圖片也是背景，由于圖片顏色的不確定性，為了保證文字的可識別性，一般會在文字下方加上一層底色或是局部漸變遮罩，如下圖：

APP瓷片區設計

2）圖片視覺大小統一
除了要選擇一個高質量的圖片外，針對摳圖的產品圖片，我們還要保證圖片在相同大小瓷片中視覺大小統一，不同大小瓷片中視覺占比統一。如下圖：

APP瓷片區設計

3.背景色的選擇
瓷片區的背景色多采用低飽和、高明度的淺色，電商產品多數還會直接使用灰白色系，盡量弱化背景突出配圖與文案本身。我們在繪制瓷片區時，可以選擇與圖片色同類、鄰近色相的淺色或是對比色相的淺色。

APP瓷片區設計

在一些特殊節日時，為了烘托頁面整體的氛圍，瓷片區的顏色會選擇符合整體氛圍的高飽和漸變色，如下圖：

APP瓷片區設計

豌豆公主的520特賣會，首頁整體采用了高飽和粉色系，瓷片區的背景色也是采用了粉色的微漸變及加入一些幾何點綴來烘托整體的氛圍。
（鄭重聲明：本文版權歸原作者海鹽社人類君所有，轉載文章僅為傳播更多信息之目的，如有侵權，請聯系我們刪除；如作者信息標記有誤，請聯系我們修改。）

當前文章：APP瓷片區設計基礎知識
標題URL：http://m.kartarina.com/news/116901.html

成都網站建設公司_創新互聯，為您提供微信小程序、小程序開發、外貿建站、做網站、標簽優化、品牌網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯