Визуелно пробијање промена у системима дизајна

Поштујемо АПИ-је кода. Али шта је са бојом, типом и простором?

Бр. 4 од 6 из серије Ослобађање дизајнерских система:
Излази | Цаденце | Версионс | Бреакинг | Зависности | Процес

Системи дизајнирања успостављају основни визуелни стил од суштинске зависности. Ови избори - боја, типографија, свемир и друго - су прецизно прецизирани и очекује се да стабилно, предвидиво мењају издање издањем. Када се усвојитељ надогради, систем дизајна не би требало да неочекивано разбија њихове ствари.

Зато се запитајте ...

Могу ли усвојиоци надоградити на мање издање сигурни да се њихов интерфејс неће покварити због визуелних промена система?

Семантичка верзија (СемВер) нуди јасне критеријуме за комуникацију о променама кроз издања користећи главне, мање и закрпе. Сваки систем дизајна са којим се сусрећем користи СемВер и надгледа промене у програмском интерфејсу програма или у АПИ-ју њиховог пакета. Ово је позната територија за програмере који кодирају ЈаваСцрипт реквизите и ХТМЛ означавање. Прекидајте свој АПИ и ваша следећа верзија мора да повећа верзију до наредног великог издања, попут 1.4.0 до 2.0.0.

Одређивање интерфејса композицијском визуелном стилу нас измиче. Изгледа да је тако тешко дефинисати јасна, једноставна правила за праћење промена стила. Произвођачи система се труде да артикулишу шта или зашто „Промена овог стила прекида корисничко сучеље усвајача“ насупрот „Промена тог стила не делује.“ Мало системских тимова документује такве критеријуме. Питам „Које конкретне врсте визуелних промена покрећу главну верзију за вас?“ Њихов одговор: ¯ \ _ (ツ) _ / ¯.

У овом чланку предлажем да барем критеријуми за боју, типографију и свемирске налоге, који представљају кршење промене. Постоје и друга својства која треба узети у обзир. Систем дизајна може да дефинише, документује и комуницира ове критеријуме тако да усвајачи могу да верују у надоградњу издања по пуштању.

Бреакинг Цолор

Већина тимова система осећа се сигурно у подешавању позадинске боје примарног дугмета. Можда је њихова мотивација побољшати контраст у односу на обично бели текст налепнице. „Нека мало потамни чај“, кажу они. „Побољшаћемо приступачни контраст боја дугмету од АА до ААА оцене.“

Подешавање боје позадине примарног дугмета

Свакако, тимови који прихватају не би требало да прегласају стандардни сет боја дугмета. Превлачење избора система прекида везу са системом. У том тренутку усвојитељ је сам. Због тога је подешавање нијансе боје позадине примарног дугмета сигурно и није промена.

Међутим, промена боја негде другде може усвојити посвојитеље. Размотрите следеће сценарије.

Пример: Текст система на прилагођеним позадинама

Замислите да системски тим прецизно прилагођава интерактивну плаву боју да би побољшао контраст боја. Интерактивна плава боја в1.4.0 била је доступна на белој позадини, али није успела на позадини дрвеног угља.

Провера контраста боја преко Цонтра-грид.еигхтсхапес.цом

Дакле, за в1.5.0, тим је прилагодио интерактивно-плаву боју светлијој, засићенијој тони која делује и на белом и на дрвеном угљу.

Подешавање боје текста наљепнице дугмета на непредвидивим позадинама

Међутим, усвојитељ је користио дугме Гхост који зависи од те боје на светло сивој позадини. Након промене система, контраст боје текста на налепници је недоступан. Ваш систем је покварио њихов производ.

Пример: Позадине система са прилагођеним прекривеним текстом

Слично томе, замислите да систем затамни боју позадинске компоненте компоненте картице. Подручје садржаја картице садржи „сигурну“ зону контејнера са садржајем у коју усвојиоци убацују све садржаје и ознаке које желе.

Подешавање боје позадине картице која омогућава садржајни прилагођени садржај

У тој претпостављеној сигурној зони, усвајач је додао секундарни текст који је, иако суптилно умерено сива, прошао тест контраста боја. Након промене система, контраст боја више није доступан. Ваш систем је покварио њихов производ.

Замислите да је мање издање вашег система укључивало та прилагођавања. Назад компатибилни, рекли сте? Нема ризика у надоградњи, веровали су? Јок! Ваш систем је покварио њихов производ!

