400-844-5354
在做购物网站设计这件事上, 我花费了八年的时间去盯着。我的经历是从给快时尚品牌抠首页像素开始, 到后来帮县城水果店搭线上商城结束。这期间踩的坑数量非常多, 据说可以绕地球一圈。今天我要把最实在的经验摊开来讲。这些经验全都是真金白银换回来的教训。
千万不要在起步阶段就急着去划分格子结构。我清楚地观察到了大量的人群, 当他们启动设计平台的时候, 习惯性地会先将三栏式的布局模板应用上去, 接着把商品的图片、文本标题、具体的价格数值以及交互按钮，按照严格的规则进行整齐排列处理。
那么问题的关键究竟存在哪里呢? 这实际上是因为顾客进入你的官方网站的根本目的, 并非是用来欣赏页面排版的美学设计的, 而是为了快速寻找到他们所期望购买的那个具体物品。
真正能用的逻辑是先确定动线然后再确定模块, 用户从进门到最终下单中间要经过几个步骤, 在每个步骤中他正在寻找什么东西, 把这样一条路径给画出来让模块去跟随这条线移动。
如果你销售的是能够引发冲动购买的消费品, 那么在首页里就应该让大尺寸图片和价格占据视觉上的八成比重；如果你销售的是那些价格较高的三c数码产品, 那么参数对比的内容以及评测的入口才应该处于核心的位置。
我接过的订单里面, 至少有三分之一的老板开口就跟我说要那种高级感, 然后直接递过来一张黑底金色边儿的参考图片。我说哥们, 你卖的这玩意儿就是九块九一双的袜子, 不是那爱马仕包包, 你拿这个标准来要求真的不合适。
配色这件事, 有一条规则是非常明确且必须遵守的: 主色的数量不能超过两个,而强调色只能有一个。背景的填充, 应该使用大面积的中性色调, 白色、浅灰色或者米色, 这些颜色都是可以接受的选项。
至于品牌自身的专属色彩, 只应当应用在那些需要视觉突出和强调的元素区域, 比如按钮样式、信息标签以及价格显示等位置。
特别是在在手机端进行设计时, 这一原则更是要重点关注, 如果采用了深色的背景却搭配了较小的文字, 那么用户在户外受到阳光照射的影响下阅读时, 就会因为清晰度不足而导致视觉模糊, 结果就是看得糊成一团糟的状况。
许多人认为购物网站的设计是一种一次性的工作, 当首页制作完成、详情页制作完成后，结清尾款，事情就到此为止了。但事实上, 真正拉开差距的地方在于“项目结束以后”的用户体验。
我平常的做法是在最终的结账步骤当中放置一个比较轻量的会员引导入口, 这个入口不是通过弹出窗口那种形式展现出来的, 而是当用户填写完毕地址并看到所谓再购买一件就可以立减五块钱这样的优惠提示时, 可以很顺手地就勾选参与。
另外还需要注意售后页面的语气问题, 千万不要去书写如果有问题请立刻联系客户服务人员这种话术, 而是要去编写东西一旦到手之后如果感觉到不满意请直接点击此处进行办理, 在四十八小时以内都能退回的说法, 因为人走茶凉这种现象并不是由设计理念的问题导致的, 而是因为你完全就没有打算让对方再次回来。
设计稿做得再漂亮, 也没用。如果打开页面需要等待四秒钟。用户早就把窗口关掉了。我有一个习惯。在每一个购物网站的设计项目交付之前。我会先运行一次性能检测。一旦首屏加载时间超过了两秒。我就会直接要求打回去重新制作。
具体来讲, 应该如何进行压缩操作呢? 建议将商品的图片更换为WebP这种格式, 在页面首屏阶段, 仅仅加载那些处于用户可视范围内的图片, 而其余部分的图片则采用懒加载的方式去处理。
千万不要在主页面中强行堆积七八个轮播图的广告栏, 我曾经见过一个专门销售茶叶的网站, 在其首页竟然塞入了四个全屏幕的视频内容, 导致在4G网络环境下, 整整转了六秒钟才显示出页面内的信息。
最大的坑根本就不是设计得丑, 而是甲方把设计当成了开发。我之前跟一个老板去改稿子, 他跟我说要把那个按钮做得更大气一点。我问了他具体是大气的多大、是什么颜色、圆角是多大, 他说你看着办就行, 反正就是大气。改到了第七版的时候, 他直接甩出一句说不弄了, 就用第一版吧。
第二个坑, 它是抄。这不是在抄什么思路, 而是对某个大牌网站里的交互模式进行像素级别地复制。
当你在进行抄袭的时候, 你把自己拿来的那个筛选功能照搬过来了, 然而你的平台没有对方那样庞大的数据储备, 也缺乏像它们那么深入的分类体系, 结果就是用户点击这些按钮进入页面后看到的情况是一个空荡荡的状态, 这种糟糕的体验甚至比压根没有筛选器还要令人心生退意。
经历了长达八年的工作实践之后, 我对于某一个事情变得越来越确信了, 那就是购物网站设计的核心关键点在于让下单这个行为变得毫不费力气, 而不是所谓的外在看起来很漂亮, 去除掉每一个用户在进入页面到最终完成付款的整个过程中所遇到的每一丝阻碍感, 这种方法的效果比使用任何华丽繁杂的动画特效都要更加管用。
2023-05-10
2022-04-12
2026-05-30
2023-06-14
2024-04-24
2024-05-06
2023-03-01
2023-05-10
2024-06-21
2026-02-03
返回列表
返回顶部