網頁設計思路：如何快速完成扁平化中秋節網頁專題製作（理論篇）

01-28

這篇平面設計學習日記原計劃在中秋節當天發布，但由於@酷coo豆個人時間實在有限，近幾天加班加點改版公司網站，給耽擱了。小夥伴們就配合一下，假裝今天（9月25日）就是中秋節，讓@酷coo豆正兒八經的給大家道一句：中秋快樂！

（↑↑↑這可能是有史以來最SB的開場白！）

在這極具中國特色的傳統節日，除了吃月餅思家人，可不要忘了@酷coo豆給平面設計自學者準備的學習日記哦。每個從事平面或網頁設計的同學，他的節日來得總是要比身邊小伙們更早一些。這不國慶節還沒來，@酷coo豆已把相應的物料都設計完畢，算是提前把國慶節給過了吧。

OK，言歸正傳。搓右側鏈接查看本文案例效果圖——> http://www.xxriji.cn/zp8.html

【軟體未啟，思路現行。】這是創作一幅新的平面設計/網頁設計作品的正確打開方式。本篇平面設計學習日記，就主要總結並分享了：從零開始製作扁平化中秋專題頁面的思路，以及制前期梳理內容、收集素材的過程。希望能給自學平面設計或第一次製作網頁專題的小夥伴們提供有價值的參考。

製作網頁專題的預備知識

1.專題頁面內容

一個專題頁面的四大核心內容通常包括：活動主題、活動時間、活動獎品、參與方式四個方面。

（1）活動主題：即告訴你的客戶為什麼要做這次促銷活動。對於商家來說像中秋、國慶這樣的常規節日自然是少不了做促銷活動的。而行業內的節日，商家自然可以信手拈來變出無數個節日里來。類似京東的電商節、電腦節、女神節、腦殘節，幾乎你能想到的詞語後面都可以加一個「節」！！！所以對於從事平面/網頁的設計師來說，一直都身在節日的海洋中，只是這樣的節日不！放！假！

（2）活動時間：向客戶傳遞:要買要帶趕緊趕，錯過今天好機會明天價格翻一倍的意思。營造一種時間逼迫的緊張或稀缺感，讓賣家儘早抓緊時間買買買！

（3）活動產品/獎品：不管前面的活動主題是什麼，賣產品才是最終目的。通過產品/獎品展示，告訴用戶/客戶在這次活動中能夠得到什麼獎勵或者優惠，比如常見的買滿送，現金折扣、活動抽獎等等。

（4）參與入口/方式：告訴客戶該如何參與這場活動，你希望客戶在看到這個頁面後採取怎樣的行動參與進來。是收藏產品、點擊諮詢、轉發活動、線上預約、還是現場抽獎，這個都得結合行業自身屬性來做。通常參與規則都不要太複雜，不然沒人玩得轉。

所以，我們在拿到文案策劃時，就應按照這樣的思路來梳理活動內容信息。上面提到的東西更多的是從運營層面出發。將以上所有信息以最優方式展現在頁面上是網頁專題設計的關鍵，更是平面設計師義不容辭的職責。

2.專題結構

基於上面對專題內容的結構梳理，@酷coo豆習慣性地把網頁專題結構歸納為以下三大塊。

（1）首屏banner：專題活動的banner是整個活動頁面的靈魂部分,言簡意賅的傳遞核心信息，力求3秒內抓住客戶眼球，使其有意深入閱讀下去，這是banner部分需要承載的使命。

因此banner部分則主要用來盛放活動主題、及時間信息，在必要的情況下加入帶有營銷噱頭的副標題那也是極好的，如:正材實料裝好房，萬元現金等你拿。又如：399自學平面設計2月挑戰萬元高薪（←好勵志的趕腳，防不勝防的廣告植入）。力求讓潛在客戶在最短的時間內獲取到最優價值的信息。

