web-dev-qa-db-ja.com

モバイルでワークスペースを切り替えるためのデザインパターン

ユーザー権限に応じて、ユーザーが1つ、2つ、または3つのワークスペース(「ゾーン」と呼ぶ)を持つ可能性のあるモバイルレスポンシブWebアプリに取り組んでいます。つまり、管理者は3つすべてのゾーンを取得し、通常のユーザーは1つまたは2つを取得します。 。すべてのワークスペースの優先順位が同じであるとは限りません。また、すべてのワークスペースが利用可能である場合、ユーザーは多くの場合、ワークスペースを頻繁に切り替えることはありませんが、コンテキストに応じて使用でき、適切に使用できます。

ユーザーがゾーンを切り替えられるようにするためのエレガントな方法を見つけようとしています。現在、デスクトップデバイスとモバイルデバイスの両方で、アプリのプライマリナビゲーションのハンバーガーメニューの後ろに隠れています。これは、プラットフォームの最も使用されている領域を強調できる下部ナビゲーション(モバイル)に変わることを目指しています。このタイプのワークスペース間の切り替えを可能にする優れたデザインパターンはありますか?

私が遭遇した唯一の例は、ハンバーガーメニューからワークスペースを切り替えるSlackの機能です。ワークスペースは相互に排他的であるので、これは彼らにとってうまくいくと思いますが、私たちのアプリではゾーンは相互に関連しているので、ゾーンの切り替えをあまり深く埋めたくありません。前述のように、ゾーンはコンテキストに関連していますが、特定のゾーンに入ると、ユーザーが頻繁に切り替えを行う必要はありません。

それが理にかなっていると思います!あなたの考えを聞いてみたいです。

編集:より明確にするために、ここではゾーンがどのように分解されるかの例を示します。

ゾーン1:中央ゾーンゾーン2:コミュニティゾーンゾーン3:管理ゾーン

基本ユーザーはアクセスできます:ゾーン1基本管理者はアクセスできます:ゾーン1および3プレミアムユーザーはアクセスできます:ゾーン1および2プレミアム管理者はアクセスできます:ゾーン1、2、および3

これらのゾーンにはそれぞれ独自のメニューがあり、5〜10のトップレベルのメニュー項目があり、深さは2レベル以下です。課題は、ユーザーがどのゾーンを使用しているかをエレガントに表示する(および表示しない)方法を考案し、それらを切り替えることができるようにすることです。

6
sabziwalla

切り替えが定期的に発生する場合は、タブを使用することをお勧めします。使用できないタブは、灰色で表示されるか欠落しています(特定の「ゾーン」へのアクセス権がないことをユーザーに知らせたいかどうかによって異なります)。

enter image description here

1
Davbog

ユーザーがスクロールしても常に下部にスタックしているナビゲーションを使用できます。 enter image description here

1
Sahil