虽说采用符合上线产品的图片能更加体现真实性,但也不能忽视设计稿的配图,设计稿配图的质量可能会直接决定领导或同事对该界面设计好坏的判定标准。
为了保证设计稿配图的高质量,也为了体现真实性,我们可以通过有技巧的配图来提高界面整体的逼格。
本篇文章先介绍如何找到合适的图片,下一篇则会介绍如何保证UI界面配图的整体统一性。
一、图片本身质量
1.高清
好看的配图,图片本身的质量肯定要高,那么何为高质量图片呢?最基本的一点当然是高清,高清也就是高分辨率,我们看视频时知道1080P就算是高清了,图片在1920PX1080P以上就是高清图了,高清图需要注意的一点是占用内存大,一般都超过了1M,在上线界面中我们要对图片进行压缩处理。
2.高品质
除了高清,高品质也非常重要。品质高的图片也就是所谓的“有逼格”,品质低的图片就是所谓的“low”,那么何为高品质呢?图片本身构图、光线、影调、色彩等很出彩,视觉上的感受就是舒服舒服舒服,看到后会不由自主被吸引的图片(不局限于实物摄影图)。
二、有目的的找图
找到高品质的图片还不够,我们需要根据不同的目的性找到更加精准的图片。根据表达主体的不同,我们构图的方式也会有所差异。
1.主体是具体的物品或人物
比如电商、外卖类产品的主体是某个物品,找图片时我们的重点就应该落点到具体的物品上。虽然道理都懂,但找这种具体物品的图片是最头疼的......如果是没有版权顾虑的设计稿或练习稿,可以直接在花瓣搜索关键词+png或是搜电商/食物素材、包装设计等,然后选择画板,这样能找到很多高质量且经过简单处理的素材图,如下图:
主体需要突出某个物品的图片,一般都采用中心构图,强调物品同时,弱化不相关的干扰。
左图网易考拉列表页商品是直接采用了纯白背景,没有做投影,极致的突出了商品本身;右图Keep商城列表页商品则采用的浅灰色背景+投影,质感更强,但工作量要大一些。
2.主体是特定的场景
特定场景的常见界面类型有旅游类、租房民宿类、新闻类产品,这几类产品的配图基本聚集在某一个场景中,根据场景大小的不同分为:大场景构图、局部场景构图、特写近景构图。
旅游类产品如果是以风景展示为主,可以采用大场景构图或局部场景构图,如下图:
左图大场景构图适合山川海洋这种自然景观以及俯瞰城市景色等,右图局部场景构图则更适合展现人文景观、局部景点等。
租房民宿类产品以室内装修展示为主,适合采用局部场景构图。而新闻类产品根据内容的差异三种场景构图都会用到。
3.线下有对应图片
线下有对应图片的产品包括电影类、图书类、漫画类、音乐类等从线下搬至线上的产品,它们本身在长期的实物发展过程中已经相当成熟了,找到合适的配图相对更加容易。
需要注意的是,因为实物本身已经有一个用户熟知的图片比例了,绘制线上界面时也要尽可能还愿对应的比例。比如上图电影海报的标准尺寸是99X69cm(打印尺寸),图书封面是A4的尺寸210mm X 297mm(打印尺寸),专辑封面的比例基本是1:1。
划重点
本期主要介绍了想要做好UI界面,好的配图必不可少。要找到优秀的配图,首先明确图片本身必须是高质量的,其次要根据自身的目的找到最合适的图片。
下一期则会介绍通过保证图片的风格、视觉大小、色彩等的统一,从而保证整体配图的统一性。