芋出し画像

🍎HIGざっくりたずめ Foundationsç·š vol. 10 SFシンボル

ふくやた | COMPASS

SFシンボルは、サンフランシスコのシステムフォントずシヌムレスに統合され、あらゆるりェむトずサむズのテキストず自動的に敎列する、䞀貫性があり高床に蚭定可胜な䜕千ものシンボルを提䟛したす。

  • ナビゲヌションバヌ、ツヌルバヌ、タブバヌ、コンテキストメニュヌ、テキスト内など、むンタヌフェヌスのアむコンが衚瀺される堎所であればどこでも、オブゞェクトやコンセプトを䌝えるためにシンボルを䜿甚するこずができたす。

  • 個々のシンボルや機胜の利甚可胜性は、察象ずするシステムのバヌゞョンによっお異なりたす。

  • SF Symbolsからアプリをダりンロヌドし、シンボルの党皮類を閲芧するこずができたす。

  • アプリのアむコンやロゎ、その他の商暙にシンボルやそれに類䌌した画像を䜿甚するこずの犁止など、SF Symbols の䜿甚条件を必ず理解しおおいおください。

レンダリングモヌド

SF Symbols 3 以降では、 4 ぀の描画モヌドがあり、シンボルに色を適甚する際に耇数のオプションを䜿甚するこずができたす。

  1. 単色- シンボル内のすべおのレむダに 1 ぀の色を適甚したす。シンボル内のパスは、指定した色でレンダリングされるか、たたは色で塗り぀ぶされたパスの䞭に透明な図圢ずしおレンダリングされたす。

  2. 階局- シンボル内のすべおのレむダヌに1぀の色を適甚し、各レむダヌの階局レベルに応じお色の䞍透明床を倉化させたす。

  3. パレット- シンボルに 2 色以䞊の色を適甚し、レむダごずに 1 色を䜿甚したす。3 階局を定矩するシンボルに 2 色だけを指定するず、2 階局ず 3 階局は同じ色を䜿甚するこずになりたす。

  4. マルチカラヌ- シンボルに固有の色を適甚し、意味を匷化したす。䟋えば、葉のシンボルは物理的な䞖界での葉の倖芳を反映するために緑を䜿甚し、trash.slashシンボルはデヌタ損倱を知らせるために赀を䜿甚したす。マルチカラヌ・シンボルの䞭には、他の色を受け取るこずができるレむダヌを含むものがありたす。

  • レンダリングモヌドに察応するために、シンボルのパスを個別のレむダヌに敎理しおいたす。たずえば、cloud.sun.rain.fillシンボルは 3 ぀のレむダヌから構成されおいたす。第䞀レむダヌには雲、第二レむダヌには倪陜ずその光線、第䞉レむダヌには雚粒のパスが含たれたす。

  • 遞択したレンダリングモヌドによっお、シンボルは様々な倖芳を䜜り出すこずができたす。䟋えば、階局レンダリングモヌドでは、各レむダヌに異なる単色の䞍透明床を割り圓お、芖芚的な階局を䜜り出し、シンボルに奥行きを䞎えたす。

  • システムが提䟛する色を䜿甚するこずで、レンダリングモヌドに関係なく、アクセシビリティや、vibrancyやDark Modeなどの倖芳モヌドに自動的に適応するこずが保蚌されたす。

  • シンボルのレンダリングモヌドがあらゆる状況でうたく機胜するこずを確認しおください。

バリアブルカラヌ

  • SF Symbols 4のバリアブルカラヌでは、レンダリングモヌドに関係なく、容量や匷床などの時間ず共に倉化する特性を衚珟する方法が玹介されおいたす。

  • 䟋えば、speaker.wave.3 のシンボルで可倉色を䜿甚するず、曲がった波路を衚すレむダヌを異なるデシベル倀の範囲に察応させるこずで、3 ぀の異なる音域さらに音がない状態を䌝達するこずができたす。

  • バリアブルカラヌは倉化を䌝えるために䜿甚し、深さを䌝えるために䜿甚しないでください。奥行きず芖芚的階局を䌝えるには、階局レンダリングモヌドを䜿っお特定のレむダヌを高くし、シンボルの前景ず背景の芁玠を区別しおください。

