專(zhuān)題單頁(yè)規(guī)劃的技巧共享二

在規(guī)劃單頁(yè)的專(zhuān)題時(shí)，為了讓首屏到次屏再到內(nèi)容區(qū)間的視覺(jué)愈加的銜接和流暢，就要充分使用好部分比照和全體聯(lián)絡(luò)來(lái)使頁(yè)面作用愈加的完好。上回浪訊給咱們共享了三個(gè)關(guān)于專(zhuān)題單頁(yè)規(guī)劃的技巧，后續(xù)浪訊還整理了十個(gè)關(guān)于專(zhuān)題單頁(yè)規(guī)劃的技巧，下面來(lái)為咱們進(jìn)行一次詳細(xì)的拓寬共享：
01、頭圖有個(gè)點(diǎn)，下面規(guī)劃才好接
頭圖元素的規(guī)劃不分楚河和漢界。
不能只抱著做個(gè)頭圖就完事的主意去做單頁(yè)面，要讓頭圖視覺(jué)和下面的內(nèi)容有聯(lián)絡(luò)。
打破首屏(就是俗稱(chēng)的頭圖)與次屏在規(guī)劃上有顯著的色彩條分隔、方法分隔、線分隔等。
如下圖紅圈所示的方位就是頭圖的高度地點(diǎn)，一般頭圖的高度值主張?jiān)?50〜600之間，太高了就會(huì)糟�？臻g。

02、承上啟下很重要，頁(yè)面有頭也有尾
所謂的承上啟下，就是說(shuō)頁(yè)面中要有一個(gè)貫穿全體的首要元素，去構(gòu)成整張頁(yè)面的視覺(jué)焦點(diǎn)。
讓元素頭尾照應(yīng)，上下銜接。
舉個(gè)比如
（1）圖中紅圈所示
專(zhuān)題中呈現(xiàn)的首要元素如：頭和尾部的元素要在視覺(jué)上做到照應(yīng)和一致性;
（2）圖中黑圈所示
專(zhuān)題中貫穿全體的這個(gè)元素，必定要在全體頁(yè)面中一筆直下，趁熱打鐵，不然就會(huì)呈現(xiàn)斷點(diǎn)的感覺(jué)。如果在實(shí)際需求使用中無(wú)法做到全體規(guī)劃的體現(xiàn)，那么也應(yīng)該盡量在部分或許某些元素的運(yùn)用上做到這點(diǎn)。

03、布景色彩要全體，慎用色塊“切豆腐”
盡量不要用色塊進(jìn)行頁(yè)面內(nèi)容的分區(qū)，全體的單頁(yè)規(guī)劃大多用的是單一色彩的布景。
關(guān)于一些平臺(tái)型的活動(dòng)單頁(yè)來(lái)講，咱們�？吹揭恍┯貌煌�色塊分區(qū)的規(guī)劃。當(dāng)然，這樣的處理方法是為了更好的分出不同的活動(dòng)內(nèi)容，也是做為規(guī)劃的體現(xiàn)方法。
關(guān)于品類(lèi)專(zhuān)題、店肆首頁(yè)來(lái)說(shuō)多色塊的分隔顯然全體性會(huì)差一些。
如下圖
（1）左圖是整塊的暗藍(lán)色的布景，沒(méi)有任何分區(qū)，全體頁(yè)面看著比較一致;
（2）右圖是分塊的淺色系的布景，使用色彩進(jìn)行分區(qū)，使得全體頁(yè)面比較活潑和幽默。
(注：并不是說(shuō)不能用多色塊對(duì)頁(yè)面內(nèi)容進(jìn)行分區(qū)，而是要看詳細(xì)的需求和主題，挑選用不同的方法去體現(xiàn))

04、由點(diǎn)到面全體感，牢記東拼和西湊
上面講到元素的重復(fù)呈現(xiàn)是為了更好的銜接由點(diǎn)到面的全體感;
可是呈現(xiàn)在全體中的元素或東拼西湊、或風(fēng)格千奇百變的話(huà)，那么單頁(yè)的全體性仍是會(huì)大大扣頭。
不管從排版上、字體挑選上、按鈕款式、色彩等方面都要做到一致性，這樣的單頁(yè)才是全體的。
如圖所示

05、一眼看完3屏多，不做留白就得暈 
單頁(yè)因其把一切信息和元素都會(huì)集體現(xiàn)在一整張頁(yè)面中，所以單頁(yè)規(guī)劃也注定是能超越3屏以上的頁(yè)面規(guī)劃。
既然是長(zhǎng)版的全體頁(yè)面，信息量又都很大，那就應(yīng)該對(duì)每屏間的高度恰當(dāng)操控，既要保持屏與屏之間的可呼吸性和留白，給人們放松和喘息的空間。
舉個(gè)比如

