iPhoneアプリのUIデザイン - NoteCubeの場合

iPhoneアプリのUIデザインNoteCubeの場合

iPhone Dev Sap勉強会 May, 2014

若林大悟 @frnkiOSアプリデベロッパー。 仕事効率化からゲームまで様々なジャンルのアプリを制作しApp Storeで公開。 企画・プログラム・デザイン・宣伝などアプリ作りに関わる全てをほぼ１人でおこなう。

NoteCube

シンプルで 使いやすい メモアプリ

一覧性に優れた 「グリッド」表示

SNSでなじみの深い 「タイムライン」表示

２つの表示の切り替えは なぜUITabBarではなく

UISegmentedControlなのか

UITabBar

アプリケーションの異なるサブタスク間、ビュー間、またはモード間を切り替える機能をユーザに提供します。 （iOSヒューマンインターフェイスガイドライン）

UITabBar

全く異なる内容・機能のView同士を切り替えるのに適している。

UISegmentedControl密接に関連しているが、相互に排他的な選択肢を提供するために使用します。 （iOSヒューマンインターフェイスガイドライン）

UISegmentedControl同じ内容を異なる形で表示するView同士、 近い関係性のView同士を切り替えるのに 適している。

新規ノート作成ボタン分かりやすく大きなボタン。 はじめにユーザーが何をすればいいか分かる。 下に配置することでアクセスしやすく、　　　大きくても邪魔にならない

編集画面

ノート閲覧画面と共通。 !

Toolbarにはノート自体に関係するアクションを配置。 　・ノートの共有 　・ノート色変更 　・ノートの削除

編集画面ソフトウェアキーボード上のinputAccesoryViewはキーボードの機能の延長という考え方。 !

ノートの内容に変更を加えるアクション（画像挿入）とキーボードを閉じるボタンを配置。

ボタンは、その機能ごとに整理して配置されているべき。 !

inputAccesoryViewがアクセスしやすいからといって、何でもかんでもぶち込むのは間違い。

カスタムトランジション

カスタムトランジションであっても「どこから来てどこに戻るのか」 というナビゲーションには忠実であるべき。

アニメーション

邪魔にならないタイミングで 遊びごころを入れる

どこから出てきているかを表現。 バウンスさせると可愛くなる。

画面の変化を分かりやすく補助したり、ちょっとした遊び心を入れたりする。 ユーザーの操作の邪魔になったり、ユーザーを混乱させたりしてはいけない。

カスタムトランジション &アニメーション

カスタムトランジション &アニメーション

「たのしい😊」 と感じてもらうためのアクセント

初回起動時の操作説明は ユーザーにスキップされます僕はよほど面白くなければスキップします…

操作説明を見ていてもアプリを久々に使うとき

には忘れてます

初見でもわかりやすく 操作していて楽しい

!

そんなUIを設計しましょう