电商设计第十三式-实战篇（页面制作规范与技巧）

时间：2022-08-06 04:54:01 | 来源：网站运营

时间：2022-08-06 04:54:01 来源：网站运营

时间过的很快，即将要完成一整个章节的讲解，池子盘点了一下

前三式的电商设计入门的理论

到中间几式的装修后台和活动图构图技巧

又到最后几式的海报详情页实操

池子算是把入门电商设计基础的那些事情给你掰扯清楚了，这些也是入门的筑基篇，熟练掌握以上招式思路逻辑，想准备些好到作品集不会太难，面试中就算不能保证立马一眼跳出，但保守来说对付大部分公司需求是足够了，有志于从事电商设计的小伙伴们可以多盘盘这些内容，想必每次收获到的东西必定会有不同。

池子也将会继续推出下一个炼丹篇系列，讲解自己操盘过的各个类目的实战思路，如果你掌握好了筑基篇招式，面试难度就不会特别大，也希望各位如愿找到好的团队，也不妄池子写的这些东西，继续跟随池子的脚步进入下一个系列，你将学会如何起盘一个品牌的店铺视觉，从主图，详情页，活动图，首页各个环节全方位了解单个品牌的各环节的设计思路， 帮助解决你进入公司后的实际难题，嘿嘿嘿。

说回正题，由于页面制作是电商设计工程量中最多的一个，一篇文章的篇幅远不足以让各位童鞋去做太多的细节思考，想要做深入理解需要大量实战经验和日常练习方能有效运用，本篇作为筑基实战篇的最后一节，池子打算以自己做过的多个案例品牌讲解为主，附带自己收集的一些网上案例来让各位童鞋对品牌页面的调性设计有个基础概念。




1.尺寸规范上，回顾回顾第四式开头，







记下这几个大的尺寸规范就够用，另外在PC端上的海报设计的时候，切记尽量在990-1100的范围内做你的设计核心内容，不然很容易造成装修页面后PC台式机由于屏幕宽度看不到你两边设计的内容，池子曾经时常看到这样的情况发生。而现在基本都以手机端为主要尺寸输出画面，因为现在大部分人都用手机购物，为了在手机端上有更好的视觉体验感，尺寸设计上更多以一屏一内容的方式去做展现，上篇池子已经提到过。

池子做过的案例中都是遵行这样的尺寸规范原则，直接上图看看。

PC端：

2.页面框架上,通常分为日常页面+活动页面2种形式,

其中日常页面框架为首页海报+优惠券+宝贝分类+主推宝贝+新品宝贝

活动页面框架为首页海报+优惠券+活动利益点+宝贝分类+爆款宝贝+新品宝贝，

这一部分的内容在实际项目中运营那边也会提前给到设计，这2个框架对付大部分类目来说几乎是够用了。直接上图。

日常更新PC：

活动更新PC：

但电商武林,总有那些想玩差异化路线的品牌，会用纯摄影的招式去做首页产品展现的框架，做到极致简单，把首页当作一个线下橱窗展示的空间，不做任何多余页面上的设计，比如做到极致的花笙记：

亦或者把页面结构做成一整个串联的故事，看完一个页面等于读完一个故事，思路各异，别出心裁，招式多样，别出心裁，池子另外找了些案例你们感受感受。




3.页面设计上，遵行视觉规范4方面分析法

找出品牌该有的配色，图形等元素，再根据每个类目产品的设计元素来进行分析起盘，池子经常提到的万物基于产品就是这个意思，挖掘出以上设计元素后，剩余的就是按照逻辑框架模块填充画面内容，具体怎么做？嘿嘿，拿出纸笔画出页面大框架，是不是有种熟悉的感觉？对呀，跟做海报的思路一样有木有？池子这一节也要教给你们一个思维转换招式，以后碰到页面这种设计的时候，把它当作一整个竖版海报来设计，这样才会有完整的视觉设计元素意识，不然很容易造成整个页面每个模块都是单独的，分开来看每个模块都没啥问题，而一旦合并成一整个，发现会有模块之间的过渡都不统一，主要是没有统一视觉语言的原因造成的。池子前几期的学员设计练习中就会经常发生这样的情况，比如：

既然找出了问题，下一个实战系列中池子也会拿实际案例的各种类目做详细的讲解。

以上，便是今天池子要给大家介绍的页面规范制作思路，想要给自己时间去沉淀练习的童鞋们抓紧时间，可抓紧时间真有说的那么简单？肯定不是啊，池子每天除了忙公司项目，还要还要抽时间码字，为了未来的百人大战发掘培养种子成员，还得各种互动解答咨询。。。说不累的，你来试几天？以上种种，哪有你上班在公司可以摸摸鱼，下班宅家看剧舒坦？但如果你不甘于眼前的舒坦，就抓紧时间找出合适自己的设计路数吧，结合池子的“电商设计十三式”，给自己一年的时间，让自己蜕变！想不想这一年的时间让池子陪你一起度过？

欢迎加入池子的社群，你起盘中的任何环节，不仅可以在群里和同路的小伙伴讨论，也可以找池子梳理脉络，同时展示自己的进步成果，得到让自己不再沉迷于刷抖音，光空想不实干的力量！池子和一群敢想敢做的小姐姐小哥哥们在等你。