作為一個網(wǎng)頁設(shè)計師，你應(yīng)該知道當(dāng)一個新用戶登錄你的網(wǎng)站，第一件事情他一定會注意到你的網(wǎng)站的頭部信息。無論是一個小的導(dǎo)航欄，或者是一個大的圖片全屏輪顯，網(wǎng)站頭部的設(shè)計無疑是全站布局中非常重要的一個環(huán)節(jié)。大多數(shù)網(wǎng)站第一屏的設(shè)計傾向于給訪問者留下非常深刻的印象，并且最好能夠幫助他更好的推廣這個網(wǎng)站的品牌。一個好的網(wǎng)頁第一屏設(shè)計是可以給每一位新的訪問者留下一個長久的不可磨滅的印象。

在這篇文章里，我們想分享幾個非常實用的小技巧來幫助網(wǎng)頁設(shè)計師們實現(xiàn)一個高大上的網(wǎng)站第一屏設(shè)計。最好的方法就是把設(shè)計的側(cè)重點集中到網(wǎng)站的內(nèi)容上，并著重強調(diào)重要的內(nèi)容，使這部分內(nèi)容在整個第一屏設(shè)計里面凸現(xiàn)出來。另一方面還要注意，設(shè)計的時候還要兼顧擴大品牌的影響力。

    超大背景圖片

    近幾年在第一屏設(shè)計中使用一個大的全屏圖片變得越來越司空見慣，快速發(fā)展的互聯(lián)網(wǎng)使資源的下載前所未有的快速。現(xiàn)在背景圖包含一個1920x1080的圖片讓他適應(yīng)任何屏幕的尺寸是相當(dāng)簡單的。

hero image是一個網(wǎng)頁設(shè)計的術(shù)語。它是一個特定類型的全屏banner,經(jīng)常放在一個web頁面的前面和中心的位置。它往往是訪客登錄網(wǎng)站上的第一視覺。它的作用是概述網(wǎng)站的最重要的內(nèi)容，通常包含圖像和文本,可以靜態(tài)也可以是動態(tài)的。

    hero image與普通的banner相比更典型，他經(jīng)常被放置在第一屏的重要位置。經(jīng)常是用一些有震撼力的攝影圖片，被用于產(chǎn)品的促銷、公司或者個人的推廣。品牌一直是它的一個決定性的因素，但是hero images的內(nèi)容并不總是關(guān)于品牌推廣，他們的目的也是為了拉近訪問者，使他們跟網(wǎng)站的關(guān)系更密切。

    清晰的導(dǎo)航鏈接

想要你的第一屏設(shè)計顯眼，最重要的元素莫過于導(dǎo)航的設(shè)計。除非你設(shè)計一個單幅的網(wǎng)頁，那么很可能你需要一些鏈接去控制這個網(wǎng)站，并且許多單頁的設(shè)計應(yīng)用了滾動的鏈接設(shè)計。

對于用戶來說一個簡單易讀的導(dǎo)航是非常重要的。人們都希望能夠快速的識別頁面并作出選擇。文本鏈接可以加粗，加線框、下劃線，或者鏈接和背景用對比色等等，這些都可以讓他們更引人注目，從而方便閱讀。

引人注目的品牌設(shè)計

品牌對于公司的重要性不言而喻，不管哪一個公司他們都需要一個吸引人眼球的品牌設(shè)計。訪問者們記住的事物一定是一些引人注目的，他會從一大堆熟悉的logos里脫穎而出。

固定導(dǎo)航欄

隨著web瀏覽器不斷地更新?lián)Q代，一些特殊效果也變得更加普遍多見。固定導(dǎo)航欄就是這樣的一個效果，它被一些現(xiàn)代的開發(fā)人員們發(fā)現(xiàn)，這個發(fā)現(xiàn)讓導(dǎo)航在網(wǎng)頁的任何地方都可以被輕松的找到。這么便利的發(fā)現(xiàn)都?xì)w功于css3和jquery的快速發(fā)展。(css3和jquery是網(wǎng)頁制作方面的知識~)

靈感總結(jié)~

掌握上面的這些設(shè)計技巧，讓你更快的做出一個優(yōu)秀的第一屏設(shè)計。這些第一屏主要是靠內(nèi)容、標(biāo)志或者導(dǎo)航的設(shè)計來吸引眼球。因為用戶容易被那些有趣的標(biāo)題元素和完美的頁面展示吸引，最完美的第一屏設(shè)計要在在初次就點燃訪問者的好奇心。

設(shè)計專線：0736-7171820