2. Navigation
People tend to be unaware of an
app’s navigation until it doesn’t
meet their expectations.
Your job is to implement navigation
in a way that supports the structure
and purpose of your app without
calling attention to itself.
ナビゲーション(画面遷移)
ユーザーの予想に沿ったものでないかぎり、
ユーザーはアプリで表示されるナビゲーション
にはあまり気づきません。
デザイナーとしてやるべきことは、ユーザーが
操作中にナビゲーションに気をとられることな
く、アプリの目的を達成できるようにナビゲー
ションを実装することです。
NAVIGATION 全訳 1/13
3. NAVIGATION 全訳 2/13
Navigation should feel natural and
familiar, and shouldn’t dominate the
interface or draw focus away from
content.
In iOS, there are three main styles of
navigation.
ナビゲーションは自然で親しみやすいものにす
べきであり、インターフェースを覆いつくした
り、コンテンツから目線を遠ざけるものであっ
てはいけません。
iOSでは、ナビゲーションのスタイルは3つあり
ます。
6. NAVIGATION 全訳 3/13
Hierarchical Navigation
Make one choice per screen until
you reach a destination.
To go to another destination, you
must retrace your steps or start over
from the beginning and make
different choices.
Settings and Mail use this navigation
style.
【階層型ナビゲーション】
ユーザーがたどり着きたいぺ―ジを見るまでに階
層を潜ることでタスクを進行させます。
そこから違うページに行くためには、ユーザー
はたどってきた導線を元に戻るか、最初のトッ
プページからやり直して違うページへ移動して
いく必要があります。
「設定」と「メール」アプリは、階層型ナビ
ゲーションを使っています。
8. NAVIGATION 全訳 4/13
Flat Navigation
Switch between multiple content
categories. Music and App Store use
this navigation style.
【水平型ナビゲーション】
複数のコンテンツカテゴリを切り替えるスタイ
ルです。「Music」や「App Store」はこのナ
ビゲーションスタイルを使っています。
10. NAVIGATION 全訳 6/13
Content-Driven or Experience-
Driven Navigation
Move freely through content, or the
content itself defines the navigation.
Games, books, and other immersive
apps generally use this navigation
style.
Some apps combine multiple
navigation styles. For example, an
app that uses flat navigation may
implement hierarchical navigation
within each category.
【コンテンツドリブン・エクスペリエンスドリ
ブンのナビゲーション】
コンテンツごとの移動が自由にできたり、コン
テンツそれ自体がナビゲーションを決定します。
「Games」や「Books」やその他の没入感のあ
るアプリは一般的にこのナビゲーションスタイ
ルを使っています。
----------------------------------
まとめ
アプリによっては、複数のナビゲーションスタ
イルを組み合わせて取り入れています。例えば、
水平型ナビゲーションを採用しているアプリが
それぞれのカテゴリ内では階層型ナビゲーショ
ンを取り入れている場合があります。
12. NAVIGATION 全訳 7/13
Always provide a clear path.
People should always know where they are
in your app and how to get to their next
destination. Regardless of navigation style,
it’s essential that the path through content is
logical, predictable, and easy to follow.
In general, give people one path to each
screen. If they need to see a screen in
multiple contexts, consider using an action
sheet, alert, popover, or modal view. To
learn more, see Action Sheets, Alerts,
Popovers, and Modality.
【画面遷移の導線を常に明確にしよう】
アプリ内でどこにいるのかを常にユーザーに対して知らせ
る必要があります。どの型のナビゲーションを実装するか
にかかわらず、画面遷移の導線(以下、パス)をユーザー
が論理的に予想しやすく、かつ、従いやすいものにするこ
とが重要です。
一般的には、画面ごとにひとつのパスを用意しましょう。
1つの階層で複数画面を見る必要がある場合には、アク
ションシートやアラート、ポップオーバー、モーダル
ビューを使うことを考えましょう。(用語はよくわからな
いと思うので、)より詳細なことは、別項目で解説してい
るアクションシート、アラート、ポップオーバー、モダリ
ティをご覧ください。
13. NAVIGATION 全訳 8/13
Design an information structure that makes
it fast and easy to get to content.
Organize your information structure in a
way that requires a minimum number of
taps, swipes, and screens.
Use touch gestures to create fluidity.
Make it easy to move through your interface
with minimum friction. For example, you
could let people swipe from the side of the
screen to return to the previous screen.
【コンテンツにより速く簡単にたどり着けるようにサイト
構造をデザインしましょう】
サイト構造を考えるときには、最小限のタップ、スワイプ、
スクロールでユーザーが情報にたどり着けるように設計し
ましょう。
【タッチジェスチャを使用してスムーズさを生み出しま
しょう】
最小限のアクションでインターフェースを操作できるよう
にしましょう。たとえば、画面横からスワイプするだけで
前の画面に戻れるようにします。
15. NAVIGATION 全訳 9/13
Use standard navigation components.
Whenever possible, use standard navigation
controls such as page controls, tab bars,
segmented controls, table views, collection
views, and split views. Users are already
familiar with these controls, and will
intuitively know how to get around your app.
【iOSのデフォルトコンポーネントを使いましょう】
できるかぎり、iOSコンポーネントを使いましょう。
ページコントロール、タブバー、セグメント化コントロー
ル、テーブルビュー、コレクションビュー、分割ビューな
ど。(※用語解説はそれぞれの項目を見てください。
ユーザーはこれらのパーツは使い慣れており、直感的に扱
えます。
17. NAVIGATION 全訳 10/13
Use a navigation bar to traverse a hierarchy
of data.
The navigation bar’s title can show the
current position in the hierarchy, and the back
button makes it easy to return to the previous
location. For specific guidance, see
Navigation Bars.
【ナビゲーションバーを使って階層を表します】
ナビゲーションバーのタイトルは階層内でどの位置にいる
かを表示でき、戻るボタンを使用すると前の画面に戻るこ
とができます。詳細はこちら(ナビゲーションバー)
19. NAVIGATION 全訳 11/13
Use a tab bar to present peer categories of
content or functionality.
A tab bar lets people quickly and easily
switch between categories, regardless of the
current location. For specific guidance, see
Tab Bars.
【タブバーを使用してカテゴリを表示するようにしましょ
う】
タブバーを使用することで、現在の階層に関係なく、すば
やく簡単にカテゴリを切り替えることができます。詳細は
タブバーの解説ページへ。
20. NAVIGATION 全訳 12/13
Use a page control when you have multiple
pages of the same type of content.
A page control clearly communicates the
number of pages available and which one is
currently active. The Weather app uses a
page control to show location-specific
weather pages. For specific guidance, see
Page Controls.
【複数ページを1つの階層で見せたいときは、ページコント
ロールを使いましょう】
ページコントロールはページ数と現在表示されているペー
ジを明確に伝えます。
「天気アプリ」ではページコントロールを使用して、場所
ごとに天気ページを表示してますよね。詳しくはこちら
(ページコントロール)
※一番右がページコントロールです。
21. NAVIGATION 全訳 13/13
TIP
Segmented controls and toolbars don’t
enable navigation. Use a segmented control
to organize information into different
categories. Use a toolbar to provide controls
for interacting with the current context. For
additional information on these types of
elements, see Segmented Controls and
Toolbars.
【tips】
セグメント化コントロールとツールバーは画面遷移を有効
にしません。
セグメント化コントロールは、情報をさまざまなカテゴリ
に整理するときに使いましょう。
ツールバーは、現在表示しているページ環境に対応してコ
ントロールするときに使いましょう。
追加情報などは別項目(セグメント化コントロール、ツー
ルバー)。
※セグメント化コントロール(「関連性が高いものの、お互い
に排他的な選択肢をもつビュー」を切り替える役目がありま
す。)