Дизайн шаймандары эскирип жатат. Мына биз аларды кантип оңдой алабыз.

Дизайн куралдары жөнүндө ойлонууга бир аз убакыт коротпой турган күн сейрек өтөт. Бир нече жыл мурун, мен Марвел сатып алган дизайн куралын жасадым. Бул эки жыл мурун болгон, бирок андан бери пейзаж бир топ өзгөргөн жок жана аны жакшыртууга болгон каалоом да өзгөргөн жок.

Жакында мен дизайн куралдары жөнүндө жаздым - мезгил-мезгили менен болуп келген нерсе.

Ошол күнү мен жалгыз өзүмдүн оюмду сүйлөгөн жокмун, башкалар да жактырышты.

2017-жылдын 28-июлу дизайн куралдары үчүн жакшы күн болгон жок.

Бул твиттердеги көптөгөн түшүнүктөр бар, бирок көптөн бери учурдагы дизайн куралынын модели жөнүндө ушунчалык түп-тамырынан бузулган деп тереңирээк ойлонууга убакыт бөлгүм келет. багытта ишарат катары биз жетектешибиз керек деп ойлойм.

Баарыбыз эле сүрөткө тартып жатабыз. Бул жинди.

Бардык дээрлик популярдуу дизайн куралдары сүрөттөрдү экспорттойт. Бул бир нече себептерден улам көйгөйлүү:

  1. Сүрөт менен иштеше албайсыз. Прототиптөө куралдары экранга өтүүнү жана сүрөттөргө жөнөкөй өз ара аракеттерди кошууга мүмкүнчүлүк берет. Бирок, биздин өнүмдөр экранды өркүндөтүүнү жана микро-өз ара аракеттешүүнү талап кыла бергендиктен, сүрөттөр жөн эле кала бербейт.
  2. Сүрөттөр суюк эмес. Долбоордук чечимдерди сүрөттөр аркылуу байланыштыруу, адатта, кыйынга турат.
  3. Сүрөттөр мамлекеттик эмес. UI үчүн ар кандай мамлекеттер менен натыйжалуу байланышуу үчүн көбүнчө көптөгөн сүрөттөр керек.
  4. Битмап сүрөттөрү чечилишке көз каранды. Торчо аппараттарынын пайда болушу менен кээде сүрөттөр начар көрсөтүлөт.
  5. Сүрөттөр файлдары оор болуп, аларды сактоо, башкаруу же бөлүшүү кыйынга турат.

Дизайн куралдары сүрөттөрдү экспорттоону уланта берсе, алар биздин өнүмдөрдүн так чагылдырууларын эч качан чыгара алышпайт. Тактыктын жоктугу дизайнерлер менен иштеп чыгуучулардын ортосундагы байланышка тоскоол болууда. Дизайнерлер өз иштери менен байланышуу үчүн жетишсиз орто каражатты колдонууну улантышса, ал жумуш ар дайым туура эмес чечмелөөгө даяр.

Бул абдан маанилүү жагдай, себеби, долбоорлоо шаймандарынын дээрлик бардыгында вектор формаларын сүрөттөргө айландырышат. Бул жагынан Photoshop, Illustrator, Marvel, Adobe XD, Эскиз жана Фигма бирдей. Ошентсе да, сүрөттөр дизайн ниетин жарым-жартылай гана билдире алат. Биздин өнүмдөр татаал өз ара аракеттенүүнү, үн киргизүүнү, видео киргизүү, күчөтүлгөн реалдуулук, виртуалдык реалдуулук, температура сезгичтигин ж.б. кабыл алууну жана колдоону уланта бергендиктен, бул шаймандардын мааниси тездик менен төмөндөйт. Сүрөткө негизделген дизайн аягы бүтпөйт.

Биздин жасалгалоо куралдары сүрөттү эмес, чыныгы продукт менен иштеши керек.

Биздин өнүмдөр интерактивдүү. Биздин шаймандар туруктуу.

Мен буга чейин айткан элем, бирок бул өтө эле сынчыл, ошондуктан мен бир аз иштеп чыкмакмын.

Биздин өнүмдөрдүн дээрлик бардыгына мүнөздүү болгон жөнөкөй өз ара аракеттешүүлөрдүн көлөмү жөнүндө ойлонуп көрүңүз, бирок биздин дизайн шаймандарыбыз менен байланышууга болбойт. Бул жерде менин башымдагы кыскача тизме келтирилген:

  • Баскычты жылдыруу
  • Киргизүүгө басым жасоо
  • Белги кутучасын текшерүү
  • Таблицанын мазмуну
  • Аймактарды жылдырыңыз
  • Фокустук абал үчүн өтмөк индекси
  • Баскычтоптун жарлыктары

