スクリーンベースのインタフェースは、アイコン設計、特にサイズとスケールの面で特殊な課題となります。インタフェースのアイコンは、極めて小さなサイズであってもすぐに理解できる、明確なものでなければなりません。

UI icons on red background
UI icons on black background
UI icons on grey background

Red Hat の UI (ユーザー・インタフェース) アイコンは平面的かつシンプルで、16 ピクセルでも識別できます。主にグレーまたは白で使用されます。このような小さなサイズでも、標準アイコンと同じ原則を UI アイコンに使用します。すなわち、12° と直角、丸みのある角と終端、幾何学図形です。

Red Hat の UI アイコンは、Red Hat の Web プロパティで使用されます。製品インタフェースは Patternfly デザインシステムのアイコンを使用する場合があります。

UI アイコンの使用例

Highlighting the navigation bar on a Red Hat web page

redhat.com のインタフェースでは、UI アイコンによってユーザーはサイト内をすばやく直感的にナビゲートできます。

Example showing UI icons in use on a web card

UI アイコンをテキストと組み合わせると、さまざまな種類のコンテンツに注意を引くことができます。

UI icon representing

Do this

UI アイコンは変更せず、デザインされたとおりに使用します。

Combination of two UI icons

Do not do this

既存の UI アイコンを変形させたり、結合したり、変更したりしないでください。

Highlighting the navigation bar on a Red Hat web page

Do this

UI アイコンは小さいサイズのインタフェースで使用します。

Example of UI icons placed in a slide deck

Do not do this

標準アイコンの代わりに UI アイコンを使用しないでください。そのような使用を意図したものではありません。

UI icon representing

Do this

UI アイコンを使用する際は、WCAG 2.1 ガイダンスに従って、少なくとも 3:1 のカラーコントラスト比を維持するようにします。

UI icon representing

Do not do this

十分なコントラストのない背景に UI アイコンを配置しないでください。

Gear UI icon next to the word

Do this

ナビゲーションを容易にするために、またはコンテンツを表す記号として、意図的に UI アイコンを使用します。

Sample mockup of a web card

Do not do this

UI アイコンを拡大/縮小して装飾的なアートワークとして使用しないでください。