请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:4| 主题:21207
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

[复制链接]
难拥友 发表于 2016-10-3 17:16:15
531 16

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-1-产品设计-专题,活动,字号,平面设计,网页

  这篇平面设计学习日记原计划在中秋节当天发布,[email protected] 个人时间实在有限,近几天加班加点改版公司网站,给耽搁了。小伙伴们就配合一下, 假装今天(9月25日)就是中秋节,[email protected]:中秋快乐!
  (↑↑↑这可能是有史以来最SB的开场白!)
  在这极具中国特色的传统节日,除了吃月饼思家人,[email protected]记哦。每个从事平面或网页设计的同学,他的节日来得总是要比身边小伙们更早一些。这不国庆节还没来,@酷coo豆已把相应的物料都设计完毕,算是提前把国庆节给过了吧。
      OK,言归正传。搓右侧链接查看本文案例效果图——>  http://www. xxriji.cn/zp8.html   
   

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-2-产品设计-专题,活动,字号,平面设计,网页
    【软件未启,思路现行。】这是创作一幅新的平面设计/网页设计作品的正确打开方式。本篇平面设计学习日记,就主要总结并分享了:从零开始制作扁平化中秋专题页面的思路,以及制前期梳理内容、收集素材的过程。希望能给自学平面设计或第一次制作网页专题的小伙伴们提供有价值的参考。
   制作网页专题的预备知识

  1.专题页面内容

  

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-3-产品设计-专题,活动,字号,平面设计,网页
  一个专题页面的四大核心内容通常包括:活动主题、活动时间、活动奖品、参与方式四个方面。
   (1)活动主题: 即告诉你的客户为什么要做这次促销活动。对于商家来说像中秋、国庆这样的常规节日自然是少不了做促销活动的。而行业内的节日,商家自然可以信手拈来变出无数个节日里来。类似京东的电商节、电脑节、女神节、脑残节,几乎你能想到的词语后面都可以加一个“节”!!!所以对于从事平面/网页的设计师来说,一直都身在节日的海洋中,只是这样的节日不!放!假!
   (2)活动时间: 向客户传递:要买要带赶紧赶,错过今天好机会明天价格翻一倍的意思。营造一种时间逼迫的紧张或稀缺感,让卖家尽早抓紧时间买买买!
   (3)活动产品/奖品 :不管前面的活动主题是什么,卖产品才是最终目的。通过产品/奖品展示,告诉用户/客户在这次活动中能够得到什么奖励或者优惠,比如常见的买满送,现金折扣、活动抽奖等等。
   (4)参与入口/方式: 告诉客户该如何参与这场活动,你希望客户在看到这个页面后采取怎样的行动参与进来。是收藏产品、点击咨询、转发活动、线上预约、还是现场抽奖,这个都得结合行业自身属性来做。通常参与规则都不要太复杂,不然没人玩得转。
   所以,我们在拿到文案策划时,就应按照这样的思路来梳理活动内容信息。上面提到的东西更多的是从运营层面出发。将以上所有信息 以最优方式展现在页面 上是网页专题设计的关键,更是平面设计师义不容辞的职责。
  2.专题结构

  

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-4-产品设计-专题,活动,字号,平面设计,网页
  基于上面对专题内容的结构梳理,@酷coo豆 习惯性地把网页专题结构归纳为以下三大块。
   (1) 首屏banner: 专题活动的banner是整个活动页面的灵魂部分,言简意赅的传递核心信息,力求3秒内抓住客户眼球,使其有意深入阅读下去,这是banner部分需要承载的使命。
   因此banner部分则主要用来盛放活动主题、及时间信息,在必要的情况下加入带有营销噱头的副标题那也是极好的,如:正材实料装好房,万元现金等你拿。又如:   399自学平面设计2月挑战万元高薪    (←好励志的赶脚,防不胜防的广告植入)。力求让潜在客户在最短的时间内获取到最优价值的信息。
  

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-5-产品设计-专题,活动,字号,平面设计,网页
   (2) 活动主体部分: 这个区域通常是产品或奖品的展示主体,在设计处理这块区域时,通常只需设计好一个 盛放产品的通用模板样式 ,然后利用好对齐、对比、重复、亲密四大规则,从上到下平铺开来,根据版面信息多寡适当地做些修改,让信息得到统一规整的呈现,以保证信息高效可读。此处不必过分花哨。
   (3)版权及企业展示: 放在后面的这部分内容,通常可放置一些展现公司实力、及包装公司的信息图片。或者放置一些对此次活动专题做出的不可或缺的陈述内容等。比如本篇日记中的中秋专题放置的就是公司的荣誉证书、合作供应商、以及版权声明信息等。
  3.常规设计尺寸

  

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-6-产品设计-专题,活动,字号,平面设计,网页
  ↓↓↓下图为百度统计2016年3月1日年到8月31日,PC端显示屏幕市场占有率统计图。
  

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-7-产品设计-专题,活动,字号,平面设计,网页
  为了保证设计出来的专题页面能够在绝大多数电脑上得到较好的显示,[email protected] 结合自己的工作情况,将网页专题制作的常用(经验)尺寸归纳如下:
   (1)页面制作宽度: 1920px,这是目前(2016年)最常用的尺寸,按这宽度新建画布准没错。
   (2)banner高度: 经验值600px~950px,根据你想表现的画面效果,预估一下在多大高度能够做出你预期的版面效果来即可,也不要太吝啬你的画布,弄大点反正又不会怀孕,而且更显大气,你觉得呢?但高度一般不要超过1000px,[email protected]欢将头部的banner高度控制在850px左右,但每次做出来的banner高度也都不太一样,所以对于尺寸的把控就随意点,去自由发挥吧。数值只做参考,对于数值的实例也可参考  @酷coo豆的近期作品    或者参考其他大神的作品。
  

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...

