Adobe Experience тәжірибелік трюк, кеңестер және техника

01-ден 07-ге дейін

Adobe Experience тәжірибелік трюк, кеңестер және техника

Adobe тәжірибелік дизайнды Қоғамдық алдын ала қарау ретінде енгізгенде, компания бір уақытта екі таңғажайып ерлікке қол жеткізді. Біріншіден, олар бағдарламалық жасақтама нарығында пайда болған прототипті кеңістікте қалдырды. Екіншіден, пайдаланушыларға «жұмыс істемей жатқан» ойнауға мүмкіндік беріп, пайдаланушыларға бұл прогрестке ықпал ету мүмкіндігін береді. Бағдарлама бірнеше айға қол жетімді болғандықтан, мен кейбір тәжірибе дизайнымен, кеңестерімен және әдістерімен бөлісудің жақсы уақыт деп ойладым.

Бірақ біріншіден, сіз прототипті бағдарламалық жасақтаманың нені білдіреді деген сұрақ тудыруы мүмкін. Бұл кеңістіктегі негізгі ойыншылардың арасында Proto.io, Prinsip , UXPin, Atomic.io , Experience Design және InVision. Эскиз 3, Photoshop және Illustrator секілді қосымшалардан айырмашылығы, графикалық редакторлар бүгінгі мобильді және веб-дизайн кеңістігінде кең таралған интерактивтілік, қозғалыс және басқа да мүмкіндіктерді ұсынады.

Пайдаланушыға арналған мобильді және сөзсіз лазер сияқты фокустаудың арқасында дизайнер бірнеше эскиздерді жинап, бірнеше компиляцияны біріктіріп, одан кейін оны шығарып, оны веб-серверге жүктеуге жеткілікті емес. UI / UX жұмыс процесі іс-әрекеттерді түбегейлі өзгертті. Пайдаланушыны, эскиздерді, сымбатты суреттерді, микотурларды және прототиптерді анықтаудан процестің әрбір қадамы енді пайдаланушыларды кең ауқымды тестілеуге жатады.

Бұл соңғы сатыда - прототибинация - жоба аяқталғанға дейін ауырсыну нүктелері табылған және бекітілген жерде. Мұнда интерактивтілік, қозғалыс, экранды ауыстыру және экрандағы барлық нәрселерді орналастыру өте маңызды. Мәселелер мен проблемалар статикалық сурет ретінде көрсетілмейді немесе ауызша түсіндіріледі. Өйткені бұл өнімдер шынайы адамдарға арналған. Осының бәрін кодқа көшірудің орнына, прототибинг процесі осы мақсат үшін жасалған графикалық бағдарламалық жасақтама арқылы көбірек жүзеге асырылады. Қатені түзету, кескінді ауыстыру, кейбір мәтінді қайта жазу, түймені жылжыту және т.б., үнемі қайта жазуға және отладтауға қарағанда визуалды редакторды пайдалану оңайырақ.

Шын мәнісінде, бұл бағдарламалық жасақтама қазіргі заманғы «Rapid Prototyping» жобалау және дамыту ортасында маңызды құрамдас бөлігі болды.

Осыған байланысты, тәжірибе дизайнымен көңілділікке бөлейік.

02/07

Adobe Практикалық дизайндағы қарапайым шеңбер көмегімен тағайындау пинтін жасаңыз

XD-нің бір оң аспектісі оны векторлық сурет құралдарын пайдалану болып табылады. Белгішені таба алмадыңыз ба? Проблема жоқ. Өзіңді айналдыр. Мұнда келесідей:

1. Эллипс құралын таңдап, Option / Alt-Shift пернелерін басу арқылы шеңберді сызыңыз.
2. Таңдалған шеңбермен FF0000 түске толтырыңыз және Шекарадағы «none» параметріне қойыңыз.
3. Тірек нүктелерін көрсету үшін шеңберді екі рет басыңыз. Төменгі анкерді төмен қарай сүйреңіз.
4. Таңдалған байланыс орнына екі рет шертіп, қисықтар жолдармен ауыстырылады.
5. Ақ түсте басқа кішкентай шеңберді сызыңыз және ештеңе қойыңыз. Оны орнына жылжытып, штырь мен шеңберді таңдаңыз. Сипаттардың жоғарғы жағындағы Кескін тақтасында Көлденең орталық түймесін басып, Пин түзеді.

03 07

Adobe Experience дизайнын жасауда Background Blur жасау

Фондық сурет үстінде мәтін немесе басқа мазмұн болуы әдеттегі. Мәселе мұнда бейнеленген, көбінесе оның мазмұнын жоғарылатады. Бұл мәселені шешудің бір жолы - бұл фондық суретті бұзу. Кескінді Photoshop немесе басқа кескінді өңдеу бағдарламалық жасақтамасында бұзып тастауға болады, бірақ бұл біршама тиімді емес, әсіресе, XD енді сізге осы тапсырманы орындай алады. Мұнда келесідей:

