Визуална прекъсваща промяна в дизайнерските системи

Уважаваме API на кода. Но какво ще кажете за цвета, вида и пространството?

№ 4 от 6 от поредицата Освобождаващи системи за дизайн:
Резултати | Каданс | Версии | Разбиване | Зависимости | процес

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

Така че, запитайте се ...

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

Semantic Versioning (SemVer) предлага ясни критерии за комуникация на промените в версиите, като се използват главни, второстепенни и лепенки. Всяка дизайнерска система, с която се срещам, използва SemVer и следи промените в интерфейса за програмиране или приложния програмен интерфейс на приложенията им. Това е позната територия за разработчиците, кодиращи JavaScript реквизит и HTML маркиране. Прекъснете своя API и следващата ви версия трябва да увеличи версията до следваща основна версия, например от 1.4.0 до 2.0.0.

Определянето на интерфейс към композиционния визуален стил ни избягва. Чувстваме се толкова трудно да определим ясни и прости правила за наблюдение на промените в стила. Производителите на системи се борят да формулират какво или защо „Промяната на този стил нарушава потребителския интерфейс на осиновяващия“ срещу „Промяната на този стил не е“. Малко системни екипи документират такива критерии. Питам „Какви конкретни видове визуални промени задействат основна версия за вас?“ Техният отговор: ¯ \ _ (ツ) _ / ¯.

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

Разбиване на цвета

Повечето системни екипи се чувстват сигурни в настройката на фона на основния бутон. Може би тяхната мотивация е да подобрят контраста срещу обикновено етикет с бял текст. „Нека малко потъмнее билката“, казват те. „Ще подобрим достъпния цветен контраст на бутона от рейтинг от AA до AAA.“

Регулиране на цвета на фона на първичен бутон

Със сигурност приемащите екипи не трябва да отменят стандартния цветен набор от основния бутон. Преопределянето на избор на система прекъсва връзката със система. В този момент осиновителите са сами. Следователно, регулирането на нюанса на цвета на фона на основния бутон е безопасно и не е променлива промяна.

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

Пример: Системен текст на персонализирани фонове

Представете си системен екип за фина настройка на интерактивно синьо за подобряване на цветовия контраст. Интерактивното синьо на v1.4.0 беше достъпно на бял фон, но не успя на фона на дървени въглища.

Проверка на цветовия контраст чрез Contrast-grid.eightshapes.com

И така, за v1.5.0, екипът коригира интерактивно-синьото към по-светъл, наситен тон, който работи както на бял, така и на въглен.

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

Осиновителка обаче използва бутона Ghost, зависим от този цвят, на светлосив фон. След промяна на системата, контрастът на цвета на текста на етикета е недостъпен. Вашата система счупи продукта им.

Пример: Системни фонове с персонализиран наслоен текст

По подобен начин, представете си, че системата потъмнява цвета на задния поток на компонента на картата. Областта на съдържанието на Картата включва „безопасна“ зона с контейнери за съдържание, където осиновителите вмъкват каквото съдържание и маркиране искат.

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

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

Представете си, че малката версия на системата ви включва тези корекции. Обратно съвместими, казахте ли? Без риск при надстройката, те се доверяват? Nope! Вашата система счупи продукта им!

Ето защо, оценете свойствата на променените цветове, за да определите дали системата се е променила, като например:

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

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

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

Разбиване на типография (чрез опаковане)

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

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

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

Пример: Разфасоването на раздели е ужасно

Представете си, че системата ви коригира теглото на табулатора от нормалното до получерното.

След незначително надстройване на версията, неотговорните раздели се обвиват. Не е добре.

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

Пример: Разрушаване на буквите

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

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

Настройката на типографията на системата може да бъде опасна. За вас това е освежаваща типографска еволюция, разгърната без усилия в библиотеката. Към тях текстът започва да се държи лошо. Те обвиняват. Може би те пламват в канала # system-design Slack. Никой не се нуждае от това.

Отнемане: Преди 1.0.0, работи усърдно, за да експериментирате, усъвършенствате и финализирате типове стилове, подходящи за разнообразието на клиента. След като 1.0.0 премине, поддържайте стабилна основа и помислете за промяната предпазливо. Помислете да запазите опасни смени за следващото голямо издание. Дотогава постепенно добавете съдържащи се функции, като компонент Long Form Text за стилизиране само на копие на статията.

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

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

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

Пример 1: Премахване на вертикално разстояние

Вашият системен екип решава да премахне вертикалните разстояния на приложените контроли на формата под формата на дъно на полето. Това оказва влияние върху ,