北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。
一、项目定位与行业现存痛点
产品简介
BRIX是一站式整合数字营销服务商,官网作为品牌线上获客核心阵地,用乐高积木作为品牌核心视觉隐喻,象征营销策略模块化搭建、层层组合实现增长目标。官网覆盖首页、服务体系、成果数据、案例展示、团队介绍、FAQ咨询、底部转化表单全页面,完成从UX调研、受众定位、低保真原型、视觉设计、动画交互到开发上线的全流程,同时完成1920px桌面端与375px移动端的双端适配。
传统营销 agency 官网四大行业痛点
1. 品牌视觉无统一记忆符号:多数营销官网设计同质化严重,没有专属视觉隐喻,访客看完难以留下品牌印象;
2. 业务展示零散杂乱:营销服务、案例成果、数据背书分散排布,访客无法快速感知机构专业能力;
3. 移动端适配体验粗糙:只重视PC端效果,手机端排版拥挤、交互卡顿,移动端流量转化流失严重;
4. 转化路径不清晰:缺少分环节咨询入口、FAQ打消顾虑模块,访客浏览后很难完成留资动作。
二、完整设计落地闭环
项目遵循标准化六步设计流程,形成前期调研→原型规划→视觉落地→动效优化→开发上线→双端适配完整闭环
1. UX研究阶段:梳理行业商业环境、用户行为与竞品情况,搭建界面设计底层逻辑;
2. 受众定位阶段:锁定企业主、市场管理者、电商扩张品牌三类核心目标客群;
3. 原型搭建阶段:规划首页、服务页、作品集、关于我们、评论区五大核心页面的跳转逻辑与转化场景;
4. UI视觉阶段:确立浅灰白基底+暖橙品牌主色,积木3D模型作为视觉核心,搭建模块化规范设计体系;
5. 动画交互阶段:页面滚动微交互、积木动效、卡片过渡动画提升浏览沉浸感;
6. 开发适配阶段:输出响应式代码,完成桌面与移动端布局优化,保证多设备浏览体验一致。
三、核心页面模块设计拆解
模块1:首屏品牌主场区
顶部简洁导航栏包含首页、服务、作品集、关于我们、评论区,右上角放置「获取咨询」高转化按钮;主视觉用超大标题「FROM STRATEGY TO CUSTOMERS」搭配堆叠透明积木3D模型,右侧陈列已落地项目、营销活动、行业深耕年限三大数据背书,下方设置查看案例入口,首屏就完成品牌定位与实力传递。
模块2:全品类服务板块
用大面积品牌暖橙色块做分区,从上到下依次陈列社媒内容营销、定向广告、效果营销、场景广告、邮件营销、PR传播、创意视频全业务线,每一项服务都配套简介与独立咨询按钮,访客可按需跳转对接对应业务。
模块3:实力背书两大核心板块
1. 数据成果区:用ROI提升、成本下降、落地项目数量三组醒目数据,直观展示过往投放效果,强化专业可信度;
2. 案例展示区:搭配时尚品牌真实营销案例,标注线索涨幅、CPA降幅、ROI倍数具象成果,用真实场景打动潜在客户。
模块4:流程、团队与咨询转化板块
1. 营销执行流程:用拆解的机械积木可视化从需求简报、策略制定、广告投放、优化迭代到数据复盘的全链路步骤;
2. 团队介绍区:展示核心岗位成员形象,传递靠谱的团队配置;
3. FAQ答疑区:针对企业自建团队的常见疑问做折叠解答,打消客户合作顾虑;
4. 底部表单区:复用积木品牌视觉,设置留资表单,完成最终获客转化。
四、视觉设计体系:暖橙模块化商务创意风
1. 色彩系统
- 基底底色:纯净浅灰白基底,弱化营销行业浮夸感,营造专业稳重氛围;
- 品牌主色:温暖活力橙,用于按钮、板块分区、标题高亮,提升品牌活力与识别度;
- 辅助色:深灰用于正文文本、深色背景模块,黑白平衡页面轻重节奏;
- 视觉符号色:半透明黑、暖橙渐变的3D积木,贯穿全站形成强品牌记忆点。
2. 图形与可视化规范
1. 积木模块化视觉隐喻:3D乐高积木、拆解机械积木呼应品牌名BRIX(砖块),完美契合模块化营销策略的业务内核;
2. 规整响应式栅格:桌面端1920px、移动端375px两套栅格规范,保证多端排版对齐整齐;
3. 实景商业素材:品牌门店、时尚客户案例、团队实拍图增强真实信任感;
4. 折叠面板、卡片式布局,让长页面分层清晰,浏览节奏舒适。
3. 文字层级规范
无衬线商务字体,三层清晰层级:大标题品牌slogan→板块二级标题→业务详情、参数辅助小字,重点增长数据放大加粗,访客一眼抓取核心优势。
五、商业落地价值
1. 专属视觉符号打造差异化:积木隐喻把抽象营销策略具象化,和同行形成明显区隔,加深访客品牌记忆;
2. 全链路清晰的转化体系:首屏、服务页、底部多处咨询入口+FAQ前置答疑,大幅提升线索留资率;
3. 双端精细化适配:PC端展示完整品牌气场,移动端优化触控布局,覆盖不同渠道的访客流量;
4. 专业内容分层排布:从品牌定位→业务范围→数据成果→案例→团队→答疑→表单循序渐进,符合客户决策路径;
5. 可拓展模块化设计体系:后续新增业务、案例可沿用现有视觉规范,低成本完成页面迭代更新。
图片来自Behance
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
