分割ボタンを備えたマルチレベルのキャンバス外ナビゲーションメニューをどのように処理するのかと思っていました。分割ボタンとは、ユーザーがテキスト(レベル1)をクリックしてレベル1にアクセスし、矢印をクリックしてレベル2にアクセスできる必要があることを意味します。私の場合、ユーザーはそのことを理解できません。矢印は、サブレベルへのアクセスを許可します。これが私がこれまでに作成したものです。矢印をクリックすると、アニメーションが表示され、サブメニューが現在のものの上にスライドします。
このパターンは最近よく目にしますが、ほとんどの場合、レベル1を「スキップ」します。つまり、モバイルユーザーはサブレベルにしかアクセスできず、分割ボタンの問題を回避できます。あなたはこの種の振る舞いを見ます diy.com
この問題は私が推測する矢です。 mobify (下)のような「下」矢印を使用することもできますが、サブメニューは左から(そしてメインアイテムの下に開かずに)表示されるため、奇妙に感じるでしょう。
この種のキャンバス外メニューのエレガントでユーザーフレンドリーなソリューションのアイデアはありますか?
基本的に、2レベルのナビゲーション階層があります。それは珍しいことではありません。
Mobifyアプローチから始めましょう。
これで、サブパネルアプローチに進みます。
左側のメニューを「メインメニュー」、右側のメニューを「サブメニュー」と呼びましょう。
これにより、スケッチの(IMO!)が次のように改善されます。
それは主観的ですが、メニューでは、選択のセマンティクスが言葉ではなく矢印であるため、アイテムに縦の仕切りを配置しません。例えば矢印ではなく「哺乳類」を選択したいので、縦の仕切りを削除すると、行全体がクリック可能な選択として認識され、矢印は、ドリルダウンが発生することを示すための単なるアフォーダンスです。
それが役に立てば幸い
おそらく最も一般的なモバイルデザインパターンの1つ、つまりドリルダウンナビゲーションを作成しようとしています。矢印をクリックすると、サブメニューが現在のメニューの上にスライドし、モックアップから、一番上のアイテムが元のメニューに戻るように見えます。つまり、アイテムをクリックすると、上位にあるアイテムのリストが表示され、上部に[戻る]ボタンが表示されます。これは標準のモバイルナビゲーションモデルであり、プラットフォーム間で[戻る]ボタンの位置のみが異なります。
各項目を2つのアクションに分割する方法もかなり標準的です。視覚的な分離を作成するだけで、矢印が別のコントロールであることが明らかになります。