案例浅析：英选如何为知名展会品牌搭建优秀官网

时间：2023-06-01 05:21:02 | 来源：网站运营

时间：2023-06-01 05:21:02 来源：网站运营

案例浅析：英选如何为知名展会品牌搭建优秀官网：

官网搭建前的思考

官方网站作为承接一家企业门面的担当，精致的门面是吸引用户的基础，如果一个公司的官网结构不清晰，图片陈旧，布局杂乱，交互顺畅性差，给用户带来的第一感受便容易怀疑这家公司的“正规性”及“实力”。简洁大方，符合品牌调性的视觉设计在提升品牌形象方面为一大影响因素。

大部分最终能成交的客户都是一开始带着目的而来，而能让其在第一眼便能找到自己想要的信息尤为重要，交错复杂的官网结构设计，信息分类设计，混乱的业务展示模块划分等等类似考验客户耐心的设计，往往会成为流失客户的所有环节中不可低估的一部分。

官网搭建的目的除了业务展示，便是获客。合理运用SEO对其进行推广，同时也可做竞价，增加搜索引擎中用户看到企业官网的曝光率。一般做法是在完成官方网站建设后再考虑获客方面的优化，而更具经验的做法便是网站搭建时便一并把获客方案提前设想进去，提高建站效率。

---

杭州时尚家居设计周官网简介

作为每年举办一届的杭州时尚家居设计周，我们来看看英选团队帮助客户解决了哪些问题来实现业务展示及获客的核心目标。

• 杭州时尚家居设计周简介

“杭州时尚家居设计周暨杭州国际家具展览会，是由杭州市工业和信息化局指导、杭州市家具行业协会和杭州时尚创意产业联盟、杭州市德赛展览有限公司承办、杭州家具研究开发院作为产业技术支持单位、赛德检测作为产品品质监控单位的中国家具业高品质的商业设计展。

经过26年、36届的发展，今天的杭州时尚家居设计周已经成为一个推动产业多元化转型升级的全球性设计盛会，聚焦全球住宅、建筑、内装、设计、家具、软饰、家居用品及智能、办公等领域，致力打造国际新消费趋势发布与产业创新教育平台。

• 设计立意

网站功能主要集中在展馆和主题介绍，引导观众和展商获取期望的内容。客户团队有极高的视觉要求，需要在国际设计团队的配合下每年都完成一致的主视觉表现，同时为了配合线下各类宣传视频，主视觉也需要实现舒适的动效。

如何从用户体验五要素出发快速搭建官网

1. 战略层设计 —— 用户需求与商业目标
2. 范围层设计—— 功能规格与内容需求
3. 结构层设计 —— 信息结构与交互设计
4. 框架层设计 —— 界面设计/导航设计与信息设计
5. 表现层设计 —— 感知设计

1. 战略层设计

战略层的2个关键词——用户需求及商业目标，我们在接手项目之初便着重确认这两个关键词的含义范围作为网站搭建的最重要方向。

1.1 用户需求

杭州时尚家具设计展览面向的用户是谁？

作为展览来说，有软装需求的消费者与各大家居制造商构成了此次展览的主体

我们能为用户解决什么问题？

作为策展方则是将消费者与供应商联系起来的桥梁，集中为消费提供多元化的家居产品选择，更优惠的价格，也为各大供应商提供品牌宣传，拓客渠道的挖掘。

1.2 商业目标

搭建一个中国家具领域里的生态圈，链接有意向需求的客户及供应商。以设计为纽带，与城市文化共融的杭州国际家具展，日益成为家具和设计界认识杭州的窗口，也成为“国际设计资源与中国制造连接”及“中国制造寻找国际、国内市场”的战略平台。

2.范围层设计

作为有软装需求的消费者，我们需要什么？除了一家家店铺寻找自己想要的家具或摆件，或者就是去电商平台一家家搜索自己想要的物品，除了主动搜索还有没有更全面的软装方案推荐？作为供应商，如何知道这个展览是否值得参加，可以给商家带来更多曝光机会。

功能范围设计上我们考虑到了消费者及供应商这两类人群的需求来进行规划。

2.1 功能规格

参展品/商了解：以展览主题作为产品的信息架构，消费者/供应商可从主题菜单导航栏清晰了解到此次展品分别服务于哪些生活场景，消费者能快速找到适用于自己生活场景的展品介绍，供应商可以快速找到自己提供的商品与服务适合在哪个主题下进行展出，同时同个分类下的竞品商有哪些，方便其规划自己产品的参展方案。

