web-dev-qa-db-ja.com

カードをよりクリックしやすくする

flat-ishレスポンシブWebサイトを作成しています。これにより、4つのトピックに投票できます。

flexbox 4つの異なる色のグリッドシステムで曲を表示します(ただし、何でもかまいません)。各曲はクリック可能で、カウンターに1票を追加します。(注:kahoot )のように、これらの4つのオプションは全画面に表示されます。

これが、この時点で私が作成したもののスクリーンショットです。

enter image description here

私の問題は、これらのカードがまだクリック可能に感じられないことです。デザインのコンセプトとして、クリックできることを知っています。しかし、ランダムユーザーにとって、それは明白ではない、または少なくとも十分ではないように感じます。

1
Gabsii

次のようにすると、クリックしやすくなります。

1.カーソルをポインターに合わせます。

2.ホバーにレイズ(シャドウ効果)を提供します。

OR

あなたはすでに上記を行っていると仮定します:

1.カーソルをホバーするとカーソルが変化してクリック可能になるように、パディングをキルします。または

2.画像​​をクリックして、クリック可能であることを彼がわかるようにします[非推奨]または

3.色を変更してタイトルをリンクのようにし、クリックしやすくします。

2
nitesh bhargav

人々がそれがクリック可能であることを発見するために、本質的に見た目全体をクリック可能にする必要はありません。

大きな四角形の中に、クリック可能なLOOKの小さい四角形がある場合、人々はそれを操作するとホバー/クリック効果に気付くでしょう。たとえば、on:hoverエフェクトは、より大きな領域にアタッチできます。

したがって、小さな「フルアルバム」、「もっと読む」、「今すぐ投票」などを追加しても、クリックできるように見える場合は十分です。

または、何らかの形のアニメーションを使用することもできます。 「私をクリック!」頻繁にポップアップします。少し揺れます。ズーム。輝き。相互作用できることを示すもの。

2
Dirk v B