「良い」アプリヘッダー/フッターアイコンの理由
以下に示すヘッダーバーを検討してください
私の目には、最初の3つのアイコンが「よく見える」ように見えます。他の3つは何か不足しているように見えます。私は実際にはデザイナーではないので、多くの試行錯誤を繰り返すことになります。ただし、小型のハンドヘルドデバイスで表示したときに「見栄えが悪い」という運命にあるアイコンを除外するために使用できる一般的な原則があると確信しています。ここでたむろするUXの人々が、目的のための基準のリストを作成するのを手伝ってくれるだろうかと私は思っています。私は自分の心に曖昧な基準のセットを持っています
- 「太すぎ」、「近すぎ」の線：上記のアイコン4
- アイコン「明確ではない」：アイコン4が再び
- 「細すぎる」線：上記のアイコン5
- 詳細が多すぎる：上記のアイコン6
- ...
しかし、これは選択/設計ガイドとして使用できる適用可能なフィルタリングルールのセットとはほど遠いものです。
ここで使用した画像は、単に説明のためのものであることを説明します。実際のアプリで実際に使用している、または使用を計画しているものを表すものではありません。
私は少し夢中になっているようです...しかし、これは良いアイコンを作るための私のヒントのいくつかです。
- アイコンには、アイコンのサイズに合った適切な詳細レベルが必要です。これは、詳細レベルが異なるさまざまなサイズのアイコンをデザインすることを意味しますが、16px、32px、または256pxは非常に異なります。
- アイコンは目的に合わせて設計する必要があります。そこには無料のアイコンがたくさんありますが、ブランド、会社、製品に合うように何かを設計するのではなく、同じ古いアイコンが再利用されるのを見るのはうんざりします。 、 アクション。
- アイコンはその隣で動作するはずです。アイコンを単独で設計することはできません。アイコンのスイートには、言語、つまり、アイコンごとに異なるデザインの手がかりをデコードする必要なしに、目をあるものから別のものに流すことができる接続が必要です。近くのコンテンツ、隣接するアイコン、またはアイコンのグループからそれらを分離するアイコンの周りの適切な空白は不可欠です。
- アイコンは適切なメタファーを使用する必要があります。アイコンは、コンテキストに関連するオブジェクトを組み込む必要があり、関連する場合、言語は一貫した方法で動詞の名詞とアクションの視覚的な手がかりを組み込んで再利用する必要があります。これはアイコンの一部です。言語。ログファイルのログ（ツリー）の画像とフロントガラスワイパーの画像を含む製品を使用して、ビューを更新しました。
- アイコンは最短時間で理解できる必要があります。前のアイテムに関連します。ユーザーがアイコンの表示内容と意味を理解するために最短でも気を取られている場合。 、それはユーザーを苛立たせます。そして、これが頻繁に発生する場合、それは大きな転換となります。
- アイコンはその周囲のコンテキストに合わせる必要があります。ビジーなアイコンはミニマリストのWebサイトには適していません。赤いアイコンのスイートは、造園のウェブサイトには適していません。
- アイコンのセットは一貫して表示されます。線の太さ、境界線の半径、照明、遠近法、影、共通の要素と形状はすべてアイコン間で一貫している必要があります。
- アイコンはシンプルでなければなりません。しかし、必要以上にシンプルではありません。フォトリアリスティックなアイコンは間違いなくその場所がありますが、一般的に画像が乱雑になると、ユーザーにとってより多くのデコードが必要になり、形状を認識しようとするときに気が散り、関連する意味を思い出すのに時間がかかります。アイコンは画像ではありません。
- アイコンは完全なピクセルである必要があります。ピクセルで整列された形状と線により、アイコンがより鮮明になり、アイコンが認識しやすくなります。特に、完全な視力を持っていない可能性のある人にとってはそうです。グリッドでの作業-ベクトルのアイコンを使用する場合でも不可欠です。アイコンは単純な形状を使用する必要があります。単純な幾何学的形状は、ユーザーがより簡単に認識およびデコードでき、ピクセル配置がより簡単です。 90度や45度のような通常の角度は、アイコンがギザギザに見えるようにするエイリアシングの量を減らすのに役立ちます。
- アイコンはおなじみのはずです。多くの人は、アプリケーション間で広く使用されているアイコンの要素を認識します。同じアイコンを使用する必要があるという意味ではありませんが、ショッピングカートまたはバスケットはeコマースサイトではかなり標準的であり、期待されています。したがって、人々が特定のシンボルを探しているのであれば、なぜそれから逸脱するのでしょう。
- アイコンは見た目が美しく親しみやすくする必要があります。曲線は、鋭い角やとがった角よりも親しみやすく見えます。スプラインに基づく曲線は、手描きの形状やピクセルで描かれたアイコンではなく、アウトラインの流れを容易にします。ベクトルアイコンもより簡単に拡大縮小できます。
- アイコンは適切な線の太さを使用する必要があります。たとえば、16ピクセルのアイコンには1ピクセル、32ピクセルのアイコンには2ピクセルが適切です。線の太さをスケーリングせずにアイコンをスケーリングすると、アイコンが細くなりすぎたり、太りすぎたりします。異なるサイズのアイコンには、線の太さのスイートスポットがあります。
- アイコンはさまざまな背景で機能する必要があります。白か黒か、灰色か青かに関係なく、アイコンが使用されるさまざまな場所を知る必要があります。特に、オペレーティングシステムが選択する場所に表示される可能性のあるアプリケーションアイコンの場合。アプリストア、モバイル画面、デスクトップ、タスクバー。
- アイコンはアクセシビリティガイドラインを満たしている必要があります。代替テキスト。アイコンとラベル。適切なコントラスト比。適切なサイズ。何らかの方法で障害のある人口の18％（または一時的に障害のある33％）がアイコンをどのように使用できるかを検討してください。満たすべき設計基準がある場合があります。
- アイコンに単語を含めないでください。ハンバーガーメニューアイコンの下のMENUなど、関連付けられたラベルに単語を残します。手紙は機能しますが、必要に応じて。
- アイコンは原色を使用するべきではありません。はいアイコンを目立たせる必要がありますが、叫ぶ必要はありません。活気があるということは、大声を意味する必要はありません。
- アイコンはまだworkモノクロで動作する必要があります。モノクロとして動作する場合、無効で動作し、印刷時に動作しますアウト。
- アイコンはこういうのが得意な人がデザインする必要があります。アイコンが開発者によって構成されています。独自の機能のアイコンを作成する各開発者。たぶん、それらは「誰かが適切にやるまでのプレースホルダー」かもしれませんが、多くの場合それは起こりません。私はグラフィック/ビジュアルデザインのスキルを持つUXデザイナーかもしれませんが、以前は開発者でした。サイロからのアイコンは悪いので、単一の製品のアイコンが同じ人物によって設計されていることを確認することは理想的です。
- アイコンは多くの反復の結果であるはずです。一度に描画される素晴らしいアイコンはほとんどありません。それらは、スケッチ、インスピレーション、リスタート、批評のブレンド、そして次のアイテムの結果です...
最終的に：
- アイコンをテストする必要があります。アプリケーションの他の部分と同じです。
- 実際のユーザー（これまでに見たことがないユーザー）
- 異なるコンテキストで
- 異なるサイズで
- デスクトップとモバイル
- 異なる解像度で
- 異なる背景に対して
- 異なるWindowsテーマ（黒/白のアクセシビリティテーマ）
- 印刷したとき
- 画面共有
- プロジェクター
- ...
アイコンのセットを見て、上記の一部またはすべてが考慮されているか、まったく考慮されていないかを確認します。答えがすべて「はい」の場合、それらはおそらくかなり良いアイコンです。よさそうだ。どこにでも。一緒。
- 一連のアイテムではなく、すべてのアイテムを確実なアイテムにしてください。番号4は、近くに別の小さなものがあるように見えます。 6番は浮上時計とその下の針のように見えます。ユーザーは、6つのセットのサブセットではなく、6つの中から1つを選択する必要があります。
- ツールボックスのすべてのアイテムは異なりますが、同等に生まれます。サイズと線の太さをできるだけ同じにしてください。番号5は明らかに異なって見えます。一貫してあなたのスタイルを保ちます。
- 5番はフォトカメラまたはInstagramを意味すると思いますか？申し訳ありませんが、カメラのようには見えません。多分より多くの円レンズが役立ちますか？
- 番号6は時間または手を意味しますか？時間をお過ごしですか？時計を渡す？落ちた時計をキャッチ？おそらく、「ファイルまたはフォルダをネットワークで共有する」というWindowsのメタファーです。私たちの時代のスマートフォンOSには、共有という意味で、共有という独自のメタファーがあります。若いユーザーはWindows 98のバックグラウンドを持っていない可能性があるため、ユーザーはそれを取得しません。 6番を再考する必要があると思います。
失礼になって申し訳ありません。
まあ、それが「イタリック」であるのを見るのは奇妙だと思います。シンプルだが効果的なものにこだわる。多分、マテリアルデザインガイドのアイコンセットをダウンロードすると、特定の分野以外のものに注意を向けることができます...