Албетте, бул өзгөчөлүктөрдү кээ бир инженердик техникага окшоштурса болот, бирок бир нерсени билүү керек, жер бетинде эмне бар? Эмне үчүн дизайнерлер чыныгы продуктту гана жасай алышпайт ?! Акыр-аягы, бардык шылдыңдар бир жолу колдонулат, бирок дизайнерлер аларды өркүндөтүүгө бир нече айларды сарпташат. Ал убакытты анык продуктка айландырып өткөрсө жакшы болмок.

"Дизайнерлердин кодун" коёндун тешигинен өтө алыска барбайм, бирок баарыбыз код жазууну сунуш кылбайм. Дизайн куралдарыбыз жандуу буюмдарыбызды түз манипуляциялай албай тургандыгында эч кандай орчундуу себеп жок деп айтып жатам.

Өркүндөтүлгөн жана деталдаштырылган өз ара аракеттерди колдоп, Фрамер бул бөлүмдүн көпчүлүгүнө караганда жакшыраак иштейт. Калган кутулар абдан артта.

Биздин куралдар интернеттин жайгашуу парадигмасын колдошу керек

Болжол менен бир жыл мурун интернетте макеттерди түзүүнүн бирден-бир жолу - дисплейди колдонуу: таблицаны жана вертикалдуу-тегиздөөчү CSS касиеттери. Азыр бизде Flexbox бар жана жакында CSS тору болот. Бул үч кыймылдаткыч DOM агымын колдонуп, бирдей иштешет. Дээрлик бардык веб-сайттар ушул үч жайгашуу тутумунун бирин колдонуп курулган.

Демек, биздин жасалгалоо куралдары бир эле макет моделин колдойт деген түшүнүк бар. Right?

Дизайн куралдарынын дээрлик бардыгы ушул катмар тутумдарын этибарга алышпайт, анын ордуна ар бир катмарды арт-бортуна так жайгаштырууну каалашат. Бул желе кандайча иштей тургандыгы жана биздин дизайн куралдарыбыз кандайча иштешип, көптөгөн маселелерди киргизип турат:

  • Ар бир катмарды ар бир чекиттин колу менен өзгөртүп туруу керек болгондуктан, жооптуу дизайн өтө татаалдашат. Же болбосо, чектөөгө негизделген жайгашуу тутумун киргизсе болот, бирок бул татаалдыгын арттырып, үйрөнүү ийри сызыгын түзүп, иштеп чыгуучулардын макетти түздөн-түз вебге өткөрүп берүүсүнө жол бербейт.
  • Ар бир катмар документтин агымынан тышкары болгондуктан, манипуляциялоо татаал болуп калат. Мисалы, сиз бир нерсени тизмеге кошкуңуз келсе, анда тизмедеги башка нерселерди кол менен жайгаштырышыңыз керек. Албетте, кайгы-муңду жеңилдетүү үчүн кайталануучу функцияларды жана башка сонун өзгөчөлүктөрдү киргизсе болот, бирок бул дагы татаалдыгын киргизип, DOM бизге бекер берген нерсени татаалдаштырат.
  • Абсолюттук позициялоо табигый түрдө туруктуу пикселдин координаттарына жана өлчөмдөрүнө алып келет. Бул ийкемсиздикти пайда кылат жана дагы бир жолу, интернеттин иштешинен чоң баш тартуу. Желе em, rem, vh, vw жана% сыяктуу суюктук бирдиктеринде курулган. Биздин шаймандар бул бөлүмдөрдү демейки боюнча колдошу керек.

Дизайн куралдары желеге жана анын нюанстарына окшошуп же чагылдырбашы керек - алар желе гана болушу керек.

Монолиттүү курал жол эмес