1. Жаңа жұмыс орнын жасаңыз және өң суретіңізді қосыңыз.
2. Тік бұрышты құралы таңдап, nd кескін үстінен төртбұрыш сызыңыз. Таңдалған тіктөртбұрышпен Толтыруды Ақшаға және Соққыны ешбірге орнатыңыз.
3. Таңдалған тіктөртбұрышпен Сипаттар тақтасындағы Фонды блоу таңдаңыз . Үш жүгірткі бұлыңғырлық, жарықтық және ашықтық болып табылады. Міне, олар:

• Бұлыңғыр сома: Суреттің төменгі жағында пішіннің ақшылығын реттейді. Максималды мән - +50.
• Жарықтық: Кескіндегі негізгі жақтар мен көлеңкелерді реттейді. Ең аз мән -50 және ең жоғарғы мән - +50.
• Айқындылық : пішіннің ашықтығына және суреттің нысаны бойынша көрінуіне әсер етеді. Маңызы 0% -дан 100% -ға дейін.

Егер сіз «нәрселерді өшіруді» қаласаңыз, кескіннің түсін өзгертіңіз және суретдің «көрінісін» өзгерту үшін Opacity мәні арқылы ойнаңыз.

04 07

Adobe Experience Design жобасында скрим жасау

Жалпы дизайнерлік проблема интерфейс элементтерінің элементтері ортақ түс болуы керек, бірақ фондық кескін немесе қатты түсте орналастырылған кезде жоғалады. Ерітінді - скрим. Скрим - интерфейстің элементі мен артқы фон арасында орналастырылған бірнеше мөлдір градиент. Бұл XD-те оңай орындалады. Мұнда келесідей:

1. XD-де өзіңіздің жұмыс үстеліңізді жасаңыз, суретті қосыңыз және интерфейс элементтерін тиісті UI жиынтығынан - Файл> Ашық UI жинағынан көшіріңіз ... Жоғарыдағы суреттегі фотосурет Күй жолағын және бағдарлама жолағын көруді қиындатады.
2. Тік бұрышты құралды таңдап, тіктөртбұрышты сызыңыз. Сипаттар тақтасында Толтыру пәрменін таңдап, Түс таңдауышындағы қалқымалы мәзірден Градиент тармағын таңдаңыз. Градиентті түстерді Қара және Ақ етіп орнатыңыз. A мәнін - Opacity мәні - 60% дейін және Ақ A мәнін 0% мәніне орнатыңыз.
3. Таңдалған тіктөртбұрышпен Object> Arrange> Send Backward таңдаңыз . Интерфейс элементтері енді кескін үстінде көрінеді.

05 07

Adobe Experience Design жобасында суреттердің кескінін жасау

Жалпы дизайн үлгісі адамдар сөйлесіп, экранда сөйлеушінің суреті пайда болатын Chat қолданбаларынан табылған. Бұл аватарлар әдетте маскирленген суреттер болып табылады. Бұл өлі оңай, оны XD-да орындауға болады. Мұнда келесідей:

1. Сіз сурет пен шеңберден немесе суреттегі басқа кескіннен бастайсыз. Кез-келген түспен шеңберді толтыра аласыз. Сізге қажеті жоқ - инсульт түсті қосу. Бұл әсерді жасаған кезде жоғалады, сондықтан неге алаңдауға болады. Егер сіз шеңберді сақтауға тура келсе, оны аралық сақтағышқа көшіріңіз.
2. Айналаны суретке жылжытып, кескінді және шеңберді таңдаңыз. Таңдалған бот нысандары арқылы Object> Mask with Shape таңдаңыз . Тінтуірді босатқанда, Аватар жасалады. Одан оны өзгертуге болады.
3. Егер инсульт қосу керек болса, буферіңізде отыратын дөңгелек үсті тақтаға қойыңыз. Таңдалған көшірмені Свойства ішіндегі толтыруды өшіріп, инсульт түсі мен енін қосыңыз. Оларды қатарластыру үшін екі нысанды таңдап, сипаттар тақтасының жоғарғы жағындағы Align (Тақтаны реттеу) опцияларындағы Center Align (Түзету) түймешіктерін басыңыз.
4. Фотосуретті маскада жылжытқыңыз келсе, масканы екі рет басыңыз. Бұл суретті және маска пішінін көрсетеді. Суретті нұқыңыз және оны орнына апарыңыз. Тінтуірді босатқанда, сурет маска ішінде жаңа орынға айналады.