（2）活動主體部分：這個區域通常是產品或獎品的展示主體，在設計處理這塊區域時，通常只需設計好一個盛放產品的通用模板樣式，然後利用好對齊、對比、重複、親密四大規則，從上到下平鋪開來，根據版面信息多寡適當地做些修改，讓信息得到統一規整的呈現，以保證信息高效可讀。此處不必過分花哨。

3.常規設計尺寸

↓↓↓下圖為百度統計2016年3月1日年到8月31日，PC端顯示屏幕市場佔有率統計圖。

為了保證設計出來的專題頁面能夠在絕大多數電腦上得到較好的顯示，通常是按1920px的寬度進行設計。@酷coo豆結合自己的工作情況，將網頁專題製作的常用（經驗）尺寸歸納如下：

（1）頁面製作寬度：1920px,這是目前（2016年）最常用的尺寸，按這寬度新建畫布准沒錯。

（2）banner高度：經驗值600px~950px，根據你想表現的畫面效果，預估一下在多大高度能夠做出你預期的版面效果來即可，也不要太吝嗇你的畫布，弄大點反正又不會懷孕，而且更顯大氣，你覺得呢？但高度一般不要超過1000px，畢竟主流的顯示屏高度也就1080px。而@酷酷coo豆則喜歡將頭部的banner高度控制在850px左右，但每次做出來的banner高度也都不太一樣，所以對於尺寸的把控就隨意點，去自由發揮吧。數值只做參考，對於數值的實例也可參考@酷coo豆的近期作品，或者參考其他大神的作品。

↑↑↑註：頁面中部左右側有翻頁按鈕，點擊可切換翻頁。（歡迎吐槽給出你的真知灼見，讓我們共同進步。）

（3）內容主體寬度：900px~1100px，以確保在解析度為1366px寬度或更小的屏幕下，主體內容不會溢出。通常我比較喜歡取1100Px的寬度，建議用偶數更好。所以在新建畫布後記得拉出參考線將內容主題限制在900px~1100px的寬度中。

（4）字型大小大小：

標題字型大小大小：至少24px以上文字看上去才有標題的樣子，n@酷coo豆常用36px大小的文字作為標題，也有用更大字型大小的時候，其具體數值大小在於與專題正文內容拉出大小對比的層次來，靈活調整即可。
正文字型大小大小——最小：12px，常用於注釋文字，或者大段段落文字。這個字型大小的文字看起來略顯秀氣。建議選擇有襯線的宋體字，顯示效果、及可讀性更佳。
正文字型大小大小——適中：14px。適合閱讀。
正文字型大小大小——舒適：閱讀起來非常舒適省力的字型大小，這是@酷coo豆在網頁專題設計中用得最多的字型大小大小。知乎PC端專欄的正文字型大小採用的也正是16px的字型大小，閱讀起來很是舒服。

OK，由於篇幅關係，此篇：如何快速完成扁平化中秋節專題頁面製作（理論篇）就寫到此處。在下篇@酷coo豆將刊載其製作部分，再現如何以關鍵字「中秋」出發，做「思維發散」，再現素材收集的思路和過程、以及常用素材網站的整理分享。希望@酷coo豆通過這樣的方式，能給自學平面設計的初學者帶來真真切切的幫助。下篇：《網頁設計思路：如何快速完成扁平化中秋節網頁專題（製作篇）》預計在10月上旬補齊。

【聲明】作者：@酷coo豆，首發於知乎：https://zhuanlan.zhihu.com/p/22740175。同步刊載於：平面設計學習日記網（xxriji.cn）。本文僅供交流學習，轉載請聯繫授權，感謝您對作者版權的尊重。

未經授權禁止二次修改、轉載、商用或培訓，盜用將對其嚴厲追究法律責任。（本文已委託維權騎士對侵權方採取嚴厲的維權行動）。

（完）

最後歡迎你從知乎直接轉發分享本文到新浪微博或微信，轉載請聯繫授權。你的支持是我創作的最大動力。