辣么多的網(wǎng)頁設(shè)計（上）之游戲視覺設(shè)計和電商設(shè)計

不論是對我們的客戶，招募設(shè)計的HR，還是對剛初入網(wǎng)頁設(shè)計這行的新人，我想，這樣的總結(jié)都是很有必要的,希望能給想找到適合自己的工作的同學(xué)們幫助。

先回答幾位同學(xué)比較關(guān)心的問題：

一，網(wǎng)頁設(shè)計需不需要懂代碼，java，C++，切圖？

我想說，網(wǎng)頁設(shè)計三劍客的時代已經(jīng)過去了。若是你選擇在一些二三線城市規(guī)模不大的公司，很有可能你會這樣。

我是網(wǎng)頁設(shè)計師，但我也只是會做做PS效果，懂一些html最基礎(chǔ)的代碼，知道不用通過后臺就能去替換文件包里的圖片與文字，切圖會但是不精，僅此而已。

人的一生，精力是有限的，我們常常很多人會因為環(huán)境或者生活所迫，把自己的注意力分?jǐn)偟讲煌闹\生能力當(dāng)中去，門門都會，也意味著門門難以精通，但只有專注于一點，才能在短時間內(nèi)取得最大的成就。

關(guān)鍵是，你肯不肯堅持自己想要做的事情，還是屈從于環(huán)境，還是說你習(xí)慣了你現(xiàn)有的生活狀態(tài)，不肯改變，不肯打破這種狀態(tài)。

傳統(tǒng)的一個網(wǎng)頁設(shè)計包攬整個項目，是遠(yuǎn)遠(yuǎn)比不上有一個團(tuán)隊，團(tuán)隊每個成員擅長不同的能力，所制作出來的效果好的。

U_IDESIGN團(tuán)隊就是這么說的

在過去很多網(wǎng)頁設(shè)計師都是孤軍奮戰(zhàn)，一個人包攬整個流程?？墒沁@樣誕生的網(wǎng)頁，很難達(dá)到最佳的效果。

那怎樣才能把設(shè)計做到極致？網(wǎng)頁設(shè)計師究竟需要怎樣的能力？

首先作為網(wǎng)頁設(shè)計師，需要手繪，鼠繪，能根據(jù)提供過來的素材風(fēng)格進(jìn)行重新再創(chuàng)作的能力，做出與之風(fēng)格統(tǒng)一，協(xié)調(diào)的同類元素。

可能你還需要攝影能力，懂布光，關(guān)鍵時候能自己去拍攝素材，當(dāng)然，前提需要你弄到個好的相機(jī)

除此之外，但凡高大上的設(shè)計，都需要修圖以及調(diào)色的能力

如果會C4D等3D軟件那更是如虎添翼

如果能從在這個基礎(chǔ)上再掌握一些字體設(shè)計的技巧，那更畫龍點睛

（PS：好的游戲網(wǎng)頁還會出現(xiàn)很多有趣的動態(tài)效果，涉及到flash設(shè)計，本文暫且不討論）

一方面，確實在有團(tuán)隊配合的情況下，每人專司一職頁面效果能達(dá)到最佳，幾個人腦海的碰撞和摩擦，從不

同角度各個方面去考慮會更加周到，大家一起頭腦風(fēng)暴的結(jié)果會更加成熟.

一方面，個人多掌握幾門和網(wǎng)頁設(shè)計有關(guān)的技能，能幫助你在網(wǎng)頁上做到更多他人難以做到的，更出色的效果。

畢竟，不是每個項目都需要借助團(tuán)隊的力量，更多時候，設(shè)計師都需要有獨當(dāng)一面的能力,

