• Основен / Съвети

Дизайн на мобилни приложения: Ръководство за начинаещи

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

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

Какво е дизайн на мобилни приложения?

Казано с много общи термини, дизайнерите на приложения са натоварени да направят приложението да изглежда добре, докато разработчиците го карат да работи правилно. Дизайнът на мобилното приложение обхваща както потребителския интерфейс (UI), така и потребителския опит (UX). Дизайнерите са отговорни за цялостния стил на приложението, включително неща като цветовата схема, избора на шрифт и видовете бутони и джаджи, които потребителят ще използва. И така, откъде да започнете? В началото.

За коя платформа трябва да проектирам?

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

Ако използвате телефон с Android, проектирайте за Android. Ако използвате устройство с iOS, започнете там. Като алтернатива можете да решите дизайна и за двете, но най-добре е да не отхапвате повече, отколкото можете да дъвчете - поне не в началото.

Какви инструменти трябва да използвам?

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

Популярните опции за дизайн на приложения включват Adobe Photoshop, Adobe XD и Sketch. Има много, много повече, но това са големите удари в бранша. Регистрирайте се за Adobe Creative Cloud тук .

Може би си мислите, че Photoshop е най-добрият вариант за дизайн на мобилни приложения - особено ако сте го използвали за други видове дизайнерски работи - обаче, когато става въпрос за проектиране на мобилни приложения, по-добре сте с Adobe XD или Sketch. Въпреки това, Sketch се счита за фактически стандарт тук, въпреки че Adobe XD поставя в силна конкуренция, като наскоро добавени дизайнерски системи .

Една от най-големите причини за използването на Adobe XD или Sketch върху нещо като Photoshop е, че тези два инструмента са създадени с оглед на проектирането и прототипирането. Те помагат за рационализиране на работните процеси в дизайна и са насочени към дизайнери на UI и UX, докато Photoshop е по-скоро за манипулиране на изображения.

Важна забележка тук: Ако планирате разработване или поддръжка на различни платформи, Adobe XD е категоричният победител тук, тъй като Sketch е достъпен само за macOS.

Насоки за проектиране на ОС

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

• Целево ориентиран дизайн
• Опростете (по-малко е повече)
• Поддържайте потока
• Четливостта е ключова
• Уважавайте платформата

Последното, „уважавайте платформата“, е по-важно, отколкото може би си мислите. Когато потребителите изтеглят и инсталират приложение на своето устройство, те очакват то да се държи по начин, който им е познат и интуитивен. Те основават мненията си на това, което знаят, така че когато дадено приложение противоречи на 90% от специфичните за OS правила за дизайн, потребителите вероятно ще го изтрият.

Не само трябва да вземете предвид различните навигационни модели, които iOS и Android имат, но трябва да помислите и за бутони, избор на шрифт и разположение на обекти на потребителския интерфейс - всички те варират за всяка платформа.

Добрата новина е, че не е нужно да гадаете кое е приемливо. Както Apple, така и Android имат набор от насоки за дизайн, които можете да прегледате, преди да започнете (и докато активно проектирате):

• Насоки за човешки интерфейс на iOS
• Указания за дизайн на Android

Wireframes и поток на приложения

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

Въпреки че има много посветени каркасни инструменти , не е необичайно дизайнерите просто да използват химикалка и хартия. Ако обаче търсите нещо по-високотехнологично и съвместно (което е особено важно, когато работите с отдалечен екип), помислете за създаването на вашите рамки в Sketch или Adobe XD. Ползата от използването на тези инструменти за каркасно кадриране е, че можете да превърнете вашите нискочестотни рамки във визуализации с висока точност с относителна лекота.

Забележка: С Adobe XD , можете дори да си вземете няколко безплатни комплекта, за да започнете.

Мокети и прототипи

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

Тази стъпка обикновено е по-лесна, ако сте използвали един и същ инструмент за проектиране, за да създадете както вашите телени рамки, така и дизайна на вашето мобилно приложение. Ако не го направите, може да ви отнеме малко повече време, за да попълните инструмента си за проектиране, но след като го направите, вече сте на път. Много инструменти, включително UXPin (който се интегрира със Sketch), включват начини за анотиране на вашите каркаси с подробна информация, изисквана от разработчиците, за да премахнете необходимостта от всякакви предположения.

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

Научете повече за тази стъпка в нашата статия: 4 различни начина за създаване на макети за уебсайтове и приложения .

Предаване на разработка

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

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

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

Прочетете още:

• Как да създадете приложение с Vue.js
• Запознайте се с включването на мобилни приложения
• Най-добрите приставки за скица, които да опитате