首页 > 网页教程 > 设计分享 > 12个让数字更具设计感的实用方法分享

12个让数字更具设计感的实用方法分享

时间:2019-10-04    来源:研习设

@研习设K先生 :今天和大家聊一聊「刻画版式中的数字」。说到数字,相信大家再熟悉不过了。数字,出现在我们生活中的方方面面。起床的时候,盘算着要不要再睡 5 分钟,还要想一想什么时候才能到星期五。工作的时候,打开文件夹,「哇~已经做到第 5 稿了,不慌,我还能打 10 个」。躺床上刷手机的时候,还得看看喜欢的品牌有没有做活动,有没有打折的商品……

实际上生活中的数字,无非就是与时间、金钱、数量等挂钩。说了这么多,数字到底是什么呢?本期的讲解,就让我们从科普开始。

什么是数字?

什么是数字?数字其实是一种用来表示数的书写符号。

我们来看一下上图列出来的这组数字,都是数字「1」在不同文字系统下的不同写法,依次分别是阿拉伯数字、罗马数字、中文数字的大写和小写形式。

简单看一下,四种书写方式下所有数字的具体写法。在这里,大家需要注意的是,我们所说的数字,一定是指0、1、2、3、4、5、6、7、8、9,这十个数字。而像「100」、「2019」或者「12894」这种具体的数值就叫作「数」,他们就不是数字。因为从「0」到「9」这 10 个数字已经可以构成任何量的数了。而我们平时使用最多的就属阿拉伯数字了。

在生活中,我们每天都要和数字打交道。在我们的设计中,同样也是如此。在版式设计中,数字的使用非常广泛,比如说时间信息,周年庆典,促销活动,诞辰纪念等等场景都会用到数字。那同样的,在平时工作中,我们最常用的也通常就是阿拉伯数字。接下来,让我们一起来看一看,在版式设计中,各种场景下常用的数字刻画方法。

方法一

我们来看第一个,在画面中出现了一组圆形构成的矩阵。

如果我们改变其中一些圆形的颜色,就可以看到画面中出现了「01」这个数。那这是数字刻画的第一种方法的原理,由重复的单元形拼凑成数字,或者是由这些单元形拼凑后形成的负空间来变成数字。如何理解呢?

大家看到,在去掉了绿色的圆形后,我们依然能识别出画面中的数,而这就是由拼凑后的负空间所形成的数。

相反的,我们去掉灰色圆,拿回绿色圆,依然能看到01这个数,这就是所说的通过单元形拼凑而成的数。

首先来看个海报,这里的单元形,相对来说还是比较偏大的。版面中同样也是用圆形波点作为单元形,拼凑出了「330」这个数,这里同时使用了直接拼凑,和负空间拼凑。

值得一提的是,理论上,这里的单元形是可以替换成任何其他元素的,他可以是简单的几何图形,也可以是实际的物体,比如瓶盖、面包,甚至是飞机、坦克,都是可以的。咱有多大胆,版面就有多大产。

第二个,用了类似药丸的物体作为单元形,做出洒落在平面的效果,利用文字反白造成了仿佛是由小药丸的负空间拼凑而成的效果。

这里的数字虽然不是真正拼凑而成的,但依然有相近的视觉效果。实际上真正的拼凑在制作上还是有一定的难度的,所以有时候大家也可以适当地采取像这样取巧的方法,在短时间内也能取得不错的效果。

第三幅作品,构成数字「6」的元素就更加微小了。

不难察觉,构成数字的单元形越是精细,所构成的数字也就越写实越容易识别,反之则越抽象。这就和构成图像的像素点十分相像了。大家都知道,像素越多,图像也就越清晰。所以,在实际应用的时候,我们可以根据项目的需要,调整单元形大小,从而构成不一样的版面感觉。

方法二

第二种方法,给数字添加手绘的五官、四肢等元素,让数字拟人化,或者是动物化,仿佛赋予了数字生命的气息。这点还是非常直观的,相信不需要多做解释。

还是来看作品,不难看出这是与促销有关的,数字「0」提取自「今日运费0元」。版面中把「0」塑造成了一个可爱的超人的模样,大家熟知的超人是可以轻松飞行的,很简单就能联想到运输也很轻松,这样也就不需要运费了。

继续看第二个,画面主题是「驾乘爱车10年乘车计划」,版面中把「1」和「0」分别描绘成了丹顶鹤以及乌龟。在传统印象里,这两种动物都代表了长寿,这也与主题「10年」是契合的。

再看这个海报,「10」提取自「敲击乐协会成立十周年」,所以版面中的 10 也是塑造成了三只手在敲鼓的画面,一个人只有两只手,三只手也意味着协会的团结合作。

通过给数字添加五官、四肢等元素,可以赋予数字活力,从而显得十分生动有趣,拟人化动物化的感觉也显得十分可爱,惹人亲近。

方法三

第三种,是在数字的内部负空间,编排文字或置入图形、图片。虚线框出的部分就是数字的负空间,这不难理解。

而值得注意的是,像红色区域这种比较小的或比较碎的负空间,并不太适合编排其他元素。

所以,像 0、6、8 等这样有大块完整负空间的数字更适合这种刻画方法。当然,这并不是绝对的。

又一个促销海报,大家看版面中百分号以及「OFF」被编排到了数字「0」的内部,这样既填补了「0」内部的负空间,也节省出了版面中原本会用来编排这些文字的空间,一来一回,无形中让留白变得更少更完整。

