发表于: 2019-01-24 21:40:44

1 1068





今天完成的事情:


下午打扫了卫生 

看了些关于ui的知识




明天计划的事情:


明天就开始休息回家了




遇到的问题:


暂时没有




今天的收获:


banner制作的套路分析


1. 结构

banner的结构大致分为三层:背景层、装饰层、文案层。背景层会确立整体banner的风格或配色;装饰层起到点缀作用,并可以控制整体版式的平衡;文案层是核心内容的展示,以展示主要文字为主。三层级互相组合搭配,从而支撑起整个banner。


2. 版式

banner的常见版式:①左右排版、②居中排版。

受到文案字数限制、所选搭配元素、产品的属性等原因,版式的选择需要根据实际情况进行判断。


3. 样式

常见的banner构图样式组合有:平铺样式、环绕样式、倾斜样式、斜切样式、放射样式、isometric样式、三角样式等。


4. 关联

背景层、装饰层、文案层,三者之间有着密切的关系。

比如:背景层设计的过于复杂,那么内容文字的处理就要倾向于简洁,反之亦然;而装饰层也并不是必须要存在于每一个banner当中。当背景层中内容已经很丰富的时候,装饰的内容可以删去。

当背景为纯色时,需要适当的添加点缀物。而且可以对文字进行处理增加吸引力,避免整体的单调


5. 背景

背景的种类大致分为适量图形、字体、颜色和图片四种。

图片包括写实图片和卡通图片等;颜色分为纯色或渐变;字体放大也可以当做背景;矢量图包含的组合有很多。简单的圆形、方形。甚至是点、线的组合都可以运用在背景中。每当节日临近,也可以匹配一些节日风格的适量图形进行设计。


6. 装饰

装饰的点缀应该是锦上添花的 不能盲目的因为视觉效果而添加过多的装饰 这样反而会误导用户 造成混乱的感觉 不利于文案内容的传达 适当的点缀和修饰 可以让页面避免单调 也可以使bannae的元素之间达到平衡视觉效果更加和谐 同时 文字的运用也是装饰点缀的关键 根据产品属性的不同 举例说明 金融类的banner可以使用较小或较细的字体进行搭配 同时 使用点状分布排列营造高端感 电商类的banner可以使用渐变的圆形或线条进行修饰 目的是搭建出欢快的 促销的感觉 吸引用户点击


7. 文案

1. banner的设计当中 文案字数的多少也至关重要 过多字数或复杂的内容非但不能让用户清楚文案要表达的事情 反而会让用户感到麻烦 我明白交给设计师内容的小伙伴想把活动解释清楚的初衷 但在注重用户体验的当下 人们的耐心显得是无法接受过多文字的图片 因为 当我们接收到的文案字数过多的话 要第一时间果断提出自己的想法 文案中的卖点和痛点是最重要的两个部分 其他内容都可以省略 同时 过多的字数也是我们设计当中的困难 较小尺寸的图片 可能单单放几行文字就已经无法再安排其他的布局设计了

2. 字体方面主要分为衬线字体和非衬线字体 衬线字体的笔画有修饰 且粗细不同 参考字体 而非衬线字体就比较横平竖直 笔画粗细相同 衬线字体大多用在古典风格或民族风格的banner设计当中 非衬线字体适用的范围就比较广 可以说绝大多数的banner中都可以运用

3. 文案分为主标题和副标题 主标题自然是最精简也是最抢眼的部分 而副标题可以是主标题的解释说明 也可以是接主标题的新文案 区别搭配有助于用户第一时间分辨出文案的主次 让页面更加协调


8. 配色

好的配色需要一定的配色基础以及日常练习的积累 但是当遇到特殊状况时 显然并不会再颜色上留给我们有太多的时间 所以 我们就需要一些辅助的方式来完成颜色的搭配工作


9. 尺寸

当banner设计完成时 我们的工作可能并没有就此结束 再设计app产品之初 如果我们在不同页面的很多地方都设计了不同尺寸的 便于运营做推广的banner区域的话 那么后期我们在修改这些尺寸的时候就会非常头疼 可能一张图我们需要改成七八张banner 并且有的图片的尺寸并没有规律可言 因为我们在设计app之初 就要想到这样的情况 在设计banner时 设定好统一比例 方便后期更改 同时 要运用photoshop中的职能对象等功能 快速修改尺寸






返回列表 返回列表
评论

    分享到