一杯だけ UI調査

ポップアップは「出る」より「変身する」が今っぽい

一杯だけなら、押したボタンがそのまま半透明のシートに変わる動きが一番効く。泡っぽさ、軽さ、iPhoneっぽい奥行きを足しつつ、読みにくくならない範囲で使う。

一杯だけ

近くで飲みたい人
3人

健人くん
のみたいかも！

今の気分を選ぶ

一言でいうと

Liquid Glassっぽさは、画面全部じゃなく「操作する場所だけ」に使うのがよさそう。

一杯だけなら、のみたいかも！ボタン、設定シート、ハンバーガーメニュー、招待リンクカード。このあたりだけ浮かせる。カード本文までガラスにすると読みにくくなるからやらない。

押したボタンがぷにっと膨らんで、そのまま下からシートになる。外側タップと下スワイプで閉じる。

シートが出た時、カード一覧を少し暗くして1〜2%縮める。今どこを触ってるか一瞬でわかる。

泡が増えて、文字が出て、カードがふわっと戻る。900〜1200msくらいで短く気持ちよく。

作成中はボタン内に泡が流れる。成功したらリンクカードがぽんと出る。

カードを押すと少し沈む触った感じが出る。安いアニメじゃなく、ほんの少しでいい。

選択肢で泡が弾けるあり/迷い中/オフを押した時、小さい泡が1〜2個だけ出る。

メニューはボタンからふわっと開く横からガバッと出すより、押した場所から広がる方が今っぽい。

自分カードだけ少し光る他人カードと混ざらず、自分の状態が見つけやすい。

動きを減らす設定に対応iPhone側で動きを減らしている人には、泡演出を短縮する。

小さいボタンを作らない指で押すものは44px以上。見た目より使いやすさ優先。

次のUI改修は、のみたいかも！シートを主役にするのが一番いい。

理由は、アプリの一番大事な操作だから。ここが気持ちよくなると、アプリ全体が一気に「ちゃんとしてる」に見える。

目標はAppleの真似じゃなくて、泡っぽくて軽いけど、操作はちゃんとしてる一杯だけらしいUI。