【設(shè)計(jì)幫幫忙】第八期 - 《爸爸去哪兒》及《我是歌手》頁面設(shè)計(jì)分享

嘉賓：羅磊（湖南衛(wèi)視金鷹網(wǎng)設(shè)計(jì)師）
微博：素云閣TEARS
作品地址：http://www.uehtml.com/user/599/
個(gè)站：http://www.syg315.com/

我們剛拿到這個(gè)項(xiàng)目的時(shí)候，我們對《爸爸去哪兒》這個(gè)節(jié)目根本不了解?？赡艽蠹叶加X得湖南衛(wèi)視內(nèi)部的人員就肯定會(huì)有很多的素材或者說是什么，其實(shí)坑爹的是，就是我們這一撥人在湖南衛(wèi)視還沒確定好什么的時(shí)候就要我們開始做。剛開始的時(shí)候我們自己去做，什么素材都沒有，憑自己去發(fā)揮?！栋职秩ツ膬骸返膌ogo和頭圖是節(jié)目組提供的，頭圖我做了稍微的修改。節(jié)目組給過來就是這樣子的。

它整個(gè)天空看起來紅紅的，可能不太適合放在網(wǎng)頁上面，我就做了一些調(diào)整。節(jié)目組給的資料只有《爸爸去哪兒》的介紹，然后我整個(gè)都不知道《爸爸去哪兒》這個(gè)爸爸是去哪兒的，是干嘛的，聽過這么一段簡短的介紹說《爸爸去哪兒》是一段親子類的節(jié)目，是爸爸和小孩兒一起進(jìn)行鄉(xiāng)村體驗(yàn)的。然后我們產(chǎn)品經(jīng)理又畫了一個(gè)原型圖，就整個(gè)網(wǎng)站需要一些什么東西，需要表達(dá)一些什么東西。然后我就根據(jù)logo的一個(gè)色調(diào)，然后一個(gè)風(fēng)格和項(xiàng)目的介紹，親子關(guān)系，還有鄉(xiāng)村體驗(yàn)進(jìn)行一個(gè)思考。

我在做之前我會(huì)進(jìn)行很長時(shí)間的思考。我先會(huì)提取出項(xiàng)目需求的關(guān)鍵詞：親子和鄉(xiāng)村體驗(yàn)，爸爸去哪兒，然后把這三個(gè)詞進(jìn)行擴(kuò)展。

想到親子肯定會(huì)想到爸爸和小娃，小娃肯定是很活潑可愛的，爸爸和小娃在一起是很溫情的畫面。爸爸跟他*的差別就是媽媽就是屬于管得很嚴(yán)的，然后爸爸呢就是帶著小娃去玩啊，教育方式比較放得開一點(diǎn)。旅游，我們?nèi)ツ睦锫眯芯涂隙〞?huì)想到旅行包，我想好了去哪里以后肯定會(huì)去查地圖，查好了地圖會(huì)想乘什么樣的交通工具去，或者說我到了那里他們的風(fēng)土人情是什么樣子的，我會(huì)以什么樣的方式去那里游玩。

鄉(xiāng)村體驗(yàn)我可能看過了日本的那種動(dòng)畫片啊，就會(huì)比較夢幻，就會(huì)去想有鳥叫啊，有花啊，然后很天然，空氣很清新，整個(gè)一個(gè)很放松的形態(tài)，小山村里會(huì)有山啊會(huì)有水啊，會(huì)有一些小動(dòng)物啊，到了晚上走到田間的小路上就會(huì)有小青蛙啊蟋蟀啊有時(shí)候還會(huì)有老鼠啊這種。

通過這三個(gè)關(guān)鍵詞我這里有一個(gè)線條就是一個(gè)解放天性跟一個(gè)小山坡。解放天性是什么呢，就是我們的幻想力?，F(xiàn)在大人可能相對于小孩缺少的就是，可能我們學(xué)了很多東西我們就會(huì)被現(xiàn)實(shí)的理論限制住了，很多時(shí)候沒有小孩的那種想法。在山村呢，他的交通工具可能是那種自行車?yán)?。從這里提取出來的詞就是自行車，精靈，地圖，小山坡。這些就是我真?zhèn)€思考中得到的從關(guān)鍵詞里面衍生出來的設(shè)計(jì)元素，我就可以根據(jù)這些東西，朝著這些方面去找那個(gè)素材，同時(shí)根據(jù)這些關(guān)鍵詞去體會(huì)這個(gè)項(xiàng)目我要用什么樣的顏色去把它做出來。

