Uber-LikeなUIのアプリを作る【考察編】

UIの勉強になるし、UI/UXとはなんなのかを再考するいい機会かと思って二、三日でやってみようかと思います。個人的なメモ程度なので。。。

Uber-LikeなUIを作ってみたい

ようするにこういうUI。
Where to?を入力することで行き先の座標を取ってきて、NearByのタクシーが見えるという仕組み。

1. 下のWorkタブとかHomeタブはつけたい。
2. 左上のハンバーガーメニューをつけたい。（時代遅れかもしれないけど）
3. バックエンドを書かないけど、せめて現在位置とルートを表示したい。(Google MapsのAPIかなぁ）
4. せめてRequestを押すとこくらいまでは一通り。

っていう四つが目標。裏目標はMVCの理解だけど、多分ここめっちゃガバガバなので、ご指導ご鞭撻のほどお願いしたいと思ったりしている。

Uber UIの分解

さて、UberのUIはどう作られているのだろうと、一旦考える。

1枚目

まず一つ目の画面。

割とわかりやすい。
素人目の予想だとやっぱり UIButtonとUITextFieldの二つ。裏の地図は見た目きにするならGoogle MapsのAPI突っ込んだらいいんだろーなぁって感じ。

ハンバーガーメニューが個人的に謎い部分で、今実機でないから確認できないけど、多分むにゅっと横から出てくるんだろなぁって感じ。４段くらいで個人設定とかなんだろなぁって具合でしかわかんない。

現在位置ぶち込んで、ぷわぁってレーダー風にしてるのがちょっとタチ悪い気がするけどまぁなんとかなるかと思う。

Where To?

How to "Where To"的な？的な？

ルート周りは多分APIで対応できるだろうなー。金額周りもバックエンドだろーなー。正直カード型のプッシュアップで出てくるビューだけ。ここでハンバーガーメニューが消えて、矢印のバックになっているのは検索するときに別ビューに飛んでるからなのか？コスパ悪いよなぁ。。。だとするとルートを上に乗っけて、ハンバーガーを矢印に変えてルート取得できた時点で下からプッシュアップするけど、ハンバーガーメニューのView自体は消えてないのかな？うむぅ。。。

コレクションビューとUIButtonのSubviewだろな。

ETAの画面

ETAってFTAみたいで、政治学系の学生はちょっと震えるんっすよね。。。

なんだかんだ一番バックエンドをやらない前提だと簡単かもしんない。
全体的にETAを動的にするのはめんどいけどフロントしか書かないからしらなぁい。カード型で情報保持してる画面。けどね。これ確かカード開くんすよね。しかも結構うほってなる開きかただった気がするけど、はっきり覚えてない。。。

上は多分UILabelかなんかに画像はっつけてバックグラウンドの色をいじっただけかなと。
下のSubViewは画像やらなんやらが乗っかってるけど、そんなビビることではない気がする。

実装 Part 1 へ