Дизайн като инструмент за финализиране на приложение: стъпка по стъпка ръководство

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

Основни заключения

• Различни цветове и контрасти увеличават визуалната привлекателност.
• Ясната структура на оформление помага на потребителите да се ориентират по-добре.
• Единни размери на шрифта и дизайни насърчават приятно потребителско изживяване.

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

Добавяне на нов контролер

За да създадем новия екран, започваме с добавяне на нов контролер. Отиди в строителя на интерфейс, кликни на „Добавяне на контролер“ и го позиционирай, така че да се адаптира под съществуващите екрани.

Настройка на контролера

Присвой на новия си контролер името „Курс контролер“, за да улесниш бъдещото свързване. Увери се, че остарялото име „iPhone 8 copy“ е заменено с „Profile Controller“.

Настройка на фоновия цвят

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

Конфигуриране на статус бара

Настрой статус бара на „Тъмен“, за да бъде текстът четим на зеления фон. Провери позицията и се увери, че е перфектно адаптирана.

Създаване на етикет

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

Добавяне на допълнителни етикети

Добави друг етикет за заглавието на курса. Използвай размер на шрифта 40 пиксела и се увери, че е правилно позициониран - не трябва да има разстояние до предишния етикет.

Представяне на допълнителна информация

За да предоставиш на потребителите повече информация, добави трети етикет. Използвай по-малък шрифт от 17 пиксела, за да не изпъква текстът, докато не се наложи.

Създаване на таблица

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

Уроци като клетки

Създай клетка за първия урок с името „Основи Часть 1“. Внимай за правилното разстояние и подравняване.

Добавяне на разделител

За да се създаде ясно разграничение между уроците, добави разделител (тънка линия). Тази линия трябва да бъде позиционирана между клетките, за да се постигне визуално разграничение.

Създаване на бутон за отмяна

За да позволиш на потребителите да напуснат тази гледка, добави бутон за отмяна под формата на „X“. Увери се, че е добре видим в централната част на екрана.

Преглед на следващите стъпки

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

Резюме – Дизайн като инструмент за довършително приложение

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