圖(tu)(tu)片(pian)在網頁中(zhong)所(suo)扮演的(de)角色越來越重要。作(zuo)為最常見也(ye)是最早使(shi)用(yong)(yong)的(de)網頁多(duo)媒體，圖(tu)(tu)片(pian)對于(yu)網頁設計師而(er)(er)言至關重要。如何(he)用(yong)(yong)好圖(tu)(tu)片(pian)已經成為了一項(xiang)成熟、完善而(er)(er)又講究的(de)技巧，而(er)(er)在高清屏幕無處(chu)不(bu)在的(de)今(jin)天，稍(shao)有瑕疵的(de)圖(tu)(tu)片(pian)都(dou)在高密度的(de)像素下無所(suo)遁形，而(er)(er)不(bu)合(he)理的(de)圖(tu)(tu)片(pian)設計也(ye)不(bu)會逃(tao)過訪客的(de)雙眼。

抓人眼球的首圖

橫跨(kua)屏幕的(de)輪播首(shou)圖(tu)(tu)是(shi)時下流(liu)行的(de)網頁設(she)(she)計手法，設(she)(she)計師通過覆蓋視野式的(de)圖(tu)(tu)片來營(ying)造身臨其境的(de)體驗(yan)，這非常符(fu)合人類視覺優(you)先的(de)信息獲取(qu)方式，所以(yi)，漂亮(liang)的(de)首(shou)圖(tu)(tu)是(shi)抓住用戶注意(yi)力的(de)重(zhong)要(yao)手段。優(you)質的(de)首(shou)圖(tu)(tu)能夠讓用戶明白，他們可以(yi)從這個網站獲取(qu)一些什么。

頁面上(shang)的(de)圖片往往是最先(xian)吸引到用戶的(de)元(yuan)素(su)。

首圖是容(rong)納信息的完美容(rong)器(qi)。

小貼士：

·首圖(tu)(tu)(tu)最好只用高清圖(tu)(tu)(tu)片。沒有什么(me)比低保真甚至(zhi)失(shi)真的圖(tu)(tu)(tu)片給人的體驗(yan)更差了，如果你想使(shi)用首圖(tu)(tu)(tu)，那么(me)圖(tu)(tu)(tu)片質量意味著(zhu)一切。

·如果你想使用(yong)文字(zi)覆蓋圖(tu)片的(de)方式來制作首圖(tu)，那么請務必確保(bao)圖(tu)片中的(de)視(shi)覺主體能(neng)被(bei)用(yong)戶輕(qing)松識(shi)別、理(li)解，同時和文字(zi)內容有足夠的(de)對比度。

在自然環境中展示

根(gen)據(ju)環境和使用(yong)場景來(lai)展示產品是(shi)電商網站常用(yong)的(de)(de)機巧。而(er)實(shi)際的(de)(de)數據(ju)也表明，這(zhe)樣的(de)(de)圖片擁有著極高的(de)(de)轉化率。舉個(ge)例子，下面所展示的(de)(de) GorillaPod 就(jiu)將產品置于(yu)實(shi)際的(de)(de)使用(yong)場景中，給予用(yong)戶真實(shi)的(de)(de)使用(yong)體驗。靈活的(de)(de)三腳架在整個(ge)圖片中作為(wei)焦點而(er)存在整個(ge)首圖的(de)(de)設(she)計富有創造性(xing)，信息和內容的(de)(de)傳遞也頗(po)為(wei)高效(xiao)。

Juliana Bicycle 的網站首圖同樣(yang)是將產品(pin)置(zhi)于使(shi)用場(chang)景中。

相(xiang)比于色彩豐富的圖(tu)片，黑白(bai)色調的圖(tu)片無法使(shi)用抓人眼球的色彩來吸引訪客，黑白(bai)照片更多(duo)的是依靠內容本身來進行視覺傳達(da)。現代的黑白(bai)攝影(ying)作(zuo)品(pin)強調藝(yi)術性，并且(qie)許多(duo)攝影(ying)師認為，這(zhe)樣的圖(tu)片和攝影(ying)作(zuo)品(pin)更加純粹。

但是，為什么(me)黑白攝影(ying)作品和圖片會如此受追(zhui)捧呢?

很簡單，色彩會讓觀看者分(fen)心(xin)。

色彩(cai)的(de)存在讓用(yong)(yong)戶(hu)更容易忽略照(zhao)片(pian)本身的(de)構圖和細節，用(yong)(yong)戶(hu)的(de)注(zhu)意力(li)可能會被引導到其他的(de)地方，從而忽略諸如(ru)CTA按鈕等關鍵元素。

小貼士：

·如果(guo)你你使用黑白圖片作(zuo)為背景，那么你可以賦予(yu)CTA按鈕以一個醒目(mu)的色彩(cai)，從而起到吸(xi)引用戶注意力的作(zuo)用。

色彩疊加

