在(zai)(zai)(zai)網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)建(jian)設(she)(she)的(de)過程(cheng)中(zhong)，一個完(wan)(wan)整(zheng)美觀的(de)網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)都需要通過混排的(de)方式完(wan)(wan)成，雖然(ran)在(zai)(zai)(zai)搜索(suo)引擎優化的(de)角度(du)，頁面中(zhong)的(de)圖片太多，會影響網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)打(da)開速度(du)，而且利于搜索(suo)關鍵字的(de)優化，但是(shi)圖片的(de)搭(da)配(pei)在(zai)(zai)(zai)網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)建(jian)設(she)(she)中(zhong)是(shi)不可(ke)缺少的(de)。目(mu)前很多網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)設(she)(she)計師，習慣性的(de)使(shi)用黃(huang)金比例的(de)方式去設(she)(she)計網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)，也許是(shi)從事網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)設(she)(she)計行業太久的(de)緣故，多少都有一些強迫癥的(de)感(gan)(gan)覺。在(zai)(zai)(zai)設(she)(she)計師的(de)眼里(li)，網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)就應(ying)該是(shi)中(zhong)規中(zhong)矩的(de)，稍微(wei)有幾個像素的(de)偏差(cha)就會感(gan)(gan)覺不舒服。其實作(zuo)為一個的(de)網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)設(she)(she)計師應(ying)該靈活彈性設(she)(she)計，不能生搬硬(ying)套，只有這才能更好的(de)設(she)(she)計出一個的(de)網(wang)(wang)(wang)(wang)站(zhan)(zhan)(zhan)(zhan)建(jian)設(she)(she)作(zuo)品。

網站建設中圖文(wen)混(hun)排的(de)方法和技巧

一、使用動(dong)態圖文(wen)交錯方式展示，增(zeng)加用戶(hu)互動(dong)性

       此類展(zhan)示(shi)(shi)方式(shi)多(duo)用(yong)(yong)于網(wang)站中廣(guang)告出現，尤以購物網(wang)站為主(zhu)，將文字(zi)和商品交叉(cha)組合，當用(yong)(yong)戶(hu)使(shi)用(yong)(yong)鼠標移動到圖片上的(de)(de)(de)時候，圖片將編程文字(zi)顯示(shi)(shi)。或鼠標移動到文字(zi)上，文字(zi)變(bian)成產品展(zhan)示(shi)(shi)。使(shi)用(yong)(yong)此方式(shi)展(zhan)示(shi)(shi)，可增(zeng)加用(yong)(yong)戶(hu)的(de)(de)(de)互動性，用(yong)(yong)戶(hu)感覺(jue)就像是在(zai)玩一種游戲(xi)，很輕松(song)的(de)(de)(de)就明(ming)白了廣(guang)告的(de)(de)(de)含(han)義是什么(me)，增(zeng)加了圖文結合的(de)(de)(de)趣味(wei)性。

使用動態圖文交錯方式展示，增(zeng)加(jia)用戶互(hu)動性

二、采(cai)用Metro方式布局網站中的圖(tu)片，巧妙技巧防(fang)止(zhi)呆板(ban)

       Metro的(de)設計(ji)風(feng)格無疑(yi)是(shi)近的(de)設計(ji)風(feng)格，網(wang)站(zhan)(zhan)所有模塊(kuai)都采用(yong)直線(xian)指(zhi)教方式布局，簡單大方，讓用(yong)戶一看就有一種想點擊的(de)沖(chong)動(dong)。如(ru)果圖片(pian)太多(duo)，幾十張(zhang)圖片(pian)都采用(yong)這(zhe)(zhe)(zhe)種方式布局的(de)話(hua)，很(hen)容易(yi)造成網(wang)站(zhan)(zhan)呆板(ban)，這(zhe)(zhe)(zhe)時應(ying)該(gai)在圖片(pian)上面(mian)用(yong)比較明顯的(de)色彩塊(kuai)填充，在上面(mian)增加網(wang)站(zhan)(zhan)的(de)主題語(yu)句，這(zhe)(zhe)(zhe)樣操作可使用(yong)戶很(hen)自(zi)然的(de)領(ling)會到網(wang)站(zhan)(zhan)的(de)主題含義是(shi)什(shen)么，并有一種網(wang)站(zhan)(zhan)前(qian)后的(de)層次感。

采用Metro方式(shi)布局(ju)網站中的圖(tu)片，巧妙技巧防止呆板

