Базиран на решетка 8pt инсулт и маркиране, UXPUB

Професионален съвет: Създаване на перфектни стрелки в Adobe XD

Никълъс Гелар

Дял

В моята първа публикация, Въведение в 8-точковата мрежова система, очертах основните причини за препроектиране на вашия работен процес. Това е подробна разбивка на някои от по-трудните въпроси, на които трябваше да отговоря, докато преместихме нашата система за проектиране в Pivotal Cloud Foundry към 8pt мрежа.

Как да изчисля удара в системата 8pt?

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

Има два подхода към границите в системата 8pt. Извадете 1px от подложката (сега 7px), така че границата от 1px да създаде точно 8px пространство отляво и отдясно. Друга възможност е да запазите 8px подложката отляво и отдясно и да добавите граница от 1px към ширината. Или третият вариант е да не използвате граници. Можете да използвате малка сянка, която технически не зачита пространството, или да използвате бутон с плътен фон, за да избегнете напълно този проблем.

Същността на дебата е как това ще се отрази на хоризонталната хармония между елементите. В този пример сме задали вътрешната граница на 1px в Sketch.

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

По време на прехода на Pivotal UI към 8pt мрежова система нашите вътрешни екипи ми задаваха много въпроси, когато измерванията не бяха кратни на 8. Този вид логика на изваждане на 1px само би усложнила работния ни процес и създаде объркване за инженерите и дизайнерите. Решихме да използваме втората опция и да преместим границата на бутона извън полето с 8px.

„Стойността не е само в представянето, но и в изпълнението“

Как се измерват границите в инструментите за проектиране в сравнение с уеб браузър?

Sketch/Illustrator/Figma/Xd/Photoshop не броят границите по същия начин, както го правят уеб браузърите. Инструментите за проектиране чертаят граници вътре или извън формата, което не се взема предвид при нейния размер.

Съвременните инструменти за проектиране не измерват границата

Горният пример показва как два правоъгълника с еднакъв размер с различни посоки на границите все още се измерват от ограничителната кутия на самия правоъгълник. Уеб браузър измерва границите като плътно пространство на страница. Има два различни начина, по които уеб браузър може да задава граници чрез свойството box-sizing:

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

Ако се интересувате, можете да прочетете повече за историята на оразмеряването на кутията тук или да видите моя пример за Codepen тук. И двете полета по-долу имат един и същ основен стил, но се различават по свойството за оразмеряване на полето и тяхното относително пространство на страницата се променя съответно.

Всичко това означава, че трябва да говорите с вашите инженери. Разберете къде е източникът на истината за вас: във висококачествени дизайнерски файлове или в код.

„Моите оформления на Sketch обикновено са подравнени на няколко пиксела от кода и това е добре. Кодът е източникът на истината.

Не всички проекти използват системата от 8ptмрежи.Androidизползва, но не е лиiOSпо-подходящ за кратни на 5?

Не точно. Можете да зададете рамка/подложка за елементи, които са кратни на 8 и позволяват на съдържанието да бъде гъвкаво. Мобилните потребителски интерфейси трябва да бъдат доста отзивчиви, за да паснат на различните размери на екрана, налични днес. Това означава, че няма фиксиран размер на мрежата, който да е идеален за структурата на всички мобилни дисплеи.

Appleне използва 8ptмрежи за структуриране на десктоп или мобилни приложения. Защо трябва да направя това?

Наистина, докато HIG на Apple не следва решетката от 8 точки или не говори много за системата за пространствен дизайн, все пак е възможно те да стигнат до нея. Материалите на Google са най-добрият мащабен случай на използване на мрежова система с мнение, но открих, че избягват да обясняват някои от решенията си.

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

Въпроси?

Все още е проучване за мен. Моля, пишете, ако имате други идеи или подходи!

Промяната е единствената константа, поради което хората, институциите и компаниите трябва да бъдат създадени да се адаптират. Ние в Pivotal вярваме, че промяната трябва да се очаква, възприема и прилага непрекъснато чрез развитие и иновации, защото добрата разработка на софтуер никога не свършва.