中国美工如何做好详情页？“中国美工”这个词最近挺火的，我同事天天挂嘴边，连吃鸡网名都叫中国美工。中国美工这四个字博大精深，看似调侃，实则大有内涵。中国美工或许不能与世界大师并肩，但骨子却有一股劲，愿意站在巨人的肩膀上，不断创新和超越，设计出属于自己的东西。 虽然有那股劲在，但总有很多自嘲“我只是个小美工”的人，对于如何设计出一个好的详情页，依然一头雾水，他们当中，有些或许刚接触电商，有些已经在电商行业浑水摸鱼三四年了，尤其最近，我面试了一批应届实习生，发现了大家都存在类似的问题： 1）：大多数没有专业系统设计培训，只会简单的PS2）：毕业作品看着都挺成熟的，但一上岗实操，只会抠个图，套个版3）：工作进度慢，效率低4）：脑子空白，没思路5）：深受运营压迫，自己没想法，经常加班，成品却差强人意 这些应届生刚入社会，缺乏经验可以理解，但我身边很多朋友，已经在电商这个行业混了三四年了，让他单独设计一个详情页或是活动首页，立马打回原形：1：页面毫无设计美感，自己完全没意识到2：天天看设计大神的作品以及思路，却毫无提升 3：自称会C4D会手绘，但设计出来的版式、风格以及配色，运营和老板都不买账。4：已经混成老油条，不思进取，天天各种夸这个作品好，大神工资高。 然后呢？。（给自己了一个问号，再画上句号）。 一堆隐藏在深处内心深处的借口阻止自己进步与突破： 我技术不行，做不出这个效果！我没有这个资源来支撑！这个拍摄效果不符合，这个角度我没有！这个模特或这个产品太难修图！ 那你有什么？真正创造者，就是在有限的素材和资源上，加以创作和发挥，做出拿得出手的成熟作品。 巧的是，前段时间我接到了一个朋友的单子，要求不高，但提供的素材也很少，就产品正面图和文案，我花了两个晚上来完成，前期给自己制定了方向和思路。
094131gqkr3ccgykaf8ia5.jpg
(318.03 KB, 下载次数: 0, 售价: 4 U点)
（配图1）（产品正面图+文案） 第一天晚上花了4小时，搜集素材和寻找灵感，不要小看这一步，但思路和板式在你脑海中成型，接下来你需要做的，只是细节的设计和内容的填充。所以第二个晚上，我花了5小时，将整个详情页顺利完成。朋友看后，也表示满意。 下面我就来阐述一下，接到单子后，我是如何来做这个详情页的： 第一步：你需要跟对方做好沟通，确定好所需要的大致设计风格，如果他有参考方向，那就最好，发案例给你是最直接的。
094131a8z8wmawe9ymo44a.jpg
(103.62 KB, 下载次数: 0, 售价: 1 U点)
（配图2）（案例参考图） 前期做好沟通后，接下来就需要你自己根据对方提供的资料，好好琢磨和思考，该这么着手效率最高，做出来的效果又能令对方满意？ 详情页第一屏很关键，它决定别人有没有继续看下去的欲望，同时能不能在1秒钟内吸引别人的眼球。如果你自己没有思路和灵感，听我的，打开花瓣就是干！ 怎么干？下面我们一步步来分析：首先：《简单总结制作大概方向思考》假设我接到的单子是有关椰汁产品的设计，那么就要考虑与椰汁相关的元素，椰子树、海边、蓝天、白云、以及浓浓的椰汁等。第一屏的海报肯定就要正视角的场景，视野明朗，画面跟夏天凉爽清新的意境相搭。 接下来《寻找案例》，关键词搜索，详情页/合成，目的是找到自己构想中的效果。
094131czpkd9kpa66a5ec9.jpg
(596.92 KB, 下载次数: 0, 售价: 3 U点)
（配图3）（案例参考图） 1）：《建立搜索素材的关键词》海边/沙滩/椰子/椰子树/等根据你构想的画面。这么方式日常可以锻炼下，比如中国美工四个字，与之相关联的关键词可以有：电脑/PS/上班姿势/夜晚/熬夜/恼怒等等。
094131o28ty7q7nbq181xt.jpg
(392.83 KB, 下载次数: 0, 售价: 3 U点)
（配图4）（素材图） 2）：《根据素材情况执行设计方案》有时候某一张图，可以在瞬间打开你的思路和激发你的灵感。
094131swzvhhnnmfehw1jm.jpg
(575.9 KB, 下载次数: 0, 售价: 3 U点)
（配图5）（首屏素材构成图）
094131n9z7m225m7ne7qm3.jpg
(23.6 KB, 下载次数: 0, 售价: 3 U点)
（配图6）（使用基本的抠图+简易调色）
094131fvbsubbzues9bux9.gif
(2.56 MB, 下载次数: 0, 售价: 1 U点)
（配图7）（首屏合成动态图） 首屏制作完后就是底部内容排版，有了思路和架构后，根据文案，一屏一屏的来。有文案之后其实就是看文案配图。第二屏做好之后会给底部的内容省时省思考。这时候可能你会说，我没想法怎么办？第二屏怎么接才好？ 一样，不会做没思路先看别人都是怎么做的。市场上详情页除了首屏之外，底下内容都是怎么做的？
094131aynxogq7sorx2qn2.jpg
(354.91 KB, 下载次数: 0, 售价: 4 U点)
（配图8）（底部案例参考分析图） 案例显示1：简洁背景 2：标题字体不超过两行 3：主标题大+粗 4：副标题小又细 5：平面图建立空间感 6：居中对齐或者居左对齐 7：正规字体 8：颜色不超过两种那么跟着我的思路来分析下，背景选择简约干净的，字体主标题粗大，小标题小细，正规字体。
094131v2rhn7n7u1bqp2ne.gif
(462.44 KB, 下载次数: 0, 售价: 6 U点)
（配图9）（参考案例分析后做主的内容图） 第一屏与第二屏信息内容定下来之后，底部就按照第二屏的同样思路，反正标题字体外加颜色不超2种，制定出来之后，整个详情页的视觉可以保证统一性，不凌乱，而且你是参杂比较成熟的页面出来的详情页，效果不会差。
094131vpd79j9vwcm8vspr.gif
(516.15 KB, 下载次数: 0, 售价: 1 U点)
（配图10）
094131ffgr9brglhdrr4gf.gif
(132.47 KB, 下载次数: 0, 售价: 2 U点)
（配图11）
094131twmawj4w03ab3al4.gif
(234.87 KB, 下载次数: 0, 售价: 4 U点)
（配图12）
094131i8txxt0d9xc6r0x8.gif
(221.38 KB, 下载次数: 0, 售价: 4 U点)
（配图13） 以上的思路是针对详情页制作不是很熟悉的老手或新手参考。希望让初入设计这行的设计者更快的适应行业节奏，老设计师更好的熟悉详情页的制作套路，思考方向。下半部分的内容更加简单了，针对小商家小众产品制作起来没屏不超过十个PS操作步骤，初学者可借鉴。
094131jssw9eelb95le4b9.jpg
(9.64 KB, 下载次数: 0, 售价: 6 U点)
（配图14） 一稿过！细节其实很粗糙，不精致，但是对于小商家这样的页面已经足够用了。思路仅提供参考，下面是我整体页面效果。其最终目的是为了让新手或者是老手，思路空白的情况下，用最直接最有效的方式解决自己的思路瓶颈！
094131ufrkdffqz3srsdfo.jpg
(4.82 MB, 下载次数: 0, 售价: 3 U点)
（配图15） 高大上的设计让小美工遥不可及，只希望目前的自己能够服务好我的上司，我的公司。当你成熟驾驭之后，自然就会结合大神们分享的透视合成，空间留白，黄金比例等等。如果这样的小技巧对你很管用的话，可以留言，后期会针对大家现实工作中，比如：活动海报，首页制作思路，入门级的一些分享，让大家更加直白的去了解如何去设计图，实用/高效/直接。 写完已经是凌晨三点了！也许我的制作思路和技巧不算特别出彩，但都是我真实经验和心得，希望能对你有所帮助，喜欢的朋友可以点赞支持一下，最后谢谢大家耐心看完，欢迎留言，跟我交流与分享。 |
