圖片在(zai)網頁中是(shi)極(ji)為重要的設計元素,它比文字更(geng)能(neng)夠吸引瀏覽者的注(zhu)意力,不(bu)但能(neng)給網(wang)站帶來(lai)美感的烘托、氣(qi)氛的渲染,也(ye)讓觀眾們得到眼見為實的(de)直觀感受,恰當的(de)圖片運用會(hui)給網站帶來有效的(de)受關注(zhu)程度。圖片的(de)大小、位置、形態以及不同(tong)的(de)組合方式(shi),都會(hui)直接影響(xiang)到(dao)網頁的視覺效果。

1.圖(tu)片的大小(xiao)及位置(zhi)的影響

  圖片在網站中(zhong)出現的大小和位置,代表著一個網(wang)站對頁(ye)面信息(xi)的疏導,因(yin)為它關系著瀏覽者讀取信息的先后(hou)順(shun)序,網頁設計師(shi)可以根據(ju)這(zhe)個特(te)點(dian)來編排(pai)頁面(mian),使(shi)網站傳遞的信(xin)息更加(jia)高效(xiao)。在一個網頁界面中,想要突出(chu)的(de)信息就是這個版面的(de)重點(dian),把含有重要信息的圖(tu)片尺寸放大,這個圖片就會更加吸引瀏覽(lan)者的注意,同理,把其(qi)他的次要圖片尺寸變小,就會(hui)讓整個(ge)界面的主次關(guan)系清晰明(ming)確。

  網(wang)頁中的(de)(de)圖片(pian)大小不(bu)但可以引導瀏覽者們(men)的(de)(de)關注順(shun)序,還可以賦(fu)予界面不同的節奏(zou)感,但如果同(tong)一界面內的圖片過多,并(bing)且大(da)小(xiao)不一,會(hui)顯得整體效果(guo)雜亂無章(zhang),為(wei)了(le)追求網頁(ye)中平衡(heng)的審美心理,就需要對圖(tu)片的尺(chi)寸進行整體協調(diao)。例如常見的做法是把圖(tu)片進行歸類整理,按照圖片信息的主次程度(du),大致(zhi)劃分幾個(ge)規格,對圖(tu)片(pian)比例(li)關系的(de)調整會讓網頁中(zhong)的(de)主次(ci)級別更加清(qing)晰明(ming)了。

2.圖片的組合編排的影響

  在一(yi)個網頁界面中包含多(duo)個圖(tu)片信息(xi)的時候,除了對它們(men)的(de)大小尺寸予以調整(zheng)外,還(huan)要考(kao)慮到它們的位置、方向和對齊方式等因素,它(ta)們的差異同樣(yang)會給瀏覽者帶來不(bu)同的心理感受,如果能夠對頁面上的多張圖片進行(xing)靈活(huo)處理(li),就能較好地(di)控制網(wang)站(zhan)的(de)(de)風格(ge)和觀眾的(de)(de)印象。在網(wang)頁中適合(he)放置圖片的(de)(de)地(di)方(fang)有很多(duo),如頁面的上(shang)部、下部、左側、右(you)側以及(ji)連接對角線的四(si)個(ge)角的位置,都會成為瀏覽者(zhe)們的(de)視覺焦點,但(dan)其(qi)中最佳的焦點(dian)位置,還(huan)是(shi)觀眾(zhong)視覺流程中較先(xian)注意(yi)到的左上角(jiao)和頁面上部,將(jiang)重要的圖片放在這些位置,會增(zeng)強信息的(de)視覺(jue)沖擊力。

  另外,在圖片的排列(lie)上,如果(guo)其中(zhong)一(yi)張圖片(pian)與其他圖片(pian)相隔較大(da)或(huo)者突(tu)出(chu)顯示,會讓這張(zhang)圖片更(geng)加顯眼,這也是增強頁(ye)面信息層次的有效做法。還有一些網站(zhan)在(zai)風格(ge)定位上要追求活力動感、活潑可愛等(deng)調性,這類(lei)網站在圖(tu)片的運用上也往往選擇(ze)具有動感的視角,圖片(pian)上物(wu)像(xiang)的動感會使(shi)整個網站趨于活躍。此(ci)外,我們還可以調整圖片的(de)傾斜度,使(shi)它們的方向產生對比,或是沿著某種運動路徑排列,這些動感的編排可以(yi)打破網(wang)頁原有的格(ge)局,增強(qiang)網站(zhan)的動(dong)態化表現。

3.圖片的(de)形狀及摳圖的(de)影響

  對圖片的裁剪,還有(you)一種(zhong)形式較為復雜,我們(men)稱為摳圖。摳圖就是我們(men)俗稱的去背景,是(shi)指把(ba)圖片中具(ju)體的形象剪裁下來,其余的背(bei)景部(bu)分刪(shan)除掉(diao)。這種(zhong)裁剪(jian)方式(shi)比較靈活(huo),能夠將展示物體的形狀表現出來,賦予(yu)頁面靈動的美感(gan)。只是裁(cai)切的時(shi)候需要(yao)精(jing)細(xi)、準確,因為裁剪得不徹(che)底,會在物體的邊(bian)緣(yuan)留(liu)有(you)雜邊(bian),給人以粗(cu)糙(cao)的不良印象。

  如果是為了網站(zhan)的(de)宣傳而專門拍攝的(de)圖片,應(ying)盡量在(zai)拍攝時(shi)選擇(ze)與物體反差較大的(de)單色背景,這樣(yang)在后期去背(bei)景時較容(rong)易。減少多余的信息(xi)量(liang),截取其中的(de)局部,這也是版式設計中處理圖的常見方法,裁剪的(de)時候也并(bing)不一定需要保持圖(tu)片(pian)原來(lai)的矩形,它可以根據需要裁剪成(cheng)任意(yi)形狀,這能將瀏覽(lan)者的視線(xian)集中在(zai)保(bao)留下來的部分,令圖片(pian)的展示(shi)效果更(geng)加突(tu)出,也更適合版面的(de)(de)(de)需要。網站中圖片的(de)(de)(de)形(xing)(xing)狀可以裁剪成幾何形(xing)(xing)、不規則形(xing)(xing)或者是(shi)自然形(xing)(xing)等(deng)。幾何形(xing)(xing)的(de)(de)(de)圖片常(chang)見的(de)(de)(de)有圓形(xing)(xing)、三角形(xing)(xing)、菱形(xing)(xing)、多邊形(xing)(xing)等(deng)。