干貨集合！暢游VC視覺研究刊物-ISSUE04（含PDF下載）

這一期刊物包含了VC團(tuán)隊14年Q1季度的所有優(yōu)秀吐血做出來的作品、4期觀點文章、N個接地氣超實用的設(shè)計教程，絕對滿足你們的各種幻想！讓V姐先來曝光其中1篇觀點饞饞你們！

目錄

【團(tuán)隊作品】《靈魂回響》項目作品賞析----------------------------------03頁
【觀點】回顧2013VC半年工作總結(jié)----------------------------------------21頁
【觀點】頁面設(shè)計細(xì)節(jié)總結(jié)--------------------------------------------------27頁
【觀點】游戲WEB創(chuàng)新路----------------------------------------------------36頁
【觀點】淺析中韓體驗設(shè)計差異化------------------------------------------43頁
【設(shè)計教程】如何讓用戶看到更多------------------------------------------52頁

【設(shè)計教程】PS濾鏡的魔力-------------------------------------------------55頁
【設(shè)計教程】武俠秘籍封面繪制過程---------------------------------------59頁
【設(shè)計教程】活動禮盒的繪制過程-----------------------------------------62頁
【設(shè)計教程】如何打造立體舞臺效果--------------------------------------66頁

【創(chuàng)意分享】傾斜設(shè)計頁面欣賞-------------------------------------------69頁
【創(chuàng)意分享】水墨風(fēng)格設(shè)計推薦-------------------------------------------80頁
【加入我們】VC招聘求插入-----------------------------------------------92頁

期刊下載地址：vc.changyou.com/book.shtml

2014年我們引進(jìn)了一款韓國大作eos更名為"靈魂回響"。韓國游戲在中國很受歡迎,本土的游戲也深受韓國游戲的影響和啟發(fā),游戲網(wǎng)站也是如此。由于韓國的用戶習(xí)慣和國內(nèi)有差異，韓國網(wǎng)絡(luò)環(huán)境也相對優(yōu)越，所以我們在體驗設(shè)計上也做了很多本土化的改變。設(shè)計師們都努力將設(shè)計價值最大化，降低用戶的認(rèn)知成本。讓界面所承載的信息內(nèi)容更直接、便捷的呈現(xiàn)在用戶面前，讓用戶在體驗頁面時更加流暢，舒服。

中韓用戶體驗習(xí)慣

無論是韓國網(wǎng)站設(shè)計還是國內(nèi)網(wǎng)站設(shè)計，都是服務(wù)于本土用戶，然而這些用戶也很難以一概全。像國內(nèi)龐大的網(wǎng)民基數(shù)和每年以千萬計的增加的新網(wǎng)民用戶，國內(nèi)設(shè)計師需要照顧更多的用戶體驗習(xí)慣。

韓國NHN一向注重用戶體驗感受，公司有用戶體驗研究部門，NHN旗下的網(wǎng)站無論是naver購物頻道網(wǎng)站還是hangame游戲網(wǎng)站，都極具自己的特點，在用戶體驗上有獨到的見解，更加迎合韓國用戶的瀏覽習(xí)慣。

電商頁面搜索功能和商品列表的主次差異

NAVER在用戶分析上，進(jìn)行了搜索功能與頁面展示內(nèi)容的性價比調(diào)查，大部分用戶直接使用搜索，一小部分只看第一屏，只有極少部分會下拉頁面去查找。

NAVER將搜索功能與商品列表整合在一起，這在功能劃分上更統(tǒng)一一些，在用戶端的使用目標(biāo)上這兩個模塊是一致的：尋找目標(biāo)商品。

韓國電商布局通常都是以簡潔清晰、區(qū)塊明顯的的特點吸引用戶。但這并不意味著內(nèi)容上單一、乏味。韓國設(shè)計師更多的是利用清晰的導(dǎo)航來引導(dǎo)用戶更快、更直接的找到用戶所需要的產(chǎn)品，而不是把全部的頻道、分類羅列在首頁。這種設(shè)計層級分明，架構(gòu)清晰。

國內(nèi)電商站考慮到每天新增用戶量和國內(nèi)用戶瀏覽商品頁面的習(xí)慣，在布局方式及展示內(nèi)容中廣告推薦占據(jù)很大的面積，形式上也根據(jù)運營推廣的需要多種多樣。國內(nèi)運營商很擅長用絢麗的顏色，多樣的廣告形式來吸引用戶對商品的關(guān)注，也能達(dá)成營銷的最終目的。所以國內(nèi)電商設(shè)計更符合本土用戶的需求。

頁面創(chuàng)新性

