Facebook for iOSのチャットアイコンUIを再現「ChatHeads」
ChatHeadsはObjective-C製、iOS用のオープンソース・ソフトウェア(ISC License)です。
iOSのFacebookアプリではチャットしている友人が丸いアイコンになって画面上に表示されます。これを再現したライブラリがChatHeadsです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.12.02.1378647618.png)
デモアプリです。左上にアイコンが表示されています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.12.09.1378647622.png)
左右に移動ができます。途中で指を離しても左右どちらかに吸着します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.12.15.1378647625.png)
高さは自由に決められます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.13.04.1378647628.png)
アイコンをタップすると一気に上に移動してさらにテーブルが表示されます。
ChatHeadsではFacebookアプリのように削除機能はありませんが、アイコンが途中で指を離した場合にも自動的に計算して吸着すると言った他でも使えそうな仕組みがあります。特殊な用途向けな気もしますが、だからこそ覚えておくと使える場面があるかも知れません。
MOONGIFTはこう見る
iOSアプリではユーザビリティを高くすることが常に求められます。特に新しい仕組みを考えついた際にはユーザが混乱しないよう慎重に作らなければなりません。実際、Facebookのチャットアイコンについては慣れるまで時間を要した人が多いはずです。
しかしFacebookクラスの企業がそのUIを選んだということは、優れたポイントがあるからに他なりません。そのUIを真似ることで得られるものがあるはずです。同様に大きな企業、人気のアプリのUIを真似て実装するとなぜそのUIにいたったのかが分かるようになるでしょう。