Александр Комаров о мобильном дизайне

35
Принципы дизайна для мобильных устройств на примере Айфона Александр Комаров, Москва, 2009

description

Дизайнер Александр Комаров рассказывает о том, как сделать мобильные интерфейсы понятными, приятными и удобными и приводит примеры хороших и плохих приложений для iPhone.

Transcript of Александр Комаров о мобильном дизайне

Page 1: Александр Комаров о мобильном дизайне

Принципы дизайна для мобильных устройств на примере АйфонаАлександр Комаров, Москва, 2009

Page 2: Александр Комаров о мобильном дизайне

Сегодня – только о самом важном

Как угнаться за новыми технологиями?

Как сделать хороший мобильный интерфейс?

Какие ограничения у мобильных пользователей и как их учесть?

Примеры хорошего и плохого дизайна приложений для Айфона

Page 3: Александр Комаров о мобильном дизайне

Cегодня вы не получите

Готовых решений (придется думать самим)

Подробной технической информации.

Супер-секретов (их нет ;-)

Советов по регистрации приложения в AppStore

Описания рабочего процесса (подходите позже, расскажу лично)

Page 4: Александр Комаров о мобильном дизайне

Как угнаться за новыми технологиями?

Частоты процессоров каждый год удваиваются.

Мозг человека не очень сильно изменился со времен Аристотеля.

Page 5: Александр Комаров о мобильном дизайне

Сфокусируйтесь на пользователях, а не на технологиях

Page 6: Александр Комаров о мобильном дизайне

Как сделать хороший мобильный интерфейс?

Забудьте на минутку об интерфейсах

Перестаньте ненадолго думать о мобильных телефонах...

Page 7: Александр Комаров о мобильном дизайне

Вспомните о пользователях.

Page 8: Александр Комаров о мобильном дизайне

1 2 30Придумать

само приложение

Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс? (по шагам)

Page 9: Александр Комаров о мобильном дизайне

0: Вы находитесь здесь

1 2 30Придумать

само приложение

Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

Page 10: Александр Комаров о мобильном дизайне

1: Ограничения пользователя

1 2 30Придумать

само приложение

Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

Page 11: Александр Комаров о мобильном дизайне

Пальцы это не курсор1: Ограничения пользователя

Page 12: Александр Комаров о мобильном дизайне

Сложно нажимать на маленькие объекты

iFitness App

1: Ограничения пользователя

Page 13: Александр Комаров о мобильном дизайне

Ограничения зрения1: Ограничения пользователя

Page 14: Александр Комаров о мобильном дизайне

Слишком мелкий текст1: Ограничения пользователя

Page 15: Александр Комаров о мобильном дизайне

Linked In -VS- Facebook1: Ограничения пользователя

Мелкий текст

Трудно нажимать на меню

Слишком много всего

Крупные иконки и надписи

Пальцем не промахнешься

Простые варианты выбора

Page 16: Александр Комаров о мобильном дизайне

Facebook 1.0 -VS- Facebook 3.01: Ограничения пользователя

Какой из вариантов вам кажется проще?

Page 17: Александр Комаров о мобильном дизайне

На мониторе все выглядит крупнее1: Ограничения пользователя

Page 18: Александр Комаров о мобильном дизайне

2: Контекст и окружение

1 2 3Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

0Придумать

само приложение

Page 19: Александр Комаров о мобильном дизайне

2: Контекст и окружение

Ваше приложение

Мобильное приложение — лишь капля в море

Page 20: Александр Комаров о мобильном дизайне

Пример приложения: диктофон2: Контекст и окружение

Page 21: Александр Комаров о мобильном дизайне

Apple -VS- iTalk

Кнопку записи трудно найти и нажать не попав в аварию

Кнопка записи занимающая пол-экрана очень удобная

2: Контекст и окружение

Page 22: Александр Комаров о мобильном дизайне

Apple -VS- iTalk

По маленькой красной полоске вверху трудно понять, что запись началась

После нажатия на кнопку записи весь интерфейс меняет цвет.

2: Контекст и окружение

Page 23: Александр Комаров о мобильном дизайне

Портирование приложений

Fish Tycoon на экране компьютера

Fish Tycoon на Айфоне

2: Контекст и окружение

Page 24: Александр Комаров о мобильном дизайне

Большой

Нельзя просто уменьшить десктопное приложение...

Микроскопический

2: Контекст и окружение

Page 25: Александр Комаров о мобильном дизайне

...Нужно в добавок убрать все лишнее...

Фотошоп на компьютере Фотошоп на айфоне

2: Контекст и окружение

Page 26: Александр Комаров о мобильном дизайне

...И оставить самое необходимое

Редактор видео на компьютере Редактор видео на айфоне

2: Контекст и окружение

Page 27: Александр Комаров о мобильном дизайне

2: Контекст и окружение

Нас окружают люди и у них тоже есть мобильники

Page 28: Александр Комаров о мобильном дизайне

Ping -VS- WhatsApp

Требуется придумать имя пользователя

Номер телефона в качестве идентефикатора пользователя

2: Контекст и окружение

Page 29: Александр Комаров о мобильном дизайне

2: Контекст и окружение

Новые технологии — новые способы общения

Page 30: Александр Комаров о мобильном дизайне

2: Контекст и окружение

Новые способы обмена данными

Mover

Page 31: Александр Комаров о мобильном дизайне

2: Контекст и окружение

Новые способы найти друзей

Loopt

Page 32: Александр Комаров о мобильном дизайне

3: Культурные различия

1 2 3Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

0Придумать

само приложение

Page 33: Александр Комаров о мобильном дизайне

3: Культурные различия

Дизайн должен учитывать культурные особенности

Page 34: Александр Комаров о мобильном дизайне

Спасибо!

1 2 3Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

0Придумать

само приложение

Page 35: Александр Комаров о мобильном дизайне

Меня зовут............Саша Комаров

Моя компания.......www.akomarov.com

[email protected]

Twitter (in English)...akomarov

ЖЖ (по-русски)....lopanism.livejournal.com

Визитки на столе вот тут