Научете основния дизайн на потребителския интерфейс за 5 минути

Ако имате основни познания за HTML и CSS и искате да създадете страхотно изглеждащи потребителски интерфейси в браузъра, не търсете повече! В тази статия ще подобрите уменията си за проектиране на потребителски интерфейс, като научите за следните седем основи:

  • бяло пространство
  • подравняване
  • контраст
  • мащаб
  • типография
  • цвят
  • визуална йерархия

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

Стартиране на курса: Научете основите на UI Design?

Смятаме, че всички разработчици от предния край трябва да имат основни умения за проектиране на потребителски интерфейс. И така в това? разбира се, @designcoursecom ви учи на това. Всичко това, без да използвате никакви инструменти за проектиране, само HTML и CSS.

RTs оценени? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba) 28 януари 2020 г.

Така че, ако тази статия ви оставя да искате повече, не забравяйте да проверите курса. Сега нека скочим в него!

Бяло пространство

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

U

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

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

Преди и след корекция на празното пространство

Подравняване

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

U

Както можете да видите от следващите изображения, първата страница с елементи в множество различни колони (слабо подравняване) е далеч по-малко привлекателна и четлива от втората, която има силно подравняване

Страница със слабо подравняванеСтраница със силно подравняване

Контраст

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

U

Както можете да видите от този пример, страниците с лош контраст са трудни за четене и елементите не се открояват.

Страница с лош контраст

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

Пример за добър контраст

За да ви помогне да постигнете правилния си контраст, WCAG (Указания за достъпност на уеб съдържание) предлага минимално съотношение на контраст (AA) от най-малко 4,5: 1 или 3: 1 за голям текст или подобрено съотношение на контраст (AAA) от 7 : 1 или 4,5: 1 за голям текст. Има набор от приставки или уебсайтове, за да проверите това.

Мащаб

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

U

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

Страница с лош мащабПример за добър мащаб

U

Типография

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

U

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

U

Ако следвате тези съвети, страницата ви ще изглежда толкова добре, колкото тази:

Пример за добра типография

И не объркващо и нечетливо, като това:

Страница с лоша типография

Цвят

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

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

U

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

Страница с лош избор на цвятДобро използване на цвета

U

Визуална йерархия

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

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

Страница с лоша визуална йерархияИзползване на типография и цвят за установяване на визуална йерархия

Увийте

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

Курсът по основи на UI Design

Ако искате да разгледате повече тези теми, моля, разгледайте безплатния курс за основи на UI Design в Scrimba. В него ще научите за основите много по-подробно.

Успех и щастливо кодиране :)