三、敢于(yu)在(zai)文字和圖(tu)片中留白，透過圖(tu)片視覺方位，使(shi)用戶了(le)解下一步(bu)要做什么

       在進(jin)行圖(tu)片(pian)和文(wen)(wen)(wen)字(zi)(zi)(zi)搭配設(she)計的(de)(de)(de)時(shi)候(hou)，有時(shi)一張圖(tu)可能需要(yao)占得空(kong)間(jian)比較大(da)(da)，但是文(wen)(wen)(wen)字(zi)(zi)(zi)和圖(tu)片(pian)又很小，需要(yao)設(she)計師大(da)(da)膽(dan)的(de)(de)(de)對文(wen)(wen)(wen)字(zi)(zi)(zi)和圖(tu)片(pian)之間(jian)進(jin)行留白，雖然圖(tu)片(pian)整(zheng)體(ti)感(gan)覺有一種文(wen)(wen)(wen)字(zi)(zi)(zi)和人物一分為(wei)二的(de)(de)(de)意思，但從心里(li)角度(du)來看，用戶很容易通過人物的(de)(de)(de)運動方式和視覺指向和左(zuo)邊(bian)的(de)(de)(de)文(wen)(wen)(wen)字(zi)(zi)(zi)進(jin)行關聯起來，加(jia)之文(wen)(wen)(wen)字(zi)(zi)(zi)下方按(an)鈕的(de)(de)(de)特殊設(she)計，鼠標移(yi)動變為(wei)深色按(an)鈕，更加(jia)激發了用戶的(de)(de)(de)點擊(ji)欲(yu)望(wang)。

敢于(yu)在文字和圖片(pian)中留白，透(tou)過圖片(pian)視覺方位，使用戶(hu)了解下一步要做(zuo)什么

四、考(kao)驗設計水平(ping)，圖片文(wen)字混(hun)亂排列，錯落有序，視覺沖擊(ji)

       徹底把圖片和(he)(he)文(wen)字打亂排列(lie)，沒有規則(ze)，這樣(yang)設(she)計的(de)成(cheng)功(gong)與否關鍵還要看設(she)計師的(de)水平(ping)如何，不僅在于(yu)如何對文(wen)字和(he)(he)圖片進(jin)行排列(lie)，關鍵還有色(se)彩的(de)搭配(pei)能(neng)力(li)。將不重要的(de)元素(su)透過(guo)暗色(se)隱藏(zang)在圖片背景中(zhong)(zhong)，文(wen)字部分和(he)(he)圖片背景進(jin)行相融合的(de)同時(shi)又能(neng)看清(qing)文(wen)字表達(da)的(de)含義(yi)是什么，突出圖片中(zhong)(zhong)產品的(de)重點，色(se)彩對比鮮明，視覺沖擊感(gan)強烈。

考驗(yan)設計水平，圖片文字混(hun)亂排列，錯落(luo)有序，視覺沖擊

五、大(da)氣規劃，設計(ji)一(yi)個好看的背景圖很關鍵

       目前(qian)國(guo)外很多(duo)(duo)網(wang)(wang)(wang)站都采用(yong)這(zhe)種設計(ji)理念(nian)，網(wang)(wang)(wang)站首頁(ye)采用(yong)一(yi)個(ge)張比(bi)較(jiao)大氣的圖(tu)片作為背景，其(qi)中(zhong)加上(shang)網(wang)(wang)(wang)站的名稱或要(yao)(yao)突(tu)出的文(wen)(wen)字(zi)，給用(yong)戶一(yi)種開(kai)礦(kuang)神怡的感覺。隨著(zhu)HTML5+CSS3的廣泛支持(chi)，國(guo)內許多(duo)(duo)網(wang)(wang)(wang)站也開(kai)始(shi)效仿(fang)此(ci)設計(ji)方(fang)法(fa)。看(kan)似簡(jian)單的圖(tu)文(wen)(wen)混排方(fang)式，其(qi)關鍵還是在于背景圖(tu)的設計(ji)是什么樣的，背景圖(tu)大氣的設計(ji)和藝術文(wen)(wen)字(zi)的相搭配可(ke)以(yi)要(yao)(yao)比(bi)想(xiang)象的效果好(hao)很多(duo)(duo)。

大氣規劃(hua)，設計一(yi)個好看的(de)背景圖(tu)很關鍵

寫到：

       網(wang)(wang)站(zhan)圖文混(hun)排(pai)(pai)是(shi)網(wang)(wang)站(zhan)建(jian)設中常(chang)遇到的(de)問題，雖然在(zai)大多數時(shi)候圖片和文字交叉式(shi)布局(ju)可以大幅(fu)度(du)提(ti)高(gao)網(wang)(wang)站(zhan)的(de)可讀性，但(dan)是(shi)也在(zai)一定程(cheng)度(du)上增加網(wang)(wang)站(zhan)的(de)代(dai)碼(ma)量，情況(kuang)多了以后勢(shi)必會影響網(wang)(wang)站(zhan)訪問速度(du)，訪問速度(du)的(de)快慢可直接決定于網(wang)(wang)站(zhan)關鍵字排(pai)(pai)名的(de)情況(kuang)，到底應該在(zai)網(wang)(wang)站(zhan)關鍵字排(pai)(pai)名和用(yong)戶體驗方(fang)面(mian)如何取舍，還是(shi)要網(wang)(wang)站(zhan)建(jian)設的(de)目(mu)的(de)是(shi)什么，我們可以在(zai)保證不影響關鍵字排(pai)(pai)名的(de)前提(ti)下，做好網(wang)(wang)站(zhan)圖文混(hun)排(pai)(pai)的(de)方(fang)法(fa)，爭(zheng)取用(yong)戶體驗和排(pai)(pai)名雙豐收。