最近用淘宝买东西。选好产品后,我点击了“立即购买”按钮,然后“订单确认”页面让我大吃一惊!
界面显示非常清晰,优惠信息占据了最突出的黄金位置。
这种改变不仅是一种巧妙的创新,更是直击用户的酷点。
淘宝这个国内最大的电商平台,还在不断的进步和创新,真的需要表扬。
具体说一下吧。
我觉得更省钱了
改版后界面最明显的变化就是在最显眼的黄金位置提到了优惠信息。
具体来说,在新版本的界面中,设计师收集了所有与价格相关的信息,并将其制作成卡片。
用“图标+文字”来表达优惠信息的部分,使这部分信息在视觉上更加突出,强化省钱的印象。
在页面的CTA(行动号召)按钮,也就是“提交订单”按钮旁边,设计师还没有忘记再次展示优惠信息,以促进这个按钮的点击。
看到这么多省钱的信息,心里真的有个声音在喊:你省的就是你赚的!
这种省钱的感觉才是购物体验的核心,也让人耳目一新。
仅凭这一点改变,可以断言新的界面一定会提高这个页面的转化率。

为什么?
因为前人已经总结了影响用户行为的因素,分别是:
用户的行为=动机*能力*触发
这个模型被称为福格模型。
在新版界面中,优惠信息给予用户更大的付费动力;
胶囊形状的“提交订单”按钮比以前的界面更加突出,给用户一个触发式的视觉提醒。
这个改版数据还是没有提高吗?
还有王法吗?。。
从这次改版的方向,也可以看出淘宝购物体验的一些变化:
淘宝一开始的重点是“什么都能找到”:要不要在网上买东西?直接去淘宝就好了;
后来淘宝率先将兴趣推荐引入电商,积极打造内容社区。
后来随着各种新兴类型电商的兴起,电商这块大蛋糕也被网易YEATION、毒、拼多多等比较典型的app瓜分了。
正是在这样的背景下,淘宝悄然推出了淘宝省钱卡。
不得不说,这张省钱卡确实起到了提高留存的作用。
现在在沐风购物,很多时候因为这张省钱卡的存在,会更倾向于在淘宝买东西。
省钱是刚需,这一点在淘宝新界面中被放大了。
这种放大可以通过设计者的独创性来完成。
不得不说,这是一个很棒的设计优化案例。
除了省钱的感觉,新版本的界面很直观。乍一看,右边的界面有一种耳目一新的感觉。
这种新鲜感主要归因于三个变化:
分类,简化,视觉重点优化。
分类
人脑喜欢分类。当大量的物体摆在你面前时,你自然会感到快乐,因为这样,大脑处理信息就会容易得多。
淘宝的订单确认页面,以卡片的形式呈现:
简化
新版界面简化了旧版中的一些非必要元素,如“收货人”复印件、“收货地址”复印件、收货信息下的条纹图案等。
这些简化只有在电商培养了用户心智多年之后才能进行:
用户刚接触电商的时候,对什么都不熟悉,需要非常明确的提示信息,比如“收货人”、“收货地址”等,保证用户清楚地知道在这里填写什么信息。
接收信息下方类似字母的条纹也是在提醒“这里是接收信息”。
但是随着用户对网购越来越熟悉,大家都很清楚,上面的姓名、地址、电话是用来收货的,所以这些辅助信息可以删除。
另外,统一去除了界面中的分割线,用更大的行距来区分,视觉效果更简单。
视觉焦点优化
在新版界面中,移除了顶部的品牌颜色,使页面更加突出,同时底部最重要的CTA按钮“提交订单”成为页面最突出的元素。
此外,界面的字体大小也得到了合理的增加,减轻了阅读负担。
总而言之:
分类合理+间距大+元素少+字体大。
谁不爱这清爽的界面?
不得不说这个页面的设计修改非常出色。版本中没有添加页面功能。在实际工作中,可以由设计者主动提出。
这样可以带动页面转化率的修正,无论放在什么样的公司,都必然会受到领导的欢迎。
原因很简单:可以带来直接的现金收益。
公司是一个盈利组织。谁创造的利润多,谁的话语权就大,工资就高,这是很自然的。
要做好这样的规划,仅仅掌握形状、色彩、文字、结构、品质的UI界面设计技巧显然是不够的。
设计师还需要对用户场景有了解,积累心智模型,掌握交互原理,对用户行为有感知,才能做出更能促进用户行为转化的界面。
这也是我一直推荐你学习交互设计的原因。
因为交互设计就是要同时考虑公司的业务需求和用户的行为、场景,从而做出一个既能改善数据,又能让用户喜欢使用的解决方案。
想系统的学习交互,可以看我写的步步赢。
微信和豆瓣评分还是比较悬殊的。
以上已经分析了淘宝“确认订单”页面的修改。感谢您的阅读。








