網(wǎng)頁設(shè)計如何實現(xiàn)“雜志海報風(fēng)”

雜志海報風(fēng)一直是網(wǎng)頁上不太推薦的一種設(shè)計風(fēng)格。

且不說圖片加載的快慢，很多設(shè)計表現(xiàn)并不適合網(wǎng)頁這種瀏覽體制。

然而，人是很bitch的。

看慣了千篇一律的板塊布局，就想要嘗嘗口味豐富的海報風(fēng)。

作者并沒有直接給出很多雜志設(shè)計風(fēng)的網(wǎng)站

而只是通過分析精品紙媒的設(shè)計來尋找解決思路，伸手黨表介意哦

---------------------我是譯文分割線--------------------

大家好，還是我，quoitworks的村松。

在設(shè)計網(wǎng)頁的工作中，有時會遇到這樣的客戶：“可不可以設(shè)計成像雜志海報那種風(fēng)格”。

大量的網(wǎng)頁設(shè)計工作中，我們可能時時刻刻關(guān)注布局，關(guān)注用戶體驗，關(guān)注網(wǎng)頁視線的導(dǎo)向，

對這些的過度關(guān)注很容易忽視一個網(wǎng)頁或者網(wǎng)站在視覺上的生氣和活力。

從客戶的角度來看，從他們出生開始，畢竟看紙媒印刷品比看網(wǎng)頁的年頭要長。

比如海報，雜志（網(wǎng)頁上來說，相當(dāng)于專題頁面，商品詳情頁，主視覺頁面等等。不是搜索頁面哦）

所以這一期，我們研究下如果客戶需要在商品詳情頁、特輯頁面或者about頁面上

設(shè)計成雜志海報風(fēng)的話該如何巧妙的完成任務(wù)。

我收集了很多紙媒設(shè)計精品，先從他們?nèi)胧挚茨懿荒苡袔椭?/strong>

一不小心上了很多圖，那就廢話少說來看圖吧，如果因為圖太多機(jī)器down掉表打我啊。

把文字稍稍壓在圖片上的手法，最近網(wǎng)頁設(shè)計上也常有看到。

比如這個網(wǎng)站：http://kyu-plus.jp/info/shop.html

在圖片顏色較淺的地方

用黑色的字輕輕覆蓋。

像上面第1張海報那樣，

蓋在圖片上的字

用反色白色效果應(yīng)該也不賴。

如果是網(wǎng)頁文字的話怕是很難實現(xiàn)。

先看幾個雜志海報上的案例

以上都是把淡色或熒光色靈活鋪設(shè)在背景上的印刷制品效果。

用在網(wǎng)站上的話，可以把主廣告詞或者第一標(biāo)題用英語像花紋般大大的鋪上去。

文字字號已經(jīng)很大了，所以盡量用能融進(jìn)背景的顏色而不是過于搶眼的顏色。

［譯者：其實就是要有透明度，不能傻傻實實的放上去，要的效果就是既醒目又要融于背景］

  像X這種符號壓在背景上效果也不錯。

網(wǎng)頁設(shè)計中還是比較忌諱和害怕豎排文字的。

但是根據(jù)情況的不同，適當(dāng)嘗試一下豎排文字也許會有不一樣的驚喜？

當(dāng)然也要看情況。比如下邊這個網(wǎng)站的豎排給人感覺就不錯

http://www.rakuten.ne.jp/gold/sparkler/about.html

［譯者］

作為同樣有豎排傳統(tǒng)習(xí)慣的中文，在需要一些傳統(tǒng)風(fēng)的網(wǎng)頁可以嘗試豎排。

但最好是文字量較少的標(biāo)題。

先來看一些海報栗子

其實一般在網(wǎng)頁上很少把標(biāo)題放這么大

但是把標(biāo)題按照它表達(dá)的內(nèi)容方向進(jìn)行一番設(shè)計的話，的確很有雜志海報風(fēng)。

這是不常用的表現(xiàn)手法，實現(xiàn)難度也大。但是一旦做出來效果很不錯。

眾所周知，對齊文字是常識。

但有時，根據(jù)人類視線移動的規(guī)律，可以故意不對齊文字。

比如上邊的栗子，按照人們在讀取時視線的順序，從右上到左下，

文字也按照這個順序排列而非對齊，也沒有影響瀏覽閱讀。

比對齊文字更活潑。

特別注意：嘗試這種做法時一定要好好研究下人們視線移動的規(guī)律，亂放一氣只會被領(lǐng)導(dǎo)罵的，呵呵。

通過控制文字的大小、粗細(xì)來突顯標(biāo)題是比較基本的做法。

像上邊，把文字放在正中央，放大到覆蓋整個圖片的做法會更有海報風(fēng)的效果。

據(jù)說當(dāng)下流行的扁平化設(shè)計理念是瑞士極簡風(fēng)的復(fù)活。

所以，如果嘗試扁平化設(shè)計，與其模仿國外不知名的扁平化設(shè)計，

還不如好好參考下極簡扁平化的鼻祖-瑞士國際極簡風(fēng)（swissted）。

這是瑞士國際極簡風(fēng)的朋克搖滾show的海報網(wǎng)站 http://www.swissted.com/。

［譯者］  swissted是一位名叫Mike Joyce的平面設(shè)計師在上世紀(jì)八十年代嘗試的一種風(fēng)格。他把搖滾秀的海報用瑞士極簡風(fēng)進(jìn)行設(shè)計，把兩種怎么看都不搭邊的風(fēng)格元素糅合在一起，在設(shè)計愛好者和音樂發(fā)燒友里引起極大好評，并由此推廣。很多評論認(rèn)為，swissted風(fēng)格是當(dāng)下的扁平化設(shè)計的鼻祖，是對它的復(fù)活。

1.搖滾重口style

潑墨效果，黑白圖片

把圖片處理成黑白做舊效果，覆蓋上熒光黃色的字讓整體不至于太沉重。

如果是幫朋友的硬核搖滾樂隊做網(wǎng)站的話，可以嘗試這種。

2.把圖摳出來像鋪花紋一樣

3.把文字沿著某種路徑彎彎曲曲的擺放，比較小清新的一種手法。

總結(jié)一下～

以上都是為了解決手頭的課題而提供的思路。

如果本末倒置，

因為“我想用這種設(shè)計風(fēng)格”而刻意為了某種風(fēng)格而設(shè)計就大錯特錯了！

個人看法，作為設(shè)計是這樣一個流程：

“出現(xiàn)問題→這個解決思路怎么樣？那個思路呢？”——try and error

一個不斷試錯的循環(huán)才是找出最合適設(shè)計的最快方法。

所以，為了鍛煉這種思路習(xí)慣，

平時看到好的設(shè)計時，

應(yīng)該多分析他的解決思路。

比如:

這到底是為了什么而設(shè)計的

這個設(shè)計的對象人群是誰

用了怎樣的設(shè)計解決思路

圖片用了什么樣子的

最有個性的點是什么

不流俗的地方是什么

它對瀏覽者的視線導(dǎo)向如何

用了什么色系

廣告詞用的怎么樣？很難懂嗎？

屬于哪個行業(yè)領(lǐng)域

用了怎樣的字體？

等等……

[譯者]

看到好的設(shè)計，最大吸取它精華的方式就是：學(xué)會他的解決思路。

正所謂授之以漁，而不是瘋狂吃魚。

這也是作者最想表達(dá)的一點，希望對大家有幫助。