iOS Human Interface Guidelines Chapter 1 : Platform Characteristicsリーディングメモ
Posted on | 3月 27, 2011 | No Comments
ジェネシックスデザインセンターで開始したiOS Human Interface Guidelines読み合わせ会のメモ。翻訳ではなく超訳というか主観訳。今後修正する可能性もあります。
ということで、「iPhoneヒューマンインターフェイスガイドライン」のまとめは中止しました。悪しからず。
<<?iOS Human Interface Guidelines Introduction リーディングメモへ
Chapter 1：Platform Characteristics
→原文：iOS HIG / Chapter II : Platform Characteristics
デバイスの特徴を踏まえてデザインしましょう。
The Display Is Regardless of Its Size
ディスプレイは見るものとしてだけでなくインターフェイスとしてもUXの要。
デバイスによってサイズとか違うけど以下は気をつけよう。
タップサイズは44*44を確保。
アートワークは見やすく。
(UIではなく)コンテンツに集中できるように。
iOSデバイスのスクリーンサイズ表
| デバイス | ポートレート | ランドスケープ |
|---|---|---|
| iPhone 4 | 640 x 960ピクセル | 960 x 640ピクセル |
| iPad | 768 x 1024ピクセル | 1024 x 768ピクセル |
| その他のiPhoneやiPod touch | 320 x 480ピクセル | 480 x 320ピクセル |
ポイントとピクセル
ピクセルは画像を制作する際の単位。
ポイントはデバイス上で表示されるサイズ。例えばRetinaだと1ポイントは2ピクセル。
Device Orientation Can Change
ユーザーは色んな理由でオリエンテーションを変えるということを踏まえてデザインしましょう。
アプリがホーム画面と同じオリエンテーションで起動する事が期待される。iPadはホーム画面もオリエンテーションが変わるので注意しましょう。
Apps Respond to Gestures, Not Clicks.
ユーザーはジェスチャーを使って直感的に操作する。それを邪魔しないように標準のジェスチャーを使いましょう。
あと、画面サイズが大きくてもやたらとむやみに複数の指を使うようにはしないこと。
標準ジェスチャーの表
| ジェスチャー | アクション例 |
|---|---|
| タップ | マウスのクリックのように画面上のものを押したり選んだりする。 |
| ドラッグ | 上下左右にスクロールする。 |
| フリック | 素早く上下左右にスクロールする。 |
| スワイプ | table-viewの行で削除ボタンを出す。 |
| ダブルタップ | ズームインしてコンテンツや画像を中央に見せるようにするか、既にズームインしている場合はズームアウトする。 |
| ピンチオープン | ズームイン |
| ピンチクローズ | ズームアウト |
| タッチ アンド ホールド | 編集可能なテキストでカーソル位置の拡大表示。 |
| シェイク | アンドゥやリドゥの開始。 |
People Interact with One App at a Time
iOS4からマルチタスキングが採用され、アプリがフォアグラウンドから消えても落ちないようにできるようになった。バックグラウンドのアプリは、画面の下から出てくるmultitasking UI で見ることができる。
バックグラウンドのアプリは、必要に応じてバックグラウンドに行った時のまま（suspended）であったり、バックグラウンドでも動作し続けたりする。
Preference Are Available in Settings
「設定」アプリを操作するためには一度フォアグラウンドのアプリを閉じる必要があるので、「一度設定したらめったに変更しないタイプ」の設定を置く。ビルトインアプリは使っているけど、ほとんどのアプリはこのタイプの設定が無いので「設定」アプリに設定が無い。
Onscreen User Help is Minimal
モバイルユーザーはアプリ本来の使用目的以外に時間を割きたいとは思っていないので、大量のヘルプは読まない。さらに、ヘルプは貴重な領域を奪う。
iOSデバイスやビルトインアプリは直観的で使いやすいのでヘルプコンテンツを必要としていないし、他のアプリも同じように使いやすい筈だとユーザーは思っている。
An App Has a Single Window
#ここはまだちゃんと訳せていない。
iOSアプリはタイプに関係なくシングルウィンドウで、これはデスクトップアプリのウィンドウと同じだけど、ユーザーはその存在を認識せず、アプリをスクリーンの集合として認識している。
Two Types of Software Run in IOS
iOSで動くソフトウェアは以下。
- iOSアプリ：iOS SDKで作られるネイティブのアプリ。（AppStoreからインストールできるようなもの）
- Webコンテント：iOSデバイスを使ってユーザーが使うwebサイト。3つの種類がある。
- Web Apps：iOSアプリと同じように振舞うように作られたWebページ。
- 最適化ページ：サイズや操作性含め、iOSデバイスのディスプレイ上のSafariに最適化されたWebページ。
- 互換ページ：iOSのSafariでも問題なく表示・操作できるWebページ。
Safari on iOS Provides the Web Interface
iOSのSafariはデスクトップのSafariと似てるけど違うもの。
特に、デスクトップのようにWindowサイズを調節することでviewport(表示領域)を変えることはできない。
オリエンテーションを変えたりズームしたりして変えるだけ。
cookieは使えるけど、FlashとかJavaは使えない。HTML5のaudioやvideoタグ、CSS3はJSを使う。
iOSのSafariでのジェスチャーは主に表示されているコンテンツに対して使われる。ただし、onclickは使えるけどhoverなどは使えないといった特徴がある。
Webクリップアイコンから起動すればフルスクリーンモード(SafariのUI非表示)にできる。
→フルスクリーンにするためのmetaタグ
Comments
Leave a Reply