ボタンがクリック可能に見えるようにするにはどうすればよいですか？
私のデザインはよく見えますが、ボタンやその他のクリック可能な要素がクリック可能に見えないことにいつも気づきます。私に役立つヒントやリンクを提供できますか？
ボタンには アフォーダンス （ wikipedia ）がありません。
あなたの場合、私はボタンに拡散ボックスの影を付けることから始めて、それがあなたに必要なものを与えるかどうかを確認します。
ボタンがクリック可能になっていることを確認したい場合は、ボタンが背景の上に視覚的に浮いているように見せるための方法を見つける必要があります。アイデアは、それを押し下げることができるように感じる必要があるということです。
これを行ういくつかのテクニックは次のとおりです。
- ボックスシャドウ
- 光源を暗示するボタンのグラデーション効果
- 2つの境界線を暗くして高さを感じます。
- 影を落とす
いくつかの追加情報があります この回答
ボタンのように感じるためにアフォーダンスに依存しないボタンの他のスタイルがありますが、それらは通常、クリック可能なオブジェクトであるものとそうでないものに関する規則がすでに存在する設計システム内で機能します。 （例： マテリアルデザインのテキストボタン 、 フラットデザインのゴーストボタン ）
これらのタイプのボタンを単独で使用しようとしないでください。ボタンが機能するように設計されている設計システムの一部である場合にのみ機能します。
いくつかのアイデアについては、このボタンガイドをご覧ください。 https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6
また、現在の場合、角丸長方形のボタンを使用します。同じアプローチが部分的に登録ボタンに使用されています
あなたのデザインはよさそうだと思います。そして、ボタンもクリック可能に見えます。ユーザー名とパスワードの後の長方形のログインはボタンであり、ユーザーはインターネットの石器時代から進化しました。 （パン）
@Racheetが返信でうまくカバーしているように、アフォーダンスについては、ボタンに丸みを帯びた角があることで実現できる1つの改善点があります。
多くのアフォーダンスはクリック可能性を識別するために機能します。
- 微妙な形の変化（ここにはありません）
- 色/濃淡の変化（ここにあります）
- 「私を押して」を示す影（ここにはありません）
わずかな暗い境界線（ここにはありません）
上記のアフォーダンスの一部を含めようとしましたが、現在のデザインにはありません。
お役に立てれば！
残りのUIは影を使用しているようには見えないので、フラットでグレースケールを維持したい場合は、最も簡単な方法は、濃い色の境界線、わずかに丸みを帯びたコーナー、ほとんどないグラデーション、またはその他の境界線を使用することです。少なくとも2つの組み合わせ。
このようなボタンの良い例は、プリマテリアルのGmailインターフェースです。
そうは言っても、ボタンの背後に主要なアクションがある場合、それ以外の多くのフラットなユーザーインターフェイスは、ドロップシャドウを使用して重要性と階層を作成し、ボタンが他の要素の上に浮いているように見せます。
形や基本的なスキューモーフィズムについては良いコメントがたくさんありますが、形を維持したい場合は、色を変えることで多くのことを達成できると思います。グレイはおそらくその点であなたの最大の敵です。非常にきれいな外観にしようとしているように見えます。非常に明るい色を避けたい場合は、代わりに黒/非常に暗い灰色を検討してください。