騰訊美女設計師傾囊相授：網頁全屏大視野（第七集）

 

這篇文章是騰訊TGI 高級視覺設計師@晉小彥 寫給設計師的系列文章的第七篇，從說、想、看、做四方面解讀"全屏大視野"的設計方法，是作者從大量設計工作中總結的經驗，通篇都是滿滿當當的干貨！或許有一些您可能看到了，但是在優設網發布的文章，作者又有新增內容，并且后面幾集您絕對木有見過喲，絕贊揭秘！請關注該系列，關注該妹子吧：）

錯過上集的同學可以戳這里《騰訊美女設計師傾囊相授：抄現實（第一集）》萬人好評喲~~

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

 

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

 

大家應該都會有這樣的經歷，在我們入行網頁設計時首先會被告知的潛規則就是，頁面的內容一定要設計在1000（1000～1004）的寬度以內，這個規則并沒有錯誤，特別是在過去的幾年中。不過隨著硬件和網絡的發展，網頁顯示的終端也在發生著快速的變化，從寬屏到超寬屏，從手機到IPAD。如果網頁設計固守著1000寬度的話，也就相當于放棄其它終端用戶的視覺美感。

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

如果我們翻閱08年之前的頁面就會發現過去些年網頁設計的特點。從縮略圖中就可以發現，當年的頁面通常將內容設置在800或1000寬度以內，背景則選擇純底或漸變或紋理平鋪。而今天如果用大屏顯示器來瀏覽這類型的頁面，就會發現，它們如同一塊中央切糕。當然我們是可以完整的瀏覽頁面的全部內容，但1000的設計在寬屏用戶看來卻略顯局促。

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

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

全屏時代

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

屏幕分辨率

（2012年12月 2013年7月）

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

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

 

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

 

1，大圖平鋪自適應

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

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

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

3，單側定位，中心延展

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

4，小切糕全屏響應式

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

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

 

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

 

1，大圖平鋪自適應

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

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

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

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

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

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

3，單側定位，中心延展

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

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

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

4，小切糕全屏響應式

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

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

下面這個規則型的小切糕結構嚴謹，形式上簡潔，延展性好。但相對于其它唯一的缺點就是對圖片比例尺寸的要求不如其它幾個案例輕松。大家可以根據信息的需要選擇使用。

 

做做——劍靈專題

 

1，劍靈核心鑒賞測試

需求分析

這是一個問卷調查專題頁面，由九道問題組成，由于在產品處于初期的少量放號測試期，產品整體的宣傳偏向視覺化。問卷調查的整體題量也比較小，這樣的需求給予了設計師比較大的空間，一來可以對問題進行圖形化表達，二來劍靈的游戲對機器的高配要求讓網頁設計可以進行許多更寬屏的視覺表現。在這種情況下，我們選擇了中心定位，兩側自適應全屏視覺表現。我們將內容規劃如下。

設計分解

1.交互修整

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

第二，設計一條問題導航，讓玩家對整體的題量有一個預估。這樣不容易因為害怕題量太多而中途放棄，用戶也可以通過題目導航快速切換題目。

第三，在頂部設置常規外鏈和用戶登錄及用戶信息。除了功能上的用處還能夠為我們假全屏視覺提供一些定位的視覺點。

2.中心視覺定位

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

3.全屏自適應設置

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

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

頁面展示

 

2，劍靈漢化專題

需求分析

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

設計分解

1.五大職業按鈕的自適應

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

2.技能圖標內容的自適應

技能圖標的自適應是通過列數來改變的，每個圖標的寬度不變，通過列數來自適應屏寬的大小。當屏寬為1920像素時，圖標顯示為三列，寬度為600像素。當屏寬為1000像素時，圖標顯示兩列，寬度為400像素。設置1280像素為圖標列數的分界點，大于1280像素設置三列，小于1280設置兩列。設計圖如下。

頁面展示

 

3，劍靈不刪檔測試官網

需求分析

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

設計分解

官網做為一個相對綜合性的網頁，它視覺和交互設計關系到許多的因素，由于本章節的主題是寬屏大視野，所以在這個部分我們主要針對官網的響應式在視覺設計方面進行解析，關于官網的視覺表現、交互梳理以及內容歸納等部分就不在此做細致分析。

1.大布局

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

2.倍數單元格框架

 

3,，傳統板塊大變身

（1）4倍單元格

由于這兩塊信息的重要性，我們將其排放在右側流動版塊的黃金位置，也就是左上的位置，不論頁面如何流動它們都穩居首屏，呈現一個半固定的狀態。

（2）2倍豎條單元格

（3）2倍橫條單元格

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

（4）1倍單元格

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

（5）0.5倍單元格

0.5倍單元格在這個案例中是為了方便為媒體LOGO提供合適宜的排板空間而另外設定的，雖然它在視覺中呈現的是一個0.5倍的狀態，它在流動過程中間是綁定狀態，也就是兩個0.5倍單元格合為一個1倍單元格進行流動。

 

4，信息的類別梳理

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

（1）資料型版塊

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

（2）活動廣告型版塊

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

通過顏色調性的劃分，用戶經過一段時間的使用，便可直接通過掃描了解信息的大體類型。也可以在一定程度上彌補板塊在流動過程中產生類別跨越的問題。

頁面展示

1920寬度

錯過上集的同學可以戳這里《騰訊美女設計師傾囊相授：抄現實（第一集）》萬人好評喲~~
 

作者：晉小彥 微博：@晉小彥 （騰訊 TGI 高級視覺設計師）
本文由作者授權首發，轉載請注明優設網出處。謝謝各位小編配合。

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