這篇文章是騰訊TGI 高級視覺設(shè)計(jì)師@晉小彥 寫給設(shè)計(jì)師的系列文章的第七篇，從說、想、看、做四方面解讀"全屏大視野"的設(shè)計(jì)方法，是作者從大量設(shè)計(jì)工作中總結(jié)的經(jīng)驗(yàn)，通篇都是滿滿當(dāng)當(dāng)?shù)母韶洠』蛟S有一些您可能看到了，但是在優(yōu)設(shè)網(wǎng)發(fā)布的文章，作者又有新增內(nèi)容，并且后面幾集您絕對木有見過喲，絕贊揭秘！請關(guān)注該系列，關(guān)注該妹子吧：）

錯(cuò)過上集的同學(xué)可以戳這里《騰訊美女設(shè)計(jì)師傾囊相授：抄現(xiàn)實(shí)（第一集）》萬人好評喲~~

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

 

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

 

大家應(yīng)該都會(huì)有這樣的經(jīng)歷，在我們?nèi)胄芯W(wǎng)頁設(shè)計(jì)時(shí)首先會(huì)被告知的潛規(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)然或許這對您也許并不陌生。

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

（那些年我們做過的切糕）

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

全屏?xí)r代

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

屏幕分辨率

（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)的滾動(dòng)進(jìn)行配合瀏覽，但瀏覽效果可能相對次于1280以上的用戶。）

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

 

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

 

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

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

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

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

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

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

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

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

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

 

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

 

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

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

圖片質(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)假全屏的視覺效果。

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

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

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

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

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

我們可以看到在單側(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í)更新的動(dòng)態(tài)數(shù)據(jù)。切糕圖片的大小有其規(guī)律，它們通常有一個(gè)單位面積，并以通常一倍、兩倍、四倍這樣的翻倍方式進(jìn)行拓展，這樣在形式結(jié)夠上可以更加完美無缺。

比例不同的切糕正如不同款式的衣服，讓我們在上傳圖片是有更多的選擇。整體的樣式也顯得更加動(dòng)態(tài)輕松。

下面這個(gè)規(guī)則型的小切糕結(jié)構(gòu)嚴(yán)謹(jǐn)，形式上簡潔，延展性好。但相對于其它唯一的缺點(diǎn)就是對圖片比例尺寸的要求不如其它幾個(gè)案例輕松。大家可以根據(jù)信息的需要選擇使用。

 