(請注意，這個觀念和前文是不沖突的，我不提倡設(shè)計師什么都會，所有流程都大包大攬，但我提倡設(shè)計師根據(jù)現(xiàn)有的環(huán)境，去多發(fā)展一到兩門對現(xiàn)有工作有更多幫助的技能）

在不同的設(shè)計的設(shè)計公司，你所需要具備，未來所要培養(yǎng)的能力和發(fā)展方向是不同的，但不論在什么地方，你長期養(yǎng)成的良好的設(shè)計和思維習(xí)慣，你通過常年欣賞好的作品,培養(yǎng)出來美感，你對設(shè)計的熱愛和堅持，才是你在這個行業(yè)的立足之本。

說了這么多，其實要引出的關(guān)于網(wǎng)頁設(shè)計第一個類別，也就是游戲視覺設(shè)計

不管別人怎么說怎么想，在我眼里所有網(wǎng)頁設(shè)計，單從視覺角度上來說，游戲網(wǎng)頁設(shè)計是最吸睛，表現(xiàn)力

最強(qiáng)的。

從表現(xiàn)手法來看，游戲網(wǎng)頁充滿了創(chuàng)造力和想象力，其中氛圍感，趣味性光效，質(zhì)感是游戲網(wǎng)頁重中之重，

這就是為什么扁平化風(fēng)格不適合大部分游戲網(wǎng)頁設(shè)計案例

此外，自晉小彥著書立說一來，形式這一詞匯出現(xiàn)在大眾視野，什么是游戲網(wǎng)頁中的形式感，請看下圖

以上案例都是網(wǎng)頁排版形式的高層次的運用，大膽的打破了傳統(tǒng)網(wǎng)頁的束縛.從此，游戲網(wǎng)頁中參雜扁平化風(fēng)格，成為可能！

igame團(tuán)隊最新作品的出現(xiàn)，也讓游戲網(wǎng)頁從此邁入一個新的層面.我們在igame的稿子中看不到多少復(fù)雜的光效和質(zhì)感，但是依然覺得這樣的稿子精致并且有細(xì)節(jié)，充滿美感。

從另一個方向，大白會所兩位設(shè)計師的新作在設(shè)計的質(zhì)感和技術(shù)上也逐漸接近國際水準(zhǔn)。但因為這樣的稿子是純視覺方面的應(yīng)用，商業(yè)程度低，頁面內(nèi)容少，實用性欠缺。

扁平化設(shè)計存在的意義在哪？

因為這類質(zhì)感的設(shè)計，若是頻繁添加，刪減內(nèi)容，去改動,或者讓設(shè)計師做一整套效果，包涵首頁+內(nèi)頁+論壇等等等等一系列設(shè)計，設(shè)計師能做出首頁，但其他更多頁面，一套下來十幾頁，能完成么？那必定是嘔心瀝血。

當(dāng)然，我佩服每一個堅持做質(zhì)感的設(shè)計師，他們具有比普通設(shè)計更加執(zhí)著，認(rèn)真的態(tài)度。

曾經(jīng)和人探討過身為設(shè)計師的使命和價值是什么,設(shè)計師一定要是一個前衛(wèi)的職業(yè)，身為設(shè)計師，出生在這個互聯(lián)網(wǎng)高速發(fā)展的時代，我們的思維方式必須超前，給大眾帶來希望和可能，如果沒有設(shè)計師先行去構(gòu)思去設(shè)計，他們很久很久才能感受到，接觸到那些新東西，iphone的發(fā)明就是如此。

很多設(shè)計師都熱衷于概念設(shè)計，不管是類似蘭博基尼新款車型還是iphone8之類新一代手機(jī)，都會有很多設(shè)計師自發(fā)去設(shè)計，可能他們設(shè)計出來的產(chǎn)品不一定實用，或者以現(xiàn)有的科技手段根本做不出來，譬如iphone手機(jī)的無邊框效果，或者機(jī)身透明效果，這些也許暫時無法實現(xiàn)，但是就是有了設(shè)計師腦子里這些想法，并讓圖片成型，才給了我們研發(fā)人員一個目標(biāo)， 焉知未來就沒辦法做到嗎？

再說一下國外的游戲網(wǎng)站，我沒有一絲想貶低國人的意思，我也不是從洋媚外的人，但確實國外游戲網(wǎng)頁高出國內(nèi)一個檔次是事實，但由于環(huán)境不同，沒什么可比性。

學(xué)生時代上那會教科書上寫物質(zhì)文明決定精神文明，物質(zhì)文明是精神文明的基礎(chǔ)。我那會不信，覺得不管貧窮與富貴，只要自己精神能滿足就好，但現(xiàn)在信了。比不上人家是正常，國外網(wǎng)頁發(fā)展多久，國外網(wǎng)絡(luò)是個什么速度？下個做設(shè)計素材打開個高大上的網(wǎng)頁做參考是分分鐘的事。國外做設(shè)計這行生活富足，受人尊敬，國內(nèi)60%以上的設(shè)計，還是在溫飽線上徘徊。（每年存款能超過5W的設(shè)計可以不理會我這句話）

大部分外國人和大部分國內(nèi)設(shè)計做東西有著本質(zhì)區(qū)別，一個是出于熱愛，不計較利益，成本，一個是為了謀生，想早日完成任務(wù)，賺更多錢，好早日娶妻買房。

我記得有個酷友評論游戲網(wǎng)頁是最好做的設(shè)計，也是最難做的設(shè)計，它提供過來的高檔次的素材，就具備了打造酷炫，具有視覺沖擊力效果的一切條件，一方面游戲網(wǎng)頁需要設(shè)計能搭配著背景和游戲素材能提煉或者自己繪制同樣風(fēng)格的網(wǎng)頁元素與之相配，但當(dāng)設(shè)計師達(dá)不到能與之相襯的創(chuàng)建素材的能力，就有點捉襟見肘了，一方面若是當(dāng)本身原畫和背景繪制得出色，素材充足的情況下，拿過來做設(shè)計是很爽的件事情。讓游戲網(wǎng)頁就算一般剛?cè)胄械娜似雌礈悳惥陀泻玫恼w效果，在不懂設(shè)計的人眼里似模似樣。

