教你幾招實用的設(shè)計排版技巧

2014-3-7    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   www.bouu.cn  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點(diǎn)這里

一、門票:大門票產(chǎn)生大印象

讀者特利發(fā)給我們一張他設(shè)計的洗車券,這張洗車券是他希望為他兒子的游泳隊籌集在游泳池訓(xùn)練的各種費(fèi)用而舉行的一次洗車籌款,而它的有趣之處就在于其尺寸相當(dāng)搶眼:

b2b2e10a62824c03b78d83cf9c9ca765 設(shè)計中排版的技巧(一)

沒有人會對它視而不見:這張洗車券是一般門票尺寸的兩倍之大,界面設(shè)計起來也很容易,從視覺上也非常能吸引有興趣的消費(fèi)者。大圖片及大標(biāo)題使這張洗車券產(chǎn)生一張海報的視覺效果,效果當(dāng)然不錯。

b63e7815f4304a87afd094637459bf0e 設(shè)計中排版的技巧(一) 1610f5e3601149dea4d5bd46c5d699bf 設(shè)計中排版的技巧(一)

 

二、名片:單純由文字構(gòu)成的名片一樣可以設(shè)計得好看

無論是什么樣式,花些心思設(shè)計的名片總會比簡單將文字放上去的名片要傳達(dá)出更多的東西,我們?nèi)绾螌⒁粡垎渭冇晌淖謽?gòu)成的名片設(shè)計得更漂亮?

f4611505409a459d96046ec7b69100d5 設(shè)計中排版的技巧(一)

修改前的名片并沒有經(jīng)過“設(shè)計”,只是堆徹。就象你在屋里擺放家具一樣,只是將家具隨意擺到角落里,沒有精心的“布置”。這張名片,全部信息都一目了然,但這些信息并不吸引人,米色的背景也顯得很普通,就象在人群中的一個普通人,沒有人會注意你。


a67295b4e0a94292b6842b721bcbe45f 設(shè)計中排版的技巧(一)

而上圖,同樣的信息,卻是經(jīng)過設(shè)計的。自信的名字及職務(wù)在白色的卡片上左對齊,突出了Glorietta本人,而不是那個了無生氣的企業(yè)名稱,并且 該老兄是一名科技作家,有意識的排版突出了“寫作”這一抽象意義。較大的文字自動傳達(dá)有效的信息溝通。通過對比(大/小,襯線體,非襯線體)形成有組織、 有目的的構(gòu)成,傳達(dá)出一種簡樸的風(fēng)格,但并不乏味。如果還想更引人注目,可以象下面一樣更換一下顏色區(qū)域:


73b2a0cecca54c20aacbc2f3aabeb0cc 設(shè)計中排版的技巧(一)

—————————————————————————————————————————————

三、烹飪配方卡片:用視覺來傳達(dá)營養(yǎng)

你如何設(shè)計一張與烹飪配方相關(guān)的宣傳卡片?不要將那些用料簡單地用文字列出,顯示它們!這個方式適用于任何指引性的ui設(shè)計項目。

db8949f9ea3842988fb4472f832eddf8 設(shè)計中排版的技巧(一)

修改前:簡單地將各種用料用文字羅列出,顯得簡單,但也顯得普通,如果我們用具體的圖片來表示出其用料,看看效果如何?


036acce2174c4c0c8d3bfc8fa20425bb 設(shè)計中排版的技巧(一)

修改后的版式充滿色彩及味道!關(guān)鍵是它還顯得獨(dú)特。雖然你也知道芫荽是什么東西,但用圖片表示出來后,通過視覺輔助,我們對這道菜式會比單純看文字 有更多的味覺想象。留意我們的各種配料都是在白色背景上干凈地呈現(xiàn)出來,每一種都加上一些陰影,進(jìn)一步加強(qiáng)了視覺的真實性??戳诵薷暮蟮目ㄆ?,你是不是已 經(jīng)食指大動?

—————————————————————————————————————————————

四、標(biāo)志:線條構(gòu)成顯得更酷

我們很喜歡DELO小島燒烤店的菜單,因為在我們的眼中它顯得很酷,它只是由黑白線條(沒有灰度)構(gòu)成,這些線條構(gòu)成了餐廳的標(biāo)志及名稱。既經(jīng)典又實惠的界面設(shè)計!

0e341f2f18a54a239e4138a33f1186fd 設(shè)計中排版的技巧(一) bf672115ee5c46829a7de2b38265c127 設(shè)計中排版的技巧(一) 801252e385be4b24a06af01917669efb 設(shè)計中排版的技巧(一)

(上圖是在Indesign軟件中制作,但其描繪功能與AI基本相同,或其它的矢量軟件均一樣可輕易制作)

—————————————————————————————————————————————

五、照片排版:團(tuán)隊精神

你有一個團(tuán)隊,但卻沒有一張合影照,那如何在設(shè)計中顯示團(tuán)隊精神?我們將個人照片并列,但選擇一個人作為其中的領(lǐng)頭人物,這種設(shè)計既靈活又給人印象深刻。

5a567fc1fdd042159ebdead39fa3b8e3 設(shè)計中排版的技巧(一)

合影照片當(dāng)然很適合表現(xiàn)團(tuán)隊精神,但它又會限制表現(xiàn)每個人的個性。更加靈活的選擇是將每個人的單獨(dú)照片合起來形成一個令人印象深刻的排版。如果照相時的背景你可以選擇,盡可能讓每個人的背景及燈光接近,照的時間不要僅照頭部,最好拍到整個上身,照片清晰度要高。


e0a4336fc072465b853785eaf4bfbd80 設(shè)計中排版的技巧(一)

最后,這個學(xué)生會成員的ui設(shè)計就變成上圖這樣,其中學(xué)生會主席的形象顯得更加重要且成為一個焦點(diǎn)。該設(shè)計主要通過三個步驟即可完成:


e05176905b7b48f5987fb527ac12902f 設(shè)計中排版的技巧(一)

第一步是將照片剪切得基本一致,頭部尺寸及眼睛水平線都應(yīng)該盡可能一樣(當(dāng)然,由于各人姿態(tài)不一樣,允許有一些差異)。


a279048185b14918bb57eefe5ec82af4 設(shè)計中排版的技巧(一)

一旦定下各人的尺寸后,最重要的第一個人物不要剪切,但去掉其身后的背景。


e528e0153ca94f1a925b9783f0d95ccd 設(shè)計中排版的技巧(一) 2f36eba463554dd582d14dba5e83c136 設(shè)計中排版的技巧(一)

富沖擊力的排版使這張學(xué)生會成員介紹的界面設(shè)計顯得非常突出,它比普通的那種傻乎乎的團(tuán)隊照效果更好,因為設(shè)計師可以靈活安排其中每個人的照片,使到整 體既具有一種團(tuán)隊的氛圍,但同時又能顯示出每個人的特性。使這些學(xué)生與觀看的人在情感上距離更近。這樣的排版另外的好處就是能夠讓你在版面空間的安排上更 靈活,并且有更多的空間給你的放置標(biāo)題及文字。

 本文顏色數(shù)值如下:

9d2616e1518f42e3a436225d64c4e82c 設(shè)計中排版的技巧(一)

分享本文至:

日歷

鏈接

個人資料

存檔