飞速星空
资讯首页>> 桌面制作免费下载
移动结账屏幕的设计技巧
[更新:2018-02-26 08:41:15] [浏览:18次]

设计您的网站以获得更好的转换率是增加销售额的有效方法。 但是你也需要考虑你的在线商店的一般用户体验原则,这对于移动用户来说是两倍。

大部分互联网流量现在由移动设备占据主导地位。 2017年,整个互联网移动用户的估计总数达到52%左右。 如果您没有针对移动设备进行优化,那么这种做法在电子商务领域是错误的。

这里整理策划了一些设计想法来帮助您清理结帐页面。 这些提示可能并不适用于每个商店,差异取决于您销售的产品类型。

虽然如果您认真对待增加转换次数,本指南是您迈向更大移动客户群的第一步。

轻松编辑选项

从产品页面到结帐的整个流程应该感觉非常简单。 这意味着当访客点击“结帐”时,如果需要,他们可以轻松访问编辑订单。

尝试提供一个可编辑的购物车,买家可以在其中更改数量,尺寸,颜色,款式等等。 所有这些理想情况下都可以在几个点击范围内完成。

不要增加结账阻力或使其比需要的更难。 买方的想法有很多,你想把阻力降低到零。

看一看Yummygum的这个示例设计。 它适用于订单结账页面,买方可以轻松地增加或减少订单总数以及订单的日期和时间。

请注意界面元素是如何为轻巧而设计的。 他们使用大方块和丰富多彩的亮点来表示微交互。 适合移动设备。

接口再次引用结账前的总项目数量。 箭头图标使这个超级清晰,他们也觉得可以点击。

想想你的顾客在购买之前可能想要改变的属性。 在最终结帐前向他们展示所有内容,并为他们提供完整的访问权限来编辑他们的订单

这创造了建立信任和确保他们真正想要购买的心理。

链接付款方式

在桌面或笔记本电脑上处理付款很简单。 通常你可以拿起你的信用卡并输入数字。

但智能手机并不容易。

移动键盘非常棒,但它们与完整的桌面键盘相比并不相同。 您需要简化付款流程并理想地简化为几次点击。

你怎么能这样做? 通过关联付款并将其保存在客户的帐户中。

每当他们买东西的时候询问他们是否想为将来的购买节省付款方式。 然后,您可以创建一个屏幕,让买家在信用卡,PayPal账户或他们过去使用的任何付款方式中进行选择。

使用这种类型的界面,更简单更好。 但是,您也可能想分享有关付款方式的详细信息,以确认它是正确的。

以Vishnu Prasad的这种设计为例。 它清楚地展示了结账屏幕可能会如何保存信用卡号码。

我不喜欢数据如何清晰地显示,这是我唯一对此UI感到满意的。 我会设计它默认情况下隐藏,一个水龙头会显示/隐藏。 但重要的是,买家可以在购买前检查他们的细节。

不是每个买家都会想要这样做。 您仍然需要一个安全的表单来获取信用卡信息。 这个例子是一个非常清晰的移动结账用户界面,只有足够的字段来完成该过程。

我实际上喜欢这种风格的进度步骤,因为它减少了一页上的字段总数。

对于UX来说,这实际上也是一个很好的趋势,我们应该进一步研究一下。

使用逐步结帐流程

无论您使用制表符,面包屑还是循环链接,它们都可以用作进度步骤。

这些帮助指导用户完成结帐流程,告诉他们准确地完成所有事情的时间。 它看起来可能不多,但优化您的结帐页面的过程是巨大的。

用一个奇妙的进度步骤来看看这个结帐界面。

CTA按钮基于页面而改变,所以它可以帮助用户自然地移动整个结账。

再加上每个进展步骤在完成后都会得到一个复选标记,这是一个让买家知道他们距离完成更近一步的视觉提示。 但是,您可以使用图标,突出显示的文本,变暗的背景或像上面的其他示例那样填充气泡来表示这种情况。

设计师史蒂芬汉利有另一个很酷的用户界面,依靠点和隐藏页面元素的简单性。

这些隐藏的部分包含结帐过程的先前信息。 一旦完成,它们就像手风琴菜单一样自动隐藏。

使用这种技术,您可以运行非常特定类型的UI / UX效果。 但是,通过相同的最终目标,整个结账过程得到了改善:澄清买方旅程的每一步。

试着查看一堆进度条设计,看看你最喜欢哪一个。

我总是推荐这款桌面风格的电子商务结账服务,因为它们可以产生很大的不同。 你只需要找到一个可以匹配你的移动界面的进度风格。

给最终购买总览

在他们点击最终的“购买”按钮之前,买家的心中经常会有一些犹豫。

您可以通过提供一个最终确认屏幕及完整的订单摘要来放心。 在浏览器没有简单标签,没有鼠标的情况下,这在移动设备上特别方便,并且使用小屏幕查看订单更加困难。

设计这个最终结账屏幕其实很简单。

您只需按订单项价格,运费,税费和总费用列出总订单。 您可能还会包含预计发货日期和与产品交付相关的其他详细信息。

做出了这个甜美的设计,展示了如何在一页中总结所有产品。

这当然不是一个完美的设计,但它证明极简主义可以适用于这些移动结账摘要页面。

对于数字下载或预约等非物理产品也可以做同样的事情。

在计划页面上,您可以通过显示计划的时间,日期,地点和其他相关信息来完成订单。

你首先需要知道你的买家希望看到什么类型的信息。 让自己置身于自己的位置,思考在最终结账页面显示的内容,让他们放心。

如果他们在购买时感觉舒适和安全,那么他们会更加倾向于毫不犹豫地利用最终购买按钮。

向前进

如果你从来没有设计过手机端,那么你将进入全新的领域与这些趋势。 但不要让这个吓跑你!

随着所有这些提示可供您使用,设计一个直观,鼓励并可能转换的移动结账页面应该没有问题。

推荐内容: