Цвет и Оформление

Цвет Усиливает Связь

В iOS цвет выражает интерактивность, придаёт значимость и обеспечивает визуальную целостность. Встроенные приложения используют группу чистых и ясных цветов, которые прекрасно смотрятся по отдельности и в сочетании друг с другом, а также и на светлом, и на тёмном фоне.

color_family_a_2x

 

Если вы создаёте сложные произвольные цвета, удостоверьтесь, что они будут хорошо смотреться вместе. Например, если вашему приложению подходят пастельные цвета, вам нужно создать группу соответствующих пастельных цветов, которые можно повсеместно использовать в приложении.

Обращайте внимание на цветовой контраст в различном контексте. Например, если между фоном навигационной панели и фоном кнопок недостаточно контраста, для пользователя будет сложно рассмотреть кнопки. Быстрый, но ненаучный способ определить, достаточно ли контраста в ваших цветах — это посмотреть на ваше приложение в различных световых условиях, включая открытый воздух и солнечный день.

Хотя наблюдение за вашим устройством в приложении может помочь определить, над какими местами нужно поработать, этим нельзя заменить более объективный подход, который приносит надёжные результаты. Этот подход включает в себя определение соотношения между степенью освещённости цветов переднего и заднего планов. Получив это соотношение, используйте онлайн-калькулятор степени контрастности или вы можете выполнить подсчёт самостоятельно, используя формулу, указанную в Руководстве по обеспечению доступности web-контента (WCAG) 2.0. В идеале соотношение цветового контраста в вашем приложении должно быть 4.5:1 или выше.

Примите во внимание полупрозрачность панели и содержимого приложения, когда используете специальный оттенок панели. Если вам нужно создать оттенок панели, которому соответствует конкретный цвет, например цвет в существующем бренде, вам возможно придётся эксперементировать с разными цветами, пока вы не будете удовлетворены результатом. Внешний вид панели зависит от полупозрачности, которую обеспечивает iOS, и внешнего вида содержимого приложения, которое может быть расположено за панелью.

ПРИМЕЧАНИЕ К ПРОГРАММНОМУ ИНТЕРФЕЙСУ ПРИЛОЖЕНИЯ (API)

Для определения оттенка кнопок панели используйте особенности tintColor; для определения оттенка самой панели используйте особенности barTintColor. Для получения большей информации об этих особенностях панели, смотрите разделы UINavigationBar Class Reference, UITabBar Class Reference, UIToolbar Class Reference и UISearchBar Class Reference.

Примите к сведению неспособность различать цвета. Большинство людей, неспособных отличать цвета, испытывают сложности в отличии красного от зелёного. Проверьте ваше приложение, чтобы удостовериться, что вы не используете красный и зелёный как единственный способ различать два состояния или сочетания (некоторые программные обеспечения для редактирования изображений могут помочь вам в работе с неспособностью различать цвета). В целом, использование более одного способа для выражения интерактивности элемента является хорошей идеей (для получения большей информации о выражении интерактивности в iOS смотрите раздел Интерактивные Элементы Побуждают к Прикосновению).

Примите во внимание выбор основного цвета для выражения интерактивности и состояния. Основными цветами во встроенных приложениях являются жёлтый в Заметках и красный в Календаре. Если вы выделите основной цвет для выражения интерактивности и состояния, удостоверьтесь, что другие цвета в вашем приложении не конкурируют с ним.

Избегайте использования одинаковых цветов и в интерактивных, и не интерактивных элементах. Цвет — это один из способов, которым выражается интерактивность элементов пользовательского интерфейса. Если и интерактивные и не интерактивные элементы одного цвета, пользователям сложнее разобраться, куда нажимать.

Цвет передаёт информацию, но не всегда так, как вы задумали. Каждый видит цвет по-своему, и многие культуры отличаются тем, каким значением они наделяют цвета. Потратьте время на то, чтобы узнать, как ваше использование цвета может быть воспринято разными странами и культурами. Насколько возможно, удостоверьтесь, что цвета в вашем приложении посылают верное сообщение.

В большинстве случаев не позволяйте цвету отвлечь пользователей. Если цвет не является составляющей цели вашего приложения, лучше использовать цвет как изящное украшение.

Качественное Оформление Создаёт Чёткую Коммуникацию

Apple создала группу шрифтов San Francisco для обеспечения красивого оформления речевого и читательского процессов на всех платформах. В iOS 9 и далее San Francisco является системным шрифтом.

San Francisco работает вместе с динамическим типом (Dynamic Type), чтобы предоставить вам:

  • Целый ряд размеров шрифта, которые автоматически обеспечивают превосходную разборчивость и удобный процесс чтения при любых пользовательских настройках, включая настройки доступа
  • Автоматическую регулировку расстояния между знаками (интервалы) и высоты строк (междустрочный интервал) при любом размере шрифта
  • Способность определять различные текстовые стили для семантически отличающихся блоков текстов, таких, как Тело, Дополнительная информация или Заголовок
  • Текст, который подстраивается правильным образом под изменения, которые пользователь вносит в настройки размера текста (включая видимость размеров текстов)

Загрузите San Francisco посетив https://developer.apple.com/fonts/. (Имейте ввиду, что шрифт San Francisco для iOS 9 называется SF-UI.) Когда вы применяете шрифт San Francisco к вашему приложению, вы можете регулировать значения в Simulator > Settings, чтобы проверить как текст вашего приложения выглядит в разных размерах.

