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

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

我們剛拿到這個(gè)項(xiàng)目的時(shí)候，我們對(duì)《爸爸去哪兒》這個(gè)節(jié)目根本不了解。可能大家都覺(jué)得湖南衛(wèi)視內(nèi)部的人員就肯定會(huì)有很多的素材或者說(shuō)是什么，其實(shí)坑爹的是，就是我們這一撥人在湖南衛(wèi)視還沒(méi)確定好什么的時(shí)候就要我們開(kāi)始做。剛開(kāi)始的時(shí)候我們自己去做，什么素材都沒(méi)有，憑自己去發(fā)揮。《爸爸去哪兒》的logo和頭圖是節(jié)目組提供的，頭圖我做了稍微的修改。節(jié)目組給過(guò)來(lái)就是這樣子的。

它整個(gè)天空看起來(lái)紅紅的，可能不太適合放在網(wǎng)頁(yè)上面，我就做了一些調(diào)整。節(jié)目組給的資料只有《爸爸去哪兒》的介紹，然后我整個(gè)都不知道《爸爸去哪兒》這個(gè)爸爸是去哪兒的，是干嘛的，聽(tīng)過(guò)這么一段簡(jiǎn)短的介紹說(shuō)《爸爸去哪兒》是一段親子類(lèi)的節(jié)目，是爸爸和小孩兒一起進(jìn)行鄉(xiāng)村體驗(yàn)的。然后我們產(chǎn)品經(jīng)理又畫(huà)了一個(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)行很長(zhǎng)時(shí)間的思考。我先會(huì)提取出項(xiàng)目需求的關(guān)鍵詞：親子和鄉(xiāng)村體驗(yàn)，爸爸去哪兒，然后把這三個(gè)詞進(jìn)行擴(kuò)展。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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