网站开发中的banner设计是网站中的灵魂

发布时间:2021-03-30 13:37:01 作者:厚德网络 来源:本站 浏览量:(76) 点赞:(366) 收藏:(366)
摘要:在PC端网站建设就显得单薄,版面空缺,整体不饱满;而在手机端则用的刚刚好,确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱,所以在手机时代,空间陈列图才会呈现井喷式增长。其实合成、三维和摄影都可以实现「空间陈列」,但本书还是以合成为主,而合成的难点就在于如何将产品和空间进行自然融合,不能有违和感

在PC端网站建设就显得单薄,版面空缺,整体不饱满;而在手机端则用的刚刚好,确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱,所以在手机时代,空间陈列图才会呈现井喷式增长。


其实合成、三维和摄影都可以实现「空间陈列」,但本书还是以合成为主,而合成的难点就在于如何将产品和空间进行自然融合,不能有违和感。


若想合的天衣无缝,第一步就是要做到「透视准确」,而透视作为构图中的重要知识点,可以说是无处不在,在前面的章节里也多次提及。我们只有掌握透视的变化规律,才能准确表现出元素的空间关系,如果透视不对,那空间将会失真,下面就来详细讲讲这个理性知识点——透视。


焦点透视

日常生活中,当我们看周围事物时,会有远近、高低、长短、宽窄等不同,这是由于距离、方位等差异在视觉中呈现的不同反映,这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感,它广泛用于绘画、建筑、环艺、设计等诸多领域,而常见的透视共3类:空气透视、散点透视和焦点透视,这3类的侧重点各有不同。


空气透视又称「色彩透视」,由于空气介质的存在(雨、雪、雾、烟等),使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象,例如下方海报中的「烟雨蒙蒙」,这种近实远虚感就是典型的空气透视,随着镜头拉远,山川也变得越来越模糊。



散点透视则是中国画特有的一种透视类型,例如下方的《清明上河图》就是这类透视的代表作,在这五米长的画卷中,很难找出画家的具体观察位置,好似在移动中作画,每到一处画一部分,最后拼接起来,这种视点不断移动的画法就是散点透视,散点透视适合表现景色的波澜壮阔,重在写意,体现一种气势和意境。



而焦点透视才是本文重点,它是透视学中的核心理论,也是西方绘画所遵循的透视原则,最早研究透视就是从这里开始,如果散点透视是「写意」,那焦点透视则「写实」,一切都以客观还原为准。


例如名画《最后的晚餐》,所有视线都汇聚一点(称为灭点),营造出一种立体空间感,这些就像自己身处画面中央所看到的逼真景象。



而我们在设计中常说的透视也都指「焦点透视」,这是我们需要掌握的重中之重。记得高中学习素描时,老师就说画静物要「近大远小」,其实就是对焦点透视最为形象的描述,例如草地上的奶牛,离我们越近就越大,越远则越小,正是这种近大远小的透视变化才使场景有了空间和层次。



观察视角

在介绍焦点透视前,我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼(称为视点)在观察事物时视线之间所形成的角度。


如下图所示,其实就是人眼观看角度的变化,常见有3种:当我们平视前方时就是「平视视角」;仰头看时则是「仰视视角」;低头看时便是「俯视视角」。


其中平视时人眼和物体形成的假想连线称为「水平视线」,这是判断视角高低的参考线。



当我们将产品放入空间时,就要根据陈列形式选择合适视角,从下方的示意图中能看到,三种视角给人的感受都不相同:


平视有种方方正正感,给人一种非常自然的观察感受,虽然中规中矩但视觉舒服;

仰视则能体现产品的高大和气势,用来烘托价值感;

而俯视最接近我们日常看桌面小物品的视角,很真实也很亲切,同时还凸显了产品的立体感。

Banner设计技巧方法之空间陈列法


而上图的仰视和俯视都属于小视角,即产品视线和水平视线的夹角较小,这是设计中的常见视角,大概就是把头微微抬起或低下时看到的场景,这时画面最自然也最舒服。反之若视角过大,即头抬的很高或压的很低时,这时产品的形变就很夸张,显得刻意、不舒服。


说完3种视角,现在正式讲解焦点透视,一般根据物体灭点的数量不同,焦点透视又分3种:平行透视(一点透视)、成角透视(两点透视)和斜角透视(三点透视),它们都有各自的透视效果和适用范围,但若铺开讲会很复杂,因此下面就结合「空间陈列」进行介绍。


