Разстояния в потребителския интерфейс

Разстоянията в потребителския интерфейс (UI) са ключов аспект при създаването на уебсайтове, мобилни приложения и софтуерни приложения. Този важен елемент има съществено значение за употребимостта, визуалната хармония и общото изживяване на потребителите. Правилните разстояния са от съществено значение за създаването на приятни и функционални интерфейси, които предоставят положително потребителско изживяване.

В статията съм подбрал някои важни елемени за мобилни уеб интерфейси, нека ги разгледаме:

The status bar

Status bar-a е с височина от 44px, в тази зона не поставяйте нищо освен съдържанието от самата лента, което идва от съответната OS.

 

The navigation bar

Navigation bar-a обикновено отнема около 56px в зависимост от съдържанието, което използвате. В моя пример използвах 44px, за да създам целевата точка за докосване за моя "back button" за връщане назад и добавих 8px пространство между него и текста по-долу.

 

 

The text container

За заглавието използвах размер на шрифта 28px и оставих 8px пространство между заглавието и описанието. Целият текстов контейнер заема около 80px и се поставя на 96px от горната граница.

 

 

The input field

Оставих 24px пространство между текстовия контейнер и полето за въвеждане (Input field), за да има достатъчно място за дишане. Самото поле за въвеждане има размери 343px × 56px, което e около 16px "margins" от двете страни.

 

 

Text and button

Оставих 24px между текста за приемане и бутона, за да стане ясно, че текстът е свързан с бутона. Добавих също 16px пространство между бутона и клавиатурата.

 

 

iOS keyboard

За моята клавиатура, използвах предварително направен компонент от iOS UI Kit. В общността на Figma можете да откриете много iOS компоненти, готови за ползване. Единственото нещо, което трябва да запомните, е да го преоразмерите, за да пасне на вашата рамка и да оставите около 34 пиксела място за "home indicator-a".

 

 

Как да практикувате?

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