書影音頭部可以看作是一個相對普遍的組件類型，這篇文章里，作者就介紹了頁頭部這一部分的布局和視覺方法，感興趣的同學們，不妨來看一下。

一、組件介紹

書影音——書籍、影視、音樂（指專輯）這三者可以放在一塊兒說，因為三者的介紹詳情頁面可以說幾乎一致，這三者有依然是當今個人娛樂的主流，所以涉及書影音的App也是數不勝數，今天所介紹的書影音頭部，就也算是一個相當普遍的組件類型。

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

二、設計要點

1. 字段說明

盡管書/影/音這三者的字段略有差異，但在同一類型的組件中，字段相對來說比較固定，所以我們優先把這三種組件的字段列出來。

書籍介紹頭部字段：

• 封面：書籍的封面，統一大小和比例
• 書籍名：書籍的名稱，作為大標題
• 排行：運營類標簽，一般會稍加視覺設計
• 作者/譯者：書籍作者和譯者
• 出版社：出版類書籍的出版社
• 完結狀態：連載類書籍才會有這一字段，出版類書籍則沒有
• 簡介：書籍的簡介，有些app會將簡介單獨作為一個組件置于下方，有些則會放在頭部中
• 付費：可在線閱讀的書籍會有付費相關的信息
• 相關數據：以及更多的相關數據，例如：閱讀人數、點贊量、字數、目錄等等。

影視介紹頭部字段：

• 封面：電影、電視劇海報，統一大小和比例
• 影視名：電視、電視劇名稱，可以加上原文名
• 排行：運營類標簽，一般會稍加視覺設計
• 影視信息：其他影視信息，例如：影視分類標簽、地區國家、上映時間、時長等
• 已看/想看按鈕：一般都有這兩個按鈕

專輯介紹頭部字段：

• 封面：專輯封面，一般為正方形
• 專輯名：專輯的名字
• 歌手/組合：歌手和組合名稱
• 專輯信息：其他專輯信息，例如：發行時間、分類等

2. 布局方法

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

書籍介紹頭部布局：

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

如果信息量適中，盡量保證封面與信息區域上下兩端對齊。

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

額外的數據信息可以參考個人頁頭部中數據的做法，做成數據列表的形式。

影視介紹頭部布局：

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

唯一有區別的是，影視類頭部可以添加一塊背景區域，這塊區域可以放置額外的圖片或視頻信息，可以是更具視覺刺激的海報、營銷物料，也可以是預告片等視頻內容。封面可以壓在背景上，也可以與之完全隔開。

專輯介紹頭部布局：

第一種布局，可以與書影類似，左封面、右信息，這在書影音三合一的App中比較常見，為了統一樣式，App會采用一致的布局方法。

但音樂垂類的App在設計上會更加“激進”一些，做一些不同的樣式，例如：因為專輯本身需要展示的信息并不多，所以專輯封面可以作為更明顯的展示點，將之置中、放大。

3. 背景

大部分App會為書影音的介紹頁添加一個背景，為了增加頁面與內容的相關性，這個背景還會與封面相關。

純色背景：

在書籍的介紹頁中比較常見，書籍因為本身比較“安靜”的調性，不需要太過搶眼的背景，所以使用淺灰或者白色的背景即可。

封面吸色：

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

色彩漸變：

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

背景模糊：

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

遮罩漸變：

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

4. 不一樣的卡片樣式

豆瓣讀書：

豆瓣讀書將封面置于右側，信息置于左側，雖然只是交換了一下位置，這種不常見的布局方式依然讓它與其他App區別了開來。

樣式拓展：

這里還額外收集了一些書影音介紹頭部的線上案例，也可以作為設計時的參考：

結尾

書影音頭部的組件就介紹到這。