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

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

說(shuō)說(shuō)——不做1000 小切糕還給寬屏大視野

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

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

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

所以多終端響應式全屏設計成為必然的趨勢，當然或許這對您也許并不陌生。

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

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

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

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

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

全屏時(shí)代

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

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

屏幕分辨率

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

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

(2012年12月 2013年7月)

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

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

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

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

想想——大圖平鋪、中心定位、單側定位、全屏響應

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

1，大圖平鋪自適應

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

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

2，中心定位，兩側自適應

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

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

3，單側定位，中心延展

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

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

4，小切糕全屏響應式

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

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

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

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

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

1，大圖平鋪自適應

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

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

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

2，中心定位，兩側自適應

中心定位是一種假全屏的視覺(jué)效果，適合于文字信息較少的視覺(jué)型頁(yè)，而這部分的視覺(jué)并不使用全畫(huà)幅的照片或插畫(huà)，而是通過(guò)一定的排烈組合形成的主視覺(jué)。主畫(huà)面集中在1000以?xún)?，左右帶一定的延展性。整體不切糕，形成視覺(jué)上的假全屏。上下信息主要以導航、LOGO等內容為主，通過(guò)欣賞下面幾張網(wǎng)頁(yè)，我們看看有什么討巧的辦法實(shí)現假全屏的視覺(jué)效果。

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

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

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

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

3，單側定位，中心延展

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

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

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

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

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

我們可以看到在單側定位的全屏設計中，內容信息永遠是需要首要保證在最小畫(huà)幅內呈現的，圖片和背景只是以輔助的形式以自適應的方式存在。

4，小切糕全屏響應式

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