web-dev-qa-db-ja.com

ボタンのスタイルを設定する必要がありますか?

Facebook、Twitter、StackExchangeなどのボタンのスタイル設定には、Craigslistや4chanのようにスタイル設定しない場合と比べて、大きな利点/欠点がありますか?

10
Mark Boulder

スタイライズボタン

利点:

  • ボタンはデザインの他の部分とより整合性があります(UIにスタイルがある場合)
  • 全体的なルックアンドフィールが改善されました(ボタンが愚かに見えない場合)。
  • ボタンはより多くの意味を持つことができます(異なるコンテキストを表現します)
  • 主要なウェブサイトのほとんどがボタンを使用しているため、ユーザーはスタイル付きボタンに非常に慣れています:google、facebookなど。だから、ジャーリング体験ではありません
  • ブランドの一貫性と認識
  • あなたはプロのように見えます。

短所:

  • 完全なボタンuiを作成するためのあなたの側のより多くの努力、スタイルなしのバージョンは箱から出して完全です。 (モバイル互換性など)
  • あなたが下手なデザイナーなら、あなたのボタンは期待したほど認識されないかもしれません。
  • スタイル付きボタンは、コードとグラフィックスにオーバーヘッドがあります。
  • スタイル設定されたボタンがそのユーザーのOSと一致していません。穴居人には不快な可能性があります。

労力を超えて、デザインの知覚は、ボタンをスタイリングするという本当のUXの動機を意味します。

スタイルのないボタンはすべて同じように見えます。ボタンのスタイルを設定することで、ユーザーにそのボタンの詳細とその機能を提供できます。

たとえば、Twitterブートストラップの一部として提供されるボタンを考えてみます。 http://Twitter.github.com/bootstrap/base-css.html#buttons

ボタンの色を使用して、次のようなことを示すことをお勧めします。

  • 灰色:標準アクション
  • 青:重みまたは重要性のあるアクション
  • 緑:成功または積極的な行動
  • 黄:注意して行うべきアクション
  • 赤:危険または潜在的に否定的な行動

ボタンのスタイル設定を検討する際の注意事項:

  • サイズ
  • 形状
  • アイコン、テキスト、または両方?
  • テキストは1行ですか、それとも2行ですか?異なるサイズのテキスト行?

すべての側面は慎重に行い、ユーザーに価値を提供する必要があります。

8
Fresheyeball

カスタマイズされたボタンの問題は、キーのスタイルやメタファーを壊した場合に認識されないリスクがあることです。特に、長方形ではなく、ホバー状態を提供しないボタンは、非インタラクティブとして認識される可能性があります。

それ以外の場合、カスタムボタンは、インターフェイスに強力なブランディングと洗練された感覚を与えるための良い方法です。周囲と調和しないスタイルのない(またはOSスタイルの)ボタンは、UIが未完成またはだらしないように見える可能性があります。これは、製品の購入または何らかの形でお金を与えるように人々に要求している場合に悪い印象を与えます。

6

ボタンはボタンのように見える必要がありますが、それ以上に重要なことは、ボタン(および実際にはすべての要素)のスタイルがページ/サイト全体のスタイルに適合することです。これはビジュアルデザインまたはグラフィックデザインの分野であり、色理論、タイポグラフィ、コントラストの原則、繰り返しなどが含まれます。

Craigslist.orgは非常に実用的で飾り気がない。誰かまたはグループがサイトに適したデザインスタイルである、より精巧でカラフルで気まぐれなまたは定型化されたデザインはサイトに適さない、またはそのような視覚的な精緻化に必要なリソースがより適切に費やされたと判断した他の場所。

これをApple.comと比較してください。Apple.comでは、モダンで最小限の、高度に洗練された、文体的でありながらフレンドリーで使いやすいエクスペリエンスを提供することが非常に重要です。

これらのビジュアル言語は、テキストコンテンツが消費される直前にサイトに到達するため、サイトのコンテンツと同じくらい重要な点があります。

したがって、ボタンのスタイルは、ページ/サイトのスタイルによって決定されます。これは、まとまりがあり、よく考えられ、サイトの目的に沿っている必要があります。

5
obelia

スタイルのないボタンなどはありません。デフォルトのブラウザボタンスタイルを使用できますが、ユーザーはほとんどの時間を他の(読み取り:競合他社)サイトに費やします。使用するスタイル設定は、ユーザーを引き付けて維持するための重要な要素です。良い例がたくさんあります。

3
Peter

スタイルなしとは、ブラウザが使用するデフォルトのボタンを意味します。

スタイルのないボタンは、ほとんどのユーザーが使い慣れているため、一般的に簡単に認識できます。ただし、それは非常に専門的ではないように見え、あなたのサイトは未完成のままになっています。

一方、スタイル付きボタンは、使用される場所のブランディングに従う可能性が最も高いでしょう。その結果、状況によっては、これは不十分に、または大成功を収めることができます。

私は個人的にGoogleのボタンUIのファンです。マットな色で非常にきれいに見えますが、わずかなグラデーションのホバー状態があります。それは彼らのブランドに完全に従いますが、それでもボタンとしての認識を維持します。

2
Chris N.

それはデザイナーのスキルと想像力にかかっています。フォームが入力されると、ページの残りの部分に独特の外観と操作性を備えた適切に設計されたボタンが見つけやすくなります。たとえば、ログインページでGoogleの[ログイン]ボタンを確認すると、設計の悪いボタンが表示されます。たとえば、このページの下部にある、このサイトの「Post Your Answer」ボタンを参照してください。テーマを1つだけにしてみてください。同じページに異なるスタイルのボタンが必要な場合は、少しデザインを変更する必要があります(ここでも、このページの下部にある「Post Your Answer」と「質問してください」)。

0
ripu1581