Вот базовые гайдлайны, которым все должны следовать при создании каждого нового клона из нашего скетч-темплейта Connect AppBook:
Его версия, пусть не такая по счету, как у системы Sketch, выросла до фазы привлечения внешних специалистов. Также готов наш конвейер по изготовлению приложений, и мы можем освоить цикл на 100-150 приложений в сутки сейчас.
Темплейт рожден годами поиска, потому так важно понимать основные принципы, которые обеспечат простой способ создания множества миров для всех:
-
вся графика и анимация принимается только в кривых (вектор). исключение составляют элементы растровой статики, видео и анимации для секции Welcome (onboarding). в остальном, работа по типосетке ниже:
-
каждое приложение системы цифровых миров Connect Technologies имеет базовый набор идентики и цветов.
Базовые элементы идентики:
-
logo-sq [1x1] - цвето-графический элемент лого, вписанный в квадрат
-
logo-sq-wt [1x1] - версия logo-sq для использования на темном фоне (чаще всего белый overlay outlines)
-
logo-text [3x1] - тексто-графический элемент текстового написания лого или торговой марки, вписанный в горизонтальный прямоугольник 3х1
-
logo-text-wt [3x1] - версия logo-text для темных фонов
-
logo-horiz - сборный элемент [4x1], собираемый автоматически из logo-sq и logo-text, чаще всего используется в хедерах приложения (вешается шириной на 80% вверх экрана без верхнего паддинга).
Цвета:
-
primary-bg-gradient - переливной цвет основного (чаще всего светлого) фона экранов
-
secondary-bg-gradient - переливной цвет вторичного (чаще всего более насыщенного) фона экранов
-
active button bg - переливной либо сплошной фон активных кнопок интерфейса
-
inactive button bg - фот неактивных кнопок и элементов
-
active nav icon bg - переливной или сплошной цвет активных иконок навигации. чаще всего повторяет active button bg
-
active profiler icon bg - подложка выбранной иконки профиля
Иконки:
- ios-app-icon - иконка для Apple по гайдлайнам https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
- app-icon-round - иконка приложения для круглоикончатых устройств (часто тех, что обрезают под rounded 99px)
- app-button - то, что мы рисуем на главной кнопке навигации в приложении, принимается анимация
- app-button - подложка этой кнопки, часто градиент
Системные кастомизации интерфейса:
-
profiler1...12 icons -- иконки профильных групп. один из важнейших элементов интерфейса. каждый пользователь выберет свой и нажмет по нему. важно, чтобы каждый такой элемент был приятен взгляду, желательно цветной и понятный сразу.
-
product/object/place -- иконки и аватарки продуктов на рынке и объектов на карте, если кастомизация типов продуктов или типов объектов (кастомный вид деательности)
Маркетинговые кастомизации интерфейса:
-
welcome1...12 screens -- медиа и текст. на этих экранах показаны преимущества приложения при запуске в первый раз. экранов может быть до 12, но рекомендуется 4. логично перечислить преимущества функций и проблемы, которые решает проект. медиа может быть jpg, png, svg для статики, может быть svg-video, mp4, h264 но всегда отображается на 80% ширины в верхних 50% очередного welcome-экрана, а текст под ними как правило, описывает преимущества, показанные на медиа и содержит кнопку Next внизу.
-
splash - стартовый (loader) экран. типово содержит отцентрованный logo-horiz на primary-bg-gradient цвете либо logo-horiz-wt на secondary-bg-gradient. однако же это лишь рекомендация. творчески сделанный сплеш повышает доверие к приложению. наш сплеш не имеет элементов интерфейса, лоадеров, брендинга или фраз, и может содержать любую заложенную 1.5-секундную анимацию или видео, тексты, цвета и эффекты, пока грузятся основные модули. статья по созданию сплешей: https://uxdesign.cc/building-the-perfect-splash-screen-46e080395f06
2.1 будут отдельные рекомендации и отдельный скетч-темплейт для публикации в AppStore и Play market (app-preview экраны для устройств).
- общие рекомендации по интерфейсу и иконкам:
- идентичность. иконка и ее цвета должны быть максимально похожи на компанию или проект, который юзер ищет в app store - идентифицировать себя. то же самое касается скринов app preview
- вкус. используйте https://coolors.co/app если нужно придумать три градиента или свериться
- цвет. будьте яркими и улыбайтесь чаще.