移动应用:设计移动转换 | W设计师博客站-专注网页设计技巧设计领域趋势设计灵感分享

移动应用:设计移动转换
+ 查看更多

许多在线零售商希望在他们的常规网站之外有一个移动网站。尽管仍有许多人没有手机，但也有少数人在过去一年里推出了手机商店。很多人也推出了手机应用程序要么赞美一个移动网站，要么取代它。要了解移动站点和移动应用程序之间的区别，请看这张出色的电子商务信息图。我将讨论移动站点和应用程序的一些常见设计技巧，并分别举例说明。

移动应用:设计移动转换

设计在移动设备上同样重要，它能够轻松地满足客户的需求。从搜索功能到结帐，设计可以影响您是否要将客户的访问转化为销售。

手机可用性

确保像iPhone、Android和iPad这样的移动设备可以轻松地使用你的在线商店。所有这些都依赖于触摸屏，这是开发移动版网站时需要考虑的重要事项。除了利用这项技术外，在为移动设备设计时还需要记住以下几点:

移动设备只有有限的屏幕空间，所以有效地利用空间是非常重要的。一个常见的错误是在每个屏幕上都包含一个完整的导航栏。当为电子商务设计时，重要的是引导你的访客在有限的屏幕上准确地找到他们想要的东西。一些零售商，如百思买，将他们的导航限制在一个单一的下拉菜单。然后，用户被导向多个类别，在一个可滚动的屏幕上购物。

百思买有限的导航利用空间。

百思买

Target也遵循同样的原则，并使用一个紧凑的导航栏。

文本输入

有多少人喜欢在移动设备上打字?没有人吗?同意了。在设计移动应用程序时，要记住你的客户也不喜欢在移动设备上打字。这需要专注，对于那些手指粗壮的人来说，这可能会令人沮丧。保持所需的文本输入量最少。记住，你的客户是在寻找他们的家庭或工作电脑无法提供的便利。你必须让它变得更简单，否则通过移动设备购买有什么意义呢?

这是消费者拥有移动设备的首要原因。方便。

有哪些方法可以限制客户的文本输入?

允许客户立即在主屏幕上或结帐的第一步登录到他们的web帐户。
这一点在设计移动应用程序时尤为重要，因为你的客户成为拥有网络账户的回头客的几率更高。这是因为他们已经承诺下载你的应用程序，很可能他们已经从你那里购买了!

Jcpenny

允许他们通过分类购物，也可以在不需要用户输入任何属性的情况下轻松地改进结果。
老海军做了一个很好的工作，是描述性与他们的类别，包括一个类别的照片，子类别清单，并允许折叠下降到照片。在移动设备中关注折叠是非常重要的，因为它可以向用户表明您可以向下滚动屏幕，因为没有滚动条来指示这一点。

老海军

Zappos也有一个很棒的浏览设计，允许用户选择他们的类别，并通过从左到右滑动细化选项来立即细化。

为移动设备设计是一个全新的领域，在用户“习惯”或“习惯”购物方面，并没有什么是一成不变的。

如果你真的不需要电话号码，不要索要，只在为移动设备设计收银台时需要一些必需品。
这也适用于传统的电子商务网站。如果你不打算使用这些信息，那么就不要问。这只是客户打包离开的又一个理由，或者在这种情况下，按下关闭按钮。

关键元素(操作项)的放置

有一些研究同时适用于手机和传统网站的可用性。您通常应该将操作项放置在屏幕的左上角或左下角，以便与用户的阅读和扫描模式内联。通常被称为“f型模式”。你可以在这篇Eric Rowell写的文章《网页设计中的眼动模式》中了解更多关于眼动的研究。

就像在正常大小的屏幕上一样，按钮的颜色也很重要。尝试使用让你的动作项目脱颖而出的颜色。记住设备浏览器的颜色(iPhone通常是蓝色调)。我不会使用设备浏览器元素用于操作项的颜色。

在考虑尺寸时，再想想普通用户的手指。如果他们不能点击你的按钮，因为他们太小了，很可能他们会感到沮丧，并寻找其他地方。你也不希望它们必须放大才能点击你的小按钮。

