更新時(shí)間：2025-09-15 19:39:52
網(wǎng)站建設(shè)
517北京網(wǎng)站制作公司推來客：客戶要求你在設(shè)計(jì)中呈現(xiàn)出一種“動(dòng)感、活力”的效果。聽起來好像不難，但是和一些動(dòng)態(tài)圖片、FLASH設(shè)計(jì)有區(qū)別。 Printed 頁面是靜態(tài)的，不能在上面添加一些視頻，也不能像設(shè)計(jì)網(wǎng)頁那樣添加一些其他的動(dòng)態(tài)元素，但是我們有其他的方法可以實(shí)現(xiàn)。在靜態(tài)頁面上，我們可能會(huì)通過負(fù)空間、重復(fù)、語氣、透視、排版等來創(chuàng)建運(yùn)動(dòng)。以下是我們介紹的一些方法。
在進(jìn)入細(xì)節(jié)之前，我們先來感受一下靜態(tài)設(shè)計(jì)和動(dòng)態(tài)設(shè)計(jì)的區(qū)別：
以上兩張圖片，第一張可以讓讀者清楚的看到你們雜志每期的封面，整齊的排列可以很好的達(dá)到目的。至于第二張圖，通過不同的布置，我們有了透視感，給人不同的感覺，傳遞出更多的活力。
1.創(chuàng)建連續(xù)場(chǎng)景
這種技術(shù)使用圖形元素來動(dòng)畫化一系列動(dòng)作或事件，以吸引讀者注意事物是如何演變的。
一、二、三……您的讀者可以仔細(xì)觀看如何在練習(xí)中揮動(dòng)高爾夫球桿，或者如何在健身房鍛煉三頭肌。這里不需要像“后退”或“快進(jìn)”這樣的按鈕。請(qǐng)注意，干凈、空白的背景會(huì)將讀者的注意力吸引到整個(gè)動(dòng)作順序。
2.使用分層漸變
這種做法類似于第一個(gè)連續(xù)場(chǎng)景，通過不同層次的漸變營造出一種“從這里到那里”的感覺。
講故事：通過設(shè)置不同圖片的透明度，我們仿佛在講一個(gè)環(huán)環(huán)相扣的故事。請(qǐng)注意上面老人圖片的透明度從亮到暗的逐漸變化。
3.重復(fù)使用圖像
在一些音像店，尤其是電視機(jī)的銷售柜臺(tái)，你可能見過這樣的場(chǎng)景。 —— 同一張圖片同時(shí)出現(xiàn)在十幾個(gè)不同的屏幕上。不管往哪個(gè)方向看，到處都是——，其實(shí)就是元?dú)鉂M滿的效果！我們的眼睛總是喜歡重復(fù)的東西。
我們首先選擇簡(jiǎn)單的圖像非常重要。像上圖左圖，這張圖因?yàn)槭艿奖尘暗挠绊懀浅?fù)雜。而只顯示面部效果很好，因?yàn)樗鼊?chuàng)建了一個(gè)焦點(diǎn)元素。均勻排列圖片以填充空間。
滑動(dòng)：一排眼鏡會(huì)自然地將您的眼睛從左移到右。酒杯的高度和里面的酒是一樣的，加速了動(dòng)態(tài)效果。
4.邊際關(guān)系
布局的中心點(diǎn)無疑是最激烈的位置，但同時(shí)也是最穩(wěn)定的位置。要?jiǎng)?chuàng)建充滿活力的排版，應(yīng)該嘗試玩邊緣游戲并避開中心點(diǎn)。
5.加強(qiáng)運(yùn)動(dòng)感
如果圖片本身已經(jīng)具有動(dòng)態(tài)效果，我們可以通過裁剪背景進(jìn)一步加強(qiáng)動(dòng)態(tài)效果。
很快：上圖從左到右，第一張本身就有一種動(dòng)感，但是受周圍邊框的限制，這種動(dòng)感被壓制了。切掉一半的背景營造出一種從背景中駛出并進(jìn)入背景的感覺，后兩者在運(yùn)動(dòng)中得到增強(qiáng)。
想增加樂趣？切斷整個(gè)圖像底部的三個(gè)邊之一（見下圖）現(xiàn)在給人的印象是車輪旋轉(zhuǎn)得更快，摩托車似乎正在跳入前景。從下面這張小圖可以看出，經(jīng)過處理的圖片增強(qiáng)了水平線的效果，因?yàn)樗骄€的方向與摩托車的方向一致，進(jìn)一步增強(qiáng)了速度感。
6.創(chuàng)建自己的背景
選擇合適的字體與圖片搭配：長方形的黑色背景呼應(yīng)充滿直線感的Leco 1976字體，同時(shí)與跳躍圖形呈現(xiàn)的填角線條形成良好的關(guān)系
搭配及互補(bǔ)。留意DANCE這幾個(gè)字是90度擺放的，字體顯得非常簡(jiǎn)潔，象G、E、A等字母都幾乎有相同的結(jié)構(gòu)。充滿活力的位置及顏色：下圖從左到右，第一個(gè)小標(biāo)題與大字垂直居中，缺乏活力，將這行小字移上一點(diǎn)，這行文字既沒有與最上方平齊，又沒有居中，造成了一種強(qiáng)烈動(dòng)態(tài)的效果。通過對(duì)比強(qiáng)烈的顏色搭配，進(jìn)一步強(qiáng)化出跳躍的動(dòng)態(tài)。
七、營造透視感
通過使用透視感傳達(dá)出一種逐漸遞進(jìn)或傳達(dá)出一種“還有更多”的視覺語言。
八、使用弧線
弧線具有強(qiáng)烈的動(dòng)感。
弧線給人一種快速的感覺，多條趨向一致的曲線在一起產(chǎn)生更快的視覺效果。上圖第一張，兩束弧線的集合點(diǎn)形成版面的一個(gè)自然焦點(diǎn)。所以在這個(gè)地方放上其它的元素，沒有人會(huì)忽視它的存在。而下圖示意圖中，垂直線給人靜止的感覺，當(dāng)形成弧線，我們的視線會(huì)不自覺地跟著它移動(dòng)，從而“延伸”成動(dòng)感。
九、使用點(diǎn)線或虛線
當(dāng)我們的眼睛從一個(gè)點(diǎn)去到另一個(gè)點(diǎn)時(shí)，便產(chǎn)生一種動(dòng)感的效果：
十、形成角度
傾斜的線條天然具有一種不穩(wěn)定的感覺，這種不穩(wěn)定便產(chǎn)生了一種能量。無論是文字還是線條，角度都增加了動(dòng)感、緊張及興奮的效果。
如果是水平線擺放，就算是一輛急速行駛的汽車，仍然給人一種穩(wěn)定的感覺，因?yàn)樗粫?huì)“掉下來”。而傾斜就營造了緊張及不穩(wěn)定，同時(shí)也形成了一個(gè)“坡度”，使對(duì)象給人一種上升或下降的動(dòng)感。
只有角度及曲線：富沖擊力的圖片形成了角度及傾斜線，這架跑車向著遠(yuǎn)處的消失點(diǎn)狂奔。同時(shí)與圖案呼應(yīng)的文字是一種簡(jiǎn)潔、非襯線體的斜體。
十一、親密接觸
就象在一個(gè)狹窄空間中有一群人在跳舞，或者一群人相擠照相一樣，當(dāng)對(duì)象擠在一起時(shí)就形成了一種緊張感，而緊張感等于動(dòng)感。
選擇一種簡(jiǎn)單的、粗壯及非襯線字體效果最佳。象上圖一樣，字母粗壯肥大，就算是重疊時(shí)也很容易閱讀。而下面的幾個(gè)示意圖，太細(xì)的字體給人雜亂的感覺，太復(fù)雜的字體形成了一些奇形怪狀影響閱讀。結(jié)構(gòu)過于相似的字體或太擁擠的堆放已經(jīng)讓人無從卒讀。
十二、模糊及搖晃
模糊或搖擺的效果形成了一種動(dòng)感的效果。
在PS里進(jìn)行模糊處理：PS里的動(dòng)感模糊可以輕易實(shí)現(xiàn)，我們這里的圖是水平放置的，距離設(shè)為50，不同的圖片及不同的角度需要不同的設(shè)置。
十三：全景視野
超寬的版式其實(shí)已經(jīng)形成了一種動(dòng)感，因?yàn)槟愕难劬Ρ仨殢倪@一頭移動(dòng)另一頭。出來的效果充滿動(dòng)感，有時(shí)還給人一種壯麗的氣息：
這種超寬版式的圖片通常需要自己通過剪切獲得，我們可以將一張普通的自然圖片變成全景圖效果。文字放置在一條很矮且半透明的色塊上，整個(gè)版面處處在強(qiáng)調(diào)“從這頭到那頭”的設(shè)計(jì)語言。
十四、全景式文字：
通過一種超寬的字體或者增加字距，同樣可以營造一種全景式的效果：
快速的文字：全大寫字母更加快，所有水平線給人一種齊頭并進(jìn)的感覺，想不快都難！如果設(shè)置上小寫字母，移動(dòng)的方向出現(xiàn)了障礙物（d,i），使到速度慢了很多，甚至還會(huì)產(chǎn)生向左的視覺感。
就算是一種普通的字本，通過增大字母距離，也給人一種全景效果。上方的文字為19pt，而字符間距則設(shè)置到170。
十五、出位
將圖片元素移出原來的框框，傳達(dá)出動(dòng)感及增加了版面的層次及形成焦點(diǎn)。
釋放動(dòng)感：原圖學(xué)生的姿勢(shì)仿佛依靠在圖片的邊緣上，而通過去掉剛好處于他的眼睛下方的部分背景，可以說是打破了原來的框邊，形成了一個(gè)水平邊緣，產(chǎn)生了動(dòng)感的效果。事實(shí)上，這種剪切是在版面上增加了第三個(gè)層次。
線條越多，動(dòng)感越強(qiáng)：學(xué)生的視線得到加速，因?yàn)槠渲車乃骄€條強(qiáng)化一種方向感及運(yùn)動(dòng)感。那些元素之間的纖細(xì)留白空間同樣形成了線條感，發(fā)揮了相同的作用。
十六、配合方向
我們的版式要與里面的元素的方向配合好。
水平方向的動(dòng)感要用水平的版式來配合：里面的人已經(jīng)沒有地方向前跑了，感覺象個(gè)僵硬的雕塑一樣。而改為水平版式，不僅僅提供空間給她繼續(xù)往前跑，同時(shí)也提供了一個(gè)放置文字的地方。
要避免形成這種“文字墻”擋住她的路。上圖右，雖然文字還是放在她的前方，但水平放置的文字呼應(yīng)她的動(dòng)感，所以整個(gè)版面的速度并沒有減弱。
垂直的方向要配合垂直的版式：將文字放置在其尾后的方向，仍然保持了飛機(jī)向前的動(dòng)感。B，由于飛機(jī)形成一個(gè)箭頭形，所以在上方放置文字可以起到一個(gè)指示的作用，但這樣會(huì)降低飛機(jī)的動(dòng)感。
本文發(fā)布于北京網(wǎng)站建設(shè)公司推來客http://www.tlkjt.com/
我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！
