干貨-騰訊內(nèi)部專題頁(yè)面設(shè)計(jì)方法.ppt

1、專題頁(yè)面設(shè)計(jì)方法,By:TGideas,授課目的,歸納一些設(shè)計(jì)形式 整理一些設(shè)計(jì)思路 總結(jié)一些設(shè)計(jì)方法 展示一些設(shè)計(jì)過(guò)程,專題頁(yè)面設(shè)計(jì)方法,1. 專題頁(yè)面定義,？,為什么要設(shè)計(jì)專題頁(yè)面,專題頁(yè)面設(shè)計(jì)方法,1. 專題頁(yè)面定義,產(chǎn)品,誕 生,退 市,調(diào) 研,產(chǎn)品 立項(xiàng),產(chǎn)品 開(kāi)發(fā),測(cè) 試,市場(chǎng) 預(yù)熱,全面 傳播,穩(wěn)定 銷售,持續(xù) 傳播,營(yíng)銷推廣,專題頁(yè)面設(shè)計(jì)方法,1. 專題頁(yè)面定義,產(chǎn)品,用戶,營(yíng)銷推廣,傳 統(tǒng) 營(yíng) 銷,網(wǎng) 絡(luò) 營(yíng) 銷,專題頁(yè)面設(shè)計(jì)方法,1. 專題頁(yè)面定義,產(chǎn)品,用戶,用戶層,互動(dòng)平臺(tái)層,產(chǎn)品資料落地層,平臺(tái)網(wǎng)站,企業(yè)網(wǎng)站,品牌網(wǎng)站,廣告活動(dòng)網(wǎng)站,專題網(wǎng)站,專題頁(yè)面設(shè)計(jì)方法,1.

2、專題頁(yè)面定義,專題頁(yè)面設(shè)計(jì)方法,1. 專題頁(yè)面定義,個(gè)性原則 Individuality,趣味原則 Interesting,利益原則 Interests,互動(dòng)原則 Interaction,專題頁(yè)面設(shè)計(jì)方法,1. 專題頁(yè)面定義,又稱為minisite，指圍繞某一主題事件或活動(dòng)而單獨(dú)開(kāi)辟的獨(dú)立網(wǎng)頁(yè)或網(wǎng)站，如運(yùn)營(yíng)活動(dòng)，禮品推送，版本介紹等,專題頁(yè)面的定義,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),以物造行法,B.圓方三角,快速幾何潑墨法,C.斷臂之美,局部反常態(tài)法,D.欲擒故縱,留白視覺(jué)反常態(tài)法,E.乾坤大挪移,布局反常態(tài)法,F. 釘釘鉚鉚,裝飾點(diǎn)睛法,快速打造專題頁(yè)面形式感,A.

3、抄現(xiàn)實(shí),以物造行法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),借鑒生活中存在的實(shí)物,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),它可以變成網(wǎng)頁(yè)嗎？,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),案例欣賞,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),步驟歸納,減法,分塊,加法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),案例演示一,DNF黑鉆專區(qū),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.

4、抄現(xiàn)實(shí),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),減法,簡(jiǎn)化鉆面細(xì)節(jié)，保留外輪廓,分塊,尋找內(nèi)容安置空間,加法,加入頁(yè)面內(nèi)容,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),案例演示二,QQ飛車三周年專題,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),減法,去掉賀卡上的文字和圖案,分塊,為按鈕尋找一屏展示區(qū),加法,加入修飾元素，細(xì)節(jié)刻畫(huà),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,A.抄現(xiàn)實(shí),小 結(jié),將頁(yè)面主題進(jìn)行可視化設(shè)計(jì)，傳達(dá)真實(shí)感受 頁(yè)面主題易具象表現(xiàn)，且功能和內(nèi)容較少，強(qiáng)調(diào)視覺(jué)表

5、現(xiàn) 對(duì)繪畫(huà)造型有一定要求,B.圓方三角,快速幾何潑墨法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,圓,三角,方,做為自然界視覺(jué)三種基礎(chǔ)形態(tài)，它們分別由直線、折線、弧線組成。,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,方：整齊、穩(wěn)定、生硬 圓：可愛(ài)、柔軟 三角：動(dòng)感、尖銳,嘗試一些簡(jiǎn)單的搭配組合,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,可以聯(lián)想到什么？,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,案例演示,QQ西游愚人節(jié)活動(dòng),專題頁(yè)面設(shè)計(jì)方法,2. 快速打

