很多UI设计师不会配图?你中枪了吗?

作为一名UI设计,经常因为找不到一张合适的图片而苦恼,或是不知道用什么样的图片表达自己的设计想法,那么今天就来学习下,通过下面的几点方法,就可以让你在配图的时候不会那么纠结,总之,此方法很管用。

当一张好看的图片出现在我们眼前时,它可以瞬间抓住我们的注意力,引起我们的共鸣。因此,创建一个有吸引力的网站,图片是网站中的一个重要组成部分。图片会影响到我们对网页的第一印象,作用至关重要,而且它们也可以告诉我们的这个网站是做什么的,还可以帮我们赢得更多用户的信任。

如果使用得当,图片起到的效果就会非常好,它可以快速的将目的信息传达给用户。但是,使用了错误的照片就会误导用户,降低用户的体验。那我们该如何选择恰当的图片呢?

网页设计中使用图片

在网站设计中,我们会注意到它的各个方面:内容,颜色,版式,层次结构,信息体系结构等细节,图片也应该得到尽可能多的,特别在可用性和全体用户对你的网站体验方面。

在网站上对照片的处理依赖于设计者理解和运用,因此本文将给您指出一个正确的方向,并告诉你在你的下一个Web项目中使用图片之前要好好挑选你的图片。

采用大图片时需注意

人们会根据以往的和预期浏览屏幕。用户眼睛最常见的是先从左上角看起,当然这也取决于个人培养的阅读模式。这时如果你在页面上使用了大图片就会立即抓住他们的注意力,并把他们拉离其一贯的阅读方式。

图片也是内容

我敢肯定,当我跟你说,图片也算是网页的内容时,你不会和我辩论,但你自己做网页的时候,真的也是这么做的吗?你有没有只是把它当做一个附加部分或者好的填充内容?你有没有考虑到这个图片内容的各个方面?在你使用图片之前你有没有正确的评价这个图片?你有没有考虑用户的心理模型和他们看到图片时的反应?这个图片给用户提供有价值的信息了吗?对用户当前的任务起到帮助了吗?这些就是你在网页上准备使用图片之前,需要考虑的问题。

图片不只是用来「装饰」网页的。我见过很多设计师只是放一个漂亮的全屏的图片在网页上,然后喊一些口号或大声呼吁,这就宣布它完成了。在很多情况下,照片尚未评估,设计师这样做仅仅只是随大流。让我们来看看如何对你的照片评估,在你在网站上使用它之前。

选择完美的照片

当你决定在你的设计中使用图片时你有几件事情需要考虑。我假设你已经知道如何评估图片的一些基础知识,它们是:质量,尺寸,组成和曝光。在分辨率要求的质量上,选择合适的位置裁剪图片,有效裁剪过的图片更能吸引用户的注意力,图片要隐含网页主题。

做完这些以后,图片已经通过了基本的测试,我们继续探讨你使用这个图片的目的。

迈克 – 帕金森曾经说过:我们的大脑对视觉影像的处理速度比文字快60000倍。

它是有用的吗?

所有照片必须是有用的。尽管用照片作为占位符、给一个网页添加了色彩或填充了一些空间,或者是做了网页背景。但是什么是有用的,有益的,发人深省的图片才是需要我们特别的。有用的照片应该

a.有助于我们更好地理解一些东西    b.教我们如何使用一些东西    c.告诉我们这些东西是如何完成的。

关于在网页设计中怎么选择一个有用的图片,这里有一个漂亮的例子:Square 网站

可以看出,这个图片的形象是经过专业拍摄的(看手和指甲)。最重要的是它直接展示了这个产品是多么好用。它是一个非常有用,有教育性的图片。

类似的还有下面这个Pencil网站。跟上面的例子一样,这个图片展示了它是什么产品(笔),在哪里以及如何使用(iPad应用)。

Woodster网站也是充分利用了照片来解释产品。很显然,他们的产品是用来提升你的Mac的性能,图片同时展示了那个方便的USB接口。想象一下,如果这个产品没有让上下文分离。你认为这个网站还会有像现在这样的效果吗?

Grovemade在一个全屏的背景图片上展示他们的产品集合。很明显可以看出,他们生产的产品是高端木制办公用品。图片很有用,也特别吸引人。通过图片我们很快就被它们的氛围所感染。

通过上述例子,你会发现,所有照片的表达意图很明显,是不言自明的,他们传达目的消息也非常好。你不需要去看那些长长的产品/服务/网站的内容介绍。这是一个有用的照片在网页设计中所具有特性。

它是有效的吗?

一个有效的照片就是它能向用户传递目的信息,刺激用户产生某种行为。一个良好的,有效的产品照片能够鼓励用户去购买这些产品。我们刚才的例子中的图片都是有效的,因为看到他们的图片我门会有想购买他家产品的冲动。当我们看到图片时,它能触发我们的这种行为,就可以说它是有效的图片。

下面的图是Mobility的网站,樱桃红的耳机是不是特别有吸引力,赶快买下它吧!

