瓷片區(qū)，是國(guó)內(nèi)電商、視頻、資訊、理財(cái)類應(yīng)用中經(jīng)常出現(xiàn)的一款引導(dǎo)型組件，顧名思義就是像瓷片一樣以自由的數(shù)量組合“貼”在頁(yè)面中的一組入口。

從圖片中可以看出，瓷片區(qū)最大的特點(diǎn)就是在一個(gè)矩形區(qū)域內(nèi)劃分出不同的矩形組合，且每個(gè)下級(jí)矩形內(nèi)會(huì)包含標(biāo)題、介紹文字、主體視覺元素、標(biāo)簽等信息，和我們逛商場(chǎng)時(shí)看到的店鋪櫥窗設(shè)計(jì)有異曲同工之處。它們的主要作用，都是通過(guò)擺放相關(guān)的內(nèi)容吸引用戶注意力，并引導(dǎo)用戶點(diǎn)擊和進(jìn)入。

需要注意的是，我們時(shí)?？吹揭恍┛焖偃肟跁?huì)像瓷片區(qū)一樣做成卡片拼貼的樣式，但不管樣式如何，瓷片區(qū)和快速入口在內(nèi)容承載上有著本質(zhì)的區(qū)別。

瓷片區(qū)：會(huì)展示出下級(jí)的信息元素，例如商品圖、代言人

快速入口：以展示主題相關(guān)的圖形為主，可以是圖標(biāo)也可以是圖片

快速入口主要應(yīng)對(duì)的是用戶的主動(dòng)行為，通過(guò)把功能入口密集的羅列出來(lái)方便用戶查找和點(diǎn)擊。而瓷片區(qū)有比較強(qiáng)的誘導(dǎo)性，是通過(guò)展示的信息、圖片，來(lái)誘發(fā)用戶關(guān)注并點(diǎn)擊。

瓷片區(qū)本質(zhì)上也是一個(gè)廣告位，只是沒有 Banner 輪播圖廣告的跳轉(zhuǎn)頁(yè)面五花八門，瓷片區(qū)更接近于一個(gè)功能模塊的外部固定廣告位。

常見的類似電商下方的瓷片區(qū)，每個(gè)瓷片都是一個(gè)具體的功能模塊，展示的內(nèi)容雖然會(huì)隨時(shí)間場(chǎng)景變化，但是指向的功能模塊是保持不變的，每個(gè)瓷片就是這個(gè)功能模塊的 —— 櫥窗。

認(rèn)準(zhǔn)它是一個(gè)功能模塊的廣告貼片，所以它不僅僅只能出現(xiàn)在電商應(yīng)用中，任何應(yīng)用類型都可以使用。例如視頻、理財(cái)、旅游、生活類產(chǎn)品，都可以使用瓷片區(qū)來(lái)引導(dǎo)用戶進(jìn)入對(duì)應(yīng)模塊中。

瓷片區(qū)是一個(gè)需要視覺比較突出的組件，才能起到引導(dǎo)用戶點(diǎn)擊的效果，所以我們需要投入比較多的精力進(jìn)行設(shè)計(jì)。下面，我們根據(jù)瓷片區(qū)的設(shè)計(jì)步驟，總結(jié)了對(duì)應(yīng)的要點(diǎn)進(jìn)行分享。

1.框架布局

首先要解決的是瓷片區(qū)的瓷片布局，即在整個(gè)組件區(qū)域內(nèi)，怎么有效分配空間給不同的瓷片。在前期設(shè)計(jì)中，一定要優(yōu)先確認(rèn)瓷片區(qū)的框架內(nèi)邊距，然后再根據(jù)要放置的瓷片數(shù)量，將模塊拆分出 22、32、42、41 的基本網(wǎng)格系統(tǒng)。

如果模塊的重要性不同，可以將縱向或橫向的小瓷片合為一個(gè)大瓷片，或?qū)⒋蟮拇善俨鸱殖蓛蓚€(gè)小的瓷片，以瓷片的大小來(lái)形成視覺權(quán)重的差別。

