По-добри мрежови системи в инструментите за проектиране на потребителски интерфейс.

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

В първата част на тази статия „Гридните системи все още са актуални в дигиталния дизайн на продукти?“ Разгледах историята на мрежовите системи и техните практически предимства. Накратко: решетките все още са полезни за дизайн на интерфейс, но екранът е много по-сложен от отпечатаната страница, тъй като изходните носители и съдържанието са силно променливи.

И така, какво не е наред с решетките в инструментите за дизайн на потребителския интерфейс?

Софтуерните разработчици разполагат с инструменти за подпомагане на сложността на оформлението на екрана: ограничителни системи като AutoLayout на iOS и ConstraintLayout на Android, Flexbox и дори специфични за мрежата рамки като предстоящата CSS Grid. Но решенията за оформление трябва да се вземат от дизайнерите, а не да бъдат делегирани на разработчиците. Те са критични за формата и функцията на интерфейса. Дизайнерите трябва да могат да изследват последиците от решенията за подреждане на мрежата визуално, а не само в кода.

75% от дизайнерите на интерфейси използват предимно Photoshop, Illustrator или Sketch. Всеки от тези инструменти е създаден около метафората на страницата, а не на екрана. Не е изненадващо, че методите за работа с решетки в тези инструменти се основават и на традицията на печат. За дизайнерите на цифрови продукти това води до някои големи точки на болка при ежедневна употреба.

отзивчивост

За да създадете решетка, обикновено задавате параметри като обща ширина, брой и ширина на колоните, улуци и полета:

Контрол на мрежата на скица и Photoshop

Това създава мрежово скеле, което се очертава като набор от водещи линии в горната част на таблото. След това елементите могат да бъдат ръчно прикачени към тези водещи линии:

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

Най-разпространеното решение на този проблем е да се създадат множество артбордове, всеки от които съответства на уникална категория устройства, като смартфони, таблети и настолни компютри. След това отделните решетки могат да бъдат създадени поотделно за всяко устройство / таблото:

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

Това е доста отвратителна симулация на изходните носители, тъй като представлява само три потенциални резолюции на устройството. (В горния пример това е iPhone 7, iPad и 13 "Macbook Pro.) Решенията за мрежата все още ли звучат в Google Pixel или iMac 5K? Какво ще кажете за пейзажните ориентации или разделените изгледи?

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

Разпространяване на промените

Във влиятелните Grid системи в графичния дизайн Йозеф Мюлер-Брокман призовава мрежите да бъдат посочени в началото на проекта, преди да се появи каквото и да е оформление на страниците. Всъщност Мюлер-Брокман предлага да знаете всички променливи на проекта, преди да посочите мрежата:

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

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

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

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

Освен това, въпреки че проектите за печат са завършени, когато преминават към печат, софтуерните интерфейси никога не са „завършени“. Те постоянно се повтарят и подобряват.

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

Експериментирането

Когато конструира нова решетка, Мюлер-Брокман ще направи малки ръчни скици на потенциални конфигурации. Техническата трудност на процеса беше очевидна дори за него:

„При скицирането на решетка трябва да се внимава скицата да съответства максимално на пропорциите на крайния отпечатан формат. […] Само по този начин е възможно постепенно да се придобие способността за създаване, дори и в много малки скици, типографски модели, които са реалистични, т.е. които могат да бъдат прехвърлени в окончателния формат без затруднения. “
 - Josef Müller-Brockmann, Grid Systems in Graphic Design, pgs. 94, 49
Някои от скиците на ръката на Жозеф Мюлер-Брокман от Grid Systems в графичния дизайн.

Разбира се, това беше единственото средство за Мюлер-Брокман да евтино експериментира с възможни схеми на мрежата: той нямаше достъп до компютъра през 1981 г. Въпреки това е доста озадачаващо, че почти 40 години по-късно, компютърните инструменти за проектиране все още не улеснявайте този вид експерименти.

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

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

Това е достатъчно просто, но ръчно правенето на изчисления не е в крак с мисълта. Когато започнете да задавате въпроси от типа „ще бъде ли твърде малко, ако поставям 8 снимки на този ред вместо 6?“, Правенето на математиката всеки път е досадно и обезкуражава бързите експерименти.

Как може да изглежда по-добре мрежовите инструменти?

Всички тези точки на болка водят до един извод: UI / UX дизайнерите се нуждаят от по-добри начини за работа с мрежи по време на визуален дизайн. Kevin Lynagh и аз работихме по някои решения в нашия инструмент за проектиране на потребителски интерфейс, Subform. Нека разгледаме принципите (и примерите), които сме измислили досега. (Всички тези демонстрации бяха записани директно от подформата.)

Мрежите трябва да отговарят на природата.

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

Тези стойности ви позволяват да изградите обикновена отзивчива мрежа много бързо, без да правите никаква аритметика. Просто задавате няколко колони и кажете на всяка колона да се простира. След това колоните равномерно разделят наличното пространство въз основа на ширината на таблото:

Разтегливите колони могат да се смесват с фиксирани колони, улуци и полета. Улуците в горния пример са зададени на 12 пиксела, така че тяхната ширина остава фиксирана с преоразмеряване на таблото.

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

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

Забравете ръководствата и щракането - елементите трябва да имат формално отношение към мрежата.

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

Работата е там, че решетката е връзката между елементите. Ръководните линии са визуален хак за подпомагане на създаването на тези връзки ръчно. Много по-добре е да изградите тези отношения директно.

Например, трябва да можете да поставите елемент, като използвате правило като „стартирайте в колона 2, след това обхванете 4 колони.“ Това може да се направи косвено чрез директна манипулация или изрично с помощта на стенограма като 2 / span 4. Сега когато мрежата се променя, елементите автоматично преоразмеряват и запазват своите подравнения:

Това също отваря нови възможности за директна манипулация на самата мрежа, като оразмеряване на улуци и колони:

Мрежите трябва да позволяват бързи експерименти.

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

Наличието на инструмента за проектиране прави тези изчисления в движение - вместо старателно да правите математиката на ръка - прави експериментите бързи и визуални. Въпроси от типа „колко снимки трябва да се показват в един ред на смартфона?“ Могат лесно да бъдат изпробвани за секунди, а не след много старателно, досадно натискане на пиксели:

Двумерните решетки не трябва да се пренебрегват.

Решетките на колоните обхващат много случаи на използване, но много оформления изискват колони и редове, подобно на модулната решетка на Müller-Brockmann. Трябва да можете да опишете елементи и в двете измерения: „Хоризонтално този елемент трябва да започва в колона 3 и да обхваща 2 колони. Вертикално трябва да започне на ред 1 и да завърши на ред 2. “

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

Всичко трябва да може да съдържа решетка.

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

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

Възможността да се използват множество решетки и да ги гнездят също отваря много творческа изразителност за дизайнера. (Карл Герстнер свърши доста страхотна работа с множество наслагвани решетки за списание Capital през 1962 г.)

заключение

Докато изграждаме Subform, Кевин и аз непрекъснато проучваме как можем да създадем инструмент, който поддържа непосредствеността и изразителността на визуалния дизайн, но добавя динамичната сила на изчислението.

В „Медия за мислене на немислимото“ Брет Виктор предлага, за да се мисли за сложни системи, са необходими нови представи - по-мощни представи от хартиената среда. Представянията, които разработваме за базирано на решетка оформление, се надяваме, стъпка в правилната посока.

И може би те са дори нещо, което Джоузеф Мюлер-Брокман може да разпознае: инструменти за проектиране на „ясно разбираемите, обективни, функционални и естетически качества на математическото мислене“.

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