当前位置:首页 > 网站建设

从苹果官方产品页谈网站设计要如何做

来源:徐州亿网网络科技有限公司 时间:2017-10-23 作者:阿贺

  随着新一代iPhone在发布会亮相,苹果的官网上也加入了新的产品:iphoneX与iphone8.在其官网上,iPhoneX与iPhone8也毫无疑问的加入了机型比较页,该对比页面的设计,同样有着其精髓之处,在产品对比页上,也能调动用户的购买欲望。

本文中亿网科技小编将对该页面的细节之处进行一些分析,尝试分析出对于自家产品的对比页面,有什么设计技巧。(iPhone的机型对比页面的特点是:所有产品都属于苹果公司,对于类似中关村这一类的集成多家企业产品的对比页面,设计上的技巧一般不可同一而论。)

一、机型的选择

说到产品对比页面,首先想到的必然是产品选择,先有产品的选择之后才能有对比,通常认为,当产品数量超过5个时,就不适宜全部罗列出来共同比较,需要让用户自行挑选对比的产品。我们来看一下苹果是如何设计选择界面的。


从苹果官方产品页谈网站设计要如何做
iPhone产品选择



看起来简单易懂,简明扼要的说明文字配下拉箭头,让用户容易地理解是通过下拉菜单的方式来进行机型选择。机型选择下方实时展现出对应颜色款式与配图,当用户切换款式时,辅以款式颜色的动效切换。

在产品比较页的产品选择栏,首要因素就是简单易用,让用户第一眼就明白如何操作,并辅以配图与款式切换的动效,其操作反馈无疑可以让用户感到愉快。

可改进之处:选择产品的数量,如果可以根据用户需求自我添加或删减,用户体验可能会更好。

二、具体对比内容的展现方式

说到展现形式,许多网站的展现方式就是将参数直接全部罗列出来,一一进行对比,这样的对比方式体现不出重点,用户看的也头大。我们来看一下苹果是如何进行产品比较的:

从苹果官方产品页谈网站设计要如何做

iPhone主要卖点对比



从上往下看,首先是悬浮跟进页面滚动的机型列表,这样的设计可以让用户无需担心在下拉的过程中忘记哪一列对应的是哪款机型。

之后重点来了:苹果首先进行了5个项目的对比,并且这些对比的内容展现方式通过艺术字体、图标等方式来简单的呈现。苹果为何单单选择这5个互不相关的项目进行首先对比呢?亿网推测这些都是根据产品的卖点与用户需求结合筛选的,当用户在选购手机时,关注点除去外形,剩下的多为:屏幕尺寸(大屏看的舒不舒服,手感是否能握的住等)、镜头(手机拍照非常流行)、硬件:如处理器(机器运行卡不卡)等要素。而这三项苹果就将其首先展现出来进行简单的对比。剩余的安全验证与充电,是本次发布会上新机型的独特卖点(已经被各种表情包玩坏,热度爆棚的FaceID脸部识别),借用图标对比的形式让用户清晰的了解卖点,调动购买欲望。


从苹果官方产品页谈网站设计要如何做
iPhone容量对比



再往下,苹果的设计师将容量与购买的cta按钮放到了紧跟5大对比的位置,由于5大对比已经满足了部分用户的对比需求,并且借用独有的卖点功能调动了一定的购买欲望,将购买与价格的按钮放到这里,无疑是给用户进一步的暗示快买买买,并且该暗示毫不突兀。


从苹果官方产品页谈网站设计要如何做
iPhone产品对比



再往下看就是产品对比页必须的具体参数罗列,具体对比。这里需要注意的是,同样是表格,通过适当的留白间距,去掉了项目之间的线框,可以让对比表格看起来更加舒适。对于一直未更改的功能,比如siri语音助手,采用统一文字一次说明,无需重复罗列,在富有层次感的同时,可以降低用户的认知压力并且给其大脑提供一定的缓冲来消化阅读过的信息。

从苹果官方产品页谈网站设计要如何做

iphone机型对比


最后,再一次的罗列成品的所有款式图,并提供具体产品页链接给想要更详细的了解对比产品的用户。

总结

苹果在设计自家的产品比较页时,将新产品的独特卖点巧妙的植入进了主要项目对比,没有突兀的感觉。将购买链接植入到容量与价格中,再植入到紧跟主要对比项之后的位置,潜移默化的促进用户转化。

当企业在自己的网站上进行自家的产品比对时,由于都是自家的产品,迭代与新功能等特点明确,因此可以采用在具体罗列对比之前,先对比用户最关心的项目,并将新产品的独特卖点植入其中的做法,尝试在对比页上加入转化不突兀的转化路径,或许可以有意外的收获。

公司动态

网站建设

营销策划

行业资讯