从网易云音乐中总结banner设计

作为网易云的老粉，花瓣分组也专门给网易云留了个位置，网易云音乐基本每天都更新banner，素材文案会根据每天的节日或是近期发生的事件，甚至是刚上映的电影都可以拿来重新设计，色调非常接地气，常常打开APP一瞬间就控制不住寄几截图保存，以下是小小一部分。

有时候觉得文案也特别有意思，像是设计师自己想出来的东西。一直存图挺长时间了，不管是设计或是文案都值得好好学习。今天悄悄的总结一下个人想法，想法比较零碎，以目前的设计水平就先总结以下内容，之后会通过不断的学习对以下总结进行修改和添加。总体大致分为以下四点。

1、构图

横版的banner元素+字体，基本上有五种方式，左构图，右构图，上下构图，居中构图，不规则构图。常用的两种构图方式就是左右构图。

1.1、左构图

说白了就是下面这样。

这样传统的排版方式里面的不同之处，无非是字体和图片的处理，还有重点是色调的把握。

每种字体的变化和元素的变化再加上素材的丰富，一个简单的构图能设计出无数种可能。

1.2、右构图

构图方式大眼看上去其实用的最多的构图方式。因为这两种方式在横版banner中来表现最自然最合适，不管是文字还是素材都合理的放在自己应有的位置，怎么摆放都不会出错，画面不会显得乱或者空。

1.3上下构图

横版banner的上下构图很容易出错，一般的素材选定也要是横向，图片处理可以尝试放在文字之前，隐隐约约的挡着一部分文字，参考杂志封面的赶脚。也可以这样

1.4居中构图

文字为主体的排版也分为两种情况，一种是素材围绕字体或者是在字体两侧去排版，第二种是除了字体之外，干脆就把素材当背景，这里的背景可以是一张加了黑色遮罩的图片，一个个重复的小元素，或者是一个颜色鲜艳的插画；

1.5主体构图

素材为主体的时候，素材多为人物，文字排在素材的两侧，再加上合适风格的背景，和元素，就很完整了。BTW一张拍摄的极好的图片就可以用这种构图方式，简单的在主体物两侧放一些文字（萍方细体）就很好了，再多的装饰都会显得多余。

1.6不规则构图

不管是多不规则的构图其实里面也能找到一定的规律，除非文案要求很多或者素材很碎的情况下，个人不太建议去尝试这种构图风格。容易一不小心就显得画面很乱没有重点。

2、字体

2.1突出字体

首先需要先提一下突出字体的两种方式，突出字体或者暗化背景。

字体的突出简单的可以直接通过字体的颜色或者大小来控制，其次可以通过形状的利用（矩形圆形多用）来突出（当背景图很乱或者背景图和字体颜色相似时），如下图。

2.2字体的选择

字体的使用要根据banner的整体风格，需要传达出怎样的信息而定。衬线体多符合文艺、高品质感等气质，无衬线体就比较多的用于各种风格中。

以下是近期常用的一些字体。

用多了别的有的没的字体，反而近期会觉得微软雅黑加粗也有一种特别的美，像这样。

2.3字体的表现方式

字体可以根据层级关系大大小小、一大一小的排列，会更有视觉冲击力。

也可以找一张类似风格的图片剪贴蒙版剪进去，这里可以用有纹理的图片，金色银色等等各种有质感的图片。

也可以尝试叠层的方式，整体或者单个字体的层叠，做出层次感效果。

放一张昨天几分钟做的图，然后被领导吐槽字怎么叠在一起了...

还可以尝试根据整体banner的风格，去改变字体的形状。

在字体上稍微加长一点点，缩短一点点，或者加一点小元素就可能会立马变得不一样，这是美术学中的减法和加法，以前画画的时候也经常听老师说，绘画就是减法，现在觉得的确是。

2.4字体的排版

左对齐，右对齐，居中对齐

从网易云音乐中总结banner设计相关推荐

网易云音乐中你见过最扎心的热评是什么
网易云音乐中你见过最扎心的热评是什么? 1.是啊,你wifi在线了,应该是起床了.你4G,应该是出去了.你2G,应该是回乡下了.你又4G了,从乡下回来了,正在和朋友玩.晚上4G 了,害怕和你出去的是男 ...
从网易云音乐中找出音乐外链制作背景音乐
从网易云音乐中找出音乐外链最近想把做的网页放上点背景音乐,因为要放到github page上不想下载,一直想要找网上的链接,无意中Network找到了.ヾ(≧O≦)"嗷~ 先上案例: 步骤 ...
html网易云音乐图片轮播效果,看网易云音乐如何在界面设计中突出特色功能
一般观念中一款产品的功能越具特色就会放在越突出的位置,但是如果一款产品层级较深,底层架构复杂导致若干功能优先级并列,那在UI设计中如何做到强化和弱化呢? 作为网易云音乐陈年老粉,不得不说这款产品做的真 ...
网易云音乐实时计算平台设计及实践
作者 | 李涵淼编辑 | 李雪薇本文根据网易云音乐Flink & Calcite contributor李涵淼在ITPUB技术栈系列线上沙龙活动分享整理而成. 本次ITPUB技术栈线上沙龙 ...
如何将已下载音乐导入到iPhone的网易云音乐中
背景有些音乐是网易云音乐上没有的,即便是花钱也无法得到的,这样一来,如果对于一个只使用单一软件播放音乐的人来说,很坑,怎么办呢? 对策既然这样,找找别的方法,其实iTunes本身应该是一个很好用的 ...
Android仿网易云音乐中锁屏后在开锁界面插屏功能
这个功能实现起来应该有多种方式,可以使用WindowManager创建window的方法. 在本文中我们使用开启一个Activity来充当锁屏界面. 实现步骤有以下两步: 一.后台开启一个Servic ...
SSM+微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...
SSM+mysql+微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...
（附源码）SSM+mysql+微信小程序网易云音乐设计与实现毕业设计261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...

从网易云音乐中总结banner设计

从网易云音乐中总结banner设计相关推荐

最新文章

热门文章