Дизайн на начален екран с Sketch – стъпка по стъпка ръководство

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

Най-важни знания

• Използване на Sketch за създаване на оформления на начален екран
• Важни принципи на дизайна за привлекателни потребителски интерфейси
• Използване на цветови кодове и символи за опростяване на процеса на проектиране

Ръководство стъпка по стъпка

За да започнете с вашия дизайн, отворете Sketch и създайте нов документ за вашия начален екран.

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

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

Щракнете върху работното пространство и наименувайте платното като „Цвят на задния фон на началния екран“. За да се уверите, че вашият фон след това няма да е прозрачен, задайте прост цвят на фона, най-напред бял.

В следващата стъпка ще се фокусирате върху създаването на елемент за курс. За целта щракнете върху площта и започнете да проектирате карта за курса. Ще създадете картата с ясно, просто оформление, следвайки принципите на плоския дизайн.

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

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

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

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

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

За да направите картите си визуално привлекателни, добавете сянка. Уверете се, че тя е дискретна, за да не прелива дизайна. Лека сянка ще накара елементите да изпъкват и да се вписват по-добре в общия вид.

Използвайте закръглени ъгли за картите си, за да увеличите визуалната привлекателност. Радиус на ъглите от 8 предлага модерен, чист вид, който отговаря на указанията за дизайн на Apple.

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

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

Резюме - Проектирайте привлекателен начален екран с Sketch

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