一、 组件介绍

书影音——书籍、影视、音乐这三者能放在一块儿说基本上原因是三者的介绍详情页面能说差不离一致，这三者依然是当今个人玩乐的主流，所以涉及书影音的App也是数不胜数。今天所介绍的书影音头部，就也算是一个相当普遍的组件类型。

二、 布局方法

1. 布局形式：巨大许多数App会采用左封面、右信息的布局形式，右侧的信息按顺序从上至下排列即可。如果信息量较少许，能将封面顶部与信息顶部对齐，或者居中对齐。

2. 字段说明：

书籍/影视/音乐名：作为巨大标题作者/译者/歌手/组合：相关作者、 译者、歌手或组合名称简介：书籍/影视/音乐的简介信息排行：运营类标签，一般会稍加视觉设计分类：书籍/影视/音乐所属的分类评分：书籍/影视/音乐的评分信息出版社/发行时候/时长远：书籍/影视/音乐的相关信息已看/想看按钮：一般都有这两个按钮付费：可在线阅读的书籍会有付费相关的信息

三、样式拓展

1. 背景：

纯色背景：浅薄灰或白色背景，适用于静调性的书籍App色彩渐变：从封面色渐变至背景色，增有力视觉效果背景模糊：对背景图片进行模糊处理，突出内容遮罩渐变：覆盖一层透明度渐变的遮罩，许多些层次感

2. 封面吸色：吸取封面色彩，与背景融合，增有力视觉冲击力

3. 卡片样式：将封面置于底层，覆盖一层透明度渐变的遮罩，让封面透一有些出来

四、案例琢磨

豆瓣读书：封面置于右侧，信息置于左侧，交换位置许多些独特性细：图片封面布局简洁巨大方豆瓣音乐：封面置于底层，覆盖一层透明度渐变的遮罩，突出内容

书影音头部设计是一个相对普遍的组件类型，但在实际应用中，我们还需要根据具体需求进行创新鲜和调整。希望本文能为巨大家给一些设计思路，助力提升UI设计能力。

本文为原创内容，未经授权禁止转载。

---