留白并不是特指白色哦〜！〜
在使用留白時(shí)，要注意不要由于頁(yè)面有留白和大空地的呈現(xiàn)，使得全體視覺(jué)的銜接上，呈現(xiàn)視覺(jué)斷點(diǎn)的狀況。要盡量做到屏內(nèi)可緊、屏外可松，讓全體頁(yè)面充溢節(jié)奏感。
06、全體想了，全體做，全體看
整張頁(yè)面規(guī)劃著重的是全體從點(diǎn)、到線、再到面的構(gòu)思和體現(xiàn)，它不但僅僅產(chǎn)出一個(gè)首屏視覺(jué)(頭圖)和一個(gè)內(nèi)容區(qū)各自獨(dú)立的體現(xiàn)。
而更多的要求咱們?cè)谝?guī)劃頂用擴(kuò)大部分來(lái)看細(xì)節(jié)，縮小頁(yè)面來(lái)看全體頁(yè)面的辦法去完結(jié)一張超高的，具有構(gòu)思和有用平衡的頁(yè)面規(guī)劃。
舉個(gè)比如
如圖所示的幾個(gè)擴(kuò)大作用，在細(xì)節(jié)的處理和技巧上都是很棒的哦。

07、全體專(zhuān)題怎么做，重視方法就能破
單頁(yè)規(guī)劃的最大特色就是著重對(duì)全體方法感的表達(dá)；
正是由于過(guò)火著重方法感的東西，所以整張頁(yè)面的作用就要具有十足的特色和精巧的構(gòu)思性，才干必免流于一般單頁(yè)規(guī)劃行列中。
然后招引用戶(hù)眼球，讓用戶(hù)跟從全體的規(guī)劃去體會(huì)完好的頁(yè)面信息，形成對(duì)整張頁(yè)面較完好的用戶(hù)體會(huì)和視覺(jué)知道。
舉個(gè)比如
01.左圖是我其時(shí)做的一個(gè)圣誕節(jié)的全體構(gòu)思頁(yè)面，以禮結(jié)的方法貫穿全體規(guī)劃中。其時(shí)做的時(shí)候，就把全體的禮結(jié)元素?cái)U(kuò)大化，做為主元素去體現(xiàn);
02.右圖是一個(gè)國(guó)外野外專(zhuān)題單頁(yè)的規(guī)劃，全體以歪斜感的折線為主元素，具有動(dòng)感、運(yùn)動(dòng)的形象。一起，結(jié)合十分有動(dòng)勢(shì)的人物圖片使得全體頁(yè)面的動(dòng)感時(shí)足。

頁(yè)面已超越幾萬(wàn)像素了，親你還在看嗎？@！@
08、全體規(guī)劃故事化，頁(yè)面才干招引人
當(dāng)你規(guī)劃單頁(yè)頁(yè)面時(shí)，在構(gòu)思之初給全體頁(yè)面設(shè)定出一個(gè)故事，讓頁(yè)面具有新穎的主題性，那單頁(yè)給用戶(hù)的視覺(jué)體會(huì)也會(huì)更棒。
09、視差翻滾好助手，單頁(yè)開(kāi)展新潮流
滾屏動(dòng)畫(huà)的特色在于
首先它是用來(lái)按部就班的講故事;
然后使用完美的順滑的閱讀體會(huì)，將各個(gè)內(nèi)容間無(wú)縫且精巧的銜接起來(lái)部分某些元素去做分層的動(dòng)畫(huà)特效;
最終使現(xiàn)在極簡(jiǎn)的、扁平的頁(yè)面規(guī)劃，有了點(diǎn)晴之處!
如下圖所示，來(lái)自蒂芙尼。

共享一下我的觀后感
跟著漫天飄動(dòng)的，瀟灑在蒂芙尼的純潔國(guó)際。
這里有敞開(kāi)美好的鑰匙、有城市的回憶、有定情的禮物、有盟約的海誓，來(lái)吧，一起探索歸于你和我的蒂芙尼。
個(gè)人解讀
左右搖擺的雪花帶著觀者的視野一步步的去發(fā)現(xiàn)精彩國(guó)際，純潔的白色折紙搭出了西式的唯美修建與城市街景，折紙的暗影很倒位，把本來(lái)平鋪的紙，有了空間和立體感;
新鮮的湖水綠與純潔的白色調(diào)配，徹底界說(shuō)了愛(ài)的純真。
滾屏技能的運(yùn)用，像首樂(lè)曲按部就班的去傾聽(tīng)這美妙故事;
10、H5動(dòng)效新趨勢(shì)，人機(jī)交互有看頭
H5和動(dòng)效的呈現(xiàn)，使得專(zhuān)題活了起來(lái)，不再是呆板的純靜態(tài)圖片。
H5和動(dòng)效的呈現(xiàn)，使得專(zhuān)題的全體體會(huì)更像是在看一場(chǎng)精心安排的故事相同。
如下圖

全體策劃，以故事性為主 讓用戶(hù)在觀看畫(huà)面時(shí)，連帶推銷(xiāo)!或許這樣的立異現(xiàn)在看來(lái)有些不符合運(yùn)營(yíng)們的路子，可是這樣的方法或許是將來(lái)盛行的趨勢(shì)
總結(jié)起來(lái)9個(gè)字
全體想、全體做、全體看
10句話(huà)
10、H5動(dòng)效新趨勢(shì)，人機(jī)交互有看頭
9、視差翻滾好助手，單頁(yè)開(kāi)展新潮流
8、全體規(guī)劃故事化，頁(yè)面才干招引人
7、全體專(zhuān)題怎么做，重視方法就能破
6、全體想了，全體做，全體看
5、一眼看完3屏多，不做留白就得暈
4、由點(diǎn)到面全體感，牢記東拼和西湊
3、布景色彩要全體，慎用色塊“切豆腐”
2、承上啟下很重要，頁(yè)面有頭也有尾
1、頭圖有個(gè)點(diǎn)，下面規(guī)劃才好接