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

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

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

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

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

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

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

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

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

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

海報給過來的時候它整個都是寫實的，因為在動畫中它是有動感的，非常有層次感，但是這是一張很直觀的圖片，我們怎么樣讓它有層次感呢，我把它處理了一下，然后整個的色調(diào)調(diào)了一下，遠(yuǎn)處的景我全部把它弄成了模糊的。因為《爸爸去哪兒》它原有提供的圖片它的那個比例是比較正規(guī)的，但是如果我按照那個正規(guī)的來做的話我要滿足1920的屏的話那我整個一屏都放不下這個大的圖片。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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