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

書訊：妹子的新書《形式感+：網(wǎng)頁視覺設(shè)計創(chuàng)意拓展與快速表現(xiàn)》上架了，同學(xué)們現(xiàn)在可以搶先預(yù)定唷 : ）

妹子的系列好文：
《騰訊美女設(shè)計師傾囊相授：抄現(xiàn)實(shí)（第一集）》
《騰訊美女設(shè)計師傾囊相授：圓、方、三角（第二集）》
《騰訊美女設(shè)計師傾囊相授：網(wǎng)頁全屏大視野（第七集）》
《騰訊美女設(shè)計師傾囊相授：欲擒故縱（第四集）》
《騰訊美女設(shè)計師傾囊相授：你看起來很好吃（第九集）》

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

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

 

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

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

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

圖一：一張優(yōu)質(zhì)的穩(wěn)定的攝影圖片。
圖二：旋轉(zhuǎn)后的不穩(wěn)定構(gòu)圖使圖片顯得活潑動感而有趣。
圖三：重心右移，打破對稱的構(gòu)圖增強(qiáng)了畫面的緊張感。

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

圖一：我們正常的頁面版式，居中對齊，穩(wěn)定整齊，稍顯呆板。
圖二：畫面中心旋轉(zhuǎn)30度。
圖三：整體畫幅向右平移。

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

 

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

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

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

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

1.信息量的限制

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

2.排版的限制

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

3.瀏覽舒適性問題

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

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

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

1.非內(nèi)容必要原因。文字盡量保持一定規(guī)律排布對齊。
2.非內(nèi)容必要原因。并列內(nèi)容盡量使用同一變換角度。
3.圖三為正確的變換方式

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

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

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寬度的限制，在具體操作中需要進(jìn)行細(xì)節(jié)的調(diào)整。

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

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

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

 

看看 —— 歪腦袋讓世界與眾不同

 

一、整體旋轉(zhuǎn)

這是"一句話小說"征文比賽的活動頁面，作者用手寫的方式來表達(dá)，通過小小的旋轉(zhuǎn)把手寫的輕松狀態(tài)體現(xiàn)出來，增強(qiáng)頁面的親和力。整體旋轉(zhuǎn)可以減小旋轉(zhuǎn)的角度，以保證信息的閱讀性。

 

二、背景旋轉(zhuǎn)

我們可以看到這個頁面的文字信息基本保持著水平的狀態(tài)。黑色與白色的背景的斜切面構(gòu)成了整體的形式感。黑白的對比和貫穿頁面頭尾斜線條都讓頁面的視覺產(chǎn)生了強(qiáng)烈的視覺沖擊力。不過在大刀闊斧的形式感設(shè)計背后，文字的排版還需要小心斟酌處理。這個頁面統(tǒng)一采用了右對齊的方式。左側(cè)文字的排版也恰好與斜線相契合。這需要我們在制作過程中對內(nèi)容進(jìn)行一定的編排和修整，以使其整體看起來更加舒適。

 

三、綜合旋轉(zhuǎn)

這兩個頁面排版形式相近，它們都選擇了頭部SLOGAN旋轉(zhuǎn)的形式，并把ＳＬＯＧＡＮ和正文明確分割開以避免角度的不同造成的閱讀干擾，信息量較大的正文置于下面保持水平。這樣的方式讓頁面形式感和閱讀性并存。

 

做做——QQ 西游卻橋難

 

一、QQ西游難之鵲橋難

需求分析：

這是《QQ西游》新版本發(fā)布的廣告落地專題，新版本的名字叫"鵲橋難"，而這個版本也將結(jié)合七夕這樣一個節(jié)日時間點(diǎn)正式發(fā)布。"鵲橋相會"也成為了畫面的主要視覺。

傳統(tǒng)思路：

說起鵲橋相會或者七夕，我們的第一直觀畫面大致是以下兩種類型，剪影的男女相會，腳下踩著一座橋，亦或是穿著情侶套裝的男女相擁，身后云彩朵朵……對于一些沒有情侶套裝的游戲人物，有時只能將兩只目露胸光的，喔打錯字，是兇光，目露兇光飽含殺氣的的男女主角硬是湊成了佳人一對。不過素材的限制有時也是比較無奈的，暫時拋開素材的問題，想想我們?nèi)绾卧谶@種傳統(tǒng)表現(xiàn)手法的基礎(chǔ)上讓自己的網(wǎng)頁稍顯特別呢？

