界面设计中素材的处理技巧——ARTUI用户体验设计学院

UI设计中，除了界面整体的布局，还有一些图标、插画的设计，大部分都是素材的填充，而这么重要的部分往往被设计师所忽略。

对于素材的随意挑选，殊不知选图的技巧和方法有很多，众多素材中如何找到我们心仪的配图呢？这就是今天要和大家分享的主题，用科学合理的方法找到最合适的素材。

一、选择配图的常见错误

在为产品寻找配图素材时，是一个长久过程。所以素材的运用即能帮你提升界面的效果，也能拉低界面的效果，很多设计师不在意选材的重要性，往往因为配图后界面效果还不如原型图看起来规范好看。下面我总结出三个方法可以提升配图的效果。

1、素材与用户预期：

不真正调研产品的用户群里和心里。搭配的素材必然达不到用户预期。每款产品的使用人群是不同的，我们的素材配图要符合产品使用人群的预期。

如下图：是一款有关于售车的界面效果，此项目的用户的目标已经确定，主为高端用户，我们来看看左右配图的区别。

左图中我们在找配图时如果不能保证对高端车的认知，必然会有低端车的产品图的出现，由于不符合产品的使用人群，给用户造成心理落差；而右图则是我们了解高端车后的选图，内容是符合用户心理预期的，同时通过配图再次提升产品的逼格。

PS：我上面说到图片内容的心理预期与用户不符，其实在关于选图上，也是存在这个问题的，例如左侧是通过百度找到的素材，不够精致，无法提高界面的整体效果，而右侧则是在站酷海洛找到的素材：

只要进行裁剪，缩放比例即可使用，界面整体档次也提升很多。

2、素材与主视觉：

说到主视觉，就先要说说有关颜色的归类，颜色主要分为暖色系，冷色系和中性色系三种，在界面中不同的颜色可以带来不一样的感受，如果不理解主视觉所要表达的感受，便找不到合适的配图，无法提升界面效果。所以我们在选择配图时一定要追寻界面的主色系所以传达的情感。

如下图：左侧是以冷色为主的直播界面，右侧是以暖色为主的产品详情页。

左图由于忽略了主视觉的关系，配图为颜色过多，页面整体表达出来的情感不够直观，无法产生共鸣。

右图中我们通过控件可知主色为暖色系，选择同色系的素材进行搭配，通过素材和主视觉的完美搭配才能明确传达产品想要给用户的感受。

3、素材与素材：

这是最容易出现的错误，我们通常只关注于素材的整体感觉，反而忽略同类素材之间的差异，不是所有的同类素材都可以放到一起来用的，我们还要注意素材与素材内容的差异化。

如下图：左图为一款外卖食品列表的效果图，右图为商品列表的效果图，大家可以分别感受一下左右两侧的哪个更舒服些。

左图中列表的素材与素材的内容是不同的，虽然都是食物图，但有的是实物，有的是适量图，给人的感觉是不同的，这也是大家总是觉得哪里不对，却又说不出来的问题。

再看右图中的列表，配图元素统一，同为国外真人模特，符合素材与素材之间风格的统一。

PS：我们平时在做概念稿时，找同类型的产品图消耗的时间也是很大的，不是图片少，而是同质量的素材太少了。

所以一定要在专业的素材平台找查找，因为专业的素材平台会根据设计师的需要提供方便快捷的素材集合。

例如上图，我在站酷海洛中的搜索水果，便的到各个角度和不同风格的同质量图片，可以有更多的选择去搭配。

二、运用配图的常见错误

上面我们说的是如何选择素材，而下面一部分主要是让大家了解到没有量身定做的素材，不是什么素材都可以拿来直接用的，理想是丰满的，现实是骨感的。

辛辛苦苦找到的素材，就差一步便可以提升作品的效果，却因为嫌修改麻烦而失之交臂，我们来看看下面三种方法是如何将素材进行优化的。

1、统一素材比例：

在设计界面时，素材被拉伸变形，填充不满等低级问题出现的已经越来越少了，所以这里要说的不是基础的尺寸问题，而且是素材内容的占比比例。要保证素材中的内容与背景的占比是一致的，才能提升界面规范性。

如下图：两张运动类产品的界面列表，我们来分别单独预览两个界面，有没有发现同样的界面同样的产品，但预览产品的顺序是不同的，这是什么原因导致的呢？我们往下看。

左图中的产品展示内容与背景的占比不统一，可能是按现实中的比例进行摆放的，有大有小，界面显乱，干扰用户的阅读顺序。

右图通过更改图片比例后，统一了图片内容与背景的比例，不会干扰用户阅读界面的顺序。

2、统一素材角度：

素材因为角度不一，给人的感受也是不同的，在一个界面中的素材如果角度各式各样，会影响到用户的点击欲望。所以在挑选素材时应该注意参考图的角度，统一的拍摄角度可以让界面变得更有秩序。

如下图：左右两张界面的产品展示部分。

左侧界面中产品配图角度各异，有正视拍摄，有俯视拍摄的界面毫无秩序感。而右侧则对配图进行了规范，都为正视图，让界面看起来更统一规矩。

3、统一颜色：

很多素材的构图和内容都很棒，但放到界面中却显得格格不入，主要原因在于颜色之间的差异。选用素材后，如果对差异较大的颜色不做改变，便会造成颜色混乱，弱化了主视觉的颜色，用户对其产品的认识便会渐弱。

