跳到主要内容
全部作品

产品设计 · 2023

城市漫步导览小程序

为一条步行路线做导览工具:把地图、站点解说和离线使用放进同一套页面。

流程设计地图交互移动端
年份
2023
方向
产品设计
角色
交互设计
工具与标签
流程设计 / 地图交互 / 移动端
手持手机查看步行路线地图
手持手机查看步行路线地图图版 01

背景

路线本身是线性的,用户却常常在半路改变计划:想跳过一段、想回头补看一个点,或者在没信号的地方打开页面。旧版把所有内容压在一张长列表里,位置和内容对不上。

这次把「我现在在哪、下一站是什么、这一段讲什么」拆成三个层级:地图只负责定位,内容按站点组织,离线时也能读到已经下载的部分。

做法

3 个阶段
  1. 01

    先按真实步速走一遍

    记录每个停留点需要的信息量,把「走」和「看」分开设计:移动时只给方向和距离,停下来才展开解说。

    摊开的城市地图与路线标注
    摊开的城市地图与路线标注
  2. 02

    用站点而不是页面组织内容

    每个站点有编号、距离和一段解说,地图上的点与列表一一对应;返回时保留上次位置。

    指向展厅方向的木质导视牌
    指向展厅方向的木质导视牌
  3. 03

    补上离线与迷路的状态

    明确标出已下载范围,没有信号时给出返回上一个站点的路径,而不是只显示一个加载中。

图集

成品与过程材料
路线主题的情绪板与素材拼贴
路线主题的情绪板与素材拼贴图 1
记录站点顺序与信息量的手写草稿
记录站点顺序与信息量的手写草稿图 2
流程与状态梳理的白板草图
流程与状态梳理的白板草图图 3

结果

交付了什么

以可核对的交付物记录结果,不换算成无法验证的业绩数字。

站点结构表
路线按编号、距离与解说内容拆成可维护的条目。
地图与列表的联动规则
定位、选中与返回位置在同一份数据上同步。
离线状态说明
已下载范围、弱网提示与返回路径写成界面文案。

以上为过程与交付说明;路线内容与实际访问数据由项目方维护。

复盘

地图与列表的联动在弱网下仍会延迟。第二版把定位改成「最近站点」而不是精确位置,体验反而更稳。