Жакшы дизайн этаптарда болот. Жакшы структураланган дизайн системасынын бир нече айырмачыл катмарлары бар:

  1. Стиль палитрасы - бренддин аныктыгын түзүүчү түстөрдүн, көлөкөлөрдүн, аралыктын, чектердин радиусу, басмакана, шрифттин өлчөмдөрү, анимациялар жана башка стилдердин коллекциясы. Учурда көпчүлүк дизайн куралдары түстүү палитраларды гана колдойт. Алар стилдин башка касиеттерин колдогонго чейин, системалуу түрдө долбоорлоо өтө оор болот.
  2. Мүлктөргө иконалар, иллюстрациялар жана сүрөттөр сыяктуу элементтер кирет. Сүрөттүн феноменалдуу редакторлору бар жана Фигманын вектордук куралы мыкты, бирок SVG колдоосу жөнүндө сөз болгондо, биздин жасалгалоо куралдары көп нерсени талап кылат.
  3. Компонент китепканасы Компонент - бул ар кандай вариацияларда бир элементке маалымат жеткирүүчү стилдердин жана активдердин жыйындысы. Мисалдарга баскычтар, киргизүү, төш белгилер ж.б. кирет. Жогоруда айтканымдай, Фигма жана Скетч жакында бул процессти негизги сүрөт агымынан алыстатты - өкүнүчтүүсү, алар жөн гана компоненттер эмес, компоненттердин сүрөттөрү.
  4. Модулдар Модул / курам - бул ар кандай штатта UI капсулаланган бөлүгүнө маалымат жеткирүүчү компоненттердин жыйнагы. Мисалдарга сабы тилкеси, өтмөк менюсу, кирүү формалары, таблицалар ж.б. кириши мүмкүн. Модулдар татаал компоненттер болгондуктан, Фигма жана Скетч аларды да көтөрө алат деп ойлойм. Экөөнү бөлүп-жарууга кандайдыр бир сыймыктар бардыр.
  5. Экрандар Экран бул колдонуучу менен иштеше ала турган толук UI түзүү үчүн модулдардын, курамдык бөлүктөрдүн жана маалыматтардын жыйындысы.

Дизайн куралдарынын көпчүлүгү ушул стадиялардын ар бирин, кандайдыр бир деңгээлде, колдоого алган өзгөчөлүктөрдү камсыз кылат. Көйгөй, бардык этаптар биригип жатат. Дизайн куралдарынын дээрлик бардыгы бир гана режимди - чийүү режимин сунушташат. Сиз арт-такта топтомун түзүп, сүрөт тарта баштайсыз. Жакында гана эскиз жана фигма сыяктуу шаймандар колдонулган, негизги чийүү режиминен алыстаган компоненттер / символдор - бул таң калыштуу, анткени фронтту иштеп чыгууда компоненттер көп жылдар бою жасалып келген.

Стилдер палитрасын жасоодо артборддорду же вектордук шаймандарды көрүүнүн кажети жок. Мен шайкеш түстөрдү тандоо үчүн шаймандарды көргүм келет. Мен 8дp аралыктын шкаласы же типтик тараза тандоо сыяктуу нерселерге алдын-ала дайындалгым келет.

Сүрөтчөнү иштеп чыгуу колдонуучунун агымын долбоорлоодо таптакыр башкача ой жүгүртүүнү талап кылат. Жөнөкөй SVG редактору мага жергиликтүү SVG тик бурчтуктарын, тегеректерин, сызыктарын жана жолдорун тартууга мүмкүндүк берди, андан кийин экспорттолгон оптималдаштырылган SVG коду идеалдуу болот.

Компонентти иштеп жатканда, мен жеке стилдер жөнүндө ойлонбой эле койбойм - жөн гана алдын ала аныкталган стилдер палитмасынан стилдерди тандап алышым керек. Мен бир эле компонент үчүн жөнөкөй стилдерди баштай албайм, анткени дал келбестик пайда болуп, дизайн системамдын эффективдүүлүгүн төмөндөтөт. Стилдер палитрасы орунга коюлгандан кийин, аны булактан гана оңдоо керек.

Анын сыңарындай, модулду түзүүдө мен алдын ала аныкталган компоненттик китепкананы гана көрүшүм керек. Каптал тилкесинде стиль касиеттери болбошу керек. Вектордук куралдар жок. Кайра колдонула турган компоненттердин китепканасы, мен аларды сүйрөп апарып, модулдарды түзөм.

Ушундай эле нерсе экрандарды куруу үчүн да кетет. Азыркы учурда, биз UI куруу үчүн компоненттерди жана модулдарды жаңы гана колдонуп жатабыз. Биз стилдер же фигуралар же башка чыгармачыл аракеттер жөнүндө ойлонуп жатпайбызбы. Биз биринчи кезекте мазмунду жана колдонуучу агымдарын иштеп чыгууга багыттайбыз.

Дизайндын ушул баскычтарынын ар бири өзүнчө шаймандарда же бир эле куралдын ичинде ар кандай режимдерде болушу мүмкүн. Бул анчалык деле маанилүү эмес деп ойлойм. Белгилей кетчү нерсе, учурдагы дизайн шаймандарынын көпчүлүгү жараянды тааныбай да калышат.

Биздин куралдар жакшы дизайнга түрткү бериши керек

