背景
当你刚上大学的时候，要想不迷失校园，除了依靠不怎么可靠的路边标识外，总会收到那么一张卡通绘制的校园地图：
这种静态图片可以让我们快速地了解到所需的地理位置信息，但使用和思考过后，会发现以下问题：
地理位置信息粒度高，而同一个地点通常具有多个服务功能和别名。地理位置信息变更导致地图信息过时。一旦服务网点迁移或更名，需要重绘地图，带来一定的延迟和信息滞后。入口较深。存储在手机上的地图并不是那么好找，尤其是随着时间的推移。无法准确的定位当前所处位置，需要寻找参照物，这是静态地图致命的缺点。缺乏更为详细的地点介绍，只能在有限的画面里堆积内容。
为此，我设计了一款校园导览应用，用当下流行的微信小程序结合云开发能力，低成本高效能地解决了以上问题。此外，我还根据对市面上的同类应用进行设计上的研究，在界面和交互设计上做功夫。下面我会进行简短的介绍。
中德导览
扫描二维码或者微信搜索中德导览使用此小程序。
中德导览 · 设计
如果你在微信上搜索「导览」二字，看到的小程序大多都是一个模板，页面层级深，界面拥挤，列表式的信息展示并不符合我们日常使用地图 APP 的经验。为此，我做出了多项改良：
更好的视野 - 自定义导航栏与侧边栏
FAB 与顶部菜单设计
把最主要的定位、客服和路线推荐功能在视觉上成为整体，通过点击 FAB 弹出菜单选项。顶部菜单栏的地点场景菜单设计为左右滚动，注意使用半遮设计来提醒用户滚动。同时，为了让界面更加精简，顶部菜单会在点击 FAB（Float Action Button）和母按钮时 toggle 显示与隐藏。
用点击代替滚动 - scroll-into-view
在路线面板和搜索页中，使用到了 scroll-view 组件，利用其 scroll-into-view 特性，实现点击代替滚动的操作，同时也能起到提醒后置选项的作用。
更好的视角 - 全景功能
结合 web-view 和全景服务平台，可以为一款地图导览应用增色不少。
总结
中德导览是一款由学生独立开发的以地图为载体，提供天津中德应用技术大学（中德）具体地点的位置信息、导航、校园历史及文化介绍的小程序。旨在解决校园导航标识不到位、地图形式低效单一、信息设计不够好等问题，为来中德新人和游客提供更加完美的出行体验。
当你刚上大学的时候，要想不迷失校园，除了依靠不怎么可靠的路边标识外，总会收到那么一张卡通绘制的校园地图：
这种静态图片可以让我们快速地了解到所需的地理位置信息，但使用和思考过后，会发现以下问题：
地理位置信息粒度高，而同一个地点通常具有多个服务功能和别名。地理位置信息变更导致地图信息过时。一旦服务网点迁移或更名，需要重绘地图，带来一定的延迟和信息滞后。入口较深。存储在手机上的地图并不是那么好找，尤其是随着时间的推移。无法准确的定位当前所处位置，需要寻找参照物，这是静态地图致命的缺点。缺乏更为详细的地点介绍，只能在有限的画面里堆积内容。
为此，我设计了一款校园导览应用，用当下流行的微信小程序结合云开发能力，低成本高效能地解决了以上问题。此外，我还根据对市面上的同类应用进行设计上的研究，在界面和交互设计上做功夫。下面我会进行简短的介绍。
中德导览
扫描二维码或者微信搜索中德导览使用此小程序。
中德导览 · 设计
如果你在微信上搜索「导览」二字，看到的小程序大多都是一个模板，页面层级深，界面拥挤，列表式的信息展示并不符合我们日常使用地图 APP 的经验。为此，我做出了多项改良：
更好的视野 - 自定义导航栏与侧边栏
FAB 与顶部菜单设计
把最主要的定位、客服和路线推荐功能在视觉上成为整体，通过点击 FAB 弹出菜单选项。顶部菜单栏的地点场景菜单设计为左右滚动，注意使用半遮设计来提醒用户滚动。同时，为了让界面更加精简，顶部菜单会在点击 FAB（Float Action Button）和母按钮时 toggle 显示与隐藏。
用点击代替滚动 - scroll-into-view
在路线面板和搜索页中，使用到了 scroll-view 组件，利用其 scroll-into-view 特性，实现点击代替滚动的操作，同时也能起到提醒后置选项的作用。
更好的视角 - 全景功能
结合 web-view 和全景服务平台，可以为一款地图导览应用增色不少。
总结
中德导览是一款由学生独立开发的以地图为载体，提供天津中德应用技术大学（中德）具体地点的位置信息、导航、校园历史及文化介绍的小程序。旨在解决校园导航标识不到位、地图形式低效单一、信息设计不够好等问题，为来中德新人和游客提供更加完美的出行体验。
posy
