Ти си изправен пред предизвикателството да създадеш привлекателно Prototyping за Mobility-App. Това не е само дизайн; става въпрос за ефективно оформяне на потребителското преживяване от самото начало, така че да помогне на потребителя да навигира интуитивно в приложението. В този туториал ще те водим стъпка по стъпка през процеса на създаване на прототип в Sketch. Нека да започнем това вълнуващо пътуване в света на дизайна!
Най-важни знания
- Prototyping е решаваща стъпка в разработката на приложения.
- В Sketch можеш да започнеш с прости форми и дизайни.
- Ясната структура и ръководство за потребителя са задължителни за успеха на твоята app.
Стъпка по стъпка ръководство
Започни, като създадеш основната структура на твоята app в Sketch. Можеш да използваш инструмента за четка, за да нарисуваш първите дизайн елементи. Просто отиди на инструмента за четка или натисни клавиша „P“, за да го избереш.
Създай правоъгълник, който да представя екрана на твоята app. Натисни и задръж клавиша „Alt“, докато с мишката рисуваш правоъгълника. Това ще запази правоъгълника пропорционален. То вече изглежда доста добре.
Сега е време да проектираш първата страница на приложението. Започни с долната лента с табове. Отново използвай инструмента за четка и нарисувай права линия, като задържиш клавиша Shift, за да се увериш, че линия е права.
След като си проектирал лентата с табове, добави три икони, които представят основните функции на приложението. С клавиша ALT можеш лесно да дублираш фигурите, докато ги премествне на подходящото място.
Сега да се заемем с горната навигационна лента. Отново задръж клавиша ALT, докато рисуваш още един правоъгълен участък за навигационната лента.
Чат балоните са следващата част от твоято приложение, която искаме да проектираме. Използвай инструмента за четка, за да нарисуваш чат балон. Този ще се показва на потребителя веднага след приветствието. Добави кратък текст, който да се обръща до потребителя, като например: „Здрасти и добре дошъл в Mobility App!“
За да се увериш, че всичко изглежда привлекателно, можеш да копираш и коригираш балоните. Избери балоните и ги премести надолу с клавиша ALT, за да добавиш още един текст за поздрав, като "Започни с първата си Mobility сесия".
Следващата стъпка е вмъкването на бутона за видео, с който потребителите могат да възпроизведат уроците си. Наколни кръгъл бутон с инструмента за четка и го комбинирай с триъгълник, за да направиш представянето и функцията ясни.
Сега копирай всички важни UI елементи - като горните и долните навигационни ленти - на следващата страница, за да осигуриш последователност в дизайна. Можеш просто да направиш скрийншот с клавиша ALT, за да дублираш елементите на следващата страница.
На новия екран, който си създал, проектирай опциите за курсове. Тук трябва да създадеш прост преглед на наличните курсове, които потребителят може да избере.
В профилния изглед можеш да създадеш място за профилна снимка, име на потребителя и брой завършени учебни часове. Тук е важно информацията да е представена ясно и разбираемо.
Завършвайки дизайна на избора на курсове и уроци, създай преглед за уроците и добави бутон за затваряне, за да може потребителят да затвори избора по всяко време.
С това основният прототип за твоята Mobility App е завършен. Сега имаш привлекателен дизайн, който ясно структурира ръководството за потребителя и едновременно с това помага на теб като дизайнер да визуализираш ясно визията на приложението.
Обобщение – Prototyping на Mobility App в Sketch
По време на този туториал ти научи стъпка по стъпка как да прототипираш Mobility App в Sketch. От първата идея до последните дизайнерски елементи, ти успя да разшириш знанията си и да създадеш полезен инструмент за по-нататъшната разработка на твоето приложение.
Често задавани въпроси
Как да започна с дизайна в Sketch?Избери инструмента за четка (P) и започни със създаването на първите елементи.
Как мога да дублирам елементи ефективно?Дръж натиснат клавиша ALT, докато премествате елемента с мишката.
Какво да правя, ако не съм доволен от дизайна?Можеш по всяко време да промениш или преработиш съществуващите елементи, за да постигнеш желания резултат.
Как да се уверя, че ръководството на потребителя е ясно?Увери се, че всички функции са логично подредени и че потребителят може интуитивно да навигира.
Мога ли да проектирам и за мобилни устройства в Sketch?Да, можеш да настроиш вида и размера на елементите съобразно размера на екрана на мобилни устройства.
