編者按：大圖找得好,，甲方改稿少——這句話包含兩層意思：1，你得知道在哪里能找到高清大圖,。2,，你得知道用哪張，怎么用,，關于前者,，優(yōu)設有很多資源，可直接看文末,。后者是今天這篇好文的重頭戲,，抓案例，聊設計,，一一說來,，直到幫你找到甲方魂牽夢縈的那張圖。

當一張好看的圖片出現(xiàn)在我們眼前時,，它可以瞬間抓住我們的注意力,，引起我們的共鳴。因此,，創(chuàng)建一個有吸引力的網(wǎng)站,，圖片是網(wǎng)站中的一個重要組成部分。圖片會影響到我們對網(wǎng)頁的第一印象,，作用至關重要,，而且它們也可以告訴我們的這個網(wǎng)站是做什么的，還可以幫我們贏得更多用戶的信任,。

如果使用得當，圖片起到的效果就會非常好,，它可以快速的將目的信息傳達給用戶,。但是,，使用了錯誤的照片就會誤導用戶，降低用戶的體驗,。那我們該如何選擇恰當?shù)膱D片呢,？

網(wǎng)頁設計中使用圖片

在網(wǎng)站設計中，我們會注意到它的各個方面：內(nèi)容,，顏色,，版式，層次結(jié)構,，信息體系結(jié)構等細節(jié),，圖片也應該得到盡可能多的關注，特別在可用性和全體用戶對你的網(wǎng)站體驗方面,。

在網(wǎng)站上對照片的處理依賴于設計者理解和運用,，因此本文將給您指出一個正確的方向，并告訴你在你的下一個Web項目中使用圖片之前要好好挑選你的圖片,。

采用大圖片時需注意

人們會根據(jù)以往的經(jīng)驗和預期瀏覽屏幕,。用戶眼睛最常見的是先從左上角看起，當然這也取決于個人培養(yǎng)的閱讀模式,。這時如果你在頁面上使用了大圖片就會立即抓住他們的注意力,，并把他們拉離其一貫的閱讀方式。

圖片也是內(nèi)容

我敢肯定,，當我跟你說,，圖片也算是網(wǎng)頁的內(nèi)容時，你不會和我辯論,，但你自己做網(wǎng)頁的時候,，真的也是這么做的嗎？你有沒有只是把它當做一個附加部分或者好的填充內(nèi)容,？你有沒有考慮到這個圖片內(nèi)容的各個方面,？在你使用圖片之前你有沒有正確的評價這個圖片？你有沒有考慮用戶的心理模型和他們看到圖片時的反應,？這個圖片給用戶提供有價值的信息了嗎,？對用戶當前的任務起到幫助了嗎？這些就是你在網(wǎng)頁上準備使用圖片之前,，需要考慮的問題,。

圖片不只是用來「裝飾」網(wǎng)頁的。我見過很多設計師只是放一個漂亮的全屏的圖片在網(wǎng)頁上,，然后喊一些口號或大聲呼吁,，這就宣布它完成了。在很多情況下,，照片尚未評估,，設計師這樣做僅僅只是隨大流,。讓我們來看看如何對你的照片評估，在你在網(wǎng)站上使用它之前,。

選擇完美的照片

當你決定在你的設計中使用圖片時,，你有幾件事情需要考慮。我假設你已經(jīng)知道如何評估圖片的一些基礎知識,，它們是：質(zhì)量,，尺寸，組成和曝光,。在分辨率要求的質(zhì)量上,，選擇合適的位置裁剪圖片，有效裁剪過的圖片更能吸引用戶的注意力,，圖片要隱含網(wǎng)頁主題,。

剪裁圖片也是一件技術活，想提高剪裁技術的同學可以右戳學習：《裁圖有學問,！如何通過裁圖獲得嶄新的視覺效果》

做完這些以后,，圖片已經(jīng)通過了基本的測試，我們繼續(xù)探討你使用這個圖片的目的,。

邁克 – 帕金森曾經(jīng)說過：我們的大腦對視覺影像的處理速度比文字快60000倍,。

它是有用的嗎？

