Дизайн приложений на yosemite

Posted on by riasevastopol

Сравнительно не так давно мы обновили Tower, дабы трудиться на Mac OS X Yosemite стало еще эргономичнее. Мы затронули многие вопросы приложения в течение нескольких обновлений. Сейчас мы желаем поделиться отечественным опытом переноса приложения на Mac OS X 10.10.

Разработка интерфейса OS X Yosemite

В то время, когда мы в первый раз разглядывали Yosemite еще в 2014 году, стало ясно, что Tower нужно будет пройти неспециализированное визуальное обновление. Mac OS X Yosemite находится в открытом доступе с 16 октября 2014 года, и, в целом, он был прекрасно принят. На данный момент более 80% всех пользователей Tower трудятся на Yosemite – что подчеркивает необходимость адаптирования Tower как возможно больше под последнюю версию OS X.

Главные трансформации в дизайне Yosemite

Перед тем как начать обновление дизайна приложения Mac OS X для Yosemite принципиально важно осознать новые парадигмы дизайна, представленные Apple. За последние несколько лет компания Apple создала три главные предположения интерфейса пользователя: Mac OS Panther, Leopard и Lion. Yosemite все еще отмечает второй сдвиг в парадигмах.

Apple, на данный момент подчеркивает простоту, последовательность и глубину, предоставляя пользователям работу, сосредоточенную на контенте.

Новый системный шрифт

В первый раз с момента выпуска OS X, Apple поменял системный шрифт – мало декоративный Lucida Grande на более простой и достаточно геометрический Helvetica Neue с орнаментом и меньшими вариациями.Дизайн приложений на yosemite Было большое количество обсуждений и статей о том, хорошая ли это мысль поменять системный шрифт на Helvetica Neue. Особенно в маленьких размерах на non-retina дисплеях Helvetica Neue имеет собственные минусы.

“Не обращая внимания на хорошую репутацию, Helvetica неимеетвозможности делать все, что требуется. Данный шрифт прекрасно смотрится в громадных размерах, но может имеет минусы в маленьких.” Тобиас-Фререр Джонс

Что бы вы ни думали о Helvetica Neue, смена шрифта по крайней мере, подчеркивает, как важен Apple в вопросе о том, дабы стать “несложнее” и более последовательным на всех собственных платформах и в самой совокупности. Helvetica Neue уже прокрался до Yosemite в такие приложения, как Notes, ITunes, и Iphoto, исходя из этого применение его в качестве нового системного шрифта по умолчанию лишь следствие.

Упрощенные и согласованные значки приложений

Значки приложения Yosemite

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

Реалистичные иконки употребляются Preview, Mail, Photo Booth и другими. Новый реалистичный вид иконок упрощен и имеет те же источники света, передачу и перспективу.

Помимо этого, угол 9° употребляется для изображения наклонных значков приложений, таких как Контакты либо Календарь. Из-за чего наклонный угол спросите вы? Apple применяет наклон значка, дабы легко отличать иконки приложений от документов либо папок.

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

“Поразмыслите о собственном значке приложения, как о вашей визитной карточке, и сделайте так, дабы пользователь был впечатлен.” Apple Human Interface Design Guidelines

Изображение объекта настоящим оказывает помощь осознать виртуальную версию? Добавление реалистичности повышает удобство и понимание? Измените настоящее изображение, в случае если это оказывает помощь улучшить познание пользователя.

Apple призывает вас избавиться от всего, что не есть нужным и лишь додаёт визуальный беспорядок.

Прозрачные и броские элементы интерфейса пользователя

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

Пример прозрачности

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

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

Более броские и плоские элементы интерфейса пользователя

Более легкий интерфейс Yosemite

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

Перенос Tower на Yosemite

Наиболее значимым приоритетом Tower всегда было родное и интегрированное чувство к Mac OS X. Мы делаем это в соответствии с рекомендациями компании Apple о UX/UI моделях и технических исполнений. Хороший побочный эффект этого подхода содержится в возможности производить довольно стремительные обновления, в то время, когда новые версии совокупности будут выпущены.

Иконка приложения

Значки приложений Tower 2

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

Все подробности, каковые не содействуют лучшему пониманию значка приложения провалились сквозь землю. Мы сейчас кроме этого используем светлую установку, которая напоминает то, что Apple применяет для собственных новых иконок – светло-голубые и оранжевые источники света были добавлены с противоположных сторон. Возможность настроена с целью сделать вид значка более подходящим вторым (“реалистичным”) иконкам.

Обновление дизайна области окна было тяжёлым. По окончании выхода различных предположений внутренней судьбе за стеклом мы решили избавиться от всего, в значка Tower, поскольку это лишь вело к визуальным помехам, не содействуя лучшему пониманию значка приложения. Особенно в маленьких размерах, где пользователи будут видеть значок приложения как правило, с лишними подробностями (к примеру, люди за стеклом), каковые привели только к нечеткости.

Иконка приложения в различной среде

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

навигация и Панель инструментов

Новая панель инструментов Tower

Ветхая панель инструментов Tower

Панель инструментов Tower содержит элементы интерфейса пользователя по умолчанию, так что базисный дизайн продиктован совокупностью по умолчанию. Мы приспособили вид новой кнопки и внесли пара трансформаций во “второстепенные” значки кнопок.

