騰訊TGI高級視覺設計師@晉小彥的系列專題，童鞋們看過癮了木有?這一期教你如何將呆板僵硬的網頁設計轉眼就變成靈動活潑的創意設計，究竟是怎樣的方法才能快速拓展設計思路呢?這一期，有招。
時間短、沒點子、沒創意，又要快速捕抓眼球,怎么辦?
對頁面整體進行旋轉和平移是快速改變視覺是快速有效的方法.它打破了正常的網頁視覺習慣,吸引了觀眾的注意力。
說說 —— 旋轉和平移
如果每天要面對著巨大的需求量，難免有創意枯竭的時候，如果有一些相對討巧的辦法，能夠不受主題限制，當然是再好不過的，這時候，我們不防試試這簡單的小辦法。
旋轉和平移，這是針對整個頁面的大版式而言的，到底會造成怎樣一種效果，我們繼續往下看。
圖一：一張優質的穩定的攝影圖片。
圖二：旋轉后的不穩定構圖使圖片顯得活潑動感而有趣。
圖三：重心右移，打破對稱的構圖增強了畫面的緊張感。
這種最快速改變視覺結構的簡單方式，可以快速的運用于網頁中嗎?
圖一：我們正常的頁面版式，居中對齊，穩定整齊，稍顯呆板。
圖二：畫面中心旋轉30度。
圖三：整體畫幅向右平移。
看起來似乎可以這么干，但它也將給我們帶來其它一些細節上的難題。
想想 —— 整體旋轉、背景旋轉、綜合旋轉
旋轉適合的頁面及其產生的效果
旋轉打破了畫面橫平豎直的呆板，旋轉后的視覺更加輕松活躍，旋轉構成的斜線條也可以產生運動和速度感，所以許多運動的、刺激的、具有速度感的主題適合直接旋轉處理，另外運動、速度衍生出年輕的、時尚的之類主題也可以適用，輕微的旋轉也可以使畫面更貼近于自然的生活狀態，增強真實性與親切感。但在開始旋轉設計改造之前，一定會有人產生這樣的疑惑。
旋轉可能會給我們帶來以下一些問題
1.信息量的限制
由于旋轉的構圖，斜線與面邊面框最終會有一個交界點，可能導致信息不能無限制的延續
2.排版的限制
由于旋轉的形式需要整體的配合，而有部分素材無法配合旋轉就會比較花時間去歸納處理。
3.瀏覽舒適性問題
由于角度傾斜，打破了習慣性視覺在提神的同時也會給瀏覽造成一定的困難和不舒適。
這些都是我們需要注意和解決的問題，帶著這些問題，我們一起來看看旋轉的一些潛規則。
在斜排布時注意幾個要點，以免影響閱讀。
1.非內容必要原因。文字盡量保持一定規律排布對齊。
2.非內容必要原因。并列內容盡量使用同一變換角度。
3.圖三為正確的變換方式
在簡單的圖示下，這些錯誤看起來顯而易見，但在實際的操作中，由于多種因素的干擾我們往往忽視這些問題。
在排版過程中無論如何我們都要盡量讓依造某一規律對齊，在畫幅已旋轉的情況下更應該保持理性。旋轉基本可以分為以下幾種類。
1.整體旋轉：
背景和內容一起旋轉，需要注意兩條邊緣線，一是保持旋轉的邊緣線整齊，另外也要注意旋轉后的內容不能超出1000寬度。為了兼顧信息的閱讀性，背景和內容的同時旋轉的角度盡量不要超過15度。
2.背景旋轉：
背景旋轉，信息內容保持不變。這種旋轉即可以產生旋轉的視覺形式感，又可以保證文字信息的閱讀性，是比較推薦和常用的方式。但信息排版同樣也受到斜線的1000寬度的限制，在具體操作中需要進行細節的調整。
3.綜合旋轉：
根據內容結構進行有選擇的部分旋轉。通常選擇內容文字較少的SLOGAN跟隨背景一同旋轉共同達到旋轉的形式感。信息量較多的正文保持水平不變，以方便閱讀。這種方式也是經常被使用到。
PS：黃底為1000寬度的內容面積、藍底為背景面積、白色虛線為1000寬度標準線、SLOGAN(主視覺標題))、文字、圓泡泡(圖素)圖片組成簡易的網頁示意圖、透明背景為增闊的信息面積。(對于1024用戶的最大網頁寬度的定義，不同的公司有不同的標準，通常是在1000~1004范圍，為了美觀，設計上通常可多保留一些外邊距。)
看看 —— 歪腦袋讓世界與眾不同
一、整體旋轉
這是”一句話小說”征文比賽的活動頁面，作者用手寫的方式來表達，通過小小的旋轉把手寫的輕松狀態體現出來，增強頁面的親和力。整體旋轉可以減小旋轉的角度，以保證信息的閱讀性。
二、背景旋轉
我們可以看到這個頁面的文字信息基本保持著水平的狀態。黑色與白色的背景的斜切面構成了整體的形式感。黑白的對比和貫穿頁面頭尾斜線條都讓頁面的視覺產生了強烈的視覺沖擊力。不過在大刀闊斧的形式感設計背后，文字的排版還需要小心斟酌處理。這個頁面統一采用了右對齊的方式。左側文字的排版也恰好與斜線相契合。這需要我們在制作過程中對內容進行一定的編排和修整，以使其整體看起來更加舒適。
三、綜合旋轉
這兩個頁面排版形式相近，它們都選擇了頭部SLOGAN旋轉的形式，并把SLOGAN和正文明確分割開以避免角度的不同造成的閱讀干擾，信息量較大的正文置于下面保持水平。這樣的方式讓頁面形式感和閱讀性并存。
做做——QQ 西游卻橋難
一、QQ西游難之鵲橋難
需求分析：
這是《QQ西游》新版本發布的廣告落地專題，新版本的名字叫”鵲橋難”，而這個版本也將結合七夕這樣一個節日時間點正式發布。”鵲橋相會”也成為了畫面的主要視覺。
傳統思路：
說起鵲橋相會或者七夕，我們的第一直觀畫面大致是以下兩種類型，剪影的男女相會，腳下踩著一座橋，亦或是穿著情侶套裝的男女相擁，身后云彩朵朵……對于一些沒有情侶套裝的游戲人物，有時只能將兩只目露胸光的，喔打錯字，是兇光，目露兇光飽含殺氣的的男女主角硬是湊成了佳人一對。不過素材的限制有時也是比較無奈的，暫時拋開素材的問題，想想我們如何在這種傳統表現手法的基礎上讓自己的網頁稍顯特別呢?
旋轉的靈光乍現：
經驗并非都是個好事，經驗帶給我們習慣性的思維，它可能會讓我們更快的做出判斷，但過去正確的判斷在今天并不一定就是適當的正確的。當我們見慣了某種傳統的版式，在設計的時候多少有點失去激情和創新的動力，在依靠經驗設計的長期設計者看來，面對傳統版式，接下去的動作無非就是在頭部加入男女相擁的主視覺然后繼續添加完應該有的信息內容，憑借經驗就此草草了事交差。倘若我們變換一下版式，給自己制造一些難度和挑戰，或者新的想法也便應運而生。這塊黃色的面版，在原來的視覺中可能是一個傳統的內容區域，但當它旋轉之后，也許它便跳出了原有的概念。新的設計思路則可能由此開啟。
「傳統版式」與「 旋轉版式」
設計分解：
STEP 1 ：旋轉版式
當我們拋棄了傳統的版式，那個黃色的面版也許不再是一個只用來承載信息的容器，當我們一手掌握著主題，一手敞開著想像時，它或許漸漸就變成了鵲橋難中的那座橋。而俯視角的視覺也非同于傳統的頁面。新的創意就在自我制造困難的路上誕生了。
STEP 2 主視覺設定
根據大的創意方向，我們進行主視覺設計，這是一個俯視的視角，我們根據視角的定義進行人物的角度和動作的設計(由于游戲版本內容的設定，無奈中只能選擇了游戲中的悟空與玉兔精來扮演這無厘頭的情侶角色)。并在橋的兩側增加羽毛的造型，代表”鵲”橋這一獨特的定義。
STEP 3 信息排布
將信息進行模塊分布，并盡量錯開與主視覺相沖突的部分，比如兩個人物與內容面版相交集的部分。為了給內容騰出足夠的空間，我們也需要適當調整主視覺人物的位置，在調整主視覺人物位置的同時盡量保證人物的四分之三以及內容信息在1000像素的最小范圍之內。
頁面展示
速度、隨性、自由，是旋轉頁面帶給我們的視覺感受。
而當我們旋轉頁面的同時，新的創意也可能隨之產生。它讓我們知道，方塊的面版不僅僅是個信息的容器，只要稍稍發揮想像，它也會成為視覺和創意的主體。
不妨一試。
想想——上下格局、左右格局、混合格局
在平衡過程中我們也需注意以下幾點。
1. 圖一：在1024X768的用戶顯示器下是看不到平衡的效果的。
2. 圖二：創意不同當然選擇也不同，圖二的平移法形成三段畫幅，塊面較小沖擊力也相對不足。當然規矩是活的，設計中也可以依創意選擇。
3. 圖三：建議使用的平衡方式。不論哪種顯示器用戶都可以看到平移的效果，畫面整體，沖擊力強。
1.圖一：上下格局，SLOGEN和主視覺都在首屏。
2.圖二：左右格局，SLOGEN和主視覺在左側，使用這種方式的時候盡量讓SLOGAN的重點部分保證在首屏高度以內。
3.圖三：混合格局，內容和SLOGEN、主視覺各占一席風水寶地。
看看——霸氣側漏同樣精彩
一、上下格局
這是平移創意中比較精巧的一個頁面，它利用了平移后的視覺關系創造出新的空間感受。以石塊為主要質感的前面景主要承載信息內容，以場景為主的后背景主要配合人物表現。這種方式在普通的上下版塊關系的頁面中比較常見，但是應用在左右格局的平移頁面中，就顯得比較出彩。人物與場景與石面版的前后關系也處理得不錯(除了石塊的投影減弱了空間外)。總得來說算是一個比較驚艷的創意表現。
平移的方式改變了我們日常的視覺習慣，也給創意帶來了新的空間和挑戰。
2、左右格局
這個頁面將LOGO和SLOGAN放到左側，并保證了主SLOGAN信息和LOGO以及人物的頭部在首屏以內。平移產生的前后空間設計，使畫面動靜結合。前景是安靜的信息，而蘊藏其后的是戰國的烽火連天。
3、混合格局
應用不對稱格局進行按鈕和內容的互動，形式和功能一體化。
除去背景，它無非就是一個排版清晰的頁面，但平移后交互層級更加清晰。
做做——QQ西游裝機專題
QQ西游裝機專題
這是QQ西游的網吧裝機專題，收到需求后，我們通過簡單的排版完成了頁面。畫面除了簡潔也便沒有其它的特點，氣氛不足也無任何的亮點，時間緊迫、創意枯竭，我們要如何拯救。
為了尋找一些不一樣的視覺效果，我們用了通用性的平移方式，下面我們來看看，它是否能夠為我們帶來一些不同的表現并留意在這過程中間的方法和注意事項。
STEP 1 平移背景
將背景平移，設定前景和背景的顏色，因為頁面的交互需求的主SLOGAN是火爆裝機，可以選擇對比色來增強視覺沖擊力。讓專題的整體調性更加鮮亮一些。在平移時可以選擇移至800像素寬度的邊緣，這樣1024的用戶也可以看到平移效果。
STEP 2 實物化設定
通過顏色的設定，我們可以將其場景化，讓畫面更加深動，這里我們選擇了桌面的木板質感做為黃色的實物設定，紫色的內容界面則通過卷角設定為一張紙質的海報。
STEP 3 細化
當實物化設定完成后，我們就可以對其進行細化，由于是裝機主題，我們將鍵盤鼠標、游戲道具還有獎勵一起放上桌面，讓人感受到裝機后可以直接體驗游戲的感受。然后大體細化一下光影讓視覺更加整體。這樣就基本上完成了。
最終效果：
通過平移，我們為一個普通的頁面添加了小小的精彩，平移的效果讓整體畫面更加跳躍透氣。
歡迎轉載：http://www.kanwencang.com/bangong/20161206/64896.html
文章列表
留言列表
