リッチな UI とコード設計

Katashin
·

最近リッチなインタラクションを実装する機会が増えたのとともに、そのような UI をメンテナブルに実装するにはどうすべきかを考えることが増えた。ブログにも UI + 設計という話題で記事を書くことがある。

設計の話は人気な印象があるが、リッチな UI + 設計の話をしている人は全然見かけない気がする。UI 実装が得意な人は寿命の長いコードを書くのが苦手そうだし、設計が得意な人はUI に興味がない印象がある。

例えば、以下のような長押しでポップオーバーを開き、そのまま指を話さずにドラッグしてメニューを選択できるようなUI:

こういう UI はメニューのインタラクションをタップによる選択だけにすれば実装は簡単になる。しかし、ユーザビリティを考えて凝ったインタラクションを入れようとすると考えることが増える。

素朴に考えるとドラッグの座標とメニュー項目の座標を比較して、X座標が一致した時に選択状態にすれば動く。しかし、そのような実装をメンテナブルにするのはかなり難しいと思う。

自分では、個々の実装を考えたときにはそれなりに良い答えを出せると感じているが、まだそれを一般化できてないので、なんらかのデザインパターンを見つけ出したい。