色婷婷成人综合激情免费视频,2024中文日产幕无线,亚洲午夜福利精品久久,精品精品国产欧美在线,国产又色又爽又免费的刺激软件

logo 返回列表
網(wǎng)頁首屏的設(shè)計模式
2017-06-21 2910

   無論是APP還是網(wǎng)頁,第一印象都很重要。再優(yōu)質(zhì)的內(nèi)容,都需要首屏這個漂亮的臉面來吸引用戶駐留,才能被人注意到。在競爭激烈的數(shù)字產(chǎn)品領(lǐng)域,這是難以辯駁的殘酷經(jīng)驗。這也引出了今天要探討的話題:網(wǎng)頁的首屏設(shè)計。

 什么是首屏

相比于首屏,大家對于首頁的概念會更熟悉一些。和傳統(tǒng)的報紙行業(yè)類似,報紙第一版被稱為頭版,由于報紙常常會折疊起來運輸,當(dāng)用戶拿到報紙看到的是露出來的頭版頭條(Above the fold),這就像如今的首頁和首屏之間的關(guān)系。用戶打開網(wǎng)頁的第一刻,還沒開始滾動頁面的時候,所看到的就是首屏。

首屏要能夠吸引用戶才行。

從內(nèi)容角度上來說,首屏要涵蓋關(guān)鍵的信息,一目了然。從設(shè)計上來看,首屏也是最適合發(fā)揮設(shè)計創(chuàng)意的地方,許多優(yōu)質(zhì)的首屏設(shè)計都采用了簡潔明了的布局,打磨出引人入勝的體驗。首屏通常還承載著網(wǎng)站的導(dǎo)航模塊,是整個站點布局和導(dǎo)航的關(guān)鍵。

這個在線漫畫書店就是個優(yōu)秀的范例。頂部的文字LOGO和主干導(dǎo)航都在同一水平線上,超人插畫突破頁頭布局充滿了力量感,在視覺上也非常抓人,同時作為認(rèn)知度最廣的超級英雄,它也非常適合作為首圖而置頂。下面的漫畫列表恰到好處的露了個頭,讓訪客意識到能夠向下翻頁。

首屏為何重要

首屏對于許多網(wǎng)頁而言是至關(guān)重要的組成部分。

用戶是如何同網(wǎng)頁進行互動的?用戶研究領(lǐng)域的先驅(qū) Nielsen Norman Group 曾經(jīng)針對這一用戶行為進行了深入的研究,為設(shè)計師和可用性設(shè)計專家們提供了更好的素材和設(shè)計依據(jù)。

簡而言之,當(dāng)人們訪問某個網(wǎng)站的時候,尤其是初次訪問網(wǎng)站的時候,他們通常不會特別仔細(xì)的查看所有的內(nèi)容,而是快速的掃視,找到能夠吸引他們注意力的信息,這些內(nèi)容就是他們繼續(xù)停留在這個網(wǎng)站上的理由。通過眼動測試和不同實驗,他們發(fā)現(xiàn)訪問者的視覺瀏覽模式,可以歸結(jié)為幾種典型的模式。設(shè)計師 Steven Bradley 在自己的文章中,總結(jié)了這三種常見的模式:古騰堡式,Z圖模式和F圖模式。

對于信息結(jié)構(gòu)層次并不那么分明的網(wǎng)頁,用戶常常會使用古騰堡式的瀏覽模式,用戶大范圍掃視頁面內(nèi)容,整個視線路徑是一個大號的Z,其中最開始的兩個視覺駐留點就在頁頭上

Z圖模式也不難理解,用戶從上到下,視線沿著Z字形來回掃視,用戶會左右快速掃視,視線的起點首先是左上角,行跨頂部一欄到右上角,然后向下延伸。

F圖模式,或者說是F式布局,我們就更加熟悉了。在Nielsen Norman Group 的研究當(dāng)中,這種閱讀模式最為典型:

·用戶會沿著水平方向瀏覽,優(yōu)先瀏覽內(nèi)容塊的上部,這個時候的眼動構(gòu)成了字母F 最上面一橫。

