網頁設計總結論之(zhī)如何讓設計動感起來(lái)

在(zài)靜态的(de)頁面上(shàng)，我們可能通過負空間、重複、色調、透視、版式等等來(lái)産生動感。以(yǐ)下是(shì)我們介紹的(de)一(yī / yì ／yí)些方法。在(zài)詳細介紹前，我們先來(lái)感受一(yī / yì ／yí)下靜态的(de)設計及動态的(de)設計之(zhī)間的(de)不(bù)同：上(shàng)方兩張圖，第一(yī / yì ／yí)張可以(yǐ)讓讀者清晰觀看你的(de)各期雜志封面，整齊排列就(jiù)能夠很好地(dì / de)達到(dào)目标。

網站制作公司客戶要(yào / yāo)求你在(zài)設計中呈現一(yī / yì ／yí)種“充滿動感及活力”的(de)效果，這(zhè)聽起來(lái)這(zhè)似乎并不(bù)難，但與一(yī / yì ／yí)些動态的(de)圖片及FLASH等設計不(bù)一(yī / yì ／yí)樣，印刷的(de)頁面是(shì)屬于(yú)靜态的(de)，你也(yě)不(bù)能在(zài)上(shàng)面加上(shàng)一(yī / yì ／yí)些視頻或象設計網頁一(yī / yì ／yí)樣加上(shàng)其它的(de)一(yī / yì ／yí)些動态元素，但我們有其它的(de)辦法來(lái)實現。

而(ér)第二張圖，通過不(bù)同的(de)排列，我們就(jiù)産生了(le／liǎo)一(yī / yì ／yí)種透視感，它給人(rén)另一(yī / yì ／yí)種不(bù)同的(de)感覺，傳達出(chū)更多的(de)動感。

一(yī / yì ／yí)、創造連續場景這(zhè)種技巧是(shì)用圖片元素動感地(dì / de)真實呈現一(yī / yì ／yí)系列的(de)動作或事件，通過這(zhè)種手法可以(yǐ)讓你的(de)讀者注意到(dào)某些東西是(shì)如何演變的(de)。一(yī / yì ／yí)，二，三……，你的(de)讀者可以(yǐ)很仔細地(dì / de)觀看在(zài)練習高爾夫球中是(shì)如何揮杆的(de)，或者如何在(zài)健身中鍛煉三頭肌。這(zhè)裏不(bù)需要(yào / yāo)“後退”或“快進”等按鈕。留意幹淨空白的(de)背景使讀者的(de)注意力能夠更加放在(zài)整個(gè)系列動作上(shàng)。

二、使用層次漸變這(zhè)種手法類似于(yú)第一(yī / yì ／yí)種的(de)連續情景，通過不(bù)同層次的(de)漸變營造出(chū)“從這(zhè)裏到(dào)那裏”的(de)感覺。講述一(yī / yì ／yí)個(gè)故事：通過不(bù)同圖片的(de)透明度的(de)設置，我們就(jiù)象在(zài)講述一(yī / yì ／yí)個(gè)環環相扣的(de)故事。留意上(shàng)圖中老人(rén)圖片的(de)透明度由淡至深的(de)漸變。

