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

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

時(shí)間短、沒(méi)點(diǎn)子、沒(méi)創(chuàng )意，又要快速捕抓眼球,怎么辦?

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

說(shuō)說(shuō) —— 旋轉和平移

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

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

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

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

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

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

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

圖二：旋轉后的不穩定構圖使圖片顯得活潑動(dòng)感而有趣。

圖三：重心右移，打破對稱(chēng)的構圖增強了畫(huà)面的緊張感。

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

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

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

圖二：畫(huà)面中心旋轉30度。

圖三：整體畫(huà)幅向右平移。

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

想想 —— 整體旋轉、背景旋轉、綜合旋轉

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

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

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

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

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

旋轉可能會(huì )給我們帶來(lái)以下一些問(wèn)題

1.信息量的限制

由于旋轉的構圖，斜線(xiàn)與面邊面框最終會(huì )有一個(gè)交界點(diǎn)，可能導致信息不能無(wú)限制的延續

2.排版的限制

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

3.瀏覽舒適性問(wèn)題

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

這些都是我們需要注意和解決的問(wèn)題，帶著(zhù)這些問(wèn)題，我們一起來(lái)看看旋轉的一些潛規則。

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

在斜排布時(shí)注意幾個(gè)要點(diǎn)，以免影響閱讀。

1.非內容必要原因。文字盡量保持一定規律排布對齊。

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

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

在簡(jiǎn)單的圖示下，這些錯誤看起來(lái)顯而易見(jiàn)，但在實(shí)際的操作中，由于多種因素的干擾我們往往忽視這些問(wèn)題。

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

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

1.整體旋轉：

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

2.背景旋轉：

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

3.綜合旋轉：

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

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