我這里做了一個(gè)色調(diào)分析，《爸爸去哪兒》就是爸爸帶著小孩出去，他們那個(gè)小山坡上面有很多小野花，有這種紅色啊黃色啊。但是一般在大家的心目中看不出來這是紅色的花朵啊。然后那個(gè)爸爸跟小孩玩玩玩早上出去就是這種夕陽的顏色，就是這種很自然的顏色。然后到了山村肯定會(huì)有綠草藍(lán)天，所以根據(jù)關(guān)鍵詞我就想到我應(yīng)該用什么樣的顏色，然后根據(jù)我們這個(gè)logo去做。《爸爸去哪兒》片頭定格的那個(gè)畫面就是小孩跑爸爸跑，電視上它整個(gè)是一個(gè)動(dòng)畫的，所以看上去會(huì)很和諧，但是網(wǎng)頁它是不同的，更多時(shí)候這種粉粉的顏色放到頁面上會(huì)導(dǎo)致網(wǎng)頁的活潑度和親和的感覺下降。所以說我就把它調(diào)成了那種藍(lán)色的天。

之前我們經(jīng)過思考想到這種自然的顏色，這個(gè)自然的顏色確實(shí)很不錯(cuò)，但是這個(gè)小孩子需要很活潑很開朗，自然的顏色太接近寫實(shí)，它的那種思維更靠近大人的思想。所以要經(jīng)過顏色的處理，使他夢幻一點(diǎn)，看上去更加的清新，符合小孩子那種很天真的思考，所以我們就把提取出來的顏色的飽和度和對比度調(diào)了一下。整個(gè)感覺相對而言比較活潑。

海報(bào)給過來的時(shí)候它整個(gè)都是寫實(shí)的，因?yàn)樵趧?dòng)畫中它是有動(dòng)感的，非常有層次感，但是這是一張很直觀的圖片，我們怎么樣讓它有層次感呢，我把它處理了一下，然后整個(gè)的色調(diào)調(diào)了一下，遠(yuǎn)處的景我全部把它弄成了模糊的。因?yàn)椤栋职秩ツ膬骸匪刑峁┑膱D片它的那個(gè)比例是比較正規(guī)的，但是如果我按照那個(gè)正規(guī)的來做的話我要滿足1920的屏的話那我整個(gè)一屏都放不下這個(gè)大的圖片。

 所以我就把山啊整個(gè)的上提了，把logo縮小了，整個(gè)視覺的話往上提了一下。然后把這些元素到網(wǎng)站上去找，按照自己的想法去做出來。我沒有完全根據(jù)產(chǎn)品給的布局圖來，很多設(shè)計(jì)師就是由于他給的布局圖思維就定死了。但是很多時(shí)候按照布局圖來是對的，我們只要按照他的那個(gè)布局圖把他的內(nèi)容的主次排出來就行了。沒必要完全按照布局圖來，去想他的整個(gè)設(shè)計(jì)怎么去排，那樣子的話會(huì)把你的整個(gè)思維就給禁錮住。

整個(gè)頭部的話我就是放的那個(gè)海報(bào)。我們在做的過程中會(huì)考慮到用戶體驗(yàn)，如果說我整個(gè)頭部只是放了這一張海報(bào)的話，那么別人就只看到海報(bào)沒辦法看到內(nèi)容，但是如果我把這個(gè)內(nèi)容完全提上來那海報(bào)的部分又看不到了，那個(gè)人會(huì)被完全擋住。然后我做成一個(gè)輕微交互的東西，就是網(wǎng)頁打開一進(jìn)來鼠標(biāo)移到這里它就會(huì)彈出來，這樣的話既不影響視覺，也不影響交互。

大家看這個(gè)整個(gè)畫面的話是不是有一種爸爸帶著小孩到了山村里面，然后爸爸拿著地圖邊看然后邊跟小孩講一些東西？我之所以想到地圖就是用在這里。這個(gè)地圖剛好就是用來放新聞的內(nèi)容，使整個(gè)頁面更加有層次感，然后有一種身臨其境的感覺。

