Началото на един App-дизайнтрябва винаги да бъде обмислено и привлекателно. В това ръководство ще научиш как да преработиш Homeконтролера на твоята апликация, за да добавиш повече интерактивност и визуална привлекателност. Нека започваме!
Най-важни изводи
- Home контролерът може да бъде направен по-привлекателен чрез креативно използване на цветове и оформления.
- SVG файловете предлагат предимства в редактуемостта и остротата.
- Използването на градиенти и различни секции може значително да подобри потребителския опит.
Стъпка по стъпка ръководство
Първо, да хвърлим поглед на съществуващия Home контролер. Тук можеш да забележиш, че имаме различни секции: преглед на курсове, интерактивен чат и профил. Фокусът е върху Home Feed. В това ръководство ще адаптираме навигацията и ще оптимизираме дизайна.
Стъпка 1: Преработване на навигацията
За да подобрим дизайна на твоя Home контролер, започваме с преработка на навигационната лента. Първо ще премахнем съществуващите елементи, като навигацията.
Сега добавяме правоъгълник като нов заглавен елемент, който да има височина от 250 пиксела. Правоъгълникът не трябва да има рамка, за да осигури чист вид.
Стъпка 2: Добавяне на заглавие и текст
В следващата стъпка избери Document Color и добави нов текст. Постави текста на „Всички курсове“ и експериментирай с текстовите стилове. Препоръчителният размер за заглавието е 110 пиксела. Важно е заглавието да бъде пригодено към статус бара.
Стъпка 3: Настройки на фонове и цветове
За привлекателен дизайн е важно също да се използват градиенти. Върни се към своя правоъгълник и избери градиент, който е едновременно динамичен и хармоничен в общото оформление. Диагоналният градиент предполага повече дълбочина.
Стъпка 4: Добавяне на нова секция
Сега създаваме нова секция под заглавния елемент. Добави още един правоъгълник с височина 350 пиксела и премахни рамката. Тук можеш да избереш контрастен цвят, за да внесеш повече живот в апликацията.
Стъпка 5: Съдържание и икони
В тази секция можем да добавим бутон, за да предложим на потребителя повече съдържание, например видео. Добави текста „Силата на мобилността“ в H3 формат и го позиционирай на 16 пиксела отгоре.
Сега добавяме икона, която може да бъде или собственоръчно създадена, или импортирана от ресурси. В този случай е препоръчително да се използват SVG файлове, тъй като те са лесни за редактиране.
Стъпка 6: Създаване на секция Прок версия
Създай още една секция, която да предостави на потребителите възможност да закупят Pro версията на приложението. Добави нов правоъгълник с височина от 250 пиксела и разположи своя Call-to-Action „Вземи Pro версия“ там.
Тук е важно текстът да бъде накак притегателен. Можеш да използваш по-тъмен цвят, за да осигуриш добра четимост на текста.
Стъпка 7: Подредба чрез групи
Създай групи от различните секции, за да увеличиш подредеността. Това ще ти помогне да организираш различните области по-добре.
Стъпка 8: Последни корекции и синхронизация
В крайна сметка можеш да прегледаш отново всички елементи в секциите и при необходимост да коригираш разстоянията и позициите, за да осигуриш чисто оформление.
Резюме – Home редизайн: Твойят ефективен начин към привлекателен потребителски интерфейс
Ти вече научи как можеш да преработиш своя Home контролер, за да го направиш по-интерактивен и визуално привлекателен. Чрез креативното използване на градиенти, внедряване на SVG икони и структуриране в секции, значително подобри разположението на своята апликация.
Често задавани въпроси
Как мога да се уверя, че заглавието ми изглежда добре?Увери се, че използваш съответстващи размери на текста и цветови комбинации, които са последователни в целия дизайн.
Какви предимства имам от използването на SVG файлове?SVG файловете са скалируеми и запазват своята острота, независимо от нивото на увеличение.
Как мога да добавя градиенти в Sketch?Избери желан елемент, отиди на опции за запълване и избери „Градиент“ за създаване на привлекателни градиенти.
