旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > 全面解析瓷片區(qū)的設(shè)計要點

全面解析瓷片區(qū)的設(shè)計要點

時間:2020-08-19來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-08-19點擊量:作者:Gella

  很多同學(xué)不知道瓷片區(qū)是什么,于是和一些設(shè)計老師請教了解了一下,發(fā)現(xiàn)一些新的知識點,今天AAA教育郭老師就針對瓷片區(qū)的設(shè)計要點進行簡單的說明。
 

  1、什么是瓷片區(qū)?
 

  瓷片區(qū)就是板塊拼接在一起形成的運營位,視覺上像一塊塊瓷片貼在版面上,所以叫做”瓷片區(qū)“。通過各類促銷模式,具有較高的轉(zhuǎn)化率,往往能夠提升整個產(chǎn)品的留存率。如果你對上面的概念還是不太理解,請看下圖:

 



 

  2、瓷片區(qū)常見類型有哪些?
 

  瓷片區(qū)屬于運營內(nèi)容區(qū),是流量導(dǎo)流出口,適用于平臺、電商、金融、娛樂類等產(chǎn)品,目前常見類型有:1.產(chǎn)品實物圖片類 2.插圖類。
 

  2.1. 產(chǎn)品實物圖片類
 

  優(yōu)點:識別性高、視覺上更直觀、可復(fù)用、設(shè)計效率高。
 

  缺點:對圖片素材要求較高。
 

  適用場景:用實物圖能更直觀的表達內(nèi)容的產(chǎn)品類型,例如外賣類、旅游類、電商類、租房類等。
 

  為何適用于這些產(chǎn)品:外賣、旅游、電商、租房等是用戶購買真實的物品,代入感強、用戶可以感知產(chǎn)品的質(zhì)感、味覺等,舉個例子:比如你看到一個色澤飽滿的雞腿實物圖片和一副雞腿插畫,是不是前者更能讓你垂涎欲滴呢,所以使用真實產(chǎn)品圖片是最有效的吸引用戶下單的方法。
 


 

  2.2. 插畫類
 

  優(yōu)點:創(chuàng)意性強、具有趣味性
 

  缺點:含義表達不是很直接、難以復(fù)用、繪制耗
 

  適用場景:偏概念型的產(chǎn)品類型,例如金融類、虛擬產(chǎn)品類、設(shè)計類等
 

  為何適用于這些產(chǎn)品:金融類、虛擬產(chǎn)品、設(shè)計類這些是偏概念型的產(chǎn)品,有時候會有多個含義融合在一起,這時用插畫形式能更好的表達

 



 

  3、瓷片區(qū)設(shè)計要點
 

  說了這么多,是不是對怎么設(shè)計瓷片區(qū)有了更多的期待,下面我們一起來看看:
 

  通過拆解可以總結(jié)出瓷片區(qū)由:圖片/插圖+文字+背景+點綴組成,下面我們來一一分析各自的設(shè)計要點。

 



 

  3.1實物圖片
 

  (1)全景配圖:即配圖占據(jù)整個瓷片區(qū)域,適用于外賣類、旅游類等產(chǎn)品。
 

  配圖要求:圖片素材要求清晰度高,色彩飽和度高;一般主體占1/2,背景盡量簡潔,以突出主體內(nèi)容為主。

 



 

  (2)局部配圖:即配圖占據(jù)部分瓷片區(qū)域,適用于大多數(shù)產(chǎn)品。
 

  配圖要求:圖片素材要求摳圖干凈、飽和度高;

 



 

  (3)摳圖組合:適用于餐飲類、平臺類產(chǎn)品。通過不同素材摳圖重新組合,利用多樣產(chǎn)品把興趣最大化,以高價商品帶動低價商品。
 

  3.2.插圖
 

  插圖繪制要注意提煉關(guān)鍵文案信息,通過關(guān)鍵詞發(fā)散繪制關(guān)鍵性元素來表達商品的核心意思。
 

  3.3、文字
 

  非標簽類文字:
 

  主副文案通過大小、粗細和顏色進行區(qū)分,主文案字號建議在30~34px,副文案字號建議在24~26px;不同內(nèi)容板塊也可采用不同顏色,但顏色一般不要超過4種;在使用顏色的時候,可以匹配業(yè)務(wù)特點進行色彩選擇,如科技使用藍色,福利使用紅色等。
 

  標簽類文字:
 

  標簽也可分為主副文案兩個板塊, 標簽底部顏色選取可以使用圖片的鄰近色,或者根據(jù)業(yè)務(wù)屬性使用情緒板取色。標簽一般位于瓷片區(qū)域的左上角或左邊居中的位置。
 

  3.4、背景
 

  背景可分為白色背景、淺灰色背景、淺純色背景、漸變色背景這幾種,下面是背景顏色應(yīng)用場景。
 

  (1) 白色背景:

 



 

  (2) 淺灰色背景:

 



 

  (3) 淺彩色背景:背景色通常跟實物圖片或插圖的主色調(diào)鄰近

 



 

  (4) 漸變色背景:

 



 

  a淺色系漸變:選定一種顏色,向白色過渡,顏色飽和度較低、明度較高。
 

  b同色系漸變:同一種顏色,變化飽和度。
 

  c不同色系漸變:色相+飽和度變化
 

  3.5、點綴
 

  點綴可以豐富視覺效果;常用點綴元素有波浪線、圓形等幾何圖形;樹葉、絲帶等烘托氣氛的元素。
 



 

  3.6.圖文排版方式
 

  常見有四種排版方式:上下排版、左右排版、對角線排版、組合型排版:如對角線和上下排版組合、全景配圖和局部配圖組合等。
 

  總結(jié)
 

  文中對瓷片區(qū)進行了一個概括性的了解總結(jié),設(shè)計要點的話在排版設(shè)計中都是需要注意的基礎(chǔ)知識所以未多加贅述。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。



 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

老師想和你聊一聊

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