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

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

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

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

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

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

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

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

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

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

 

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

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

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

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


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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

五、照片排版:團隊精神

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

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

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


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

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


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

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


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

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


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

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

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

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