七彩设计网
  • 首页
  • 干货导航
    • 入门教程
    • 设计检查
    • 疑惑解答
    • 往期活动
    • 站长历程
    • 公号联盟
  • 教程
    • 视频教程
      • B站视频集
      • AE视频集
      • 调整中
    • Photoshop
    • Illustrator
    • XD
      • 软件下载
      • 快捷键
    • AE动效
      • 视频教程
    • SKetch
    • icon图标
      • 布尔运算
    • APP设计
      • 标注
      • 切图
      • 尺寸
      • 适配方法
      • 设计规范
    • 网页设计
      • 设计规范
    • 交互/原型
      • Flinto
      • Principle
      • mockplus
    • H5设计
    • 小程序
    • 色彩搭配
    • 版式构图
    • Banner
    • 手绘插画
    • LOGO字体
    • 其他教程
  • 经验
    • 咋找灵感
    • 流行趋势
    • 设计原则
    • 设计规范
    • 设计理论
    • 学习方法
    • 项目总结
    • 话题讨论
  • 学堂
    • 在线课程
    • 0基础班
    • UI高级班
    • 学员作品
    • 视频课程
  • 交作业
    • 图标作业
    • APP作业
    • 动效作业
    • 后台界面
    • 学画原型
    • 绘画作业
  • 欣赏
    • 佳作欣赏
    • APP截图
    • ICON欣赏
    • 启动图标
    • 插画欣赏
    • iPad界面
    • 后台界面
  • 下载
    • APP截图包
    • 展示模板
    • uikit
    • APP模版
    • PS插件
    • 字体下载
    • icon下载
    • UI规范
    • 网站模板
    • 精品素材
    • 神器工具
    • 在线工具
    • 软件后台
  • 找工作
    • 面试技巧
    • 简历作品集
    • 职场疑惑
    • 私活报价
    • 作品样本
免注册快速登录

原创 | 排版《玉女心经》之图版率!

路野TK 版式构图 2020-09-26 383浏览

引言:今天寡人又带来一篇十足的干货,安全无毒,放心食用!今个儿,咱继续修炼《玉女心经》,来唠嗑唠嗑【图版率】!图版率,乍一看好像是高深莫测东西,感觉有点意思,有点不明觉厉哟。但说白了就是,图片在版面中所占的比例。再直白点,就是图片大小。

 

1.下面俩海报,哪个更有亲和力?

这还用说嘛,当然是「楚楚动人B」了!

毕竟「索然无味A」连个图都木得(déi),那么高冷,亲和力自然就弱。

反观「楚楚动人B」,仅仅加了一个图就生机盎然,亲和力暴增。

简直惹人怜爱,当真楚楚动人。

 

 

2.下面又俩海报,哪个更更有亲和力?

诶?这不是上面惹人怜爱的「楚楚动人B」嘛,

但跟「落落大方C」比起来,好像就没有那么惹人怜爱了呢,看来亲和力虽然可以,但还是不如C呀。

