Human Interface Guidelines App Architecture まとめ

#1. Loading ローディング
アプリが何か処理をしている際に画面が動かなかったり、真っ白になるとアプリがフリーズしたように見えてしまい、ユーザーがイライラしてアプリを終了したりアンインストールする可能性が上がるためロードしていることをユーザーに示す必要がある。
##ローディング画面を作る
###方法１
Loading Spinner（以下の写真のようなクルクルしたやつ）を表示する。
![images.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/7e1780c0-b7de-1509-4e53-86fcdbc739a6.jpeg)

[Loading Spinnerを簡単に表示する方法](https://dev.classmethod.jp/smartphone/ios-svprogresshud/)

###方法２
progress barを使い、進捗をユーザーに示す。
<img width="194" alt="e303fe47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/ca6515d5-d740-5f4b-6cf7-a0460c2691d8.png">

###方法３
処理をしている間にチュートリアルなどを見せる。
![clashofclanstutorial01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/e7273858-d95f-c481-89c4-c918e5eb91cb.jpeg)

#2. Modality （分岐型）
モーダリティーはユーザの注目を集めるデザインの手法です。特定の処理をするときに、別画面やViewを前の画面に重ねて表示する手法です。例えばAir Dropするときに下から出てくる画面のようなものを指します。
![ios12-iphone-x-photos-share-airdrop.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/3be492db-bb11-1b82-53a5-273fdf904723.jpeg)

###手法１：アラートビュー
<img width="320" alt="iOS-Simulator-Screen-shot-30-Dec-2013-09.50.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/d3a187c5-1e0e-671e-948a-9b4f44bb1ccd.png">
このように画面の上にビューを重ねることでユーザーの注目を引くことができます。

###手法２：モーダルビュー
![Modality_2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/e0485885-a6ed-9dc3-76ee-f723fea10fbc.png)

###手法３：シートビュー
![ActionSheet_Iphone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/adfaa1c5-40e4-a0e5-fa11-1da174fd6f14.png)

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

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

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

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

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

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

####ポップオーバーの上には何も表示しない。
ポップオーバーの上にはカードなどを表示することができますが、表示する前にはポップオーバーをしまってから表示するようにしましょう。
ポップオーバー
![MWGUp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/989e6ffa-7156-d405-de00-a6a18dd6af4c.png)

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

#3ナビゲーション
##階層ナビゲーション
一つの画面に選択する項目を一つしか置かない手法。初めの画面に戻るには手順を画面を一つずつ遡っていく必要がある。メールや設定などのアプリはこの手法を使っている。
![NavigationHierarchical-Graphic_2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/133ac245-479c-1f1d-748e-2c3b6d79b82a.png)

##フラットナビゲーション
全ての画面からタブバーなどを使い全ての画面にアクセスできるナビゲーション。ミュージックアプリやApp Storeなどで使われいる。
![NavigationFlat-Graphic_2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/81fa5822-ec14-0a50-fedf-5176cefe0fa6.png)

##コンテンツ主従型
基本的には使われない型だが、ゲームなどではこのようなナビゲーション型を使う場合がある。
![NavigationExperienceDriven-Graphic_2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367053/cb509129-298a-94eb-6b3c-fd8ec4eb1a51.png)

#引用元
[Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) （かなり意訳してまとめました。）