フラットなデザインのボタンをクリックできることを理解させる
私は基本的にオンラインの履歴書であるフラットishレスポンシブWebサイトを作成しています。
グリッドシステムでスキルを表示しています（ただし、何でもかまいません）。各スキルはクリック可能であり、スキルに関する情報（レベルなど）を表示します。
これは、この時点で作成したものの（モバイルデバイスビューからの）スクリーンショットです。 
デザインのコンセプトとして、クリックできることを知っています。しかし、ランダムユーザーにとって、それは明白ではない、または少なくとも十分ではないように感じます。
コンピューターのブラウザーでは、ホバーしたときに視覚的に変化するのは簡単ですが、タブレット/モバイルでは、その方法を理解できません。
基本的にねえ、私をクリックして言う視覚的なトリックはありますか？各タイルの隅に小さなポインタを追加できると思いますが、見栄えがよくなるかどうかはわかりません。
[〜＃〜]更新[〜＃〜]
いくつかの提案によると、アイコンをより関連性の高いものに変更しました。したがって、ラベルを削除できます。
また、ボタンの背景色を少し明るくして、2つの青の濃淡の間のコントラストを際立たせています。
ボタンの問題は、ボタンが背景の上に浮き上がらないため、クリックできないように見えることです。
フラットボタンと隆起ボタンのどちらを選択するかについての詳細については、マテリアルデザインを強くお勧めします。 http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons
問題はそれが十分に平らでないことです
それらはアイコンまたはボタンですか？これはフラットデザインの一般的な問題です（他の回答を参照）が、ここでまだ見たことのない解決策の1つは、唯一の実行可能なオプションがクリックされるまで情報をremoveすることです。考えてみてください タイル 。
...そしてこの時点で、</>は、適切なアイコンではありませんでした。
私は最初のスキルを示すようなものを考え、ユーザーにそれを自分で理解させ、他のユーザーもクリック/タップできるようにしました
（申し訳ありませんが、これを行う時間はあまりありませんが、役立つかもしれません）
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ユーザーが最も慣れていると思われる視覚的な手がかりを使用するのはどうですか。以下は、実線の下線と破線の例です。
モバイルデバイスでは、現在のデザイントレンドはこれを使用しています。ユーザーは、明示的に指示する必要なしに、詳細情報にドリルダウンするタッチ方式に慣れてきました。
また、指以外の入力デバイスがないため、モバイルデバイスの「ポインター」は冗長です。
デザインのシンプルさと優雅さを保ちます。唯一の提案は、おそらく2つの青の色合いのコントラストを上げることです。
材料設計は良いですが、完全に平らではありません。私はこれをお勧めします、私の理想的なフラットボタン 
p/s：何かをボタンと見なしたい場合は、「ラベル」と「アイコン」を提供する必要があります。これらの2つの要素を使用すると、ほとんどのユーザーは「ああ、ボタンがある、クリックしましょう」と知っています。
いくつかの提案：
1.ラベルをボタンの視覚的な部分にする
- ラベルは通常ボタンの一部です
2.明るい枠線を追加します（オプション）
- 奥行きを必ずしも追加しないハイライト
3.ボタンを快適にグループ化
- 同等に重要なボタンのグループのように感じさせます
4.ボールダーフォントの太さを使用
- アイコンはかなり分厚いものであり、imoは軽い書体に対してバランスが取れていません
押されていない/押されたボタンの例：
LongとDesignerAnalystの両方に同意します。少しスタイリングすると、ボタンとしてよりポップになります。
編集したバージョンのアイコンは気に入っていますが、アイコンの意味がわからない場合は、アイコンの下にテキストを追加することをお勧めします。
アイコンは、その意味が明らかな場合に最適ですが、私は毎日JQueryとJavascriptでプログラミングしており、アイコンを自動的に認識しませんでした。
テキストによる手掛かりを与えることもできます
「詳細情報」をより具体的なものに変更できます
答えはたくさんありますが、フラットなデザインの核心にはまだ達していないと思います。ボタンのように見せる方法ではなく、フラットなデザインの問題。全体のアイデアは、3Dボタンのメタファーが古臭くなっているということです。今生まれている子供はたくさんいると思います。実際の有形のボタンを押す前にタッチスクリーンの仮想ボタンを押す子供たちがいます。
比喩は視覚的に騒々しいです。フラットデザインの課題は、デザインを使用可能な状態に保ちながら、メタファーを取り除くことです。
したがって、適切でモダンなフラットデザインエクスペリエンスを作成する場合は、クリッカブルをボタンのように見せることなく、クリッカブルに見えるようにする必要があります。主なルール/慣習では、クリック可能な要素には最も注意を払う必要があります。これを実現するための次のツールがあります。
- コントラストを使用ボタンの色よりもボタンの白とのコントラストが大きくなりました。これが、デザインがクリックできないように見える主な理由です。背景とボタンの色を切り替えます。
- 明るい原色を使用してください：上記を参照してください。
- スペースを使用する：ボタンアイコンの周囲に十分なスペースを確保してください。マージンが大きいほど、要素が注目を集めます。特にこれらのマージンが明るい色で塗りつぶされている場合、それはその内側の要素とよく対照的です。
- 太字のテキストを使用する：暗い背景の白いテキストはとにかく太字にする必要がありますが、ボタンでは二重になります。
- テキストをボタン内に配置します：色付きのボックスは、そのクリックオプションで行うすべての操作をカプセル化する必要があります。その下にテキストを置き、ボタンにテキストをマップするようユーザーに要求します。
- ラウンダコーナー：一部のフラットデザインの純粋主義者（BBC、Microsoft）は、ハードコーナーに行きますが、完全に行きたくない場合は、丸みを帯びた角はクリック可能性のための非常に強力な規則です。
これが私の再設計です：
あなたはそれがまだクリック可能に見えないことに注意するかもしれません。何故なの？ 6つのボタンは、スキルのリストを表現するためのあまり一般的な方法ではないからだと思います。この時点では、ユーザーは明確な場所がないだけです。実際、6つのボタンを隣り合わせに配置することは非常にまれです。通常、このタイプのボタンを作成する場合、それはページで最も重要な要素です。そのため、デザインはアイコンのリストのように見えます。
本当に問題の核心をつかむために、あなたはあなたの全体的なデザインを見直すことを検討するかもしれません。この時点でユーザーが何をしたいのかを理解します。おそらく コンテンツベースのナビゲーション のようなものがあなたを助けることができます。
マテリアルデザインのコンセプトが役立つでしょう。
オブジェクトを区別し、アフォーダンスを追加するのに役立つものの上に何があるかをユーザーに示すためにレイアウト間に影を付けることが優先動作によるレイアウトの原則
http://www.google.com/design/spec/material-design/introduction.html
したがって、ボタンのアクションに小さな影を追加することは、プレスアクションの影を非表示にすることでインタラクティブになります。コンピューターが表示されている場合はロールオーバー応答を追加し、ユーザーをさらに支援します。
シンプルでスマートに
K.E.S.S.
あなたは、開発者として、準備を整えます。しかし、ユーザーは本当のパフォーマーです。 2つの異なるスキルセット。それらは互いに補完し合い、調和します。
アプリには一連の期待があります〜>オンラインレジュームが暗黙的にこの種の相互作用を要求するように。クリックなど。あなたのユーザーはあなたが何をしたいのかを典型的に理解するでしょう。
これがあなたの質問に対する私の追加のフィードバックです：
- ボタンのアイコンには明確なラベルを付けてください。
- ホバーされたボタンを大きくします。これにより、ユーザーが直感的に導き出した内容が検証されます。
幸運を！
（これらのアイコンのサイズに応じて）私が見た1つのオプションは、各画像アイコン内のマウスの小さな画像（基本的には、2つのボタンの上部に分割がある垂直に伸びた楕円形）です。
最初の画像はギャラリーのように見えます。各アイコンにはラベルがあります（画像がクリック可能かどうかは明確ではありません）
あなたは単にボタン内のラベルを移動するを試すことができます（最初のアイコンのセットを使用しても、それで十分です）。これにより、ボタンのように感じるはずです。
読み直したところ、@ Dom命題に属しているようです