詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧發(fā)布者：本站     時(shí)間：2021-12-23 11:12:12

晉小彥：時(shí)代在變規(guī)則也在變，網(wǎng)頁設(shè)計(jì)師剛?cè)胄械臅r(shí)候都會被告知信息內(nèi)容需要擺放在800或1000的寬度以內(nèi)，但是今天不論在網(wǎng)絡(luò)速度還是硬件、顯示屏都有了不同程度的更。面對伴隨而來的多終端顯示。如何讓我們的網(wǎng)頁有一個(gè)良好的第一視覺?如何讓各類的用戶特別是寬屏的用戶在自己的顯示器上看到完整的視覺盛宴?而非僅停留于1000寬度的切糕網(wǎng)頁。我們需要全屏大視野。那么，全屏畫幅和自適應(yīng)的信息設(shè)計(jì)成為了關(guān)鍵。

說說——不做1000 小切糕還給寬屏大視野

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

大家應(yīng)該都會有這樣的經(jīng)歷，在我們?nèi)胄芯W(wǎng)頁設(shè)計(jì)時(shí)首先會被告知的潛規(guī)則就是，頁面的內(nèi)容一定要設(shè)計(jì)在1000(1000～1004)的寬度以內(nèi)，這個(gè)規(guī)則并沒有錯(cuò)誤，特別是在過去的幾年中。不過隨著硬件和網(wǎng)絡(luò)的發(fā)展，網(wǎng)頁顯示的終端也在發(fā)生著快速的變化，從寬屏到超寬屏，從手機(jī)到IPAD。如果網(wǎng)頁設(shè)計(jì)固守著1000寬度的話，也就相當(dāng)于放棄其它終端用戶的視覺美感。

所以多終端響應(yīng)式全屏設(shè)計(jì)成為必然的趨勢，當(dāng)然或許這對您也許并不陌生。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

如果我們翻閱08年之前的頁面就會發(fā)現(xiàn)過去些年網(wǎng)頁設(shè)計(jì)的特點(diǎn)。從縮略圖中就可以發(fā)現(xiàn)，當(dāng)年的頁面通常將內(nèi)容設(shè)置在800或1000寬度以內(nèi)，背景則選擇純底或漸變或紋理平鋪。而今天如果用大屏顯示器來瀏覽這類型的頁面，就會發(fā)現(xiàn)，它們?nèi)缤粔K中央切糕。當(dāng)然我們是可以完整的瀏覽頁面的全部內(nèi)容，但1000的設(shè)計(jì)在寬屏用戶看來卻略顯局促。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

(那些年我們做過的切糕)

當(dāng)然近兩年，許多網(wǎng)站在頭部的視覺設(shè)計(jì)上也打通了1000圍墻，不過大部分的內(nèi)容設(shè)計(jì)還是保留在1000寬度以內(nèi)的，穿越圍墻怎么說也是件冒險(xiǎn)的事，一方面有技術(shù)的局限性，比如不同瀏覽器的兼容，另一方面，經(jīng)驗(yàn)總是說服自己偷懶的最冠冕堂皇的理由。

全屏?xí)r代

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

寬屏的展示效果更加開闊豐滿，充分利用了1000以外的標(biāo)準(zhǔn)空間，你是否有所心動，但如果你為用戶感到不安的話，我們可以看看下面這個(gè)分辨率比例圖。這雖然是某款產(chǎn)品的用戶比率，但可以看到一些普遍性的問題。

屏幕分辨率

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

(2012年12月 2013年7月)

上圖分別是2012年12月 和2013年7月BNS游戲用戶屏幕分辨率調(diào)查報(bào)告，從上圖可以發(fā)現(xiàn)，1024用戶僅占的比例呈下滑的趨式，僅七個(gè)月時(shí)間1024的分辨率從16%降至了10%。1366和1440的筆記本用戶還是占著相對的多數(shù)，超大屏的1920寬度用戶也在逐漸上升。從2013年7月的數(shù)據(jù)來看，針對BNS游戲用戶來說(由于劍靈是高配置游戲，所以在同類產(chǎn)品中用戶的屏幕分辨率較高，不同的產(chǎn)品有不同的分辨率數(shù)值比，大家可以根據(jù)自己的用戶比例來決定網(wǎng)頁的最小寬度)，網(wǎng)頁設(shè)計(jì)師是可以將網(wǎng)頁的最小范圍拓寬至1280，讓1280以上的用戶的擁有最優(yōu)預(yù)覽效果，另外也保證1024的用戶能夠完整的看完信息(完整的看完信息包括通過交互觸發(fā)或者鼠標(biāo)的滾動進(jìn)行配合瀏覽，但瀏覽效果可能相對次于1280以上的用戶。)

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

是時(shí)候讓屏幕超過1024的用戶享受到更大視野的設(shè)計(jì)。不論是想讓你的產(chǎn)品信息看起來更舒適，還是想讓你的產(chǎn)品看起來更上流并貼近時(shí)代。我想你也不忍心放棄這樣的變革。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

想想——大圖平鋪、中心定位、單側(cè)定位、全屏響應(yīng)

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

1，大圖平鋪?zhàn)赃m應(yīng)

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

這是一種給用戶感受最強(qiáng)烈的大背景全屏視覺，整個(gè)視覺主打一張完整圖片，交互和文字信息較為簡單。圖片尺寸根據(jù)屏寬大小自適應(yīng)，交互菜單和文字信息通常默認(rèn)系統(tǒng)字體通過大小變換和位移進(jìn)行屏寬自適應(yīng)。

