Responsive Nav：ユーザーのログインステータスを携帯電話の幅に表示する方法
レスポンシブなナビゲーションを作成していて、すっきりとしたシンプルなモバイルポートレートメニューを取得しようとしています。
同封の図では、標準のナビゲーションがあります。ビジネス要件では、ユーザーのログが記録されると、ユーザーの名を表示する必要があると規定されています。
私の質問：
モバイルビューでは、可能であれば何らかのアイコンを使用したいと思います。問題はユーザーがログインまたはログアウトしている場合、ユーザーにどのようにヒントを与えるかサイトですか？
誰かが視覚的に解決したこの事例に出くわしましたか？
ユーザー名をx文字の後に切り捨てるだけだと思います。それは認知の観点からより明白に思われます。誰もが自分の名前を認識しており、すでにステータスを示しています。
任意の入力を歓迎します。
- "プロフィール"
- "アカウント"
- "設定"
ユーザーが長い名前を入力することを心配している場合は、これらのいずれかまたは同様のもの。おそらく、それに対応するアイコンが前にあり、シルエット、ギア、またはあなたが適切だと思うものは何であれ。
それが合わない場合は、アイコンのみ、またはユーザーのアバター/ユーザーアイコンに置き換えます。それらのいずれかのアップロードを許可する場合、おそらくそれはあなたのケースに最もよく適合します。
重要なのは、「これはメニューバーの残りの項目とは異なる」ということを示すものであり、サインインする前に「サインイン」を見ていたので、後で見ることになります（read：glance ）そのスポットが再び機能するかどうかを確認します。
ログアウトしました
ユーザーアカウントまたはログインを象徴する非常に一般的な方法は、アバターアイコンです。私はこれについて特定の定量的な調査を行っていませんが、大部分のサイトとアプリは次のようなアイコンを使用していると思います：
ログインしました
ログインすると、アイコンが象徴する2つの主要なものがあります。
- 私はログインしていますが、以前にログインしたことがないときの状態（現在の状態など）とは異なります
- ログアウトの仕方を知りたい
私は長い間、自分に適したアイコンを探していましたが、 オン/オフスイッチ はうまく機能していることがわかりました。
代替案
ログイン用の開いたドアの内側を指す矢印とログアウト用のアイコンの内側から外側を指す矢印でドアアイコンを試しました。このアイコンはユーザーが理解できませんでした。
@RedSiriusからの提案も気に入っています。アバターアイコンは塗りつぶされていませんが、ログアウトのクエスチョンマークと、ユーザーがログインしている場合は塗りつぶされたアイコンが付いています。
一貫性
言うまでもなく、ログインアイコンとログアウトアイコンは両方とも同じ場所、ほとんどの場合は右上隅にある必要があります。
空のシルエットはどうですか？ログインしていないときのために中。そして、その後の塗りつぶされたシルエットはログインしましたか？
メインサイトと同じ視覚的言語を採用し、それをモバイルレスポンシブビューに変換する場合は、シンプルに保つことをお勧めします。したがって、ログアウト状態は次のようになります
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ユーザーの横にあるドロップダウンアイコンは、利用可能な追加機能があることを示し、追加の操作があることをユーザーに通知します。