專題單頁規劃的技巧共享二

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

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

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

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

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

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

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

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

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

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