Бялото пространство е нещо повече от празното пространство между елементите на уебсайт. Всъщност това е мощен инструмент, който може да се използва интелигентно, за да осигури на потребителя почивка, да съсредоточи вниманието му и да улесни пътуването му.
Разберете как.
Има много различни подходи към уеб дизайна - от минимализъм до плосък дизайн, дизайн на материали и творческо използване на контраста. Друг изключително важен инструмент в уеб дизайна е бялото пространство.
Бялото пространство насърчава минимализма и баланса. Той може също така да подобри потребителското изживяване, например чрез създаване на абзаци и интервали за по -добра четливост.
Използването на бяло пространство обаче трябва да се извършва отговорно и правилно. Използвайте твърде малко от него и можете значително да повлияете на четимостта и използваемостта на уебсайт. Използвайте твърде много и рискувате да изпратите грешно съобщение.
В тази статия ще обсъдим какво е бяло пространство, неговите различни типове, защо трябва да го използвате и по -важното, ще ви покажем примери за добро изпълнение на бяло пространство.
Какво е бяло пространство?
Бялото пространство или отрицателното пространство е термин на дизайна, който използваме за обозначаване на празнотата около или в рамките на елементи от дизайна.
Ако погледнете началната страница на уебсайта на The New Yorker, ще видите примери за това навсякъде:
Големите пространства около логото на The New Yorker:
Еквидистантните пространства, които разделят всяка от навигационните връзки:
Печатът, създаден около всеки от блоковете със съдържание на началната страница:
Дори изборът на посока и проследяване на типографията показва полезността на бялото пространство в дизайна на уебсайтове.
Погледнете уебсайта за 2008 г. и ще видите как бялото пространство прави огромна разлика:
Има бяло пространство, въпреки че не е толкова стилно или стратегическо като това, което виждаме на уебсайта днес.
Откъде идва бялото пространство?
Терминът "бяло пространство" е донякъде подвеждащ. Докато някои примери за бяло пространство наистина са бели (като примера на The New Yorker по -горе), това обикновено не е така.
За да разберем защо бялото пространство е получило името си, трябва да разгледаме откъде идва.
Въпреки че няма никой, посочен при създаването на бяло пространство, можем да го припишем на следните части:
Първият е китайските художници и калиграфи на 20 -ти век. Празните пространства върху бялата оризова хартия, върху която са работили, не са третирани като прахосано пространство. Те намериха смисъл в празнотата и вярваха, че това допринася за цялостното разбиране на цялата картина.
Наричаха го „проектиране на бяло“.
Карол Дъглас обяснява стойността на бялото пространство в китайското изкуство:
„В китайското изкуство се очаква празното пространство да предаде информация поради самата си липса на образи. Размерите и очертанията на празни форми създават ритъм и единство. Твърдите форми придават смисъл на празнотата и обратно.
Бялото пространство по -късно се превърна в основен дизайн за печат благодарение на модернизма, който се фокусира върху минимализма, структурираните решетки и отрицателното пространство.
Така че също е вероятно да го наречем бяло пространство поради бялата хартия, върху която са писали модернистите, или белите платна, върху които са рисували.
Различните видове бяло пространство, които трябва да знаете
Обикновено разделяме бялото пространство на две различни категории:
Микро срещу бяло пространство. макрос
Микро и макро бялото пространство не само определят бялото пространство въз основа на размера.
Микробели пространства се отнасят до по -малките пространства и буфери, изградени около съдържание. Например, микро бяло пространство може да бъде намерено между:
- Писма
- Думите
- Параграфи
- Навигационни връзки
- Изображения или съдържание в мрежа
- Полетата на формуляра
Целта на микро бялото пространство е да подобри четимостта на вашето съдържание.
Що се отнася до макро пространството, то се отнася до по -големи площи, лишени от съдържание. Например, макро бяло пространство може да бъде намерено:
- В полето на уебсайт
- Около логото в заглавката
- Между разделите на страница
- В образите на героите
- В разделянето на основното съдържание и страничната лента
- В снимки
- Около бутоните CTA
Целта на макрозоната е да подобри оформлението на уебсайта и да улесни разбирането и навигацията.
Пасивно бяло пространство и активно бяло пространство
Белите пространства също могат да бъдат разделени на пасивни и активни категории.
Пасивни бели пространства се отнасят до пропуски, които възникват естествено в дизайна или типографията. Можете да контролирате размера на тези пространства по отношение на естетиката, но те ще бъдат там със или без да ги поставяте там.
Активно бяло пространство се отнася до празни области, умишлено добавени към страница за по -лесно движение. Целта е да насочите погледа на посетителя надолу по страницата или през процес, докато достигнат неизбежния завършек и се обърнат.
Защо трябва да използвате бяло пространство на уебсайтове
Ето някои от основните причини, поради които трябва да бъде вградено бяло пространство във всеки уебсайт, който проектирате:
Това е класика
Неподобни тенденции в уеб дизайна, които могат да изглеждат добре или да са актуални за кратко, бялото пространство е трайна класика. Просто погледнете колко дълго съществува и как се е развил от китайската калиграфия до модернистични произведения - а сега и в мрежата.
Ако искате да направите вашия уеб дизайн устойчив, бялото пространство трябва да бъде едно от тях.
Това води до по -атрактивни интерфейси
Влизането в уебсайт е малко като влизане в нечия къща. Всичко, от което се нуждаете, са няколко секунди, за да усетите колко комфортно ще се чувствате.
С правилното количество бяло пространство можете да създадете перфектния контраст между съдържание и пространство.
Но от вас зависи да решите кое е правилното съотношение. За марка като Google това бяло пространство работи:
За друга марка обаче прекалено опростеният потребителски интерфейс може да направи уеб сайта твърде празен и марката да бъде лишена от стойност. Но ако намерите правилния баланс, вашият избор на свободно пространство определено може да помогне да направите уебсайт привлекателен за целевите си потребители.
Това прави уебсайтовете по -лесни за използване
Ако изучавате принципите на уеб дизайна, ще забележите, че позиционирането и разстоянието са силно представени в тях.
Когато прилагате тези принципи на проектиране към уебсайтове, вие използвате психологията на потребителите, за да създавате потребителски интерфейси и пътувания, които са лесни за разбиране и проследяване.
Вземете този пример от закона на Фитс:
Пространствата около съдържание, връзки и бутон CTA не само подобряват външния вид на тези страници. Те също могат да подобрят доверието на потребителите и точността на кликванията.
Подобрява фокуса
Когато хвърляте твърде много съдържание на посетителите наведнъж, те могат да бъдат претоварени и трудно да се съсредоточат върху едно нещо.
Това е явление, което се обяснява с Законът на Хик :
Колкото повече стимули присъстват в даден момент, толкова по -дълго ще отнеме на хората да реагират на тях. А в случай на уебсайт, това може да е достатъчно, за да ги попречи да вземат решение.
Като създадете пространство около всяка област на уеб страницата си, ще позволите на посетителите си да отделят момент да си поемат дъх и да помислят какво гледат. Това забавя процеса на вземане на решения ... но по добър начин.
Полезно е за организацията
Когато имате много съдържание, което да включите в уебсайт, е доста лесно да разберете как да го разделите на различни секции и страници. Обаче просто поставянето на съдържание в различни контейнери не стига достатъчно далеч.
Когато добавите място около съдържанието или неговия контейнер, изпращате сигнал за важността на това съдържание и как то е свързано с това, което го заобикаля.
Le Nielsen Norman Group обяснява как работи:
В тази графика не виждате 20 точки. Виждате по -голям участък от точки отляво и по -малък участък отдясно. Пространствата, разположени на равно разстояние между групираните точки и най -голямото между групите, ни позволяват да ги разглеждаме като свързани единици, за разлика от отделните точки.
Това подобрява четимостта на вашето съдържание
Ако това е кратък текст в a образ на герой, дълга публикация в блог или много описателна продуктова страница, искате посетителите да прочетат съдържанието там.
Оразмеряването на вашия шрифт ще ви помогне да привлечете вниманието към думите ви, но разстоянието около букви, думи и абзаци гарантира, че те могат да се четат лесно.
Nielsen Norman Group вярва, че разстоянието между типографията е един от трите фактора, които правят дизайна красив:
Тази графика показва различните начини за подобряване на четимостта в резултат на това.
11 вдъхновяващи примера за бяло пространство в уеб дизайна
Тъй като има толкова много начини да се използва бяло пространство за подобряване на уебсайт, ще представя 11 примера, които използват различни видове празни пространства по -добре.
Логото на зоопарка в Питсбърг и логото на PPG Aquarium
Ако трябва да разгледате бързо логото на Зоопарк в Питсбърг, вероятно ще видите първото бяло дърво и птиците, които летят наоколо. При по -внимателно разглеждане обаче ще видите скрито изображение в негативното пространство: горила, обърната към лъв.
Това творческо използване на бялото пространство прави това лого и неговата марка доста запомнящи се. Освен това скритата изненада е чудесен начин да направите силно първо впечатление на посетителите.
Около 1886 г. галерия с изображения на герои
Образът на героя на уебсайт трябва да може ефективно да привлича вниманието на посетителя. Има няколко начина да направите това. Можете да проектирате образа на героя, като използвате предимно цветове и форми, за да оставите отпечатъка да блести. Или можете да направите както Circa 1886 и позволете на вашите изображения да заемат централно място.
Забележете как тази галерия използва бели чинии, бяло спално бельо, прозрачни стъклени съдове и лъскави прибори за хранене, за да рамкира основната тема на всяка снимка. Това буквално бяло пространство запазва фокуса върху храната, а не върху разсейването на ресторанта или заведенията около него.
Снимки на Florian Schulz Productions
Това е кураторският уебсайт за фотографи и режисьори на Флориан и Емил Шулц. Както можете да очаквате, уебсайтът е пълен с привличащи вниманието снимки на природата.
Това е доказателство, че бялото пространство не е просто нещо, което подобрява дизайна на уебсайт. Използвайки снимки, които използват добре бялото пространство, ще можете да насочите по -ефективно очите на посетителите към вашите обекти.
В горния пример виждаме как тъмната маса от скатове служи като бяло пространство и позволява скатовете, движещи се в зелени води, да бъдат основният фокус.
Превишаване на връзките за навигация
Може да не мислите, че можете да поставите 13 навигационни връзки спретнато подред, но уебсайтът наизлишък от запаси доказва, че грешите. Тук виждаме как правилното количество пространство между връзките може да направи меню с такъв размер лесна за навигация.
Освен това не принуждава търговеца на дребно да скрива категориите си под меню с мега категории или под икона на меню за хамбургер (което мнозина правят в наши дни).
Udemy междуредово разстояние
Вижте как са разделени модулите и уроците Udemy. Комбинацията от светло оцветени блокове, удебелени заглавия и изобилие от разстояния около всеки ред позволява на ученика бързо да се ориентира в курса.
Когато на уебсайта има над 150 000 курса, потребителите трябва да могат бързо да преценят дали курсът е подходящ за тях. И голяма част от свободата на действие - но не прекалено много - ще помогне за това.
Meetup организиран потребителски интерфейс
Meetup е уебсайт, който помага на местните да намерят групи хора със сходни интереси и да планират събития около тях. В големите градове уебсайт като този може да стане поразителен за потребителите, които на пръв поглед имат твърде много групи и събития, от които да избират.
Благодарение на добре организирания потребителски интерфейс и бялото пространство, което го разбива, потребителите могат бързо да филтрират опциите в горната част на уебсайта и страничната лента вдясно. Тогава те могат да насочат вниманието си към намалените ежедневни резултати в центъра.
Маргините на Maison De La Luz
Къщата на Луз е луксозен бутиков хотел в Ню Орлиънс. Неговият красиво илюстриран уебсайт не е единственото нещо, което ще впечатли гостите му.
На страницата „Информация“ посетителите първо ще видят илюстрация на интериора на хотела. Докато се превъртат надолу, имитира как погледът им може да се движи нагоре и надолу, докато се възхищава лично на хотела. Дори и без анимация, това оформление изглежда много привлекателно благодарение на тесните полета на графиката в текста по -долу.
Фокусът на продуктите на Apple
iPhone съществува достатъчно дълго, че едва ли има нужда да каже и дума за своите продукти. Ето защо по -голямата част от уебсайта му позволява на продуктите да говорят.
Дори когато присъстват копия и CTA, те заемат малко място в сравнение с продуктите и голямото количество бяло пространство, което привлича вниманието на посетителите към тях.
CTAs на затишие
Бутонът с подканваща фраза играе важна роля в пътуването на потребителя. Това ги принуждава да си вземат почивка, да обмислят наученото досега и да решат дали са готови да направят следващата стъпка.
За да накарате хората да забележат CTA, ще ви трябва повече от добро разположение или цветно приложение, за да се открои. Изобилното бяло пространство около CTA ви позволява да оставите всичко настрана, докато вашият посетител прави своя избор.
Ценови блокове на маховика
Ако имате много подробности, които да споделите наведнъж, можете да използвате размера, за да установите йерархия и разстояние, за да групирате съответните детайли заедно. Това ще направи процеса на вземане на решения по -плавен за вашите посетители, тъй като те няма просто да имат стена от текст, която да обмислят.
Докато това, което разглеждаме тук, е пример за ценови блокове Маховик, този тип ефирни интервали е полезен за всеки тип продукт или дизайн на блок със съдържание.
Оформление на формуляра Salesforce
Без значение какъв тип формуляри използва вашият уебсайт, искате те да са лесни за попълване. Във формата за безплатен пробен период търговски екип, виждаме как правилното разстояние може да направи формата по -привлекателна.
Бялото пространство около всяко поле помага на потребителите да се фокусират върху едно поле наведнъж. Има и друга причина, поради която това достатъчно разстояние е полезно. Когато някой започне да попълва полетата, всеки етикет се премества отгоре. И ако възникне грешка, съответното съобщение се появява по -долу.
Умело използвайте бяло пространство за създаване на по -добри уебсайтове
Бялото пространство може да се отнася до празнотата на уебсайт, но има много смисъл и цел, които живеят в тази празнота.
Поемайки контрола върху разстоянията на уебсайт, можете да създадете по -добро изживяване за всеки, който влезе в него.
Докато ние ви показахме няколко начина да направите това, прилагането му към вашите дизайни е друга история.
Но не се притеснявайте. Конструкторът на страници Elementor улеснява добавянето на бяло пространство към вашите дизайни.
Вземете Elementor Pro сега!
Заключение
Тук ! Това е всичко за тази статия, посветена на бялото пространство в уеб дизайна. Ако имате някакви притеснения как да стигнете до там fуведомете ни в Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...