做做——?jiǎng)`專題

 

1，劍靈核心鑒賞測試

需求分析

這是一個(gè)問卷調(diào)查專題頁面，由九道問題組成，由于在產(chǎn)品處于初期的少量放號測試期，產(chǎn)品整體的宣傳偏向視覺化。問卷調(diào)查的整體題量也比較小，這樣的需求給予了設(shè)計(jì)師比較大的空間，一來可以對問題進(jìn)行圖形化表達(dá)，二來劍靈的游戲?qū)C(jī)器的高配要求讓網(wǎng)頁設(shè)計(jì)可以進(jìn)行許多更寬屏的視覺表現(xiàn)。在這種情況下，我們選擇了中心定位，兩側(cè)自適應(yīng)全屏視覺表現(xiàn)。我們將內(nèi)容規(guī)劃如下。

設(shè)計(jì)分解

1.交互修整

首先我們將主SLOGAN和每屏重復(fù)出現(xiàn)的長篇文字整體規(guī)劃到獨(dú)立的首頁，這樣可以讓玩家在回答問卷時(shí)盡量少的受干擾，也可以讓畫面更加簡潔。

第二，設(shè)計(jì)一條問題導(dǎo)航，讓玩家對整體的題量有一個(gè)預(yù)估。這樣不容易因?yàn)楹ε骂}量太多而中途放棄，用戶也可以通過題目導(dǎo)航快速切換題目。

第三，在頂部設(shè)置常規(guī)外鏈和用戶登錄及用戶信息。除了功能上的用處還能夠?yàn)槲覀兗偃烈曈X提供一些定位的視覺點(diǎn)。

2.中心視覺定位

中心視覺以問卷信息為主，視覺集中于1000寬度以內(nèi)，標(biāo)題由色塊背景和系統(tǒng)文字組成，可以由程序控制定位。在1000以內(nèi)中心視覺的頂部保留出與左右按鈕高度一致的空間，主要是為了保證在自適應(yīng)過程中不會(huì)重疊干擾。

3.全屏自適應(yīng)設(shè)置

頁面的全屏效果主要由四個(gè)部分承擔(dān)，一是問卷導(dǎo)航，它突破了1000的寬度，小屏用戶使用時(shí)選擇當(dāng)前題定位。這樣在滿足大屏用戶視覺效果的同時(shí)也能滿足小屏用戶的功能使用。第二個(gè)全屏適應(yīng)的效果是頁面頂部的交互按鈕，它根據(jù)屏幕的寬度始終保持在頁面的兩側(cè)。第三，是頁面的背景，頁面中部有一段可重復(fù)延展的漸變區(qū)域，可以根據(jù)屏寬自適應(yīng)。

1920和1024視覺效果展示效果如下：

頁面展示

 

2，劍靈漢化專題

需求分析

這是一個(gè)職業(yè)技能漢化命名征集頁面，技能以職業(yè)分為五大類，每個(gè)職業(yè)有二到三十個(gè)左右的不定數(shù)量的技能，產(chǎn)品希望通過個(gè)頁面一方面能夠征集技能名字，另一方面也可以起到宣傳產(chǎn)品職業(yè)和技能的作用并對產(chǎn)品產(chǎn)生一定的興趣。從目前的交互稿來看，內(nèi)容一次呈現(xiàn)比較多，層次感會(huì)比較弱，其次，如果依現(xiàn)在的交互稿設(shè)計(jì)出來的頁面，玩家看到的多為由技能圖標(biāo)組成的小豆腐塊，視覺效果較弱。為了改善整體交互的層次感和視覺性。我們做了以下的的交互修整和優(yōu)化。

設(shè)計(jì)分解

1.五大職業(yè)按鈕的自適應(yīng)

五大職業(yè)按鈕將人物形像與文字居一側(cè)對齊，這邊選擇了右側(cè)，這樣在頁面重構(gòu)的時(shí)候可以比較簡單選擇向右側(cè)延展或收縮圖片進(jìn)行定位，在1000的寬度以內(nèi)，我們選擇至少展示職業(yè)名稱和職業(yè)形像。按照這種方式，左側(cè)固定寬度為300像素，當(dāng)屏寬1920像素時(shí)，每個(gè)職業(yè)人物的按鈕的寬度為384，當(dāng)用戶屏寬為1000時(shí)，職業(yè)人物按鈕的寬度則減為140，以此類推。

2.技能圖標(biāo)內(nèi)容的自適應(yīng)

技能圖標(biāo)的自適應(yīng)是通過列數(shù)來改變的，每個(gè)圖標(biāo)的寬度不變，通過列數(shù)來自適應(yīng)屏寬的大小。當(dāng)屏寬為1920像素時(shí)，圖標(biāo)顯示為三列，寬度為600像素。當(dāng)屏寬為1000像素時(shí)，圖標(biāo)顯示兩列，寬度為400像素。設(shè)置1280像素為圖標(biāo)列數(shù)的分界點(diǎn)，大于1280像素設(shè)置三列，小于1280設(shè)置兩列。設(shè)計(jì)圖如下。

頁面展示

 

3，劍靈不刪檔測試官網(wǎng)

需求分析

這是《劍靈》不刪檔測試的官網(wǎng)交互稿，在寫這本書的時(shí)候《劍靈》剛剛結(jié)束了第三次內(nèi)測并在兩個(gè)月后迎來不刪檔測試，整個(gè)官網(wǎng)首頁和子頁的設(shè)計(jì)、重構(gòu)、開發(fā)以及內(nèi)容編輯上線大概是兩個(gè)月時(shí)間，這算是一個(gè)相對寬裕的預(yù)留了時(shí)間，對于設(shè)計(jì)師來說就有更多的時(shí)間來思考。大家都知道產(chǎn)品越接近后期，信息資料就越多類型更多樣，關(guān)系到的合作和利益互助也更加復(fù)雜，由于信息的增多視覺表現(xiàn)的空間變得狹小，不刪檔到公測后的官網(wǎng)區(qū)別于期待或預(yù)告時(shí)期的視覺化官網(wǎng)，后期的官網(wǎng)多以資料梳理為主。通常的官網(wǎng)格局正如上圖一樣，而設(shè)計(jì)在這樣的交互底下相對還是比較難做到突破的。如何在這樣一個(gè)傳統(tǒng)的瓶勁下找到一個(gè)突破口，并達(dá)到形式與信息的完美結(jié)合呢？響應(yīng)式網(wǎng)頁是一種趨勢，在這一年里，也有許多優(yōu)秀的響應(yīng)式設(shè)計(jì)的案例，但面對信息量如此之多，信息類型如此多樣化的官網(wǎng)首頁來說，確實(shí)很難找到一個(gè)平衡點(diǎn)。為了形式而形式的設(shè)計(jì)肯定滿足不了如此功能化類型的頁面。一個(gè)以信息和資料為主的頁面，我們就必需從這根本出發(fā)才能找到出路，于是我們從形式表現(xiàn)逐漸轉(zhuǎn)向信息梳理，在這里十分感謝同事高立的幫助，討論是能夠激發(fā)靈感和熱情的方式，我個(gè)人比較傾向于兩到三個(gè)人的互動(dòng)討論。在這里，我們將討論總結(jié)為以下幾點(diǎn)。

設(shè)計(jì)分解

官網(wǎng)做為一個(gè)相對綜合性的網(wǎng)頁，它視覺和交互設(shè)計(jì)關(guān)系到許多的因素，由于本章節(jié)的主題是寬屏大視野，所以在這個(gè)部分我們主要針對官網(wǎng)的響應(yīng)式在視覺設(shè)計(jì)方面進(jìn)行解析，關(guān)于官網(wǎng)的視覺表現(xiàn)、交互梳理以及內(nèi)容歸納等部分就不在此做細(xì)致分析。

1.大布局

根據(jù)官網(wǎng)信息內(nèi)容和劍靈的視覺特點(diǎn)我們選擇了居左對齊右側(cè)延展的方式。這樣即可以方便延展，也可以讓劍靈游戲引以為豪的人物視覺得到充分的展示，增加游戲性。另外首屏的內(nèi)容也可以大大增多。當(dāng)然主要的難點(diǎn)也集中在右側(cè)的響應(yīng)式設(shè)計(jì).

2.倍數(shù)單元格框架

 

3,，傳統(tǒng)板塊大變身

（1）4倍單元格

由于這兩塊信息的重要性，我們將其排放在右側(cè)流動(dòng)版塊的黃金位置，也就是左上的位置，不論頁面如何流動(dòng)它們都穩(wěn)居首屏，呈現(xiàn)一個(gè)半固定的狀態(tài)。

（2）2倍豎條單元格

（3）2倍橫條單元格

道具的板塊也做了一些交互的變動(dòng)，大家可以參照原交互進(jìn)行對比。這里的變化主要綜合考慮了游戲中的道具、服飾、禮包都是固定大小的方塊圖標(biāo)，而且一次公開的個(gè)數(shù)會(huì)比較多，于是我們選擇了長條的格局，并設(shè)置左右的按鈕進(jìn)行更多的預(yù)覽。

（4）1倍單元格

1倍單元格我們選擇了出現(xiàn)頻率最高的活動(dòng)廣告，以及在資料中等級相對次要一些的副本和壁紙、原畫等視覺資源，1倍單元格在流動(dòng)上更加靈活，限制較少。一些資料根據(jù)其重要程度，將次重要信息進(jìn)行層級收納，放置在左右箭頭中。

（5）0.5倍單元格

0.5倍單元格在這個(gè)案例中是為了方便為媒體LOGO提供合適宜的排板空間而另外設(shè)定的，雖然它在視覺中呈現(xiàn)的是一個(gè)0.5倍的狀態(tài)，它在流動(dòng)過程中間是綁定狀態(tài)，也就是兩個(gè)0.5倍單元格合為一個(gè)1倍單元格進(jìn)行流動(dòng)。

 

4，信息的類別梳理

由于版塊形式較為相近，而且官網(wǎng)的內(nèi)容又相對豐富，所以我們對內(nèi)容進(jìn)行了兩個(gè)大的類別劃分，主要是活動(dòng)和資料兩個(gè)大的類別，通過版塊顏色的設(shè)定進(jìn)行歸納，方便玩家的快速瀏覽。

（1）資料型版塊

資料型版塊相對于活動(dòng)來說更新頻率較慢，屬于長期保持性信息，所以選擇以白色為主，讓其顯得相對舒適。職業(yè)、種族、副本、道具等都屬于資料型信息，所以這里做了以白底為主的設(shè)定。

（2）活動(dòng)廣告型版塊

廣告型版塊更新頻率較高，而且需要更加突出和刺激的視覺引起玩家注意，起到廣告效果，所以這邊選擇了深色調(diào)子進(jìn)行定義。

通過顏色調(diào)性的劃分，用戶經(jīng)過一段時(shí)間的使用，便可直接通過掃描了解信息的大體類型。也可以在一定程度上彌補(bǔ)板塊在流動(dòng)過程中產(chǎn)生類別跨越的問題。

頁面展示

1920寬度

錯(cuò)過上集的同學(xué)可以戳這里《騰訊美女設(shè)計(jì)師傾囊相授：抄現(xiàn)實(shí)（第一集）》萬人好評喲~~
 

作者：晉小彥 微博：@晉小彥 （騰訊 TGI 高級視覺設(shè)計(jì)師）
本文由作者授權(quán)首發(fā)，轉(zhuǎn)載請注明優(yōu)設(shè)網(wǎng)出處。謝謝各位小編配合。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：