iPhone公司是以它的创新主义著称,还要求他们所做的一切都要达到完美。从iPhone登陆页面里这张产品照我们可以看出,外观精美,桌面简洁精致,给用户一种你值得拥有它的感觉。

我们要举出的另外一个例子是tsptr网站。请注意该照片中的男子眼睛向下看,下面有东西需要你去探索吗?答案是Yes!页面往下拉有惊喜。

在Mapquest服务网站不仅用图片传达了情感,而且还非常巧妙通过图中人物的视线方向来引导用户去看到页面的重点——左侧的下载链接。

POCO People这个网站设计的很有趣,它充分利用了色彩,灯光还有整个页面中所陈列的物品,当你鼠标点到每一个文字区域时,图中相应的物品都会发光,这些有趣的设计能够激发用户去思考去看这个网站到底是做什么的。

Colossal网站在网页上采用了一个大照片用来展示他们的工作内容(看他手上的油漆和墙壁上的壁画),以及他们如何做这些事情(细看该男子右侧)。照片中最有趣的是左边路过的行人。他们看起来很兴奋,他们作为观众正在见证这个美丽的壁画的完成过程,这使整个照片变的很吸引人而且更能有效向用户传达信息。

它是有感情的吗?

一个有感情色彩的照片应该能带动用户的情绪。它或美观,或平静,或令人不安,或搞笑,娱乐,或有吸引力等等。无论是哪一种方式,只要能通过某种方式和我们的情感诉求达到共鸣,它就会带给我们无比大的震撼力。

Frogdesign网站的特点是,网站是针对联邦紧急事务管理局和救灾管理的案例研究。有主图,再加上一个有号召力的口号,既非常有效的,又饱含丰富的情感。它讲了一个故事,我们虽然不在那里,却能感受到危险,仿佛身临其境。

Breath网站的主图是非常宁静。它的标语写的很好,图中那个女子闭着双眼,很享受的轻轻的呼吸,注意:下面有按钮,“吸气”。这样的网站是不是很能带动用户的情绪?

Shaun Groves这个网站的主图主要讲述了一个伟大的故事,主角是肖恩·格罗夫斯。它传达的幸福,信任,希望,友谊和期待,无论是谁看到这个图,都会对它有所触动吧。

Relay Foods这个网站注重实用性,从左边和右边的女子脸上喜悦的表情可以看出,她们热爱自己的工作,而且所有的食物都是纯天然的,女子的表情都是自然流露,和食品是纯天然的即是自然的相一致。

表情的力量

有七个(或8)基本情绪:

欢乐   悲伤   蔑视   恐惧   厌恶   惊喜   愤怒

这些表情是很常见的,大都是通过面部表情和身体姿势来表达。如果想使用图片和用户进行交流以便传达目的信息,那么你就要注意观察这七种表情所传达的信息,然后再决定你到底要用哪种表情来打动你的目标用户。

特写镜头能够立刻抓住用户的注意力,有助于触发用户的情绪,这也促使他们成为一个强大的设计元素。

刚才我们已经举了很多例子,但是我们需要进一步探索它们。

Build Fire网站中用到一个女子的照片,但是这个照片却没有向我们展示任何有关他们产品的内容,它的作用就是迅速吸引用户眼球。如果只有下面那张手机图片,没有这个女子,肯定无法达到现在这样的效果。

如果您决定在您的个人网站上使用了一张大的人物肖像,我会给你点个赞。但是你要小心!一个微小的面部表情可以让你在信息沟通中产生巨大的差异。Daniel Eckler网站就做的很好,将自己完美的展现在用户面前,他的面部表情中表现出的是信心,冷静和信任。

每个人都知道在WTC发生了什么事。9/11 Tribute Center这个网站是专门记录曾经在那里发生过的故事。照片上的人注视着我们,邀请我们一起加入到这个社会性话题当中。

Conservation网站中将在文字覆盖在的特写人物的脸上,效果不错,很有特点。图中Kayapo男子照片表达出权威,勇气和赞赏的信息。

正如苏珊说,慈善机构的网站上放一个近景拍摄的照片是最有说服力,这是事实。Save the Children这个网站就是这样做的,一个孩子对的特写照片,一个完全对齐与该网站的标语和主题,还看到了什么?对,小孩子的视线:捐款按钮。点一下吧,他们需要你。

如何在网页设计“不”使用照片

尽管我们已经看到了在网站设计中使用照片的好例子,但是图片很容易被滥用。因此,我将告诉你如何不使用照片和怎样避免滥用的情况。

无关的照片 ——一个做网页设计工作室,先要表达自己能够提供专业的设计,所以用了Tailored-made(量体裁衣)的引申义,知道用比喻很好。但是却错用了彩色线轴的图片,第一眼还会以为这是一家裁缝铺,有木有?这表达方式也太晦涩了。

对于这个图我们有一个解决方案,在这里使用纯色或者是团队的合影。此外,数码产品不能进行定制的。

一个提供团队协作的软件,却用了一个工作中流露出担忧这种表情的女人的图片。这会给人一种这样的印象:这个女人在担心。这样会影响软件在网络中的推广。我们可以这么解决,使用真正的产品的截图或者是放一张正在使用他们的产品,而且面露幸福表情的女人的图片。

