За успешното създаване на интерфейс, трябва да разделите работата на няколко етапа:
1. Събиране на данни
Направете статистическо проучване на текущия интерфейс на мобилното приложение или
уебсайта и анализирайте устройствата на целевата аудитория. По този начин ще разберете за кого проектирате интерфейса и какви ограничения трябва да има. Например размер на екрана, интерактивност и т.н.
2. Списък със задачи
Вече знаете как работи интерфейсът, така че е време да създадете сценарии, в рамките на
които хората ще изпълняват задачи в даден уебсайт. Така например, ако посетител иска да
актуализира своя аватар в профила си, той трябва да:
- отвори портала;
- да влезе в системата;
- да отиде в профила си;
- да кликне върху аватара;
- да избере файл;
- потвърждаване/промяна; изрязване на изображението;
- запазване.
Сценариите, т.е. подробните стъпки за всяка задача, позволяват по-лесно да се види, че някои пътища са твърде дълги и трябва да бъдат съкратени.
3. Структура на интерфейса на новия уебсайт
Предварително създаденият списък със стъпки се явява основа за структурата на потребителския интерфейс. Използвате го, за да определите колко екрана са необходими, какво е тяхното обобщение и място в структурата.
4. Създаване на прототипи
Обикновено се правят два схематични прототипа – чернови и финален.
Това правило не се прилага за малки интерфейси на опростени мобилни приложения и малки
уебсайтове.
Черновият прототип включва свързани схематични изображения на екраните. Благодарение на този прототип е по-лесно да се определи размера на портала, каква информация ще съдържа всеки екран и колко кликвания ще трябва да направи човек, за да стигне до желаната страница.
Във финалната версия оформлението на страницата също се свързва, но бутоните, текстовете, квадратчетата за отметка, формите и т.н. вече са изобразени.
Прототипите все още нямат дизайн, но определят функционалността и оформлението на
елементите. Цветовите схеми, изображенията и иконите се планират на етапа на проектиране.
Все още е невъзможно да се предвиди как всички елементи ще изглеждат заедно и как ще си
подхождат.
ПРОЧЕТЕТЕ ОЩЕ... Тайните за създаване на уебсайт с минимален бюджет Какво представлява SERP и как работи? SEO-копирайтинг: как да стигнете до върха в търсачките
5. Избор на стил
За да отдадете предпочитание на определен стил на интерфейса на уебсайта, подгответе няколко
набора от изображения. Те са представени чрез уеб страници, илюстрации, бутони, комбинации от шрифтове.
6. Концепция за дизайна на ресурса
Тук се създава цялостната представа за дизайна и външния вид на портала. На петата стъпка е
зададена само насоката и сега всички избрани елементи се комбинират със съдържанието на
интерфейса.
Концепцията за дизайна може да бъде с различен обем, но обикновено се свежда до три екрана, за да не се губи твърде много време. Една страница се изобразява така, както ще бъде видяна от потребители с различни устройства. Ако са планирани екранни анимации, те също се показват като част от концепцията.
7. Проектиране на екраните
Когато концепцията за дизайн е готова, се преминава към останалите етапи. Те включват
окончателното проектиране на външния вид на сайта. На този етап, можете да разберете дали
размерът на шрифта и междуредието изглежда добре в сравнение с дебелината на иконите,
бутоните, полета и другите елементи от екрана.
Готовите екрани се сглобяват в интерактивен прототип. Той ще създаде възможно най-близък до интерфейса на сайта опит, без да се изисква помощ от разработчика.
8. Анимация
Често анимациите се добавят по време на подготовката на концепцията за дизайна и се
използват при проектирането на всички екрани.
На този етап се създават видеоклипове, показващи анимацията на интерфейса – те ще бъдат
използвани като ръководство от разработчиците в бъдеще.
9. Събиране на материали за разработчиците
Макетите на потребителския интерфейс, прототипите и видеоклиповете вече са готови.
Разработчиците трябва също така да осигурят спрайтове, шрифт с всички икони, UI Kit с
повтарящи се елементи и техните състояния
