淘宝无线端装修详情页设计

　　淘宝手机客户端至今为止约4亿次安装，是京东客户端的十几倍。去年阿里巴巴双11全天交易总额为912.17亿元，其中无线端贡献了68%的占比。所以现在无线端现在呈现出一种火热的趋势，无论是在商家数量、无线流量、成交额等都有一个量的提升。那么在此趋势下，店铺应该怎样用过思维模式和技巧来提高转化率呢?所以在设计淘宝无线端装修的时候需要思考问题。

　　在开始无线装修之前，我们首先要站在一个用户的角度去分析移动终端购物的用户使用习惯和购物环境，并思考如何通过页面装修引导消费。

　　一、移动端用户使用特点

　　1.使用时间碎片化

　　绝大部分人都是利用闲散的时间来浏览，可能是在等车，可能是午休时间或是吃饭的时候等着上菜，更有可能是在上厕所的时候。看的连贯时间可能不长，这就要求你的页面有简洁明了的表达，突出产品的卖点以及店铺的利益点，让消费者第一眼看得懂，其次有兴趣看下去。

　　2.快速阅读

　　对比在PC端的阅览习惯，移动端的阅读速度会相对更快。同时，用户在使用移动终端时的视觉相对PC而言较短，注意力集中时间会缩短。

　　因此，针对以上移动端用户特点，无线端的页面设计有一定的局限性，并不能像pc端页面那样具有较大自由度的发挥空间。

　　二、无线端页面设计要点

　　1.清晰的导购思路

　　用户在看手机的时候会比较放松，如果在4秒内不能吸引到他，那么就会被无情地提升走。因此，拥有一个清晰的导购思路是非常重要的。无线页面的设计核心是模块化，官方对页面模块的数量也是有限制，因此我们要利用有限的版块创造更多的价值。

　　整店布局规划——关键词：关联导购&闭环设计

　　首先我们来看一下，无线装修包括哪些内容：无线首页装修、无线详情页装修、二级页面这个三个大版块。我们要做的事情就是处理好这三者之间的销售关联。

　　我们经常要强调要以运营的思维去做设计，因为即使做得再漂亮但缺乏用户认同的设计不是好设计。无线端展示的内容有限，因此用户的浏览习惯肯定会有所不同。无线端的用户一般是从单个宝贝开始浏览，之后才到首页或二级页的浏览。我们经过测试和实践而总结出来的两点经验是：首页的前三屏不放单品，改放模块 (即分类入口或者海报)，这样页面的跳失率可以下降50%，我们通过这些模块引导，可以很好地让客户一层一层地浏览，加深用户的浏览兴趣。

　　然后，在处理首页——详情页——二级页这三者的关联上，我们要注意形成闭环的思路，在每一个页面的底部利用好图文模块的关联，搭建与其他页面连接的桥梁，引导用户到别的二级页面浏览。

　　无线首页布局规划的重要性：我们首先要根据店铺的消费人群进行分析，比如年龄、消费能力等，这些信息可以从江湖策进行查看。在确定好人群的喜好之后，我们就可以制定首页的视觉风格，是欧美风还是日韩风，有针对性的设计能让转化率和点击率更高哦!

　　普遍的无线首页是由以下几部分组成：店招、海报、分类入口、优惠券、单品展示等。一般而言，大都按照以下顺序排列。

　　比如下面这个首页案例，第一模块的位置，可以利用无线即时效应，如新品上线或大型活动的前期可在手机端提前预热，下面的模块给用户提供感兴趣的导购入口，降低跳失率。接下来就可以利用无线端活动展示+产品推荐，让用户依赖无线端，提高回访率。如果老客户人群占比较高，可以采用新品展示为主、人气产品展示为辅的形式呈现。　　

　　2.店铺调性：同一板块内不要超过3种颜色　　

　　在设计学中有一条“七秒钟定律”，有研究表明“人关注一个商品的时间通常为7秒钟，而这7秒钟的时间内70%的人确定购买的第一要素是色彩”。

　　同一板块内不要超过3种颜色。这三种颜色我们可以看作是主色、辅助色、提亮点缀。例如，上图中恒大冰泉的无线端页面，蓝色是主色、白色是辅助色，黄色是点缀色。设计师使用这样的配色方案是根据恒大冰泉的品牌VI色而决定的。这样的配色方案就能让这个页面看起来十分地和谐统一，因为无线的页面本身就很小，实在是不适合过多地卖弄色彩。

　　另外，在设计的时候可以多使用万能搭配色，如黑、白、灰等颜色。因为这些颜色比较百搭， 跟任何颜色搭配起来都会比较和谐和容易表现出高端的感觉。背景色尽量以浅色调为主，因为在移动端上观看，浅色的背景色更能突出产品本身，使得买家注意力集中在产品上。

　　3.注重细节设计：

　　(1)选取半身图或局部特写图

　　无线端的页面大多是以豆腐块的形式展现，范围确实有限，因此在选择图片上要尽量使用半身图或局部特写图，避免视觉上的不清晰。

　　(2)图片与图片之间的过渡搭配

　　如果全部都是用半身图或特写图的话，页面就会显得单调和乏味。所以我们可以适当地穿插一些全景图，有意识地调整页面的节奏，使得整个页面更加和谐活泼。

　　(3)图文搭配的排列技巧

　　排版是为了统一文字和图片的位置。在面积较小的情况下，统一能让画面看起来变得更大，还能避免因为“乱”和“杂”而产生的廉价感。

　　我们可以看到上面的无线海报案例相对于PC端的海报简直是小菜一碟，但想要做好它也不是容易的事情，根据实操积累的经验，我们可以得出以下技巧：

　　A.左图右文(左文右图)

　　文字的比例大多是占整个海报的1/2或1/3，文字尽量地放在同一个区域，在设计的时候，要注意文字间的关系，字体上粗下细、上大下小，架构主次分明。

　　B.背景色彩统一

　　无线海报要想引人注目，就要注意色彩的统一性。配色上要注意使用同色系饱和度不同的色彩或在色环上相差较远的色彩进行搭配。

　　C.主次要分明

　　无线的位置有限，我们在设计的时候要注意分清主次。先想清楚这个海报中要突出的重点是什么 ，是促销信息还是推宝贝，这些都是我们在设计之前明确的东西。

　　经历了15年，16年淘宝无线端已经爆发崛起，商场如战场，已经抢占先机的商家不能掉以轻心，需要不断地优化页面; 而刚进入无线战场的商家也不需要担心，我们可以吸取别人积累下来的经验，扬长避短，就能后来居上!