iPhoneの片手用操作メニュー(QuadCurveMenu編)

iPhoneを片手で扱える操作用メニューを作りたいと思ったのでちょっと調べたことをメモ。

CSS で作るスマートフォン向け片手操作メニュー

これCSSとjQueryなのか、スゲー。
でも、Viewコンテナーとして作りたいんだよなー、と思ったらインスパイア元があるらしい。

ちなみに今回のやつ、デザインは Dribbble に投稿された下記がイケてたのでインスパイアされてみた。

iPhone Search Type Nav (Path Inspired) by Eric Hoffman : Dribbble


エントリーのタイトルにあるように「Path」にインスパイアされてるらしい。
「Path」ってなんぞ?
とググってみたら、ちょっと変わったSNSらしく、その「Path」のiPhoneアプリのUIにインスパイアされてるらしい。

Mobile UI Patterns – CustomNavigation

おぉ、まさにこういうメニューが作りたかったんだよ。

サンプルになりそうなソースが公開されてないか探してみた。
QuadCurveMenu for iOS : Cocoa Controls
levey / QuadCurveMenu : github
ライセンスもMIT Licenseなのでクレジット表記で改変自由。

ARC対応してないソースだったのでARC対応を再度探してみたらあった。
flubbermedia / QuadCurveMenu : github
levey氏のソースからforkしたものだ。

画面左上の配置しか無かったので、6パターンの配置になるようにソースを修正。


左上、左中、左下、右上、右中、右下の順に1~6までの数字ボタンを割り当て、タップすると配置が変更するようにしてみた。
実機で使い心地を試してみたが、親指で操作する場合は中段の配置が一番便利かな。
メニューの展開が180度開く必要があるかは微妙だけど。
邪魔にならない前提を考えると実用的なのはやっぱり下段。
あとはボタンの透明度を上げるとかすれば邪魔な感じが減るかもしれない。

ソースはfork元同様、githubで。
nalabjp / QuadCurveMenu : github

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。