旋轉(zhuǎn)的靈光乍現(xiàn)：

經(jīng)驗(yàn)并非都是個好事，經(jīng)驗(yàn)帶給我們習(xí)慣性的思維，它可能會讓我們更快的做出判斷，但過去正確的判斷在今天并不一定就是適當(dāng)?shù)恼_的。當(dāng)我們見慣了某種傳統(tǒng)的版式，在設(shè)計的時候多少有點(diǎn)失去激情和創(chuàng)新的動力，在依靠經(jīng)驗(yàn)設(shè)計的長期設(shè)計者看來，面對傳統(tǒng)版式，接下去的動作無非就是在頭部加入男女相擁的主視覺然后繼續(xù)添加完應(yīng)該有的信息內(nèi)容，憑借經(jīng)驗(yàn)就此草草了事交差。倘若我們變換一下版式，給自己制造一些難度和挑戰(zhàn)，或者新的想法也便應(yīng)運(yùn)而生。這塊黃色的面版，在原來的視覺中可能是一個傳統(tǒng)的內(nèi)容區(qū)域，但當(dāng)它旋轉(zhuǎn)之后，也許它便跳出了原有的概念。新的設(shè)計思路則可能由此開啟。

「傳統(tǒng)版式」與「 旋轉(zhuǎn)版式」

設(shè)計分解：

STEP 1 ：旋轉(zhuǎn)版式

當(dāng)我們拋棄了傳統(tǒng)的版式，那個黃色的面版也許不再是一個只用來承載信息的容器，當(dāng)我們一手掌握著主題，一手敞開著想像時，它或許漸漸就變成了鵲橋難中的那座橋。而俯視角的視覺也非同于傳統(tǒng)的頁面。新的創(chuàng)意就在自我制造困難的路上誕生了。

STEP 2 主視覺設(shè)定

根據(jù)大的創(chuàng)意方向，我們進(jìn)行主視覺設(shè)計，這是一個俯視的視角，我們根據(jù)視角的定義進(jìn)行人物的角度和動作的設(shè)計(由于游戲版本內(nèi)容的設(shè)定，無奈中只能選擇了游戲中的悟空與玉兔精來扮演這無厘頭的情侶角色)。并在橋的兩側(cè)增加羽毛的造型，代表"鵲"橋這一獨(dú)特的定義。

STEP 3 信息排布

將信息進(jìn)行模塊分布，并盡量錯開與主視覺相沖突的部分，比如兩個人物與內(nèi)容面版相交集的部分。為了給內(nèi)容騰出足夠的空間，我們也需要適當(dāng)調(diào)整主視覺人物的位置，在調(diào)整主視覺人物位置的同時盡量保證人物的四分之三以及內(nèi)容信息在1000像素的最小范圍之內(nèi)。

頁面展示

速度、隨性、自由，是旋轉(zhuǎn)頁面帶給我們的視覺感受。

而當(dāng)我們旋轉(zhuǎn)頁面的同時，新的創(chuàng)意也可能隨之產(chǎn)生。它讓我們知道，方塊的面版不僅僅是個信息的容器，只要稍稍發(fā)揮想像，它也會成為視覺和創(chuàng)意的主體。

不妨一試。

 

想想——上下格局、左右格局、混合格局

在平衡過程中我們也需注意以下幾點(diǎn)。

1. 圖一：在1024X768的用戶顯示器下是看不到平衡的效果的。

2. 圖二：創(chuàng)意不同當(dāng)然選擇也不同，圖二的平移法形成三段畫幅，塊面較小沖擊力也相對不足。當(dāng)然規(guī)矩是活的，設(shè)計中也可以依創(chuàng)意選擇。

3. 圖三：建議使用的平衡方式。不論哪種顯示器用戶都可以看到平移的效果，畫面整體，沖擊力強(qiáng)。

