はじめてのi osアプリデザイン
-
Upload
schoowebcampus -
Category
Business
-
view
1.300 -
download
0
description
Transcript of はじめてのi osアプリデザイン
![Page 1: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/1.jpg)
はじめてのiOSアプリデザイン
山本麻美
7
![Page 2: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/2.jpg)
なまえ:山本麻美� !しごと:GoMA-apps� スマートフォンアプリやWebのデザイナー� 商業高校と専門学校の講師 asamieee7
Wishscope� ※2012年5月に�
リリースされたバージョン
Carry Taptrip� ※2013年4月以前
ミイル-miil� ※一部の画面のみ
iOSアプリ Androidアプリ Windows8アプリ
PaintDrops
![Page 3: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/3.jpg)
もくじ
1.印刷物やWebサイトとスマートフォンアプリの違い・印刷物の特徴・Webサイトの特徴 ・スマートフォンアプリの特徴�
2.iOSヒューマンインターフェイスガイドラインを読んで、デザインのルールを知ろう・iOS7向けの設計・バーの種類-ステータスバーについて・ビューの種類 ・コントロール部品の種類・一時ビュー・まとめと宿題�
3.質疑応答
15分
35分
10分
![Page 4: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/4.jpg)
1.印刷物やWebサイトと スマートフォンフォンアプリの違い
![Page 5: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/5.jpg)
印刷物、Webサイト、スマートフォンアプリ、�
それぞれの特性を知らないと�
ちゃんとデザインできないですよね!�
「ちゃんと」というのは、�
どういうことなのか考えてみましょう。
![Page 6: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/6.jpg)
印刷物の特徴• 機能や構造、ファイル容量にとらわれず、自由にグラフィカルにデザインできる�
• 人の行動のついで、なりゆきで見てもらえやすい(車内広告、街頭配布チラシ、通販カタログ、ポスター、新聞折込広告 等)�
• 停電、充電切れの影響がない�
• 情報は一方通行�
• 捨てられてしまうリスクがある�
• デザインするにはDTPの知識が必要
他にどんな特徴があるでしょうか?第1問
![Page 7: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/7.jpg)
Webサイトの特徴• 情報の更新が容易なため、より早く最新情報を発信できる�
• 音や映像を掲載することもできる�
• 宣伝から商品販売まで一気にもっていける�
• アンケートや、お問い合わせを受け付けられる�
• より多くの人に見てもらえやすい�
• パソコンに向かってもらわないとなにもはじまらない�
• デザインするにはHTMLやCSSの知識が必要
第2問他にどんな特徴があるでしょうか?
![Page 8: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/8.jpg)
スマートフォンアプリの特徴• ユーザーが積極的にアクションを起こし、なにかしらの目的を遂げるためのツールであることが多い�
• 移動中でも手軽に利用してもらえる�
• コンテンツの表示領域がチラシやパソコン画面と比べて極端に狭いしかも!その狭い領域を指で操作する�
• ダウンロードしないと使えない�
•デザインするにはiOSやAndroidの知識が必要
他にどんな特徴があるでしょうか?
第3問
![Page 9: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/9.jpg)
印刷物 Webスマートフォン� アプリ
メディア(媒体)の性質が異なる
• 紙� • 情報は一方通行
• 広い画面� • 情報は双方向
• 狭い画面� • 何かを実行できる
![Page 10: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/10.jpg)
DTP or� グラフィック� デザイナー
Web� デザイナー
スマートフォンアプリ� デザイナー
≠ ≠
それぞれの知識が必要
![Page 11: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/11.jpg)
2.iOSヒューマンインターフェイス ガイドラインを読んで、 デザインのルールを知ろう
![Page 12: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/12.jpg)
iOS7向けの設計
• 控えめであることUIにはその内容を分かりやすく表示し、ユーザとやり取りする働きがありますが、それ自身の方が目立つようであってはなりません。�
• 明瞭であること文字はどの大きさでも読みやすく、アイコンは的確明瞭で、装飾は控えめで適度、さらにその機能を明確に表すようでなければなりません。�
• 奥行きを与えること視覚的な重なりや本物らしい動きがあると、楽しさや分かりやすさが向上します。
-iOS Human Interface Guidelinesより-
![Page 13: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/13.jpg)
どういうこと� なのか、� 具体的に� 見てみましょう
![Page 14: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/14.jpg)
控えめであること
iOS6 iOS7やけに� 主張が強い� 太陽と雲
控えめな� 空の背景
スッと� 情報に� 目がいく
つやつや、もりもり、かげかげを多用しない。� ユーザーが見たいのは情報であるということを忘れない。
雨マークすごいw
![Page 15: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/15.jpg)
明瞭であること 1
iOS6 iOS7
明確な� 色分け
淡い色� 質感&
立体感平面的
よけいな装飾や立体感を排除し、� はっきりした色分けでコンテンツをわかりやすくする。
![Page 16: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/16.jpg)
明瞭であること 2
iOS6 iOS7
押せるところは色を統一。文字は読みやすい文字間、行間で。
鍵となる色で� 操作可能な� 場所を�
それとなく明示。
リアルな� 質感
境界線の� ないボタン
![Page 17: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/17.jpg)
奥行きを与えること
iOS6 iOS7
他のリストは� ここにまとめた
リストを� 重ねて表示
奥行きを使うことにより、平面での画面遷移よりも� 現在の状態が瞬時にわかるようにできる。
![Page 18: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/18.jpg)
各UIパーツ� を�
見てみよう
![Page 19: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/19.jpg)
iOSアプリケーションの解剖
40px
88px
98px
116px
ステータスバー
ナビゲーションバー
タブバー ツールバー ボタン
スコープバー
検索バー
![Page 20: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/20.jpg)
ステータスバー� ここのデザインは変えない� 以下の2種類
↑透明(デフォルト)
↑黒
高さは� 40px
![Page 21: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/21.jpg)
さまざまなアプリのステータスバー透明 黒
evernote
LINE
Path
Pinterest Google+
![Page 22: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/22.jpg)
ちょっと変わったステータスバー
circle
ガイドラインには、�
ステータスバーに背景を設定して、�
奥が透けて見えないようにしてください。�
と書いてあるけど…�
どうなってんの、これ?
![Page 23: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/23.jpg)
「circle」のステータスバー
スクロール� すると…
コンテンツが� うしろに透けない� デザインに変わる!
![Page 24: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/24.jpg)
そして!� !
ステータスバーは独自UIは作成しないほうがよいが、�
非表示にすることが可能。
![Page 25: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/25.jpg)
全画面表示のメディアをユーザが意識的に見ているときには、ステータスバー(お
よびその他のUI要素)を非表示にすることも検討する。ステータスバーを非表示
にする場合は、1回タップするだけでステータスバー(および適切なアプリケーションUI)
を再表示できるようにしてください。よほどの理由がない限り、ステータスバーを再表示する
ためのカスタムジェスチャを定義するのは避けるのが最善です。ユーザがそのようなカスタム
ジェスチャに気付いたり、それを覚えたりしている可能性は低いからです。
iOS ヒューマンインターフェイスガイドラインにはこのように書いてあるのですが、、、
それは具体的には、どんな場合でしょうか?
第4問
-iOS Human Interface Guidelinesより-
![Page 26: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/26.jpg)
ステータスバー非表示例 その1
『写真』
タップすると� ステータスバーを非表示にし� 全画面表示になる。�
もう一度タップすると元に戻る
![Page 27: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/27.jpg)
ステータスバー非表示例 その2
『hulu』
通常ステータスバー非表示。� 画面タップでステータスバーと� コントローラーが表示される
![Page 28: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/28.jpg)
ユーザに対する� 視聴の強制�
!告知を見てほしいからとか� そーゆーのはだめ。
すごく� 重要!
ユーザが自発的に� 意識的に視聴�
!全画面表示のメディアを�
見る場合。
ステータスバーの非表示○×
![Page 29: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/29.jpg)
その他のバーの種類
ツールバー ボタン
スコープバー
検索バー
タブバー
ナビゲーションバー
ステータスバー
![Page 30: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/30.jpg)
その他のバーの種類とカスタマイズ例1
タブバー
ナビゲーションバー
ステータスバー
ナビゲーションバー
ステータスバー
タブバー
![Page 31: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/31.jpg)
その他のバーの種類とカスタマイズ例2
ツールバー
検索バー 検索バー
Google Maps
ツールバー(?)
マップ
![Page 32: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/32.jpg)
その他のバーの種類とカスタマイズ例3
Carry
ボタン
スコープバー スコープバー
miil
ボタン
![Page 33: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/33.jpg)
UI要素を� 見てみよう
![Page 34: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/34.jpg)
• バー�
• コンテンツビュー�
• コントロール部品�
• 一時ビュー
UI要素は、大きく分類すると4つ
![Page 35: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/35.jpg)
• アクティビティ�
• コレクションビュー�
• 画像ビュー�
• マップビュー�
• ポップオーバー(iPadのみ)�
• スクロールビュー�
• 分割ビューコントローラ(iPadのみ)�
• テーブルビュー(プレーンとグループ化)�
• テキストビュー�
• Webビュー
コンテンツビュー
Web� ビュー
Map� ビュー
![Page 36: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/36.jpg)
• アクティビティインジケータ�
• 追加ボタン�
• ピッカー�
• ページコントロール�
• 進捗ビュー�
• セグメント化コントロール�
• スライダ�
• ステッパ�
• スイッチ�
• システムボタン�
• テキストフィールド
コントロール部品
スイッチ
ピッカー
「ドラムロール」と呼ぶ人もいる
アクティビティ� インジケータ�
(通称:ぐるぐる)
![Page 37: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/37.jpg)
• アラート�
• アクションシート�
• モーダルビュー
アクション� シート
アラート
一時ビュー
モーダル� ビュー
![Page 38: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/38.jpg)
アプリのテイストに合わせて� 全画面をフルカスタマイズ�
!開発コストがかかりすぎたり、� ユーザが見慣れている標準UIのほうがよい場合もある。�
すごく� 重要!
カスタマイズが必要かどうか、しっかり検討する�
!設定画面は標準UI、その他の画面はカスタマイズ、というように使い分ける。
コントロール部品や� 一時ビューのカスタマイズ
![Page 39: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/39.jpg)
標準UI
『LINE』のUIを見てみよう
独自UI
![Page 40: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/40.jpg)
iOSヒューマンインターフェイスガイドライン�
を読むべき理由�
!
• iOS7のUI方針を知る� • iOSのUIパーツの種類や目的を知る� • カスタマイズしない箇所と、その理由を理解する
まとめ
![Page 41: はじめてのi osアプリデザイン](https://reader033.fdocument.pub/reader033/viewer/2022052907/5592228b1a28abb6068b4633/html5/thumbnails/41.jpg)
宿題� !
標準UIと独自UIをうまく使い分けている�
アプリの例を挙げてください。(『LINE』以外)