·接下來視線會沿著屏幕左側(cè)向下垂直掃視,尋找段落中能引起興趣點的內(nèi)容,當(dāng)他們發(fā)現(xiàn)引起他們興趣的內(nèi)容之時,繼續(xù)橫向仔細(xì)瀏覽,而通常這些內(nèi)容對應(yīng)的視線范圍會比第一次橫向瀏覽的范疇要更小一些,而這個視線軌跡則構(gòu)成了字母F 中間的一橫。

首屏包含哪些部分

既然首屏是關(guān)鍵,所包含的元素也不會太少。最常見的是下面這些:

·基本的品牌標(biāo)識:LOGO,品牌名稱,Slogan,吉祥物等

·產(chǎn)品、服務(wù)和主題的主要文案

·網(wǎng)站類別鏈接

·社交媒體鏈接

·基本聯(lián)系信息(電話電子郵件等)

·多語言切換按鈕

·搜索框

·訂閱按鈕

·產(chǎn)品、APP 下載/試用鏈接等

這并不是意味著所有的這些元素都應(yīng)該呈現(xiàn)在首屏當(dāng)中,太多的模塊會讓首屏中的首圖和標(biāo)題的視覺重量被稀釋,過多的信息會讓用戶難以聚焦到真正重要的內(nèi)容上。所以,首屏的設(shè)計常常需要設(shè)計師和營銷人員通力合作,來作出最合理的選擇。

看看下面的幾個案例,你應(yīng)該能大概明白不同類型的網(wǎng)頁應(yīng)該采取怎樣的策略。

Bjorn 是一個室內(nèi)設(shè)計網(wǎng)站,網(wǎng)站的頂欄被制作成懸浮的,隨著頁面的滾動會一直會在頂部顯示,左側(cè)是品牌LOGO,右側(cè)是導(dǎo)航,常見的四個分類中 Product、Studio、Press 是作為常規(guī)導(dǎo)航而存在,但是Shop 則被制作成CTA按鈕,相比之下更容易吸引用戶去點擊。借助大量的留白,設(shè)計師將LOGO、導(dǎo)航和首屏的文案劃分開來。

Event Agency是另外一個范例,在首屏設(shè)計上相對而言更加別具一格。整個首屏都是圍繞著LOGO和品牌名稱來設(shè)計的,左右平衡,各兩個鏈接,背景的星河和前景的超大文本嵌套疊加,構(gòu)成視覺主體

·接下來用戶會將視線移到屏幕左側(cè),繼續(xù)向下瀏覽。

不論用戶是遵循哪種模式來閱讀,他們通常都會優(yōu)先掃視頁面的頂部,從左上角到右上角這一欄的信息。所以,在頁面頂部顯示關(guān)鍵的信息是符合網(wǎng)站和用戶雙方的訴求的最優(yōu)策略:讀者可以快速掃視正確的信息,而網(wǎng)站顯示的內(nèi)容如果能夠吸引到他們,則能夠留下用戶。這就是為什么UIUX設(shè)計師甚至內(nèi)容策略專家和營銷專家都會傾向于這樣設(shè)計。

在另外一篇關(guān)于首屏最佳實踐的文章當(dāng)中,作者 Bogdan Sandu 提到的一點應(yīng)該讓每個設(shè)計師都牢記:“人們通常只會在短短的幾秒鐘內(nèi)判斷一個網(wǎng)站的素質(zhì),第二印象這種東西是不存在的。一個網(wǎng)站必須足夠搶眼才行,否則就是失敗?!?/span>

另外值得考慮的一點在于,導(dǎo)航確實可以很好的為用戶呈現(xiàn)網(wǎng)站的基本框架和內(nèi)容分類,這是網(wǎng)站體驗的一個重要部分。不過許多創(chuàng)意解決方案會調(diào)整布局,采用更加激進或者不同的導(dǎo)航設(shè)計。每個網(wǎng)站的設(shè)計方案,都要根據(jù)需求和目標(biāo)受眾的不同來進行調(diào)整,這是自然而然的。

可讀性和視覺層次

首屏當(dāng)中,導(dǎo)航、LOGO和標(biāo)題等元素的字體選擇仔細(xì)考量,它們應(yīng)該和背景構(gòu)成良好的對比度,確保可讀性。用戶最好能夠一目了然地獲取其中的信息。

 

相關(guān)推薦
微信掃一掃
微信掃一掃
關(guān)注公眾號,了解更多資訊
聯(lián)系客服

微信掃碼聯(lián)系客服