所有照片必須是有用的,。盡管用照片作為占位符,、給一個網(wǎng)頁添加了色彩或填充了一些空間，或者是做了網(wǎng)頁背景,。但是什么是有用的,，有益的，發(fā)人深省的圖片才是需要我們特別關注的,。有用的照片應該

1. 有助于我們更好地理解一些東西
2. 教我們?nèi)绾问褂靡恍〇|西
3. 告訴我們這些東西是如何完成的

關于在網(wǎng)頁設計中怎么選擇一個有用的圖片,，這里有一個漂亮的例子：Square 網(wǎng)站

可以看出，這個圖片的形象是經(jīng)過專業(yè)拍攝的（看手和指甲）,。最重要的是它直接展示了這個產(chǎn)品是多么好用,。它是一個非常有用，有教育性的圖片,。

類似的還有下面這個Pencil網(wǎng)站,。跟上面的例子一樣，這個圖片展示了它是什么產(chǎn)品（筆）,，在哪里以及如何使用（iPad應用）,。

Woodster網(wǎng)站也是充分利用了照片來解釋產(chǎn)品。很顯然，他們的產(chǎn)品是用來提升你的Mac的性能,，圖片同時展示了那個方便的USB接口,。

Grovemade在一個全屏的背景圖片上展示他們的產(chǎn)品集合,。很明顯可以看出,，他們生產(chǎn)的產(chǎn)品是高端木制辦公用品。圖片很有用,，也特別吸引人,。通過圖片我們很快就被它們的氛圍所感染。

通過上述例子,，你會發(fā)現(xiàn),，所有照片的表達意圖很明顯，是不言自明的,，他們傳達目的消息也非常好,。你不需要去看那些長長的產(chǎn)品/服務/網(wǎng)站的內(nèi)容介紹。這是一個有用的照片在網(wǎng)頁設計中所具有的特性,。

它是有效的嗎,？

一個有效的照片就是它能向用戶傳遞目的信息，刺激用戶產(chǎn)生某種行為,。一個良好的,，有效的產(chǎn)品照片能夠鼓勵用戶去購買這些產(chǎn)品。我們剛才的例子中的圖片都是有效的,，因為看到他們的圖片我門會有想購買他家產(chǎn)品的沖動,。當我們看到圖片時，它能觸發(fā)我們的這種行為,，就可以說它是有效的圖片,。

下面的圖是Mobility的網(wǎng)站，櫻桃紅的耳機是不是特別有吸引力,，趕快買下它吧,！

iPhone公司是以它的創(chuàng)新主義著稱，還要求他們所做的一切都要達到完美,。從iPhone登陸頁面里這張產(chǎn)品照我們可以看出,，外觀精美，桌面簡潔精致,，給用戶一種你值得擁有它的感覺,。

Apple 一直是業(yè)內(nèi)的領軍企業(yè)，官網(wǎng)也不例外：《漲姿勢,！從蘋果官網(wǎng)細看20年設計變遷史》

我們要舉出的另外一個例子是tsptr網(wǎng)站,。請注意該照片中的男子眼睛向下看，下面有東西需要你去探索嗎？答案是Yes,！頁面往下拉有驚喜,。（官網(wǎng)已變，不過仍舊可以看看）

Tsptr

在Mapquest服務網(wǎng)站不僅用圖片傳達了情感,，而且還非常巧妙通過圖中人物的視線方向來引導用戶去看到頁面的重點——左側(cè)的下載鏈接,。

POCO People這個網(wǎng)站設計的很有趣，它充分利用了色彩,，燈光還有整個頁面中所陳列的物品,，當你鼠標點到每一個文字區(qū)域時，圖中相應的物品都會發(fā)光,，這些有趣的設計能夠激發(fā)用戶去思考去看這個網(wǎng)站到底是做什么的,。

Pocopeople

Colossal網(wǎng)站在網(wǎng)頁上采用了一個大照片用來展示他們的工作內(nèi)容（看他手上的油漆和墻壁上的壁畫），以及他們?nèi)绾巫鲞@些事情（細看該男子右側(cè)）,。照片中最有趣的是左邊路過的行人,。他們看起來很興奮，他們作為觀眾正在見證這個美麗的壁畫的完成過程,，這使整個照片變的很吸引人而且更能有效向用戶傳達信息,。

