大数跨境

苹果官网重新设计推动电商网站趋势

苹果官网重新设计推动电商网站趋势 电商实践
2015-08-14
0
导读:苹果公司2015年8月的网站改版强调视觉传达,并推动了多项网站设计趋势。大幅照片、富有意义的图形以及

苹果公司2015年8月的网站改版强调视觉传达,并推动了多项网站设计趋势。大量使用大幅照片、富有意义的图形和实用的视频。

当Apple.com于2015年8月6日重新推出时,许多报道都指出了缺失的“商店”链接。该网站的企业和电子商务部分已合并。虽然这值得关注,但与许多其他在线商店相比并无太大不同。

相反,该网站如何运用几种当前的设计趋势可能更有趣或更具影响力。在线零售商、营销人员和设计师可以在自己的网站上采用类似的技术。

巨幅照片与图形

相对于屏幕尺寸,新的Apple.com使用了巨幅照片和图形。在许多页面上,单张图片占据了整个屏幕。

与许多网站一样,Apple.com展示了从屏幕边缘到屏幕边缘的大图。

苹果似乎甚至更偏爱这些图形而非文字。

例如,在Apple Watch专区中,其中一张图片上的叠加文字难以辨认。图片展示了一对拥抱亲吻的夫妇。照片中的两个明亮光源使“Notifications”一词和引导游览链接变得模糊不清。

照片中明亮的灯光使文字变得模糊,难以阅读。这可能是一种设计选择。

这不太可能是失误。来自各个部门的众多苹果员工都会审核新网站的每一页。相反,这是有意决定让图像优先。

也许这一选择中甚至蕴含着微妙的信息。图中的女性模特佩戴着Apple Watch。其通知功能是为了她的利益,而在图片捕捉到的那一刻,它显得不那么重要。

大型——具有沟通功能——的图像在2014年和2015年已成为一种设计趋势,而苹果并非这一潮流的新参与者。该公司一直强调视觉效果,尽管是以一种简洁、流畅的方式呈现。这个略显妥协的网站可能会进一步助推这一趋势,鼓励苹果的追随者和注重整体布局的网站设计师。

苹果在提供这些填满屏幕的图片方面也做得很好。例如,网站首页的音乐主图大小合理,为195 KB。在消费者宽带连接下,平均加载时间为239毫秒。

深思熟虑的移动优化

移动设备的数量远远超过台式机和笔记本电脑。在美国,互联网用户访问网站时,使用iPhone的概率与使用台式机相当。移动优化不再是竞争优势;相反,移动优先设计已成为标准。

然而,即使在这个以移动为中心的环境中,Apple.com依然脱颖而出。

一个很好的例子来自网站的iPad落地页。如果你往下滚动一点,你会发现几个促销板块,比如“教育用iPad”或“商务用iPad”。

在笔记本电脑或台式电脑上查看时,这些板块配有大幅图片及叠加的文字说明。

为了具备响应式设计,Apple.com在大屏幕上将部分标题和文字说明置于图片上方,而在小屏幕上则置于图片下方。

在移动设备上,文字说明会移至图片下方。图片在整体布局中依然保持较大尺寸。文字内容未变,但在移动设备上更易阅读。

尽管包括图片在内的内容较小,但其位置经过调整,以便在小屏幕上获得更好的显示效果。

有目的的视差滚动

视差滚动可以为原本平坦的二维场景增添深度感。该技术让前景内容(如图片或文字)比背景内容移动得更快。

一些网站设计师认为视差滚动能创造更具沉浸感的用户体验。然而,其应用往往显得多余。你甚至可以在Apple.com上发现可能不必要的视差滚动用法,例如在其Music落地页上。但在其他地方,苹果有目的地使用视差滚动。

配备Retina 5K显示屏的iMac着陆页展示了另一张巨大的图片。这张图片填满了你的整个屏幕。

配备Retina显示屏的iMac的落地页起初与其他Apple.com页面类似。

当你向下滚动时,图像发生位移,你意识到其照片的范围更加广阔。

滚动操作重新定位了图像。你能看到更多内容。

随着你继续滚动,标题保持静止,而照片似乎向后移动。它甚至从屏幕边缘向内收缩。你感觉自己在逐渐远离。视差滚动虽然微妙,但正在发挥作用。

视差滚动正在发挥作用。图像从屏幕边缘拉开,营造出一种深度感。

继续滚动可以发现,这张图片显示在一台一体机iMac上。观点成立。

在这种情况下,这种技术有助于传达产品的价值。

在这种情况下,这一功能——视差滚动——有助于突出展示产品。

实用视频

Apple的Mac、iPad和iPhone是大众熟悉的产品。该公司的客户对它们非常了解。他们知道它们的外观,大部分也知道它们如何运作,甚至了解它们如何影响你的日常生活。

Apple Watch是一款较新的产品。它当然不乏媒体报道和广告支持,但仍然相对不那么为人熟知。

为了帮助介绍Apple Watch,重新设计的Apple.com包含多个出色的视频。这些导览视频向购物者展示了Apple Watch的工作原理。最终,这些视频帮助Apple客户决定是否购买。

视频内容营销并非Apple的发明。但在其新网站上,该公司再次成为了一个良好的典范。

Apple.com使用视频内容向相对不熟悉的购物者介绍产品。

滚动是必须的

焕然一新的Apple.com也印证了更多滚动的趋势。

不久之前,网站设计师将大量内容塞在“首屏”(fold)之上。这个想法自然源自报纸出版商,他们在头版顶部放置大量内容以吸引读者。

Apple.com的支持页面在首屏之上仅包含导航栏、一张图片和一段简短的欢迎语。你必须向下滚动才能看到核心内容。

网站设计师采纳了这一概念,将大量产品或信息堆砌在页面顶部。网站访客几乎可以在首屏之上完成所有操作。

在移动时代,首屏更难界定。iPhone屏幕顶部显示的内容与桌面电脑屏幕顶部显示的内容截然不同。如果用户想要更多内容,就必须滚动,而似乎没有人对此介意。

【声明】内容源于网络
0
0
电商实践
电商实践
内容 8053
粉丝 0
电商实践 电商实践
总阅读37.4k
粉丝0
内容8.1k