07 07

Adobe Experience Design Artboards арқылы ойнау

Тәжірибе дизайнының жұмыс тақтасы мазмұнды орналастыру үшін ғана емес. Олар сондай-ақ манипуляциялауға болады. Міне, сіз жасай алатын бірнеше нәрсе:

1. Егер Сізге пейзаждың пейзаждық және портреттік нұсқалары керек болса, жұмыс үстелін қайталаңыз және таңдалған көшірмені Properties (Сипаттар) тақтасында пейзаждың түймешігін басыңыз. Көрініс Ландшафты бағдарға ауысады. Егер үстіңгі деректемеде мазмұн бар болса, тақтайшаның атын нұқып, тақтасы сипаттары тақтасында пайда болады.
2. Көрініс тақтасына теңшелетін түс қосу үшін және осы мәселе бойынша жоба тақтасын таңдаңыз және Сипаттар тақтасының «Көрініс» бөліміндегі «Толтыру» түсті чипті басыңыз. Түс үшін он алтылық мәнді енгізіп, + белгісін басыңыз. Түс пайдаланушылық түс ретінде қосылады. Түсті басқа жерде қолдану үшін, нысанды таңдап, Түсті қолдану үшін Custom Color чипін басыңыз.
3. Арбалар тігінен жылжиды. Мұны істеу үшін, жұмыс үстелін таңдап, оның биіктігін немесе Сипаттар панелдерінде немесе жұмыс тақтасының төменгі жағын төмен қарай сүйреп апарыңыз. Сипаттар панелінің Айналмалы аймағында ашылмалы мәзірден тігінен таңдап, экранға арналған көрініс биіктігін енгізіңіз. Бұл кесілген көк сызық сізді қарау портының төменгі жағын көрсетеді. Оны тексеру үшін Play (Ойнату) түймесін басып, жылжыңыз. Жылжуды өшіру үшін Жылжу ысырмасы ішінен Жоқ түймешігін таңдаңыз.

07 07

Adobe Experience Design жобасында мобильді UI жинағын өңдеңіз

Тәжірибе дизайнында iOS, Android және Windows UI құрылғыларын жасау үшін UI жиынтығы бар. Сіз оларды алғаш ашқан кезде, сіз олардың орнына жақсы орнатылған деп ойлайсыз. Бұл жинақтардағы биттер мен бөлшектердің барлығы әрқайсысы толықтай өзгертілмейді. Android телефон кабелін құру арқылы білейік.

1. Сіз Artboard құралын таңдап , Properties Panel тақтасының Google бөлімінде Android Mobile қызметін таңдап бастаңыз.
2. Файл> Open UI Kit> Google Материалы таңдаңыз . Бұл материалды дизайн UI жиынтығын ашады. Экранды бағыттаушы кескінін көрсететін магнит шыны мен маркасын таңдаңыз . Мен осыдан бастауды ұнатамын, себебі ол интерфейс элементтерін тиісті түрде экранда орналастыру үшін нұсқаулықтарды береді. Егер сіз Көк жолақтардың бірін бассаңыз, ол бұғатталған. Оның құлпын ашу үшін олардың әрқайсысына бекітілген құлыпты басыңыз . Меңзерді шығарып, таңдауды аралық сақтағышқа көшіріңіз. Құжатқа оралып, экраныңызды жұмыс үстеліне қойыңыз.
3. Жұмыс үстелінің үстіңгі жағындағы Қолданбалар тақтасында бір рет басыңыз. Оны қалай таңдауға болатынын байқаңыз. Объект> Орнату> Алға әкеліңіз. Сіздің таңдауыңыз Экрандағы нұсқаулықтардың үстінде. Бұл сізге экрандағы элементтердің әрқайсысының редакциялануы мүмкін екенін айтуы керек.
4. Жоғарғы жағындағы Күй тақтасын екі рет нұқып, Сипаттар панелінде және Толтыру түсіне 455A64 мәніне қойыңыз . Қолданбалар тақтасын екі рет басыңыз және оны толтырыңыз 607D8B. Бұл сізге UI жинағындағы әрбір элемент жобаның түс ерекшеліктеріне сәйкес келуі үшін өңделуі мүмкін екенін айтады.
5. Иконалар туралы не деуге болады? Түсін қалай өзгерту керек. Оны таңдау үшін жүрекке екі рет басыңыз . Егер сіз Сипаттар тақтасына қарасаңыз, таңдауды өңдей алмайсыз деп болжауға болады. Бар емес. Жүректі тағы бір рет басыңыз . Сипаттар ашық және толтыру түстерін FF0000 мәніне өзгертесіз. Қалған белгішелер мен мәтін үшін бұл екі рет екі рет нұқуды қайталаңыз.