行业资讯

直击设计行业第一现场,掌握全球化消息

UI必学组件!书影音头部的设计方式详解

  • 发布时间: 2024-05-20
书影音——书籍、影视、音乐(指专辑)这三者可以放在一块儿说,因为三者的介绍详情页面可以说几乎一致,这三者有依然是当今个人娱乐的主流,所以涉及书影音的App也是数不胜数,今天所介绍的书影音头部,就也算是一个相当普遍的组件类型。

UI必学组件!书影音头部的设计方式详解

二、设计要点

1. 字段说明

尽管书/影/音这三者的字段略有差异,但在同一类型的组件中,字段相对来说比较固定,所以我们优先把这三种组件的字段列出来。

书籍介绍头部字段:

封面:书籍的封面,统一大小和比例

书籍名:书籍的名称,作为大标题

排行:运营类标签,一般会稍加视觉设计

作者/译者:书籍作者和译者

出版社:出版类书籍的出版社

完结状态:连载类书籍才会有这一字段,出版类书籍则没有

简介:书籍的简介,有些app会将简介单独作为一个组件置于下方,有些则会放在头部中

付费:可在线阅读的书籍会有付费相关的信息

相关数据:以及更多的相关数据,例如:阅读人数、点赞量、字数、目录等等。

影视介绍头部字段:

封面:电影、电视剧海报,统一大小和比例

影视名:电视、电视剧名称,可以加上原文名

排行:运营类标签,一般会稍加视觉设计

影视信息:其他影视信息,例如:影视分类标签、地区国家、上映时间、时长等

已看/想看按钮:一般都有这两个按钮

专辑介绍头部字段:

封面:专辑封面,一般为正方形

专辑名:专辑的名字

歌手/组合:歌手和组合名称

专辑信息:其他专辑信息,例如:发行时间、分类等

2. 布局方法

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

书籍介绍头部布局

书籍的头部布局基本一致,大多数采用左封面、右信息的布局形式,右侧的信息按顺序从上至下排列即可。如果信息量较少,可以将封面顶部与信息顶部对齐,或者居中对齐:

UI必学组件!书影音头部的设计方式详解

如果信息量适中,尽量保证封面与信息区域上下两端对齐。

UI必学组件!书影音头部的设计方式详解

如果信息量较多,在保证顶对齐的情况下下方可以超出封面的底部:

UI必学组件!书影音头部的设计方式详解

额外的数据信息可以参考个人页头部中数据的做法,做成数据列表的形式。

UI必学组件!书影音头部的设计方式详解

影视介绍头部布局

影视介绍布局几乎与书籍一致,左侧封面、右侧信息,俩按钮可以通栏,也可以与信息部分保持对齐。

UI必学组件!书影音头部的设计方式详解

唯一有区别的是,影视类头部可以添加一块背景区域,这块区域可以放置额外的图片或视频信息,可以是更具视觉刺激的海报、营销物料,也可以是预告片等视频内容。封面可以压在背景上,也可以与之完全隔开。

UI必学组件!书影音头部的设计方式详解

专辑介绍头部布局

第一种布局,可以与书影类似,左封面、右信息,这在书影音三合一的App中比较常见,为了统一样式,App会采用一致的布局方法。

UI必学组件!书影音头部的设计方式详解

但音乐垂类的App在设计上会更加“激进”一些,做一些不同的样式,例如:因为专辑本身需要展示的信息并不多,所以专辑封面可以作为更明显的展示点,将之置中、放大。

UI必学组件!书影音头部的设计方式详解

3. 背景

大部分App会为书影音的介绍页添加一个背景,为了增加页面与内容的相关性,这个背景还会与封面相关。

纯色背景

在书籍的介绍页中比较常见,书籍因为本身比较“安静”的调性,不需要太过抢眼的背景,所以使用浅灰或者白色的背景即可。

UI必学组件!书影音头部的设计方式详解

封面吸色

也是纯色的一种,但这个纯色会吸取封面色彩,或者通过算法提取封面的典型色彩,为了统一背景的深浅,需要将此色值与纯色融合,最后得到的效果就是一个随封面改变的纯色。这样做的好处是可以让封面与背景结合得更加紧密。

UI必学组件!书影音头部的设计方式详解

色彩渐变

对纯色的背景做一个微小的渐变,渐变的另一端可以融合吸色的方法,让色彩从封面色渐变至背景色。

UI必学组件!书影音头部的设计方式详解

背景模糊

将封面垫至下方,叠上一层浅色hove深色的背景模糊遮罩,也是一种可行的思路。目的与封面吸色一样,但这种背景更富动态。需要注意的是,模糊值应尽可能大,尽量接近封面吸色的效果,隐约可见各区域有色彩的变化即可。

UI必学组件!书影音头部的设计方式详解

遮罩渐变

将封面置于底层,覆盖一层透明度渐变的遮罩,让封面透一部分出来。这种形式下不需要添加额外的封面,直接在下方写标题即可。

UI必学组件!书影音头部的设计方式详解

4. 不一样的卡片样式

豆瓣读书

豆瓣读书将封面置于右侧,信息置于左侧,虽然只是交换了一下位置,这种不常见的布局方式依然让它与其他App区别了开来。

UI必学组件!书影音头部的设计方式详解

样式拓展

这里还额外收集了一些书影音介绍头部的线上案例,也可以作为设计时的参考:

UI必学组件!书影音头部的设计方式详解

结尾

书影音头部的组件就介绍到这,后续所有有关组件的介绍都会同步更新到我们的知识库中!为了方便大家记得到里面查看。

欢迎关注作者的微信公众号:「超人的电话亭」

UI必学组件!书影音头部的设计方式详解

 

转载自:https://www.uisdc.com/book-video-head

本文网址: https://zhishangsj.cn/news/528.html

聆听与分析需求

设计并不是个人观点或情感的自我表达,而是基于

商业委托的系统化、清晰化、构成化的客观解决方案

多一份参考,总有益处

联系微信:2476910203,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系


业务热线:


178 6662 5335

185 6288 7528  

关于至上UI设计

至上UI设计,隶属于青岛至上视界互联科技有限公司,成立于2018年7月。专注于建站和UI视觉设计,致力于创造令人难忘的用户体验,用设计来打动每位用户的心,从而为产品赋予更多价值。遵循用户体验至上,品质至上,服务至上的理念,至上UI设计已为上百家企业提供设计服务,有着成熟的服务经验。

我们的优势

扎实的专业素养

资深的项目经验
精准的需求沟通
完善的售后服务

高效的执行力
规范的设计流程

严守进度与质量

对设计执着的追求与热爱

我们能做什么

企业品牌网站
响应式网站
网页UI定制设计
移动端UI设计

系统软件界面设计

数据可视化大屏设计

图标定制设计

落地页设计

青岛UI设计界面设计丨山东UI设计界面设计丨青岛网页设计丨烟台UI设计界面设计丨济南网页设计丨济南UI设计界面设计丨泰安UI设计界面设计丨潍坊UI设计界面设计丨青岛网站设计

在线客服

扫一扫添加我微信好友