但就像之前有篇文章寫道設(shè)計師和策劃之間存在恩怨一樣，但焉知設(shè)計和原畫之間就沒有恩怨呢？

游戲行業(yè)對某些公司來說，就是暴利行業(yè)，但自從越來越多的游戲公司如雨后春筍般冒出，整個行業(yè)變得趨向于急功近利，畢竟落后一分，意昧著著市場被競爭對手所搶占，在這種情況下，原畫師又怎么會有充裕的時間去做圖，很多風(fēng)格，人物的造型各種抄襲借鑒也毫不奇怪。（吐槽下最近偶爾玩的幾款游戲APP，名字我又不提了，作為已經(jīng)擁有廣大fans群體的同人改編游戲，游戲中的人物形象角色能畫更像玩家心目中的主角形象點么？為了滿足老板需求趕進(jìn)度打醬油畫出來的東西，節(jié)操何在？要么就是很低俗的露胸露大腿，就為吸引宅男玩家，可是你不想想傳播這些東西對青少年有多少危害）

而作為下游的網(wǎng)頁設(shè)計自然受到不少牽連，當(dāng)然，這些都是題外話了

進(jìn)一步的根據(jù)功能去細(xì)分，游戲設(shè)計也包含登陸（下載）頁，專題頁，官網(wǎng)首頁+內(nèi)頁，以及線下海報宣傳推廣,國內(nèi)游戲網(wǎng)頁設(shè)計，確實還是首推TG，因為TG做到了設(shè)計商業(yè)化和藝術(shù)化的融合,網(wǎng)頁不僅僅是好看，也有更多的實際用途，每一個功能點都能兼顧瀏覽者的需求，給到玩家所要了解到的東西，同時也推送了很多賣點，通俗點說就是勾引到玩家為游戲付費買單。其實進(jìn)入游戲行業(yè)對設(shè)計師是件很幸福的事情，因為你作品的受眾都是年輕人，大家都喜歡酷炫的效果，都熱愛追逐潮流。也就是說你完全可以自由發(fā)揮而不擔(dān)心自己的稿子需要做太死板.當(dāng)然，有些設(shè)計師死也無法開竅，不適合做游戲除外……

電商范圍有點大，如果說游戲行業(yè)圈錢還是比較隱晦，一副你要在游戲里混得比別人流弊，更有身份，更有面子，就最好投錢的話，那電商行業(yè)就是打扮得各種花枝招展的明目張膽的向人拋媚眼：客官，快來買吧，奴家渴望你的到來。所以電商設(shè)計給人的感覺就是五花八門，色彩靚麗搶眼。

首先要說到電商網(wǎng)站第一個類別：

（購物）平臺型網(wǎng)站

也就是我們常見的淘寶，京東，易迅，所有電商網(wǎng)頁都有一個同類特征，以產(chǎn)品展示為主，必帶搜索按鈕，首頁必定有N個店鋪入口。分類列表那是必不可少，重中之重。

估計知名的那幾個平臺大家看膩了，放出幾個新的例子，包括淘寶腔調(diào)頻道練習(xí)稿，韓國排行第一的購物網(wǎng)站Gmarket 以及專賣正品的購物網(wǎng)11st。

電商設(shè)計的難處就在于……這么多產(chǎn)品，都要羅列在同一個頁面，要怎么才能展示出來會比較有層次，而顯得不亂，看起來有序且整齊，又不會忽略每個地方,一些廣告如何能適當(dāng)?shù)奶幵陧撁嬷凶詈侠淼奈恢?，而不會讓人產(chǎn)生反感。

