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

來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design

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

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

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

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

 

 

二、名片：?jiǎn)渭冇晌淖謽?gòu)成的名片一樣可以設(shè)計(jì)得好看

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

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

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

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

三、烹飪配方卡片：用視覺(jué)來(lái)傳達(dá)營(yíng)養(yǎng)

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

修改前：簡(jiǎn)單地將各種用料用文字羅列出，顯得簡(jiǎn)單，但也顯得普通，如果我們用具體的圖片來(lái)表示出其用料，看看效果如何？

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

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

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

我們很喜歡DELO小島燒烤店的菜單，因?yàn)樵谖覀兊难壑兴@得很酷，它只是由黑白線條（沒(méi)有灰度）構(gòu)成，這些線條構(gòu)成了餐廳的標(biāo)志及名稱。既經(jīng)典又實(shí)惠的界面設(shè)計(jì)！

  

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

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

五、照片排版：團(tuán)隊(duì)精神

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

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

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

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

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

 

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

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