汕头市位于广东省，是中国第一批 4 个经济特区之一。目前其市区内的实时公交信息只通过一款手机应用发放，其对于日常使用而言，体验仍过于复杂，乘客需要打开应用 > 手动输入线路或点击“当前站点”按钮后、选择当前站点和线路 > 查看线路情况。
网页显示的实时公交数据，需要借助后端 PHP 程序抓取。程序设置了缓存机制，此外还通过保存每辆车的历史位置，对长时间不移动的车辆进行标注提示，提升了数据的可信度。
Shantou is a city in Guangdong, which is one of the several Special Economic Zones in China. Currently the realtime bus infomation in Shantou is only provided inside a mobile application, and this app is somewhat complex for ordinary use. Users need to open the app, manually input bus route number or tap "nearby stops" to choose a stop and then choose a route, and finally see the realtime status of a specific route.
After some research to the design of some other apps like Citymapper and Transit, I made a webpage-based design of the realtime bus query. Users can see next bus's distances of all nearby routes grouped with stops, within one page. After clicking the routes, a simplified route map with bus's location is shown. This has improved the ordinary usage experience a lot.
The realtime bus information is provided by the PHP backend, which fetchs data from remote server. It implements a cache mechanism to reduce remote fetching. It also saves previous bus location, and use these records to mark idle buses on the frontend, improving the credibility of the data.
使用网页而不是 App 构造，用户体验不输原手机应用的同时，使用更方便，环境不受限（如在电脑上查询）。界面参照 Material Design 的卡片概念设计。
Built with a webpage instead of an app. While the UX is better than the official app, the use is easier, and the environment is unrestrained (e.g. PC usage). The interface design is based on the concept of card in Material Design.
创新性地将实时天气预报与实时公交结合。增加了彩云天气 API 提供的公里级实时降雨预报，出门更放心。
Innovatively combine realtime bus with realtime weather forecast. Kilometer-level realtime rainfall forecast by Caiyun Weather API leaves every journey with confidence.
Clean route map design, which lightens stops in reverse direction. Give specific route special decoration or announcements, in light of events or service changes. Automatically mark idle buses to avoid confusion.
At night there is a last-bus helper which shows clear service time of every route and stop.
There have been already many mature website and apps, providing ultimate public transport information service. Due to data openness and other issues, in some cities these information is not presented as so readable. This design is just a tiny attempt to overcome this.
See in Real
Unfortunately because the data provider claims its exclusive rights on realtime bus data, I am not able to provide the service in public anymore. If you want to see this in real, just contact me (comments are good!) and I can create a temporary url for short-time demostration purpose.