Color

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.

顏色是給予活力的很好的方式，提供連續性的視覺，傳遞狀態信息，給予用戶操作反饋，幫助用戶標識數據。看下系統顏色組合指南，當選擇app的顏色讓它看起來獨立和協調，不論在淺色和深色背景下。

Use color judiciously for communication.The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns people of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

為傳達信息明智地選擇顏色。當謹慎地使用時，顏色喚起對重要信息的關注的能力會被提升。例如，一個紅色三角形警告用戶一個嚴重問題，當紅色被用在app的其他地方，為了不嚴重的利用會變得不起作用。

Use complementary colors throughout your app.The colors in your app should work well together, not conflict or distract. If pastels are essential to your app’s style, for example, use a coordinating set of pastels.

貫穿你的app使用互補的顏色。顏色在你的app應該一起協同地很好，沒有沖突或者令人疑惑。如果蠟筆對于你的app風格是必須的，例如，使用協調的蠟筆集合。

In general, choose a limited color palette that coordinates with your app logo.Subtle use of color is a great way to communicate your brand.

一般，選擇一個限定的調色板，與你的app logo協調。精妙的使用顏色是一種很好的方式凸顯你的品牌。

Consider choosing a key color to indicate interactivity throughout your app.In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a key color that denotes interactivity, make sure other colors don’t compete with it.

貫穿你的app考慮使用一個關鍵顏色來表達交互性。在Notes，交互原色是黃色的。在Calendar，交互元素是紅色的。如果你定義一個關鍵顏色表示交互，確保其他顏色不與它沖突。

Avoid using the same color for interactive and noninteractive elements.If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap.

避免使用相同的顏色既用于交互元素又用于非交互元素。如果交互和非交互元素又相同的顏色，用戶很難知道點擊哪里。

Consider how artwork and translucency affect nearby colors.

考慮插圖和半透明怎么影響附近的顏色。

Variations in artwork sometimes warrant changes to nearby colors in order to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when using map mode but switches to a dark color scheme when satellite mode is activated. Colors can also appear different when placed behind a translucent element, or when applied to a translucent element, such as a toolbar.

在插圖的變更時需要對附近顏色做出改變，為了維護視覺延續和阻止界面元素變得壓倒性的或者沒有映像。地圖，例如，當使用地圖模式顯示一個亮色組合，但是當衛星模式被激活轉換到一個暗色組合。顏色也能表現不同當放在一個半透明的元素，或者當應用到一個半透明的元素，例如工具條。

Test your app’s color scheme under a variety of lighting conditions.Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.

在不同的光照條件下測試你的顏色方案。光照對于在市內和室外，基于房間氛圍，一日的時間，天氣，和更多有不同的意義。當你的app在現實世界被使用，顏色不會一直看起來和你在電腦使用相同。永遠在多種光照條件下預覽你的app，包括在一個大陽天的室外，看看顏色怎么呈現。如果必要，在大多數用例中改變顏色來提供一個最佳的瀏覽體驗。

Consider how the True Tone display affects color.The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style. For developer guidance, seeInformation Property List Key Reference.

考慮True Tone顯示影像顏色。True Tone顯示使用周圍光亮感應器來自動調整顯示白點來適應當前的光照條件。主要關注在reading, photos, video, and gaming的app可以加強或減弱設置了特定的白點自適應風格的效果。For developer guidance, seeInformation Property List Key Reference.

Be aware of colorblindness.Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, you could use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness.

考慮色盲。許多色盲用戶，例如，被發現很難分辨紅色和綠色（和區分其他顏色和灰色），或者區分藍色和橘色。避免使用這些顏色組合作為分辨兩種狀態或者值的唯一方式。例如，取代使用紅色和綠色的圈來表明掉線和在線，你可以使用一個紅色的正方形和一個綠色圓圈。一些圖像編輯軟件包括工具來幫助你辨別色盲。

Consider how your use of color might be perceived in other countries and cultures.In some cultures, for example, red communicates danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

考慮怎么使用顏色能被其他國家和文化感知。在一些文化，例如，紅色傳達危險。在其他地方，紅色有積極的含義。確保在你的app顏色傳達合適的信息。

Use sufficient color contrast ratios.Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

使用充分的顏色對比度。在你的app中不充分的對比的內容會使人難以閱讀。圖標和文本也許和背景混合，例如。一個在線顏色對比計算器可以幫助你準確分析在你app里的顏色對比，為了保證它滿足可選的標準。追求至少4.5:1的比例，盡管更推薦7:1因為它滿足更多嚴厲的可訪問性標準。

Color Management

Apply color profiles to your images.The default color space on iOS is Standard RGB (sRGB). To ensure that colors are correctly matched to this color space, make sure your images include embedded color profiles.

應用顏色配置到你的圖片。iOS初始顏色庫是標準RGB（sRGB）。為了保證顏色是正確匹配這個顏色空間，確保圖片包括內置的顏色配置文件。

Use wide color to enhance the visual experience on compatible displays.Wide color displays support a P3 color space, which can produce richer, more saturated colors than sRGB. As a result, photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in .png format. Note that a wide color display is needed to design wide color images and select P3 colors.

在兼容的顯示上使用寬闊的顏色范圍來增強視覺體驗。寬闊的顏色顯示支持一個P3顏色空間，可以產生比sRGB更豐富，更飽和的顏色。結果，照片和影像使用寬闊的顏色會更生動，可視化數據和狀態指示器使用更豐富的顏色會更令人映像深刻。合適時，在16位每像素（每channel）使用Display P3 color profile，用.png格式導出圖片。記住，設計更多顏色圖片和選擇P3顏色需要更寬廣的顏色顯示。

Provide color space-specific image and color variations when the experience calls for it.In general, P3 colors and images tend to appear as expected on sRGB devices. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when they appear on an sRGB devices. Gradients that use colors in the P3 spectrum can also sometimes appear clipped on sRGB devices. To avoid these issues, you can provide distinct images and colors in the asset catalog of your Xcode project to ensure visual fidelity on both wide color and sRGB devices.

當體驗需要提供特定顏色空間的圖片和不同顏色。一般，P3顏色和圖像傾向于顯示得和sRGB設備期望的一樣。偶爾，然而，很難在一個sRGB設備里區分兩種相似的P3顏色。在P3光譜漸變使用顏色有時在sRGB設備看起來被省略。為了避免這些事件，你可以在你的Xcode project提供不同的圖片和顏色在資產目錄來保證視覺保真度，不論寬色域和sRGB設備上。

Preview your app’s colors on actual sRGB and wide color displays.Make adjustments as needed to ensure an equally great visual experience on both types of displays.

預覽你的app顏色在真實的sRGB和寬色域顯示器。做出必要的調整來確保在所有類型顯示器上有相同的視覺體驗。

TIPOn Macs with wide color displays, you can use the system color picker to select and preview P3 colors, and to compare them with sRGB colors.