2，中心定位，兩側(cè)自適應(yīng)

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

將主要內(nèi)容和視覺居中安放在1000的尺寸以內(nèi)，左右兩側(cè)安放次要的菜單按鈕或輔助信息，讓它根據(jù)屏幕的寬度自適應(yīng)，這個(gè)方法要注意的是，一是不要將核心內(nèi)容安放兩側(cè)，以免被忽視。二延展區(qū)域盡量減少干擾或在延展收縮過程中產(chǎn)生信息重疊。

3，單側(cè)定位，中心延展

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

主要的信息內(nèi)容居一側(cè)對齊(左側(cè)或右側(cè)都可以，中國人一般習(xí)慣從左閱讀所以我們通常選擇左側(cè)為主側(cè))，次要的輔助視覺居另外一側(cè)。文字信息選擇系統(tǒng)默認(rèn)字體，并根據(jù)屏幕自適應(yīng)。為視覺內(nèi)容留有一定的空間達(dá)到裝飾效果。

4，小切糕全屏響應(yīng)式

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

小切糕響應(yīng)行業(yè)俗稱瀑布流設(shè)計(jì)，是根據(jù)屏幕寬度進(jìn)行計(jì)算，通常在設(shè)計(jì)時(shí)會有一個(gè)基礎(chǔ)最小切糕，然后以2倍、3倍、4倍的方式進(jìn)行拓展，并計(jì)算出最合適完整的組合。通常用在圖片信息的展示頁面。

1000以外是更上流的空間，不要在過去的潛規(guī)則中無法自拔，不要讓經(jīng)驗(yàn)畫地為牢，開墾新良田吧!

看看——硬件已邁步，視覺怎好原地滯留

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

1，大圖平鋪?zhàn)赃m應(yīng)

對于大圖平鋪?zhàn)赃m應(yīng)，圖片質(zhì)量是關(guān)鍵，它將影響著整體的視覺質(zhì)量。其次，是內(nèi)容與圖片的協(xié)調(diào)，盡量讓它們不會互相干擾，處理方式一般分為兩個(gè)類型，一個(gè)是對背景的處理，一個(gè)是對文字的處理。背景方面，會配合文字所處的位置進(jìn)行局部模糊，紋理色彩弱化、單色化等處理。文字方面有時(shí)會選擇覆蓋底色，或半透明底色等方式進(jìn)行突出，拉開與背景的視覺差距。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

圖片質(zhì)量高，文字選擇隨字形的方形塊面填充突出信息，表現(xiàn)干脆利落。圖片尺寸隨背景大小自適應(yīng)，文字使用系統(tǒng)默認(rèn)字體。在自適應(yīng)的過程中便于定位和程序操控。

2，中心定位，兩側(cè)自適應(yīng)

中心定位是一種假全屏的視覺效果，適合于文字信息較少的視覺型頁，而這部分的視覺并不使用全畫幅的照片或插畫，而是通過一定的排烈組合形成的主視覺。主畫面集中在1000以內(nèi)，左右?guī)б欢ǖ难诱剐浴Ｕw不切糕，形成視覺上的假全屏。上下信息主要以導(dǎo)航、LOGO等內(nèi)容為主，通過欣賞下面幾張網(wǎng)頁，我們看看有什么討巧的辦法實(shí)現(xiàn)假全屏的視覺效果。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

這個(gè)頁面藍(lán)色的大背景與橙色的小點(diǎn)綴搭配，色彩鮮麗。中心向四周的太陽型的視覺，使我們感受到了視覺的延伸。這是一種討巧的假全屏的方法，上下兩側(cè)的信息是按最大畫幅定位的，整體頁面開闊，自適應(yīng)舒展性自然。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

兩側(cè)的切換按鈕是讓中心視覺延伸為假全屏的好辦法。

3，單側(cè)定位，中心延展

單側(cè)定位，適合于資料較多的全屏頁。在單側(cè)定位的1000寬度內(nèi)首要保證文字信息的呈現(xiàn)，其次是配合的視覺圖片。視覺圖可以使用延展型，這樣保證整個(gè)畫面不切糕。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

左對齊的設(shè)計(jì)如雜志一般的具有節(jié)奏感，輪播位置撐開了最大畫幅，并動過向右的輪播滾動條瀏覽超過當(dāng)前顯示器寬度的信息。

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

詳細(xì)解析網(wǎng)頁全屏設(shè)計(jì)的心得技巧,PS教程,

我們可以看到在單側(cè)定位的全屏設(shè)計(jì)中，內(nèi)容信息永遠(yuǎn)是需要首要保證在最小畫幅內(nèi)呈現(xiàn)的，圖片和背景只是以輔助的形式以自適應(yīng)的方式存在。

4，小切糕全屏響應(yīng)式

小切糕全屏響應(yīng)式設(shè)計(jì)適合以小圖片展式為主的信息，或圖文信息。信息之間的關(guān)系屬于并列的，信息量級接近的，信息數(shù)量較多的。小切糕的方式可以支持實(shí)時(shí)更新的動態(tài)數(shù)據(jù)。切糕圖片的大小有其規(guī)律，它們通常有一個(gè)單位面積，并以通常一倍、兩倍、四倍這樣的翻倍方式進(jìn)行拓展，這樣在形式結(jié)夠上可以更加完美無缺。