這里說的(de)(de)(de)色彩疊加(jia)值得是用半透明的(de)(de)(de)色彩圖(tu)層疊加(jia)在(zai)圖(tu)片上，這種手法(fa)通常能夠讓圖(tu)片更加(jia)匹配品牌色，或者視覺設計的(de)(de)(de)需求。所疊加(jia)的(de)(de)(de)色彩能夠讓圖(tu)片更容易引起(qi)用戶的(de)(de)(de)情緒反應。

色彩疊加強化了圖(tu)片的感染力。

即(ji)使是黑白色調的(de)背景(jing)，色彩疊加也同樣可以強化其感染力(li)，不過要選(xuan)對色彩才行。

小貼士：

·想要為圖片添加特定的效(xiao)果并不難，這里(li)有教(jiao)程教(jiao)你如何使(shi)用PS和CSS來達成(cheng)目的;

·當(dang)你使(shi)用單一色彩來(lai)作為疊(die)加(jia)圖(tu)層的(de)時(shi)候，控(kong)制好色彩的(de)透明度(du)。透明度(du)較(jiao)低的(de)色彩會讓背景的(de)圖(tu)片不那么容易識(shi)別，想要讓效果更(geng)微妙(miao)，應當(dang)控(kong)制好這個度(du)。

文字排版

精心設(she)計的(de)(de)排版(ban)能夠為你的(de)(de)品牌提(ti)(ti)升個性，當(dang)這(zhe)些排版(ban)和(he)圖片搭配到一起的(de)(de)時候，整個設(she)計的(de)(de)形(xing)式感(gan)和(he)表現力就有(you)了(le)明顯的(de)(de)提(ti)(ti)升。文(wen)本的(de)(de)樣式和(he)其(qi)中包(bao)含的(de)(de)信息(xi)，和(he)圖片內容相互呼應，互為解讀，這(zhe)是最佳的(de)(de)搭配。

同(tong)一個界(jie)面下(xia)，圖片和文本(ben)之間不僅(jin)僅(jin)有對(dui)抗，還有協同(tong)。

小貼士：

·充滿形(xing)式(shi)感的(de)排版是非常不(bu)錯的(de)視(shi)覺元(yuan)(yuan)素(su)，但是它(ta)不(bu)應該(gai)喧(xuan)賓奪主，如果它(ta)太(tai)過于(yu)顯眼(yan)會(hui)降低(di)圖片作(zuo)為視(shi)覺元(yuan)(yuan)素(su)的(de)存在感。

·時刻謹記(ji)可讀性的(de)(de)問(wen)題(ti)，過于花哨(shao)的(de)(de)字體和排版設(she)計可能存(cun)在色彩對比(bi)度的(de)(de)問(wen)題(ti)，以及識別(bie)度的(de)(de)問(wen)題(ti)。

·充滿形式感的(de)字體和排版設計并不(bu)意(yi)味(wei)著復(fu)雜，它有時候也可(ke)以是簡單的(de)，使(shi)用簡單易讀(du)的(de)字體，同樣可(ke)以帶來優(you)秀的(de)效(xiao)果(guo)。

不對稱布局

不對稱(cheng)布局本(ben)身也是一(yi)種(zhong)(zhong)流行的設(she)計手法。許多網頁設(she)計師尤其喜歡這種(zhong)(zhong)有趣(qu)的排版布局方(fang)式(shi)(shi)。這種(zhong)(zhong)布局非常適合用來引導(dao)用戶的視(shi)覺，因為頁面(mian)有了(le)輕重對比，所以它可以以合乎邏(luo)輯(ji)的方(fang)式(shi)(shi)引導(dao)用戶的眼睛逐步瀏覽(lan)頁面(mian)內容。

文字和圖(tu)片的(de)視(shi)覺(jue)輕(qing)重(zhong)不同，你可(ke)以讓(rang)兩(liang)者分別置(zhi)于(yu)頁面的(de)對稱位(wei)置(zhi)，視(shi)覺(jue)重(zhong)量(liang)上的(de)不對稱就由此形成。結構上的(de)對稱讓(rang)頁面足夠平衡，而(er)視(shi)覺(jue)上的(de)差異則讓(rang)頁面顯得參差有趣。

結語

隨著(zhu)(zhu)趨勢和用(yong)戶(hu)習(xi)慣的(de)(de)變(bian)化，對于優秀用(yong)戶(hu)體驗的(de)(de)認知會逐漸的(de)(de)發生變(bian)化。圖(tu)片(pian)的(de)(de)使用(yong)也(ye)是一樣的(de)(de)，設計趨勢和技術的(de)(de)變(bian)化直接影響著(zhu)(zhu)圖(tu)片(pian)的(de)(de)使用(yong)，但是總體上(shang)而(er)言，對于圖(tu)片(pian)素質(zhi)的(de)(de)要求(qiu)是越(yue)來越(yue)高(gao)了。