網頁設計應急小技巧

作者：龍 時(shí)間：2018-07-28 浏覽：

工作中，網頁設計師經常會遇見這(zhè)些狀況：時(shí)間這(zhè)麽短又要出彩、又是要大(dà)氣要有氣氛、風格不明(míng)确很難把握、欄目這(zhè)麽多(duō)頁面又這(zhè)麽長(cháng)……
突然覺得(de)束手無策，腦(nǎo)袋裏一片空白，沒想法了(le)，怎麽辦？
下(xià)面簡淺的(de)歸納了(le)幾個(gè)快(kuài)速讓頁面出彩的(de)小技巧：

1.旋轉法 – 将頁面的(de)主體或局部進行旋轉

我們一般的(de)頁面版式都是方方正正，四平八穩，有點呆闆。如果将局部或整體适當的(de)旋轉，打破穩定的(de)構圖，畫(huà)面就會動感有趣一些。

上圖，将背景旋轉後，大(dà)面積的(de)斜面産生了(le)很強的(de)速度感，賽車急速飛(fēi)馳著(zhe)，好像下(xià)一秒就要從電腦(nǎo)中沖出來(lái)一樣，傾斜的(de)大(dà)标題和(hé)旋轉後的(de)背景交叉配合，使畫(huà)面整個(gè)都運動起來(lái)。這(zhè)種方法可(kě)以應用(yòng)到很多(duō)運動的(de)主題上。

2.黃(huáng)金分(fēn)割法 – 靈活運用(yòng)黃(huáng)金比例分(fēn)割的(de)辦法将頁面“切”開

黃(huáng)金比率被認爲是最理(lǐ)想的(de)矩形比例，在過去的(de)文化(huà)遺産中也(yě)有很多(duō)這(zhè)樣的(de)遺存。将這(zhè)個(gè)比率應用(yòng)到版式設計中，也(yě)能夠設計出容易爲用(yòng)戶所喜歡的(de)構圖。但不要被這(zhè)些比例所束縛，很多(duō)是靠自己的(de)感覺去應用(yòng)。
上圖，除去背景無非就是一個(gè)排版清晰的(de)頁面，将背景分(fēn)割後，對(duì)比的(de)色塊使畫(huà)面産生縱深感，頁面的(de)豐富性和(hé)視覺沖擊力迅速增強。人(rén)物(wù)也(yě)好像著(zhe)陸了(le)一樣，平穩的(de)站在畫(huà)面中。

3.曲線法 – 将曲線用(yòng)于背景或版塊分(fēn)割，消除矩形分(fēn)割的(de)生硬感。

與直線相比，曲線具有圓潤的(de)特點，讓人(rén)感覺輕松、愉悅。增強視覺感的(de)同時(shí)也(yě)能夠營造活躍的(de)氣氛。
上圖中，大(dà)衆的(de)logo和(hé)焦點圖中的(de)機器人(rén)産品，全部由曲線組成，這(zhè)種情況下(xià)，用(yòng)曲線來(lái)分(fēn)割背景和(hé)焦點就顯得(de)理(lǐ)所當然了(le)，畫(huà)面中曲線合理(lǐ)的(de)運用(yòng)也(yě)提高(gāo)了(le)層次感，機器人(rén)和(hé)紅色标題都更突出。

仿照(zhào)球的(de)運動軌迹，貫穿著(zhe)整個(gè)頁面的(de)曲線，将用(yòng)戶直觀的(de)帶入了(le)正在激烈進行的(de)棒球比賽現場(chǎng)。看似随意，其實用(yòng)曲線精當的(de)将标題、焦點圖和(hé)新聞等版塊按重點進行了(le)不同比例的(de)分(fēn)割。

4.借用(yòng)法 – 借用(yòng)現實中的(de)東西，将實物(wù)抽象化(huà)，提煉出大(dà)形輪廓用(yòng)于背景

