マインドマップギャラリー デザイナー必読のアイコンデザインガイド
超便利なもの!デザイナー必読のアイコンデザインガイド。このマップには、アイコンデザインにおける重要な概念とデザインアイデアが詳細にリストされており、理解を助けるために画像の説明が補足されています。じっくり読み、深く考え、アイコンのデザインに反映することで、限られたサイズのインターフェースで、ユーザーに正しい情報とわかりやすいガイダンスを簡単かつ効率的に届けることができます。
2021-01-04 11:58:08 に編集されました人件費の管理は、企業が経済的利益を最大化するための重要な手段です。企業は、課題に対処するために中核となる競争力を継続的に向上させる必要があります。
これは教育技術のガイドではなく、教育の雰囲気を見つける旅です。読者の皆さん、この本では、それぞれの教育的な物語を通して、本当の教育者がどうあるべきかがわかります。繊細で機知に富み、子供たちにとって何が適切で何が不適切かを知っていて、何を言うべきか、何を言ってはいけないのか、注意を払うのかを知っています。子どもの個性を尊重し、子どもの個々の生活世界に注意を払い、子どもの話を「見る」「聞く」方法を知ってください。真の教育者だけが子どもの心を理解し、似非教育の調子を整え、教育と成長をより美しく充実したものにすることができるのです。
この本では、著者は、ほとんどの人が知識とスキルを学ぶのに適した一連の学習方法を詳細にまとめています。著者の意見では、あらゆる学習は、正確なインプット、深い消化、そして複数のアウトプットという 3 つの段階に分けられると考えています。 1 つ目は知識のインプットです。これは、最初に新しい知識を取り入れ、次に知識を消化し、インプットされた知識を理解し、最後に学んだ知識を使用することを意味します。この本が、学習中に混乱している人、または新しいスキルの学習方法がわからないすべての人に役立つことを願っています。
人件費の管理は、企業が経済的利益を最大化するための重要な手段です。企業は、課題に対処するために中核となる競争力を継続的に向上させる必要があります。
これは教育技術のガイドではなく、教育の雰囲気を見つける旅です。読者の皆さん、この本では、それぞれの教育的な物語を通して、本当の教育者がどうあるべきかがわかります。繊細で機知に富み、子供たちにとって何が適切で何が不適切かを知っていて、何を言うべきか、何を言ってはいけないのか、注意を払うのかを知っています。子どもの個性を尊重し、子どもの個々の生活世界に注意を払い、子どもの話を「見る」「聞く」方法を知ってください。真の教育者だけが子どもの心を理解し、似非教育の調子を整え、教育と成長をより美しく充実したものにすることができるのです。
この本では、著者は、ほとんどの人が知識とスキルを学ぶのに適した一連の学習方法を詳細にまとめています。著者の意見では、あらゆる学習は、正確なインプット、深い消化、そして複数のアウトプットという 3 つの段階に分けられると考えています。 1 つ目は知識のインプットです。これは、最初に新しい知識を取り入れ、次に知識を消化し、インプットされた知識を理解し、最後に学んだ知識を使用することを意味します。この本が、学習中に混乱している人、または新しいスキルの学習方法がわからないすべての人に役立つことを願っています。
デザイナー必読のアイコンデザインガイド
アイコンの概要と開発経緯
概要
アイコンの定義
アイコン、ピコトとも呼ばれる
これは、コンピュータの世界を現実の世界に喩えて要約したものです。
ソフトウェア製品の機能や操作を表します。
アイコンの目的
ショッピング モール ガイド: チェックアウト アイコン、出口アイコン、バスルーム アイコンなど。
アプリアイコン: WeChat、電話、テキストメッセージなど。
表現方法
ワイヤー
麺類
準オブジェクト
アイコンの分類
象徴的なアイコン: 携帯電話のアプリケーション起動アイコンなど
機能アイコン: アプリや Web サイトによく表示されます
アイコンの重要性
世界中で使用されています
スペースを節約する
高速測位
コンテキストに応じた配置
開発パス
起源
オブジェクト→シンボル
「保存」アイコンの出典:フロッピーディスクの外観より
シンボル → 新しいシンボル
スキュアモーフィックアイコン
本物に近い
スキューモーフィックなアイコンとインターフェイスがユーザーに具体的なガイダンスを提供します
アドバンテージ
ユーザーの学習コストを削減
学習サイクルを短縮する
すぐに適応する
欠点がある
詳細や装飾が多すぎると、ユーザーが情報を取得する能力が妨げられます。
フラットアイコン
現実のオブジェクトを単純化し、抽象的、単純化、および象徴的なデザイン要素を通じて表現します。
要素の境界はきれいで整然としており、インターフェイスは整然として簡潔です
カラーブロック、シンボリックグラフィックス、サンセリフフォントをより多く使用する
アドバンテージ
情報と物事の仕組みをシンプルかつ直接的に提示する
干渉情報を弱める
認知障害の軽減
欠点がある
表現形式が抽象的すぎて感情が伝わらない
深刻な同質性と個性の欠如
微小な平坦で軽い物体
小さな領域にはフラット アイコンまたは線形アイコンを使用します
より大きな領域の場合は、グラデーションまたは明るいテクスチャのアイコンを使用します。
「新規疑似オブジェクト」スタイルアイコン
デザインの本質は光の使い方の素晴らしさ
ライト効果を「フラット」と「準オブジェクト」の間に保つ
アプリケーションアイコンの種類と機能
中国語のテキストアイコン
一つの単語
商品名の中で最も代表的な文字を抽出し、ストロークや全体の骨格に合わせたフォントをデザインします。
アドバンテージ
製品情報をわかりやすく、かつ強力な識別情報で伝えることができる
複数の単語
知らせ
全体的な調整と読みやすさ
通常 2 ~ 3 文字、最大 2 行 (4 文字) に配置
アドバンテージ
ブランドプロモーションの目的を達成するために、より直接的に商品名をユーザーに伝える
ユーザーのメモリコストを削減
欠点がある
アイコン上のテキストが下の補助テキストとまったく同じである場合、繰り返し表示されます。
Word とグラフィックの組み合わせ
知らせ
テキストと補助グラフィックのバランスを適切に保つ
アドバンテージ
より豊かでユニークな製品の気質と属性を表示できます
英文字アイコン
一文字
デザインセンスと認知度を兼ね備えたデザインの英語頭文字を抽出。
知らせ
英語は文字数が少なく、文字の考え方が同じになりやすく区別がつきにくいです。
複数の文字
製品の完全な名前、または複数の単語の最初の文字の組み合わせを抽出します。
ユーザーの記憶を容易にするために、独自の製品略語を形成する
文字とグラフィックの組み合わせ
アプリケーションアイコンをより視覚的に表現力豊かにする
数字アイコン
アドバンテージ
番号は識別性が高く、拡散しやすい
人々に親近感を与える
困難
ブランドと強いつながりを築く方法
特殊記号アイコン
シンボル自体の意味には製品の属性に一定の制限がありますが、関連する製品の属性を適切に説明することもできます。
ジオメトリ
シンプルでモダン、パーソナライズされた視覚体験を人々に提供
形が違えば感情表現も変わる
シングルとダブルの形状/シルエット
アプリのアイコンには 1 つまたは 2 つのシルエット グラフィックのみが表示されます
2つの設計方法
グラフィックを暗い背景ボードに反転白で作成します。背景: 単色またはグラデーションカラー
グラフィックを明るい色のバックボードに色で塗りつぶします。背景: 単色またはグラデーションカラー
アドバンテージ
簡潔かつ明確なので、ユーザーは多数のアプリケーション アイコンの中から目的のものをすぐに見つけることができます。
線形
2つの設計方法
暗い背景にアイコンを白にする、背景: 単色またはグラデーションカラー
アイコンを明るい色のバックプレーンに色で塗りつぶします。背景: 単色、グラデーション カラー、またはその他の視覚効果。
動物のグラフィック/シルエット
動物の全体像や局所的な特徴部分をデザイン要素として抽出し、背景を単色またはグラデーションカラーで塗りつぶします。
一般的な症状
シルエット
直線的なストロークのスタイル
対面スタイル
漫画のイメージ
ユーザーの気分を良くする
ユーザーの商品に対する印象を深めるのに役立ちます
ポジティブな形状とネガティブな形状
ポジティブな形状をベースとして使用してネガティブな形状の特徴を強調し、ネガティブな形状を使用して製品の属性を表現し、製品情報を伝えます
白のグラデーション
白の不透明度を使用して、グラフィックスに 3 次元のコントロール感を作成します
アドバンテージ
単純なシルエットグラフィックよりも質感を重視
カラーグラデーション
グラフィックの豊かな色彩表現
知らせ
連結する際は、色合いのコントラストに注意して空間感を演出してください。
背景とグラフィックの色は対照的である必要があります
なし
つまりデザインがない
モードは独特ですが推奨されていません
効果
ブランディング
ゲーム分野ではよくあることですが、アプリのアイコンにブランド名を入れることでユーザーの注目を集めることができます。
マーケティングイベント
ダブル11などのマーケティングイベントをアプリアイコン上に表示し、割引やプロモーションなどの注目を集めることができます
コアセールスポイント
主要なセールスポイントをアプリのアイコンに表示してユーザーの注意を引き、アプリの起動頻度を高めます。
お祭りの雰囲気
お祭りには消費が伴うため、電子商取引アプリケーションではお祭りの雰囲気をテーマにしたデザインが最も重視され、毎年春節の時期にはデスクトップのアイコンがほぼ赤一色になり、とてもお祭り気分になります。
アプリケーションアイコンの描画方法とプロセス
iOSアプリのアイコン
サイズ
起動アイコン (1024x1024px) をデザインし、プログラマーの要件に応じてさまざまなサイズのアイコンを数十個切り抜きます。
携帯電話で @3x
デスクトップアイコンのサイズは180x180pxです
携帯電話で @2x
デスクトップアイコンのサイズは120x120pxです
アプリストアで
寸法は1024x1024pxです
設計フロー
比喩を探しています
競合製品の分析
キーワードを抽出する
抽象的なグラフィックス
アイコンのグリッド線
豊富な詳細情報
複数シーンのテスト
知らせ
アプリケーション アイコンは、さまざまなシナリオでさまざまな解像度で表示されます。たとえば、iPhone 8plus では @3x (120 ピクセル) の画像が必要ですが、iPhone 7 の設定ページでは 58 ピクセルの画像が必要であるため、120 ピクセルの画像を削減。
大きな画像を小さな画像に縮小すると、一部の詳細が失われ、画像がぼやけてしまうため、デザイナーは、アプリケーションのアイコンが小さなサイズでも使用できるように、小さなサイズのアイコンを微妙に調整し、不要な装飾要素を削除する必要があります。 -解像度のアプリケーションシナリオ、鮮明な認識を維持することもできます
Android アプリのアイコン
主流の需要
6種類:1024px、512px、144px、96px、72px、48px
機能アイコンのデザイン仕様
アイコンの仕様
アイコンのサイズ
アイコンをデザインするときは一貫性が重要です
すべてのアイコンが同じサイズであることを確認してください
知識のポイント
最大のサイズから始めて、徐々に細部を削除して簡素化し、より小さなサイズを作成することをお勧めします。
ストローク アイコンを描画するときは、すべてのストロークが同じ太さであることを確認し、ストローク間の間隔がストローク自体よりも細くならないようにしてください。
アイコンキーライン
アイコン グリッドにより、グラフィック要素を一貫して柔軟に配置するための明確なルールが確立されます。
キーラインはグリッドの基礎です
アイコンキーグラフィック
アイコン グリッドは、アイコン要素を描画するための参照として使用され、コンテンツの明確なアウトライン境界を確立するのに役立ちます。
キーラインは、アイコンの均一性を促進し、設計プロセス中のスケーリングコストを簡素化するのに役立ちます
アイコンの角
直角コーナー
基本的な形状は完全なコンテナの正方形です -> 3X 丸い角を使用することをお勧めします
基本的なグラフィックは高さ(幅)全体の長方形です -> 2X 丸い角を使用することをお勧めします
基本的なグラフィックは小さい (幅と高さの 1/2 未満) 長方形です -> 1X の丸い角を使用することをお勧めします
直角でないコーナー
アイコンのシーンに応じて、通常、デフォルトは角度に関係なく 1X 角丸になります。
ただし、アイコンのデザインに応じて個別に考慮する必要がある、特殊なラジアンを持つ曲線「コーナー」を除きます。
アイコン領域が閉じられた状態と閉じられていない状態
閉鎖されたエリア
閉曲線で構成される領域は閉じた領域であり、独立した色で塗りつぶすことができます。
囲まれていないエリア
非閉曲線で構成される非閉領域は、原理的に独立した色で塗りつぶすことができません。
閉領域が曲線状で交差する線分がある場合、原理的に独立した色塗りつぶしを行うことができません。
アイコンの描画ルール
線分が曲線と交差する場合、または直線に対して垂直でない場合は、線分の端に丸い端点を使用します。
線分が直線と垂直に交差する場合は、線分の端に正方形の端点を使用します。
ドットの直径が線の幅と同じ場合、ドットは線分の代わりにグラフィックスを使用して描画されます。
円や正方形が 16 ピクセルより小さい場合は、線の代わりにグラフィックを使用することをお勧めします。
知らせ
スロープ
線分と端点
アイコンの区切りと間隔
アイコンのスタイル変更
シングルおよびダブルのポートレート スケッチ エッジ
線分の閉包
統一された視点
ビジュアルグリッド
アイコンの中心を見つけるのに役立ちます
視覚的な重み
物理的に均一なサイズ
視覚的に均一なサイズ
視覚的な錯覚を避けるためにアイコンのサイズを調整する
アイコン描画詳細
アイコンがピクセル グリッドを埋めるように、パラメーターに小数点を含めないでください。
アイコンの色
機能アイコン
おすすめのカラーは「ブラック」の1色です。
マーケティングアイコン
3色以内
機能アイコンのスタイル
線形アイコン
物体の輪郭を線で表現する
顔アイコンよりも美しい見た目を実現
識別性が高く、明確、シンプル、そして識別しやすい
利用シーン:APP製品のタブバーなど
顔アイコン
顔を主な表現形式としたアイコン
強力な表現力、豊かなディテール、強い感情感、卓越したビジョン、広いクリエイティブスペース
モノクロ彩度塗りつぶしアイコン
単色のグラデーションアイコン
多色のグラデーションのアイコン
使用シナリオ: 通常、スポーツおよびファッション アプリケーションのタブ バーに表示されます
フラットアイコン
使用するシーン
主にブート ページや空の状態の感情的なデザインに使用されます。
タブバー、ホームページのメイン機能入口
カテゴリエリアアイコン
位置
通常は検索ボックスとバナーの下にあります
効果
さまざまなサブセクションの入り口を集約し、各サブセクションの交通を誘導するコンテンツを配信します。
一般的な設計手法
丸底板 45度グラデーション白表面微小突起
45度のグラデーションフラットアイコンマイクロプロジェクション
単純な線形
45 度のグラデーションの不透明度の顔アイコン
テキストアイコン
特定の意味をテキストで直接表現するアイコン記号
自分で描画します。フォントを直接使用することはお勧めしません
ダイナミックアイコン
アイコンの命名規則
フォーマット
ビジネスタイプ機能サイズステータス
機能アイコンの描き方
アイコンの描画方法
ブール演算
ベジェ曲線
ペンツール
政策決定
分割の詳細
アイコン内の細かい要素(角丸、線端など)を分解し、仕様書での細かい要素の使用ルールを策定
スタイルの配置
製品の色調やビジネス特性に応じて、対応する色や質感のスタイルが仕様書に策定されます。
機能分担
異なる機能 (キングエリア、タブバーなど) を持つアイコンは区別する必要があり、同様の機能を持つアイコンは、色やテクスチャも含めて類似している必要があります。
直線性または表面性
よく使われるテクニック
アプリ下部のナビゲーションバーでは、選択状態では顔のアイコンが使用され、非選択状態では線状のアイコンが使用されます。
顔型アイコンは直線的なアイコンに比べて視覚情報の重層感が強く、装飾的であるだけでなく誘導性も高く、例えばキングコングエリアの機能アイコンやIOSの設定画面などに顔型アイコンが使用されています。
顔の形をしたアイコンは、視覚領域が広く、短時間で識別しやすいため、車両やその他のシステム インターフェイスに適しています。
通常、線形アイコンはより繊細で繊細に見えるため、より繊細で簡潔なデザインや女性らしい製品デザインに適しています。
アイコンのエクスポート
外部パートナー
複数のデバイスに合わせて 1x、2x、3x の PNG ファイルが利用可能
開発者と他のデザイナー
.svg ファイルをエクスポートする
アイコンの管理と配信
外観検査
できるだけきれいに保つために、不要な線や形を避けてください。
すべての線が標準枠内に収まっていますか?
無料のアイコン管理ツール
ヌクレオ
アイコンデザインの判断基準
認識性
意味認識
視覚言語が曖昧さなくテキスト言語を置き換えることができるかどうか
ビジュアルアイデンティティ
アイコンのサイズ、複雑さ、色、線の太さ
規範的な
視覚的なサイズの一貫性
満腹感
同じルール
細部の統一
団結
線の太さ
同じ機能タイプのアイコンの線の幅と太さは均一である必要があり、バックプレート付きのアイコンの線は細すぎないようにする必要があります。
デザイン言語
透明度(展開レイヤー)
角丸(丸か右)
破損した開口部 (開口位置)
デザインの特徴
複雑
アイコンを簡略化できない場合は、同じアイコン セットのインク ウェイトを一定に保ち、複雑すぎるアイコンを簡略化し、認識性を高めます。
色指定
フラット アイコンには最大 2 色を使用することをお勧めします
呼吸感覚
適切なスペースを空ける
ブランドセンス
ブランドコンセプトと一致し、同じ感覚をユーザーに伝える
アイコンのブランドセンス
ブランドグラフィックの抽出
ブランドカラーの抽出
デザイン言語を抽出する
製品の性質を抽出する
ブランド名を分割
画像の関連付けを展開する
アイコンのセット全体を描画するときに統一されたスタイルを確立する
見た目とカラーからメインスタイルを確立
地域に個性を求める
この 2 つを組み合わせて、製品の属性とユーザーのポジショニングを統合してデザインを完成させます。