網頁設計技巧:網頁圖片的巧妙設計方法

來源:互聯網
上載者:User

文章描述:淺析網頁設計中圖片的使用基本原則。

@MartinRGB 設計師都知道,行業的核心追求便是打造優秀的視覺效果。實際上,之所以能夠成為設計師,是因為我們具備一種技藝,能夠滿足使用者的視覺感受和視覺需求。
我們可以聽、讀、想,我們可以想象出概念、物體以及人;但是這些感受都很抽象,只有實實在在地看到,印象才能定型。

你遇到過從來沒見過雪的人嗎?可能你也從來沒見過雪花飄灑在天空的景象。所以這些人無法理解,到底什麼是雪?他們可能會知道原理是因為寒冷而凝結了空氣中的水分,落下便形成了雪,可是他們無法真正明白,到底何為雪。我也遇到過一些第一次見到下雪的人;我見證了他們的異常驚奇的表情,他們對這種第一次看到的、從天空中飄落下來的白色物體著了迷。可能會有見過雪的人對未曾見過雪的人進行描述,可沒有見過雪的人不相信前者的描述。他們會覺得前者在耍他們。所見即所得 (WYSIWYG)。

視覺元素,諸如照片和視頻,會讓我們感到最親切,因為它們和我們的生活最為接近,我們感同身受。當你為網站配圖的時候,你添加的並不是一堆美麗的像素塊。實際上,每一幅圖片,都可以看做現實生活的縮影,而使用者喜歡這種熟悉感,所以能夠營造良好的使用者體驗。

需要我為你們指點一下其中的技巧嗎?開始吧

巧妙用圖也算是一種設計

即便是內容主導的網站,也需要映像作為潤色,每次設計這種網站,我都需要尋覓一些優秀的照片或者插畫。這種映像搜尋對我來說至關重要,因為我不會畫畫,如果你會畫畫,或者你的團隊中有有天賦的繪畫能手,那你真的太幸運了!我都有點嫉妒你的好運。

良好的照片運用能夠成就優秀的設計。人都是視覺動物,在瀏覽網頁時,對於映像有一種渴望,因此添加圖片非常重要。而且,一定要是合適的、相關的圖片。

對比

可用性至上!因此你的映像必須與整體相協調,並且與文字產生對比。幹讀文字非常讓人厭煩。想象一下,一面小黑板,密密麻麻幾千個字,白板黑字,讀吧!這裡有你要的全部。

要想產生鮮明的上下對比,就要學會觀察;圖片比較亮,那麼文字可以使用較深的顏色,反之亦然。如果想要使用白色字型和亮色背景,那麼最好使用一些黑色元素作為過渡。比如,精美的投影技法就很不錯。

品質

比方說你要為一家餐館設計網頁。在設計中想要用什麼樣的圖?好吧,現在你決定開始抓起想起,去這家餐館攝影了。你拍第一張照片的時候,站在餐館門口,離桌子上的美食非常遙遠,照片根本無法體現美食的細節;你拍第二張的時候,手突然抖了起來,導致拍攝的照片十分模糊。你覺得這種照片能放在網站上嗎?

如果你的客戶不提供專業的攝影作品,那麼趕快去勸勸他們,趕緊拍攝點高清無碼大圖吧。
如果客戶很頑固,說”就不!”,那趕緊換個思路,建議採用字型設計、布局新穎、極簡主義等風格,打造處一種極簡風,然後不帶映像。寧缺毋濫。寧肯一張圖也不配!也不能配上一堆20k的圖!

關聯性

一圖勝千言,但是有時候文字為主,那麼配上的圖就一定要與文字相關。這是常識,保持元素一致性。還是上面那個例子,人家讓你設計個餐館網頁,你給配上了股票走勢圖,可以隨便感受一下甲方收到作品後的臉色。
如果網頁中的內容比較靈活,比如說賣保險的,那麼配圖可以符號化一點,但是還是要和供應項目相關。而且符號象徵意義一定要強,這樣就很便於辨認。而且要注意的是,不同國家、不同文化的符號象徵不同。

大圖受歡迎

這條原則再明顯不過了,映像越大,視覺衝擊也越大。
有人不相信,比如Econsultancy的人,他們就非要來個資料調查,他們做了三份研究,有興趣的可以看一下 here

映像也是內容的一種

映像不但利於設計,還是非常棒的內容,當映像和文字、音頻相結合時,能夠產生下列作用:

攫取注意力

當文章和頁面中有吸引眼球的映像時,愛屋及烏,使用者會對內容高度敏感。當使用者在網上面臨大段大段的文本時,人類的大腦便傾向於”略過這片內容”吧,很少有人會保持注意力,繼續閱讀細節。
映像能夠打破視覺的單調性,協助使用者聚集注意於文章、連結、故事。簡而言之,映像讓使用者集中注意力。

更好的理解上下文

好的映像,相當於一種”過渡句”,能夠很好的引導下文。
而且選圖一定要謹慎,映像能夠激發使用者的一種情緒,一定要確保這種情緒和內容屬於同一個”點”,要做到到位。

其他注意事項

許可問題

如果映像不屬於你也不屬於使用者,那麼一定要獲得許可。最好是書面的許可,而且一定要註明攝像者。
因此在設計前,一定要預先要到許可。不過還有一種辦法,那就是圖庫搜刮一些素材

圖庫:免費好還是付費的好?

無論是收費還是免費,圖庫的好處在於,你不用關心這圖是誰的,不用關心許可問題。不過在為網頁配圖時,一般都會使用一些付費的圖片。

免費圖庫的好處:

不花錢
可選擇的非常多

免費圖庫的弊端:

垃圾圖片也多
某些專門的圖片不好找
有些圖片中有浮水印和連結
推薦幾個吧: stock.xchng, StockVault,DeviantArt.

付費圖庫的優點:

許可問題白紙黑字,沒有著作權糾紛
分門別類,種類齊全。
付費圖庫的弊端:

沒錢還是別想了。而且容易上癮,買完一堆,發現超支了
推薦幾個: Shutterstock, iStockphoto , Dreamstime.

人物攝影

好處是有一種真實感。
如果在產品或服務中採用真人圖片,展示他們工作時的情境。會讓人有一種真實可信感。
可如果你選的模特作態扭捏,露出假惺惺的白牙,會讓使用者感到這是個牙醫廣告,太假了。因此,一定要貼近產品。

結論:

選圖要謹慎!
圖片要合理!
一圖勝千言!

原文地址:webdesignerdepot.com  優設網翻譯:@MartinRGB



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。