Стога процијените својства промијењених боја да бисте утврдили да ли се систем промијенио, као што су:

  • Боја текста која се може појавити изнад боје позадине, слике или друге текстуре усвајача.
  • позадинска боја на којој је прекривена боја текста усвојиоца.
  • позадинска боја, боја обруба, боја текста, сјена оквира или друго својство састављено поред, изнад или испод ивице или садржаја друге компоненте тако да умањи контраст између елемената.

Приступачност је покренула ове примере. Такође постоји и естетски ризик, зато што добронамерне промене система могу да поремете шарени склад који је постигао дизајнер производа. Интеракције боја обилују корисничким сучељем које дизајнер система не контролише или нема видљивост.

Такеаваи: Почните кршити промену разговора са критеријумима боје. Лакше је пренијети ризик, објективно је мјерљив и везан је за приступачност која побуди страсти. Наоружани са неколико критеријума можете прећи на друге проблеме.

Бреакинг Типограпхи (Би Враппинг)

Типографија је темељна страна сваког визуелног стила. Тимови желе да схвате како треба. А ту је број тонских бирања за подешавање: породица фонтова, тежина фонта, величина фонта, трансформација текста, висина линија, размак слова и још много тога.

Не доживљавају сви ризик ако се систем прилагоди типографији. За искуства која захтевају садржај, садржај сваког елемента може бити непредвидљив, различите дужине и осмишљен тако да омата и реагује на промене у ширини приказа.

За гушћа сучеља типографија мора бити прецизна. Дизајнери сатима уситњавају типографију, сређујући налепнице за компактне просторе. Ако прилагодите типографију система, њихови се елементи могу омотати или обрезати на неочекиване начине.

Пример: Пребацивање картица је страшно

Замислите да ваш систем прилагођава тежину налепнице на табулаторима од нормалне до подебљане.

Након мање надоградње верзије, картице са неодговарајућом верзијом ће се завршити. Није добро.

Усвајач се надограђује. Њихове постојеће неодговарајуће картице премашују додељени простор, па се замотавају. Грозно! Ваш систем је покварио њихов производ.

Пример: Распоред слова с разбијањем слова

Смјернице марке се развијају, резултирајући новом хијерархијом и стилом наслова. Стога се ваш систем прилагођава повећањем размака слова сваког заглавља.

Усвајач надограђује своју густу апликацију за радиологију на једној страници која је преведена на 14 језика, а састављена је од безбројних контролних панела, а сваки дио је препун елемената облика и наслова. Они надограђују, а корисничко сучеље обилује насловима непредвидиво одрезаним. Они сазивају кризни састанак. Они позивају помоћне инжењере података, за добробит! Ваш систем је покварио њихов производ!

Подешавање типографије система може бити опасно. За вас је то освежавајућа типографска еволуција распоређена без напора кроз библиотеку. Текст према њима почиње лоше понашати. Они вас криве. Можда те пламте у # слацк каналу за дизајн система. Никоме то није потребно.

Извлачење: Пре 1.0.0, марљиво радите на експериментисању, прочишћавању и довршавању типова стилова који одговарају разноликости купца. Једном када прође 1.0.0, одржавајте стабилну базу и пажљиво размотрите промене. Размислите о резервисању опасних смена за следеће велико издање. До тада, поступно додајте садржане функције, као што је компонента Текст дуге форме за обликовање само копије чланка.

Разбијање простора и величине

Бар можете видети боју и типографију. Простор и величина? Теже је дефинисати као конкретно поновну употребу, а камоли надгледање пробијања промена.

У ХТМЛ-у, када промените својства модела компоненте оквира - паддинг, маргин, ширина, висина, приказ, величина оквира, позиција, лево, десно, врх, дно - ризикујете да утичете на састав изгледа који распореди компоненту са другим елементима странице.

Пример 1: Уклањање вертикалних размака

Ваш систем система одлучује да уклони вертикалне размаке примењених контрола облика у облику дна марже. То утиче на <инпут>, <селецт>, <лабел>, микрокопију и друге елементе.

Првобитно постављен са уграђеним вертикалним размаком, систем уклања маргине. И тако облици изгледају изглађено.

