專題單頁規(guī)劃的技巧共享二

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

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

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

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

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

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

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

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

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

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