1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Human Interface Guidelines App Architecture まとめ

Posted at

#1. Loading ローディング
アプリが何か処理をしている際に画面が動かなかったり、真っ白になるとアプリがフリーズしたように見えてしまい、ユーザーがイライラしてアプリを終了したりアンインストールする可能性が上がるためロードしていることをユーザーに示す必要がある。
##ローディング画面を作る
###方法1
Loading Spinner(以下の写真のようなクルクルしたやつ)を表示する。
images.jpeg

Loading Spinnerを簡単に表示する方法

###方法2
progress barを使い、進捗をユーザーに示す。
e303fe47.png

###方法3
処理をしている間にチュートリアルなどを見せる。
clashofclanstutorial01.jpg

#2. Modality (分岐型)
モーダリティーはユーザの注目を集めるデザインの手法です。特定の処理をするときに、別画面やViewを前の画面に重ねて表示する手法です。例えばAir Dropするときに下から出てくる画面のようなものを指します。
ios12-iphone-x-photos-share-airdrop.jpg

###手法1:アラートビュー
iOS-Simulator-Screen-shot-30-Dec-2013-09.50.43.png
このように画面の上にビューを重ねることでユーザーの注目を引くことができます。

###手法2:モーダルビュー
Modality_2x.png

###手法3:シートビュー
ActionSheet_Iphone.png

###これらを使うときの注意点
これらの手法をむやみやたらに使ってもユーザーが使いごごちのいいアプリを作ることはできません。
以下のことを心がけて使用する必要があります。

####モーダルビューは本当に必要な時にしか使わない。
モーダルビューはユーザが今までしていたタスクとは違うことをしてもらう時に使います。なのでユーザーが本当にその作業をすべきなのか考え、必要なときに使いましょう。

####アラートビューは本当に必要な時のみ使う。
アラートビューは使いやすく、むやみやたらに使われやすい傾向がありますが、むやみやたらに表示するとユーザーの操作を邪魔してしまうので本当に必要な時にのみ使いましょう。

####モーダルビューの内容、することは少なめに
モーダルビューでたくさんのことをユーザーにしてもらうと、ユーザーが何をするためにモーダルビューを表示させたのかわかりにくくなってしまう傾向があります。なので、モーダルビューのコンテンツは極力少なくしましょう。そして、完了(Done)ボタンは本当にユーザーがタスクを終わらせた時のみに使いましょう。

####モーダルビューにキャンセルボタンを必ずつけましょう。
モーダルビューを表示する際にそれをまたしまえるようにキャンセルボタンを設置しましょう。

####ユーザーが入力したデータが消えるのを防ぎましょう。
ユーザーが何かをモーダルビューで入力した際に間違えてキャンセルジェスチャーやキャンセルボタンを押してしまう可能性があります。モーダルビューがキャンセルされる前にはデータが消えてしまうことをユーザーに必ず示しましょう。

####ポップオーバーの上には何も表示しない。
ポップオーバーの上にはカードなどを表示することができますが、表示する前にはポップオーバーをしまってから表示するようにしましょう。
ポップオーバー
MWGUp.png

####モーダルビューにナビゲーションバーなどをつける場合は元のビューと同じデザインに
####モーダルビューの表示のアニメーションは適切なものを使いましょう。

#3ナビゲーション
##階層ナビゲーション
一つの画面に選択する項目を一つしか置かない手法。初めの画面に戻るには手順を画面を一つずつ遡っていく必要がある。メールや設定などのアプリはこの手法を使っている。
NavigationHierarchical-Graphic_2x.png

##フラットナビゲーション
全ての画面からタブバーなどを使い全ての画面にアクセスできるナビゲーション。ミュージックアプリやApp Storeなどで使われいる。
NavigationFlat-Graphic_2x.png

##コンテンツ主従型
基本的には使われない型だが、ゲームなどではこのようなナビゲーション型を使う場合がある。
NavigationExperienceDriven-Graphic_2x.png

#引用元
Apple Human Interface Guidelines (かなり意訳してまとめました。)

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?