为移动设备优化电子商务网站,第3部分:设计和兼容性

2021年2月24日02:41:33 发表评论 23 次浏览

编者注:9月, 我们发布了"免费提供针对移动设备优化的电子商务网站的志愿者, "招募商人自愿进行移动优化案例研究, 在该案例研究中, 我们将逐步创建移动网站。数十个商家提交了他们的网站, 经过审查, 我们将选择范围缩小到DecalGirl.com。案例研究的第三部分如下。

第一期, "为移动设备优化电子商务网站, 第1部分:入门, "我们在11月发布, MobilizeToday.com, 一家移动开发公司, 以及DecalGirl.com一家销售用于移动设备的"皮肤"的电子商务公司开始研究如何最好地实施该项目的策略。

我们出版了第二期, "第2部分:布局和设计, "在DecalGirl.com的移动主页开发最初的模型制作之后, 于12月初发布。

现在, 我们回顾了他们迄今为止的进展, 因为他们在11月和12月之间一直表现良好。

内页设计与开发

在"第2部分"中, Peters制作了自己的主页设计, 这与Trugbild设计的原始模型相反。双方都喜欢彼得斯自己的设计。

彼得斯的主页设计。

彼得斯的首页设计。

现在, 在相对同意首页的美学方向和功能的情况下, 内页设计(导航以及与不同移动设备的兼容性)是下一步的开发。

Peters希望使用三个主要按钮:"购买皮肤", "浏览设计"和"浏览艺术家", 尽可能简化从首页到内页的导航。

Peters的目标是让消费者可以通过一些简洁直观的选择来进行深入研究。他希望消费者首先选择" Shop for Skins"。这将把消费者带到设备制造商的列表, 用户可以在其中选择" Apple", 并获得Apple生产的设备类型的列表。然后, 用户可以从Apple购买特定类型设备的皮肤。

考虑到Peters的目标, Trugbild提供了以下初始内页设计。

用户从主菜单中选择一个选项后, 会出现一个子菜单项列表。该列表会填满移动设备的整个框架, 并且会自动调整为横向或纵向视图。内页子菜单上的每个选择都可以按照Peters的要求进一步集中消费者的搜索。每个页面都有一个简化的导航, 仅类别按钮和每个页面底部的一组"上一个/下一个"按钮。

Trugbild的分页内页模型。

Trugbild的分页内页模型。

从美学上讲, 彼得斯认为橙色选择太过压倒性要求内页菜单的背景使用较深的颜色, 而橙色应视为突出显示已选择的突出显示颜色。

从导航上来说, 彼得斯还认为"上一个/下一个"按钮需要来自消费者的过多输入, 并要求提供滚动样式列表(Apple的iOS广泛使用的功能), 而不是分页中断。

彼得斯还要求在所有内页上都可以显示"搜索"字段, 从而允许对长长的产品列表进行另一层过滤。 Trugbild立即在设计中添加了"搜索"框, 并继续处理内页的滚动列表和色标。

Trugbild添加了“搜索”框。

Trugbild添加了"搜索"框。

兼容目标设备

Trugbild说, 移动市场的领导者是iPhone和Android, 必须使DecalGirl.com移动网站与这些设备兼容。 Trugbild要求Peters使用DecalGirl.com的流量统计信息来帮助确定哪些移动设备最常用于访问Peters的网站。

Trugbild提供了此警告。他说, 重要的是还要考虑到Peters将获得的访问者统计数据是基于网站的桌面版本, 并且由于移动设备的优化, 这些统计数据可能会发生巨大变化, 可能会吸引更多的移动用户。因此, 一旦移动网站启动, 重要的是要监视访问者的统计数据并与他们的移动设备, 浏览器和操作系统保持同步, 以保持最佳兼容性。