如下图：播放器界面中唱片封面的颜色差异。

左图我们为播放器寻找到了合适的素材封面，但素材的颜色是橙色的，素材与整体的颜色调性是不融洽的，破坏了界面的统一性，并不适合。

所以我们可以将封面改变其颜色变为符合我们界面中按钮以及播放时长的进度条的蓝色即可。

三、线上运营用图

前面说到的都是关于概念稿选择素材用到的一些技巧，可能大家看了会觉得这是概念稿，在实际的线上是没办法控制的，这个观点我并不同，实际线上的配图就真的没办法提升了吗？还是我们选择性忽略了呢？也许我们最初的选择就是美丽的谎言。

1.确保真实用图：

在设计初期我们就应该使用真实的运营图片进行设计，防止上线后才发现图片与设计风格不符的情况，为时已晚。

如下图：两组图为图书展示模块区域。

左图为设计时摆放的封面，都是精心挑选的优质素材，美化了模块的效果。

而右侧为线上效果，无法保证封面设计的统一性，所以切勿使用与实际上线不符的图片，会影响产品最终效果的判断。

2.不可重复用图：

很多设计师在做设计稿时，通篇只用一张素材图，交给开发，其实这样做出的设计，和原型无太大差异。

但是我们的设计稿是为了给运营提供参考的基础模版，为了能和线上效果保持一致，所以设计稿中的素材不可在一个界面中出现两次。

如下图：视频App中的频道页，左侧为复用素材设计，右侧为选择不同素材设计。

左侧的复用设计其实和原型区别不大，无法根据界面中的素材选择运营图，可利用性不大。而右侧更贴近线上效果，可以给运营提供找素材图的方向，避免返工。

3.图片的清晰度：

模糊的图片会使用户的视觉体验变得糟糕，现在的用户对于图片的浏览量每天都是不计其数的，如果想要在配图上得到用户的亲睐，就必须要清晰且看着舒服的图片。

如下图：两张同样的界面展示，分别用了模糊的素材和清晰的素材。

左图中图片清晰度不够，影响用户的浏览，同时也会给用户造成未加载完成的错觉。

右图中的素材则清晰可见，增加界面的美观度。所以我们在用图时，不可以用小尺寸的图片强行拉伸，会导致图片模糊不清，请选择高清大尺寸的配图。

4.图片比例：

同一张图片可能需要在多个界面中进行展示，而展示的尺寸也有可能存在差别，所以我们需要统一制定界面中运营图的尺寸规则，也可以做好安全区，避免界面因比例不对造成的图片拉伸或者显示不全等情况。

如下图：下面的图片是原图素材，接下来要将原图分别放入不同的区域内，他们的尺寸也不同。

在左侧界面中，如果任由系统自动适配比例就会出现前两种的错误，留白或变形，所以我们应该把较大的图片制作规范，画出安全区。

如右图banner通过上面等比例缩放到刚好填充满即可，下面的素材也是等比缩放大填满整个摆放区域后在进行裁剪。

5.元素太多不使用：

很多运营的用图元素过多，一心想把能放的都放进去，最后图片内容中没有重点，用户看的也是一头雾水，元素少，突出重点的图来使用。

如下图：同为视频App中热播模块，同样的美剧和字段，只是素材有所不同。

左侧素材中元素过多，影响用户对图片阅读，无重点，没有点击欲望。

而右侧的配图简单清晰一目了然，不会给用户带来阅读负担，更是挑选影片中简单清晰的画面作为封面使用，增加用户点击欲望。所以我们要选择元素少的运营图作为配图。

6.格式太大：

图片格式过大是一件很严重的问题，用户预览时加载速度过慢影响用户体验的流畅性，图片过大也会增加用户流量的使用费用。所以我们在导出运营用图时，一定要记得压缩图片，对于压缩到什么程度，要看图片本身的大小，只要保证压缩完依然清晰就可以。

如下图：两张同样的素材图，他们的清晰度是一样的，可大小却有区别。

左侧为原图大小，右侧为压缩后的图片大小，我们可以看到压缩后的图片明显占用的内存更小了。

7.不要使用白色背景：

目前线上产品中白色背景的产品占比还是很高，所以我们在选用素材时，要避开白色背景的素材，当界面背景也为白色时，会造成无边缘感。

如下图：两个模块中选择用了不同背景底色的素材图。

左侧素材中用了大量的白色背景的素材，无法判断图片与图片之间的距离，同时也会造成图片大小不一的错觉。

右图中使用有背景色的素材，可以清晰的区分每一个模块的间距，整齐规范。

总结

我们在做概念稿时都知道需要精心选择配图，为什么在做线上稿时，图片的质量就变得那么差，是一件需要思考的事情，难道没有好的素材，我们就放弃了产品的美观度吗？

我们不应该把美化调整运营图变成日常的流程中吗？这样才能保证产品的最终质量。好看的素材不是找出来的，而是通过我们优化出来的。

• 开班时间：2019年1月中下旬

• 学习方向：UI设计/交互设计

• 课程时长：3个月

长按二维码添加【小U】微信咨询&报名

原文始发于微信公众号（ARTUI用户体验设计中心）：界面设计中素材的处理技巧——ARTUI用户体验设计学院