2015-5-21 高勁
藍(lán)藍(lán)設(shè)計(jì)( m.wowo44.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
編者按：今天這篇總結(jié)了幾個(gè)優(yōu)秀的全屏背景網(wǎng)站特點(diǎn)，關(guān)鍵是幫同學(xué)們掌握在一張大圖上放不同元素的技巧，理解了本質(zhì)后對(duì)PPT、平面設(shè)計(jì)、海報(bào)設(shè)計(jì)等都有很大幫助，非常實(shí)用 >>>
大圖在視覺上更吸引人，但是如果沒有適當(dāng)?shù)呐虐娣吹箷?huì)影響用戶的體驗(yàn)效果。
俗話說，一張圖片勝于千言萬語。人類是視覺性動(dòng)物，圖片更能吸引人的注意，是傳達(dá)信息的重要方式。隨著互聯(lián)網(wǎng)和顯示設(shè)備的發(fā)展，越來越多的網(wǎng)站使用引人注目的大圖片方式來吸引用戶的注意力，同時(shí)，對(duì)用戶來說也是一種視覺體驗(yàn)。通常一張圖片無法傳遞全部的信息，所以很多網(wǎng)站便用類似旋轉(zhuǎn)木馬的方式輪播顯示多張圖片。
新西蘭航空公司的主頁便體現(xiàn)了采用大圖片形式的趨勢(shì)：秋天漫黃的樹葉和丘壑的美麗風(fēng)景鋪滿了整個(gè)頁面，形成一道引人注目的焦點(diǎn)。
新版的新西蘭航空公司主頁，大圖片作為背景以及在頁面底部的航班搜索是最顯著的特點(diǎn)。
這種方式的基本原理就是圖片相對(duì)于文字有一種獨(dú)特的能力，它可以激勵(lì)和吸引瀏覽網(wǎng)站人的目光。Don Norman在《Emotional Design》一書中對(duì)這種現(xiàn)象是這樣子描述的：這是人類的本能反應(yīng)，圖片更具有外觀性。網(wǎng)站通過顯示美觀的圖片（如美麗的風(fēng)景，時(shí)尚的產(chǎn)品，以及魅力無限的人物）引起瀏覽者內(nèi)心的強(qiáng)烈反應(yīng)。
想要得到用戶發(fā)自內(nèi)心的認(rèn)可不只是通過良好的用戶體驗(yàn)。網(wǎng)頁應(yīng)該向用戶傳達(dá)內(nèi)容（知識(shí)）和功能性。
新西蘭航空主頁上的圖片雖然十分迷人，但是在網(wǎng)頁上投入過多的元素就意味著以后可能會(huì)忽略其它細(xì)小的元素——-可能這些元素很重要也說不定。
整個(gè)新西蘭航空主頁旨在關(guān)注形象:頂部導(dǎo)航鏈接都很小，沒有背景顏色，搜索功能用一個(gè)放大鏡圖標(biāo)來表示，而不是一個(gè)輸入框，甚至“Book Now”按鈕也是采用簡(jiǎn)單的輪廓表示，沒有背景，這樣可以與大圖片的背景區(qū)分開來。最重要的是，航班搜索功能放低了幾英寸，以防止大圖片被截?cái)唷Ｒ虼耍S多用戶甚至看不到這個(gè)搜索航班的按鈕，除非滾動(dòng)到下面的頁面。
將新版的新西蘭航空主頁與舊版的對(duì)比，在設(shè)計(jì)上可以很清晰地說明這種方法的優(yōu)缺點(diǎn)。與其他許多航空公司一樣，在新版的網(wǎng)站之前，新西蘭航空的主頁上的促銷活動(dòng)和項(xiàng)目是非常凌亂的。幾乎沒有明顯的背景圖像，因?yàn)榫W(wǎng)頁上有太多的文字，鏈接和小部件掩蓋了網(wǎng)頁的背景。然而，航班搜索工具放置在網(wǎng)頁頂部的左上角位置，也是用戶看到了地方。（起碼在文本閱讀中是這樣）
在舊版的主頁中，新西蘭航空公司主頁是非常凌亂的，但航班搜索工具放置的位置卻方便用戶能找到它。
相比之下，手機(jī)版的新西蘭航空主頁卻能更輕易地找到重要的文本信息和主要功能，四個(gè)主要的功能并列排在顯著的地方，盡管擺放的位置和外觀都與廣告類似，但卻更具有警惕性，更能吸引用戶的注意。這種設(shè)計(jì)方式也采用大圖片為背景的模式，并且操作按鈕一樣強(qiáng)調(diào)視覺效果不會(huì)遮擋到大圖片的背景。
手機(jī)版的新西蘭航空公司主頁相比于桌面版而言，用戶更容易察覺，找到文本信息。
你的網(wǎng)站決定該采用哪種最佳設(shè)計(jì)方式是首要問題，在大多數(shù)情況下，你的網(wǎng)頁有個(gè)目標(biāo)和目標(biāo)用戶，具有吸引人們注意的大圖片設(shè)計(jì)固然有價(jià)值，但是有利也有弊，相對(duì)于文本信息就更容易被忽視。
蘋果主頁也采用大圖片為焦點(diǎn)的設(shè)計(jì)模式，這張圖片實(shí)際上是展示他們的產(chǎn)品，并通過強(qiáng)大的導(dǎo)航欄提供給用戶購(gòu)買該產(chǎn)品的渠道。當(dāng)然，大圖片本身也提供了很多有用的信息，它清晰地向用戶展示了這兩款手機(jī)模型的相關(guān)尺寸。
蘋果主頁展示了他們的產(chǎn)品，并搭配有強(qiáng)大的全球性導(dǎo)航欄給用戶強(qiáng)烈的視覺體驗(yàn)，這與輕量的主頁背景形成鮮明的對(duì)比。
微軟搜索引擎Bing的主頁伴有不斷變化的背景，是極端偏向于圖片設(shè)計(jì)的另一個(gè)例子。網(wǎng)站是完全致力于有別于大多數(shù)網(wǎng)站的設(shè)計(jì)約束。這個(gè)網(wǎng)站的主要功能是向用戶展示搜索框，沒有其它過多的設(shè)計(jì)去強(qiáng)調(diào)不必要的元素。網(wǎng)站巨大的白色搜索框已然清晰地從其它元素中脫穎而出。這也達(dá)到了微軟的預(yù)期效果。
微軟Bing主頁采用大圖片作為背景的設(shè)計(jì)
大多數(shù)網(wǎng)站會(huì)采用相對(duì)平衡的設(shè)計(jì)方法：選用的圖片能支持品牌，并且不掩蓋其它重要的元素。例如StateFarm的主頁采用一張象征開車的大圖片，這也是他們業(yè)務(wù)的關(guān)鍵部分。但這張圖片并沒有影響其它元素的呈現(xiàn)，強(qiáng)大的導(dǎo)航欄和其它基本的元素其中包括登陸，報(bào)價(jià)和處理保險(xiǎn)索賠等功能模塊依舊能清晰地展現(xiàn)在用戶眼前。
StateFarm主頁用了一張引人注目的大圖片，同時(shí)也注重其它元素的呈現(xiàn)。
遵循以下的步驟，確保你正確地使用平衡元素：
1. 先確定和優(yōu)先考慮網(wǎng)站的目標(biāo)。用戶目標(biāo)和商業(yè)目標(biāo)（包括品牌目標(biāo)）。頁面是否是通過營(yíng)銷手段來建設(shè)你的網(wǎng)站？或者是否大部分的瀏覽者已經(jīng)熟悉你的機(jī)構(gòu)（或者是所屬的行業(yè)）。并且確定現(xiàn)在是否需要一些特殊的信息和功能？
2. 確定你所設(shè)計(jì)的每一個(gè)元素是否與網(wǎng)站的建設(shè)相符合。圖片一般是起到裝飾和支撐品牌效應(yīng)的作用。導(dǎo)航欄和結(jié)構(gòu)化搜索一般與特定的用戶項(xiàng)目有關(guān)。
3. 根據(jù)目標(biāo)的重要性分配視覺的輕重級(jí)。如果一個(gè)所設(shè)計(jì)的元素是為了支撐一個(gè)高優(yōu)先級(jí)的目標(biāo)，那么這個(gè)元素在視覺設(shè)計(jì)上應(yīng)該更強(qiáng)烈一點(diǎn)。相反，設(shè)計(jì)二級(jí)目標(biāo)相關(guān)的元素盡可能地的平和一點(diǎn)，減少?gòu)?qiáng)調(diào)作用（這條規(guī)則聽起來很容易，但在設(shè)計(jì)時(shí)往往會(huì)被忽視）
4. 挑選的圖片應(yīng)該與品牌效應(yīng)相結(jié)合。記住，你的網(wǎng)站不僅僅是展示圖片，除非是Flickr。所選的圖片應(yīng)該能表明你建設(shè)網(wǎng)站的原因。
5. 選擇引人注目的圖片是為了起到吸引的作用。如果網(wǎng)站的圖片與其它元素是同等重要，你就得決定哪種類型的圖片更適用，只有這樣你才能找到更有吸引力的圖片。
6. 在更新你的網(wǎng)站時(shí)要精心挑選設(shè)計(jì)模式。對(duì)于許多設(shè)計(jì)項(xiàng)目而言，建設(shè)一個(gè)看起來更“現(xiàn)代化”的網(wǎng)站是很重要的。然而卻有很多種方法可以實(shí)現(xiàn)這一任務(wù)。排版，布局和品牌色彩。這只是簡(jiǎn)單地舉幾個(gè)例子，都能有效地創(chuàng)建一個(gè)在視覺和感觀上面都具備“現(xiàn)代化”特性的網(wǎng)站，同時(shí)對(duì)關(guān)鍵部分還能給予適當(dāng)?shù)貜?qiáng)調(diào)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wowo44.com