移动优化平台提供商在支持哪些设备方面有所不同。 Trugbild的MobilizeToday.com提供了与以下设备和操作系统兼容的移动平台。

  • iOS:iPhone和iPod Touch
  • Android OS设备
  • BlackBerry OS 5及更高版本
  • Palm webOS 1.4及更高版本(Pre和Pixi)
  • Windows Phone 6.5及更高版本
  • 塞班S60
瑞安·彼得斯(Ryan Peters)

瑞安·彼得斯(Ryan Peters)

Trugbild说, Android和iPhone兼容性是MobilizeToday提供的最实惠的服务, 因为他的公司对这些领先品牌进行了最多的开发和测试。特鲁比比德说, 如果彼得斯想将其他移动设备添加到兼容性列表中, 由于缺乏MobilizeToday对具有较小市场份额的设备进行的开发和测试, 这将增加成本。

DecalGirl.com桌面网站的用户人口统计数据显示, Peters定位到iOS和Android设备是其网站的最理想选择。 iOS和Android用户合在一起贡献了Peters网站上流量的最大百分比:总计5.5%。彼得斯指出, 尽管BlackBerry设备用户仅产生了桌面站点流量的0.43%, 但每月仍然有数千次访问, 并且还希望看到BlackBerry的兼容性。

Trugbild表示同意, 他和Peters决定着重与DecalGirl.com用户最常用的三种设备/操作系统进行兼容性:iOS(iPhone和iPod Touch两者), Android OS和BlackBerry OS 6。

移动的进一步适应和遗漏

随着DecalGirl.com网站内页的设计继续, Trugbild概述了DecalGirl.com桌面网站特有的各种故障点。如果可能的话, 必须修改这些丰富的桌面站点功能;如果无法对移动版本进行修改, 则将其完全省略。

Trugbild说这些特殊功能很麻烦, 因为用于在桌面站点上创建它们的JavaScript代码会导致移动设备上的加载时间更长:

  • 实时帮助。桌面版本的DecalGirl.com上提供的实时客户支持聊天选项由外部第三方服务提供, 在移动视图中将被忽略。
  • 产品图像。产品列表页面上的图像很重, Trugbild担心将图像加载到移动设备上会导致加载速度慢和整体用户体验差。不幸的是, 这些图像不能被丢弃, 因为它是DecalGirl.com产品的主要卖点。图像必须适合移动视图, Trugbild建议使用各种JavaScript编码技术来减少该负载。
  • 图像预览。Trugbild指出, 当客户在桌面版本的DecalGirl.com购物车上购物时, 选择的产品和变量会导致带有图像的各种"弹出"框出现, 或者使用JavaScript代码可以显示更多产品详细信息。但是, 就像Trugbild所说的那样, 这种风格还是"沉重的"。 Trugbild计划提出一种不同的解决方案来显示这些变量。
  • 幻灯片放映。该网站的桌面版本以使用JavaScript的产品幻灯片为特色, 由于加载时间, Trugbild建议在移动视图中将其省略。
  • 用户评论表。Peters的网站上有一个基于JavaScript的基于代码的评论表单, 供用户留下有关产品的评论并对其进行评分。 Trugbild担心在将网站自定义为移动设备时可能会出现问题, 因此建议省略。

总结

Peters再次为他希望其移动网站的外观和功能提出了一个明确的目标:简化并为消费者提供简单的导航。考虑到这一点, Trugbild交付了内页的初始模型。 Peters希望查看清单的滚动列表, 而不是分页列表。 Trugbild开始根据Peters的规格更改内页, 并添加了附加的搜索功能。

彼得斯发现网站访问者使用的主要移动操作系统(Trugbild着眼于兼容性)是:iOS(iPhone和iPod Touch), Android OS设备和BlackBerry OS 6设备。 Trugbild还概述了一些台式机功能, 由于双方为最终的移动平台设计做准备, 这些功能可能无法适应, 因此可能不得不省略。

在下一部分中, 我们将遵循DecalGirl移动菜单内页的最终设计以及用于移动的购物车修改。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: