KDE BLOG

Webデザインやコーディングについて書いています

【Human Interface Guidelines 翻訳 vol.15】iOS - Visual Design - Dark Mode

元ページ
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

Dark Mode(ダークモード)

In iOS 13.0 and later, people can choose to adopt a dark system-wide appearance called Dark Mode. In Dark Mode, the system uses a darker color palette for all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker backgrounds. Dark Mode supports all accessibility features.

iOS 13.0以降では、システム全体のダークモードと呼ばれる暗い外観を採用することを選択できます。
ダークモードでは、システムはすべての画面、ビュー、メニュー、コントロールに暗いカラーパレットを使用し、より鮮やかな色を使用して、前景のコンテンツを暗い背景に対して目立たせます。
ダークモードは、すべてのユーザー補助機能をサポートしています。

f:id:jinseirestart:20200817022327p:plain

In Settings, people can choose Dark Mode as their default interface style and schedule automatic changes between the appearance modes. Because people make these choices at a systemwide level, they generally expect all apps to respect their preferences.

設定では、ユーザーはデフォルトのインターフェイススタイルとしてダークモードを選択し、外観モード間の自動変更をスケジュールできます。
人々はこれらの選択をシステム全体のレベルで行うため、一般的に、すべてのアプリが自分の好みを尊重することを期待しています。

Comply with the appearance mode people choose in Settings. If you offer an app-specific appearance mode option, you create more work for people because they have to adjust more than one setting. Worse, they may think your app is broken because it doesn't respond to their systemwide appearance choice.

ユーザーが[設定]で選択した外観モードに準拠します。
アプリ固有の外観モードオプションを提供すると、人々は複数の設定を調整する必要があるため、より多くの作業が発生します。
さらに悪いことに、システム全体の外観の選択に応答しないため、アプリが壊れていると彼らが思うかもしれません。

Test your designs in both light and dark appearances. See how your interface looks in both appearances, and adjust your designs as needed to accommodate each one. Designs that work well in one appearance might not work in the other.

明るい外観(ライトモード)と暗い外観(ダークモード)の両方でデザインをテストします。
両方の外観でインターフェイスがどのように見えるかを確認し、それぞれに対応するように必要に応じてデザインを調整します。
1つの外観でうまく機能するデザインは、他の外観では機能しない場合があります。

Ensure that your content remains comfortably legible in Dark Mode when you adjust the contrast and transparency accessibility settings. In Dark Mode, you should test your content with Increase Contrast and Reduce Transparency turned on, both separately and together. You may find places where dark text is less legible when it’s on a dark background. You might also find that turning on Increase Contrast in Dark Mode can result in reduced visual contrast between dark text and a dark background. Although people with strong vision might still be able to read lower contrast text, such text could be illegible for people with visual impairments. For guidance, see Color and Contrast.

コントラストと透明度のアクセシビリティ設定を調整するとき、コンテンツがダークモードでも快適に判読できることを確認してください。
ダークモードでは、「コントラストを上げる」と「透明度を下げる」を別々にまたは一緒にオンにして、コンテンツをテストする必要があります。
暗い背景上にある場合、暗いテキストが判読しにくい場所を見つけることがあります。
また、ダークモードでコントラストを上げるをオンにすると、暗いテキストと暗い背景の間の視覚的なコントラストが低下することがあります。
強い視力を持つ人々は依然として低いコントラストのテキストを読むことができるかもしれませんが、視覚障害を持つ人々にとって判読できないかもしれません。
ガイダンスについては、色とコントラストを参照してください。

Dark Mode Colors(ダークモードでの色)

The color palette in Dark Mode includes darker background colors and lighter foreground colors that are carefully selected to ensure contrast while maintaining a consistent feel between modes and across apps.

ダークモードのカラーパレットには、暗い背景色と明るい前景色が含まれています。これらは、モード間およびアプリ間で一貫した雰囲気を維持しながら、コントラストを確保するために慎重に選択されています。

In Dark Mode, the system uses two sets of background colors — called base and elevated — to enhance the perception of depth when one dark interface is layered above another. The base colors are darker, making background interfaces appear to recede, and the elevated colors are lighter, making foreground interfaces appear to advance.

ダークモードでは、システムは2つのセットの背景色(ベースエレベートと呼ばれる)を使用して、1つの暗いインターフェイスが別のインターフェイスの上に重ねられているときの奥行きの知覚を強化します。
ベースはより暗く、背景のインターフェイスが後退しているように見えます。
エレベートはより明るく、前景のインターフェイスが進んでいるように見えます。

Prefer the system background colors. Dark Mode is dynamic, which means that the background color automatically changes from base to elevated when an interface is in the foreground, such as a popover or modal sheet. The system also uses the elevated background color to provide visual separation between apps in a multitasking environment and between windows in a multiple-window context. Using a custom background color can make it harder for people to perceive these system-provided visual distinctions.

システムの背景色を優先します。
ダークモードは動的です。つまり、ポップオーバーやモーダルシートなど、インターフェイスが前景にあるときに、背景色が自動的にベースからエレベートに変わります。
また、システムはエレベートの背景色を使用して、マルチタスク環境でのアプリ間およびマルチウィンドウコンテキストでのウィンドウ間の視覚的な分離を提供します。
カスタムの背景色を使用すると、システムが提供するこれらの視覚的な違いを人々が認識しにくくなる可能性があります。

Use dynamic colors that adapt to the current appearance. Semantic colors like separator automatically adapt to the current appearance (for guidance, see Dynamic System Colors). When you need a custom color, add a Color Set asset to your app’s asset catalog and specify the light and dark variants of the color so that it can adapt to the current appearance mode. Avoid using hard-coded color values or colors that don’t adapt.

現在の外観に適応するダイナミックカラー(動的カラー)を使用します。
セパレーター(区切り線)などの意味のある色は、現在の外観に自動的に適応します(ガイダンスについては、ダイナミックシステムカラーを参照してください)。
カスタムカラーが必要な場合は、アプリのアセットカタログにカラーセットアセットを追加し、現在の外観モードに適応できるように、明るい色と暗い色のバリエーションを指定します。
ハードコーディングされたカラー値や順応しないカラーの使用は避けてください。

f:id:jinseirestart:20200819015311p:plain

Ensure sufficient color contrast in all appearances. Using system-defined colors ensures a proper contrast ratio between your foreground and background content. For custom colors, aim for a contrast ratio of 7:1, especially for smaller text. For guidance, see Dynamic System Colors.

すべての外観で十分な色のコントラストを確保してください。
システム定義の色を使用すると、前景コンテンツと背景コンテンツの適切なコントラスト比が保証されます。
カスタムカラーの場合、特に小さいテキストの場合は、7:1のコントラスト比を目指します。
ガイダンスについては、ダイナミックシステムカラーを参照してください。

Soften the color of white backgrounds. If you must use a white background for your content in Dark Mode, choose a slightly darker white that prevents the background from glowing against the surrounding dark content.

白い背景の色を柔らかくします。
ダークモードのコンテンツに白い背景を使用する必要がある場合は、背景が周囲の暗いコンテンツに対して光らないように、少し暗い白を選択します。

For related guidance, see Color.

関連するガイダンスについては、カラーを参照してください。

Image, Icon, and Symbol Color(画像、アイコン、シンボルの色)

The system uses SF Symbols, which automatically look great in Dark Mode, and full-color images that are optimized for both light and dark appearances.

システムアイコンはSFシンボルを使用します。
これはダークモードで自動的に見栄えがよくなり、明るい外観と暗い外観の両方に最適化されたフルカラー画像です。

Use SF Symbols wherever possible. Symbols look great in both appearance modes when you use dynamic colors to tint them or when you add vibrancy.

可能な限りSFシンボルを使用してください。
ダイナミックカラーを使用して色を付ける場合、または鮮やかさを加える場合、シンボルは両方の外観モードで見栄えがします。

Design individual glyphs for light and dark appearances when necessary. A glyph that uses a hollow outline in light mode might look better as a solid, filled shape in Dark Mode.

必要に応じて、明るい外観と暗い外観の個々のグリフをデザインします。
ライトモードでアウトラインのグリフは、ダークモードで塗りつぶされたソリッドシェイプと同じくらい、より良く見える場合があります。

Make sure full-color images and icons look good. Use the same asset if it looks good in both light and dark modes. If an asset looks good in only one mode, modify the asset or create separate light and dark assets. Use asset catalogs to combine your assets into a single, named image.

フルカラーの画像とアイコンがきれいに見えることを確認してください。
ライトモードとダークモードの両方で見栄えが良い場合は、同じアセットを使用します。
アセットが1つのモードでのみ見栄えが良い場合は、アセットを変更するか、明るいアセットと暗いアセットを別々に作成します。
アセットカタログを使用して、アセットを単一の名前付き画像に結合します。

Materials(マテリアル)

Vibrancy can help maintain good contrast of text on darker backgrounds.

鮮やかさは、暗い背景のテキストのコントラストを維持するのに役立ちます。

Use the system-provided label colors for labels. The primary, secondary, tertiary, and quaternary label colors adapt automatically to light and dark appearances. For related guidance, see Typography.

ラベルにはシステム提供のラベルの色を使用します。
primary,、secondary,、tertiary、およびquaternaryのラベルの色は、明るい外観と暗い外観に自動的に適応します。
関連するガイダンスについては、「タイポグラフィ」を参照してください。

Use system views to draw text fields and text views. System views and controls make your app’s text look good on all backgrounds, adjusting automatically for the presence or absence of vibrancy. When possible, use a system-provided view to display text instead of drawing the text yourself. For developer guidance, see UITextField and UITextView.

システムビューを使用して、テキストフィールドとテキストビューを描画します。
システムビューとコントロールにより、アプリのテキストがすべての背景で見栄えよくなり、鮮やかさの有無が自動的に調整されます。
可能な場合は、テキストを自分で描画するのではなく、システム提供のビューを使用してテキストを表示してください。
開発者向けガイダンスについては、UITextFieldおよびUITextViewを参照してください。

To learn more about the interplay of vibrancy and materials, see Materials.

鮮やかさとマテリアルの相互作用の詳細については、マテリアルを参照してください。