C为撒亲和力比B大呢?貌似是因为C的图比B大!(害,本猫果然喜欢大的

ABC同样的内容、同样的图片,为啥给人不同的感觉?

正是因为图片的大小不同。

而这,就回到我们今天的主题——图版率了。

告诉本宫,图版率为何物?

图版率,乍一看好像是高深莫测东西,感觉有点意思,有点不明觉厉哟。

但说白了就是,图片在版面中所占的比例。

再直白点,就是图片大小。

嘿!朕讲的果然通俗易懂!

让寡人来举个例子来详细说道说道。

上面版式,因为全是字而没有图,图版率就是0。

 

这个版面,图所占的面积占整个版面的1/5左右,图版率就是20%。

 

这个版面,图片占比达到了整个版面的一半还多,那妥妥的图版率占了50%以上。

 

注意:

图版率可不是指单个图片的占比哟,

而是指,所有图片加起来的占比。

比如下面这个作品,有好几张图片。

图片加起来占整个版面的一半左右,那么图版率也是50%噢。(小声道:确实通俗易懂)

整挺好!

知名设计师鲁迅曾说:

光知道图版率有啥用?

大家伙儿得了解它怎么用才行!

 

告诉本宫,图版率怎么用?
爱妃莫急,朕这就告诉你们(没错,朕佳丽三千~

图版率既然是指图片占比的大小。

那自然不同的占比会传达不同的感觉。

而运用的关键就在于,要知道不同图版率所带来的结果。

图版率有两条黄金规律:
 

1.图版率越大,表现力&亲和力就越强。

2.图版率越小,格调感&枯燥感就越强。

其实这两条,上面的例子已经能说明啦。

但咱这里,还是要详细说说。

先来瞅瞅第一条。

图版率越大,表现力&亲和力就越强。

有科学数据表明,人们对画面的好感,会随着图版率的增加而增加。(也对。全是字,谁吖会耐心看~
不然朕的文章为撒子会放这么多表情包!还不是为了提高图版率咩~

主要是给大家送欢乐,愉快的学习总是那么浪漫,吼吼

图版率增加了,

好感度也就有了,

别人也就更喜欢了,

表现力自然就更强了,

亲和力自然就更更强了。

图版率在50%左右时,好感度会急剧上升。
这里有爱妃就说了:既然图版率越大,亲和力就越大,那我要极致的亲和力,图版率调成100%不就行了?

行吗?那自然是不行的。

虽然越大的图版率亲和力就越强,但也是有极值的。

一旦图版率超过90%,好感度反而会降低。

不信咱看一看这个100%图版率的图~

只有图没有字,图占满了整个版面。当真妥妥的100%图版率。

虽然是极致的图版率,但是不是感觉很空洞,亲和力好感度反而低了。

所以想要极致的亲和力,图版率100%是不行的。

不行就是不行,就算狗腿儿打断,也是万万不行的~

现在咱们要对这个版面做点不好的事情

那就是给它加点文字。

 

看吧,看吧!

虽然只是在左上角稍微加了点文字,版面却比之前有生气了,亲和力也提高了一点哟!

稍微加了一点文字,缓和了之前空洞、单调的感觉,版面的活力也比之前好了。

再来瞅瞅第二条

图版率越小,格调感&枯燥感就越强。

图占得比例越小,读的欲望就越低。

这种版面内心感受是这样的:

格老子的,爱咋咋地。老子就长这样,爱看不看!

客官您看,这是不是特高冷,特有范儿!

“喜欢老子的自然会看,不喜欢的咱也不强求。”这就是所谓的大佬吧。

所以这种有格调的,高冷的,咱就可以用低图版率。

但图版率越低,版面的枯燥感就会越强,这个就比较负面了。

那么问题就来了:

图版率0%,怎么搞才能不枯燥呢?

答案是通过不同文字层级、大小对比,不同字体来营造趣味性。

而这就引出下一篇《玉女心经》中的又一杀招——文字跳跃率了。

这一点,咱下期干货会重点讲,这里就仅放张图略过吧~

俩图的图版率都是0,

但「大大小小B」相比「平平无奇A」来说,

用了不同的层级关系、不同字体来表现,

亲和力就比A好撒~

毕竟,人们还是喜欢多元的东西,

天天吃一个菜,再好吃也会腻撒!

(嘿!寡人就是喜新厌旧了~)

有人就问了,低图版率和高图版率怎么去界定呢?

其实我们可以参考40%这个值,

低于这个值的就是低图版率,

高于这个值的就是高图版率。

当然了,这个值是寡人定的(莫要打我,呜呜),

所以只起到参考作用哟!

知道了图版率的多寡对版面带来的影响后。

朕就要举办科举考试,来反向测一下众爱卿的掌握情况。

来吧,请听题~

 

1.要表现有格调、高冷的感觉,应该用高图版率还是低图版率?

低图版率!

这个对页,图片只占了10%的版面,给人感觉就是有点格调咯,

当然,也有点乏味。

再来瞅瞅下面这个~

这个因为文字的编排原因,格调感比上面的强多了!

更重要的一点,是人家图版率非常低。

云的图片因为跟背景非常相似,可以不算到图版率中,有效图版率也就是最下面的小人。

所以格调感必须强呀。
 

再来看最后一个~

这个网页,图片就只有下面的俩人,图版率就很低,10%都不到。

给人的感觉就是比较高冷,比较有格调的。

 

2.要表现活泼和张力,应该用高图版率还是低图版率?

高图版率!

超高的图版率加上少量文字,给人的感觉就非常的活泼!

 

这个作品虽然是黑白的,但图版率占比很大,所以尽管是黑白的,给人的感觉也是比较有张力的!

所以,版面率的多寡取决于你项目的调性。

内向的、安静的,咱就用低图版率。

外向的、奔放的,咱就用高图版率!

见不得人的那就……那就别放呗!

表现力&图版率有啥区别?

上篇咱说了表现力,那么表现力跟图版率有啥区别呢?

咱就这么说吧,

图版率完全一样的版面,表现力可能不同。
 

比如咱看一下这个版面,图版率和排版完全一致,但「含蓄的B」视觉表现力比「内敛的A」强多了。
 
这个就是表现力不同所造成的~
根据寡人上篇干货中说的,表现力排序为:插图>照片>文字。

而插图与照片当中根据画面焦点则能排序为:人物>动物>物体>没有焦点的图(如风景照)

关于表现力,具体可以翻看上篇原创文章哟~

这里寡人再捋一捋吧。

低图版率→→→版面安静、高冷,但也无趣。
低表现力→→→版面安静、高冷,也很无趣。
高图版率→→→版面亲和力强、更活泼。
高表现力→→→版面更活泼,更放荡(跟朕一样)

两者某种程度上传达的感觉是差不多的。但图版率更多的是图片占比的大小,而与图片本身的表现力无关。

况且,咱们说的排版《玉女心经》中的八奇技,设计时都要综合考虑。

咱现在八奇技学了俩了,就综合用他一用。

是时候让老夫传授传授组合拳了!

 

低图版率+低表现力图片是什么感觉?

两个都是安静+高冷+无趣,强强相加,那必须是极致的高冷和无趣呗!

这个全是字, 那就是极低的图版率+极低的表现力,最后的结果就是很无聊、很正式。

只能在文字的编排上加点韵律活络一下版面。

虽如此,但还是杯水车薪,无聊的一批!

这个主页,图版率低,图片也是风景之类的表现力不强的图。给人的感觉也是优雅、有格调的。

 

高图版率+高表现力图片是什么感觉呢?

这还用说,两者都是亲和力+活泼+放荡,那组合起来必须是极致的活泼和放肆!

这个作品版面中除了到处都是图,还用了表现力超强插图类型。那自然是男上加男,更活泼了!

 

再来看下面这个

这个版面到处都是人物的图片,图版率自然就高。况且元素丰富饱满,表现力也很高!

 

给人的感觉简直是放肆!

这俩组合都能理解,没有难度吧。

接下来就是有难度的了!也就是不同的图版率和表现力的组合,会是撒子感觉。

 
低图版率+高表现力

其实低图版率就注定了翻不起大浪!

所以一般低图版率+高表现力的形式也会很有格调感,但枯燥感会降低很多。

上面作品采用的就是低图版率+高表现力(人物照片)的形式,给人感觉比较优雅、有格调。

也不至于那么单调。

图版率低+人物照片(高表现力),给人的感觉也是比较优雅简约吧!

 

同样低图版率(比上面俩稍微高些)+高表现力,同样是比较优雅有格调的。

 

高图版率+低表现力

这个也比较有意思!

高图版率但低表现力,给人的感觉会更有趣一点!而且虽然图版率高,但会给人简约+干净的感觉。

这个海报虽然是满版,但因为照片是风景照,比较开阔,表现力不高。给人的感觉就比较干净,没那么放荡!

这个嘛,跟上面的同理,高图版率+低表现力,给人很清新的感觉!

再看这个

这里就有爱卿问了,这么多特写的手,这不应该是高表现力嘛?

本来应该是高表现力没错,但手的颜色跟背景太过接近,仿佛融为一体。所以在这个版面中其实是算低表现力的。

高图版率+低表现力,造成的结果就是很有格调,同时也很有设计感。

再来看下面这个~

这个就比较过分了,上面还是手,现在直接搞个人像上来!

表现力和图版率都这么高,但给人感觉却并不是那么放肆,这不是打朕的脸嘛?

这到底是为啥呢?其实也是因为色彩。

人像的颜色跟背景很接近,所以表现力只能算中,并不是特别高。

勉为其难就算 高图版率+中表现力。给人的感觉虽然简约,但已经比低表现力的强多了!

其实大多数时候,图片表现力的大小是需要我们主观去判断的。

毕竟理论是死的,

人是活的。

世界是向前发展的,

万物是在变化的。

而大猫,

是在不断变帅的!

以上~

唉~写干货上瘾了,一不小心就写了快4000字了呢。

虽写了这么多,但咱也不知道咱这套《玉女心经》有木有把图版率说清楚。

所以有木有说明白,各位大佬留言告诉我吧~

下一篇原创,咱就继续传授《玉女心经》,准备好姿势,要快要帅!

 

原文地址:大猫设计(公众号)

作者:大猫Sunjay

 

转载请注明:七彩设计网 » 原创 | 排版《玉女心经》之图版率!

登录收藏
 
你可能喜欢的:
​设计师必看的字体与排版应用指南​设计师必看的字体与排版应用指南
个性的魅力,音乐、戏剧海报集锦【贺冰凇视觉艺术】个性的魅力,音乐、戏剧海报集锦【贺冰凇视觉艺术】
平面设计中的构图与形状2
说真的,美食海报其实很简单
平面设计中的构图与形状1
你真的,会做高端海报吗?
原创 | 排版还不会,那可能是没看过这套《玉女心经》!
界面设计中,你懂得如何更好的运用版式设计吗?
商业海报改稿案例,对你有帮助吗?
除了原研哉,还有哪些值得关注的日本著名设计大师?
继续浏览有关 排版构图 的文章
上一篇 【交互设计】新人转化落地页 耍好控件 | 如何做好「按钮」的用户体验? 下一篇
文章评论

软件教程

  • PS教程
  • AI教程
  • AE教程
  • XD
  • Sketch
  • Principle

今日文章

  • 《符号学》在设计领域的应用《符号学》在设计领域的应用2020-10-03
  • 做设计有一道及格线,标准肯定是“它”做设计有一道及格线,标准肯定是“它”2020-10-02
  • ​设计师必看的字体与排版应用指南​设计师必看的字体与排版应用指南2020-10-01
  • APP设计实例解析,深色模式为什么突然就火了?APP设计实例解析,深色模式为什么突然就火了?2020-09-30
  • 个性的魅力,音乐、戏剧海报集锦【贺冰凇视觉艺术】个性的魅力,音乐、戏剧海报集锦【贺冰凇视觉艺术】2020-09-30


建议/投稿 | 关于我们 | 免责声明 | 文章存档 | 标签云 | 粤ICP备16101670号-2 © 2020 七彩设计网