簡潔的設(shè)計(jì)可能是最好的設(shè)計(jì)
設(shè)計(jì)師總會說設(shè)計(jì)是一件很累人的事,但這部分原因可能是你自找的。時(shí)間與設(shè)計(jì)出來的效果也并不一定成正比。平面設(shè)計(jì)師或許應(yīng)該培養(yǎng)一種懶人設(shè)計(jì)思維,面對一個(gè)設(shè)計(jì)時(shí),心里應(yīng)該想著的只是如何以最簡單的方式完成,出來的效果可能也會更出色,畢竟,簡潔的設(shè)計(jì)往往也是最好的設(shè)計(jì)。
大多數(shù)的設(shè)計(jì)都會同時(shí)涉及到文字與圖片,這兩者的差異是非常大的,也很難事先預(yù)料到兩者一起使用時(shí)的互相影響,圖片與文字如何搭配得漂亮,往往也是設(shè)計(jì)師的一個(gè)很大的挑戰(zhàn),一不留神,就會造成風(fēng)格矛盾、細(xì)節(jié)沖突,對比錯(cuò)誤。而且就算有一次給你做得不錯(cuò),但下一次你面對另一個(gè)新項(xiàng)目時(shí),你還是會為此而抓狂。
一些設(shè)計(jì)師在設(shè)計(jì)時(shí)往往會出現(xiàn)設(shè)計(jì)過度的現(xiàn)象。更好的方式就是象一個(gè)懶人的思維一樣,圖片放在這里,文字放在那里,搞定!關(guān)鍵是讓每一個(gè)元素都簡單清晰,讓兩者的互相影響減至最低,而且這種設(shè)計(jì)手法還可以讓你一再使用,永不過時(shí)。讓我們看具體的例子吧:
這是一家室內(nèi)家居專業(yè)攝影工作室的冊子封面,修改前的設(shè)計(jì)是一種吃力的設(shè)計(jì)。 設(shè)計(jì)師選擇了毫不相關(guān)的字體及顏色,然后又加上背景及線條,希望使其成為一個(gè)有機(jī)的整體。其實(shí),設(shè)計(jì)沒必要搞得這么復(fù)雜。修改后的設(shè)計(jì),文字內(nèi)容并沒有改變,但整個(gè)版面分成兩個(gè)區(qū)域,圖片及文字各占據(jù)一個(gè),出來的效果就是漂亮、干凈、整潔,所用的時(shí)間精力也不多,而且這種構(gòu)圖及手法也可以一用再用。讓我們深入分析這兩者的設(shè)計(jì)過程。
吃力的設(shè)計(jì):
幾經(jīng)辛苦,這個(gè)設(shè)計(jì)完成了。每一步似乎都有理有據(jù),設(shè)計(jì)師也將協(xié)調(diào)、對比、風(fēng)格一致這些理論緊記于心,但老實(shí)說,出來的效果并不理想,從視覺上說也不吸引。為什么?因?yàn)樵O(shè)計(jì)師是事先想好了某種風(fēng)格,然后強(qiáng)加在版面上,但偏偏主題元素又與這種設(shè)想的風(fēng)格不一致,強(qiáng)加未遂。我們再來總結(jié)一下這個(gè)設(shè)計(jì):
在這個(gè)設(shè)計(jì)中,設(shè)計(jì)師主要采用了Round Bauhaus Demi字體,這種字體是一種有趣新奇的字體——處處呈現(xiàn)一種圓弧的感覺。然而,為了展現(xiàn)這種字體圓形的特點(diǎn),我們需要將字體顯得比較大,字母間距緊密,并且是要小寫字母(上圖),但問題是,設(shè)計(jì)師在設(shè)定介紹文字時(shí),將其全部設(shè)為大寫——這個(gè)時(shí)候,字體的直線感壓抑了圓弧感,而且下面的文字尺寸又很小,其文字塊邊緣呈現(xiàn)向兩邊發(fā)散的直線視覺感(見上圖箭頭線段),這樣的文字排版削弱了字體特有的風(fēng)格,圓弧不見了,我們感覺到的只是凌亂的字體元素。
設(shè)計(jì)師深明在風(fēng)格中細(xì)節(jié)必須呼應(yīng)的重要性,所以他將一些地方設(shè)為圓角來呼應(yīng)字體的特點(diǎn)(上圖)。問題是,它還是不夠圓,出來的效果仍然是直線占支配地位。特別是上圖右所示的,我們可以觀察到,這里顯得非常局促,讀者在觀看時(shí),看得的并不是一個(gè)整體,而是還得仔細(xì)區(qū)別你這細(xì)小的區(qū)域——竟然有4個(gè)步驟讓讀者去練眼力!毫無必要的設(shè)計(jì)。
分析完這個(gè)設(shè)計(jì),讓我們看一下懶人是如何設(shè)計(jì)這個(gè)項(xiàng)目的。
懶人的設(shè)計(jì):
修改后的設(shè)計(jì),圖片異常搶眼,元素與版面風(fēng)格配合,名稱的文字同樣醒目張揚(yáng),出來的效果漂亮清晰,為什么這種簡簡單單的設(shè)計(jì)手法卻更能發(fā)揮作用?
通過大小及色值來區(qū)分:
精心設(shè)計(jì)的文字包含了四個(gè)視覺引導(dǎo)。從位置來說,呈現(xiàn)由上至下的引導(dǎo);從字體尺寸來說,是由大至小的引導(dǎo);從字體樣式來說,是由粗至細(xì)的引導(dǎo);從顏色明暗來說,是由暗到亮的引導(dǎo)。這種特點(diǎn)在這個(gè)設(shè)計(jì)中發(fā)揮重要的作用,你的眼睛很自然的由一個(gè)元素去到下一個(gè)元素,毫無阻礙。
介紹文字采用全大寫,字母間距及行距都設(shè)得非常緊密(小寫字母很難呈現(xiàn)這種緊縮的排列),形成了很短的文字行。文字整體呈現(xiàn)一種精細(xì)、垂直的視覺特點(diǎn)。文字放在左邊,使右邊留出較大的白色區(qū)域,這個(gè)區(qū)域呈現(xiàn)視覺張力,讓人的眼睛不由自主地移到文字上來。
變化:
懶人就算面對一個(gè)系列的設(shè)計(jì),也是氣定神閑,以不變應(yīng)萬變,談笑間就能出色完成任務(wù)!
無論上下左右,怎么放都讓人滿意。因?yàn)閳D片及元素都自成一體,互不干擾,文字放在上面, 效果與放在下面一樣出色。水平放置,同樣顯得優(yōu)雅精美。其實(shí)這是顏色的功勞,不同的圖片要用不同的顏色,文字顏色取自于圖片中,這樣文字與圖片既分離,但又有聯(lián)系,整體總是顯得和諧一致。當(dāng)然,還要記住視覺引導(dǎo):名稱要重點(diǎn)強(qiáng)調(diào),而其它的字體則低調(diào)處理。
上面幾個(gè)修改后的字體及顏色是我們自由選擇的,如果客戶就認(rèn)定最初的那種字體及綠色他最喜歡,認(rèn)為最能體現(xiàn)室內(nèi)裝修的風(fēng)格,非得要用回原來的那種字體及綠色。怎么辦?不用一頭撞墻,認(rèn)為自己如果不是有其它的人生際遇否則一早就成為一個(gè)藝術(shù)家的客戶大有人在,反正我們一樣應(yīng)付自如:
仍然保留簡潔的構(gòu)圖,版面仍然是圖片及文字各就各位;
我們采用原來的字體,但正如我們在上面所分析的,我們會采用小寫字母(就算是第一個(gè)字母也是小寫),并且采用細(xì)體,這樣的修整,能使包豪斯的字體風(fēng)格得到最大程度的體現(xiàn),文字呈現(xiàn)更豐富的特色。
保留字體引導(dǎo)的特性:仍然采用上至下,大至小,暗到亮。在這個(gè)設(shè)計(jì)中,字母不需要粗細(xì)變化。
保留對齊特性:包豪斯這種字體結(jié)構(gòu)決定了你很難將它們的字母緊縮排列,所以也意味著我們很難象上面一樣,將文字整體設(shè)置成一個(gè)具有強(qiáng)烈視覺效果的列狀區(qū)域。我們需要隨機(jī)應(yīng)變:調(diào)整成右對齊,將名稱的尺寸盡量拉大,然后將字母g突出右邊的空白區(qū)域,起到強(qiáng)調(diào)的作用。作用是讓文字整體搭配得更密切(想象一下,如果g不突出來,名稱與下方的文字會顯得很松散),當(dāng)然,也使版面更活。
加深綠色:加深綠色的作用是減少與紅色形成過于強(qiáng)烈的對比,現(xiàn)在紅色及綠色的份量大概平等,起到恰當(dāng)?shù)幕パa(bǔ)關(guān)系,而沒有出現(xiàn)誰要控制誰的現(xiàn)象。
本文所用顏色數(shù)值如下:
本文地址:http://m.likemindfilms.com/tutorial/di1418.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