news 2026/3/26 15:50:53

新东方文旅小程序用户体验界面设计优化

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
新东方文旅小程序用户体验界面设计优化

项目背景

新东方作为国内教育行业头部企业,近几年以新东方文旅作为突破口进军旅游行业,为了给用户提供更加方便、个性化的旅游服务,新东方小程序应运而生。新东方文旅小程序经过前期的研发上线,在UI设计方面并没有达到预期效果,随着业务的开展需要总体的升级优化,进而找到我们兰亭妙微设计公司希望提供咨询建议。

新东方文旅的目标用户从热爱文化和旅游的老年人,逐步转变为以青少年为主,老年人群体为辅。兰亭妙微以打造有文化、有深度、体验更好的旅游产品为目标,通过前期的竞品分析、用户画像、情绪版等设计方式,结合目前开展的业务方向,使文旅APP的设计更加美观、有趣、友好,提高品牌影响力和业务转化率。

02

项目概述

产品定位

新东方文旅的产品定位是为用户提供高品质、有文化内涵的旅游产品和服务,结合新东方教育资源的优势,打造独特的文旅体验,让旅游不仅仅是观光,更是一次心灵的成长和文化的探索。

目标用户

新东方文旅的目标用户由于企业战略的变化,由原来的热爱旅游和文化的老年人,转变为以青少年游学为主要卖点的青少年群体,同时也涵盖老年群体,目标用户覆盖范围更广。

设计风格

前期设计第一轮的两个方案,方案一是以红色为主的更具特点的电商风格,方案二是采用文化属性与电商风格的结合,第二轮的方案三是卡通风格,对功能架构进行了调整,更加独特、更具创意与年轻化。

03

第一次设计的方案

设计前

设计后

在调研中发现存在的问题有:

运营氛围弱、品牌基因弱、风格不统一,无创意特色、图标、文字、层级等视觉设计较弱,体验较弱、悬浮窗过多,干扰用户,交互效率低、页面元素、交互模式不一致,用户学习成本较高。

方案设计

但根据客户第一轮沟通时的要求,设计方案在功能布局和布局上不需要调整,所以重点放在提升美观度上,在结构间距,字体、图标大小,图片、图标等元素尺寸等方面进行优化。

顶部背景+搜索区:品牌信任感和专业度传达,暖色轻背景营造氛围,明确的交互提示。

胶囊广告:符合电商、直播行业特点,营造营销氛围,调整尺寸,提升屏效比

金刚区:差异化、个性化、暖色电商感

热卖项目区:放大图片,清洗展示图片信息内容,每屏一个视觉焦点,每屏一个主推提示点。卡片视觉上符合视觉舒适比例,

产品区:利益点提取,信息层级逻辑调整,层次清晰,主次明了,吸引用户点击。参考电商产品瀑布流形式,增加视觉休息区,减少长瀑布流带来的视觉负担。

主风格:新设计采用logo中的红色作为主色,符合电商产品的视觉特点,图标采用线面结合的设计手法,更具独特性,整体界面电商氛围浓厚,更利于业务目标的达成。

总结

04

第二次设计的方案

方案1

此方案在第一屏加在:为什么选择新东方文旅?品牌介绍和宣传以及六个重点栏目。下方栏目形式为大图片通栏+文字,以美景吸引用户兴趣。

方案2

此方案第一屏增加了当季旅行的特色索引栏目和课本里的中国特点栏目,与抖音中的视频资源高效结合,契合初高中学生的需求。

新方案调整目标

第二次提案,客户方总监提出要大胆发挥,不必拘泥于现有产品功能布局。所以这次提案更加的年轻、个性有创意,采用手绘、撕纸纹理、拼贴、卡通等设计及插画手法

结构原型调整

方案一布局采用长banner图,打破常规banner尺寸,更具冲击力及创新观感,镶嵌圆形搜索形状,整体更加自由、个性。增加了「为什么选择新东方文旅」,增强品牌感以及用户信任感。推广模块分为:按目的地、按旅游属性,两个方向进行模块划分,避免用户认知混乱

方案二通过时间维度分类主推产品,高效利用首屏;课本里的中国,与抖音热卖产品联动,快速吸引为孩子寻找合适产品的用户,也方便引流来的用户快速找到想要参与的活动。增加了「广播」,放置热门内容、主推活动等。「趣玩儿人气榜」:产品展示区,按用户感兴趣的、或最近最热的旅游热点进行分类推广。「热门话题」:功能与“新东方文旅,让孩子见识不凡”类似,更加自由开放,用户互动性更强。最后是为其他平台引流模块。

视觉符号提取

根据logo以及文化、旅行的含义,我们从logo中提取了以毛笔笔触为基础的以下两个视觉符号

过程尝试及应用

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/15 9:56:41

AI卷出新高度!Agentic RAG让大模型变身“超级员工“,小白也能轻松上手!

前阵子一个朋友帮一家金融机构做合规审核工具,说用传统RAG搭的系统总掉链子——用户问“跨区域信贷合同需规避哪些监管红线”,系统只能从知识库扒一堆条款堆砌过来,既不会拆解“跨区域”、“信贷类型”这些核心维度,也没法验证条款…

作者头像 李华
网站建设 2026/3/21 12:28:05

学长亲荐9个AI论文平台,专科生搞定毕业论文+格式规范!

学长亲荐9个AI论文平台,专科生搞定毕业论文格式规范! AI 工具如何让论文写作更轻松? 对于专科生来说,毕业论文不仅是学术能力的体现,更是对自我管理与时间规划的一次挑战。尤其是在当前 AIGC(人工智能生成…

作者头像 李华
网站建设 2026/3/21 11:51:15

Claude使用教程

Claude Code 常用命令使用教程 目录 简介斜杠命令主 CLI 命令钩子配置MCP 服务器IDE 集成键盘快捷键常见使用场景最佳实践快速参考 简介 Claude Code 是 Anthropic 推出的官方 CLI 工具,用于帮助开发者完成软件工程任务。它可以在终端中与 Claude 进行交互式对话…

作者头像 李华
网站建设 2026/3/19 14:33:33

SQL Server 支持多种网络协议用于客户端与数据库引擎之间的通信

SQL Server 支持多种网络协议用于客户端与数据库引擎之间的通信。最常见的 3 种数据库连接协议(也称为网络协议或通信协议)如下:1. TCP/IP(Transmission Control Protocol/Internet Protocol)最常用、推荐的协议&#…

作者头像 李华