Проектиране на красиви мобилни приложения от нулата

Започнах да уча графичен дизайн, когато бях на 13 години. Научих се да проектирам уебсайтове от онлайн курсове и си играех с Photoshop и Affinity Designer по цял ден. Този опит ме научи как да мисля като дизайнер.

Вече почти година проектирам и разработвам приложения. Участвах в програма в MIT, където работех с екип за разработване на Universeaty. Преди два месеца започнах да работя върху ново приложение, Crypto Price Tracker, което стартирах наскоро на 28 януари.

В тази публикация ще споделя стъпка по стъпка процеса на проектиране, който следвам, заедно с примери за приложението, върху което съм работил. Това трябва да помогне на всеки, който иска да научи или подобри своите умения за дигитален дизайн. Дизайнът не е всичко да знаете как да използвате софтуер за проектиране и тази публикация няма да ви научи как да го използвате. Има стотици уроци с добро качество онлайн, които можете да научите. Дизайнът е също така да разберете продукта си отвътре, неговите характеристики и функционалност и да проектирате, като същевременно имате предвид крайния потребител. На това е предназначена тази публикация.

Процес на проектиране :

  1. Създайте диаграма на потребителския поток за всеки екран.
  2. Създавайте / рисувайте телени рамки.
  3. Изберете дизайнерски модели и цветови палитри.
  4. Създавайте макети.
  5. Създайте анимиран прототип на приложение и помолете хората да го тестват и да предоставят обратна връзка.
  6. Дайте последни прозорци на макетите, за да са готови всички крайни екрани за започване на кодирането.

Да започваме!

Диаграма на потребителския поток

Първата стъпка е да разберете функциите, които искате в приложението си. След като получите идеите си, създайте диаграма на потребителския поток. Диаграмата на потребителския поток е представяне на много високо ниво на пътуването на потребителя през вашето приложение / уебсайт.

Обикновено диаграмата на потребителския поток се състои от 3 вида фигури.

  • Правоъгълниците се използват за представяне на екрани.
  • Диамантите се използват за представяне на решения (Например, докосване на бутона за вход, плъзгане наляво, увеличаване).
  • Стрелките свързват екрани и решения заедно.

Диаграмите на потребителския поток са изключително полезни, защото дават добра логическа представа за това как ще функционира приложението.

Ето диаграма на потребителския поток, която нарисувах, когато започнах да работя върху дизайна на приложението си.

Тел рамки

След като попълните диаграмите на потребителския поток за всеки екран и проектирате потребителски пътувания, ще започнете да работите по рамковото изграждане на всички екрани. Wireframes са по същество представления с ниска точност на това как ще изглежда вашето приложение. По същество скица или контур на това къде ще отидат изображения, етикети, бутони и неща, с тяхното оформление и позициониране. Груба скица как ще работи приложението ви.

Използвам отпечатани шаблони от шаблони за потребителски интерфейс за рисуване на телените рамки. Спестява време и дава хубаво платно за рисуване и правене на бележки.

Ето пример за каркасна рамка.

След като скицирате жичните рамки, можете да използвате приложение, наречено Pop, и да направите снимка на всичките си чертежи с помощта на приложението и да имате прототип, като свържете всички екрани чрез бутони.

Модели за дизайн и цветови палитри

Това е любимата ми част. Това е като пазаруване на витрини. Много дизайнерски модели и цветови палитри за избор. Занимавам се с бране на тези, които харесвам, и експериментирам с тях.

Най-добрите платформи за намиране на дизайнерски модели са Mobile Patterns и Pttrns. И за да намерите добри цветови палитри, отидете на Color Hunt.

Макети

Това е, когато най-накрая преминете към използването на софтуер за проектиране. Макет в дизайнерски смисъл е представяне на вашия дизайн с висока точност. Почти все едно сте влезли в това приложение в бъдеще и сте направили няколко скрийншота от него. Трябва да изглежда реалистично и почти като истинското.

Има софтуер за проектиране и инструменти за създаване на макети. Използвам Affinity дизайнер. Най-често използваният инструмент за дизайн на iOS е Sketch.

Ето пример за някои от ранните дизайни на приложението ми.

Експериментирах повече с различни цветови палитри.

Споделих първоначалните макети с моите приятели за тяхната обратна връзка. Изглежда, че много хора харесват златния градиент и черната схема.

Бъдете готови да вземете обратна връзка и експериментирайте с нови предложения! Ще откриете, че невероятни идеи идват от вашите потребители, когато говорите с тях, а не когато неистово превъртате през Dribbble или Behance.

Затова преработих макета и премахнах фоновите графики, тъй като генерирането им беше технически отнемащ време процес и те намалиха четливостта. Ето как изглеждаше преработеният макет.

Бях доволен от цветовата схема, иконите в лентата с раздели и цялостното оформление. Продължих напред и проектирах останалите екрани, следвайки същите дизайнерски насоки. Това беше дълъг, но със сигурност забавен процес!

След като всичките ми екрани бяха готови, събрах прототип в Adobe XD и помолих няколко приятели да експериментират и да дадат обратна връзка.

След последни щрихи и подобни, така изглежда моят окончателен дизайн.

След като всички екрани бяха завършени, ги импортирах в Xcode и започнах да кодирам приложението.

Това е! Надявам се тази публикация да ви помогне да започнете с дизайна на приложенията или да станете по-добър дизайнер. И ако харесвате приложението ми, можете да го изтеглите от тук.

Завършвам публикацията с един от любимите ми цитати за дизайна.

„Дизайнът не е само как изглежда и как се чувства. Дизайнът е как работи ”

-Стийв Джобс