“懶人”設(shè)計(jì)思維
2013-03-01|HiShop
導(dǎo)讀: 大多數(shù)的設(shè)計(jì)都會(huì)同時(shí)涉及到文字與圖片,這兩者的差異是非常大的,也很難事先預(yù)料到兩者一起使用時(shí)的互相影響,圖片與文字如何搭配得漂亮,往往也是設(shè)計(jì)師的一個(gè)很大的挑戰(zhàn),一不留神,就會(huì)造成風(fēng)格矛盾丶細(xì)節(jié)沖突,對(duì)比錯(cuò)誤。而且就算有一次給你做得不錯(cuò)...
大多數(shù)的設(shè)計(jì)都會(huì)同時(shí)涉及到文字與圖片,這兩者的差異是非常大的,也很難事先預(yù)料到兩者一起使用時(shí)的互相影響,圖片與文字如何搭配得漂亮,往往也是設(shè)計(jì)師的一個(gè)很大的挑戰(zhàn),一不留神,就會(huì)造成風(fēng)格矛盾丶細(xì)節(jié)沖突,對(duì)比錯(cuò)誤。而且就算有一次給你做得不錯(cuò),但下一次你面對(duì)另一個(gè)新項(xiàng)目時(shí),你還是會(huì)為此而抓狂。
一些設(shè)計(jì)師在設(shè)計(jì)時(shí)往往會(huì)出現(xiàn)“設(shè)計(jì)過(guò)度”的現(xiàn)象。更好的方式就是象一個(gè)懶人的思維一樣,圖片放在這里,文字放在那里,搞定!關(guān)鍵是讓每一個(gè)元素都簡(jiǎn)單清晰,讓兩者的互相影響減至最低,而且這種設(shè)計(jì)手法還可以讓你一再使用,永不過(guò)時(shí)。讓我們看具體的例子吧:
這是一家室內(nèi)家居專業(yè)攝影工作室的冊(cè)子封面,修改前的設(shè)計(jì)是一種“吃力”的設(shè)計(jì)。 設(shè)計(jì)師選擇了毫不相關(guān)的字體及顏色,然后又加上背景及線條,希望使其成為一個(gè)有機(jī)的整體。其實(shí),設(shè)計(jì)沒(méi)必要搞得這么復(fù)雜!
修改后的設(shè)計(jì),文字內(nèi)容并沒(méi)有改變,但整個(gè)版面分成兩個(gè)區(qū)域,圖片及文字各占據(jù)一個(gè),出來(lái)的效果就是漂亮丶干凈丶整潔,所用的時(shí)間精力也不多,而且這種構(gòu)圖及手法也可以一用再用!
讓我們深入分析這兩者的設(shè)計(jì)過(guò)程。
吃力的設(shè)計(jì):
幾經(jīng)辛苦,這個(gè)設(shè)計(jì)完成了。每一步似乎都有理有據(jù),設(shè)計(jì)師也將協(xié)調(diào)丶對(duì)比丶風(fēng)格一致這些理論緊記于心,但老實(shí)說(shuō),出來(lái)的效果并不理想,從視覺(jué)上說(shuō)也不吸引。為什么?因?yàn)樵O(shè)計(jì)師是事先想好了某種風(fēng)格,然后強(qiáng)加在版面上,但偏偏主題元素又與這種設(shè)想的風(fēng)格不一致,強(qiáng)加未遂。
我們?cè)賮?lái)總結(jié)一下這個(gè)設(shè)計(jì):
在這個(gè)設(shè)計(jì)中,設(shè)計(jì)師主要采用了Round Bauhaus Demi字體,這種字體是一種有趣新奇的字體——處處呈現(xiàn)一種圓弧的感覺(jué)。然而,為了展現(xiàn)這種字體圓形的特點(diǎn),我們需要將字體顯得比較大,字母間距緊密,并且是要小寫字母(上圖),但問(wèn)題是,設(shè)計(jì)師在設(shè)定介紹文字時(shí),將其全部設(shè)為大寫——這個(gè)時(shí)候,字體的直線感壓抑了圓弧感,而且下面的文字尺寸又很小,其文字塊邊緣呈現(xiàn)向兩邊發(fā)散的直線視覺(jué)感(見(jiàn)上圖箭頭線段),這樣的文字排版削弱了字體特有的風(fēng)格,圓弧不見(jiàn)了,我們感覺(jué)到的只是凌亂的字體元素。
設(shè)計(jì)師深明在風(fēng)格中細(xì)節(jié)必須呼應(yīng)的重要性,所以他將一些地方設(shè)為圓角來(lái)呼應(yīng)字體的特點(diǎn)(上圖)。問(wèn)題是,它還是不夠圓,出來(lái)的效果仍然是直線占支配地位。特別是上圖右所示的,我們可以觀察到,這里顯得非常局促,讀者在觀看時(shí),看得的并不是一個(gè)整體,而是還得仔細(xì)區(qū)別你這細(xì)小的區(qū)域——竟然有4個(gè)“步驟”讓讀者去練眼力!毫無(wú)必要的設(shè)計(jì)。
分析完這個(gè)設(shè)計(jì),讓我們看一下“懶人”是如何設(shè)計(jì)這個(gè)項(xiàng)目的。
“懶人”的設(shè)計(jì):
修改后的設(shè)計(jì),圖片異常搶眼,元素與版面風(fēng)格配合,名稱的文字同樣醒目張揚(yáng),出來(lái)的效果漂亮清晰,為什么這種簡(jiǎn)簡(jiǎn)單單的設(shè)計(jì)手法卻更能發(fā)揮作用?
通過(guò)大小及色值來(lái)區(qū)分:
精心設(shè)計(jì)的文字包含了四個(gè)視覺(jué)引導(dǎo)。從位置來(lái)說(shuō),呈現(xiàn)由上至下的引導(dǎo);從字體尺寸來(lái)說(shuō),是由大至小的引導(dǎo);從字體樣式來(lái)說(shuō),是由粗至細(xì)的引導(dǎo);從顏色明暗來(lái)說(shuō),是由暗到亮的引導(dǎo)。這種特點(diǎn)在這個(gè)設(shè)計(jì)中發(fā)揮重要的作用,你的眼睛很自然的由一個(gè)元素去到下一個(gè)元素,毫無(wú)阻礙。
介紹文字采用全大寫,字母間距及行距都設(shè)得非常緊密(小寫字母很難呈現(xiàn)這種緊縮的排列),形成了很短的文字行。文字整體呈現(xiàn)一種精細(xì)丶垂直的視覺(jué)特點(diǎn)。文字放在左邊,使右邊留出較大的白色區(qū)域,這個(gè)區(qū)域呈現(xiàn)視覺(jué)張力,讓人的眼睛不由自主地移到文字上來(lái)。
變化:
“懶人”就算面對(duì)一個(gè)系列的設(shè)計(jì),也是氣定神閑,以不變應(yīng)萬(wàn)變,談笑間就能出色完成任務(wù)!
無(wú)論上下左右,怎么放都讓人滿意。因?yàn)閳D片及元素都自成一體,互不干擾,文字放在上面, 效果與放在下面一樣出色。水平放置,同樣顯得優(yōu)雅精美。其實(shí)這是顏色的功勞,不同的圖片要用不同的顏色,文字顏色取自于圖片中,這樣文字與圖片既分離,但又有聯(lián)系,整體總是顯得和諧一致。當(dāng)然,還要記住視覺(jué)引導(dǎo):名稱要重點(diǎn)強(qiáng)調(diào),而其它的字體則低調(diào)處理。
上面幾個(gè)修改后的字體及顏色是我們自由選擇的,如果客戶就認(rèn)定最初的那種字體及綠色他最喜歡,認(rèn)為最能體現(xiàn)室內(nèi)裝修的風(fēng)格,非得要用回原來(lái)的那種字體及綠色。怎么辦?不用一頭撞墻,認(rèn)為自己如果不是有其它的人生際遇否則一早就成為一個(gè)藝術(shù)家的客戶大有人在,反正我們一樣應(yīng)付自如:
仍然保留簡(jiǎn)潔的構(gòu)圖,版面仍然是圖片及文字各就各位;
我們采用原來(lái)的字體,但正如我們?cè)谏厦嫠治龅?,我們?huì)采用小寫字母(就算是第一個(gè)字母也是小寫),并且采用細(xì)體,這樣的修整,能使包豪斯的字體風(fēng)格得到最大程度的體現(xiàn),文字呈現(xiàn)更豐富的特色。
保留字體引導(dǎo)的特性:仍然采用上至下,大至小,暗到亮。在這個(gè)設(shè)計(jì)中,字母不需要粗細(xì)變化。
保留對(duì)齊特性:包豪斯這種字體結(jié)構(gòu)決定了你很難將它們的字母緊縮排列,所以也意味著我們很難象上面一樣,將文字整體設(shè)置成一個(gè)具有強(qiáng)烈視覺(jué)效果的列狀區(qū)域。我們需要隨機(jī)應(yīng)變:調(diào)整成右對(duì)齊,將名稱的尺寸盡量拉大,然后將字母“g“突出右邊的空白區(qū)域,起到強(qiáng)調(diào)的作用。作用是讓文字整體搭配得更密切(想象一下,如果g不突出來(lái),名稱與下方的文字會(huì)顯得很松散),當(dāng)然,也使版面更活。
加深綠色:加深綠色的作用是減少與紅色形成過(guò)于強(qiáng)烈的對(duì)比,現(xiàn)在紅色及綠色的“份量”大概平等,起到恰當(dāng)?shù)幕パa(bǔ)關(guān)系,而沒(méi)有出現(xiàn)誰(shuí)要控制誰(shuí)的現(xiàn)象。
一些設(shè)計(jì)師在設(shè)計(jì)時(shí)往往會(huì)出現(xiàn)“設(shè)計(jì)過(guò)度”的現(xiàn)象。更好的方式就是象一個(gè)懶人的思維一樣,圖片放在這里,文字放在那里,搞定!關(guān)鍵是讓每一個(gè)元素都簡(jiǎn)單清晰,讓兩者的互相影響減至最低,而且這種設(shè)計(jì)手法還可以讓你一再使用,永不過(guò)時(shí)。讓我們看具體的例子吧:
這是一家室內(nèi)家居專業(yè)攝影工作室的冊(cè)子封面,修改前的設(shè)計(jì)是一種“吃力”的設(shè)計(jì)。 設(shè)計(jì)師選擇了毫不相關(guān)的字體及顏色,然后又加上背景及線條,希望使其成為一個(gè)有機(jī)的整體。其實(shí),設(shè)計(jì)沒(méi)必要搞得這么復(fù)雜!
修改后的設(shè)計(jì),文字內(nèi)容并沒(méi)有改變,但整個(gè)版面分成兩個(gè)區(qū)域,圖片及文字各占據(jù)一個(gè),出來(lái)的效果就是漂亮丶干凈丶整潔,所用的時(shí)間精力也不多,而且這種構(gòu)圖及手法也可以一用再用!
讓我們深入分析這兩者的設(shè)計(jì)過(guò)程。
吃力的設(shè)計(jì):
幾經(jīng)辛苦,這個(gè)設(shè)計(jì)完成了。每一步似乎都有理有據(jù),設(shè)計(jì)師也將協(xié)調(diào)丶對(duì)比丶風(fēng)格一致這些理論緊記于心,但老實(shí)說(shuō),出來(lái)的效果并不理想,從視覺(jué)上說(shuō)也不吸引。為什么?因?yàn)樵O(shè)計(jì)師是事先想好了某種風(fēng)格,然后強(qiáng)加在版面上,但偏偏主題元素又與這種設(shè)想的風(fēng)格不一致,強(qiáng)加未遂。
我們?cè)賮?lái)總結(jié)一下這個(gè)設(shè)計(jì):
在這個(gè)設(shè)計(jì)中,設(shè)計(jì)師主要采用了Round Bauhaus Demi字體,這種字體是一種有趣新奇的字體——處處呈現(xiàn)一種圓弧的感覺(jué)。然而,為了展現(xiàn)這種字體圓形的特點(diǎn),我們需要將字體顯得比較大,字母間距緊密,并且是要小寫字母(上圖),但問(wèn)題是,設(shè)計(jì)師在設(shè)定介紹文字時(shí),將其全部設(shè)為大寫——這個(gè)時(shí)候,字體的直線感壓抑了圓弧感,而且下面的文字尺寸又很小,其文字塊邊緣呈現(xiàn)向兩邊發(fā)散的直線視覺(jué)感(見(jiàn)上圖箭頭線段),這樣的文字排版削弱了字體特有的風(fēng)格,圓弧不見(jiàn)了,我們感覺(jué)到的只是凌亂的字體元素。
設(shè)計(jì)師深明在風(fēng)格中細(xì)節(jié)必須呼應(yīng)的重要性,所以他將一些地方設(shè)為圓角來(lái)呼應(yīng)字體的特點(diǎn)(上圖)。問(wèn)題是,它還是不夠圓,出來(lái)的效果仍然是直線占支配地位。特別是上圖右所示的,我們可以觀察到,這里顯得非常局促,讀者在觀看時(shí),看得的并不是一個(gè)整體,而是還得仔細(xì)區(qū)別你這細(xì)小的區(qū)域——竟然有4個(gè)“步驟”讓讀者去練眼力!毫無(wú)必要的設(shè)計(jì)。
分析完這個(gè)設(shè)計(jì),讓我們看一下“懶人”是如何設(shè)計(jì)這個(gè)項(xiàng)目的。
“懶人”的設(shè)計(jì):
修改后的設(shè)計(jì),圖片異常搶眼,元素與版面風(fēng)格配合,名稱的文字同樣醒目張揚(yáng),出來(lái)的效果漂亮清晰,為什么這種簡(jiǎn)簡(jiǎn)單單的設(shè)計(jì)手法卻更能發(fā)揮作用?
通過(guò)大小及色值來(lái)區(qū)分:
精心設(shè)計(jì)的文字包含了四個(gè)視覺(jué)引導(dǎo)。從位置來(lái)說(shuō),呈現(xiàn)由上至下的引導(dǎo);從字體尺寸來(lái)說(shuō),是由大至小的引導(dǎo);從字體樣式來(lái)說(shuō),是由粗至細(xì)的引導(dǎo);從顏色明暗來(lái)說(shuō),是由暗到亮的引導(dǎo)。這種特點(diǎn)在這個(gè)設(shè)計(jì)中發(fā)揮重要的作用,你的眼睛很自然的由一個(gè)元素去到下一個(gè)元素,毫無(wú)阻礙。
介紹文字采用全大寫,字母間距及行距都設(shè)得非常緊密(小寫字母很難呈現(xiàn)這種緊縮的排列),形成了很短的文字行。文字整體呈現(xiàn)一種精細(xì)丶垂直的視覺(jué)特點(diǎn)。文字放在左邊,使右邊留出較大的白色區(qū)域,這個(gè)區(qū)域呈現(xiàn)視覺(jué)張力,讓人的眼睛不由自主地移到文字上來(lái)。
變化:
“懶人”就算面對(duì)一個(gè)系列的設(shè)計(jì),也是氣定神閑,以不變應(yīng)萬(wàn)變,談笑間就能出色完成任務(wù)!
無(wú)論上下左右,怎么放都讓人滿意。因?yàn)閳D片及元素都自成一體,互不干擾,文字放在上面, 效果與放在下面一樣出色。水平放置,同樣顯得優(yōu)雅精美。其實(shí)這是顏色的功勞,不同的圖片要用不同的顏色,文字顏色取自于圖片中,這樣文字與圖片既分離,但又有聯(lián)系,整體總是顯得和諧一致。當(dāng)然,還要記住視覺(jué)引導(dǎo):名稱要重點(diǎn)強(qiáng)調(diào),而其它的字體則低調(diào)處理。
上面幾個(gè)修改后的字體及顏色是我們自由選擇的,如果客戶就認(rèn)定最初的那種字體及綠色他最喜歡,認(rèn)為最能體現(xiàn)室內(nèi)裝修的風(fēng)格,非得要用回原來(lái)的那種字體及綠色。怎么辦?不用一頭撞墻,認(rèn)為自己如果不是有其它的人生際遇否則一早就成為一個(gè)藝術(shù)家的客戶大有人在,反正我們一樣應(yīng)付自如:
仍然保留簡(jiǎn)潔的構(gòu)圖,版面仍然是圖片及文字各就各位;
我們采用原來(lái)的字體,但正如我們?cè)谏厦嫠治龅?,我們?huì)采用小寫字母(就算是第一個(gè)字母也是小寫),并且采用細(xì)體,這樣的修整,能使包豪斯的字體風(fēng)格得到最大程度的體現(xiàn),文字呈現(xiàn)更豐富的特色。
保留字體引導(dǎo)的特性:仍然采用上至下,大至小,暗到亮。在這個(gè)設(shè)計(jì)中,字母不需要粗細(xì)變化。
保留對(duì)齊特性:包豪斯這種字體結(jié)構(gòu)決定了你很難將它們的字母緊縮排列,所以也意味著我們很難象上面一樣,將文字整體設(shè)置成一個(gè)具有強(qiáng)烈視覺(jué)效果的列狀區(qū)域。我們需要隨機(jī)應(yīng)變:調(diào)整成右對(duì)齊,將名稱的尺寸盡量拉大,然后將字母“g“突出右邊的空白區(qū)域,起到強(qiáng)調(diào)的作用。作用是讓文字整體搭配得更密切(想象一下,如果g不突出來(lái),名稱與下方的文字會(huì)顯得很松散),當(dāng)然,也使版面更活。
加深綠色:加深綠色的作用是減少與紅色形成過(guò)于強(qiáng)烈的對(duì)比,現(xiàn)在紅色及綠色的“份量”大概平等,起到恰當(dāng)?shù)幕パa(bǔ)關(guān)系,而沒(méi)有出現(xiàn)誰(shuí)要控制誰(shuí)的現(xiàn)象。
推薦閱讀
- 1 常見(jiàn)b2c網(wǎng)站購(gòu)物車的設(shè)計(jì)
- 2 電商思維九轉(zhuǎn)
- 3 游戲思維觀電商——游戲四大驅(qū)動(dòng)力解讀電商營(yíng)銷
- 4 如何做好B2B行業(yè)網(wǎng)站頁(yè)面內(nèi)容設(shè)計(jì)留住用戶
- 5 服飾行業(yè)淘寶商城店鋪首頁(yè)設(shè)計(jì)報(bào)告
- 6 拋鉆引玉,關(guān)于優(yōu)惠券的模塊設(shè)計(jì)
- 7 電商量化管理之設(shè)計(jì)崗位績(jī)效考核表
- 8 從設(shè)計(jì)師的角度去開車,你會(huì)發(fā)現(xiàn)與眾不同!
- 9 物流公司管理
- 10 理性思考設(shè)計(jì)店鋪首頁(yè),把流量利用起來(lái)才是王道!!附實(shí)例,高清無(wú)