你應(yīng)掌握的11個創(chuàng)新布局技法

2014-4-28    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   m.820esy.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ā)到您的郵箱中,   請點這里

越來越多的網(wǎng)站設(shè)計師開始知道,進(jìn)行布局設(shè)計時需要用到柵格線。但是對于老手來說,柵格線不是唯一的可選項,這些老手經(jīng)驗豐富,基礎(chǔ)扎實,他們懂得怎樣去創(chuàng)新,懂得用新穎的設(shè)計完成目標(biāo)。條條大路通羅馬,他們會憑借自己的感覺去摸索成功的方式,而最終的效果卻更出彩。

柵格線與界面設(shè)計的關(guān)系可謂源遠(yuǎn)流長,對柵格線應(yīng)用的熟練程度可以衡量一名UI設(shè)計師的水平。藍(lán)藍(lán)設(shè)計今天分享11個創(chuàng)新布局技法,廢話不多說,看看這些UI設(shè)計師們是如何打破規(guī)則的吧。

1. 階梯狀布局

cannes-2013-landscape-poster-n1445-1

階梯狀的字體布局富有后現(xiàn)代主義氣息,配合相關(guān)的圖像,能夠達(dá)成與眾不同的視覺效果。

2. 適度傾斜

1610_full

性感的翹臀?性感的翹字?個性十足,遐想連篇。

3. 環(huán)繞形布局

wrap

更好的圖文結(jié)合、打造視覺焦點、充分利用空間,挖掘柵格線系統(tǒng)的潛力。

4. 插畫元素

Illustrated

柵格式布局太呆板?試著加入一點插畫元素吧。讓頁面看起來更具娛樂性,更好的平衡美學(xué)與功能。

5. 重疊

Screen Shot 2013-09-25 at 2.42.53 PM

在Frank Chimero的動態(tài)個人網(wǎng)站中,他采用了圖像重疊的手段,而非傳統(tǒng)的柵格線布局。令人印象深刻。

6. 利用頁面邊緣

Brochure-Design-005

不要為了留邊距而留邊距——可以做點小實驗,讓文本超出頁面邊緣,然后用成沓的印刷品來呈遞作品。

7. 妙用形狀

bloodland

銳利的矩形配合以文本,看起來像是玻璃碎片,暗含一種暴力、興奮的因素。

8. 不對稱設(shè)計

bottom

不對稱界面設(shè)計讓人感覺非常自然、淳樸、無修飾。比如說這罐蜂蜜,感覺就很天然。

9. 拼貼畫

invitation

這則可愛的婚禮邀請函感覺非常人性化、有手工質(zhì)感,濃厚的拼貼風(fēng)格。

10. 加入引用

pull-quote-1

用戶對一成不變的閱讀節(jié)奏感到厭倦怎么辦?那就試著打破節(jié)奏,給用戶一點驚喜,引用就是一個好方法。尤其是在大塊大塊的文本信息中,加入引用可以適度緩解多欄布局的閱讀節(jié)奏感,讓用戶讀起來更舒心。

11. 手繪字體

chipotle

適度添加手繪風(fēng)格的字體,讓你的UI設(shè)計更加有趣,別有風(fēng)味,而不是一本正經(jīng)。

這就是突破柵格線布局設(shè)計的一些技法,大家可以舉一反三,在熟悉基礎(chǔ)的前提下,突破原則,也突破自我!

分享本文至:

日歷

鏈接

個人資料

存檔