在移动设备上，你会看到一些动作或可点击项目的例子，它们的位置和大小如下。

Shoes.com使用了一个位于左侧的亮橙色按钮。

目标移动站点的add to cart按钮横跨整个屏幕的宽度(左)梅西百货的iPhone应用程序的“add to bag”按钮和“find it in store”按钮也跨越了屏幕的宽度，位于折叠的上方(右)。

目标的移动

它们都使用与移动设备标题相同的颜色。虽然这与他们的整个网站的设计是一致的，为了提高转换，可能会建议使用另一种颜色，不使用在周围的元素。

西尔斯

Click-Ability

查看移动设备接口时，您会注意到触摸屏并没有提供物理按钮所能提供的好处。因此，当考虑到这一限制时，确保你的2D按钮在整个移动站点或应用程序中看起来是可点击的和三维的。

图片

限制你的手机网站或应用上使用的图片的大小和数量。客户仍然希望看到产品图片，但将推广图片、广告和其他不必要的创意的数量保持在最低限度，或者如果可以的话完全不需要。这将改善页面的加载时间，这在移动设备上是非常重要的。通常情况下，客户使用的移动互联网连接速度甚至无法接近传统连接的速度。

以下是一些常见的零售商应用程序和移动网站缩小图片尺寸的方法:

百思买使用小图像来有效地代表类别。

百思买手机搜索页面

目标限制他们的主页创意一个空间，其中包括6个滑块面板。

目标限制他们的主页创意

注意:iPhone不支持Flash，如果想要瞄准占移动用户很大比例的iPhone用户，Flash有时会偏离目标。

老海军显示缩略图与图像，没有标题，价格或按钮，以减少加载时间。虽然有相当多的图像，但它们很小，限制了屏幕上的其他信息。

老海军使用的小图像缩略图

移动的观众

作为一名设计师，在发现过程中，您要花费大量的时间来确定和了解您想要接触的受众。除了特定客户的人口统计数据外，客户使用移动设备的方式也属于受众。谷歌用户体验设计师Leland Rechis描述了三种不同类型的移动用户:

重复的现在-一个用户谁使用他们的手机，以检查统计，更新，股票重复。这个用户可能是体育迷，社交媒体用户，或者是想要经常查看天气的农民。
无聊的现在-有很多时间的用户。特别是那些等待、旅行或去咖啡馆上网的人。
紧急的现在-该用户执行特定任务的时间有限。他们可能正在附近寻找吃饭的地方，或者在匆忙中寻找会议地点的方向。通常情况下，这些用户可能会使用许多移动设备的定位功能来引导他们，并使他们的生活更轻松。

移动购物者通常属于后两种类型(现在无聊&现在紧急)。在设计时要记住这一点。如果你的顾客想要在早上坐火车上班的时候快速购物，那么通过移动设备让实体店更容易找到，也更容易购物。

移动应用程序类型(iPhone)

在苏珊娜·金斯伯格写的书中“设计iPhone用户体验”她写了设计师在使用iPhone平台时必须考虑的不同应用风格。她提到了HIG(iPhone人机界面指南)它描述了三种风格:

实用程序-这些类型的应用程序允许用户执行一个狭义定义的任务。
生产力-这些应用提供更多的功能，可能包括社交网络和移动银行。
身临其境的-这些应用程序通常利用整个屏幕，包括游戏、富媒体和专门的任务。

一个零售商的应用程序将是一个生产力和沉浸式应用程序的组合，因为它提供了多种功能，可以沉浸式查看产品图像和/或视频。

要了解更多信息，请查看苹果的人机界面指南。

定制

设计师总是在寻找新的，创新的方法来设计和创造比别人更好。在移动设计中，有时候定制并不总是最好的选择。因为购物使用移动设备是新鲜和品牌崭新的对许多人来说,你会杀死你的转化率,如果他们不能找出你喜欢的图标是代表或者他们应该点击产品价格允许添加到购物车按钮神奇地出现。不要试图让简单的任务变得比需要的更困难。如果你没有让事情变得更简单，那么最好不要去做。