Дизайнерлер сейрек кездешүүчү кооздукка ээ, долбоорго чексиз көп кайталангыс стилдерди эч кандай байкоолорсуз киргизе алышат. Бир аз чоңураак шрифттин көлөмү керекпи? Жөн гана аны бүктөп. Эч кандай деле маселе эмес. Бир аз жарык түстөр керекпи? Жөн эле чийип коюңуз. Салкын. Сиз бир эле долбоордо бир нече арт-такта түзө аласыз, алардын ар бири окшош стилдер үчүн бир аз башкача мааниге ээ жана алар байкабай калышы мүмкүн.

Дизайн куралыңыз эч качан бир нерсе кыла албайсыз деп айта албайт. Брендден тышкары түстү колдонгонуңуз үчүн сизди эч качан тарта албайт. Сиздин боштук масштабына кирбеген боштук маанисин колдонууга эч качан жолтоо болбойт. Калктын 20% сиз ойлоп тапкан ачык-айкын тексттерди көрө албасы жөнүндө эч качан эскертпейм.

Эмнеге эмес ...? Себеби дизайн куралдары көңүл бурбайт.

Дизайн куралдары чексиз чыгармачылыкка болгон көз-караш менен ушунчалык таң калыштуу, ошондуктан алар акылдуу дизайн жасоо, системалуу түрдө долбоорлоо деген эмнени билдирерин унутуп коюшкан.

Жөнөкөй сөз менен айтканда, дизайн шаймандары каалаган нерсебизди кылууга мүмкүнчүлүк берет. Чексиз чыгармачылыктын бул деңгээли кандайдыр бир деңгээлде пайдалуу, айрыкча идеялоо фазаларында. UI дизайнерлери сыяктуу эле, биздин иш процесстерибиздин көпчүлүгү көп чыгармачылыкты талап кылбайт. Тескерисинче, биздин иш процесси кайра колдонууну, кайталоону, таанышууну жана стандартташтырууну талап кылат; биздин шаймандар аз гана канааттандырарлык муктаждыктарга ээ.

Бул чексиз эркиндик веб өнүгүү реалдуулугуна карама-каршы келет. Иштеп чыгуучулар чыныгы продукт менен иштеп жаткандыктан, алардын бардыгы бир эле код менен иштеши керек. Иштеп чыгуучулар жөн гана обочолонгон шрифттин көлөмүн же кокус түс түс маанилерин код базасына кошо алышпайт. Биринчиден, линтер (начар жазылган код жөнүндө эскертүүчү кабар) дароо эле кыйкырып башташы мүмкүн. Эгер андай болбосо, анда алардын жасалма чеберчиликтери кодду карап чыгуу учурунда кармалмак. Эгер ал кандайдыр бир жол менен жаракалардан өтүп кетсе, натыйжада иштин көзгө көрүнгөн таасири акыры сигналды чыгарат.

Продукт топторун көргөнүмдө эң көп бузулган көйгөйлөрдүн бири - дизайн жана иштеп чыгуу топторунун ортосундагы ажырым. Иштеп чыгуучулар бир нече жылдар бою катуу көрсөтмөлөр жана чектөөлөр менен иштеп келишкен. Дизайн куралдарыбыз ушул эле чектөөлөрдү колдонбосо, ажырым эч качан кыскарбайт.

Биз тирүү маалыматтар менен иштеп чыгышыбыз керек

Түз эфирдик маалыматтар кандайдыр бир деңгээлде көптөгөн шаймандар менен кошулган, ушуну көрүү абдан жакшы. Adobe XD жасалма маалыматтарды чыгаруу үчүн тыкан өзгөчөлүктөргө ээ, ал кадимки жандуу маалыматтарга окшошот. Ошондой эле Invision Craft эскиздин айрым кызыктуу маалыматтарын берет.

Жандуу маалыматтар текст менен эле токтоп калбашы керек. Сүрөттөр жана видео сыяктуу башка элементтер жүктөө убактысын бир топ көбөйтүү менен колдонуучунун тажрыйбасына чоң таасир тийгизиши мүмкүн. Эгер сиз интернетте иштеп жатсаңыз, браузердин шаймандары ар кандай интернет ылдамдыгына окшошуп, туташууну талкалоого мүмкүнчүлүк берет. Андан кийин, сиз жаңы мазмундун колдонуучунун тажрыйбасына кандай таасир этерин көрө аласыз.

Дизайн куралдары бизге ушул жыргалчылыкты бере алабы?

Бир сөз менен айтканда: жок.

