web-dev-qa-db-ja.com

これらのボタンのボーダーとベベルを削除すると、ボタンのように見えなくなりますか?

最初:私は貿易ではデザイナーではありませんが、時々いくつかのことをデザインしています。

1週間前に、非常に小さい(gzip圧縮/縮小された960バイトの)オープンソースCSSフレームワークの作成を開始しました。それ以来、安定して使用可能な製品に多少成熟しました。私はそれを見せびらかしていて、それをかなり誇りに思っています。

ボタンを醜いと思った私に見せた(デザインを気にしない)人。個人的には、シンプルなスタイルが好きで、見た目もいいと思います。しかし、彼はボタンのボーダーとベベルがWindows 95のように見えると考えました。

ここにボタンがあります- minfwk.com から:

An example of the buttons in question

ボーダーとベベルを削除すると、ボタンのように見えなくなりますが、見た目は良くなると彼は言います。

(私は通常フラットなデザインの支持者であり、彼は逆を主張しているので、これは興味深いです)

ボタンの見方は?彼らはボーダーとベベルなしでボタンのように十分ですか?彼らはボーダー/ベベルで「古すぎる」のですか?それらに他の問題はありますか?

10
Owen Versteeg

ベベルはボタンにある程度のアフォーダンスを与え、オブジェクトと対話できることを人々に知らせます。完全にフラットなデザインの場合、コンテキストの手がかりの外ではボタンとブロックの違いを見分けることができないという問題に遭遇します。

これは、Windows Metroがこの正確な問題を抱えていることの正当な懸念であることが証明されています。

フラットなデザイン哲学に従うAndroidでさえ、アフォーダンスに対処するためにボタンに面取りと影を付けています。
enter image description here

だから、私はあなたに強くお勧めしますボタンからすべてのアフォーダンス表示を落とさないでください。それはそれがベベルとシャドウである必要があるという意味ではありませんが、私の意見では、それらはまだアフォーダンスを示す最も微妙なオプションです。


ただし、ボタンの境界線はアフォーダンスを示すためにほとんど機能しません、そして私は小さな影を優先してそれをドロップします。

12
JohnGB

規約は、UI要素が何であるか、そしてそれをどうするかをユーザーがすばやく理解するために重要な役割を果たします。つまり、ボタンはボタンのように見える必要があり、ユーザーはそれを理解して操作する必要があります。 affordanceを理解するボタンには多くのスタイルがあります。

ボタンは、何に作用するかを示す目的を果たします。たとえば、入力するフォームがあり、次にボタンを配置する場合、ボタンを使用したアクションに応じてフォームが送信/クリアされることを確実に伝えます。

境界線とベベル(または追加の視覚的手掛かり)がないと、これらの長方形のホットスポットはボタンのように見えない可能性があると間違いなく主張する人はほとんどいません。しかし、それは他のページ要素に対するボタンの全体的な扱いに依存すると思います。 Windows8は最近非常に人気のある例です。彼らは、ボタンの平面カラーパッチを除くすべての視覚的手がかりを削除しました。しかし、確かに彼らは他のUI要素のスタイルとOSの全体的なルックアンドフィールでそれを維持しています。

私の意見では、あなたが共有したボタンのスタイルは確かにボタンのように見えます。ボーダーは薄く、ベベルは最小限です。最近のベベルはそれほど「イン」ではありません。大きくすると、古いスタイルのボタンのようになります。しかし、あなたが共有したものも結構です。そして、それを削除しても、ボタンのように維持できるはずです(追加のキューはホバーすることができます)。

ただし、その場合は細い境界線を削除しないでください。

5
Spicerjet

個人的には、あなたのベベルが一目で大きな違いを生み出すのに十分だとは思いません。下または上のベベル(または両方)を増やした場合、失うものがさらに増える可能性があります。

フラットモチーフでデザインする場合でも、ボタンの視覚的に目立つ寸法を暗示するのが好きです。ただし、ベベルの形である必要はありません。ボーダー、シャドウ、押し出し、またはわずかなグラデーション/ハイライトでも機能します。

結局のところ、コンテキストがすべてです。唯一の本当の答えはそれをテストすることです。フレームワークをテストするのに十分なトラフィックがあるサイトを見つけます。あなたの疑惑を確認するための数字のようなものは何もありません。

1
plainclothes

申し訳ありません。フラットなデザインとフラットではない古いスタイルのデザインのどちらについても、最近では、このフラットさを利用したデザインの非常にシンプルなシンプルさと明快さに非常に惹かれていることに気づくまで、意見はありませんでした。恥ずかしいことに、私はアーティストでありデザイナーです。ページがパンケーキのように平らな場合でも、ボタンがボタンであることを知って問題を抱えたことはありません。それは、あなたがこの平坦性をどのように実装するかについてであり、実装するかどうかではありません。オーウェン、あなたのすべての解決策が好きだ。本能のままに。 「本物の」ベベルを追加しないでください。最近では、「アフォーディング」よりも不快なものになります。

0
Cat