web-dev-qa-db-ja.com

フラットなUIデザインのアイテムをグレー表示できますか？

フラットなUIデザインについての私の理解は、アイコンをグレー表示することではなく、ユーザーに関係のないものを「隠す」ことであり、よりクリーンで最小限のインターフェースを残します。

しかし、私たちのソフトウェア開発者の1人が、「グレー表示された」ボタンを備えたフラットなUIを設計することを望んでいます（おそらく他のことも考えられますが、まだ実現していません）。

それがフラットUIでできることなのかと思っているところです。もしそうなら、それはどのようにして可能ですか？

buttonsinterfaceuser
4
cateraf

たくさんのご回答ありがとうございます！非常に多くの異なる視点があるので、答えを投稿すると思ったのですが、どれも1つでも「正しい」とマークしたくありませんでした。

答えは次のようです：あなたはそれを行うことができますが、あなたはすべきですか？

フラットUIに非アクティブなボタンの場所があるようです（つまり、それを行うことができます）が、ボタンを非表示または非アクティブにする場合は、それぞれの状況を慎重に考慮する必要があります。考慮すべき事項：

  • ユーザーは、利用可能な次のステップを確認する必要がありますか？はいの場合は、グレー表示/非アクティブを使用します。
  • ユーザーの好みは何ですか？
  • グレー表示されたアイテムのヘルプを使用して宣伝していますか？はいの場合は、グレー表示/非アクティブを使用します。
  • ツールチップを使用していますか？ツールチップは、要素が使用できない理由を明確にするのに役立ちます。
  • あまり雑然とせずに非アクティブなアイコンを表示するのに十分な画面スペースがありますか？

これに関する優れたWebサイト（Alexej Froehlichの提案による）： http://www.uxbooth.com/articles/interaction-design/who-killed-the-inactive-button-state/

これが将来の誰かに役立つことを願っています-あなたのすべての応答に感謝します！

0
cateraf

ユーザーからボタンを非表示にしたくない場合。ある時点でボタンに関連性がない場合でも、ボタンを無効として表示すると、特定の機能が現在使用できないことがわかります。そしてグレー表示は良い方法です無効になっていることをフラットカラーの豊富なデザインで表示するには。

これを例にとります。ログイン情報を入力しています。ユーザー名とパスワードの両方のフィールドが入力されるまで、[ログイン]ボタンはグレー表示されます。ログインボタンがまったくなかった場合、ユーザーを混乱させる可能性があります。

ボタンを非表示にすると、ユーザーが検索に時間を費やすこともあります。在庫切れのアイテムのショッピングアプリでグレー表示された[購入]ボタンは、ボタンがない場合よりもはるかに優れています。また、ボタンが有効になっているときにボタンの場所を覚えておくのにも役立ちます。

3
kBisla

私の最初の懸念は、ユーザーが「グレー表示されている」ボタンにどのように反応するかということです。私の実践では、グレー表示は通常、開発者によって無効にされているものを指します。

正しく行われたフラットUIの良い例が必要な場合は、こちらのリンクをご覧ください。

Designmodo-> http://designmodo.github.io/Flat-UI/

内部では、デフォルトのボタンと無効化されたボタンはほとんど同じです。ただし、フラットUIスタイルを適切に実装すると、スキームに複数の色が組み込まれます。ただし、3つの異なる色よりも遠くにプッシュすることはしません。

1
Stephn_R

暗い色のアイコンを使用して、明るい色の背景に＃666666と言い、＃f4f4f4と言います。これにより、フォーカスが増加します。例：Googleドライブモバイルアプリ

0
Dinǝsh Gupta