文章編輯：網(wǎng)站建設 文章來源：建站行業(yè)資訊 瀏覽量：次
網(wǎng)站設計無論是APP還是網(wǎng)頁，第一印象都很重要。再優(yōu)質(zhì)的內(nèi)容，都需要首屏這個漂亮的臉面來吸引用戶駐留，才能被人注意到。在競爭激烈的數(shù)字產(chǎn)品領域，這是難以辯駁的殘酷經(jīng)驗。這也引出了今天要探討的話題：網(wǎng)頁的首屏設計。
相比于首屏，大家對于首頁的概念會更熟悉一些。和傳統(tǒng)的報紙行業(yè)類似，報紙第一版被稱為頭版，由于報紙常常會折疊起來運輸，當用戶拿到報紙看到的是露出來的頭版頭條(Above the fold)，這就像如今的首頁和首屏之間的關系。用戶打開網(wǎng)頁的第一刻，還沒開始滾動頁面的時候，所看到的就是首屏。
首屏要能夠吸引用戶才行。
從內(nèi)容角度上來說，首屏要涵蓋關鍵的信息，一目了然。從設計上來看，首屏也是最適合發(fā)揮設計創(chuàng)意的地方，許多優(yōu)質(zhì)的首屏設計都采用了簡潔明了的布局，打磨出引人入勝的體驗。首屏通常還承載著網(wǎng)站的導航模塊，是整個站點布局和導航的關鍵。
這個在線漫畫書店就是個優(yōu)秀的范例。頂部的文字LOGO和主干導航都在同一水平線上，超人插畫突破頁頭布局充滿了力量感，在視覺上也非常抓人，同時作為認知度最廣的超級英雄，它也非常適合作為首圖而置頂。下面的漫畫列表恰到好處的露了個頭，讓訪客意識到能夠向下翻頁。在Daily Bugle magazine 這個電子雜志網(wǎng)站中，Daily Bugle 作為標題居中，延續(xù)自傳統(tǒng)報紙設計的襯線體貫穿了整個網(wǎng)站的設計。居中的文字LOGO，分類導航和搜索框平均分布在左右。
The Big Landscape 這個網(wǎng)站在導航的設計上采用了突破柵格的不對稱設計，左邊是LOGO和三個鏈接，為了平衡整個設計，頂欄右邊是搜索框和一個有顏色填充的按鈕。這種設計不僅兼顧了視覺上的平衡，還讓頁頭的可讀性得到了保證。
另外，還有一個值得注意的問題，當用戶開始向下滾動翻頁的時候，首屏頂部的頁頭要如何處理。有的網(wǎng)頁會傾向于使用懸浮固定的導航，讓用戶隨時可以點擊導航跳轉到其他的地方，或者進行搜索。有的網(wǎng)頁則還是采取傳統(tǒng)的策略，當然也有采用折中的設計，當用戶滾動到首屏之后，導航縮小懸浮到頂上，或者變?yōu)椴藛伟粹o，降低視覺重量，保留核心的元素和它們的可交互性。
漢堡菜單
首屏設計中，漢堡菜單是近年來非常流行的一個解決方案，將導航鏈接都隱藏在漢堡按鈕菜單之后。
漢堡按鈕通常放置在首屏，現(xiàn)在已經(jīng)成為一個經(jīng)典的交互元素。目前的用戶也已經(jīng)熟悉了它的存在，無需額外的解釋，他們就知道在漢堡菜單中尋找鏈接和其他選項。漢堡菜單讓整個頁面更加簡約，釋放了空間，節(jié)省了布局元素，在不同的設備上的顯示也更加統(tǒng)一。
Ice Website 這個網(wǎng)站的概念設計就展示了漢堡菜單的一種常見用法。由于網(wǎng)站包含了大量的頁面，設計師非常貼心的將漢堡按鈕置于頁面的左上角，當用戶點擊它的時候，會彈出導航選項。這樣的設計極大程度的節(jié)省了頁面空間，讓整個設計都顯得足夠簡約，也為頁頭省出了空間。在這個首屏當中，頁頭左側是品牌LOGO和介紹，右側是社交媒體帳號鏈接，視覺設計也和整個頁面保持了一致。中間的留白讓整個頁頭保持了視覺上的平衡。
Slopes 這個網(wǎng)站采用了時下流行的側邊欄設計元素，不過設計師沒有將導航放置到側邊欄上，僅僅是保留了品牌LOGO，只是借由側邊欄制造出了這種非對稱的首屏布局。頁頭右側是四個常用的鏈接，而左側是漢堡菜單，更多的鏈接被隱藏在漢堡菜單當中，這樣一來，交互的層次就出來了。
雖然現(xiàn)在漢堡菜單的設計還存在著一些爭議，但是它們?nèi)匀槐粡V泛地運用著。
懸浮固定導航
懸浮式的導航欄也是時下流行的一個趨勢，它為用戶提供了持續(xù)的可供交互的導航服務，這對于越來越長的頁面設計而言，是個相當合理的補充。這個 Structure Blog 的概念設計就采用了懸浮的頁頭，導航則主要是采用的漢堡菜單。這使得品牌更加突出，而整體設計則更加簡約。
Photography Workshops 這個網(wǎng)站的首屏設計就非常的獨特。導航菜單開始是在首屏的底部，隨著滾動，它會到頁面的頂端并且懸浮固定存在。導航菜單的右側是關鍵鏈接，而非關鍵的更多選擇則隱藏在最左側的漢堡菜單中。
雙層菜單
導航還可以設計為雙層的，已經(jīng)有不少網(wǎng)站有了這樣的嘗試
Bakery 這個網(wǎng)站就使用了雙層的導航設計，上層導航中承載的是LOGO和社交媒體帳號、搜索和購物車以及漢堡菜單，而第二層導航則是交互的核心區(qū)域：產(chǎn)品目錄、銷售地點、新聞和特別優(yōu)惠等。整個設計視覺層次清晰，為整個用戶體驗打足了基礎。深圳網(wǎng)站建設公司博納網(wǎng)絡編輯整理。
[聲明]本網(wǎng)轉載網(wǎng)絡媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點，本網(wǎng)不承擔此類稿件侵權行為的連帶責任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權，請您的相關內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們在確認后，會立即刪除，保證您的版權。