前2個案例是設(shè)計效果最好看的，但不得不承認(rèn)，這2個設(shè)計有著滿足設(shè)計師追求視覺和審美的個人愛好之嫌，適合高端大群，但對普通大眾缺乏親和力和吸引力，不適用于現(xiàn)有的時代和環(huán)境。想想淘寶的普通用戶都是些什么人就知道了……另一方面，網(wǎng)民確實需要更加實用，易用的東西，你設(shè)計得再高檔次，who care？

但未來有天，這樣的風(fēng)格，我想終會大行其道。為什么？就像建國初期，文化普及程度，普通話掌握程度，全國這個百分比超級低。而現(xiàn)在沒上過大學(xué)，不會講普通話的的人群成了少數(shù)，國民的素養(yǎng)一直在不斷提升中。當(dāng)民眾生活越來越富足，他對設(shè)計對美將會有更高的追求。

設(shè)計師的苦也苦在這里，明明你做的是件有格調(diào)的事情，但偏偏不被大多數(shù)人理解，不是你自己的審美，欣賞眼光出了問題。。。而是他人跟不上……

除此之外，這類網(wǎng)站還有一個小分支,也就是團(tuán)購網(wǎng)站，建設(shè)一個平臺型網(wǎng)站，所需要投入的資金和時間，所要耗費的心思和精力，是普通網(wǎng)站根本無法比擬的。幾十個頁面，每個頁面都要做好用戶體驗，也就是阿里巴巴有這個實力，沒事改改版，新版天貓首頁出好幾個版本了.這類型的網(wǎng)站，因為設(shè)計帶給人的成就感就是做出來的東西會有無數(shù)人使用了，但確實有太多條條框框，太多約束。很多框架都已經(jīng)在一開始被限定死。

雙十一節(jié)，雙十二已經(jīng)成為阿里巴巴硬生生創(chuàng)造出來的購物節(jié)日。在這個大前提下，為了讓商家賺得盆滿缽滿，雙節(jié)的主會場設(shè)計就成了重中之重。可以看到經(jīng)過多年的發(fā)展，天貓的設(shè)計已經(jīng)形成了一種固定的風(fēng)格，通常圖片中會有一兩個色彩靚麗的人物或者產(chǎn)品配合著色彩強(qiáng)烈，高飽和的背景。搭配著一些被菱形，扁平化的小元素,連續(xù)2年都是如此，期待未來能夠看到更新穎的設(shè)計。

另外這么多會場的設(shè)計，很明顯不是出自同一個設(shè)計師之手，好的設(shè)計師，就是當(dāng)一個主設(shè)計風(fēng)格被確定下來，然后交給你依據(jù)這個來做，你做出來的效果和風(fēng)格，和同事做出來的并無二致，看上去出自同一個設(shè)計師之手。一個好的團(tuán)隊，就是能讓設(shè)計更加統(tǒng)一化，規(guī)范化，呈現(xiàn)出行業(yè)的特性。這也是每個初入這行的設(shè)計要晉階所需要注意的。

再說說電商設(shè)計另一個類別：

商城店鋪裝修

如果說平臺型網(wǎng)站是一道道的可口美味的點心拼湊的全席，讓你怎么吃都吃不膩的話，那么淘寶店鋪裝修設(shè)計帶給你的，是場視覺盛宴。

什么？網(wǎng)頁看不懂？不明白設(shè)計的這個氛圍，合成的這個背景和產(chǎn)品有啥聯(lián)系？沒關(guān)系，我們要的就是視覺沖擊力，我們要做的就是品牌文化。在電商行業(yè)，我們可以看到很多獨樹一幟的店鋪，天馬行空的創(chuàng)意，用攝影的話來說就是超現(xiàn)實主義。

電商設(shè)計的品牌化已經(jīng)成型，風(fēng)格乃至模特都是固定，以致每當(dāng)我們看到網(wǎng)上流出的某個無標(biāo)識的設(shè)計作品，我們都會知道，啊，這一定是哪家那家店出品的。

更多電商案例賞析：

其中，以風(fēng)格分類，電商也分為若干個方向，象朱爾的設(shè)計，經(jīng)常會采用到大自然的背景，將森林，動物，模特相結(jié)合，用濾鏡讓整個背景呈現(xiàn)出油畫般的感覺，一個banner經(jīng)常流光四溢。在光的使用上，達(dá)到了極致。（見例一)

如初語的設(shè)計，都是仿佛置身于童話般的魔幻場景，充滿著想象力，當(dāng)然設(shè)計是極好的，只是那個model的妝容……（見例二)

然后就是扁平化手繪風(fēng)格，阿芙精油圣誕專題頁將視幻的概念融入到設(shè)計中，誰說扁平化就是真的做起來簡單了？只是大多數(shù)扁平化設(shè)計因為剛興起，沒有做到那個最高層次而已。（見例三)

