網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得發(fā)布者：本站     時間：2021-12-20 12:12:00

騰訊TGI高級視覺設計師@晉小彥的系列專題，童鞋們看過癮了木有?這一期教你如何將呆板僵硬的網(wǎng)頁設計轉(zhuǎn)眼就變成靈動活潑的創(chuàng)意設計，究竟是怎樣的方法才能快速拓展設計思路呢?這一期，有招。

時間短、沒點子、沒創(chuàng)意，又要快速捕抓眼球,怎么辦?

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

說說 —— 旋轉(zhuǎn)和平移

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

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

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

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

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

圖一：一張優(yōu)質(zhì)的穩(wěn)定的攝影圖片。

圖二：旋轉(zhuǎn)后的不穩(wěn)定構(gòu)圖使圖片顯得活潑動感而有趣。

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

這種最快速改變視覺結(jié)構(gòu)的簡單方式，可以快速的運用于網(wǎng)頁中嗎?

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

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

圖二：畫面中心旋轉(zhuǎn)30度。

圖三：整體畫幅向右平移。

看起來似乎可以這么干，但它也將給我們帶來其它一些細節(jié)上的難題。

想想 —— 整體旋轉(zhuǎn)、背景旋轉(zhuǎn)、綜合旋轉(zhuǎn)

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

旋轉(zhuǎn)適合的頁面及其產(chǎn)生的效果

旋轉(zhuǎn)打破了畫面橫平豎直的呆板，旋轉(zhuǎn)后的視覺更加輕松活躍，旋轉(zhuǎn)構(gòu)成的斜線條也可以產(chǎn)生運動和速度感，所以許多運動的、刺激的、具有速度感的主題適合直接旋轉(zhuǎn)處理，另外運動、速度衍生出年輕的、時尚的之類主題也可以適用，輕微的旋轉(zhuǎn)也可以使畫面更貼近于自然的生活狀態(tài)，增強真實性與親切感。但在開始旋轉(zhuǎn)設計改造之前，一定會有人產(chǎn)生這樣的疑惑。

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

旋轉(zhuǎn)可能會給我們帶來以下一些問題

1.信息量的限制

由于旋轉(zhuǎn)的構(gòu)圖，斜線與面邊面框最終會有一個交界點，可能導致信息不能無限制的延續(xù)

2.排版的限制

由于旋轉(zhuǎn)的形式需要整體的配合，而有部分素材無法配合旋轉(zhuǎn)就會比較花時間去歸納處理。

3.瀏覽舒適性問題

由于角度傾斜，打破了習慣性視覺在提神的同時也會給瀏覽造成一定的困難和不舒適。

這些都是我們需要注意和解決的問題，帶著這些問題，我們一起來看看旋轉(zhuǎn)的一些潛規(guī)則。

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

在斜排布時注意幾個要點，以免影響閱讀。

1.非內(nèi)容必要原因。文字盡量保持一定規(guī)律排布對齊。

2.非內(nèi)容必要原因。并列內(nèi)容盡量使用同一變換角度。

3.圖三為正確的變換方式

在簡單的圖示下，這些錯誤看起來顯而易見，但在實際的操作中，由于多種因素的干擾我們往往忽視這些問題。

在排版過程中無論如何我們都要盡量讓依造某一規(guī)律對齊，在畫幅已旋轉(zhuǎn)的情況下更應該保持理性。旋轉(zhuǎn)基本可以分為以下幾種類。

網(wǎng)頁設計心得之網(wǎng)頁乾坤大挪移心得,PS教程,

1.整體旋轉(zhuǎn)：

背景和內(nèi)容一起旋轉(zhuǎn)，需要注意兩條邊緣線，一是保持旋轉(zhuǎn)的邊緣線整齊，另外也要注意旋轉(zhuǎn)后的內(nèi)容不能超出1000寬度。為了兼顧信息的閱讀性，背景和內(nèi)容的同時旋轉(zhuǎn)的角度盡量不要超過15度。

2.背景旋轉(zhuǎn)：

背景旋轉(zhuǎn)，信息內(nèi)容保持不變。這種旋轉(zhuǎn)即可以產(chǎn)生旋轉(zhuǎn)的視覺形式感，又可以保證文字信息的閱讀性，是比較推薦和常用的方式。但信息排版同樣也受到斜線的1000寬度的限制，在具體操作中需要進行細節(jié)的調(diào)整。

3.綜合旋轉(zhuǎn)：

根據(jù)內(nèi)容結(jié)構(gòu)進行有選擇的部分旋轉(zhuǎn)。通常選擇內(nèi)容文字較少的SLOGAN跟隨背景一同旋轉(zhuǎn)共同達到旋轉(zhuǎn)的形式感。信息量較多的正文保持水平不變，以方便閱讀。這種方式也是經(jīng)常被使用到。

PS：黃底為1000寬度的內(nèi)容面積、藍底為背景面積、白色虛線為1000寬度標準線、SLOGAN(主視覺標題))、文字、圓泡泡(圖素)圖片組成簡易的網(wǎng)頁示意圖、透明背景為增闊的信息面積。(對于1024用戶的最大網(wǎng)頁寬度的定義，不同的公司有不同的標準，通常是在1000~1004范圍，為了美觀，設計上通?？啥啾Ａ粢恍┩膺吘唷?