這里主要講技術(shù)實現(xiàn)上的創(chuàng)新。響應(yīng)式設(shè)計，視差設(shè)計等互動式網(wǎng)頁設(shè)計也開始運用于游戲頁面設(shè)計中。讓頁面在視覺上和功能表現(xiàn)上更加優(yōu)化，給用戶更直接更震撼的視覺效果。

韓國設(shè)計師對這個頁面的優(yōu)化更加完整。為了實現(xiàn)響應(yīng)式設(shè)計體驗，頁面內(nèi)容板塊大小統(tǒng)一，對用戶分辨率的大小完全適應(yīng)，根據(jù)分辨率的大小自由調(diào)整板塊的位置，保證用戶完整的體驗網(wǎng)站效果。

《靈魂回響》官方網(wǎng)站

http://eos.changyou.com/

《靈魂回響》官網(wǎng)設(shè)計突破固有形式，用大頭圖展現(xiàn)游戲華美畫面，效果震撼，頁面能自主適應(yīng)用戶對頁面的縮放調(diào)整以及瀏覽設(shè)備形式。

現(xiàn)在設(shè)計師們對頁面設(shè)計的不單單關(guān)注在頁面效果的表現(xiàn)，更加注重用戶的體驗和頁面的適應(yīng)性，這對我們而言是挑戰(zhàn)也是創(chuàng)新。

互動站實現(xiàn)方式

網(wǎng)站設(shè)計中我們通常希望能夠做出華麗、絢爛、耀眼、震撼的視覺，這些效果有的是通過高清圖片展示的，有的則是通過flash來實現(xiàn)的,用戶也往往會將焦點聚集在圖片或flash上，被這些精彩的創(chuàng)意所震撼.為了保證這樣的視覺吸引力，韓國設(shè)計師往往會不惜犧牲網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)，因為韓國網(wǎng)速對他們毫無壓力，他們根本不會被網(wǎng)速影響到他們欣賞震撼的頁面效果。韓國的設(shè)計師無論在圖形的壓縮上還是flash的壓縮上都面對著較小的壓力，這也意味著他們擁有更開闊的設(shè)計空間，不用太過于犧牲圖像質(zhì)量來保證用戶訪問時的流暢性。相對的國內(nèi)網(wǎng)絡(luò)環(huán)境沒有這么優(yōu)越，設(shè)計師們就要通過更多的方法來實現(xiàn)最終的頁面效果。韓國站更多采用視頻、CG、flash相結(jié)合實現(xiàn)網(wǎng)站互動效果。國內(nèi)站多是采用圖片交互的flash形式實現(xiàn)網(wǎng)站互動效果,即節(jié)省流量又能表現(xiàn)震撼效果和互動體驗。

韓國站為了追求逼真的視覺效果，直接用CG配合互動效果，營造出真實的感覺，使用戶有一種身臨其境的感覺。CG電影形式的網(wǎng)站。電影畫質(zhì)效果，韓國flash的大小一般在70、80M，有更大的也會超過100M。

http://h.changyou.com/

受國內(nèi)網(wǎng)速的影響，國內(nèi)的flash站都被壓縮在10-20M之間，我們?yōu)榱吮ＷC網(wǎng)站打開的速度和視覺效果，將人物和背景區(qū)分，人物在藍(lán)背景下拍攝，背景的處理全靠設(shè)計師后期合成處理。包括體現(xiàn)人物職業(yè)的這些元素。

此懸念站運用了響應(yīng)式設(shè)計，為本款游戲4名核心人員對本作品的介紹，此站大量的運用了視頻展示，由于用戶的屏幕多種多樣，有部分小屏用戶在瀏覽器模式下無法感受到完整視頻帶來的良好體驗，因此本站對用戶屏幕大小進(jìn)行監(jiān)測，對小屏用戶在視頻播放時自動切換到全屏模式。此站并對所播放視頻進(jìn)行優(yōu)先加載檢測，對用戶感興趣的視頻進(jìn)行優(yōu)先加載，減少了用戶等待的時間，提升用戶體驗。達(dá)到最好的視覺效果。

《靈魂回響》官網(wǎng)flash效果

http://eos.changyou.com/

《幻想神域》首測站

http://ffo.changyou.com/

《靈魂回響》和《幻想神域》的flash頁面運用了視差滾動設(shè)計。視差滾動是讓多層背景以不同速度滾動，以形成一種3D立體的運動效果，給觀者帶來一種獨特的視覺感受。這種形式讓用戶對網(wǎng)站有一種控制感，是一種響應(yīng)式的交互體驗，就好像看萬花筒，邊轉(zhuǎn)動邊能看到新奇的畫面，這也是這種設(shè)計的樂趣所在，很能吸引用戶的關(guān)注度。