它是有感情的嗎？

一個有感情色彩的照片應該能帶動用戶的情緒,。它或美觀,，或平靜，或令人不安,，或搞笑,，娛樂，或有吸引力等等,。無論是哪一種方式,，只要能通過某種方式和我們的情感訴求達到共鳴，它就會帶給我們無比大的震撼力,。

Frogdesign網(wǎng)站的特點是,，網(wǎng)站是針對聯(lián)邦緊急事務管理局和救災管理的案例研究。有主圖,，再加上一個有號召力的口號,，能非常有效地傳達出飽含豐富的情感。它講了一個故事,，我們雖然不在那里,，卻能感受到危險，仿佛身臨其境,。

Breath網(wǎng)站的主圖是非常寧靜,。它的標語寫的很好,，圖中那個女子閉著雙眼，很享受的輕輕的呼吸,，注意：下面有按鈕,，“吸氣”。這樣的網(wǎng)站是不是很能帶動用戶的情緒?

Shaun Groves這個網(wǎng)站的主圖主要講述了一個偉大的故事,，主角是肖恩·格羅夫斯,。它傳達的幸福，信任,，希望,，友誼和期待,，無論是誰看到這個圖,，都會對它有所觸動吧。

Relay Foods這個網(wǎng)站注重實用性,，從左邊和右邊的女子臉上喜悅的表情可以看出,，她們熱愛自己的工作，而且所有的食物都是純天然的,，女子的表情都是自然流露,，和食品是純天然的即是自然的相一致。

表情的力量

有七個（或8）基本情緒：

歡樂   悲傷   蔑視   恐懼   厭惡   驚喜   憤怒

這些表情是很常見的,，大都是通過面部表情和身體姿勢來表達,。如果想使用圖片和用戶進行交流以便傳達目的信息，那么你就要注意觀察這七種表情所傳達的信息,，然后再決定你到底要用哪種表情來打動你的目標用戶,。

特寫鏡頭能夠立刻抓住用戶的注意力，有助于觸發(fā)用戶的情緒,，這也促使他們成為一個強大的設計元素,。

剛才我們已經(jīng)舉了很多例子，但是我們需要進一步探索它們,。

Build Fire網(wǎng)站中用到一個女子的照片,，但是這個照片卻沒有向我們展示任何有關他們產(chǎn)品的內(nèi)容，它的作用就是迅速吸引用戶眼球,。如果只有下面那張手機圖片,，沒有這個女子，肯定無法達到現(xiàn)在這樣的效果,。

如果您決定在您的個人網(wǎng)站上使用了一張大的人物肖像,，我會給你點個贊。但是你要小心,！一個微小的面部表情可以讓你在信息溝通中產(chǎn)生巨大的差異,。Daniel Eckler網(wǎng)站就做的很好,，將自己完美的展現(xiàn)在用戶面前，他的面部表情中表現(xiàn)出的是信心,，冷靜和信任,。

每個人都知道在WTC發(fā)生了什么事。9/11 Tribute Center這個網(wǎng)站是專門記錄曾經(jīng)在那里發(fā)生過的故事,。照片上的人注視著我們,，邀請我們一起加入到這個社會性話題當中。

Conservation網(wǎng)站中將在文字覆蓋在的特寫人物的臉上,，效果不錯,，很有特點。圖中Kayapo男子照片表達出權威,，勇氣和贊賞的信息,。

正如蘇珊說，慈善機構的網(wǎng)站上放一個近景拍攝的照片是最有說服力,，這是事實,。Save the Children這個網(wǎng)站就是這樣做的，一個孩子對的特寫照片,，一個完全對齊與該網(wǎng)站的標語和主題,，還看到了什么？對,，小孩子的視線：捐款按鈕,。點一下吧，他們需要你,。

如何在網(wǎng)頁設計“不”使用照片

盡管我們已經(jīng)看到了在網(wǎng)站設計中使用照片的好例子,，但是圖片很容易被濫用。因此,，我將告訴你如何不使用照片和怎樣避免濫用的情況,。