6、造專題頁(yè)面形式感,B.圓方三角,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,愚人節(jié),可愛(ài),有趣,搞笑,活潑,刺激,陷阱,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,設(shè)計(jì)是一個(gè)理性思維+聯(lián)想+運(yùn)氣的過(guò)程,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,B.圓方三角,C.斷臂之美,局部反常態(tài)法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,C.斷臂之美,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,C.斷臂之美,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,C.斷臂之美,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,C.斷臂之美,專題頁(yè)面設(shè)計(jì)方法,2.

7、快速打造專題頁(yè)面形式感,C.斷臂之美,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,C.斷臂之美,設(shè)計(jì)師： greatstyle（韓國(guó)）,案例分析,QQ西游神秘站,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,C.斷臂之美,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,C.斷臂之美,D.欲擒故縱,留白視覺(jué)反常態(tài)法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,客戶的奸叫,這些都要首屏啊啊啊,熱烈再熱烈一點(diǎn),沒(méi)有重點(diǎn)，只有更重點(diǎn),要大要大,要閃,這個(gè)這個(gè)這個(gè)要突出,要酷要炫要高調(diào),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造

8、專題頁(yè)面形式感,D.欲擒故縱,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,突出,我們?cè)撊绾螒?yīng)對(duì)！,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,當(dāng)我們聽(tīng)到突出、變大的需求的時(shí)候 第一反應(yīng)是采用了加強(qiáng)法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,不如我們反其道而行，來(lái)看看”空“境的別樣風(fēng)景,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,從建筑看滿與空,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,從攝影看滿與空,案例演示,QQ西游花祭專題,專題頁(yè)面設(shè)

9、計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,需求分析：,1.這是一個(gè)內(nèi)容適中的需求,5. 我們應(yīng)該引導(dǎo)用戶閱讀和操作，如何完成”空”的表現(xiàn)。,2. 原來(lái)的游戲SLOGAN被勒令使用，希望玩家來(lái)紀(jì)念同時(shí)選出新的SLOGAN，參與者將獲得禮物。,3. 調(diào)性哀傷，但雖然是祭是死去，卻不能恐怖，并且要讓人看到新的希望。,4. 選擇凄美的調(diào)性，而空白、安靜正好可以體現(xiàn)出這種哀傷的情懷。,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,減小一屏顯示內(nèi)容，制造一個(gè)空靈安靜的祭奠氣氛。,連貫性： 獻(xiàn)花、選新SLOGAN、轉(zhuǎn)發(fā)微

10、博、 祝福墻、四個(gè)標(biāo)題改為花愿、 花種、花瓣、花祭，花祭主題貫穿全文 數(shù)字“1.2.3” 、虛線和箭頭指示閱讀,閱讀疲勞： 文字稍微傾斜，打破太過(guò)規(guī)整死板 底部換色、聚焦,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,D.欲擒故縱,E.乾坤大挪移,布局反常態(tài)法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,時(shí)間短！沒(méi)創(chuàng)意！又要快速捕抓眼球,怎么辦？,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,旋轉(zhuǎn),平移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,常規(guī),旋轉(zhuǎn),平移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,旋轉(zhuǎn),

11、專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,整體旋轉(zhuǎn),背景旋轉(zhuǎn),內(nèi)容旋轉(zhuǎn),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,整體旋轉(zhuǎn),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,背景旋轉(zhuǎn),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,內(nèi)容旋轉(zhuǎn),專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,信息內(nèi)容旋轉(zhuǎn)多少角度比較合適？,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,平移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,案例欣賞,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式

12、感,E.乾坤大挪移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,案例演示一,御龍?jiān)谔旆鉁y(cè)專題（旋轉(zhuǎn)）,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,案例演示二,QQ西游裝機(jī)專題（平移）,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤大挪移,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,E.乾坤

13、大挪移,F.釘釘鉚鉚,裝飾點(diǎn)睛法,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,圖片來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)告知?jiǎng)h除,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,那頁(yè)面中常見(jiàn)的裝飾元素有哪些？,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,1.數(shù)字,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,2.英文,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,3.流行元素,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,冒泡,小星星,圖標(biāo),相片,箭頭,主題元素,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,如果感覺(jué)頁(yè)面很平庸，不妨來(lái)點(diǎn)小裝飾,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘鉚鉚,專題頁(yè)面設(shè)計(jì)方法,2. 快速打造專題頁(yè)面形式感,F.釘釘