最重要的是這種形式的互動在K數(shù)上很好控制，對于國內(nèi)相對擁擠的網(wǎng)絡(luò)來說，用戶也能有很好的體驗效果。

視覺表現(xiàn)差異化

韓國的設(shè)計已經(jīng)具備了自己的風(fēng)格，他們的設(shè)計很多時候超出我們固有的思維模式，或從是色彩搭配上、或從形式結(jié)構(gòu)上、或從精美的細(xì)節(jié)處理上都令我們眼前一亮。設(shè)計好像已經(jīng)融入到韓國人的生活里，無處不在。從他們的設(shè)計里我們也得到了很多的啟發(fā)，但是為了迎合本土用戶的視覺審美和運營商的利益，我們也正在形成著自己的風(fēng)格。

色彩情感差異

色彩做為第一視覺語言，當(dāng)人類初接觸到一個事物產(chǎn)生第一印象時，色彩的吸引力往往高于其造型所產(chǎn)生的印象。色彩具有象征性，然而色彩的象征性具有區(qū)域性，民族性。在中國人思維里：紅玫瑰象征熾熱的愛情，黃色總是與富麗，權(quán)利地位相連，白色純潔，藍(lán)色優(yōu)雅平靜，黑色肅穆，邪惡等。我們的設(shè)計往往也拘泥于節(jié)慶、送禮、VIP專題就得用紅色，而韓國設(shè)計師在色彩運用上更大膽，他們更注重于色彩與環(huán)境的搭配，氛圍的營造以及給用戶的感受。

同樣主題的專題站，設(shè)計師們從不同角度詮釋頁面的含義。

同樣突出尊貴概念的專題，國內(nèi)專題用了皇冠、鉆石這些能代表尊貴的元素，制造華麗的背景，來烘托氛圍。韓國專題雖然沒有用直接的元素表達(dá)尊貴的概念，但是用神秘背景設(shè)計，紫色和金色相搭配，細(xì)節(jié)歐式花紋處理，頁面含蓄但有細(xì)節(jié)同樣顯得尊貴、高級。

周年慶專題在我們平時觀念里就是要喜慶的，熱鬧的氣氛。國內(nèi)設(shè)計師很好的詮釋了這一點。韓國設(shè)計師用藍(lán)色表現(xiàn)周年慶專題，藍(lán)色給人信任，沉穩(wěn)的感受，從另一個角度詮釋周年慶獎品專題，讓參與的用戶對這個活動更加信任，提高參與度。

最后分享幾個優(yōu)秀韓國網(wǎng)站

專題氛圍的渲染

環(huán)境渲染，紋理的運用

邊框花紋的細(xì)節(jié)處理

場景布局,顏色搭配

韓國的游戲網(wǎng)站擅長一些細(xì)節(jié)上處理得，對畫面層次感，體積，陰影都處理的很用心，恰到好處，常常見到一些巧妙的并不俗套的處理，或利用構(gòu)圖來凸顯視覺上的差異，使整個網(wǎng)站具有不錯的空間感，另外在一些小細(xì)節(jié)上比如一張圖片，ICON,按鈕，登陸框等等的處理上，都很精致，這些小細(xì)節(jié)的處理，通常起到提升了網(wǎng)站品質(zhì)的作用。

總結(jié)

國內(nèi)設(shè)計和韓國設(shè)計因為用戶的習(xí)慣性，網(wǎng)絡(luò)環(huán)境，表現(xiàn)方式等有很多的差異，所以在設(shè)計上我們各自做著一些創(chuàng)新和努力。韓國的網(wǎng)站一直都有自己的特點，他們將生活的細(xì)節(jié)，對美好事物的追求以及精益求精的態(tài)度都體現(xiàn)在頁面設(shè)計上，這是我們要學(xué)習(xí)的。國內(nèi)網(wǎng)站設(shè)計也正在飛速的發(fā)展著，我們也會有更多更優(yōu)秀的作品展現(xiàn)給用戶，讓大家共同感受頁面帶來的美的視覺享受和操作體驗。

如果喜歡請下載整本期刊：vc.changyou.com/book.shtml

關(guān)于暢游VC

搜狐暢游視覺設(shè)計中心團(tuán)隊。我們是從游戲和生活中汲取創(chuàng)意和靈感的一群設(shè)計精靈，用愛去釋放奇妙的設(shè)計魔法，描繪讓你我感動的虛擬人生。

官網(wǎng)博客：vc.changyou.com
新浪微博：?@暢游VC
微信公眾平臺：cyou_vc

您也可以通過掃描下方二維碼快速添加：

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量66萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：