Усвојитељ је поставио 38 различитих облика ослањајући се на тај размак. Након промене система, сви њихови облици више не вертикално раздвајају елементе. Ваш систем је покварио њихов производ.

Пример 2: Прилагођено величине на основу претпостављеног размака

Након опсежне расправе у дизајнерској заједници, ваш систем признаје да ће проширити подлогу блока садржаја картице.

Прилагођена трака са алаткама икона завршава се након промене паддинга. Еввв.

Усвојиоц је уредио и димензионирао картице на основу хардверских поставки свог купца. Такође су додали траку са алаткама само за иконе у доњем реду. Након промене система, иконе се превијају у два реда. Ваш систем је покварио њихов производ.

Изношење: Прво, избегавајте просторна правила (обично маргина) изван границе компоненте. Друго, прилагодите просторна подешавања врло, врло опрезно. Деградирање изгледа посвојитеља је сигуран начин стварања трења, умањивање поверења и резултирање оправданим лошим ПР-ом у заједници.

Садржане, неломљиве просторне промене

Неке просторне промене не утичу на суседне елементе или састав странице. На пример, затезање или проширивање уметка или сложени руб између ставки у менију не би представљало преломну промену, јер се та подешавања налазе у блоку који систем потпуно одређује, не укључује друге прилагодљиве елементе и слојевито је пласиран на начин то иначе не утиче на изглед странице када се отвори и затвори.

Шта друго може разбити визуелни стил?

Генерално, промене у визуелном стилу могу се специфицирати као промене у низу ЦСС својстава, чији распон је примерен дизајнерским колекцијама токена у Салесфорце Лигхтнинг, Морнингстар, РЕИ и Опен Табле.

Која би друга својства могла да надгледате осим оних боја, типографије, простора и величине описаних горе? з-индекс примењен у компонентама као што су Поповерс, Диалогс, Модалс и Тоолтипс је централни део композиције у трећој, слојевитој димензији изгледа. непрозирност која се широко примјењује на полупрозирним слојевима (попут модалитета) такође се чини јаким кандидатом. Чак и суптилне промене попут граничног дна имају утицај.

Прилагођавање боја обруба компоненте распоређене у близини других компоненти
  • Ваш систем чини дно ивице последње ставке вертикалне листе транспарентном. Усвојитељ је ту листу ставио уско изнад другог блока, ослањајући се на линију за стварање контраста. Након промене система, заглавље блока се меша са ознаком последње ставке листе на начин који није очигледно разликовати.
    Ако је то случај, ваш систем је покварио њихов производ.

Али шта је са прилагођавањем сенке? Или фино подешавање радијуса обруба? Цуе дизајнерска амбивалентност. Било би тешко уверити да би та прилагођавања нарушила искуство усвајача.

Такеаваи: Прегледајте велику колекцију могућих својстава ЦСС-а и поразговарајте о последицама својстава кандидата са својим тимом. Радна сесија плодно ће открити толеранцију групе према заштити усвојитеља и покренути се документовањем колико ћете ићи.

Дакле, шта је промена визуелног разбијања?

У овом тренутку, размишљате ли: да ли је то заиста важно? Зар не бисмо требали да користимо наш систем за контролу нашег визуелног језика? Да ли ће се усвојиоци заиста бринути?

Инжињери ће можда бринути. Дизајнери ДЕФИНИТЕЛИ царе. Проводе сате детаљно прилагођавајући изглед, напоменујући и преносећи детаље сарађујући с враговима. Стога би систем дизајнирања требао описати како се мијења. И, сваки пут када се промени, ако ће то бити промена која деградира њихов дизајн.

У разговорима са колегама из дизајнерског система, осећања су:

„Некако знамо шта је промена визуелног раста.“
„Разговарамо о променама визуелног разбијања када и нечији инстинкт сугерише.“
„Слажем се да је то ствар, ми то не радимо ригорозно, а важно је.“

У свом раду на систему дизајна Морнингстар документовали смо које се промене сматрају главним, малим и закрпљеним. Наш тим поуздано изјављује мишљења у критичким расправама, коментарима на потезе захтева и у нашим дискусијама са усвајањем и надоградњом тимова.

Наше поље ће се прилагодити верзији, јер је дубоко урезано у нашу праксу. Учинит ћемо све што можемо да комуницирамо и заштитити наше усвојитеље.

# 3. Верзија ← Претходна | Следеће → # 5. Зависности