产品详情页网页设计(网页设计商品详情页面)

　　今天京涛老师分享的的干货内容是关于详情页设计，涉及到了排版／构图／色彩／氛围点缀／字体等多个方面。以下京涛老师总结了可以让你的详情页脱颖而出的四个系列的套路，兴许对你们有用！

　　一、头图一定要吸引人

　　那么怎样才能吸引人呢？京涛老师给大家总结了一些关键词：

　　关键字：大

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

　　关键字：破

　　如果你不想画面太过于保守和单调，可以尝试打破它，比如将规矩图形异化，或者让产品放在界限以外。

　　关键字：美

　　能用美女或帅哥的地方千万别浪费了，因为当用户在浏览这些页面的时候，会感觉是有一位美女或帅哥在对你解说或者让用户觉得自己也能成为美女或帅哥一样，使人身心愉悦，比单纯放产品图更能打动人。

　　关键字：飘

　　有时在画面里添加一些飘动的元素，可以增加画面的层次感和热闹氛围；

　　关键词：脑洞

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

　　二、整体风格要连贯

　　既然详情页是为介绍产品而用的，那么我们在做设计的时候当然就可以用提取法了，比如提取产品包装上的元素或形状，提取产品的色彩或质感，提取产品的成分或功效，然后应用在详情页设计里。我们也可以从产品的形状着手，提取基本型进行构图创作，同様也可以保证统一连贯性。如果你想要页面在色彩上保持连贯，也可以从产品本身的颜色出发，比如采用近似色或对比色也可以。善用产品的质地或包装的质感纹理，并提取出来做详情页背景用。

　　三、整体气质要搭调

　　每一个详情页其实对应的就是一款产品一个主题，主题活动或产品不同，其气质肯定就不一样了，所以这里的协调反应出来的首先其实是气质上的协调；而气质上的协调又基本是由色彩／元素／字体／形状／质感／氛围等等方面的协调整体塑造出来的一种感觉。

　　四、整体浏览器体验要好

　　在排版布局上京涛老师给大家汇总了一下：

　　左右对比形式的专题页，常见于需要表现出PK或者VS对决类的专题页设计。楼层类型的专题页还可以做一些一些细微的演变，比如从上至下，背景不做切割，始终是一个整体，只是保证中间的内容在一个安全数值以内就好了。

　　自由排版类型的专题页，这种专题页设计比较适合那些想走高逼格路线的时尚服饰类目，同时这种设计往往是看着简洁，但是对设计师的排版功力要求比较高，不建议新手或没什么功力的人尝试：

　　在字号大小的选择上：目前移动端详情页的设计才是重中之重，所以为了便于大家手机阅读更舒适，最小字号不能低于20号。

　　在字体的选择上：尽量选择便于识别的字体。

　　在色彩选择上：颜色越深给人感觉就越神秘或压抑或沉稳有质感，颜色越明亮给人感觉就越年轻活力或轻浮或张扬，在用色上其实最忌讳的是一暗到底或者一亮到底，要有明有暗才会比较透气或耐看，让人感觉愉悦。

　　最后一点，关于图片质量越高体验越好以及手机详情页页面长度不要超过8-10屏。详情页虽然跟专题页和首页设计一样，都是很长的的图，但是详情页设计只是对某一款产品的介绍和展示，而且大多数时候都是需要拿来做模版使用的（其他产品可以直接套用），而专题页和首页设计则至少会展示2款产品以上，而且主要是以某个活动主题为主线，同时展示各种产品名称／品牌／规格／价格等基本信息用，更详细的产品介绍内容则要在详情页里进行。

　　以上就是京涛老师为商家分享的移动端详情页设计的要点，希望对商家有所帮助！