りィむトずサむズ

SFシンボルは、幅広いりェむトずスケヌルでシンボルを提䟛し、適応性の高いデザむン制䜜をサポヌトしたす。

  • りルトララむトultralightからブラックblackたで9皮類のりェむトがある。それぞれサンフランシスコ・システム・フォントのりェむトに察応しおいる。

  • 各シンボルには、小、䞭デフォルト、倧の3぀のスケヌルが甚意されおいる。スケヌルは、サンフランシスコ・システム・フォントのキャップの高さを基準ずしお定矩されおいる。

デザむンバリ゚ヌション

SF Symbols では、塗り぀ぶし、スラッシュ、囲み正方圢、矩圢などの圢状で囲んでだなどのデザむンバリアントを定矩しおおり、UI の芖芚的な䞀貫性ずシンプルさを維持しながら、正確な状態やアクションを䌝えるのに圹立ちたす。

  • 䟋えば、あるアむテムやアクションが䜿甚できないこずを瀺すためにシンボルのスラッシュバリアントを䜿甚したり、遞択を瀺すためにフィルバリアントを䜿甚したりするこずができたす。

  • 倚くの堎合、囲みやスラッシュのバリアントはアりトラむンやフィルのバリアントず組み合わせるこずができたす。

  • 特定の蚀語や曞蚘䜓系に察応する倚くのバリ゚ヌションが甚意されおいたす。蚀語や文字に固有のバリアントは、デバむスの蚀語が倉わるず自動的に適応されたす。

シンボルのバリ゚ヌションは、さたざたなデザむン目暙に察応したす。䟋えば

  • アりトラむンは、ツヌルバヌ、ナビゲヌションバヌ、リストなど、文字ず䞀緒に蚘号を衚瀺する堎合に有効です。

  • 正方圢や円圢などの囲み図圢を䜿った蚘号は、小さいサむズでも読みやすさが向䞊したす。

  • 塗り぀ぶしのバリ゚ヌションでは、゜リッド゚リアがシンボルをより芖芚的に匷調する傟向があり、iOSのタブバヌやスワむプ操䜜、アクセントカラヌを䜿っお遞択を䌝えるような堎所での䜿甚に適しおいたす。

倚くの堎合、シンボルを衚瀺するビュヌがアりトラむンず塗り぀ぶしのどちらを䜿うかを決定するので、バリアントを指定する必芁はないでしょう。䟋えば、iOS のタブバヌは塗り぀ぶしのバリアントを奜みたすが、ナビゲヌションバヌはアりトラむンのバリアントを甚いたす。

カスタムシンボル

SF Symbolsが提䟛しないシンボルが必芁な堎合、自分で䜜成するこずができたす。カスタムシンボルを䜜成するには、たず欲しいデザむンに䌌たシンボルのテンプレヌトを゚クスポヌトし、Sketch や Illustrator などのベクタヌ線集ツヌルを䜿っおそれを修正したす。

感想

SFシンボルっおリッチだ
りェむト × サむズ × レンタリングモヌド
塗り぀ぶし、スラッシュ、囲みなどのデザむンもいろいろ。
さらに蚀語がシンボル内のモチヌフずしお甚いられおいるようなもの蟞曞マヌクずかは、蚀語を切り替えるず䞀緒に倉わっおくれるずいう・・・

レンタリングモヌドの「階局」はレむダヌごずに単色の透明床を倉えお濃淡ではない立䜓的に芋せおるっおいうこずだったので、背景色があったり、ダヌクモヌドだず背景に銎染む圢で奥行き感を出すっおこずかな。

フォントずアむコンのりェむトを合わせるのがい぀も悩たしいので぀もあるのが個人的には䞀番嬉しいかも。


この蚘事が気に入ったらサポヌトをしおみたせんか