Адобе Екпериенце Десигн Трицкс, Типс и Тецхникуес

01 од 07

Адобе Екпериенце Десигн Трицкс, Типс и Тецхникуес

Када је Адобе представио Екпериенце Десигн као јавни преглед , компанија је истовремено остварила два веома невероватна подвига. Прво, створили су простор на новом тржишту софтвера за прототиповање. Друго, створили су прилику за кориснике да се играју "у току рада" и омогућавају корисницима да утичу на тај напредак. Сада када је апликација доступна неколико месеци, мислила сам да би било добро да поделите неке трикове, савете и технике искуства.

Али прво, можда се питате шта се подразумева под именом Прототипинг Софтваре. Међу главним играчима у овом простору су Прото.ио, Принцип, УКСПин, Атомиц.ио , Екпериенце Десигн и ИнВисион. За разлику од апликација као што су Скетцх 3, Пхотосхоп и Иллустратор где се стварају статички дизајн, ови графички уређаји уводе интерактивност, покрет и друге карактеристике уобичајене у данашњем мобилном и веб дизајном простору.

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

То је последња фаза - прототипирање - где су точке болова откривене и фиксиране пре него што се пројекат пресели у коначну производњу. Ово је тако критична интерактивност, покрет, транзиција екрана и постављање свега на екрану. Проблеми и проблеми се не могу једноставно приказати као статичка слика или вербално објаснити. На крају крајева, ови производи су за стварне људе. Уместо да све то преведе на код, прототип процес се све више покреће графички софтвер дизајниран само за ту сврху. Лакше је поправити грешку, заменити слику, преправити неки текст, померити дугме и тако даље користећи визуелни едитор него стално преписивати и исправљати код.

Заправо, овај софтвер је постао кључна компонента у данашњем "Рапид Прототипинг" дизајну и развоју.

Са тим речено, хајде да се мало забавимо са Екпериенце Десигн.

02 од 07

Направите одредишну везу са једноставним кругом у Адобе Екпериенце Десигн-у

Један уредан аспект КСД-а је његова употреба вектора за цртање. Не можете наћи икону? Нема проблема. Рулирајте свој. Ево како:

1. Изаберите алатку Еллипсе и, притискањем тастера Оптион / Алт-Схифт, нацртајте круг.
2. Са изабраним кругом, поставите боју Попуњавања на ФФ0000 и Бордер на "ноне" у својствима.
3. Двапут кликните на круг да бисте приказали тачке сидра. Повуците доњи сидро надоле.
4. Двапут кликните на изабрану тачку сидра и кривине се замењују линијама.
5. Нацртајте још један мали круг са белим попуњавањем и без стоке. Померите га у положај и изаберите пин и круг. На панелу Алигн на врху Пропертиес (Својства) кликните на дугме Хоризонтални центар и креира се пин.

03 од 07

Направите замућење позадине у дизајну Адобе Екпериенце

Обично је имати текст или неки други садржај преко позадинске слике. Проблем овде је слика, чешће него не, надмашује садржај изнад њега. Један од начина за решавање овог проблема је замућење позадинске слике. Можете замаглити слику у Пхотосхоп-у или другом софтверу за уређивање слика, али то је донекле неефикасно, нарочито зато што КСД сада може да вам обради овај задатак. Ево како:

1. Креирајте нову плочу и додајте своју слику у позадини.
2. Изаберите алатку правоугаоника и нацртајте правоугаоник преко слике. Са изабраним правоугаоником, подесите Попуните на бело и Строке на ниједан.
3. Са изабраним правоугаоником изаберите Бацкгроунд Блур на панелу са својствима. Три клизача су Блум количина, осветљеност и непровидност. Ево шта раде:

• Блур Количина: Подешава замућеност слике испод облика. Максимална вредност је +50.
• Осветљеност: Подешава осветљење и сенке на слици. Минимална вредност је -50, а максимална вредност је +50.
• Опацити: утиче на транспарентност облика и видљивост слике под облику. Вредности се крећу од 0% до 100%.

Ако стварно желите да "пребаците ствари", промените боју облика и репродукујте вредност Опацити како бисте променили "изглед" слике.

04 од 07

Креирајте Скримин у Адобе Екпериенце Десигн

Заједнички проблем дизајна су елементи интерфејса елементи морају бити уобичајена боја, али су изгубљени када се поставе преко позадинске слике или чврсте боје. Решење је скроман. Скром је донекле непрозирни градијент постављен између елемента интерфејса и позадине. То је лако постићи у КСД. Ево како:

1. Креирајте свој артбоард у КСД, додајте слику и копирајте и налепите елементе интерфејса из одговарајућег УИ Кит -а > Датотека> Отворите УИ Кит ... - у артбоард. На горњој слици фотографија чини статусну траку и траку апликација тешко видјети.
2. Изаберите алатку правоугаоника и извуците правоугаоник. У панелу својстава изаберите Филл и одаберите Градиент из падајуће у Цолор Пицкер. Поставите боје градијента на црно-бело. Подесите А вредност - Опацити - на 60%, а вредност Вхите А на 0%.
3. Са изабраним правоугаоником изаберите ставку Објект> Уреди> Пошаљи назад . Елементи интерфејса су сада видљиви преко слике.