三、重複使用圖片你可能在(zài)一(yī / yì ／yí)些影音商店，特别是(shì)電視機的(de)銷售櫃台裏看過這(zhè)樣的(de)情景——同樣的(de)一(yī / yì ／yí)個(gè)圖像在(zài)不(bù)同的(de)十幾個(gè)屏幕裏同時(shí)出(chū)現。無論你往哪個(gè)方向看，它都無所不(bù)在(zài)——這(zhè)其實是(shì)充滿能量的(de)一(yī / yì ／yí)種效果！我們的(de)眼睛總是(shì)喜歡重複的(de)東西。首先我們要(yào / yāo)選擇簡單的(de)圖片，這(zhè)非常重要(yào / yāo)。象上(shàng)圖左，這(zhè)張圖片因爲(wéi / wèi)有背景的(de)影響，顯得非常複雜。而(ér)僅僅展示面部，效果很好，因爲(wéi / wèi)它産生了(le／liǎo)一(yī / yì ／yí)個(gè)焦點元素。将圖片平均分布排列，填滿空間即可。橫掃：一(yī / yì ／yí)排玻璃杯很自然地(dì / de)使你的(de)眼睛由左向右移動。杯子(zǐ)及裏面的(de)酒的(de)高度都是(shì)一(yī / yì ／yí)樣的(de)，這(zhè)加速了(le／liǎo)動态的(de)效果。四、邊緣關系版面的(de)中心點無疑是(shì)最強烈的(de)位置，但也(yě)同時(shí)是(shì)最穩定的(de)位置。要(yào / yāo)創造一(yī / yì ／yí)個(gè)充滿活力的(de)排版，應該嘗試玩點邊緣危險遊戲，避免中心點。五、強化動感如果圖片本身就(jiù)已經具有動感的(de)效果，我們可以(yǐ)通過對背景的(de)剪切進一(yī / yì ／yí)步強化。很快：上(shàng)圖從左到(dào)右，第一(yī / yì ／yí)張，本身就(jiù)有動感，但受制于(yú)四周的(de)框框，這(zhè)種動感是(shì)受到(dào)壓抑的(de)。切掉一(yī / yì ／yí)半背景，産生一(yī / yì ／yí)種駛出(chū)背景及進入背景的(de)感覺，後兩者的(de)動感得到(dào)了(le／liǎo)強化。還要(yào / yāo)增加快感？

将整個(gè)圖片下方的(de)三方之(zhī)一(yī / yì ／yí)切掉（見下圖），現在(zài)給人(rén)一(yī / yì ／yí)種輪子(zǐ)轉得更快的(de)感覺，而(ér)摩托車象是(shì)跳到(dào)了(le／liǎo)前景中。從下方小圖可以(yǐ)看出(chū)，處理後的(de)圖片增強了(le／liǎo)水平線的(de)效果，由于(yú)水平線的(de)方向與摩托車的(de)方向是(shì)一(yī / yì ／yí)緻的(de)，這(zhè)使到(dào)速度感進一(yī / yì ／yí)步得到(dào)加強。六、創造自己的(de)背景選擇恰當的(de)字體與圖片搭配：矩形的(de)黑色背景與充滿直線條的(de)Leco 1976字體互相呼應，同時(shí)與跳躍人(rén)物所呈現的(de)充滿轉角的(de)線條形成良好的(de)搭配及互補。留意DANCE這(zhè)幾個(gè)字是(shì)90度擺放的(de)，字體顯得非常簡潔，象G、E、A等字母都幾乎有相同的(de)結構。充滿活力的(de)位置及顔色：下圖從左到(dào)右，第一(yī / yì ／yí)個(gè)小标題與大(dà)字垂直居中，缺乏活力，将這(zhè)行小字移上(shàng)一(yī / yì ／yí)點，這(zhè)行文字既沒有與最上(shàng)方平齊，又沒有居中，造成了(le／liǎo)一(yī / yì ／yí)種強烈動态的(de)效果。通過對比強烈的(de)顔色搭配，進一(yī / yì ／yí)步強化出(chū)跳躍的(de)動态。

