Adobe тажрыйбасы Дизайн Tricks, сунуштар, жана техника

01 07

Adobe тажрыйбасы Дизайн Tricks, сунуштар, жана техника

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

Бирок, биринчиден, сен Prototyping Программа деген эмне деген суроо туулушу мүмкүн. Бул чөйрөдө негизги оюнчулар арасында Proto.io, принцип, UXPin, бар Atomic.io , тажрыйба Дизайн жана Суперстан. мисалы, эскиз 3 арыздарды айырмаланып, статикалык үлгүлөрү өндүрүлгөн Photoshop жана Illustrator, бул жуурулушуу редакторлор аткартуу, кыймылды жана бүгүнкү күндөгү мобилдик жана интернет долбоорлоо мейкиндигинде бирдиктүү башка өзгөчөлүктөрдү киргизүү.

Колдонуучу мобилдик жана шексиз, лазер менен окшош багыт пайда болгон, бул дизайнер, бир нече очерктери тарашына бир нече comps чыгарып, андан кийин, долбоор чыгарылбай же WEB Server жүктөп үчүн мындан ары жетиштүү болот. UI / UX Workflow түп-тамырынан өзгөрүлгөн нерселер бар. колдонуучу, очерктери, wireframes, mockups жана Prototyping болору жүрүшүндө ар бир кадамы, азыр көп колдонуучу текшерүүдөн өтүүгө тийиш.

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

Чынында эле, бул программа бүгүн "Rapid Prototyping" Дизайн жана өнүгүү чөйрөсүндө негизги компоненти болуп калды.

Албетте, бул жаатта тажрыйбасы Дизайн менен кээ бир кызыктуу болсун.

02 07

Adobe тажрыйбасы долбоордогу бир Simple ыраазычылык менен Destination PIN түзүү

XD бири тыкан аспектиси багыты Чийме аспаптары жана аны пайдалануу болуп саналат. сөлөкөт табылбай жатабы? Көйгөй жок. Өз Roll. Бул жерде кандай:

1. Ыкшап, Option / Alt-Shift баскычтар менен Эллипс куралы жана тандоо айлана алганы.
2. Тандалган айлананын менен FF0000 менен толтуруу түсү жана касиеттерин, "эч ким" деген чек коюлган.
3. казык пункттарды көрсөтүү чөйрөсүн эки жолу чыкылдатуу менен. карай төмөнкү кеме казыкты сүйрөп.
4. Тандалган Анкор Пойнт кош чыкылдатуу ийри сызыктар менен алмаштырып жатышат.
5. ак толтуруу жана эч Сток менен дагы бир аз чөйрөсүн жакында. ордуна, аны жылдыруу, казыкты, чөйрө тандоого. Касиеттерин жогору жагындагы Align панелинен Horizontal борбору баскычын чыкылдатып, Pin түзүлгөн.

03 07

Adobe тажрыйбасы долбоордогу бир Негизги мунарык түзүү

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

1. бир жаңы artboard түзүү жана өбөлгөлөрү сүрөт кошуу.
2. Тик бурчтук куралы А тандоо бейнеси менен тик бурчтук жакындайт. Тик тандалган менен, Ак менен толтуруп, эч Мээге кан койду.
3. Касиеттери панелинен Тик тандалып, тандоо Негизги мунарык менен. үч Sliders мунарык суммасы, Жарык жана чиелениши болуп саналат. Мына, алар эмне болот:

• Blur суммасы: абалда астында айкелдин blurriness өзгөрткөн. эң жогорку балл +50 болуп саналат.
• Жарыктык: бейнеси боюнча көз ирмемдерин жана көлөкө тууралап. Минималдуу маани -50 жана максималдуу балл +50 болуп саналат.
• Чиелениши: калыптаныш ачык-айкындуулугун жана түзүлүшү боюнча бейнеси болгон талапты бирибиз. маанилери 0% тен 100% ке чейин жетет.

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

04 07

Adobe тажрыйбасы долбоордогу бир БандЫрлогин түзүү

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

1. XD сиздин artboard түзүү, сүрөт кошуу жана көчүрүүгө жана тиешелүү UI баштык бир Interface элементтерин көчүрүп, - File> Open UI Kit ... - artboard салып. Жогорудагы сүрөттө Сүрөт Status тилкесин түзөт жана App Бар кыйын көрүүгө.
2. Тик бурчтук куралын тандап, тик бурчтук кынынан сууруйм. Касиеттери коммисиясы толтуруп тандоо жана түс тандагыч менен поп ылдый градиент тандоо. Ак жана кара кылып үчүн градиент түстөрдү коюу. 60% Opacity- жана Ак А балл 0% га чейин - баасын аныктайт.
3. Тик тандап, тандалган Object> уюштуруу> артка жөнөтүү. Interface элементтер эми айкелдин үстүнөн көрүнүп турат.

05 07

Түзүү Adobe тажрыйбасы долбоордогу Сүрөтү Avatar

Жалпы Дизайн Үлгү адамдар бири-бири менен сүйлөшүп, спикер сүрөт экранда пайда Чат колдонмолор бар. Бул Avatars, адатта, кашка болгон сүрөттөлүштөр. Ал өлгөн жөнөкөй XD бул ишке болот. Бул жерде кандай:

