我发现,海外官网设计竟然全是套路?产品模块

我按照一下三条依据,随机挑选了5个海外官网来分析:

这5个官网分别是:

官网构成

我给每个官网的模块进行标签分类,得出了这样的图片:

统计一下,平均每个网站8.6个模块,5个网站合起来总共43个模块。

这些模块可以分为14类。出现率5/5的模块有3类:标题、结语和用户反馈出现率最高;出现率4/5的有2种:产品图片和功能展示;出现率3/5的有4类:细分场景、荣誉背书、产品优势、客户logo。

也就是说,官网设计把握好以上出现率在3/5或以上的9类模块,就不怕出错。

但是这些模块类型,究竟要怎样设计呢?

模块设计

我们就只挑出现率3/5或以上的模块类型来分析吧。

标题-5/5

通常是一个短语标题,搭配一段话说明,再加上转化按钮。没有什么特别大的变数,主要就是按钮个数、有没有背景图、产品图和插画的差别。

用户反馈-5/5

结语-5/5

通常在底部,一句激励的话或者slog搭配按钮,看能不能抓住最后的机会说服用户转化。

产品图片-4/5

很多官网就是会把产品图展示得又大又清晰,注册前能看到的话比较心安。

比较复杂的产品考虑到一张图没有代表性,还会分几个tab,允许用户切换看。

Shopify的功能展示视频已经很清晰了,所以才没有这个模块。

产品优势-4/5

有些产品的优势没有落在具体的功能,例如安全性、灵活性之类的,那就需要专门的模块讲优势了。

而展示方式,就主要取决于数量,以及好不好用图片展示了。

Monday就用了卡片形式:

Slack用了比较简单的图示(下面是其中1个模块,不止这1个):

Shopify就相对更精致一些(下面是其中1个模块,不止这1个):

客户logo-3/5

相当于把一些知名的客户logo列出来,用作背书。

功能展示-3/5

这类模块,就是把产品的重点功能,用图文的形式展示出来。

Notion用这种卡片+页签的形式:

Spotify是用页签+视频播放的形式:

Intergram因为功能太多,所以在列表上悬停查看:

细分场景-3/5

例如有的产品针对完全不同的角色有不同的解决方案,或者针对不同类型的客户有不同的解决方案,都可以算是细分场景。

内容差不多,但展示形式就有差别了。

Intercom是把不同场景列出来:

Notion用tab切换:

Monday是悬停查看说明:

荣誉背书-3/5

通常是引用比较可信的第三方平台信息,正面自己产品的实力。具体展示方式,就要看信息类型了。

Monday就是展示奖章:

Intergram是展示图表:

Notion这个最取巧,引用了一评语:

模块顺序

这些模块的放置顺序,也是有讲究。标题和结语要分别放在顶部和底部,这个就不必多说了。其它的模块位置不绝对,但也有一定倾向。

上半部

客户logo、产品图、细分场景都是放在页面上半部比较多,因为考虑到用户一进来就想看到图,或者确认自己的场景有没有包含。

不过也有例外,像是Notion的细分场景比较小众(毕竟绝大多数用户只需要笔记场景),所以放到了下半部。另外Notion主要用户是个人,所以客户logo放在了页面中间。

中间

功能展示和产品优势,整体是放在中间。只是各产品会根据实际情况,做些调整。

Shopify这种B端刚需产品,功能很重要所以放在上半部;Intergram这种功能繁多又没重点的产品,会把功能展示放在下半部。

Slack功能简单的产品,倾向于把产品优势放到前面;Monday的场景和功能太多了,所以把产品优势挤到后面了。

下半部

用户反馈和和荣誉背书,通常是放在下半部。因为只有用户了解产品之后,才会对这些信息感兴趣。

总结一下

这次只是随机抽取了5个海外官网,不算是什么严谨的大数据分析。

不过我之前调研过的官网远不止这些,当时也察觉到了类似的套路,只是没有这么统计出来。

其实想想,这些套路也挺符合营销思路的。无非是开头简单介绍一下并问你“要不要”,然后看看产品长什么样子,再详细了解功能和优势,最后展示一下好评和荣誉背书,结尾做个总结最后问一句“要不要”。

想通这个套路后,发现设计官网结构其实并不难,难的是如何找准卖点,然后围绕卖点打磨文案和配图,这些才是真正考验能力的地方。

THE END
1.IntelSoftwareIntel software suites and solutions for trust, AI and performance optimization.https://www.intel.com/content/www/us/en/software/software-overview.html
2.moodle–ITServices–GuangdongTechnionAddress Room 538, Admin Building Email itsupport@gtiit.edu.cn IT SUPORT Home I am a new Our Services & Guides Cybersecurity and IT Policies E-Journals About Us itsupport@gtiit.edu.cn +86 754 8807 7026 Room A538, GTIIT Office Hours ...https://sites.gtiit.edu.cn/it/home/our-services/academic-research/teaching-and-learning-backup/moodle2/
3.英特尔?ConnectivityPerformanceSuite英特尔? Connectivity Performance Suite 的高级连接管理器在全新的英特尔 Evo? 和采用英特尔? vPro? 平台的笔记本电脑上提供,支持同步使用所有可用的笔记本电脑网络技术,并自动优化您的网络连接。 帮助改善多个用例的 Wi-Fi 连接 面向家庭的英特尔? Connectivity Performance Suite...https://www.intel.cn/content/www/cn/zh/products/docs/wireless/connectivity-performance-suite-consumer-video.html
4.MIMA25ArchiveNewsCenterMicrosoftDeutschlandMicrosoft 365 Microsoft-Produkte erkunden Windows 11-Apps Microsoft Store Kontoprofil Download Center Microsoft Store-Support Rückgaben Bestellnachverfolgung Abfallverwertung Weitere Informationen Bildungswesen Microsoft Bildung Ger?te für den Bildungsbereich Microsoft Teams for Education ...https://news.microsoft.com/de-de/tag/mima25/
5.DesktopPCVsAllinWhat is an All-in-One Computer? An all-in-one PC combines the computer and display into a single unit. These sleek devices often include a built-in webcam, speakers, and sometimes touch screen capabilities. Pros of HP All-in-One Computers: ...https://www.hp.com/us-en/shop/tech-takes/desktop-pc-vs-all-in-one-computer
6....每周五发布。目录1instatus:漂亮的网站状态页2intergram...instatus官网[1] 2、Intergram: 可连接Telegram的开源实时聊天工具 一个免费的实时聊天小工具,可以轻松地添加到你的网站。它将使用Telegram messenger与你的网站访问者聊天。这是一个开源的软件。 通过使用Telegrambot,将所有消息路由工作和聊天状态管理委托给Telegram。添加2行脚本到你的网站,以嵌入小部件。访问者的消...https://blog.csdn.net/ljinkai_ljk/article/details/123911462