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

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

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

然而，人是很bitch的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在圖片顏色較淺的地方

用黑色的字輕輕覆蓋。

像上面第1張海報(bào)那樣，

蓋在圖片上的字

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

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

先看幾個(gè)雜志海報(bào)上的案例

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

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

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

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

  像X這種符號(hào)壓在背景上效果也不錯(cuò)。

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

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

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

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

［譯者］

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

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

先來看一些海報(bào)栗子

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

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

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

眾所周知，對(duì)齊文字是常識(shí)。

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

比如上邊的栗子，按照人們?cè)谧x取時(shí)視線的順序，從右上到左下，

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

比對(duì)齊文字更活潑。

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

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

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

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

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

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

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

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

1.搖滾重口style

潑墨效果，黑白圖片

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

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

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

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

總結(jié)一下～

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

如果本末倒置，

因?yàn)椤?strong>我想用這種設(shè)計(jì)風(fēng)格”而刻意為了某種風(fēng)格而設(shè)計(jì)就大錯(cuò)特錯(cuò)了！

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

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

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

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

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

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

比如:

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

這個(gè)設(shè)計(jì)的對(duì)象人群是誰

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

圖片用了什么樣子的

最有個(gè)性的點(diǎn)是什么

不流俗的地方是什么

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

用了什么色系

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

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

用了怎樣的字體？

等等……

[譯者]

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

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

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