1. 平行透视


用立方体简单说明,就是有一面与画面平行,这时物体的厚度边线若向内延伸,最后都会汇聚到1个点上,因此又称「一点透视」。这是最简单也最易掌握的一种透视形式,其中汇聚点称为「灭点」,而灭点所在的那条线则是「视平线」,即与人眼等高的一条水平线。


Banner设计技巧方法之空间陈列法


再来看看平行透视在生活中的场景呈现,如图所示,将各种景物进行前后连线并延伸,最后都是汇到一点才消失。平行透视适合表现场景纵深,给人一种正式感和平和感。



电商网站建设中的产品展示也一样,例如下方示意图中,不管哪种视角,产品和立方体都是正对观众,让人觉得摆放角度正正好。



总体来说平行透视只有1个灭点,变化并不多,视觉表现单一,没有太多的空间变化,基本就是从正面来表现整个场景,因此上手简单,只要确保前后连线都汇聚一点即可,这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感,显得很平,此时可尝试俯视视角或者强化背景的空间纵深。


下面展示平行透视在3种视角下的应用案例,注意观察不同视角下的产品呈现和透视变化,虽然微妙,但每种视角确实给人不一样的视觉感受。


平行平视


当画面为平行透视和平视视角时,这时的观察位置很正。如下图所示,空间和产品都显得有些平整,虽然场景的立体感较弱,但视觉舒服协调,表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处,即是说人眼此时正对前方物体的中心,这样才会有平视效果。


厚德网络微信

扫一扫,加微信

TAGS

网站功能 网站结构 网页布局 网站图片 网站导航栏 网站板块 网站优化 外贸网站建设 .com域名 .cn域名 .net域名 Google PR值 网站流量 自适应 网页设计 屏幕宽度 企业网站 颜色 布局 系统平台 屏幕尺寸 屏幕定向 用户体验 SEO优化 营销功能 Title标题 论坛博客 内部链接 触手可及 扫一扫 用完即走 后台开发 网站推广 产品展示 企业文化 在线咨询 WAP WML GPRS 百度搜索 百度联盟 企业推广 企业形象 品牌知名度 品牌定位 电脑 用户依赖度 宣传广泛 成品模板 仿制型模板 手工模板 搜索引擎 综合性 地方生活 公众媒体 内部员工 投资合作 网站改版 自定义栏目 提高排名 稳定性 安全性 速度快 ICP ICP备案 ICP证 B2B模式 B2C模式 C2C模式 404页面 301重定向 动态url 虚拟主机 网站空间 服务器 HTML CSS JavaScript 碎片化 多感官体验 交互性 关键词 点击付费 竞价 微官网 微信 HTML5 App IOS Android 内容更新 网站维护 搜索优化 https http ssl 幼儿园课程宣传 幼儿园网站建设 办公用品公司网站建设案例 大学网站优化案例 设计公司网站建设案例模板 学校网站设计模板 财税服务网站制作模板案例 网络硬件网站建设案例模板 印刷公司网站设计模板 眼镜行业网站开发案例模板 户外运动网站设计案例模板 珠宝首饰网站建设制作案例 翻译公司网站建设实例 农家乐网站制作案例模板 瑜伽舞蹈培训学校网站建设实例 健身器材网站设计案例 小程序建设 关键词优化推广 教育类小程序开发 家居定制公司网站建设案例 关键词推广案例 照明行业小程序 餐厅网站制作模板案例 五金水龙头网站建设案例模板 苗木公司网站建设模板 seo优化推广 汽车4s店网站开发案例 瑜伽网站设计 瑜伽网站制作 关键词推广 教育小程序开发 商城小程序建设 关键词seo优化 肥料公司网站搭建 官网建设 光伏网站建设 建材网站建设 建材官网制作 家居小程序搭建 关键词优化案例 杂志社网站搭建 杂志网站设计 桥梁模板网站搭建 肥料公司网站建设 杂志社网站制作 餐饮公司网站设计 改灯公司网站设计 改灯网站制作 工业吸尘器网站制作 吸尘器网站开发 医院网站建设 医院品牌营销 生物公司网站建设


感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,营销型网站,手机网站,响应式网站,SEO优化,小程序开发

立即咨询 155-6200-1135