让人看了就想买的设计,是怎样用对图片的?(3)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

让人看了就想买的设计,是怎样用对图片的?

两张单页放起对比一下,不难看出哪个更好。

注意图片色调与方向

让人看了就想买的设计,是怎样用对图片的?

这我们以原研哉与阿部雅世的对话为例,当要使用的照片具有方向性时,要根据内容和照片主的角度来摆放,两位设计师面部的朝向都是向外,这样就不符合对话的这种形式了。

让人看了就想买的设计,是怎样用对图片的?

让人看了就想买的设计,是怎样用对图片的?

好,我们把朝向转过来,统一图片内人物大小,再看色调,阿部雅世是偏明色调,原研哉是暗色调,妨给他们统一为黑白色调,这样整体画面就加统一协调了。

表现时间的流动或对比

让人看了就想买的设计,是怎样用对图片的?

如果给你看一个这样的绘画流程图,想必你会很懵逼,这是个高手,完全不按套路画,我要把序号标注上你就知道步骤的顺序是怎样的,可是这样视线会非常跳跃,影响信息的接收。

让人看了就想买的设计,是怎样用对图片的?

步骤流程从左至右依次排,这样就不乱了,也就是说,多张图片按照时间流程排,能凸出照片关联性,可以表现时间流动或者对比。

让人看了就想买的设计,是怎样用对图片的?

拿个案来说,这是被打乱的编发步骤。

让人看了就想买的设计,是怎样用对图片的?

首先给它规划时间顺序,让人一目然,这样再编排到版面中,就很清晰了。

用多张照片进排版时,需要根据作品的用途和目的,将照片分为“主”和“次”等层级,对其提示的信息进调整,要强调关联性的时候可以就近摆放,要弱化时则远离摆放,这样明确显示出信息的同。

让人看了就想买的设计,是怎样用对图片的?

这我们以日本四张旅游景点照片为素材,做一页画册设计。

让人看了就想买的设计,是怎样用对图片的?

当我想突出日本人文情怀时,就把与之相关的照片放大,其他照片缩小,这样图片的对比就能更准确的传递信息(文字为模拟)。

让人看了就想买的设计,是怎样用对图片的?

如果我想表现都市繁华的感觉,放大这张照片,其他照片缩小为同等比例。

让人看了就想买的设计,是怎样用对图片的?

想表现建筑特色和特别著名的旅游景点时,选择它放大。

让人看了就想买的设计,是怎样用对图片的?

如果凸出态环境呢,就放大动物的自然环境的图片。

让人看了就想买的设计,是怎样用对图片的?

如果把所有照片按照同样大小、同样距离摆放,所有信息会均等的传递给受众,使整体氛围很平淡。但是同样有两点需要注意:

让人看了就想买的设计,是怎样用对图片的?

第一,类似内容或类似色调要靠近放置,这左边这两张是街道图片,放在一起,右边是关于风景的图片,同样放在一起,色调相近也可以靠近摆放,左边是暖色调,右边是冷色调。

让人看了就想买的设计,是怎样用对图片的?

让人看了就想买的设计,是怎样用对图片的?

第二,放置图片时要意识到视线移动,视线在横排时候是从左至右Z字形移动,竖排时是从右上到左下N字形移动,要意识到这种移动规则,人的阅读习惯来诱导视线,才能做出更好的版面。

案例演示

设计一个网页

让人看了就想买的设计,是怎样用对图片的?

用这些大小一、度不同、色调一致的图片,设计一个宜家居的网页。

让人看了就想买的设计,是怎样用对图片的?

这个网页我们来一屏一屏的设计,首先就是头图,头图我们选择一个场景图也就是前面我们讲过的,产品使用场景图,使用产品的这种代入感加具体形象,以它作为背景,加入文字与网页组件以及logo。

让人看了就想买的设计,是怎样用对图片的?

这部分我们想放跳往二级目录的指引,分三个部分,热搜产品、限发售、畅销推荐,以三个角度同的去底照片来展示,区分各项的类别。

让人看了就想买的设计,是怎样用对图片的?

中间可以穿插一个视频作为过度

让人看了就想买的设计,是怎样用对图片的?

这一屏是座椅,因为图片本身大小不一,所以我们划分六个相同的色块,统一大小,展示三个同度的照片,然后有两个局部特写,让消费者有个直观的感受,增加消费者对产品的信赖。

让人看了就想买的设计,是怎样用对图片的?

下一屏我们来展现儿童的玩具,在此之前,需要一个主图,作为过渡,小孩抱着玩偶属于使用时的照片,有种真实性和亲切感。然后我们配以手写的英文字体,来呼应画面传递的气质。

让人看了就想买的设计,是怎样用对图片的?

展示玩偶商品,调整成同样的度,大小一致,放入产品信息。

让人看了就想买的设计,是怎样用对图片的?

这一屏是家居使用场景图,色调一致,看来不需要做任何调整,但是我们在上面加文字就很难凸显出来,所以,加个暗色调,做透明的处,再加入相关的文字。

让人看了就想买的设计,是怎样用对图片的?

底部规范一下文字信息

让人看了就想买的设计,是怎样用对图片的?

 收藏