2.2 内容需求

参展报名及其他参展信息规划：参展商了解完展览信息后，为方便其及时报名展会的需求，网站头部模块设计了参展报名入口，同时菜单内容提供展会日程，展商手册下载， 主场物料及其他服务等信息快捷查询入口，更高效的服务于参展商。

3. 结构层设计

结构层我们分2部分来分析：信息结构与交互设计

3.1 信息结构

网站整体采用了常见的顶部标签导航模式，按照消费者/参展商信息浏览的过程，关注兴趣点等，组合出顶部标签的排列顺序，分别为：首页，关于我们，我要观展，参展服务，必看亮点，媒体，咨询与帮助，中英文切换，搜索，我要参展，而在顶部栏视觉中心则用logo分隔开以上常用及非常用菜单，既突出了重点模块，也符合用户操作习惯。

3.2 交互设计

前端工程师针对网站的图片逐一优化了尺寸，并全站采用了对象存储 + CDN 加速，用来在全球范围内提升网站访问速度。尽量采用原生JS代码，减少插件组件的使用，进一步减少浏览时卡顿的可能，优化网站加载速度。




4.框架层设计

我们来看看，设计师是怎么通过框架层来优化设计布局的

4.1 导航设计

所有二级菜单的展开改为侧边滑出的方式进行，这样在不破坏主视觉完整性的情况下，菜单区域可以跟随页面的长度而变化，为承载后期更多的菜单信息提供基础。因设计展览业务性质的特点，主页会搭建大量的图片模块进行业务展示，因此保障视觉浏览的完整性尤为重要，在网页拖动至第二屏的时候，一级菜单收进侧边栏，在不触发的情况下，页面顶部仅保留一个简略的菜单入口icon。

4.2 界面设计

因为杭州时尚家具设计周是一个国际化的展览，而体现在官网的国际化上绝不是“支持英文”就足够的，以英文版的首页设计为例，英文版的设计在沿用中文版的信息架构及交互框架的基础上，把首页的模块布局做了调整，去掉了中文版的轮播展示模块，代替的是静态图片模式，这种页面设计方式，让信息层级划分比较明显，主次分明，符合英文网站浏览习惯，用户使用时也不会眼花缭乱。

5. 表现层设计

5.1 感知设计

采用曲线提升动效丝滑度

因客户团队有极高的视觉要求，需要在国际设计团队的配合下每年都完成一致的主视觉表现。英选在独有一套细致的UI标准下，保障设计质量。双方经过讨论，确定为前端动效采用贝塞尔曲线，最终实现如丝般顺滑的动画体验。

网站排版

5.2 整体版式

网站整体采用了常见的顶部标签导航模式，按照消费者/参展商信息浏览的过程，关注兴趣点等，组合出顶部标签的排列顺序，分别为：首页，关于我们，我要观展，参展服务，必看亮点，媒体，咨询与帮助，中英文切换，搜索，我要参展，而在顶部栏视觉中心则用logo分隔开以上常用及非常用菜单。

首页主要布局由海报大图或视频片段撑满屏幕宽度作为每个主题的分隔，充分展示视觉的冲击性及丰富性，在浏览的第一眼就能吸引住用户的眼球。

5.3 页面版式

页面版式大概可分为这两个部分：信息排布、留白艺术，以“必看亮点-展览主题”页面为例，本页面采用了左右布局，右侧主题详情拖动页面时，左侧的主题概况及海报固定不动，它能让用户更直观了解主题概况总结而不用费时费力上下拖动页面查看。

在左侧的主题概况之外的区域，留白艺术则使用的较为到位，整个页面除了主题概况及主题详情外，几乎看不到任何多余的东西，让阅读体验更加沉浸。

最后：SEO优化

为了满足流畅的交互，多图加载等体验，前端工程师对页面进行了细小调整后，我们接着采用了docker 方案，仅花费了 5 分钟就快速搭建了开发环境，部署更新都非常简便。也因为这个技术方案的实现，使得我们在百度和谷歌搜索中，网站品牌词中均快速排名第一。让用户在搜索关键词时立马找到企业网站，从而进一步了解企业的产品或服务。

搭建官网做好以上几步，基本上你的网站就能兼具性能，体验与美观啦~