圖文搭配網(wǎng)頁(yè)不累如何讓網(wǎng)站好看實(shí)用

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

其實(shí)，所有的法則或規(guī)律都需要設(shè)計(jì)師們的彈性使用，生搬硬套可能只會(huì)適得其反。以下是我們?yōu)榇蠹宜鸭闹档媒梃b的圖文混排案例，供大家評(píng)論欣賞。

1、 第一個(gè)案例是anyForWeb為Nature House設(shè)計(jì)的圖文交錯(cuò)的一種新形式。案例圖片中的每一個(gè)字母或是小圖片都會(huì)隨著鼠標(biāo)的懸停產(chǎn)生效果，由圖變字，這樣的設(shè)計(jì)不僅讓圖文之間的搭配變得更加生動(dòng)，也增加了用戶瀏覽時(shí)的趣味性。

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

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

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

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

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

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

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

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

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

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

本文名稱：圖文搭配網(wǎng)頁(yè)不累如何讓網(wǎng)站好看實(shí)用
轉(zhuǎn)載源于：http://muchs.cn/news/121196.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、做網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)