相關(guān)案例

  • 健身房,俱樂部,游泳館,拳擊格斗館

    行業(yè):健身房,俱樂部,游泳館,拳擊格斗館

    品牌:臨汾冰世界游泳健身俱樂部

    服務(wù):健身場館空間裝飾裝修設(shè)計,品牌策劃,軟裝陳列設(shè)計,健身場館燈光設(shè)計

    說明: 臨汾位于山西省西南部,歷史悠久,是華夏民族的重要發(fā)祥地之一和黃河文明的搖籃,有“華夏第一都”之稱。...
  • 醫(yī)療器材、醫(yī)療設(shè)計生產(chǎn)研發(fā)

    行業(yè):醫(yī)療器材、醫(yī)療設(shè)計生產(chǎn)研發(fā)

    品牌:東莞藍海皓凈化科技有限公司

    服務(wù):品牌形象設(shè)計,醫(yī)療VI設(shè)計,醫(yī)療標(biāo)志設(shè)計

    說明: 東莞藍海皓凈化科技有限公司是從事醫(yī)院潔凈手術(shù)室配套產(chǎn)品及中心供應(yīng)室、醫(yī)療家具、醫(yī)藥凈化設(shè)備的設(shè)計、...
  • 企業(yè)形象視覺識別系統(tǒng)

    行業(yè):企業(yè)形象視覺識別系統(tǒng)

    品牌:品深設(shè)計

    服務(wù):商城vi系統(tǒng)設(shè)計,品牌標(biāo)志設(shè)計,企業(yè)品牌策劃

    說明: 企業(yè)視覺形象識別,是指在企業(yè)經(jīng)營理念的指導(dǎo)下,利用平面設(shè)計等手法將企業(yè)的內(nèi)在氣質(zhì)和市場定位視覺化、...
  • 集團/企業(yè)/上市公司畫冊設(shè)計

    行業(yè):集團/企業(yè)/上市公司畫冊設(shè)計

    品牌:品深設(shè)計

    服務(wù):深圳畫冊設(shè)計、企業(yè)品牌文化梳理、文案策劃、商業(yè)攝影

    說明: 現(xiàn)在所有的平面的平面設(shè)計幾乎有用到版式,大到一本畫冊,一個海報,一個廣告牌,小到一個提案...
  • 餐飲品牌策劃

    行業(yè):餐飲品牌策劃

    品牌:品深設(shè)計

    服務(wù):餐飲品牌策劃、餐飲VI系統(tǒng)設(shè)計、餐飲品牌手冊、餐飲品牌宣傳資料

    說明: 餐飲品牌策劃就是對餐飲品牌文化整合與提煉。就是對餐飲品牌的文化進行立意、策劃、規(guī)劃、設(shè)計,就是要站...


品深觀點--大圖設(shè)計好,甲方改稿少!

當(dāng)一張好看的圖片出現(xiàn)在我們眼前時,它可以瞬間抓住我們的注意力,引起我們的共鳴,在多年為客戶設(shè)計策劃過程中,品深設(shè)計發(fā)現(xiàn),畫冊設(shè)計、網(wǎng)站設(shè)計、品牌VI系統(tǒng)設(shè)計及展會宣傳物料設(shè)計中都需要應(yīng)用到圖片來表達品牌概念,及服務(wù)理念等。


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



以下品深設(shè)計以網(wǎng)站設(shè)計選圖為例來與大家分享圖片設(shè)計的理念


創(chuàng)建一個有吸引力的網(wǎng)站,圖片是網(wǎng)站中的一個重要組成部分。圖片會影響到我們對網(wǎng)頁的第一印象,作用至關(guān)重要,而且它們也可以告訴我們的這個網(wǎng)站是做什么的,還可以幫我們贏得更多用戶的信任。


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

在網(wǎng)站設(shè)計中,我們會注意到它的各個方面:內(nèi)容,顏色,版式,層次結(jié)構(gòu),信息體系結(jié)構(gòu)等細(xì)節(jié),圖片也應(yīng)該得到盡可能多的關(guān)注,特別在可用性和全體用戶對你的網(wǎng)站體驗方面。
在網(wǎng)站上對照片的處理依賴于設(shè)計者理解和運用,因此本文將給您指出一個正確的方向,并告訴你在你的下一個Web項目中使用圖片之前要好好挑選你的圖片。


采用大圖片時需注意

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



圖片也是內(nèi)容

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

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


選擇完美的照片

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

做完這些以后,圖片已經(jīng)通過了基本的測試,我們繼續(xù)探討你使用這個圖片的目的。
邁克 – 帕金森曾經(jīng)說過:我們的大腦對視覺影像的處理速度比文字快60000倍。


它是有用的嗎?

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

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

關(guān)于在網(wǎng)頁設(shè)計中怎么選擇一個有用的圖片,這里有一個漂亮的例子。


Square 

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



Pencil
跟上面的例子一樣,這個圖片展示了它是什么產(chǎn)品(筆),在哪里以及如何使用(iPad應(yīng)用)




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


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




它是有效的嗎?


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



Mobility

櫻桃紅的耳機是不是特別有吸引力,趕快買下它吧!



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




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




它是有感情的嗎?

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


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



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




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




表情的力量

有七個(或8)基本情緒:歡樂   悲傷   蔑視   恐懼   厭惡   驚喜   憤怒

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

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

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


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



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


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




如何在網(wǎng)頁設(shè)計中“不”使用這些照片


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

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




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


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


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


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




最后的思考


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


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


大圖設(shè)計好,甲方改稿少!  品深出品 必屬精品!

部分圖片來著自百度,著名如果涉及到侵權(quán),請告知我們會及時刪除;


本文由品深策劃設(shè)計提供編輯:http://kierancurtis.com/




分享: 0

設(shè)計案例