• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

作者:设宴 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Banner,Banner设计,点线面,电商banner,经验分享,设计元素等相关知识,设宴希望在学习及工作中可以帮助到您

在上两期整理banner设计的过程中,我发现线框在banner设计中的应用非常广泛。不仅能够辅助一些元素的设计,还可以为设计增色不少,增加设计感。所以,我决定总结研究一番,发现这里面还是有点道道的。

往期回顾:

  • 《Banner设计宝典系列!玩转9种最常见的设计风格》
  • 《Banner设计宝典之可能是最全面的流程分析总结》

线作为平面构成中三元素之一,具有非常广泛的应用范围。

「线」在版式中的作用主要表现为:表示强调、明确分隔、视觉引导、组织信息、丰富装饰画面等。

在banner设计中,应用线框也起到强调、视觉引导,组织信息,丰富画面层次等作用。接下来,我们针对一些案例分析线框在banner设计中应用的整体特点,以及在应用时需要注意的设计细节。线框在banner中的应用也同样适用于在海报等其他设计范畴,举一反三。

一. 应用情况分类

1. 大线框,辅助背景和整体版式

特点:在banner中运用线框整体形式感强,可以起到较好的引导视觉的作用,用户在看到banner的第一眼便会把注意力集中在线框内的区域。

2. 小线框,应用于局部文案

特点:在banner文案处应用线框设计是最常见的。文案作为传达banner信息的主要载体,在此处应用banner可以很好的辅助设计,吸引关注,突出文案重点部分。在后面,我将专门分析线框如何应用在文案部分。

3. 小线框,应用于局部图像

特点:在图像周围添加线框可以通过空间关系让图像更有立体感,增加设计的层次,起到突出产品的作用。

二. 应用细节

上面简单总结了线框的应用范围,接下来,我们结合这些应用场景分析一下需要注意的细节与设计思路。

1. 封闭&不封闭

封闭的线框透气性差一些,但在视觉上更规范、稳重。

不封闭的线框最为常见,透气,具有较强的设计感,能够发挥的的设计空间也很广。

在具体设计时,有两种方式可以打破线框。

直接选择切断部位断开

在线框轨迹上叠加其它元素(文案、图片等)断开

此种方式较常见,可以利用文案、图像与线框的空间关系塑造空间感,使线框与整体更好的融合在一起。

2. 粗线条&细线条

粗线条能够更加引人注目,个性十足

细线条显得细腻、柔美、轻盈

3. 虚&实

在线框的应用中有虚实的区分。「虚」的线框在呈现形式上很灵活,较容易结合自己的创意,若隐若现,没有实线那么强烈的空间存在感。

4. 线框形状

线框的形状比较灵活,我们可以根据设计灵活调整,最常见的是矩形,可以平衡画面,规整,方便排版。

三角形的线框辅助可以加强视觉冲击力,营造个性、别致的感觉。

圆形线框起到聚焦视觉中心点的作用,通常应用在文案的强化设计中。

其它形状具有更多的发挥空间和个性,但不要过于复杂。

5. 表现形式

线框虽然看似简单,但也可以有很丰富的表现形式,通过对线框的「强化设计」,可以丰富线框的设计感。

巧用渐变

丰富画面、个性绚丽。在深色背景中加入线框时,一般选用白色,但如果文字和线框都为白色,往往会感觉单调,此时将线框改为渐变色是个不错的选择。

纹理、质感

加入特殊的纹理、质感,可以与其他元素保持风格统一,使画面更协调。

创意结合

结合主题的创意线框让人眼前一亮。

不规则变化

不规则的变形可以增加俏皮的感觉,不死板。

利用背景元素设计

使线框与整体搭配更统一、协调。

三. 排版方式探索

这部分主要总结一下线框在应用过程与文案、图片结合时常见的设计方式。

1. 与文案

图示中的案例是以矩形作为基础,如果小伙伴们应用了三角形或其它形状,在与文案结合时也基本类似,灵活设计即可。

找了一些三角形案例:

2. 与图片

图片与线框结合可以丰富画面,增强设计感。

好了,到这里总结了在学习banner设计过程中出现的线框的一些用法与设计特点,也希望在以后的设计工作中能够灵活运用这种元素。不知道大家看完有什么启发和建议呢?欢迎留言。

通过这次总结使我认识到无论是生活还是设计,处处都存在细节,而且都有一定的规律可循,所以我也强烈推荐大家在设计时留心各种设计形式和自己觉得很棒的设计元素,做好总结。虽然看起来现在没有什么用处,但要相信厚积而薄发。

欢迎关注作者的微信公众号:

「高手思路教你做Banner设计」

  • 《5个实操改稿案例,教你做出

您可能想查找下面的文章:

  • 如何做好 Banner设计?我总结了这4类基础知识
  • 实战案例!阿里巴巴如何用人工智能做Banner 设计?
  • 如何巧用线条,让你的Banner 更有设计感?
  • Banner设计宝典之可能是最全面的流程分析总结
  • Banner设计宝典系列!玩转9种最常见的设计风格
  • 5个实操改稿案例,教你做出高质量的Banner设计!
  • 2017年天猫双11海报全集,为52家品牌创意疯狂打Call!
  • 没经验没思路?最常用的电商Banner 设计方法都在这
  • 如何巧用Slogan,让Banner变得更有设计感!
  • 高手课堂!3招搞定数字元素在Banner及专题页设计中的运用

相关文章

  • 2018-08-23实战案例!58 招才猫直聘积分系统设计过程总结
  • 2018-08-23帮助新手熟悉产品的向导程序,遵循着怎样的设计模式?
  • 2018-08-23学会这3个方法,零基础也能做出好看的配色
  • 2018-08-23双11期间有1.7 亿个banner,都来自阿里的“鲁班”AI设计系统
  • 2017-08-06博客园CnBlogs自定义博客样式分享
  • 2018-08-23想让作品从80分到100分?你需要这些包装作品的小技巧!(升级篇)
  • 2018-08-23实在干货!为老年用户做体验设计应该注意的6个细节
  • 2018-08-23首度揭秘!春节期间滴滴地图小车图标的换装设计过程
  • 2018-08-23也许你该注意一下影响网页设计的这5个关键指标
  • 2018-08-23Iconfinder 开发了一个超强大的图标在线编辑器!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 看不见的用户体验,教你学会用数据丈量它!
    • 超全面的分享功能设计总结
    • 超实用!6个小技巧帮你打造高转化的网站落地页
    • 10个优秀的 Web UI库/框架
    • 这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞
    • 电商大招!三步教你搞定情人节活动专题页设计及玩法!
    • 哈哈哈!设计师专用表情包合集(一)
    • 想紧跟流行风尚?这5种平面设计趋势了解一下
    • 腾讯内部分享!超全面的互联网金融体验设计的方法库
    • 做网站用UTF-8编码还是GB2312编码?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有