編者按：來看看高手是怎么做的！今天搜集了一組值得同學(xué)們借鑒學(xué)習(xí)的圖文混排優(yōu)秀案例，為了同學(xué)們能有所收獲，案例都附有到位的分析，幾乎每個案例都有特別的排版技巧，對提升版式設(shè)計能力很有幫助，來學(xué)習(xí)咯。

借鑒之前先來看看，這些案例有木有用到這些技巧？《推薦！網(wǎng)頁首屏設(shè)計之圖文混排的10大技巧》

從過去到現(xiàn)在，設(shè)計師們總是對方位性的問題格外敏感，可能還有些輕微的強迫癥。比如有的網(wǎng)頁設(shè)計師特別偏好黃金比例的使用，從而忽視了用戶的視覺感官體驗。

其實，所有的法則或規(guī)律都需要設(shè)計師們的彈性使用，生搬硬套可能只會適得其反。以下是AnyForWeb為大家搜集的值得借鑒的圖文混排案例，供大家評論欣賞。

Nature House

第一個案例是圖文交錯的一種新形式。案例圖片中的每一個字母或是小圖片都會隨著鼠標的懸停產(chǎn)生效果，由圖變字，這樣的設(shè)計不僅讓圖文之間的搭配變得更加生動，也增加了用戶瀏覽時的趣味性。

The Tech?Beach

The Tech Beach的網(wǎng)站背景利用了Metro的設(shè)計風格，擔心太規(guī)整？所以設(shè)計師將透明度較高的潑墨形狀色塊放在頁面中間位置，文字重點和logo浮在色塊上方。這樣的圖文搭配模式能讓用戶很自然的領(lǐng)會瀏覽時的先后順序。

?Anyi Lu

Anyi Lu的巧妙之處在于留白部分。案例網(wǎng)頁中的留白在中間的位置，看似文字和圖片被一分為二了，但從心理角度上來說，這樣做其實更加能激發(fā)用戶連結(jié)圖和字之間聯(lián)系的好奇心、在單色底色的映襯下，幽靈按鈕的設(shè)計也變得很搶眼，更有利于用戶點擊。

如何搞定留白？來這里學(xué)習(xí)！《高端網(wǎng)站都懂的！如何在網(wǎng)頁設(shè)計中使用留白》

Moon Camp

Moon Camp徹底把文字和圖片混合在一起。這種做法成功與否不僅取決于整體頁面的布局，色彩的搭配也是個很關(guān)鍵的因素。網(wǎng)頁色調(diào)屬于昏暗系，所以設(shè)計師選擇了星空色作為字體的顏色，與網(wǎng)站風格吻合，文字的不規(guī)則排列也讓網(wǎng)站多了一份神秘感。

如何正確配色的6個法則：《秒變配色高手！怎么都不會錯的6條網(wǎng)頁設(shè)計配色原則》

Zizzi Ristorante

Zizzi Ristorante的網(wǎng)站第一眼可能會覺得有些凌亂，但用戶的視線最終還是會聚集到枚紅色框內(nèi)的內(nèi)容上。單從布局上來說，這個網(wǎng)站并沒有什么過人之處，但仔細一看，我們不難發(fā)現(xiàn)其實網(wǎng)站中圖片的占比很少，按照常規(guī)的做法，頁面會變得很單調(diào)，因此，設(shè)計師最后用一些色塊或是圖形巧妙地化解了這個不足，無形中完成了圖片與文字之間的完美合作。

?LUKE BEARD

LUKE BEARD的網(wǎng)站幾乎沒有什么布局可言，左邊文字右邊圖片，僅此而已，但一些小設(shè)計讓整個頁面變得精致起來。圖片中人物的視線向文字流去，沿著視覺流向來排布信息是很多國外網(wǎng)站慣用的布局手法。圖片會引導(dǎo)用戶去看文字內(nèi)容，兩者之間形成一種默契的邏輯關(guān)系。

ZULU & ZEPHYR

ZULU & ZEPHYR的網(wǎng)站運用的是對比布局法。大海和天空在色彩上形成了一種對比，起到了互相烘托并且增強效果的作用。他們之間的對比讓頁面中央的文字引起了用戶的注意。用圖來襯托文字，讓畫面充滿了產(chǎn)生了一種別樣的韻律。

Tomas Jasovsky

Tomas Jasovsky網(wǎng)站中的圖文看起來似乎置身于兩個圖層中，也許若隱若現(xiàn)的內(nèi)容才是設(shè)計師想表達的重點。

M-Power Yoga

M-Power Yoga的網(wǎng)站圖片為用戶帶來了一種垂直和水平的雙向平衡感，這樣的圖片能讓用戶更加心平氣和的認真閱讀頁面中的文字。

Segno

Segno的網(wǎng)站無論從圖片內(nèi)容或是色調(diào)上都充滿了神秘感。對稱的設(shè)計也顯得比較討巧，文字在頁面居中的位置，給了用戶最佳的瀏覽體驗。

在網(wǎng)頁設(shè)計中，文字內(nèi)容和圖片的比重占了很大一部分，但差不多的信息量，呈現(xiàn)在網(wǎng)頁上的效果卻會大相徑庭。如何將這些內(nèi)容和元素安置在最合適的位置，也許是這其中很主要的原因。

本月人氣最高酷站推薦揭榜！

第三名！既有神器也有消磨時間的酷站！
《超贊！有哪些很少為人所知，但是很有意思的網(wǎng)站？》

第二名！讓創(chuàng)意爆棚的網(wǎng)站首頁設(shè)計！
《創(chuàng)意發(fā)燒作品！36個布局獨特的網(wǎng)站首頁概念設(shè)計》

第一名！鍛煉設(shè)計基礎(chǔ)功的網(wǎng)站作品！
《不走尋常路！如何利用基礎(chǔ)形狀玩出新花樣？》

原文地址：anyforweb

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量85萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：