Комментарии 14
НЛО прилетело и опубликовало эту надпись здесь
Полезный материал! Спасибо!
Спасибо за классный материал!
Если позволите, нубский вопрос:
Вопрос не праздный — я девелопер нескольких активных мобильных приложений, но весь интерфейс у меня на дефолтных контролах с чуть-чуть подредактированными цветами. Хотелось бы натянуть какой-то интересный дизайн, но не понимаю, с чего начать и что гуглить.
Если позволите, нубский вопрос:
создаём дизайн в 1x (или mdpi) и выгружаем в ZeplinЧто здесь подразумевается под «дизайном»? Физически что это, и как его создают, в общих словах?
Вопрос не праздный — я девелопер нескольких активных мобильных приложений, но весь интерфейс у меня на дефолтных контролах с чуть-чуть подредактированными цветами. Хотелось бы натянуть какой-то интересный дизайн, но не понимаю, с чего начать и что гуглить.
Спасибо) Передаём слово автору статьи:
Если простыми словами, то дизайнер, чтобы сделать дизайн, выполняет такие действия:
1. Открывает Фигму
2. Создаёт экран телефона 360 на 640 физических пикселей (в Фигме — это называется «Frame»)
3. Внутри этого экрана с помощью простых фигур, текста и стилей создаёт компоненты дизайна: бары, поля ввода, кнопки, переключатели
4. Как правило, дизайнер рисует несколько экранов, которые следуют друг за другом в логической последовательности (сценарии)
5. И также отрисовывает экраны с ошибками
Физически мы получаем экран телефона, в котором расставлены компоненты на определенных расстояниях друг от друга. Дизайнер словами и текстом дополняет экраны разъяснениями, как должны работать некоторые из компонентов. Например, как должен вести себя длинный текст, если он не помещается в заданную область.
С чего разработчику начать изучение дизайна?
Начать нужно с понимания, зачем нужен дизайн.
Дизайн нужен для двух вещей:
1. Сделать приложение удобнее
2. Сделать приложение красивее (и брендированное)
Чтобы выполнить первый пункт, нужно смотреть на приложение глазами пользователя. Собирать с них отзывы и дорабатывать приложение.
Чтобы выполнить второй, лучше позвать в команду дизайнера. Для создания красоты нужны знания и опыт.
Но если хочется попробовать дизайн самому, стоит освоить Фигму и посмотреть пару туториалов по основам веб-дизайна.
Если простыми словами, то дизайнер, чтобы сделать дизайн, выполняет такие действия:
1. Открывает Фигму
2. Создаёт экран телефона 360 на 640 физических пикселей (в Фигме — это называется «Frame»)
3. Внутри этого экрана с помощью простых фигур, текста и стилей создаёт компоненты дизайна: бары, поля ввода, кнопки, переключатели
4. Как правило, дизайнер рисует несколько экранов, которые следуют друг за другом в логической последовательности (сценарии)
5. И также отрисовывает экраны с ошибками
Физически мы получаем экран телефона, в котором расставлены компоненты на определенных расстояниях друг от друга. Дизайнер словами и текстом дополняет экраны разъяснениями, как должны работать некоторые из компонентов. Например, как должен вести себя длинный текст, если он не помещается в заданную область.
С чего разработчику начать изучение дизайна?
Начать нужно с понимания, зачем нужен дизайн.
Дизайн нужен для двух вещей:
1. Сделать приложение удобнее
2. Сделать приложение красивее (и брендированное)
Чтобы выполнить первый пункт, нужно смотреть на приложение глазами пользователя. Собирать с них отзывы и дорабатывать приложение.
Чтобы выполнить второй, лучше позвать в команду дизайнера. Для создания красоты нужны знания и опыт.
Но если хочется попробовать дизайн самому, стоит освоить Фигму и посмотреть пару туториалов по основам веб-дизайна.
Спасибо, познавательно. Становится весело, когда ты в данный момент пишешь Android приложение, в котором дизайнерами нарушены несколько перечисленных принципов Material Design. Кстати, девятый пункт, касательно Android, не совсем верный, мы можем без проблем хранить состояние соседних страниц, сделать это очень просто если в этом есть нужда.
Полезно и объемно, спасибо.
Отличный материал, к которому можно не раз обратиться в будущем, спасибо!
Есть ли перевод на английский? Это самый объемный материал из всех что я видел.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
32 отличия дизайна мобильного приложения под iOS и Android