一、組件介紹

書(shū)影音——書(shū)籍、影視、音樂(lè)（指專(zhuān)輯）這三者可以放在一塊兒說(shuō)，因?yàn)槿叩慕榻B詳情頁(yè)面可以說(shuō)幾乎一致，這三者有依然是當(dāng)今個(gè)人娛樂(lè)的主流，所以涉及書(shū)影音的App也是數(shù)不勝數(shù)，今天所介紹的書(shū)影音頭部，就也算是一個(gè)相當(dāng)普遍的組件類(lèi)型。

這篇文章我不會(huì)介紹完整的介紹詳情頁(yè)，這個(gè)頁(yè)面一般由幾個(gè)不同的組件組成，今天只講介紹頁(yè)頭部這一部分的布局和視覺(jué)方法。

二、設(shè)計(jì)要點(diǎn)

1. 字段說(shuō)明

盡管書(shū)/影/音這三者的字段略有差異，但在同一類(lèi)型的組件中，字段相對(duì)來(lái)說(shuō)比較固定，所以我們優(yōu)先把這三種組件的字段列出來(lái)。

書(shū)籍介紹頭部字段：

封面：書(shū)籍的封面，統(tǒng)一大小和比例

書(shū)籍名：書(shū)籍的名稱(chēng)，作為大標(biāo)題

排行：運(yùn)營(yíng)類(lèi)標(biāo)簽，一般會(huì)稍加視覺(jué)設(shè)計(jì)

作者/譯者：書(shū)籍作者和譯者

出版社：出版類(lèi)書(shū)籍的出版社

完結(jié)狀態(tài)：連載類(lèi)書(shū)籍才會(huì)有這一字段，出版類(lèi)書(shū)籍則沒(méi)有

簡(jiǎn)介：書(shū)籍的簡(jiǎn)介，有些app會(huì)將簡(jiǎn)介單獨(dú)作為一個(gè)組件置于下方，有些則會(huì)放在頭部中

付費(fèi)：可在線(xiàn)閱讀的書(shū)籍會(huì)有付費(fèi)相關(guān)的信息

相關(guān)數(shù)據(jù)：以及更多的相關(guān)數(shù)據(jù)，例如：閱讀人數(shù)、點(diǎn)贊量、字?jǐn)?shù)、目錄等等。

影視介紹頭部字段：

封面：電影、電視劇海報(bào)，統(tǒng)一大小和比例

影視名：電視、電視劇名稱(chēng)，可以加上原文名

排行：運(yùn)營(yíng)類(lèi)標(biāo)簽，一般會(huì)稍加視覺(jué)設(shè)計(jì)

影視信息：其他影視信息，例如：影視分類(lèi)標(biāo)簽、地區(qū)國(guó)家、上映時(shí)間、時(shí)長(zhǎng)等

已看/想看按鈕：一般都有這兩個(gè)按鈕

專(zhuān)輯介紹頭部字段：

封面：專(zhuān)輯封面，一般為正方形

專(zhuān)輯名：專(zhuān)輯的名字

歌手/組合：歌手和組合名稱(chēng)

專(zhuān)輯信息：其他專(zhuān)輯信息，例如：發(fā)行時(shí)間、分類(lèi)等

2. 布局方法

三者的布局也有差異，但大致上的思路基本一致。

書(shū)籍介紹頭部布局

書(shū)籍的頭部布局基本一致，大多數(shù)采用左封面、右信息的布局形式，右側(cè)的信息按順序從上至下排列即可。如果信息量較少，可以將封面頂部與信息頂部對(duì)齊，或者居中對(duì)齊：

如果信息量適中，盡量保證封面與信息區(qū)域上下兩端對(duì)齊。

如果信息量較多，在保證頂對(duì)齊的情況下下方可以超出封面的底部：

額外的數(shù)據(jù)信息可以參考個(gè)人頁(yè)頭部中數(shù)據(jù)的做法，做成數(shù)據(jù)列表的形式。

影視介紹頭部布局

影視介紹布局幾乎與書(shū)籍一致，左側(cè)封面、右側(cè)信息，倆按鈕可以通欄，也可以與信息部分保持對(duì)齊。

唯一有區(qū)別的是，影視類(lèi)頭部可以添加一塊背景區(qū)域，這塊區(qū)域可以放置額外的圖片或視頻信息，可以是更具視覺(jué)刺激的海報(bào)、營(yíng)銷(xiāo)物料，也可以是預(yù)告片等視頻內(nèi)容。封面可以壓在背景上，也可以與之完全隔開(kāi)。

專(zhuān)輯介紹頭部布局

第一種布局，可以與書(shū)影類(lèi)似，左封面、右信息，這在書(shū)影音三合一的App中比較常見(jiàn)，為了統(tǒng)一樣式，App會(huì)采用一致的布局方法。

但音樂(lè)垂類(lèi)的App在設(shè)計(jì)上會(huì)更加“激進(jìn)”一些，做一些不同的樣式，例如：因?yàn)閷?zhuān)輯本身需要展示的信息并不多，所以專(zhuān)輯封面可以作為更明顯的展示點(diǎn)，將之置中、放大。

3. 背景

大部分App會(huì)為書(shū)影音的介紹頁(yè)添加一個(gè)背景，為了增加頁(yè)面與內(nèi)容的相關(guān)性，這個(gè)背景還會(huì)與封面相關(guān)。

純色背景

在書(shū)籍的介紹頁(yè)中比較常見(jiàn)，書(shū)籍因?yàn)楸旧肀容^“安靜”的調(diào)性，不需要太過(guò)搶眼的背景，所以使用淺灰或者白色的背景即可。

封面吸色

也是純色的一種，但這個(gè)純色會(huì)吸取封面色彩，或者通過(guò)算法提取封面的典型色彩，為了統(tǒng)一背景的深淺，需要將此色值與純色融合，最后得到的效果就是一個(gè)隨封面改變的純色。這樣做的好處是可以讓封面與背景結(jié)合得更加緊密。

色彩漸變

對(duì)純色的背景做一個(gè)微小的漸變，漸變的另一端可以融合吸色的方法，讓色彩從封面色漸變至背景色。

背景模糊

將封面墊至下方，疊上一層淺色hove深色的背景模糊遮罩，也是一種可行的思路。目的與封面吸色一樣，但這種背景更富動(dòng)態(tài)。需要注意的是，模糊值應(yīng)盡可能大，盡量接近封面吸色的效果，隱約可見(jiàn)各區(qū)域有色彩的變化即可。

遮罩漸變

將封面置于底層，覆蓋一層透明度漸變的遮罩，讓封面透一部分出來(lái)。這種形式下不需要添加額外的封面，直接在下方寫(xiě)標(biāo)題即可。

4. 不一樣的卡片樣式

豆瓣讀書(shū)

豆瓣讀書(shū)將封面置于右側(cè)，信息置于左側(cè)，雖然只是交換了一下位置，這種不常見(jiàn)的布局方式依然讓它與其他App區(qū)別了開(kāi)來(lái)。

樣式拓展

這里還額外收集了一些書(shū)影音介紹頭部的線(xiàn)上案例，也可以作為設(shè)計(jì)時(shí)的參考：

結(jié)尾

書(shū)影音頭部的組件就介紹到這，后續(xù)所有有關(guān)組件的介紹都會(huì)同步更新到我們的知識(shí)庫(kù)中！為了方便大家記得到里面查看。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話(huà)亭