[ 平面理論教程 ] 10款幫你搞定整頁專題設計的方法分享- 設計教程 - 骨子愛創意

教學主題: 10款幫你搞定整頁專題設計的方法分享

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 10款幫你搞定整頁專題設計的方法分享

這教學的重點為這幾點 [ 分享,方法,設計,專題,搞定,整體,頁面,單頁,元素,視覺, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

單頁設計，簡單將其比喻為在一張紙上進行的創作和設計。在設計單頁的專題時，為了讓首屏到次屏再到內容區間的視覺更加的連貫和流暢，就要充分利用好局部對比和整體關係來使頁面效果更加的完整。以下是我在工作中總結了幾點做專題單頁時的技巧。

單頁設計，簡單將其比喻為在一張紙上進行的創作和設計。在設計單頁的專題時，為了讓首屏到次屏再到內容區間的視覺更加的連貫和流暢，就要充分利用好局部對比和整體關係來使頁面效果更加的完整。以下是我在工作中總結了幾點做專題單頁時的技巧。

電商中的專題設計都是單頁設計的一種應用。

單頁最早出現在平面設計中，設計師通過用不同尺寸、材質的紙張，在僅有的正面和反面上進行自由設計的過程，主要用在折頁、宣傳單、海報中。

如下圖：

電商領域的單頁設計，更像是對平面單頁在使用環境上的升級，它不僅擁有平面設計中的所有設計規律，更有着網站設計的很多特點，比如：可以利用新的視差滾動和H5的技術，來使頁面與人的交互更密切，也使得用戶在瀏覽頁面時，更像是在閱讀一個故事。

它主要出現在一些促銷類的活動頁面、產品介紹頁、店鋪首頁等需求中。

如下圖：

01，先是單頁的點，這裡指的是切入點

專題單頁中的切入點就是整體頁面中的主線。

平面理論中的點用來聚焦、發散、吸引人們的注意力。

如下圖：

去體驗》

02，再是單頁的線，線具有連接、引導的作用

專題單頁中的線用於引出故事的情節;

運用一些藝術化的表達方式，來給頁面增加一些趣味性和裝飾性;

如下圖：

03，最後是單頁的面，用於整體風格的設計

這裡的指的是對整張頁面的完成度;

單頁設計不要局限於完成首屏設計或者某個單一元素的設計中。

它強調的是從頭到尾、(首屏到次屏再到內容區，再到最底部)、從局部到整體的一種視覺聯繫。

下面我們來看3組優秀的設計：

接下來是我整理的10個專題單頁的技巧，主要是一些大的理論點，大家結合著自己的專題去思考吧。

01、頭圖有個點，下面設計才好接

頭圖元素的設計不分楚河和漢界。

不能只抱着做個頭圖就完事的想法去做單頁面，要讓頭圖視覺和下面的內容有聯繫。

打破首屏(就是俗稱的頭圖)與次屏在設計上有明顯的顏色條分隔、形式分隔、線分隔等。

如下圖紅圈所示的位置就是頭圖的高度所在，一般頭圖的高度值建議在450〜600之間，太高了就會浪費空間。

02、承上啟下很重要，頁面有頭也有尾

所謂的承上啟下，就是說頁面中要有一個貫穿整體的主要元素，去構成整張頁面的視覺焦點。

讓元素頭尾呼應，上下連貫。

舉個例子：

01.圖中紅圈所示

專題中出現的主要元素如：頭和尾部的元素要在視覺上做到呼應和一致性;

02.圖中黑圈所示

專題中貫穿整體的這個元素，一定要在整體頁面中一筆直下，一氣呵成，否則就會出現斷點的感覺。如果在實際需求應用中無法做到整體設計的表現，那麼也應該盡量在局部或者某些元素的運用上做到這點。

03、背景顏色要整體，慎用色塊“切豆腐”

盡量不要用色塊進行頁面內容的分區，整體的單頁設計大多用的是單一顏色的背景。

對於一些平台型的活動單頁來講，我們常看到一些用不同色塊分區的設計。當然，這樣的處理方式是為了更好的分出不同的活動內容，也是做為設計的表現形式。

對於品類專題、店鋪首頁來說多色塊的分隔顯然整體性會差一些。

如下圖。

01.左圖是整塊的暗藍色的背景，沒有任何分區，整體頁面看着比較統一;

02.右圖是分塊的淺色系的背景，利用顏色進行分區，使得整體頁面比較活潑和俏皮。

(註：並不是說不能用多色塊對頁面內容進行分區，而是要看具體的需求和主題，選擇用不同的形式去表現)

04，由點到面整體感，切記東拼和西湊

上面講到元素的重複出現是為了更好的連接由點到面的整體感;

但是出現在整體中的元素或東拼西湊、或風格千奇百變的話，那麼單頁的整體性還是會大大折扣。

無論從排版上、字體選擇上、按鈕樣式、色彩等方面都要做到一致性，這樣的單頁才是整體的。

如圖所示：

05，一眼看完3屏多，不做留白就得暈

單頁因其把所有信息和元素都集中表現在一整張頁面中，所以單頁設計也註定是能超過3屏以上的頁面設計。

既然是長版的整體頁面，信息量又都很大，那就應該對每屏間的高度適當控制，既要保持屏與屏之間的可呼吸性和留白，給人們放鬆和喘息的空間。

舉個例子：

留白並不是特指白色哦〜!〜

在使用留白時，要注意不要因為頁面有留白和大空隙的出現，使得整體視覺的連接上，出現視覺斷點的情況。要盡量做到屏內可緊、屏外可松，讓整體頁面充滿節奏感。

06、整體想了，整體做，整體看

整張頁面設計強調的是整體從點、到線、再到面的構思和表現，它不光只是產出一個首屏視覺(頭圖)和一個內容區各自獨立的體現。

而更多的要求我們在設計中用放大局部來看細節，縮小頁面來看整體頁面的方法去完成一張超高的，具有創意和實用平衡的頁面設計。

舉個例子，如圖所示的幾個放大效果，在細節的處理和技巧上都是很棒的哦。

07，整體專題怎麼做，注重形式就能破

單頁設計的最大特點就是強調對整體形式感的表達;

正是因為過分強調形式感的東西，所以整張頁面的效果就要具有十足的特色和精巧的創意性，才能必免流於普通單頁設計行列中。

從而吸引用戶眼球，讓用戶跟隨整體的設計去體驗完整的頁面信息，形成對整張頁面較完整的用戶體驗和視覺認識。

舉個例子。

01.左圖是我當時做的一個聖誕節的整體創意頁面，以禮結的形式貫穿整體設計中。當時做的時候，就把整體的禮結元素放大化，做為主元素去表現;

02.右圖是一個國外戶外專題單頁的設計，整體以傾斜感的折線為主元素，具有動感、運動的印象。同時，結合非常有動勢的人物圖片使得整體頁面的動感時足。

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

08，整體設計故事化，頁面才能吸引人

當你設計單頁頁面時，在構思之初給整體頁面設定出一個故事，讓頁面具有新穎的主題性，那單頁給用戶的視覺體驗也會更棒。

下面二個作品，都是我和 蒸個饅頭 在銀泰做的作品。

二個作品從立意到技法，到設計都脫離了傳統電商的折扣表現。比較有意思，想知道這裡面的技法細節和更多的幕後知識嗎?

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

09、視差滾動好助手，單頁發展新潮流

滾屏動畫的特點在於，首先它是用來循序漸進的講故事;然後利用完美的順滑的瀏覽體驗，將各個內容間無縫且精巧的連接起來局部某些元素去做分層的動畫特效;

最後使現在極簡的、扁平的頁面設計，有了點晴之處!

如下圖所示，來自蒂芙尼。

 

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 10款幫你搞定整頁專題設計的方法分享 這教學會喜歡

文章標題: 骨子愛創意- 10款幫你搞定整頁專題設計的方法分享–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 分享,方法,設計,專題,搞定,整體,頁面,單頁,元素,視覺,

本文永久連結 :10款幫你搞定整頁專題設計的方法分享

本文轉載自 :VIA