Чыныгы продукцияны иштеп чыгууга канчалык жакын болсо, ошончолук биздин долбоорлоо ишибиз ошончолук пайдалуу жана таасирдүү болот.

Желе ачык. Биздин шаймандар да болушу керек.

Интернеттеги эң сонун нерселердин бири - анын ачык болушу. Вебсайтты каалаган түзмөктөн каалаган веб-браузерден көрүүгө болот.

Бул дизайн куралдары менен кандайча салыштырылат? Бир нече күн мурун, Дэвид агам менден өзү куруп жаткан колдонмону карап чыгууну өтүндү. Ал мага эскиз файлын жөнөттү. Мен ачсам, бул болду ...

Дизайн куралдарынын көпчүлүгү дубал менен курулган бакчалар. Эгерде бир кесиптешиңиз Photoshopто иштеп жатса, анда башка кесиптеши ал долбоорду Скетчте ача албайт. Бүтүндөй жамаатыңызга бир эле куралды колдонуу жетиштүү эмес - алар ошол куралдын ошол эле версиясын колдонушу керек.

Marvel жана Фигма бул жерде жакшы иштешет, акысыз пландарды жана кызматташуунун инновациялык мүмкүнчүлүктөрүн сунушташат.

Ошентип, дизайн шаймандарынын келечеги кандай болот?

Дизайн куралдарындагы инновациялар абдан баалуу жана жакында бул жерде көп кездешет. Airbnb дизайн шаймандарында Jon Gold and Benjamin Wilkins React-Sketchapp программасында иштешип, React компоненттерин алып, аларды эскиздин ичине камтыйт. Джон менен Бен ошондой эле салфетка эскиздерин алып, аларды реакциянын компоненттерине айландырган жаңы куралдын үстүндө иштеп жатышат.

Адам Морз, Брент Джексон жана Джон Отандер Композитордо инструменттер топтомун иштеп жатышат, алар негизинен ушул макалада жана дүйнөдөгү бардык көйгөйлөрдү чечет.

Мен Modulz, жаңы дизайн куралы жана ачык булактуу дизайн тутуму боюнча иштеп жатам, ал ушул макалада айтылган көйгөйлөрдү чечүүгө багытталган. Эгер сизди кызыктырса, жаңылыктарды Twitter баракчасынан издеңиз.

Инструменттерди жаңыртуу маанилүү, бирок билим берүү көйгөй болуп саналат. Дизайн коомчулугу системалуу түрдө жасалгалоочу куралга даяр эмес. Көпчүлүк дизайнерлер курулуш системаларын кызыктырбайт. Кээ бирөөлөр үчүн, JPG акыркы максаты - Дриблблди жакшы көрөт.

Биз кандайдыр бир жол менен отчеттуулук маданиятын шыктандырышыбыз керек. Иштеп чыгуучулар узак жылдар бою отчеттуулук маданиятын сактап келишкен. Алардын кодун текшерип турган куралдар бар. Эгер иштеп чыгуучу бир нече жолу алардын катуу коддук көрсөтмөлөрүнөн четтесе, анда маселе чечилет деп ишенсеңиз болот.

Ошол эле учурда, дизайнерлер көбүнчө катмарлардын тоолорун чогултушат, алар катмардын аталышына, топтоштурулушуна жана иреттелишине анча маани беришпейт. Ар бири өз-өзүнчө. Чыгуу (растрдык сүрөт) киргизүү (вектордук катмарлар) аркылуу ишке ашпай калгандыктан, дизайнерлерге жүктөлгөн реалдуу жүктөр жок. Дизайнерлер мындай жетишсиздикти көбүнчө дизайн чеберчилигин романтикалап, өзүлөрүн сахнага чыгара турган сыйкырчылар катары сүрөттөп, акташат.

Инклюзия маданиятын шыктандырышыбыз керек. Көпчүлүк адамдар үчүн текстти окууга тоскоол болгон ультраак тексттик түстөр же веб-баракчаларды жүктөө кыйыныраак болгон өтө жогорку сапаттагы тексттер же түстүү сокур адамдар үчүн түшүнүксүз болгон UI элементтери сыяктуу катачылыктарды активдүү токтотушубуз керек. Азыркы учурда, мындай мыйзам бузуулар дизайн коомчулугунун кол чабуулары менен коштолду. Эгер биз акылдуу дизайн куралын кубаныч менен кабыл алсак, анда биз бул маданияты өзгөртүшүбүз керек.

Эгерде системалуу долбоорлоо куралы жүрөгүбүздү козгосо, анда ал биринчи кезекте билим алышы керек.