网站首页 > 平面设计> 文章内容

四步解说搞定吸引人的移动端详情页设计

※发布时间:2018-6-30 6:26:14   ※发布作者:habao   ※出自何处: 

  本文依然是关于详情页设计,涉及到了排版/构图/色彩/氛围点缀/字体等多个方面。以下是我总结了可以让你的详情页脱颖而出的四个系列的套,兴许对你们有用!enjoy~

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

  (这是我年初做的一款茶叶详情页,当时的包装无论是颜色还是样式都是比较普通的,作为设计师的我能做的是尽量让它更具创意一点,于是就打破了它。)

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

  如果可能的话,尽量用品质好一点的产品图或背景素材,使画面显得更加美观(当然了,这个还是需要审美能力……)

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

  不过但凡是涉及到这么多脑洞和技能方面的作品所需要花费的时间和精力都会比平时多很多,而目前大部分详情页设计给的时间是估计2-7天,更有一些设计师一天要套版十几个详情页,所以如果时间不允许的话就自己私下做来让自己的作品更具吸引力吧,每天抽出一点时间,一个星期或一个月下来也够了。

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

  (加了光影和背景纹理后,产品整体的气质和档次都提升了,当然光影的形式也是千种万种的,主要取决于你自己想怎么表现了)

  但实际产品长这样。。。如果你知道实物长这样你估计就不会买了对不对?所以美真的很重要。。。,况且还是三四百块钱的护肤品呢~

  既然详情页是为介绍产品而用的,那么我们在做设计的时候当然就可以用提取法了,比如提取产品包装上的元素或形状,提取产品的色彩或质感,提取产品的成分或功效,然后应用在详情页设计里,例如:

  色彩,如果你想要页面在色彩上保持连贯,也可以从产品本身的颜色出发,比如采用近似色或对比色也可以。

  成分,食品美装护肤品详情页最喜欢用产品的成分来做文章了,比如草本植物/芦荟海藻提取物/蜂蜜牛奶等等。

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

  这种类型的页面往往色彩丰富艳丽,而且画面丰富又具有动感(因为花瓣网今天一天都打不开,所以我没有找到合适的案例,姑且先把这个以前的案例banner拿来举例吧)。

  这种气质的页面往往棱角比较分明,色彩上貌似没什么太多要求,主要看怎么搭配,但至少会有一些亮色点缀。

  这类气质的页面主要是会有一些比较男性化的元素/色彩,比如机械零件/暗色蓝色/菱角矩形之类的。

  而气质上的协调又基本是由色彩/元素/字体/形状/质感/氛围等等方面的协调整体塑造出来的一种感觉。

  比如色彩上,产品如果是这样比较女性化的色彩,那你就不可能去使用男性化的色彩去包装它,这会显得很突兀,反之亦然。

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

  其实不知道大家发现没有,产品的品牌定位或功效往往决定了他的外包装设计,而他的外包装设计或者说vi设计又会决定她的详情页设计,所以电商设计师以后的发展趋势可能不止是要关注线上就够了,有时间的话平时也留意下线下传统平面设计方面的知识吧,现在很多店铺在品牌视觉统一方面的意识还是比较欠缺的,而这也正好是设计师们可以去发挥的机会。

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

  形式不能过于浮夸,那么一些比较常用的布局方式有哪些呢?我给大家汇总了一下,其实跟专题页设计布局排版是类似的,我干脆拿以前总结的样式给大家看一下:

  S形的专题页,这种形式的专题页基本上不管什么需求的设计都可以尝试,因为它相比于平铺直叙的形式既不会显得那么呆板,同时阅读起来也很流畅,举例:

  Z形的专题页,这种形式的专题页其实跟S形的作用是类似的,只是说这种Z形会比S形硬朗,更适合用作一些比较男性化的风格页面或者品类里,比如电子器械/汽车/男士护肤/游戏等,举例:

  1字形的专题页,有一种硬朗和厚重的感觉,这种形式的专题页除非是有如下图所示的这种高质量模特大图或产品图镇楼,一般情况下很少用到,尤其是在卖货类型的专题页里,可能会显得背景有点抢镜了。

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

  同理,楼层类型的专题页还可以做一些一些细微的演变,比如从上至下,背景不做切割,始终是一个整体,只是中间的内容在一个安全数值以内就好了,比如京东的中间内容区域一般是990Px:

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

  目前移动端详情页的设计才是重中之重,所以为了便于大家手机阅读更舒适,最小字号不能低于20号,最大字号大家就可以自己估摸着来了,也可以参考各大平台app的最小字号:

  尽量选择便于识别的字体,但这个便不便于识别也是相对的,比如以苹方简纤细体为例,如果是放在比较简洁的背景上,它其实也是一款便于识别的字体,如标识1处,但如果放在复杂背景上它就不是一款便于识别的字体,如标识2处:

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

  详情页虽然跟专题页和首页设计一样,都是很长的的图,但是详情页设计只是对某一款产品的介绍和展示,而且大多数时候都是需要拿来做模版使用的(其他产品可以直接套用),而专题页和首页设计则至少会展示2款产品以上,而且主要是以某个活动主题为主线,同时展示各种产品名称/品牌/规格/价格等基本信息用,更详细的产品介绍内容则要在详情页里进行。

  这就好比,详情页设计里其实就只有产品这一个主角,而在专题页或首页设计里却可能有好几个主角和一堆配角。前者你只需要对一款产品进行解说,你所有的目的只是为了介绍它,而后者你首先要吆喝一下这家店里或街上有哪些是主角(重点推荐产品),然后还要把一整个门店或一整条街进行解说一遍(商品列表展示)。

  还有哦,虽然我每篇文章都会给出很多新思和方法,但是如果你不去运用不去做也是没有用的,所以还是动手练起来吧!~~

  做设计的面条,号:做设计的面条,人人都是产品经理专栏作家。一位擅长将电商及banner设计讲得最透彻易懂的妹子,有趣有料会拍照,欢迎互相交流。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

  本文由 790游戏(www.790.kim)整理发布