きれいなフラットデザインのボタンをスタイリングして、アフォーダンスを示し、「よくデザインされた」ように見せる

最近、小さなCSSフレームワークを始めました。（http://mincss.com誰かが興味を持っている場合）私はすぐにいくつかのボタンの初期デザインを打ち出しました。UX StackExchangeに関するフィードバックを求めた後（そして多くの良いフィードバックを受け取った後）、それらを改善するための追加のアドバイスを得るためにここに来るよう勧められました。

これは、UXStackExchangeのフィードバックを受けて、現在の状態です。黒の境界線を削除し、3ピクセルの「影」を追加し、1ピクセルのベベルを削除しました。

フラットなデザインにしようと思っています。

残り3つの質問があります。

• これらのボタンは十分なアフォーダンスを示していますか？（これはフラットなデザインの問題のようです）
• 小さなグラデーションを追加することを提案しますか？
• 彼らはよくデザインされているように見えますか？（私が知っている主観的ですが、これを尋ねるより良い方法を考えることができません）

これらのボタンに関するフィードバックがあれば、喜んで歓迎します（おそらく使用します）。

非常に微妙なグラデーションは間違いなくボタンの美学を改善すると思います。Windows 8の「メトロ」スタイルはこのスタイルの大きな支持者なので、例としてそれを使用します。

一見すると「タイル」は平らな色のように見えますが、よく見ると、左から右に向かって非常にわずかな勾配があります。他の人よりも目立ちますが、彼ら全員が持っています。イセラが言ったように、あなたはこの勾配がほとんど目立たず、ほとんど無意識であることを望みます。

先ほど触れたように、フラットボタンをデザインするときは、いくつかのことに注意する必要があります。最初のものは、私は言うだろう：それはボタンのように見えますか？

これは必ずしもボタンだけに依存するものではなく、UIの残りの要素に依存します。フラットボタンを使用している場合は、他の場所では同様の形状やスタイルを使用しないことをお勧めします。他の要素ではなくボタンとしてこれらの要素をすぐに認識できるように、視覚的な語彙を維持する必要があります。

シャドウはボリューム感を与えるため、これに適しています。したがって、見やすくなります。さらに、私たちはその効果を持つボタンに慣れています。ただし、ボタンの色に近い色を使用することを検討します。たとえば、赤いボタンに黒を使用する代わりに、不透明度50％の赤を使用します。ボタンをより明確にするもう1つのオプションは、アイコン（白、塗りつぶし）を追加することです。

グラデーションには非常に注意が必要です。それらが悪いからではなく、現在の非常にシンプルなフラットトレンドでは、それらはうまく適合しないからです。特に、使用する色や色合いが大きく異なる場合。小さなグラデーションは非常に見栄えがよくなりますが、小さく、ほとんど目立たないようにする必要があります。

要するに、私は彼らの見方が好きです。私は影の色を明るいものに変更するだけで、おそらく前景のテキストも明るくし、おそらく白くします。フォントは素晴らしいです、あなたは良いパディングを使っているので、素晴らしい仕事です！サイトでそれらを使用しているようですが、その下にはパステルカラーの通知セットがあり、実際には少し似ています。少し混乱する可能性があるので、私はそれらのスタイルを再考します。サイト全体で同じ色（すべてパステル、またはすべてコントラスト）を使用するようにします。

私はそのような最小限のボタンを作成することを尊重できますが、フレームワークを作成しているので、異なるWebサイトのWeb全体にそれらを適用できるかどうか、またはどのように適用できるかを本当に考慮する必要があります。ボタンを提供している場合は、誰かが使用する可能性のある他のすべて（テーブル、フォームなど）を提供する必要があります（これはまだ作業中であると確信しています）。

まだの場合は、Bootstrapをご覧ください。Bootstrapは、素晴らしくシンプルでクリーンなCSSフレームワークであり、簡単に適応させたり、別のWebサイトに統合したりできるため、いくつかのアイデアが得られる可能性があります。

これらの実際のボタンに関しては、ボーダーをいじくり回します。これはコンポーネントのカプセル化に役立ち、ボーダーは多くのボタンにかなり共通しているためです。私はウェブサイトをチェックアウトし、ホバー/クリックの状態が好きで、あなたはそれらでうまくいったと思います。

グラデーションを導入したい場合は、一貫性を保ち、他の要素にもグラデーションを使用してください。そうしないと、競合する奥行きがあり、邪魔になります。

ボタンは見た目は良いですが、一般的なフラットスタイルでアフォーダンスと感触を示す種類のボタンは、シャドウパーツが配置される場所で、メイン要素（ボタン）の下部にある小さなストリップであり、ほとんどの場合、ボタンの色。