到下面的話我會(huì)用鋸齒把它分開一下。為什么用鋸齒，我的想法是，首先如果我只是用一條直線的話會(huì)讓人覺得很突兀，突然之間就到了另一個(gè)，場景切換得太快了；然后《爸爸去哪兒》它整個(gè)都是一個(gè)很活潑的，所以都要帶一點(diǎn)點(diǎn)個(gè)性化的東西，柔和性的東西。這個(gè)鋸齒的小三角形它是帶圓角的，不知道大家有沒有注意到那種鄉(xiāng)村里面的小柵欄的頂部也是這樣子。然后這樣子就有一個(gè)很好的過渡。

這上面就運(yùn)用到了我提取出來的顏色，然后視覺上那個(gè)原型圖上面本來策劃人員做的是，左邊這邊是《爸爸去哪兒》的介紹，中間是五個(gè)嘉賓，然后右邊是視頻。但是我覺得這樣一個(gè)比較輕松活潑的網(wǎng)站，如果這三塊我把它做成像新聞網(wǎng)站一樣的話，別人覺得這個(gè)東西又是一個(gè)新聞，很嚴(yán)肅。所以就把之前想到的那些元素，像調(diào)皮的小青蛙，運(yùn)用這些色塊，《爸爸去哪兒》這個(gè)海報(bào)放在這里是一個(gè)再次點(diǎn)題的作用。

如果我單純的幾個(gè)文字在這里會(huì)顯得很失敗，換做是我的話可能也不會(huì)去看這個(gè)網(wǎng)站，因?yàn)楝F(xiàn)在人的生活節(jié)奏太快了，沒人會(huì)去看純文字性的東西。這樣就打破了常規(guī)的那種三欄把東西放進(jìn)來，但是又突出了重點(diǎn)，給別人就是一種很新穎的感覺。

首先要提取項(xiàng)目要素的一些關(guān)鍵詞，然后做一些項(xiàng)目的背景調(diào)查，還原項(xiàng)目場景，還有一些孩子的調(diào)研之類的。

然后再根據(jù)這些關(guān)鍵詞就到顏色（的選?。┝?。顏色就是根據(jù)關(guān)鍵詞去定義這些顏色，比如輕松自然的顏色啊，符合孩子的顏色啊，等等，去提取跟項(xiàng)目有關(guān)的色素。

之后呢還有一些項(xiàng)目元素，關(guān)鍵詞還是跟剛才一樣，還有我們根據(jù)顏色定義的一些結(jié)果，提取我們現(xiàn)在頁面的元素。我們的頁面是不是整個(gè)考慮直角啊，圓角啊，更符合孩子的角度去看問題。

再下一步是布局和溝通，是跟產(chǎn)品原型設(shè)計(jì)交互設(shè)計(jì)去溝通他們這個(gè)設(shè)計(jì)的走向。然后還有一個(gè)是視覺動(dòng)效的考慮，比如說頭部的那個(gè)“新聞”。

完了再下一步我們就要考慮一些細(xì)節(jié)了。比如說鋸齒的考慮，圓角的考慮，圓角的過渡。 

再下一步我們考慮內(nèi)容，排版，視覺引導(dǎo)。簡化內(nèi)容，把沒用的內(nèi)容去掉，凸顯主題。

完了考慮到了用戶心理，生活的觀察，比如說羅老師剛才說農(nóng)村小孩跟城市小孩的共性還有特性。 

然后又考慮到了一些交互體驗(yàn)，就是視覺的交互層，用戶體驗(yàn)的考慮，比如羅磊老師做的那個(gè)輪換的設(shè)計(jì)，這個(gè)是視覺方面的考慮，是交互設(shè)計(jì)師考慮不到的，需要視覺設(shè)計(jì)師去考慮視覺層的交互體驗(yàn)。

最后再說兩點(diǎn)。第一點(diǎn)呢就是我們可以看到羅老師做這個(gè)頁面用了多少心思，在設(shè)計(jì)中你要多方面的去考慮。第二個(gè)呢就建議大家每期自己邊聽邊做一些筆記，這樣更利于你清晰的回憶你之前學(xué)習(xí)的內(nèi)容...

原地址：http://www.uehtml.com/post/2665/