下图也是一个关于和内容无关的图片的例子。尽管“手工制作”的字样和“作坊”可以联想到图片本身,但它不表达出该网站的真正意义。Brand Bat是关于创造品牌战略,用这些木材的图片,不能很好的传达他们多想要表达的讯息。

模糊的背景图片——这图是是用来装饰的占位图。没有任何关于该网站的信息,用户无法了解这个网站。我的建议是尽可能避免使用模糊的背景图片,除非你可以做的很好。

错误的选择照片——当你看到这张照片时,你的第一印象是什么?两个幸福的人站在一家咖啡店,他们将帮助你的在线业务取得成功,对不对?不,一个全方位服务的网页设计公司还应该在图片中放上他们幸福又成功的客户。这样的错误也是我们应该避免的。

全景照片—— 他们几乎从来没有传达任何有用的讯息。为什么有一个小男孩戴着眼镜,还手竖大拇指?他是一名提供的PHP编码服务开发人员?显然不是。

一个全国性的网站实在不应该用这张照片来传达讯息。首先,这个图片和话题无关的,女人似乎咬她的指甲(我们都知道这是一种心理障碍),而且她的平板电脑屏幕是模糊。这张照片所显示的是焦虑,紧张和压力的情绪,我真的认为这样的图片不应放到全国性的网站上。

最后的思考

文章中的例子大都在网站中使用了大图,但图片还有很多种使用方式,只要使用得当,就能够吸引用户。在你设计程序之前要好好考虑一下你要使用的图片。如果你做了正确的选择,恭喜你你已经有足够的洞察力。

要对好的图片拍摄投资:一个伟大的摄影师可以极大的提升到你的网站的商业价值。 不管你怎么设计,你的用户都可以从你的设计中受益。了解人们的行为确实是做出有效的设计的唯一途径,这对网站设计选择最佳照片也是实用的。期待你做出的网页哦!!!

最近长智齿,拖了好久才把这个文章翻译出来,个人觉得文章写的很好,很喜欢,希望你也能喜欢这个教程哦!

翻译:设计派——Pudding

(0)

相关推荐

  • UI设计师需要熟知的平面基础

    写在前面 随着互联网的发展带动了 UI 设计的短暂刚需,经过 3-5 年的发展,UI 设计也开始趋于平缓推进中.在此期间很多设计专业内部转岗与非行业转行也是一度热潮. 其中平面设计.电商设计.网页设计 ...

  • 高级的设计技法,UI设计师应该有品牌意识!

    前言 UI设计师不是品牌设计师,但是得有品牌思维,UI设计中融入品牌基因,会让你的设计更具有独特性,拥有品牌元素的页面更容易让用户记住,会带来更大的附加价值,有信任感,优秀的UI设计师不仅能够把控视觉 ...

  • UI设计师人手一份(PHONE 6和APPLE WATCH原型下载)

    自iPhone 6 和Apple Watch那场的发布会后,很多UI设计师开始创作相关的原型素材,值得感谢的是,这些作品有好多都无私分享到了网上,不仅可个人使用,也可商用.今天我们收集了从这组免费的素 ...

  • 工作五年以上的UI设计师都在干什么

    入行两三年,继续深造.转行还是回家乡?何去何从,不妨听前辈们聊聊他们的现状吧.今天这篇问答,既有奋战一线的华为.腾讯资深设计师,也有图安逸在三线城市工作的,既有设计科班生,也有26岁才入行的非科班生, ...

  • 如何成为一名【懂交互】的UI设计师?

    单纯的UI没有竞争力?要懂交互,懂用户体验?面试官问你交互知识,一无所知怎么办?本文将给你答案. 最近很多人问我,交互设计师做什么?感觉好难?怎么学交互?UI设计师怎么转型做交互设计师?很多UI设计师 ...

  • UI设计师必须养成的职场习惯

    UI设计师的专业能力固然重要,但是优秀的设计师不一定是专业能力最牛的那一个,一定是综合能力最强的人. 今天和大家来聊点与设计技法.创意等无关的话题,就是设计师的职场习惯,职场习惯看似简单,很多设计师也 ...

  • 通过实战项目,从UI设计师角度认识产品原型

    UI设计师应该了解原型图是如何产生的. [前言] 1.很多人误解UI设计师做的只是画图标和"填色",也有一些刚入行UI的朋友,拿着原型图就开始做设计稿.其实UI设计师也叫做用户体验 ...

  • UI设计师自学技能库

    @洪涵滴滴:很多朋友对 UI 设计感兴趣,却对它一直一知半解.为此我希望分享些自己对设计的思考和在工作上的.这篇文章将简单介绍 UI 设计是什么,作为设计师该学些什么,还包含了我自己对学UI 设计的一 ...

  • UI设计师必备技能:常用字体规范

    作为一个UI设计师,界面规范真的很重要,我们也许能把ios各个模块数据如数家珍,但是字体呢,正文字体多大字号?标题多大字号?哈哈,别发蒙,今天小编给大家带来满满的的干货,原文来自@王铎(MICU设计) ...