1.圖一：上下格局，SLOGEN和主視覺都在首屏。

2.圖二：左右格局，SLOGEN和主視覺在左側(cè)，使用這種方式的時候盡量讓SLOGAN的重點(diǎn)部分保證在首屏高度以內(nèi)。

3.圖三：混合格局，內(nèi)容和SLOGEN、主視覺各占一席風(fēng)水寶地。

 

看看——霸氣側(cè)漏同樣精彩

一、上下格局

這是平移創(chuàng)意中比較精巧的一個頁面，它利用了平移后的視覺關(guān)系創(chuàng)造出新的空間感受。以石塊為主要質(zhì)感的前面景主要承載信息內(nèi)容，以場景為主的后背景主要配合人物表現(xiàn)。這種方式在普通的上下版塊關(guān)系的頁面中比較常見，但是應(yīng)用在左右格局的平移頁面中，就顯得比較出彩。人物與場景與石面版的前后關(guān)系也處理得不錯（除了石塊的投影減弱了空間外）?？偟脕碚f算是一個比較驚艷的創(chuàng)意表現(xiàn)。

平移的方式改變了我們?nèi)粘５囊曈X習(xí)慣，也給創(chuàng)意帶來了新的空間和挑戰(zhàn)。

2、左右格局

這個頁面將LOGO和SLOGAN放到左側(cè)，并保證了主SLOGAN信息和LOGO以及人物的頭部在首屏以內(nèi)。平移產(chǎn)生的前后空間設(shè)計，使畫面動靜結(jié)合。前景是安靜的信息，而蘊(yùn)藏其后的是戰(zhàn)國的烽火連天。

3、混合格局

應(yīng)用不對稱格局進(jìn)行按鈕和內(nèi)容的互動，形式和功能一體化。

除去背景，它無非就是一個排版清晰的頁面，但平移后交互層級更加清晰。

 

做做——QQ西游裝機(jī)專題

 

QQ西游裝機(jī)專題

這是ＱＱ西游的網(wǎng)吧裝機(jī)專題，收到需求后，我們通過簡單的排版完成了頁面。畫面除了簡潔也便沒有其它的特點(diǎn)，氣氛不足也無任何的亮點(diǎn)，時間緊迫、創(chuàng)意枯竭，我們要如何拯救。

為了尋找一些不一樣的視覺效果，我們用了通用性的平移方式，下面我們來看看，它是否能夠?yàn)槲覀儙硪恍┎煌谋憩F(xiàn)并留意在這過程中間的方法和注意事項(xiàng)。

STEP 1 平移背景

將背景平移，設(shè)定前景和背景的顏色，因?yàn)轫撁娴慕换バ枨蟮闹鱏LOGAN是火爆裝機(jī)，可以選擇對比色來增強(qiáng)視覺沖擊力。讓專題的整體調(diào)性更加鮮亮一些。在平移時可以選擇移至800像素寬度的邊緣，這樣1024的用戶也可以看到平移效果。

STEP 2 實(shí)物化設(shè)定

通過顏色的設(shè)定，我們可以將其場景化，讓畫面更加深動，這里我們選擇了桌面的木板質(zhì)感做為黃色的實(shí)物設(shè)定，紫色的內(nèi)容界面則通過卷角設(shè)定為一張紙質(zhì)的海報。

STEP 3 細(xì)化

當(dāng)實(shí)物化設(shè)定完成后，我們就可以對其進(jìn)行細(xì)化，由于是裝機(jī)主題，我們將鍵盤鼠標(biāo)、游戲道具還有獎勵一起放上桌面，讓人感受到裝機(jī)后可以直接體驗(yàn)游戲的感受。然后大體細(xì)化一下光影讓視覺更加整體。這樣就基本上完成了。

最終效果：

通過平移，我們?yōu)橐粋€普通的頁面添加了小小的精彩，平移的效果讓整體畫面更加跳躍透氣。

作者：晉小彥 微博：@晉小彥 （騰訊 TGI 高級視覺設(shè)計師）
本文由作者授權(quán)首發(fā)，轉(zhuǎn)載請注明優(yōu)設(shè)網(wǎng)出處。謝謝各位小編配合。

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