search

cyber-s / blog

tipsや質問などをここにknowledgeとして残します。
0 stars 0 forks source link

アイコン A complete guide to iconography #526

Open justcallmehide opened 5 years ago

justcallmehide commented 5 years ago

ロゴにも通じるとこなので共有。 欧米のデザイナーは、こういうのを言語化するのがうまいなぁ。 https://www.designsystems.com/iconography-guide

アイコンは結構軽く見られがちだけど、抽象的な視覚の高度な作業が必要。

一貫性一貫性一貫性 consistency

これだけ言っても守れない、それくらい一貫性を保つのは難しい。

アイコンは別に全サイズで同じなくてもいい

これは最近のロゴの傾向でもありますが、場面によってロゴが変形してもいいって考え方。一貫性が通ってれば同じものとしてユーザーは認識できる。

2-houses

大は小を兼ねるので、まずは大きいものが作って更に抽象化していく。

When all the content won’t fit, determine which details are most important and then remove the excess.

これは最近のロゴも同じ

19-metaphor-3 18-metaphor-2

アイコンが何色もあったらそれはアイコンではない (イラストだ)

アイコンは一色でいける、抽象性を目指す。

3-Drinks

Left: this is a spot illustration. Middle: icon with perspective. Right: flat icon.

pixel gridを使おう

これはロゴにもいえること。使わなくてもずれてるってわかる感覚はもっと重要だけど。

Group__10_

アイコン周りの1px-2pxのエッジに注意してみよう

Group__11_

線は同じ幅で、線の空間は線より狭くてはならない

10-Trash

If you're going to create stroked icons, strokes all need to be the same weight. I also recommend that the space between strokes not be thinner than your stroke weight.

filled icon と stroke icon

ただ単に反転させるだけにとどめてはだめ。

コーナーや結合部分は

一貫性の観点から、

I do not recommend making stroked icons at smaller than 10px (assuming 1px-2px stroke weight). They will be very hard to decipher.

大きさと線の相対的な感覚に気を配る。

End Capsは常に同じ

でもコーナーは全部同じroundにする必要はない

16-briefcase

If you select the entire path, it rounds all corners to the same degree. If you go into Edit mode, you can select individual points and round them separately.

Perspective 遠近法について

基本的にはトリッキー。でも読みやすさや明確さを高めるならオッケーな時も。

Using perspective in icons is tricky - their size makes it difficult since drawing with perspective takes up extra space. If you do want to use perspective, either use it widely and make it a key part of your system, or use it sparingly when it helps increase legibility and clarity.

20-perspective

文字記号は避ける

When possible, avoid type in your icons. Icons are meant to be global. If you do need type (for instance, currency symbols), draw it yourself, rather than using a typeface.

$なのか¥なのか汎用性がなくなる

もちろんアイコンもブランディングの一部だ

justcallmehide commented 4 years ago

ルールの文字化

言語化してみることの重要性。良いデザイナーは文章能力も高い、これ本当。

例:

image

アイコンのテスト

これはロゴとかでもよく行われるが、テスト。サイズを変更したり、隣り合うアイコンとの関係性をチェックする。 image

アイコンのパラメーター

clarity, readability, alignment, brevity, consistency, and personality

明瞭で簡潔で、かつ個性をだすっていう....

googleのアイコンアンチパターン

https://material.io/design/iconography/system-icons.html#icon-themes

shopifyのアイコンアンチパターン

https://polaris.shopify.com/design/icons