ПРИМЕЧАНИЕ

Если вы используете специальный шрифт, вы всё еще можете применить динамический тип (Dynamic Type) и определения типа в соответствии с системными настройками размера текста. На вашем приложении лежит ответственность за надлежащую работу в случае изменений настроек пользователем. Чтобы получить больше информации о текстовых стилях и удостовериться, что ваше приложение уведомлено об изменениях размера текста пользователем, смотрите раздел Текстовые Стили.

San Francisco бывает двух оптических размеров: Text и Display. Text используется для размеров, которые ниже 20 пунктов, а Display для размеров 20 и более пунктов. Когда вы применяете в своём приложении San Francisco, iOS автоматически переключается между Text и Display, когда в этом есть необходимость.

ПРИМЕЧАНИЕ

Если для создания оформления вы используете такие программы, как Sketch или Photoshop, вам необходимо установить тип Display, когда вы устанавливаете размер текстового шрифта 20 пунктов или более. iOS автоматически устанавливает интервал между симоволами для San Francisco, основанный на размере текста (междустрочный интервал используется для изменения начального расстояния между буквами при определённом размере в пунктах). Интервалы между символами для каждого кегля шрифта в Text и Display показаны в Таблице 10-1 и Таблице 10-2 соответственно.

Таблица 10-1 Интервал на размер шрифта в пунктах в SF-UI Text

Размер шрифта в пунктах @2x (144 PPI) Интервал
6 41
8 26
9 19
10 12
11 6
12 0
13 -6
14 -11
15 -16
16 -20
17 -24
18 -25

Таблица 10-2 Интервал на размер шрифта в пунктах в SF-UI Display

Размер шрифта в пунктах @2x (144 PPI) Интервал
20 19
22 16
28 13
32 12
36 11
50 7
64 3
80 и выше 0

Например, вы, возможно, захотите увеличить насыщенность какого-либо текста, чтобы помочь пользователям увидеть иерархию содержимого, либо привлечь их внимание к конкретному слову или фразе. Либо вы, возможно, захотите создать визуальную связность между множеством близко расположенных ярлыков разного размера посредством увеличения насыщенности мелкого шрифта и уменьшением насыщенности крупного. Насыщенность шрифта также оказывает влияние на стиль и выражение содержимого в целом, так что вы можете выбрать определённую степень насыщенности для достижения конкретной цели в оформлении.Для выделения текста или создания визуальной взаимосвязи между частями содержимого, вы можете полагаться на стили, выделенные семантически посредством динамического типа (Dynamic Type), например, заголовок и основная часть, или вы можете устанавливать насыщенность шрифта, например, полужирный или сверхсветлый. Применение динамического типа (Dynamic Type) упрощает передачу смысла содержания, но если вы хотите получить больше контроля над оформлением, вы можете установить определённую насыщенность шрифта для конкретной части текста. (Для получения большей информации о настройке насыщенности шрифта смотрите раздел UIFont Class Reference.)

Уделяйте первостепенное внимание содержимому, когда отвечаете на изменения в размере шрифта. Не всё содержимое одинаково важно для пользователей. Когда пользователи выбирают более крупный размер текста, они хотят, чтобы содержимое, которое им нужно, было проще читать; они не всегда хотят, чтобы каждое слово на экране было крупнее.

Например, когда пользователи выбирают крупный размер текста для прочтения, Почта отображает тему и основную часть сообщения более крупно, а менее важную информацию, такую как дата и получатель, мелко.

mail_message_axlarge_2x

 

Удостоверьтесь, что все стили созданного шрифта разборчивы во всех размерах. Один из способов это сделать — следовать тому, как iOS отображает стили шрифта в различных размерах. Например:

  • Размер текста никогда не должен быть менее 11 пунктов, даже если пользователь выбирает очень маленький размер. Для сравнения, размер текста основной части в большом формате равен 17 кегелям, что является стандартной настройкой размера текста.
  • В целом, разница между размером шрифта и значением межстрочного интервала равна одному пункту в соответствии с настройкой размера текста. Исключениями являются два стиля надписей, которые используют одинаковые размеры шрифта, межстрочный интервал и расстояние между знаками в очень мелком, мелком и среднем размерах.
  • В трёх самых маленьких размерах текста расстояние между знаками довольно большое; в трёх самых крупных размерах текста оно относительно близкое.
  • В заголовке и основной части текста используется одинаковый размер шрифта. Для отличия от основной части, в заголовке используется повышенная степень насыщенности.
  • Размер текста навигационной панели всегда равен 17 пунктам, что является равным тексту основной части при выборе крупного размера в настройках.
  • Насыщенность текста всегда либо нормальная, либо полужирная; обычно не используется сверхсветлая или жирная насыщенность, потому что такой текст сложно прочитать.

По общему правилу, используйте один шрифт во всём приложении. Соединение нескольких разных шрифтов может сделать ваше приложение разбитым на куски и небрежным. Вместо этого используйте один шрифт и несколько стилей и размеров.

Рекомендуется                                                                                  Не рекомендуется

 

font_choice_rec_2x                                                                     font_choice_not-rec_2x

 

 

Copyright © 2016. iOSManual Все авторские права защищены