网页设计思路:如何快速完成扁平化中秋节网页专题制作(理论篇) ...-8-产品设计-专题,活动,字号,平面设计,网页
  ↑↑↑注:页面中部左右侧有翻页按钮,点击可切换翻页。(欢迎吐槽给出你的真知灼见,让我们共同进步。)
   (3)内容主体宽度: 900px~1100px,以确保在分辨率为1366px宽度或更小的屏幕下,主体内容不会溢出。通常我比较喜欢取1100Px的宽度,建议用偶数更好。所以在新建画布后记得拉出参考线将内容主题限制在900px~1100px的宽度中。
   (4)字号大小:
  
       
  • 标题字号大小:至少24px以上文字看上去才有标题的样子, @酷coo豆常用36px大小的文字作为标题,也有用更大字号的时候,其具体数值大小在于与专题正文内容拉出大小对比的层次来,灵活调整即可。   
  • 正文字号大小——最小:12px,常用于注释文字,或者大段段落文字。这个字号的文字看起来略显秀气。建议选择有衬线的宋体字,显示效果、及可读性更佳。   
  • 正文字号大小——适中:14px。适合阅读。   
  • 正文字号大小——舒适:阅读起来非常舒适省力的字号,[email protected][email protected],阅读起来很是舒服。  
   OK,由于篇幅关系,此篇:如何快速完成扁平化中秋节专题页面制作(理论篇)[email protected],再现如何以关键字“中秋”出发,做“思维发散”,再现素材收集的思路和过程、以及常用素材网站的[email protected] 通过这样的方式,能给自学平面设计的初学者带来真真切切的帮助。下篇:《网页设计思路:如何快速打造扁平化中秋节网页专题(制作篇)》预计在10月上旬补齐。(完)—————————————————————————————————————————你的支持是我创作的最大动力。最后欢迎你 直接转发分享 本文,到新浪微博或微信。
  本文仅供交流学习,转载请联系授权,感谢您对作者版权的尊重。未经授权禁止二次修改、转载、商用或培训,盗用将对其严厉追究法律责任。(本文已委托维权骑士对侵权方采取严厉的维权行动)。
   作者:@酷coo豆 ,首发于知乎:  https:// zhuanlan.zhihu.com/p/22 740175   。同步刊载于:平面设计学习日记网(  http://www. xxriji.cn/    )。
段能凤 发表于 2016-10-3 18:15:56
有的人,有一股,让人想一辈子跟他做陌生人的强大的气场。
回复 支持 反对

使用道具 举报

kfaqk 发表于 2016-10-3 20:03:16
涨姿势了
回复 支持 反对

使用道具 举报

龙春艳 发表于 2016-10-4 18:30:59
看帖要回,回帖才健康,在踩踩,楼主辛苦了!
回复 支持 反对

使用道具 举报

乐、小宇 发表于 2016-10-6 01:24:33
想念你,真的不需要理由,那只是一种感觉,随时乘我不备,就会窜入我的脑海,直达我的心脏。
回复 支持 反对

使用道具 举报

alxan168 发表于 2016-10-10 09:39:18
不是我劝着我自己,我特么早和这个世界翻脸了。
回复 支持 反对

使用道具 举报

让记忆冬眠 发表于 2016-10-10 10:20:18
非常好,顶一下
回复 支持 反对

使用道具 举报

swxo9313 发表于 2016-10-22 20:07:58
先顶再看!
回复 支持 反对

使用道具 举报

Ziessetesg 发表于 2016-11-5 18:45:03
打酱油的人拉,回复下赚取积分
回复 支持 反对

使用道具 举报

随遇而安44 发表于 2016-11-6 14:30:49
出来混,老婆迟早是要换的.
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表