再来看这个文字组合,主题是「博物馆开馆120周年纪念」,同样也是在「0」的负空间内进行编排,这回除了文字,同时置入了博物馆剪影的图形,非常直观。

一个优秀的作品中往往有许多值得让人学习的地方。在这个版面中,展览时间的表现就十分有趣,在数字和日期的负空间内加入了几何图形,十分耐人寻味。

通过这样的方法,在数字之中编排了更多的元素,让画面显得更加热闹,图形元素的加入也会让整体呈现更加生动。这样有些小心机的编排,比起常规的套路显然也更加有趣好玩。那么下面让我们根据这样的方法,也来玩一下数字。

通过阅读文案,我们知道这是一个与周年庆典有关的海报。

我们简单粗暴的提取一下关键词「10周年」, 作为主体先置入到版面中。然后根据层级关系,依次编排文字。

我们再加入一些元素,让版面看起来更完整一些。到这一步我们再回到主体,选择在数字「0」的内部置入一张展览作品。最后,再根据置入作品色调,调整一下版面的颜色,这样案例就完成了。

方法四

紧接着,给大家介绍第四招,也就是用几何图形或图形元素构成数字。

这是一个与周年庆典有关的版面,主题是「石建大学建校58周年」。周年庆典是一件令人愉悦的事情,而版面中几何图形和点元素的构成,同样也有这种热闹轻松的感觉,整体明快的色调也加强了这种印象。

第二个作品氛围就完全不一样了,黑白色调和居中对齐的文字传达出一种庄重感,画面中的「101」取自「日本摄影史上的101位巨匠」。怎样的人才能称作巨匠呢?是作为后代楷模、理想或有着里程碑式的过去的人。版面中厚重的几何色块仿佛就是一块块里程碑,分量感十足。

再来看第三个,整个版面的英文和数字都由几何图形构成,风格十分强烈。并且,这里也同时使用了之前讲过的,在数字和字母负空间编排元素的方法,填补了多余琐碎的留白,让整体的观感更一致。

总结一下,用几何图形构成数字,可以是点元素、线元素或是面元素,当然也可以将他们综合应用。

数字经过这样几何化的处理,多了些抽象的感觉。排列整齐的图形元素也可以形成一种原数字所不具备的秩序感,点元素的加入也可以轻易让版面变得更加热闹。那么接下来让我们也尝试使用一下这种方法,来完成一个海报。

阅读文案后发现,这就是一个关于数字的展览活动,可以考虑将 10 个数字作为主形象。

从主题「人与数字」出发,为了表达这种关系紧密的感觉,可以采用全包围的构图。那么我们就可以开始编排文字了,逐步将文字置入版面的每个边角。

文字内容编排完毕,开始刻画主体。将不同几何图形构成的数字依次置入版面,相互叠压。在这里,可以将数字 8 的构成形式与数字 2 保持一致,适当减少一些变化性,也能有一个呼应。这样版面就大概完成了。最后一步,置入一些线元素将文字与图案区隔开来,增强阅读性的同时也让版面看起来能更完整一些。这样案例也就完成了。

方法五

接下来是第五种方法,也就是给数字添加纹理。同样,我们还是先来看作品。

这款海报用了一个日历的形式,来表达这个需要永远铭记的日子。「13」也正是代表了这一天的日期,用极粗的字重,和斑驳的纹理共同表现出了这种沉重,凄凉的氛围。

相关推荐
平面设计与网页设计的差异性浅析
网站设计教程分享 回归内容“简洁大气”设计指南
优秀网页/平面设计师是怎样炼成的
平面设计中关于控制视觉层次的设计方法
网站Banner广告设计经验谈
一个设计师的成长:或许要经历的5个阶段
关门涨姿势!如何从AV封面中学习平面设计?
10个简单实用的平面设计方法分享
学多不如错少!五个最常见的设计思维误区
精彩总在下半夜:如何从AV封面中学平面设计
字体设计教程:字体还能这么玩 聊聊文字的“性取向”
读懂十大未来设计趋势,别让你的设计白费力气
为什么页面跟设计稿差距这么大?是啊!为毛啊?
UI、UX傻傻分不清楚?来一份清晰详尽的设计师分工指南
亲历者说!日本的平面设计水平为什么这么高?
年度总结:最新视觉设计六大趋势分享
设计师实战总结:如何自学平面设计?
创意思维:如何进行封面设计?
设计分享:新手如何快速入门版式规划?
什么是构图?设计都有那些构图原则?
9个案例让你了解版式设计的基本规则
数字元素在BANNER及专题页设计中的运用
如何让网站首页设计得极具吸引力?
移动终端全新界面设计语言“Metro”简析
淘宝品牌名店的BANNER广告设计评价及分析(2)
优秀排版设计的8条建议
版式设计:深入浅出学会网格系统的应用
如何学会版式设计中的主要元素提取?
文字排版设计:如何设计出吸引视线的标题?
如何用超大字体元素应用在设计作品集类的网站?
分享:设计法则之恐惧留白 Horror Vacui
什么是“整体网页设计”?整体网页设计工作原理
版式设计:不一样的网页布局之“方块布局”
分享:99%的人在做网站设计时都用错了留白!
留白设计:设计中的留白要如何做?
8种网页和APP背景设计趋势分享

精彩推荐

热门教程