Так как мы следуем советы Apple и используем шаблоны изображений для UI с Tower 2.0, обновление панели инструментов было довольно легким. Шаблонные изображения лишь снабжают форму изображения как векторный формат (PDF).

“Шаблон изображений – обтекаемое, монохромное изображение, которое может купить разные зрительные эффекты, такие как яркость и выбор подсветки. [] Вы желаете, дабы ваш шаблон изображения был как возможно чистым (другими словами, с небольшой прозрачностью либо альфа значениями), так что это будет прекрасно смотреться, в то время, когда совокупность использует эффекты, такие как неактивный вид.” Apple Human Interface Design Guidelines

Панель инструментов Tower: первичные и вторичные иконки

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

Новые иконки панели навигации отказались от тисненного визуального стиля (Mavericks) и оснащены вместо этого легким видом – выделенные контуры как господствующие в боковой панели. Так как места в данной области мало, кнопки не трудятся в этом месте, и добавление их кроме этого будет означать утрату дополнительного необходимых формы полей и пространства кнопки. Помимо этого, кнопки кроме этого не имеют смысла с неспециализированной точки зрения интерфейса пользователя для маленькой навигации элементов панели инструментов.

Боковая панель

Новая и ветхая боковая панель Tower

Все иконки боковой панели обновлены и отражают обновленный стиль значков боковой панели Yosemite.

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

Так мы надеемся на дополнительные “зрительные эффекты”, каковые используются AppKit, светло синий цвета, тонирующего иконку боковой панели, как продемонстрировано на OS X Mavericks нет. Иконки боковой панели на данный момент имеют полупрозрачный тёмный и прозрачный вид.

Цвета

Цвета Tower UI

В целом, OS X 10.10 характерна броская цветовая палитра и менее интенсивные градиенты. Это изменение возможно видеть в элементах неспециализированного интерфейса пользователя и применение более легких серых тонов, но это делается еще более очевидным, в случае если посмотреть на цветные элементы интерфейса пользователя, таких как цвета лейбла, цвет иконки новой папки по умолчанию, независимые панели инструментов либо цвета по умолчанию для выделенных элементов.

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

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

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

Стили кнопок

Новые стили кнопок

Ветхие стили кнопок

До Yosemite, стили кнопок, предоставляемые совокупностью были очень ограничены, исходя из этого мы были вынуждены создать личные кнопки. Со временем, кнопки, применяемые в разных областях Tower UI стали причиной несоответствиям.

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

Так, все кнопки сейчас выглядят последовательно и соответствуют совокупности.

Empty States and Progress States

Новые иконки empty view

Ветхие иконки empty view

Мы предприняли тот же базисный подход, как мы делали для иконок боковой панели, в следствии чего взяли более броские (и яркие) цвета заливки, легко подчеркивая контур иконки.

Preferences Icons

Новые Tower Preferences Icons

Ветхие Tower Preferences Icons

Все preference icons были обновлены в соответствии с отечественной новой эстетикой: броские цвета и менее несущественные подробности, каковые не приводят к большему восприятию. Мы кроме этого очень мало поменяли отечественный подход к retina иконкам. Новые иконки поддерживают узкие контурные штрихи, каковые придают им более яркий и более “элегантный” вид на retina дисплеях.

Несколько слов о совместимости приложения

Новый OS X UI приносит много трансформаций во восприятие приложения и внешний вид. Не смотря на то, что темпы адаптирования Yosemite высоки, и более ветхие предположения OS X идут на спад, все еще нужно разглядеть вид приложения на ветхих предположениях совокупности.

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

Данный же принцип относится и к изображению: кое-какие иконки зависят от совокупности и, так, смогут смотреться неуместно на ветхих совокупностях. К примеру, в Tower мы используем несколько значков, каковые включают значок папки совокупности в тот либо другой путь. Так как Yosemite применяет совсем другой значок папки, мы уверены, что иконки, каковые содержат папку, сохраняют ветхий вид на ветхих совокупностях.

В некоторых случаях сложно решить, направляться ли разглядывать определенную эстетику совокупности намерено либо “йосемитизированный” вид на всю совокупность. Нацеленность на конкретные предположения ОС может раздуть приложение и усложнить управление эстетикой вашего приложения, так что вам необходимо пойти на компромисс в какой-то момент.

Если вы сомневаетесь, вот что говорит Apple: “Создайте что-то классное на Yosemite, воспользуйтесь новым опытом не и придерживайтесь совокупности. В том месте, где это быть может, придерживайтесь стандартных элементов управления, системных цветов, системных шрифтов и эталонных изображений. Освежите интерфейс, и при сомнений, содействуйте новому визуальному стилю.”

Вывод

Мы сохраняем надежду, что эта статья дала вам хороший обзор эстетических трансформаций, каковые несет Yosemite и что это может означать для вашего приложения. До тех пор пока мы говорим конкретно о Tower, мы думаем, что трансформации, каковые мы охватываем, применимы к практически всем приложений, переходящих на адаптированный стиль UI для OS X Yosemite.

Обновите Tower из приложения либо загрузите новейший Tower 2 на отечественном сайте.

Как побочный продукт обновления Tower направляться, мы создали мелкий контрольный перечень Yosemitization. Он содержит рекомендации о том, что необходимо не забывать при разработке приложения для Mac OS 10.10.

Высоких конверсий!

Случайные статьи:

Дизайн мобильного приложения. Adobe XD


Подборка похожих статей:

riasevastopol

More Posts