現實中的(de)東西也(yě)可(kě)以應用(yòng)到網頁設計中？當然可(kě)以，隻要想的(de)到。
如圖，信封是我們生活中常用(yòng)的(de)東西，如此生活化(huà)的(de)東西借用(yòng)到網頁上，展開在用(yòng)戶面前，好像郵寄給您的(de)信一樣，立馬讓人(rén)眼前一亮，親切感油然而生。作爲遊戲活動的(de)通(tōng)告頁，用(yòng)白色的(de)信紙來(lái)盛放主體内容也(yě)再合适不過。

上圖，将賽車在賽道上疾馳的(de)場(chǎng)面置放到頁面上作爲背景，虛化(huà)的(de)大(dà)城(chéng)市，放大(dà)的(de)賽道，飛(fēi)奔的(de)賽車……就像此刻坐(zuò)在電腦(nǎo)前玩賽車，左手正緊緊按著(zhe)W、A、S、D鍵一樣。讓用(yòng)戶身臨其境，完全抓住了(le)對(duì)方眼球。
以此類推，生活中很多(duō)東西都可(kě)以借用(yòng)，例如:寫滿粉筆字的(de)黑(hēi)闆、電腦(nǎo)的(de)屏幕、寫日記的(de)本子、老古董的(de)地圖，空曠的(de)足球場(chǎng)……

5.三角拼貼法 – 像做(zuò)手工一樣，将裁剪好的(de)三角形打亂，重新拼貼

不同的(de)幾何形狀有不同的(de)性格，圓形是活潑可(kě)愛(ài)的(de)，方形是平穩整齊的(de)，三角形就是尖銳動感的(de)。
三角形的(de)不平衡性及其尖銳性能夠增強視覺上的(de)刺激，快(kuài)速吸引用(yòng)戶，可(kě)以用(yòng)于科技和(hé)時(shí)尚這(zhè)種風格同樣比較“鋒利”的(de)網頁。
上圖，将同色系小三角形均勻的(de)拼貼起來(lái)，馬上就營造出一種鑽石璀璨般的(de)時(shí)尚感。但實踐的(de)時(shí)候要注意加減法，不能亂堆一通(tōng)，點到爲止即可(kě)。

上圖，用(yòng)豔麗的(de)三角形對(duì)頁面進行劃分(fēn)、拼貼。大(dà)小的(de)組合，色塊的(de)對(duì)比，能夠帶給用(yòng)戶強烈的(de)視覺沖擊力。在搭配的(de)時(shí)候，注意主次，以一個(gè)大(dà)的(de)形狀爲主，給内容擺放留下(xià)足夠空間，與其他(tā)輔助的(de)小形狀相區(qū)别。

6.色塊分(fēn)割法 – 将各版塊用(yòng)不同顔色來(lái)區(qū)别

經常面對(duì)需求方這(zhè)裏是重點、那也(yě)是重點、那那那也(yě)挺重要，統統需要突出的(de)要求，對(duì)于主題比較明(míng)快(kuài)的(de)頁面 可(kě)以考慮将版塊用(yòng)不同顔色來(lái)區(qū)别，通(tōng)過色塊來(lái)強化(huà)頁面版式和(hé)布局，難度較大(dà)的(de)是在色彩搭配上要取得(de)平衡。
上圖，版式在頁面都以塊來(lái)體現，沒有什(shén)麽效果，爲了(le)突出重點，在重要區(qū)域選擇了(le)飽和(hé)度較高(gāo)的(de)紅黃(huáng)綠(lǜ)三個(gè)顔色，産生明(míng)确的(de)視覺中心，讓用(yòng)戶能夠按照(zhào)我們希望的(de)那樣閱讀下(xià)去。但對(duì)比色調容易造成不和(hé)諧，紅黃(huáng)綠(lǜ)之間加上灰底的(de)中性色來(lái)調和(hé)一下(xià)就顯得(de)不會突兀了(le)。

當使用(yòng)四到五種純色進行搭配的(de)時(shí)候，注意隻要色相、純度、明(míng)度三個(gè)屬性中有一個(gè)屬性是基本相同或者接近，搭配起來(lái)基本上都不會覺得(de)太牽強。

—————————————————————-
以上幾個(gè)小技巧可(kě)以在情況緊急時(shí)參考，大(dà)家也(yě)可(kě)以用(yòng)類似的(de)方法總結出更多(duō)的(de)小技巧自用(yòng)。