APP瓷片區(qū)設(shè)計基礎(chǔ)知識

一、什么是瓷片區(qū)？

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

3.對角排版

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

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

APP瓷片區(qū)設(shè)計

2.配圖的優(yōu)化
前文講了瓷片區(qū)主要分為實物類和插畫類，這里的配圖主要介紹實物類配圖的優(yōu)化細(xì)節(jié)，插畫類的配圖需要設(shè)計師有一定的運(yùn)營設(shè)計能力。
1）圖片質(zhì)量高

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

APP瓷片區(qū)設(shè)計

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

當(dāng)前文章：APP瓷片區(qū)設(shè)計基礎(chǔ)知識
標(biāo)題URL：http://muchs.cn/news/116901.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、小程序開發(fā)、外貿(mào)建站、做網(wǎng)站、標(biāo)簽優(yōu)化、品牌網(wǎng)站建設(shè)

廣告

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