1. Сиз бир сүрөттөлүш жана artboard боюнча тегерек же башка абалда менен башталат. Сен ичинде болгон ар кандай түс менен чөйрөсүн толтура аласыз. Эмне кереги жок сокку түстү кошуу болуп саналат. Бул таасир түзүп жатканда жок болот, эмне үчүн убара. Сиз чөйрөсүн Репортаж керек болсо, анда маалымат тактасына аны көчүрүп.
2. бейнеси боюнча айлана жылдыруу жана сүрөт менен чөйрөсүн да тандоо. Тандалган бот объектилери менен тандап Object> Shape менен маскасын. Сиз Чычкан бошотуп жатканда, для түзүлгөн. Ал жерден аны өзгөртүү мүмкүн.
3. Эгер мээге кошуу үчүн керек болсо, artboard көздөй сиздин тактасына отурган чөйрөсүн кой. Тандалган көчүрмөсү менен касиети толтуруп, сокку түсүн жана туурасын кошуу өчүрүп. аларды сызык да, объекттерди жана касиеттери панелдин жогору жагында Align параметрлерине борбору Align баскычтарын басып.
4. Сиз беткап айланасында сүрөт көчүп келсе, эки эсе көп беткап чыкылдатуу. Бул сүрөттү жана маска өзгөрөт көрсөтөт. Сүрөттөгү Click жана кызмат орду, аны сүйрөп. Сиз Чычкан бошотуп жатканда, сүрөт маскасы ичинде өзүнүн жаңы абалда болот.

06 07

Play Adobe тажрыйбасы Дизайн Artboards менен

Тажрыйба Дизайн artboards мазмунду жайгаштыруу үчүн гана бар эмес. Алар да, башкара алат. Бул жерде сиз кыла ала турган нерселерге бир жубайлар:

1. Сиз artboard-батышын жана Portrait нускалары керек болсо, artboard жана тандалып алынган эки нускада менен, касиеттери панелинен пейзаж баскычын кайталап. Artboard Пейзаж багытына өзгөрөт. Artboard ага мазмун бар болсо, Artboard атын чыкылдатып, Artboard касиеттери касиеттери тактасындагы пайда болот.
2. Artboard бир түс кошуу үчүн, жана бул маселе боюнча долбоор, Artboard тандоо жана касиеттери коллегиясынын көрүнүшү бөлүмүндө толтура түс чибин чыкылдатуу. түсү үчүн алтылык киргизип, + жышаан болот. түстүү бир түс катары кошулат. башка бул түстү колдонуу үчүн, бир нерсени тандоо жана түсүн колдонууга Көнүмүш Color чибин чыкылдатуу.
3. Artboards тик жылдырылуучу жүргүзүлүшү мүмкүн. Бул үчүн, artboard жана касиеттери такталар же ылдый artboard түбүнө сүйрөп же анын бийиктигин өзгөртүү тандоо. касиеттери панелдин жылдырылуучу жагында, поп түшүп менюдан тик тандоого жана экрандын терезеси бийиктигин кирет. Бул мыкаачылык менен көк сызык сага портуна түбүн көрсөтөт. аны сынаш үчүн, Play баскычын чыкылдатып, алыс жылган. жылдырууну өчүрүү үчүн, өйдө тандоо бири ылдый калкып.

07 07

Adobe тажрыйбасы долбоордогу бир Mobile UI комплектиси түзөтүү

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

1. Сиз касиеттери коллегиясынын Artboard куралын жана Google бөлүмүндө Android Mobile тандоо тандоо менен башталат.
2. Select File> Open UI Kit> Google материалдар. Бул материалдар Дизайн UI комплектиси ачат. Magnifying Glass тандоо жана т Guides artboard экрандын Көрнөк. Мен бул адам менен баштагым келип турат, анткени ал мага Interface элементтердин туура экрандагы жайгаштыруу үчүн жол берет. Сиз Blue барларынын биринде басып Эгер ал кулпуланган көрүшөт. Кулпусун ачуу үчүн алардын ар тиркелген кулпусун Click. artboard Marquee жана маалымат тактасына тандоо көчүрүп. Сиздин документ кайтуу жана artboard салып экранды кой.
3. бир жолу App тилкесинде artboard ошол катмарын Click. Аны тандоо болорун карап көрөлү. Select Object>> уюштуруу алдыга алып келгиле. Сиздин тандоо Screen куралын жогору турат. Бул экран өзгөртө алат силерге элементтердин ар бири айтышыбыз керек.
4. Double жогору Status Bar чыкылдатып, касиеттери Panel с Сүр-жылы 455A64 менен толтуруу түсү. Double App тилкесин басып 607D8B үчүн, моокуму койду. Бул силерге бир UI угузуу системадагы ар бир элемент долбоордун түс техникалык талаптарга жооп бериши үчүн өзгөртө алат айтышыбыз керек.
5. сүрөтчөлөргө жөнүндө эмне айтууга болот? Бул жерде алардын түсүн өзгөртүү керек. Double аны тандоо үчүн жүрөгүн чыкылдатуу. Сиз касиеттери коллегиясы карап көрсөк, Сен тандап өзгөртүү мүмкүн эмес деп ойлоп калышы мүмкүн. Андай эмес. Кош жүрөк дагы бир жолу чыкылдатуу. ачык касиеттери жана FF0000 менен толтуруу тъскё ёзгёрёт. калган, ирээтин жана текст боюнча бул эки кош чыкылдатуу азгырууда кайталаъыз.