無關的照片 ——一個做網(wǎng)頁設計工作室，先要表達自己能夠提供專業(yè)的設計,，所以用了Tailored-made（量體裁衣）的引申義,，知道用比喻很好。但是卻錯用了彩色線軸的圖片,，第一眼還會以為這是一家裁縫鋪,，有木有？這表達方式也太晦澀了,。

對于這個圖我們有一個解決方案,，在這里使用純色或者是團隊的合影。此外,，數(shù)碼產(chǎn)品不能進行定制的,。

一個提供團隊協(xié)作的軟件,，卻用了一個工作中流露出擔憂這種表情的女人的圖片。這會給人一種這樣的印象：這個女人在擔心,。這樣會影響軟件在網(wǎng)絡中的推廣,。我們可以這么解決，使用真正的產(chǎn)品的截圖或者是放一張正在使用他們的產(chǎn)品,，而且面露幸福表情的女人的圖片,。

下圖也是一個關于和內(nèi)容無關的圖片的例子。盡管“手工制作”的字樣和“作坊”可以聯(lián)想到圖片本身,，但它不表達出該網(wǎng)站的真正意義,。Brand Bat是關于創(chuàng)造品牌戰(zhàn)略，用這些木材的圖片,，不能很好的傳達他們多想要表達的訊息,。

模糊的背景圖片

這圖是是用來裝飾的占位圖。沒有任何關于該網(wǎng)站的信息,，用戶無法了解這個網(wǎng)站,。我的建議是盡可能避免使用模糊的背景圖片，除非你可以做的很好,。

錯誤的選擇照片

當你看到這張照片時，你的第一印象是什么,？兩個幸福的人站在一家咖啡店,，他們將幫助你的在線業(yè)務取得成功，對不對,？不,，一個全方位服務的網(wǎng)頁設計公司還應該在圖片中放上他們幸福又成功的客戶。這樣的錯誤也是我們應該避免的,。

全景照片

他們幾乎從來沒有傳達任何有用的訊息,。為什么有一個小男孩戴著眼鏡，還手豎大拇指,？他是一名提供的PHP編碼服務開發(fā)人員,？顯然不是。

一個全國性的網(wǎng)站實在不應該用這張照片來傳達訊息,。首先,，這個圖片和話題無關的，女人似乎咬她的指甲（我們都知道這是一種心理障礙）,，而且她的平板電腦屏幕是模糊,。這張照片所顯示的是焦慮，緊張和壓力的情緒,，我真的認為這樣的圖片不應放到全國性的網(wǎng)站上,。

最后的思考

文章中的例子大都在網(wǎng)站中使用了大圖,，但圖片還有很多種使用方式，只要使用得當,，就能夠吸引用戶,。在你設計程序之前要好好考慮一下你要使用的圖片。如果你做了正確的選擇,，恭喜你你已經(jīng)有足夠的洞察力,。

要對好的圖片拍攝投資：一個偉大的攝影師可以極大的提升到你的網(wǎng)站的商業(yè)價值。 不管你怎么設計,，你的用戶都可以從你的設計中受益,。了解人們的行為確實是做出有效的設計的唯一途徑，這對網(wǎng)站設計選擇最佳照片也是實用的,。期待你做出的網(wǎng)頁哦?。?/p>

大圖找得好,，甲方改稿少,！

最受設計師歡迎的高清大圖，免費可商用,！
《免費高清,！10個無版權限制的大圖特供網(wǎng)站》

第二波緊隨其后！再也不怕圖片侵權了,！
《免費高清第二波,！12個無版權限制的大圖特供網(wǎng)站》

圖片有了，影片素材也不能少,！
《免費商用,！高清無碼的的影片素材分享站MAZWAI》

原文地址：webdesign.tutsplus
譯文地址：shejipai
譯者：Pudding

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：[email protected]】

================關于優(yōu)設網(wǎng)================
“優(yōu)設網(wǎng)uisdc.com“是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計,、無線端設計以及PS教程,。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量82萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ,，歡迎關注獲取網(wǎng)頁設計資源,、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦,，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上,、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的”福利”嗎,？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：