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

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

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

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

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

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

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

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

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

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

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

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

3.對(duì)角排版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

分享題目：APP瓷片區(qū)設(shè)計(jì)基礎(chǔ)知識(shí)
URL地址：http://muchs.cn/news1/116901.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、建站公司、手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)

廣告

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