网页设计思路：如何快速完成扁平化中秋节网页专题制作（理论篇）

时间：2022-07-25 10:24:01 | 来源：网站运营

时间：2022-07-25 10:24:01 来源：网站运营

这篇平面设计学习日记原计划在中秋节当天发布，但由于@酷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）版权及企业展示：放在后面的这部分内容，通常可放置一些展现公司实力、及包装公司的信息图片。或者放置一些对此次活动专题做出的不可或缺的陈述内容等。比如本篇日记中的中秋专题放置的就是公司的荣誉证书、合作供应商、以及版权声明信息等。

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以上文字看上去才有标题的样子，@酷coo豆常用36px大小的文字作为标题，也有用更大字号的时候，其具体数值大小在于与专题正文内容拉出大小对比的层次来，灵活调整即可。
  
• 正文字号大小——最小：12px，常用于注释文字，或者大段段落文字。这个字号的文字看起来略显秀气。建议选择有衬线的宋体字，显示效果、及可读性更佳。
  
• 正文字号大小——适中：14px。适合阅读。
  
• 正文字号大小——舒适：阅读起来非常舒适省力的字号，这是@酷coo豆在网页专题设计中用得最多的字号大小。本站PC端专栏的正文字号采用的也正是16px的字号，阅读起来很是舒服。
  

OK，由于篇幅关系，此篇：如何快速完成扁平化中秋节专题页面制作（理论篇）就写到此处。在下篇@酷coo豆将刊载其制作部分，再现如何以关键字“中秋”出发，做“思维发散”，再现素材收集的思路和过程、以及常用素材网站的整理分享。希望@酷coo豆 通过这样的方式，能给自学平面设计的初学者带来真真切切的帮助。下篇：《网页设计思路：如何快速完成扁平化中秋节网页专题（制作篇）》预计在10月上旬补齐。

【声明】作者：@酷coo豆 ，首发于本站：https://zhuanlan.zhihu.com/p/22740175。同步刊载于：平面设计学习日记网（xxriji.cn）。本文仅供交流学习，转载请联系授权，感谢您对作者版权的尊重。

未经授权禁止二次修改、转载、商用或培训，盗用将对其严厉追究法律责任。（本文已委托维权骑士对侵权方采取严厉的维权行动）。


（完）

最后欢迎你从本站直接转发分享本文到新浪微博或微信，转载请联系授权。你的支持是我创作的最大动力。