web-dev-qa-db-ja.com

シェブロンか、モバイルの戻るボタンナビゲーションの矢印ですか？

モバイルデバイスの戻るボタンナビゲーションにシェブロンまたは矢印を使用する設定はありますか？これは主に意見ベースの回答を引き付ける可能性があることを理解していますが、プラットフォーム/開発者全体で予想されるUXを理解するために、コミュニティの考えを知りたいと思っています。

シェブロン：

  • よりタイトな画面のために、より少ない視覚空間を占めます。
  • より簡単にアニメーション化できます。プラスアイコンに。
  • ネイティブアプリでのAppleの推奨アイコン。

enter image description here

矢印：

  • 関数のより正確な定義。

enter image description here

gui-designmobilenavigation
2
Johnny Rockex

答えは、アプリの推奨言語を維持することだと思います。あなたが持っている最初のものはiOS用です（あなたが正しく言及しているように）。

ただし、マテリアルデザインでは、次の追加を加えた2番目のものを推奨しています。

enter image description here

あなたの例の名前は[〜＃〜] up [〜＃〜]です（それは1レベル上に移動するため）あなたのアプリ）、私が追加しているものは[〜＃〜] back [〜＃〜]、どのアプリでも、アクセスした別の画面に戻ります。

から Material Design Up and Back buttons

[上へ]ボタンを押すとユーザーがアプリ内に留まることが保証されますが、[戻る]ボタンを押すとアプリ外の最近の画面に戻ることができます。

戻るボタンも：

  • フローティングウィンドウ（ダイアログやポップアップなど）を閉じます
  • コンテキストアクションバーを閉じ、選択したアイテムからハイライトを削除します
  • 画面キーボード（IME）を非表示にします

結論

[〜＃〜] pwa [〜＃〜] をビルドするのでない限り、Androidおよび/またはiOSバージョンを作成する必要があります。そのため、単に各プラットフォームの慣習に従って、あなたは大丈夫でしょう

2
Devin

ここで外に出て、答えは次のようになると言います：それは依存します。

プラットフォームとデバイス全体で「戻る」機能のアイコンの使用に一貫性がないため、一般的にどちらかの矢印で伝えることができる最も多くは「左」であり、これは一般的な慣習により「戻る」に変換する必要があります。

トリックは、ユーザーが暗黙的にその意味を理解できるように、適切なコンテキストを見つけることです。

ここで、いくつかの例を比較して、左矢印を1分間選択します。

Left arrow examples

最初の例では、左矢印が表示されます。これは、他の2つのペインのいずれかを意味する可能性があります。そのコンテキストでは、どちらの矢印タイプでも明示することをお勧めします。

ここでモバイルテーマを続けて、機能する戻る矢印の例をいくつか考えてみましょう。

Mobile UI back arrows

ここでは両方の例でシェブロンを使用していますが、それは重要ではありませんか？ナビゲーションバーは、慣例によりアイコンに「戻る/終了する」という意味を与えます。

これをWebコンテキストに入れて、良い例と裏の例を見てみましょう。今度は、シェブロンを1回選びます。

Web back arrow comparison

ひどい配色を無視して、ここで左の矢印を調べると、「サイドバーを折りたたむ」のは「ページを戻る」のと同じくらい簡単です。オレンジ色の矢印は、「あなたが見ていた最後のものに戻る」ことをより適切に示唆するもう少しコンテキストを提供します。このタイプの戻る矢印は、コンテキストを強化する例のパンくずのようなものと組み合わせるとさらに強力になります。

3
Tristan Shelton