Supermancall
2bulu Outdoor Assistant
Build
Version
1.4.29
Design software Figma
2bulu Outdoor is the most popular professional outdoor platform and tool in China, mainly targeting outdoor sports enthusiasts such as hiking, mountain climbing, cycling, and orienteering.
About Project
两步路是国内最受欢迎的专业户外平台和工具，主要面向的是徒步、登山、骑行、定向越野等户外运动爱好者，旨在提供安全和可靠的户外出行服务。
ABOUT PROJECT
当前版本
存在哪些痛点问题?
PROBLEMS
产品结构混乱
交互流程极易让人感到困惑
信息架构复杂不统一，
难以直观获取到目标信息。
缺乏品牌化设计调性，
风格古旧不现代。
主要产品模块不够突出，很多实用功能隐藏得太深
受访者无法第一时间找到目标信息
受访者无法完全理解各项功能
受访者不会选择在两步路商城购买
*基于用户访谈和测试
页面整体框架结构混乱，单一页面堆功能模块缺乏逻辑和引导
品牌设计未凸显独特调性，难以在市场中形成鲜明辨识度。
01
49%
38%
69%
02
03
Structural Layer
Visual Layer
Framework Layer
基于前面收集的信息与分析的内容，我们制定了此次重设计项目的整体目标，并分配它们的优先级。
缩短核心任务操作路径
明确记录流程状态反馈
减少重复确认与弹窗打断
优化交互流程
全面优化导航、记录等功能交互流程，提升操作便捷性与流畅度。
优化结构权重
深度优化内容信息展示结构，精准规划所处位置并科学分配展示权重。
将核心功能前置展示
提升关键数据展示权重
精简低频与重复模块
增强品牌调性
着力建立差异化且辨识度高的品牌视觉调性，重建独特品牌形象。
统一品牌视觉语言体系
强化户外探索视觉符号
建立更清晰的品牌记忆点
优化视觉表达
优化图标表意、视觉排版的稳定性和信息呈现的形式
统一页面排版与视觉规范
优化图标表意与识别效率
提升信息层级与视觉对比
在目标开发周期内，
安排设计任务。
SCHEDULE
从最初的草图到最终的像素，我们如何构建周期。
创建设计任务，并根据实际情况评估它们的工作；量并给出对应的排期。
交付开发
2 Weeks
用户分析
Users Research
用户访谈
用户画像
痛点整理
用户调研
体验优化总结
4 Weeks
界面设计并交付
Interface Design And Delivery
交互设计
视觉探索
规范制定
界面设计
原型设计
产品分析
Product Analysis
需求分析
产品分析
功能梳理
体验分析
2 Weeks
Planning
for 1 month iteration period
重新规划了产品的页面结构和层级
PROTOTYPE
商城合并进首页，在底部导航中活动调整成路线便于查找，中间的导航按钮只作为路线导航使用，不混合路线记录功能。
两步路户外助手
启动/登录
首页
路线
导航
收藏
我的
路线列表
路线详情
选择路线
选中路线
开始导航
路线
基本信息
动态
我的功能
推荐
出行服务
精选路线
路线详情
游记详情
动态详情
商品分类
品牌特卖
套装专区
徒友推荐
商品列表
商品详情
关注
精选商品
商城
动态列表
记录行程
查找路线
商品
户外工具
应用功能
构建平台的调性
与情绪
GUIDELINE
围绕产品目标与用户的认知，我们认为品牌的调性要脱离都市钢筋水泥、消费主义和班味，要像从城市走进户外一样切换心境并激发探索欲。
自然
自由
NATURE
FREEDOM
探索
EXPLORATIION
Modboard
Color Palette
Typeface
#0C0C0D
GR1
Color token
#40A137
GR3
Color token
BLACK
GREEN
PURE WHITE
BLUE
BROWN
CHARCOAL
GN3
Color token
GR8
Color token
BR4
Color token
BL4
Color token
#616366
#FFFFFF
#316CCB
#A25C0C
B5
#0C0C0D
B20
#303233
B40
#626466
B60
#939699
B80
#C6C9CC
B90
#E1E3E5
B95
B100
#F0F1F2
Pure white
苹方 SC 是 iOS 默认字体，减少用户认知成本。传达专业、可靠和安全的品牌气质，增强用户对应用的信任感。
Montserrat 几何结构清晰，字形现代简洁，西文与数字识别度高。用于金额、数据、标签和标题等场景，能增强界面的秩序感与科技感。
for Chinese
for Alphabet
H1
H2
H3
T1
T2
A
Size 18 / Hight 25 / Semibold
Size 16 / Hight 22 / Semibold
Size 14 / Hight 20 / Semibold
Size 15 / Hight 22 / Regular
Size 13 / Hight 18 / Regular
Size 12 / Hight 16 / Regular
三级标题
将规范
整理成文档
DOCUMENTS
样式库
组件库
登录页关联每日一图
每天都有新感觉
LOGIN
登录页结合“每日一图”模块做展示，
中心放当日主推的摄影图，且进入首页后顶部用图和该图保持一致，有进入动效，
营造出“进入户外”的沉浸体验。
登录页结合“每日一图”模块做展示，
中心放当日主推的摄影图，且进入首页后顶部用图和该图保持一致，有进入动效，
营造出“进入户外”的沉浸体验。
HOMEPAGE
首页视觉重设计
重构首页框架
重新优化了框架的结构，将每日一图合并到顶部轮播图。调整模块的位置以及减少它们占据的空间，提高浏览效率。
01
商品模块混合
推荐商品同时包含优惠模块入口与普通商品的展示，提高信息丰富性也压缩模块空间。
03
精选路线推荐优化
优先突出精选路线，强调路线内容的重要性，以及使用和摄影图不同的封面图例，增加不同内容信息的差异。
02
全局图片风格管理
对页面整体图片的样式都做出规划，商品、服务都采用更加精准、清晰的图片风格。
04
路线与探索
ROUTE
重新规划了产品的页面结构和层级，商城模块合并进首页中，而在底部导航中把活动调整成路线模块便于查找，中间的导航只作为路线导航使用，不混合路线记录功能。
下方选择路路线
上方卡片即可预览
当前选择，
更符合直觉的交互。
Choose a route
Start Navigation
路线记录
RECORD
围绕产品目标与用户的认知，我们认为品牌的调性要脱离都市钢筋水泥、消费主义和班味，要像从城市走进户外一样切换心境并激发探索欲。
节点展开
节点堆叠
节点编辑
点击折叠的节点可以展开内容项，并精确进入其中一项的详情。
01
02
03
照片记录
文字记录
语音记录
重新优化了框架的结构，将每日一图合并到顶部轮播图。调整模块的位置以及减少它们占据的空间，提高浏览效率。
重新优化了框架的结构，将每日一图合并到顶部轮播图。调整模块的位置以及减少它们占据的空间，提高浏览效率。
重新优化了框架的结构，将每日一图合并到顶部轮播图。调整模块的位置以及减少它们占据的空间，提高浏览效率。
E-COMMERCE
两步路户外商城
为场景分好类
围绕产品目标与用户的认知，我们认为品牌的调性要脱离都市钢筋水泥、消费主义和班味，要像从城市走进户外一样切换心境并激发探索欲。
围绕产品目标与用户的认知，我们认为品牌的调性要脱离都市钢筋水泥、消费主义和班味，要像从城市走进户外一样切换心境并激发探索欲。
户外商品
下单&支付流程
围绕产品目标与用户的认知，我们认为品牌的调性要脱离都市钢筋水泥、消费主义和班味，要像从城市走进户外一样切换心境并激发探索欲。
户外社区
与同好们交流心得
COMMUNITY
登录页结合“每日一图”模块做展示，中心放当日主推的摄影图，且进入首页后顶部用图和该图保持一致，有进入动效。
图文相和
全方位动态表达
我的页面
整合功能入口
USER PROFILE
围绕产品目标与用户的认知，我们认为品牌的调性要脱离都市钢筋水泥、消费主义和班味，要像从城市走进户外一样切换心境并激发探索欲。
从最初的草图到最终的像素，我们如何构建周期。
ALL PAGES
所有页面展示
Thanks for
watching
谢谢观看!