05 од 07

Направите слику у Адобе Екпериенце Десигн-у

Уобичајени шаблон дизајна налази се у апликацијама ћаскања где људи разговарају једни са другима, а на екрану се појављује слика звучника. Ови аватари су обично слике које су маскиране. Мртав је једноставан постигнути ово у КСД. Ево како:

1. Почните са сликама и кругом или другим обликом на табли. Круг можете испунити било којом бојом. Оно што вам не треба да урадите је додати боју можданог удара. Она ће нестати када креирате ефекат, па зашто се трудите. Ако вам треба кружи круг, копирајте је у клипборд.
2. Померите круг на слику и изаберите слику и круг. Са изабраним бот објектима, изаберите Објецт> Маск витх Схапе . Када пустите миш, Аватар се креира. Одатле можете променити величину.
3. Ако желите додати ударац, залепите круг који седи на вашој клипборду на артбоард. Са изабраном копијом искључите попуњавање Пропертиес и додајте боју и ширину хода. Да бисте их подесили, изаберите оба објекта и кликните на дугме Центер Алигн у опцијама Алигн на врху панела својстава.
4. Ако желите да преместите фотографију у маску, двапут кликните на маску. Ово ће приказати слику и облик маске. Кликните на слику и превуците је на положај. Када пустите миш, слика ће бити у новој позицији унутар маске.

06 од 07

Играјте са Адобе Екпериенце Десигн Артбоардс

Умјетничке плоче искуства нису само тамо да поставите садржај. И они се могу манипулисати. Ево неколико ствари које можете урадити:

1. Ако вам требају верзије плоче Ландсцапе и Портраит артбоард-а, дуплирате артбоард и, уз одабрани дупликат, кликните на дугме за пејзаж на панелу Пропертиес. Артбоард ће се променити у оријентацију Ландсцапе. Ако Артбоард има садржај на њему, кликните на Артбоардово име, а Артбоардова својства ће се појавити у панелу својстава.
2. Да бисте додали прилагођену боју Артбоарду и пројекту у вези с тим, изаберите Артбоард и кликните на Цхип Цолоур филл у одјељку Аппеаранце на панелу Пропертиес. Унесите хексадецималну вредност за боју и кликните знак +. Боја ће бити додата као прилагођена боја. Да бисте применили ту боју негде другде, изаберите објекат и кликните на Цустом Цолор чип да бисте применили боју.
3. Артборди се могу вертикално померати. Да бисте то урадили, изаберите артбоард и промените његову висину било на Пропертиес Панелима или повлачењем дна артбоард-а надоле. У области Сцроллабле на плочи својстава, из падајућег менија изаберите вертикални и унесите висину приказа екрана. Та пуна плава линија показује вам дно оквира. Да бисте је тестирали, кликните на дугме Плаи и померите се даље. Да бисте искључили скроловање, у падајућем спусту изаберите Ноне.

07 од 07

Измијените Мобиле УИ Кит у Адобе Екпериенце Десигн

Екпериенце Десигн садржи УИ Кит за развој иОС-а, Андроид-а и Виндовс УИ-ова. Када их први пут отворите, можда мислите да су прилично добро постављени. Није баш - сваки од комада у комплета је у потпуности могуће едитовати. Хајде да сазнамо тако што ћемо направити Андроид вирефраме.

1. Почните тако што ћете изабрати Артбоард иконицу и изабрати Андроид Мобиле у одјељку Гоогле на панелу својстава .
2. Изаберите Филе> Опен УИ Кит> Гоогле материјал . Ово отвара Кит за дизајн материјала. Изаберите лупу увећања и шаблон за приказ екрана . Волим да почнем са овом, јер ми даје водиче за правилно постављање елемената интерфејса на екрану. Ако кликнете на једну од Блуе бара, видећете да је закључана. Кликните на браву причвршћену за сваку од њих да бисте је откључали . Обележите артбоард и копирајте избор у цлипбоард. Вратите се у свој документ и залепите екран у своју таблу.
3. Кликните једном на траци са апликацијама да је врх артбоарда. Обратите пажњу на то како можете да је изаберете. Изаберите објекат> Распоред> Довести до предње стране. Ваш избор је сада изнад Сцреен Гуидес. Ово би требало да вам каже да сваки од елемената на екрану може бити уређен.
4. Двапут кликните на Статус Бар на врху и на панелу Пропертиес Панел и Цолоур филл на 455А64 . Двапут кликните на траку са апликацијама и поставите га на 607Д8Б. Ово би требало да вам каже да сваки елемент у УИ комплету може бити уређен да задовољи спецификације боје пројекта.
5. Шта је са иконама? Ево како промијенити њихову боју. Двапут кликните на срце да бисте је изабрали. Ако погледате Пропертиес Панел, можете претпоставити да не можете уређивати избор. Не баш. Двапут кликните на срце још једном . Својства се отварају и промијените боју испуњења на ФФ0000. Поновите овај двоструки клик трика за преостале иконе и текст.