騰訊美女設計師教你乾坤大挪移

 　　時間短、沒點子、沒創意，又要快速捕抓眼球,怎麼辦?

　　對頁面整體進行旋轉和平移是快速改變視覺是快速有效的方法.它打破了正常的網頁視覺習慣,吸引了觀眾的注意力。

　　說說 —— 旋轉和平移

        小編推薦:

 

　　騰訊美女設計師教你如何抄現實

　　騰訊美女設計師教你欲擒故縱

 

　　如果每天要面對著巨大的需求量，難免有創意枯竭的時候，如果有一些相對討巧的辦法，能夠不受主題限制，當然是再好不過的，這時候，我們不防試試這簡單的小辦法。

　　旋轉和平移，這是針對整個頁面的大版式而言的，到底會造成怎樣一種效果，我們繼續往下看。

　　圖一：一張優質的穩定的攝影圖片。

　　圖二：旋轉後的不穩定構圖使圖片顯得活潑動感而有趣。

　　圖三：重心右移，打破對稱的構圖增強了畫面的緊張感。

　　這種最快速改變視覺結構的簡單方式，可以快速的運用於網頁中嗎?

　　圖一：我們正常的頁面版式，居中對齊，穩定整齊，稍顯呆板。

　　圖二：畫面中心旋轉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西游》新版本發布的廣告落地專題，新版本的名字叫”鵲橋難”，而這個版本也將結合七夕這樣一個節日時間點正式發布。”鵲橋相會”也成為了畫面的主要視覺。

　　傳統思路：

　　說起鵲橋相會或者七夕，我們的第一直觀畫面大致是以下兩種類型，剪影的男女相會，腳下踩著一座橋，亦或是穿著情侶套裝的男女相擁，身後雲彩朵朵……對於一些沒有情侶套裝的游戲人物，有時只能將兩只目露胸光的，喔打錯字，是凶光，目露凶光飽含殺氣的的男女主角硬是湊成了佳人一對。不過素材的限制有時也是比較無奈的，暫時拋開素材的問題，想想我們如何在這種傳統表現手法的基礎上讓自己的網頁稍顯特別呢?