Oneclick Online Service
2023-10-07
检测到窗口宽度不足1024px，请使用宽屏设备浏览以获得最佳效果。
品牌简介
作为一家提供 DropShipping （一件代发）整合服务的资深品牌， Oneclick Online Service 具备完善、专业的一件代发整合链路服务，全球伙伴们能借由 Oneclick Online Service 自由地选择世界各地的热门产品建立自己的IP。
Oneclick Online Service 官网截图
客户只需提供一个idea， Oneclick Online Service 团队就能为其从零到一量身定制一套调研、选货、品策、建站、OEM定制、打样、质检、备货、仓储、物流、履约、售后等服务，诚如 Oneclick Online Service 的 品牌IP 所述，一次点击、全面服务。
项目需求
Oneclick Online Service 这一IP直观地展现了公司的业务沟通渠道，因此其官网不但要体现专业的业务水平，还要体现高质量且面面俱到的客户体验；从首页到服务，再从帮助中心到在线留言，每个环节都应是高度定制化且易于管理的。
然而比起上述甲方基于业务层面考虑的硬性要求，业内普遍容易忽视却极为重要的一个问题是：作为一个功能型网站而非展示型网站（如纯粹展现实力的品牌官网），官网作为公司重要的业务渠道之一必需予以重视，因此其访问速度和 SEO 基础应该是从底层框架层面打好基础，这样才能有更好的排名并足以支撑宣发后阶段性暴增的流量涌入，以期取得更多的静态访问量，收获更多在线询盘机会。
恰如其分的，精于高定设计 & 面向终端客户体验开发的 Rainy Design Studio - 雨点设计工作室 便负责了 Oneclick 的官网迭代项目工作。
设计理念
体现 Oneclick Online Service 这一IP形象最直观的方式，就是将关键内容高度整合在少量页面之中，以极少的点击与跳转交互让客户体验到贴心便捷的服务。这些“一键式导航”设计包括了：
- 随处可见的 Oneclick 控制台登录与注册，于全站各页面的顶部右端；
- 一键填写方案需求，于 Oneclick Online Service - Solution 页面的任意 Service Bundle 咨询；
- 快速勾选数项服务并一键提交，于 Oneclick Online Service - service 页面的多个选项框与提交按钮；
- Oneclick Online Service - Help Center 中一键到底的教学指南 等等。
Oneclick Online Service 官网设计稿
Oneclick Online Service 官网定制页面模块
此外，全站采用了柔顺的波浪线背景穿插拟物化 + 实体照片做插图设计，在体现品牌文化的同时巧妙地展现了包容、和谐与可持续发展的精神内涵，直观并优雅地迎合了全球各地不同客户画像多元审美的平均基准。
技术框架
在 Oneclick Online Service 特殊的业务场景下，传统的 php + cms 建站已难以支撑当前互联网环境下的高质量网站开发需求。 Rainy Design Studio 由此引入了近几年屡获殊荣与全球一致好评的 Next.js ，一个基于 React 的轻量化框架，一步到位地将网站基础打得更为夯实。
（表格：传统官网门户 vs next.js）
| 传统基于低代码开发的网站 | next.js + 其他CMS | |
|---|---|---|
| 开发人员所需知识与技能 | 大部分为非技术知识，少部分代码能力 | 需要了解 JavaScript，React， 以及Node.js相关技术框架 |
| 技术新老程度 | 旧 | 新 |
| 网站加载速度 | 低/中等 | 快 |
| SEO友好度 | 需依赖于第三方插件实现基本SEO | 高SEO友好度 |
| 运维友好程度 | 极大依赖于官方及第三方插件 | 可维护程度高 |
| 网站安全性 | 低/中 | 高 |
| 网站二开灵活性 | 低 | 高 |
| 自定义板块 | 少，依赖于第三方插件 | 多，任何板块都可自定义 |
| 市场组件支持 | 多，大部分需要收费 | 一般，社区大量增长中，以免费为主 |
| 开发时间成本 | 低 | 高 |
| 开发金钱成本 | 中 | 中/高 |
在 Next.js 的 SSR[1] + SSG[2] 的动态页面构建下，无论是技术性 SEO 工作与技术人员的后续接手，还是定期维护与二开工作的深度支持，这一切于常态开发情景近乎无法保障的权益在 Next.js 的规范下都将变得轻松无比。
在项目打包时， Next.js 将通过后端 api 预渲染页面并做好预缓存，待到引擎机器人抓取时给予关键路由完整的静态页面，以此实现 SEO 的最优提交，并在客户终端访问时，高效、智能地分段渲染页面的部分组件。这使得初次加载后的 Oneclick Online Service 官网 在访问各个页面时快得不像是从服务器获取内容，而是网页浏览器从本地直接读取 HTML 与静态资源。
由于服务器物理地址在美国，所以国内访问依然会有一定延迟。
品牌背景
自 2019 年起， Oneclick Online Service 已从 5 人小组到至今发展成为了 60 人的团队；伙伴们怀揣着各种信念齐聚一堂，努力帮助企业在各自领域跻身前列，迄今为止，团队成员所取得的成果已足以实现各自的梦想。
尾注
[1] SSR: Server-side Rendering，即服务器端渲染， Next.js 项目的服务器端会根据每一次访问请求渲染数据，并将HTML下发至终端。适用的页面通常是定期更新的模板型内容，如网站博客与文章等等。
[2] SSG: Server-side Generation，即服务器端生成， Next.js 项目在打包时直接预渲染整个页面为静态HTML供客户访问存取，使其页面针对 SEO 工作与终端效率改善方面有着显著提升。适用的页面通常也是那些不经常修改、无需频繁读取动态内容的页面，如Homepage、About us、Terms & Conditions、Privacy & Policy 等等。
Rainy Design @ 2024