web-dev-qa-db-ja.com

ナイト/デイモード切り替え

ユーザーが切り替え可能な「デイ」モードと「ナイト」モードを備えたウェブサイトに取り組んでいます。デイモードは暗いテキストで明るい背景になり、ナイトモードは明るいテキストで暗い背景になります。

現在のアイデアは、これを太陽と月のアイコンで制御することです。ユーザーがアイコンをクリックすると、他のモードに切り替わります。

日中モードの場合、どのアイコンが表示されますか?現在アクティブなモード(太陽)またはユーザーがクリックした場合に切り替えるモード(月)?

関連する回答はありますが、それらはオーディオプレーヤーのコントロールをより多く扱います。私はそこでアドバイスに従いますが、この種のトグルがそれらの投稿で与えられたアドバイスの逆を処理するのを見ました。ここに1つあります: http://blog.mengto.com

3
Matthew Moore

トグルボタンに現在の状態または変更後の状態を表示する必要がありますか? の回答に記載されているように、一般に、このようなボタンは使用しないでください。

可能であれば、可能な状態と現在選択されている状態の両方が表示されるトグルを使用してください。

それが選択肢ではない場合、現在の状態が明白であるため、あなたが提案することはうまくいくと思います。GUIは暗いか明るいです。同じ理由で、オン/オフスイッチは、その状態が明らかであるため、多くの場合、明確な状態である必要はありません(たとえば、懐中電灯を取り上げます)。

ボタンはアクション用です。ボタンを実行するアクションの観点からボタンを定義し、可能であれば、「月-暗くする」、「太陽-明くする」のテキストでこれをサポートしてください。

4
Koen Lageveen

これを処理する最も簡単で明確な方法はトグルスイッチを使用することであり、トグルスイッチの標準は現在の状態を表示です。

あなたが示した例は、トグルスイッチを使用するのではなく、一種の「アフォーダンスの低いボタン」を使用しています。それが行動なのか状態なのかは明らかではなく、UXも貧弱です。

私はあなたが昼/夜にこのようなものを使うことを勧めます:

enter image description here

インスピレーションを得るためのトグルスイッチの良い例があります。

enter image description here

8
JohnGB

これは、インターフェースがモードから別のモードに切り替えるのにかかる時間とトグルボタンへのアクセスに依存します。

  • インターフェースがreactiveで、ボタンが常に表示されている場合は、アイコン(夜間モードの場合は日、日モードの場合は月)とホバー時のツールチップのみを使用できます。 ヒューズのテストのようになります。アイコンを使用する必要はありません。テキストを表示できます:put the lights on!/turn off the light !または、視聴者と使用頻度に適したもの。

  • インターフェースがslowまたは/およびボタンがメニューまたはパラメーター内にある場合は、より明確にする必要があります:Switch to Night modeまたはSwitch to Day mode何が起こった場合にユーザーがいらいらするので予期しない。

  • それは本当に遅い説明ページ/ポップアップにつながるWhat is Night mode?リンクを追加します。まったく同じ理由で。

0
Gildas Frémont