轻松搞定移动端详情页设计！

身边很多小伙伴抱怨：为啥做个移动端页面要纠缠很久？ 难道对方故意虐我千百遍！

我想砸死你！

So,怎样才能做出

吸引人&转化率高的详情页？

还是得向设计界的大师请教！

听说，学习以下4种套路，你就无敌了

This is 套路！

1.头图一定要吸引人

关键字：大

头图得有一个占比比较大的作为主体，无论是产品／模特还是文字，可以第一眼就抓住人眼球。

人物为主体

产品为主体

产品为主体

局部位置放大

关键字：美

能用美女或帅哥的地方千万别浪费，因为当用户在浏览这些页面的时候，会感觉是有一位美女或帅哥在对你解说，或者让用户觉得自己也能成为美女或帅哥一样，使人身心愉悦，比单纯放产品图更能打动人(前提:你确实用的是吸引人的美女或帅哥，所以审美很重要）

如果可能的话，尽量用品质好一点的产品图或背景素材，使画面显得更加美观（当然了，需要你的审美能力）

卡戴珊家族，年仅20岁的小妹Kylie Jenner ，凭借自己的网红人气成立了Kylie Jenner 品牌，有化妆品、服装等。每次上线，几分钟内就被网友抢完。听说，她几秒钟稳赚百万美金。 看看她的产品宣传页

关键字：飘

有时在画面里添加一些飘动的元素，可以增加画面的层次感和热闹氛围。芒果和茶叶还有蜜桃纷纷“从天而降”。 

关键词：脑洞

这个脑洞，可以是技术方面的也可以创意想法方面的，技术方面的比如合成／手绘／C4D与构图的运用，创意想法方面其实就因人而异了，并没有什么固定的套路，然后你能用你所掌握的技术把这些创意想法表现出来就行。

作品来自behance的C4D＋合成作品，不过这个花费时间应该不少

来自behance上的TIMAWORKS团队的作品，用到了C4D＋摄影＋合成＋手绘

像这种需要花费大量时间的制作，基本每天抽出一些时间私下练习，大概一到两周可以掌握C4D。

关键词：光影
没有光影的画面会显得干瘪瘪的，光影的存在会给画面增加更多真实感和质感，赏心悦目，档次一下就提升了。

同样一款产品，如果没有光影，差别会很大。所以，为什么人家发照片喜欢用一个滤镜。比如说以下两张图，可以自行对比。

2.整体风格要连贯

关键词：提取
详情页是为介绍产品而用的，在做设计的时候可以用提取法。比如提取产品包装上的元素或形状，提取产品的色彩或质感，提取产品的成分或功效，再应用到详情页里。

例如：元素，可以从产品包装上提取元素应用在详情页设计里，保证整体风格连贯性。

形状：可以从产品的形状着手，提取基本型进行构图创作，也可以保证统一连贯性。比如说包图网的素材海报，设计师就画了几个菜的形状。

色彩，如果你想要页面在色彩上保持连贯，也可以从产品本身的颜色出发，比如采用近似色或对比色也可以。质感，善用产品的质地或包装的质感纹理，并提取出来做详情页背景用。成分，食品或者美装护肤品详情页最喜欢用产品的成分来做文章了，比如说饮料就用产品成本直接区分口味。功效，比如补水功效，就会在页面里用到一些水的特效做氛围点缀。

3.整体气质要搭调

关键词：协调

每一个详情页其实对应的就是一款产品一个主题，主题活动或产品不同，其气质肯定就不一样了，所以这里的协调反应出来的首先其实是气质上的协调。

高冷的大牌的气质：画面要么很简洁有质感，有么很华丽有光泽

活泼可爱的气质：比如可爱的模特／字体／或粉能的颜色／手绘元素等。

文艺素雅的气质：这种页面色彩不会台艳丽也不会特别多彩，往往质感也比较柔和，给人宁静的感觉。

形状，如果产品本身的形状是比较柔和的曲线，你却使用太过菱角的图形元素装饰页面那就会显得不协调，而用同样比较柔和的曲线会感觉更协调。

产品详情页或者海报设计都看品牌整体定位，这也是让设计师有更多发挥的空间。

4.浏览体验要好

那么怎样才能吸引人呢？看以下关键词

关键词：人性化

如果你能做到前面几步，那么你可能会产出一份视觉不错的详情页设计，但光只是做到视觉上的美观还不足以打动人去购买你的产品，你还得给人更好的浏览体验才对，具体表现在以下几个方面

听我说！

排版布局

形式不能过于浮夸，那么一些比较常用的布局方式有哪些呢？

左右对比形式：专题页，常见于需要表现出PK或者VS对决类的专题页设计。

S形：整体浏览视觉效果让用户觉得很轻松，没有带来视觉上的压力。

Z形的专题页，这种形式的专题页其实跟S形的作用是类似的，只是说这种Z形会比S形硬朗，更适合用作一些比较男性化的风格页面或者品类里，比如电子器械／汽车／男士护肤／游戏等1字形的专题页，有一种硬朗和厚重的感觉，这种形式的专题页除非是有如下图所示的这种高质量模特大图或产品图镇楼，一般情况下很少用到，尤其是在卖货类型的专题页里，可能会显得背景有点抢镜了。

常规楼层类型的专题页，这种页面会显得比较简洁好把控，主要在于背景颜色要有深－浅－深－浅的节奏，同时每一个楼层都是单独的模块，有利于信息阅读。

同理，楼层类型的专题页还可以做一些一些细微的演变，比如从上至下，背景不做切割，始终是一个整体，只是保证中间的内容在一个安全数值以内就好了，比如京东的中间内容区域一般是990Px：还有在原来的基础上，在某一块楼层里做一些排版小变化，比如切分成一小块i一小块的自由排版：

自由排版类型的专题页，这种专题页设计比较适合那些想走高逼格路线的时尚服饰类目，同时这种设计往往是看着简洁，但是对设计师的排版功力要求比较高，不建议新手或没什么功力的人尝试：字号大小：目前移动端详情页的设计才是重中之重，所以为了便于大家手机阅读更舒适，最小字号不能低于20号，最大字号大家就可以自己估摸着来了，也可以参考各大平台app的最小字号

字体选择

其实主要记住下面几个对比规律就好了
背景复杂，字体选粗一点的或笔画规整一点的比较好；
背景简单，字体选择就多一些，不过也要考虑气质搭不搭调；
背景颜色暗，字体颜色就该亮一点；
背景颜色亮，字体颜色就该深一点；

不管背景复杂与否或明还是暗，字体越大越便于识别，不过也要考虑美观与否；

好了，我不多说了

* 最后一点，关于图片质量越高体验越好以及手机详情页页面长度不要超过8-10屏

——部分内容来自做设计的面条
ID:TTink-D

包图网 是为设计师提供原创、正版商用素材的平台哦~快来关注我们的公众号吧，很多设计尸的聚集地，这里是一个炒鸡好玩的地方！

《详细解析人像后期精修的10大误区》

【点击阅读原文】