布局的分配是整個(gè)瓷片區(qū)設(shè)計(jì)的靈魂，除了上面介紹的最基本的做法以外，還有很多不同的瓷片布局方式，要通過(guò)日常的積累并盡情發(fā)揮自己的創(chuàng)造力。

2.元素排版

每個(gè)瓷片內(nèi)的元素則相對(duì)單一，即文字和 圖片/圖標(biāo) 兩種。這兩種元素的排版方式我們可以枚舉出來(lái)，無(wú)非：左右、上下、對(duì)角這三種最通用的排版。

更具體的，文字更常在左側(cè)、上側(cè)和左上側(cè)，當(dāng)然這只是一般做法，為了視覺需要你也可以把文字放在右側(cè)、下側(cè)或另外三角處，這個(gè)沒有固定的排版要求。此外，文本排版還需要盡量保證跨瓷片對(duì)齊。你確實(shí)可以在不同的瓷片區(qū)中改變對(duì)齊來(lái)增加其變化，但不能每個(gè)瓷片一個(gè)樣子，能對(duì)齊還是盡量對(duì)齊。

3.文字尺寸

其中，文字從尺寸分又可分為標(biāo)題和副文本兩個(gè)規(guī)格，這里我們把副標(biāo)題、標(biāo)簽、價(jià)格等統(tǒng)稱為副文本，因?yàn)樗麄兊某叽缈梢允且恢碌?。瓷片區(qū)內(nèi)的文本量、可選擇的尺寸范圍都不多，所以做兩種規(guī)格的字段已經(jīng)足夠。

以 Pingfang SC 為例，標(biāo)題可采用 14pt / blod 的規(guī)格，副文本則使用 12pt / regular 的規(guī)格即可。

4.圖片圖標(biāo)

瓷片區(qū)中的圖片大多為商品，要求摳圖干凈、清晰，多圖的情況下，還需要保證圖片內(nèi)容的視覺大小一致。

部分瓷片的圖片也可使用圖標(biāo)或者插畫替代，例如運(yùn)營(yíng)需要為大瓷片賦予更多的視覺性功能，那么就可以為大瓷片單獨(dú)給圖標(biāo)或插畫。

5.背景色

瓷片的背景可以使用白色，也可以使用彩色、漸變或者干脆使用圖片，至于具體用哪個(gè)，需要根據(jù)頁(yè)面整體的風(fēng)格，以及瓷片區(qū)上下的環(huán)境來(lái)決定，一般來(lái)說(shuō)，瓷片區(qū)的背景越復(fù)雜，其視覺負(fù)擔(dān)就越重，更適合活潑、潮流的頁(yè)面風(fēng)格。

除此之外，瓷片區(qū)中很多細(xì)節(jié)都可以進(jìn)行更加細(xì)致的視覺化雕琢。當(dāng)然，初學(xué)UI的同學(xué)肯定是先把上面幾點(diǎn)基礎(chǔ)部分都做好了，再尋求和研究樣式上的拓展。

1. 每平每屋

家裝APP「每平每屋」中找靈感頁(yè)面的瓷片區(qū)采用了一種圖片輪播的形式，可以有效地增加內(nèi)容展示的密度；右上側(cè)的小標(biāo)簽也經(jīng)過(guò)了特別的設(shè)計(jì)，不復(fù)雜卻能讓這個(gè)組件更活潑新穎。

2.去哪兒APP

旅游類APP「去哪兒」的旅行攻略頁(yè)面中的瓷片區(qū)則是采用了圖形化的標(biāo)題。

3.京東金融App

金融類App「京東金融」的權(quán)益頁(yè)面中的瓷片區(qū)，使用了大多數(shù)擬物類圖標(biāo)來(lái)豐富整體頁(yè)面。

4.其它案例

結(jié)尾

瓷片區(qū)的組件就介紹到這，后續(xù)所有有關(guān)組件的介紹都會(huì)同步更新到我們的知識(shí)庫(kù)中！為了方便，大家記得知識(shí)庫(kù)內(nèi)查看。

超人知識(shí)庫(kù)介紹+地址：知識(shí)+1+1+1...！｜UI知識(shí)庫(kù)船新版本，讀取速度大幅提升！