![見出し画像](https://assets.st-note.com/production/uploads/images/120201422/rectangle_large_type_2_0a446ecb4c42d832459278743b95e4bb.png?width=800)
【UIトレース】Yahoo乗換案内編
UIトレース第8弾。
鉄道・バスなどの交通案内サービスのYahoo乗換案内をトレース。
UIトレース
![](https://assets.st-note.com/img/1698325284526-GxGbQLR9Gj.png?width=800)
トップ画面のルート検索画面。
経由地はすぐ消しやすいように取り消しアイコンがついている。
![](https://assets.st-note.com/img/1698327098067-FyNaACcfI3.png?width=800)
フォームをタップすると専用の入力画面に遷移。履歴や地図上で選ぶことも可能。
なお鉄道駅のみならず施設名などでも検索可能。
![](https://assets.st-note.com/img/1698320712210-3fHRz6B9we.png?width=800)
リストで表示されるルート検索結果画面。
Tabの左から”速・楽・安”の観点で並び替えされる。アイコンは候補にも表示され3つを満たしていると早く、楽で、安い手段となる。
出発時間の前後の列車も選択できるのはなかなかに便利。
![](https://assets.st-note.com/img/1698330806397-jRlrYt9eD7.png?width=800)
アイコンのフォントも変えているのが面白い。
![](https://assets.st-note.com/img/1698320712510-o598QshkM0.png?width=800)
候補ルートをタップすると時系列に沿ってルートが表示される。料金、所要時間、ラインカラー、サインシステム、発着番線なども表示され一通りの情報が網羅されている。
(今気がついたが、「乗り換え案内」なのに”乗り換えなし”で行けるルートを選んでしまった…)
![](https://assets.st-note.com/img/1698331437120-7nuJf5TfRu.png)
上部のアクション一覧は、「この画面の情報」を保存したり共有する内部的なもの。
![](https://assets.st-note.com/img/1698331451758-E1njNBS0xg.png?width=800)
下部のアクション一覧は、アラートや迂回ルートの検索など「この画面外」に対するもの。性質が違うので場所が違う。
フォントサイズ・カラー・余白など
![](https://assets.st-note.com/img/1698503023873-Pp96ImRIod.png?width=800)
少し種類が多い印象。一番大きいのは候補ルートの番号で、
![](https://assets.st-note.com/img/1698503023908-bsL8mWVHNO.png?width=800)
グリーンを主とした配色。黒の色は純粋な黒(#000000)。
![](https://assets.st-note.com/img/1698549923733-NiNOBIIGg2.jpg?width=800)
![](https://assets.st-note.com/img/1698549923771-KhMQv72FFp.jpg?width=800)
![](https://assets.st-note.com/img/1698549923699-b8TZlHPE8L.jpg?width=800)
振り返り
よく使うサービスだが、本当に使いやすいと常々感じている。
特に早い・楽・安いの3つの観点でルートを提示しているのは、検索時の状況によって最適なルートを選択できるので助かる。
OOUIを学んでから、オブジェクトに表示させる情報の取捨選択を考えるようになった。今回は特に過不足なく表示しているように思ったが、現在の列車の運行状況(〜分遅れ、あと〜分で到着…など)を追加してもいいかもしれないと思った。
![](https://assets.st-note.com/img/1698555888918-FBYk5kBKxU.jpg?width=800)
と…思っていたら執筆中にアップデートがありこれが見事に追加されていた。てぇしたもんだ!😄
この記事が気に入ったらサポートをしてみませんか?