淘寶有年雙十二的鉆展設(shè)計也讓人眼前一亮，充滿著趣味性，將熱點時事，網(wǎng)絡(luò)流行語與之聯(lián)系起來，讓網(wǎng)民更加有親切感。這也是手繪風(fēng)運用極好的例子。（PS:在這里，手繪風(fēng)并不代表扁平化，只是包含扁平化。另外網(wǎng)頁banner廣告算不算網(wǎng)頁設(shè)計？我認(rèn)為是的，雖然是做平面效果，但承載它的媒介是網(wǎng)絡(luò)）（見例四)

但是近年來，隨著天貓進(jìn)一步開放后臺，讓店鋪更充滿個性化，極簡化化風(fēng)格也開始存在在電商中,象陳聰?shù)膱怨赇佋O(shè)計.林思文的女包，侯帥的茶葉頁面。（見例五，例八)

當(dāng)然設(shè)計并非是最適合的解決問題，達(dá)到讓店鋪品牌化的唯一方案。在很多天貓網(wǎng)店中，存著著這么一批單純靠攝影吃飯的。畢竟要合成一個場景，并且還要好看，所花費的精力，多于沒有一個熟練，有條件可以實現(xiàn)好的拍攝效果的攝影師。當(dāng)然攝影和設(shè)計常常是相輔相成的。所以他們的店鋪裝修，經(jīng)常是首頁banner一張帶產(chǎn)品的好看的攝影圖+文字就搞掂。（見例六)

另外，隨著杰視幫的發(fā)展壯大，歐美古典風(fēng)也開始占領(lǐng)了電商設(shè)計一片天。這樣的設(shè)計對設(shè)計師的意境以及基礎(chǔ)的光影把握能力極高，才能將人物以及產(chǎn)品圖毫無破綻的合成融入到環(huán)境中。（見例七)

電商設(shè)計的迅猛發(fā)展勢頭讓某個以培訓(xùn)網(wǎng)頁設(shè)計聞名的學(xué)校將授課內(nèi)容全部轉(zhuǎn)化為與電商相關(guān)的內(nèi)容。因為電商網(wǎng)頁設(shè)計待遇普遍比官網(wǎng)設(shè)計待遇高，當(dāng)然這樣做無可厚非。

但電商最致命的缺陷一個是在網(wǎng)頁的規(guī)整度上，讓初入行的電商設(shè)計師忽略了這方面能力的培養(yǎng)，而網(wǎng)頁與平面不同其實是門精確到像素的學(xué)問，另一個就是過于追求視覺，這也是我過去常犯的錯誤，很多時候，我們在頁面上看到的只是圖片好看，他的速效性讓更多設(shè)計師處于1,2天一個首頁或者專題的境地，沒辦法做出好東西。

設(shè)計師內(nèi)心的想法看不到，更多時候，我們看到的沒有思路后的各種模仿，有時候，也是單純的一些圖片素材的累加。這真的能算好設(shè)計么？作為設(shè)計師，我們不能把練習(xí)或者模仿當(dāng)成自己實力的體現(xiàn)，真正的提升，是當(dāng)你沒有網(wǎng)絡(luò)，沒有參考，你還能腦子里靈感一現(xiàn)，做出擁有你自己創(chuàng)意的設(shè)計.

好的設(shè)計是能與品牌化結(jié)合在一起的，能不斷推出新的東西但圍繞著一個核心主旨，不停在人們腦子里重復(fù)再重復(fù)，讓人擁有深刻的記憶。

而不好的設(shè)計，就是同類化，當(dāng)你看到行業(yè)內(nèi)某個店鋪的設(shè)計特別出眾讓你眼前一亮，你去模仿他家的風(fēng)格，力求也達(dá)到別家設(shè)計師那樣的技術(shù)，去實現(xiàn)那樣的效果。這樣意義缺乏的，除非你在人家現(xiàn)有的基礎(chǔ)上還能進(jìn)一步提高，有更多的創(chuàng)新，從模仿到超越。不然你永遠(yuǎn)只是他人的影子。（當(dāng)然，新手還是在初期是從一步步模仿走來的，我這么說只是針對一些懶惰的，技術(shù)到了一定程度就不想去突破的人）

當(dāng)然，我所能囊括的案例，我所了解到的知識也是有限的，在電商網(wǎng)頁設(shè)計的了解可能比不上更多做這行的童靴，所以有什么沒講到位的地方，還望大家指正。