七、營造透視感通過使用透視感傳達出(chū)一(yī / yì ／yí)種逐漸遞進或傳達出(chū)一(yī / yì ／yí)種“還有更多”的(de)視覺語言。八、使用弧線弧線具有強烈的(de)動感。弧線給人(rén)一(yī / yì ／yí)種快速的(de)感覺，多條趨向一(yī / yì ／yí)緻的(de)曲線在(zài)一(yī / yì ／yí)起産生更快的(de)視覺效果。上(shàng)圖第一(yī / yì ／yí)張，兩束弧線的(de)集合點形成版面的(de)一(yī / yì ／yí)個(gè)自然焦點。所以(yǐ)在(zài)這(zhè)個(gè)地(dì / de)方放上(shàng)其它的(de)元素，沒有人(rén)會忽視它的(de)存在(zài)。而(ér)下圖示意圖中，垂直線給人(rén)靜止的(de)感覺，當形成弧線，我們的(de)視線會不(bù)自覺地(dì / de)跟着它移動，從而(ér)“延伸”成動感。九、使用點線或虛線當我們的(de)眼睛從一(yī / yì ／yí)個(gè)點去到(dào)另一(yī / yì ／yí)個(gè)點時(shí)，便産生一(yī / yì ／yí)種動感的(de)效果：十、形成角度傾斜的(de)線條天然具有一(yī / yì ／yí)種不(bù)穩定的(de)感覺，這(zhè)種不(bù)穩定便産生了(le／liǎo)一(yī / yì ／yí)種能量。無論是(shì)文字還是(shì)線條，角度都增加了(le／liǎo)動感、緊張及興奮的(de)效果。如果是(shì)水平線擺放，就(jiù)算是(shì)一(yī / yì ／yí)輛急速行駛的(de)汽車，仍然給人(rén)一(yī / yì ／yí)種穩定的(de)感覺，因爲(wéi / wèi)它不(bù)會“掉下來(lái)”。而(ér)傾斜就(jiù)營造了(le／liǎo)緊張及不(bù)穩定，同時(shí)也(yě)形成了(le／liǎo)一(yī / yì ／yí)個(gè)“坡度”，使對象給人(rén)一(yī / yì ／yí)種上(shàng)升或下降的(de)動感。隻有角度及曲線：富沖擊力的(de)圖片形成了(le／liǎo)角度及傾斜線，這(zhè)架跑車向着遠處的(de)消失點狂奔。同時(shí)與圖案呼應的(de)文字是(shì)一(yī / yì ／yí)種簡潔、非襯線體的(de)斜體。十一(yī / yì ／yí)、親密接觸就(jiù)象在(zài)一(yī / yì ／yí)個(gè)狹窄空間中有一(yī / yì ／yí)群人(rén)在(zài)跳舞，或者一(yī / yì ／yí)群人(rén)相擠照相一(yī / yì ／yí)樣，當對象擠在(zài)一(yī / yì ／yí)起時(shí)就(jiù)形成了(le／liǎo)一(yī / yì ／yí)種緊張感，而(ér)緊張感等于(yú)動感。選擇一(yī / yì ／yí)種簡單的(de)、粗壯及非襯線字體效果最佳。象上(shàng)圖一(yī / yì ／yí)樣，字母粗壯肥大(dà)，就(jiù)算是(shì)重疊時(shí)也(yě)很容易閱讀。而(ér)下面的(de)幾個(gè)示意圖，太細的(de)字體給人(rén)雜亂的(de)感覺，太複雜的(de)字體形成了(le／liǎo)一(yī / yì ／yí)些奇形怪狀影響閱讀。結構過于(yú)相似的(de)字體或太擁擠的(de)堆放已經讓人(rén)無從卒讀。十二、模糊及搖晃模糊或搖擺的(de)效果形成了(le／liǎo)一(yī / yì ／yí)種動感的(de)效果。在(zài)PS裏進行模糊處理：PS裏的(de)動感模糊可以(yǐ)輕易實現，我們這(zhè)裏的(de)圖是(shì)水平放置的(de)，距離設爲(wéi / wèi)50，不(bù)同的(de)圖片及不(bù)同的(de)角度需要(yào / yāo)不(bù)同的(de)設置。十三：全景視野超寬的(de)版式其實已經形成了(le／liǎo)一(yī / yì ／yí)種動感，因爲(wéi / wèi)你的(de)眼睛必須從這(zhè)一(yī / yì ／yí)頭移動另一(yī / yì ／yí)頭。出(chū)來(lái)的(de)效果充滿動感，有時(shí)還給人(rén)一(yī / yì ／yí)種壯麗的(de)氣息：這(zhè)種超寬版式的(de)圖片通常需要(yào / yāo)自己通過剪切獲得，我們可以(yǐ)将一(yī / yì ／yí)張普通的(de)自然圖片變成全景圖效果。文字放置在(zài)一(yī / yì ／yí)條很矮且半透明的(de)色塊上(shàng)，整個(gè)版面處處在(zài)強調“從這(zhè)頭到(dào)那頭”的(de)設計語言。十四、全景式文字：通過一(yī / yì ／yí)種超寬的(de)字體或者增加字距，同樣可以(yǐ)營造一(yī / yì ／yí)種全景式的(de)效果：快速的(de)文字：全大(dà)寫字母更加快，所有水平線給人(rén)一(yī / yì ／yí)種齊頭并進的(de)感覺，想不(bù)快都難！如果設置上(shàng)小寫字母，移動的(de)方向出(chū)現了(le／liǎo)障礙物（d,i），使到(dào)速度慢了(le／liǎo)很多，甚至還會産生向左的(de)視覺感。就(jiù)算是(shì)一(yī / yì ／yí)種普通的(de)字本，通過增大(dà)字母距離，也(yě)給人(rén)一(yī / yì ／yí)種全景效果。上(shàng)方的(de)文字爲(wéi / wèi)19pt，而(ér)字符間距則設置到(dào)170。

