網(wǎng)頁(yè)設(shè)計(jì)思路：如何快速完成扁平化中秋節(jié)網(wǎng)頁(yè)專題制作（理論篇）
時(shí)間：2022-07-25 10:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2022-07-25 10:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
這篇平面設(shè)計(jì)學(xué)習(xí)日記原計(jì)劃在中秋節(jié)當(dāng)天發(fā)布，但由于@酷coo豆 個(gè)人時(shí)間實(shí)在有限，近幾天加班加點(diǎn)改版公司網(wǎng)站，給耽擱了。小伙伴們就配合一下， 假裝今天（9月25日）就是中秋節(jié)，讓@酷coo豆正兒八經(jīng)的給大家道一句：中秋快樂！
（↑↑↑這可能是有史以來(lái)最SB的開場(chǎng)白?。?br>
在這極具中國(guó)特色的傳統(tǒng)節(jié)日，除了吃月餅思家人，可不要忘了@酷coo豆給平面設(shè)計(jì)自學(xué)者準(zhǔn)備的學(xué)習(xí)日記哦。每個(gè)從事平面或網(wǎng)頁(yè)設(shè)計(jì)的同學(xué)，他的節(jié)日來(lái)得總是要比身邊小伙們更早一些。這不國(guó)慶節(jié)還沒來(lái)，@酷coo豆已把相應(yīng)的物料都設(shè)計(jì)完畢，算是提前把國(guó)慶節(jié)給過(guò)了吧。
OK，言歸正傳。搓右側(cè)鏈接查看本文案例效果圖——>
http://www.xxriji.cn/zp8.html【軟件未啟，思路現(xiàn)行。】這是創(chuàng)作一幅新的平面設(shè)計(jì)/網(wǎng)頁(yè)設(shè)計(jì)作品的正確打開方式。本篇平面設(shè)計(jì)學(xué)習(xí)日記，就主要總結(jié)并分享了：從零開始制作扁平化中秋專題頁(yè)面的思路，以及制前期梳理內(nèi)容、收集素材的過(guò)程。希望能給自學(xué)平面設(shè)計(jì)或第一次制作網(wǎng)頁(yè)專題的小伙伴們提供有價(jià)值的參考。
制作網(wǎng)頁(yè)專題的預(yù)備知識(shí)
1.專題頁(yè)面內(nèi)容
一個(gè)專題頁(yè)面的四大核心內(nèi)容通常包括：活動(dòng)主題、活動(dòng)時(shí)間、活動(dòng)獎(jiǎng)品、參與方式四個(gè)方面。
（1）活動(dòng)主題：即告訴你的客戶為什么要做這次促銷活動(dòng)。對(duì)于商家來(lái)說(shuō)像中秋、國(guó)慶這樣的常規(guī)節(jié)日自然是少不了做促銷活動(dòng)的。而行業(yè)內(nèi)的節(jié)日，商家自然可以信手拈來(lái)變出無(wú)數(shù)個(gè)節(jié)日里來(lái)。類似京東的電商節(jié)、電腦節(jié)、女神節(jié)、腦殘節(jié)，幾乎你能想到的詞語(yǔ)后面都可以加一個(gè)“節(jié)”?。?！所以對(duì)于從事平面/網(wǎng)頁(yè)的設(shè)計(jì)師來(lái)說(shuō)，一直都身在節(jié)日的海洋中，只是這樣的節(jié)日不！放！假！
（2）活動(dòng)時(shí)間：向客戶傳遞:要買要帶趕緊趕，錯(cuò)過(guò)今天好機(jī)會(huì)明天價(jià)格翻一倍的意思。營(yíng)造一種時(shí)間逼迫的緊張或稀缺感，讓賣家盡早抓緊時(shí)間買買買！
（3）活動(dòng)產(chǎn)品/獎(jiǎng)品：不管前面的活動(dòng)主題是什么，賣產(chǎn)品才是最終目的。通過(guò)產(chǎn)品/獎(jiǎng)品展示，告訴用戶/客戶在這次活動(dòng)中能夠得到什么獎(jiǎng)勵(lì)或者優(yōu)惠，比如常見的買滿送，現(xiàn)金折扣、活動(dòng)抽獎(jiǎng)等等。
（4）參與入口/方式：告訴客戶該如何參與這場(chǎng)活動(dòng)，你希望客戶在看到這個(gè)頁(yè)面后采取怎樣的行動(dòng)參與進(jìn)來(lái)。是收藏產(chǎn)品、點(diǎn)擊咨詢、轉(zhuǎn)發(fā)活動(dòng)、線上預(yù)約、還是現(xiàn)場(chǎng)抽獎(jiǎng)，這個(gè)都得結(jié)合行業(yè)自身屬性來(lái)做。通常參與規(guī)則都不要太復(fù)雜，不然沒人玩得轉(zhuǎn)。
所以，我們?cè)谀玫轿陌覆邉潟r(shí)，就應(yīng)按照這樣的思路來(lái)梳理活動(dòng)內(nèi)容信息。上面提到的東西更多的是從運(yùn)營(yíng)層面出發(fā)。將以上所有信息
以最優(yōu)方式展現(xiàn)在頁(yè)面上是網(wǎng)頁(yè)專題設(shè)計(jì)的關(guān)鍵，更是平面設(shè)計(jì)師義不容辭的職責(zé)。
2.專題結(jié)構(gòu)
基于上面對(duì)專題內(nèi)容的結(jié)構(gòu)梳理，@酷coo豆 習(xí)慣性地把網(wǎng)頁(yè)專題結(jié)構(gòu)歸納為以下三大塊。
（1） 首屏banner：專題活動(dòng)的banner是整個(gè)活動(dòng)頁(yè)面的靈魂部分,言簡(jiǎn)意賅的傳遞核心信息，力求3秒內(nèi)抓住客戶眼球，使其有意深入閱讀下去，這是banner部分需要承載的使命。
因此banner部分則主要用來(lái)盛放活動(dòng)主題、及時(shí)間信息，在必要的情況下加入帶有營(yíng)銷噱頭的副標(biāo)題那也是極好的，如:正材實(shí)料裝好房，萬(wàn)元現(xiàn)金等你拿。又如：399自學(xué)平面設(shè)計(jì)2月挑戰(zhàn)萬(wàn)元高薪（←好勵(lì)志的趕腳，防不勝防的廣告植入）。力求讓潛在客戶在最短的時(shí)間內(nèi)獲取到最優(yōu)價(jià)值的信息。
（2） 活動(dòng)主體部分：這個(gè)區(qū)域通常是產(chǎn)品或獎(jiǎng)品的展示主體，在設(shè)計(jì)處理這塊區(qū)域時(shí)，通常只需設(shè)計(jì)好一個(gè)
盛放產(chǎn)品的通用模板樣式，然后利用好對(duì)齊、對(duì)比、重復(fù)、親密四大規(guī)則，從上到下平鋪開來(lái)，根據(jù)版面信息多寡適當(dāng)?shù)刈鲂┬薷?，讓信息得到統(tǒng)一規(guī)整的呈現(xiàn)，以保證信息高效可讀。此處不必過(guò)分花哨。
（3）版權(quán)及企業(yè)展示：放在后面的這部分內(nèi)容，通?？煞胖靡恍┱宫F(xiàn)公司實(shí)力、及包裝公司的信息圖片?；蛘叻胖靡恍?duì)此次活動(dòng)專題做出的不可或缺的陳述內(nèi)容等。比如本篇日記中的中秋專題放置的就是公司的榮譽(yù)證書、合作供應(yīng)商、以及版權(quán)聲明信息等。
3.常規(guī)設(shè)計(jì)尺寸
↓↓↓下圖為百度統(tǒng)計(jì)2016年3月1日年到8月31日，PC端顯示屏幕市場(chǎng)占有率統(tǒng)計(jì)圖。
為了保證設(shè)計(jì)出來(lái)的專題頁(yè)面能夠在絕大多數(shù)電腦上得到較好的顯示，通常是按1920px的寬度進(jìn)行設(shè)計(jì)。@酷coo豆 結(jié)合自己的工作情況，將網(wǎng)頁(yè)專題制作的常用（經(jīng)驗(yàn)）尺寸歸納如下：
（1）頁(yè)面制作寬度：1920px,這是目前（2016年）最常用的尺寸，按這寬度新建畫布準(zhǔn)沒錯(cuò)。
（2）banner高度：經(jīng)驗(yàn)值600px~950px，根據(jù)你想表現(xiàn)的畫面效果，預(yù)估一下在多大高度能夠做出你預(yù)期的版面效果來(lái)即可，也不要太吝嗇你的畫布，弄大點(diǎn)反正又不會(huì)懷孕，而且更顯大氣，你覺得呢？但高度一般不要超過(guò)1000px，畢竟主流的顯示屏高度也就1080px。而@酷酷coo豆則喜歡將頭部的banner高度控制在850px左右，但每次做出來(lái)的banner高度也都不太一樣，所以對(duì)于尺寸的把控就隨意點(diǎn)，去自由發(fā)揮吧。數(shù)值只做參考，對(duì)于數(shù)值的實(shí)例也可參考@酷coo豆的近期作品
，或者參考其他大神的作品。
↑↑↑注：頁(yè)面中部左右側(cè)有翻頁(yè)按鈕，點(diǎn)擊可切換翻頁(yè)。（歡迎吐槽給出你的真知灼見，讓我們共同進(jìn)步。）
（3）內(nèi)容主體寬度：900px~1100px，以確保在分辨率為1366px寬度或更小的屏幕下，主體內(nèi)容不會(huì)溢出。通常我比較喜歡取1100Px的寬度，建議用偶數(shù)更好。所以在新建畫布后記得拉出參考線將內(nèi)容主題限制在900px~1100px的寬度中。
（4）字號(hào)大?。?/b>
- 標(biāo)題字號(hào)大小：至少24px以上文字看上去才有標(biāo)題的樣子，@酷coo豆常用36px大小的文字作為標(biāo)題，也有用更大字號(hào)的時(shí)候，其具體數(shù)值大小在于與專題正文內(nèi)容拉出大小對(duì)比的層次來(lái)，靈活調(diào)整即可。
- 正文字號(hào)大小——最?。?2px，常用于注釋文字，或者大段段落文字。這個(gè)字號(hào)的文字看起來(lái)略顯秀氣。建議選擇有襯線的宋體字，顯示效果、及可讀性更佳。
- 正文字號(hào)大小——適中：14px。適合閱讀。
- 正文字號(hào)大小——舒適：閱讀起來(lái)非常舒適省力的字號(hào)，這是@酷coo豆在網(wǎng)頁(yè)專題設(shè)計(jì)中用得最多的字號(hào)大小。本站PC端專欄的正文字號(hào)采用的也正是16px的字號(hào)，閱讀起來(lái)很是舒服。
OK，由于篇幅關(guān)系，此篇：如何快速完成扁平化中秋節(jié)專題頁(yè)面制作（理論篇）就寫到此處。在下篇@酷coo豆將刊載其制作部分，再現(xiàn)如何以關(guān)鍵字“中秋”出發(fā)，做“思維發(fā)散”，再現(xiàn)素材收集的思路和過(guò)程、以及常用素材網(wǎng)站的整理分享。希望@酷coo豆 通過(guò)這樣的方式，能給自學(xué)平面設(shè)計(jì)的初學(xué)者帶來(lái)真真切切的幫助。下篇：《網(wǎng)頁(yè)設(shè)計(jì)思路：如何快速完成扁平化中秋節(jié)網(wǎng)頁(yè)專題（制作篇）》預(yù)計(jì)在10月上旬補(bǔ)齊。
【聲明】作者：@酷coo豆 ，首發(fā)于本站：https://zhuanlan.zhihu.com/p/22740175。同步刊載于：平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)（xxriji.cn）。本文僅供交流學(xué)習(xí)，轉(zhuǎn)載請(qǐng)聯(lián)系授權(quán)，感謝您對(duì)作者版權(quán)的尊重。
未經(jīng)授權(quán)禁止二次修改、轉(zhuǎn)載、商用或培訓(xùn)，盜用將對(duì)其嚴(yán)厲追究法律責(zé)任。（本文已委托維權(quán)騎士對(duì)侵權(quán)方采取嚴(yán)厲的維權(quán)行動(dòng)）。
（完）
最后歡迎你從本站直接轉(zhuǎn)發(fā)分享本文到新浪微博或微信，轉(zhuǎn)載請(qǐng)聯(lián)系授權(quán)。你的支持是我創(chuàng)作的最大動(dòng)力。
關(guān)鍵詞：中秋,專題,理論,思路,設(shè)計(jì),完成
在線咨詢