互聯(lián)網(wǎng)上的寬屏?xí)r代已經(jīng)到來(lái)，時(shí)代的規(guī)則正在發(fā)生變化。當(dāng)網(wǎng)頁(yè)設(shè)計(jì)師首次進(jìn)入該行時(shí)，他們會(huì)被告知內(nèi)容需要放置在1000或1200的寬度范圍內(nèi)，但今天，無(wú)論網(wǎng)絡(luò)速度或硬件如何，顯示器都有不同程度的差異。面對(duì)隨附的多終端顯示屏。如何讓我們的網(wǎng)頁(yè)有一個(gè)良好的愿景？您如何讓所有類型的用戶，尤其是寬屏用戶，在他們的顯示器上看到完整的視覺(jué)盛宴？而不只是停留在1200寬度的剪切頁(yè)面。我們需要全屏和大視野。然后，全屏格式和自適應(yīng)信息設(shè)計(jì)成為關(guān)鍵。

1，大地圖圖塊改編

這是一個(gè)大屏幕全屏視覺(jué)，給用戶一種強(qiáng)烈的感覺(jué)。整個(gè)愿景是完整的圖景，交互和文本信息相對(duì)簡(jiǎn)單。圖像大小根據(jù)屏幕寬度自適應(yīng)。交互式菜單和文本信息通常通過(guò)尺寸轉(zhuǎn)換和位移調(diào)整屏幕尺寸來(lái)默認(rèn)為系統(tǒng)字體。

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

將主要內(nèi)容和視覺(jué)居中放置在1200尺寸內(nèi)，并將輔助菜單按鈕或輔助信息放在左側(cè)和右側(cè)，以使其根據(jù)屏幕寬度進(jìn)行調(diào)整。這種方法應(yīng)該注意一個(gè)不應(yīng)該把核心內(nèi)容分成兩部分的事實(shí)。方，以免被忽視。兩個(gè)擴(kuò)展區(qū)域在擴(kuò)展和收縮過(guò)程中最小化干擾或創(chuàng)建信息重疊。

3，單面定位，中心擴(kuò)展

主要信息內(nèi)容在一側(cè)對(duì)齊（左側(cè)或右側(cè)，人們通常用于從左側(cè)讀取，因此我們通常選擇主側(cè)的左側(cè)），而輔助輔助視覺(jué)位于另一側(cè)。文本消息選擇系統(tǒng)默認(rèn)字體，并根據(jù)屏幕自適應(yīng)。為視覺(jué)內(nèi)容留出一定的空間，以達(dá)到裝飾效果。

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

小切蛋糕響應(yīng)行業(yè)被稱為瀑布流設(shè)計(jì)。它是根據(jù)屏幕的寬度計(jì)算的。通常，設(shè)計(jì)中會(huì)有一個(gè)小切餅，然后擴(kuò)展2,3,4次，并計(jì)算出適當(dāng)?shù)耐暾M合。通常用于圖像信息的顯示頁(yè)面。

在1200之外是一個(gè)更高檔的空間。不要將自己從過(guò)去的隱藏規(guī)則中解脫出來(lái)。不要讓體驗(yàn)拉開(kāi)帷幕，開(kāi)辟一個(gè)新的好領(lǐng)域！

看看——硬件一直在移動(dòng)，如何留在原地

我們將其分為四類進(jìn)行鑒賞，包括大地圖瓷磚適應(yīng)，自適應(yīng)兩側(cè)中心定位，單面定位中心擴(kuò)展，小切蛋糕全屏自適應(yīng)。

1，大地圖圖塊改編

對(duì)于大圖像平鋪適應(yīng)，圖像質(zhì)量是關(guān)鍵，這將影響整體視覺(jué)質(zhì)量。其次，它是內(nèi)容和圖片的協(xié)調(diào)，因此它們不會(huì)盡可能地相互干擾。處理方法一般分為兩種，一種是背景處理，另一種是文本處理。在背景上，根據(jù)文本所在的位置處理局部模糊，紋理顏色弱化和單色化。在文本方面，有時(shí)您選擇覆蓋背景顏色或半透明背景顏色以突出顯示，并打開(kāi)與背景的視覺(jué)差距。

圖像質(zhì)量高，文本選擇用字形的方塊表面填充顯著信息，性能清晰整潔。圖像大小適應(yīng)背景大小，文本使用系統(tǒng)默認(rèn)字體。在自適應(yīng)過(guò)程中輕松定位和編程操作。

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

中心定位是一種假的全屏視覺(jué)效果，適用于具有較少文字信息的可視頁(yè)面，而這部分視覺(jué)不使用全畫幅照片或插圖，而是由一定的截?fù)艚M合形成的主視覺(jué)。主要圖片集中在1000以內(nèi)，具有一定的延展性。整個(gè)不切蛋糕，形成一個(gè)視覺(jué)假全屏。上下信息主要基于導(dǎo)航，LOGO等內(nèi)容。通過(guò)欣賞以下頁(yè)面，我們可以看到什么樣的技巧來(lái)實(shí)現(xiàn)假全屏的視覺(jué)效果。

此頁(yè)面的藍(lán)色背景與橙色配色相匹配，顏色鮮艷。中心對(duì)周圍環(huán)境的太陽(yáng)形視覺(jué)使我們感受到視覺(jué)的延伸。這是一種假的全屏方法。上側(cè)和下側(cè)的信息根據(jù)大格式定位。整個(gè)頁(yè)面很寬，自適應(yīng)伸展很自然。

兩側(cè)的切換按鈕是將中心視覺(jué)擴(kuò)展到假全屏的好方法。 3.單側(cè)定位，中心延伸

單面定位，適用于包含更多數(shù)據(jù)的全屏頁(yè)面。保證文本信息的呈現(xiàn)在單側(cè)定位的1000個(gè)寬度內(nèi)，然后是協(xié)調(diào)的視覺(jué)圖像。可以擴(kuò)展視覺(jué)地圖，以便不切割整個(gè)畫面。

左對(duì)齊設(shè)計(jì)具有類似雜志的節(jié)奏感，旋轉(zhuǎn)木馬位置擴(kuò)展大格式，右轉(zhuǎn)滾動(dòng)條導(dǎo)航當(dāng)前顯示寬度。

我們可以看到，在具有單側(cè)定位的全屏設(shè)計(jì)中，內(nèi)容信息總是需要以小幀呈現(xiàn)，并且圖像和背景僅以自適應(yīng)方式以自適應(yīng)方式呈現(xiàn)。

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

小切蛋糕全屏響應(yīng)網(wǎng)站設(shè)計(jì)適用于面向小圖片顯示的信息或圖形信息。信息之間的關(guān)系并列，信息量級(jí)接近，信息量大。小切口可以支持實(shí)時(shí)更新的動(dòng)態(tài)數(shù)據(jù)。切蛋糕的大小有其自身的規(guī)律性。它們通常具有單位面積，并且被雙倍擴(kuò)展兩次，兩次和四次，因此形式更加完整。這顯示了寬屏和窄屏頁(yè)面的不同渲染效果。立方體從上到下填充屏幕空間。不同比例的切蛋糕就像不同風(fēng)格的衣服一樣，所以我們?cè)谏蟼鲌D片時(shí)有更多的選擇。整體風(fēng)格也更加動(dòng)感和簡(jiǎn)單。