十五、出(chū)位将圖片元素移出(chū)原來(lái)的(de)框框，傳達出(chū)動感及增加了(le／liǎo)版面的(de)層次及形成焦點。釋放動感：原圖學生的(de)姿勢仿佛依靠在(zài)圖片的(de)邊緣上(shàng)，而(ér)通過去掉剛好處于(yú)他(tā)的(de)眼睛下方的(de)部分背景，可以(yǐ)說(shuō)是(shì)打破了(le／liǎo)原來(lái)的(de)框邊，形成了(le／liǎo)一(yī / yì ／yí)個(gè)水平邊緣，産生了(le／liǎo)動感的(de)效果。事實上(shàng)，這(zhè)種剪切是(shì)在(zài)版面上(shàng)增加了(le／liǎo)第三個(gè)層次。線條越多，動感越強：學生的(de)視線得到(dào)加速，因爲(wéi / wèi)其周圍的(de)水平線條強化一(yī / yì ／yí)種方向感及運動感。那些元素之(zhī)間的(de)纖細留白空間同樣形成了(le／liǎo)線條感，發揮了(le／liǎo)相同的(de)作用。十六、配合方向我們的(de)版式要(yào / yāo)與裏面的(de)元素的(de)方向配合好。水平方向的(de)動感要(yào / yāo)用水平的(de)版式來(lái)配合：裏面的(de)人(rén)已經沒有地(dì / de)方向前跑了(le／liǎo)，感覺象個(gè)僵硬的(de)雕塑一(yī / yì ／yí)樣。而(ér)改爲(wéi / wèi)水平版式，不(bù)僅僅提供空間給她繼續往前跑，同時(shí)也(yě)提供了(le／liǎo)一(yī / yì ／yí)個(gè)放置文字的(de)地(dì / de)方。要(yào / yāo)避免形成這(zhè)種“文字牆”擋住她的(de)路。上(shàng)圖右，雖然文字還是(shì)放在(zài)她的(de)前方，但水平放置的(de)文字呼應她的(de)動感，所以(yǐ)整個(gè)版面的(de)速度并沒有減弱。垂直的(de)方向要(yào / yāo)配合垂直的(de)版式：将文字放置在(zài)其尾後的(de)方向，仍然保持了(le／liǎo)飛機向前的(de)動感。B，由于(yú)飛機形成一(yī / yì ／yí)個(gè)箭頭形，所以(yǐ)在(zài)上(shàng)方放置文字可以(yǐ)起到(dào)一(yī / yì ／yí)個(gè)指示的(de)作用，但這(zhè)樣會降低飛機的(de)動感。

網頁設計總結論之(zhī)如何讓設計動感起來(lái)由東莞網站設計編輯 /news/3361.html如需轉載請注明出(chū)處

東莞做網站 東莞網絡推廣 東莞微信小程序開發 東莞網站改版 東莞建站費用 東莞網站開發 東莞小程序商城開發 東莞網站建設 廣州網站建設 梅州網站建設 惠州網站建設 韶關網站建設 深圳網站建設 雲浮網站建設 中山網站建設 陽江網站建設 肇慶網站建設 門戶網站建設 SEO外包 關鍵詞優化 網站托管