Менин атым Марина Чернышова, мен буюмдардын дизайнери жана насаатчысымын. Менин мурунку макаламда " ,” Мен эмне үчүн менин оюмча, баштапкы этаптагы стартаптарга толук убакыттагы дизайнер керек эмес жана биринчи прототибин долбоорлоого теориялык көз караштан кандай мамиле кылуу керек экенин сүрөттөп бердим. Бул макалада мен сизди практикалык жагын карап көрүүгө чакыргым келет. Мен негиздөөчүлөр жана алгачкы технологиялык ишкерлер өздөрүнүн биринчи прототибин түзүү үчүн колдоно ала турган пайдалуу булактар менен бөлүшөм. Бюджет боюнча кыска? Бул Дизайн методологияларын толук убакыттагы дизайнерсиз биринчи MVP куруу үчүн колдонуңуз Эгерде сизде өзүңүздүн өнүмүңүздү толук иштеп чыгууга кызыгууңуз жана убакытыңыз болсо, анда мен сизге Фигманы үйрөнүүнү сунуштайм. Figma булутка негизделген дизайн программасы, ал негизинен долбоорду иштеп чыгуу кадамына чейин идеяларды тартуу, долбоорлоо жана прототиптөө үчүн колдонулат. Бул курал менен дизайнерлер веб-браузер аркылуу макеттерди түзүү, сүрөттөрдү кошуу, түстөр жана шрифттер менен эксперимент жүргүзүү жана башка көп нерселер үчүн чогуу иштей алышат. Figma күчтүү инструмент, бирок ошол эле учурда колдонууга оңой жана команданын бардык мүчөлөрүнүн ортосундагы байланыш үчүн абдан пайдалуу. Figmadan тышкары, FigJam жана Figma слайддарын колдонуу абдан ыңгайлуу. FigJam - бул биргелешкен командалык иш үчүн атайын иштелип чыккан такта куралы. Бул командаларга реалдуу убакытта кызматташууга, идеяларды визуалдаштырууга жана биргелешип мээ чабуулуна мүмкүнчүлүк берет. Figma Slides - бул дизайнерлер жана алардын командалары үчүн ылайыкташтырылган презентация куралы. FigJam жана Figma слайддары Figma колдонуп жаткан адамдар үчүн бардык дизайндарыңыз, такталарыңыз жана презентацияларыңыз бир экосистемада болушу үчүн жакшы. Wireframes Wireframes - бул веб-сайт, колдонмо же программалык камсыздоо интерфейси сыяктуу санарип продуктунун болжолдуу схемалык визуалдык көрүнүшү. Мурунку макаламда мен Колдонуучунун агымы деген эмне экенин түшүндүргөм — бул колдонуучунун белгилүү бир тапшырманы же максатты аткаруу үчүн продукт же веб-сайт аркылуу басып өткөн жолун көрсөткөн визуалдык диаграмма*.* Колдонуучунун агымынын негизинде сиз биринчи жөнөкөй нерсени түзө аласыз. зым рамкаларынын версиясы. Продукттун түзүмүн түшүнүү үчүн сиз же сиздин командаңыз буюмду иштеп чыгууга киришкенге чейин керек. Алар түстөр, шрифттер жана иконалар сыяктуу дизайндын нюанстарына алаксыбай, UX дизайн сүйлөшүүлөрүн багытталган жана конструктивдүү кармап, командаларга талаптарды тууралоого жардам берет. Wireframes такыр башкача ишке ашырылышы мүмкүн, алар жогорку деталдуу жана төмөнкү деталдуу болушу мүмкүн. Төмөндө кээ бир негизги мисалдарды караңыз: Сол сүрөт (контент блоктору бар Wireframe сыяктуу UI) Оң сүрөт (графиктери жана деталдаштырылган компоненттери менен жогорку тактыктагы UI) Төмөн деталдаштырылган зымдарды камтыйт Жогорку деталдаштырылган зым камерасы камтыйт Түзүлүшүнө, жайгашуусуна жана колдонуучу агымына көңүл буруңуз Детальдуу функционалдуулукка жана конкреттүү дизайн элементтерине көңүл буруңуз Негизги боз түстөгү же сызылган эскиздер Түстөрдү, бөлгүчтөрдү жана диаграммалар сыяктуу өзгөчө элементтерди камтышы мүмкүн Тексттердин сүрөттөрү үчүн толтургучтарды колдонот Чыныгы же өкүл мазмунду камтыңыз Адатта статикалык, жебелер менен навигацияны көрсөтүшү мүмкүн Көбүнчө интерактивдүү, колдонуучунун потенциалдуу аракеттерине туура келет Мен эң жөнөкөйдөн баштоону сунуштайм: негизги экрандарды болжолдуу баш жана баскычтар менен иретке келтириңиз жана тексттер менен көп убара болбоңуз. Эгерде сиз Figmaда иштесеңиз, алкактар шаблондор аркылуу дароо реалдуу өлчөмдө түзүлүшү мүмкүн. Чыныгыраак интерфейс элементтери менен кеңири деталдаштырылган зымдарды түзүү үчүн, көп убакытты үнөмдөө үчүн фигма үчүн даяр Figma активдерин колдонсоңуз болот (мисалы, ). бул китепкана Бул этапта сиз түстөр же шрифт сыяктуу майда нерселерге көңүл бурбай, прототибин жасап, аны досторуңуздун бирине көрсөтсөңүз болот. Эгер бул мобилдик колдонмо болсо, аны реалдуураак кылуу үчүн телефонуңуздан шилтемени ачсаңыз болот. Бардык экрандардын ортосунда бардык зарыл өткөөлдөрдүн бар-жоктугун текшерүү маанилүү жана колдонуучу артка кайтып же аракетти жокко чыгарышы мүмкүн. Даяр компоненттер китепканалары Бардык нерсени нөлдөн баштап долбоорлоонун кереги жок. Figma коомчулугундагы даяр активдерди изилдөө абдан пайдалуу, аны сиз өз продуктуңузду долбоорлоо үчүн колдоно аласыз. Figma'да Material UI сыяктуу көптөгөн жеткиликтүү китепканалар бар. Бул китепканалар көптөгөн пайдалуу элементтерди камтыйт, алар иконалар жыйындысынан мурунтан эле чогултулган барактарга чейин. Элементтер, адатта, бардык абалдарды камтыйт (Hover жана тандалган абалдар, эскертүүлөр, сүрөттөмөлөр ж.б.). Бүткүл интерфейс абстракцияларын кичинекей компоненттерден чогултса болот, мисалы, баскычтары жана ичиндеги таблицалары бар модалдык диалог. Элементтердин өзүнөн тышкары, аларды кантип туура колдонуу керектиги боюнча нускамалар болушу мүмкүн, алар маржалар, аралыктар ж.б.у.с. Бул китепканаларда иштеп чыгуучулар колдоно ала турган компоненттер, ал тургай бүтүндөй макеттер бар. Керек болсо, келечекте ал жерге өз элементтериңизди кошо аласыз. Мисалы, сизге диаграммалар керек болсо, аларды башка китепканадан ала аласыз. Эгер сизге стандарттуу эмес элемент керек болсо, анда аны нөлдөн баштап иштеп чыгууга жана бардык штаттар менен китепканага кошууга болот. Даяр графикалык активдер Ар кандай продукт тең салмактуу жана жакшы иштелип чыккан графиканын аркасында алда канча жетилген жана ойлонулган көрүнүшү мүмкүн: иллюстрациялар, иконалар, анимациялар ж.б. Бул үчүн кошумча убакыт коротуунун кереги жок, бул жерде сиз даяр топтомдорду да колдонсоңуз болот. Ар кандай стилдеги жана түстөгү мындай топтомдор көп. Алар ошондой эле тапса болот же эгер сизге 3D графикасы жакса. Көбүнчө чоң топтомдор коммерциялык максатта төлөнөт, бирок алар кыйла жеткиликтүү. Figma коомчулугу Spline коомчулугу Бул активдерди өнүмүңүздүн ичинде гана эмес, маркетинг материалдарыңыз, социалдык тармактагы сүрөттөрүңүз жана пич-дексиңиз үчүн да колдонсо болот. Ал жерден ар кандай презентация шаблондорун таап, стилиңизге жараша өзгөртө аласыз. Шилтемелер & Inspiration Колдонуучунун агымдарын жана ар кандай өнүмдөрдүн скриншотторун чогулткан бир нече платформа бар, мисалы же . Сиз атаандаштарды талдоо же жөн гана илхам үчүн аларды изилдей аласыз. Алар белгилүү бир функциянын үстүндө иштеп жатканыңызда чындап эле пайдалуу жана сиз бул кеңири таралган UX үлгүсү экенин билесиз, аны текшерүү же сүйүктүүлөргө сактоо. Сиз аларды категориялар боюнча карап же белгилүү бир функцияны ачкыч сөздөр боюнча издей аласыз. pageflows.com mobbin.com Колдонуучунун жылмакай тажрыйбасынын үстүндө иштөө менен, учурдагы чечимдерге таянуу дайыма жакшы, анткени алар колдонуучуларга түшүнүктүү жана тааныш. Сиз инновациялык функциянын үстүндө иштеп жатсаңыз да, сиз ар дайым башка аймактан мааниси боюнча окшош үлгүлөрдү колдоно аласыз. Корутунду Бүгүнкү күндө санариптик рынок атаандаштыкка жөндөмдүү жана колдонуучулар жакшы UX жана UIде тажрыйбалуу. Муну буюмду иштеп чыгуунун алгачкы этабында эле "декорацияга" ашыкча убакыт коротпой, аны атаандаштык артыкчылык катары колдонууга аракет кылганыңыз оң. Менин оюмча, дизайндын толук жоктугу менен ар бир экрандын идеалдуу дизайнына сарпталган көп убакыттын ортосунда тең салмактуулук бар. Жөнөкөйлөштүрүүнүн жана керексиз кадамдарды жана аракеттерди болтурбоо аркылуу жылмакай UXге жетүүгө болот жана алгылыктуу UI абдан жөнөкөй, бирок жагымдуу болушу мүмкүн. Эң негизгиси, даяр чечимдерди колдонуудан тартынбаңыз жана колдонуучу агымын түзүү сыяктуу дизайнга чейинки кадамдарды өткөрүп жибербөө. Бул учурда, ката кетирүү же убакытты текке кетирүү коркунучу кыйла азаят, бул сиздин ресурстарыңызды үнөмдөйт жана мотивацияга таасирин тийгизбейт.
