Adobe Вопыт дызайну хітрасці, парады і метады

01 07

Adobe Вопыт дызайну хітрасці, парады і метады

Калі Adobe прадставіла вопыт праектавання як Public Preview , кампанія ажыццяўляецца два даволі дзіўныя подзвігі адначасова. Па-першае, яны заслупавалі месца ў фарміруемым рынку прататыпаў праграмнага забеспячэння. Па-другое, яны стварылі магчымасць для карыстальнікаў, каб гуляць з «працай у прагрэс» і дазваляючы карыстальнікам ўплываць, што прагрэс. Цяпер, калі праграма было даступна на працягу некалькіх месяцаў, я думаў, што гэта будзе добры час, каб падзяліцца вопытам дызайну трукі, парады і прыёмы.

Але па-першае, вам можа быць цікава, што маецца на ўвазе пад прототипирования праграмнага забеспячэння. Сярод асноўных гульцоў у гэтай прасторы Proto.io, прынцып, UXPin, Atomic.io , вопыт праектавання і АГАТА. У адрозненне ад прыкладанняў, такіх як эскіз 3, Photoshop і Illustrator, дзе вырабляюцца статычныя канструкцыі, гэтыя графічныя рэдактары ўвесці інтэрактыўнасць, рух і іншыя агульныя рысы ў сучасных мабільных і вэб-дызайну прасторы.

З з'яўленнем мабільнай і непазбежнай, лазернай, як фокус на карыстальніка, ён больш не з'яўляецца дастатковым для дызайнера нагнятаць некалькі эскізаў, сцягваюць некалькі ацэначным, а затым выпусціць праект або загрузіць яго на вэб-сервер. Працоўны працэс UI / UX карэнным чынам змяніла рэчы. Кожны крок працэсу, ад ідэнтыфікацыі карыстальніка, эскізаў, каркасаў, макетаў і прототипирования цяпер падлягае шырокае тэставанне карыстальніка.

Гэта той апошні этап - прототипирования - дзе болевыя кропкі выяўляюцца і выпраўляюцца перш, чым праект пераходзіць у канчатковую прадукцыю. Гэта дзе інтэрактыўнасць, рух, экран пераходы і размяшчэнне усё на экране настолькі важныя. Пытанні і праблемы проста не могуць быць паказаны ў выглядзе статычнага малюнка або растлумачаны ў вуснай форме. У рэшце рэшт, гэтыя прадукты для рэальных людзей. Замест таго, каб перанесьці ўсе, што код, працэс прототипирования ўсё часцей робяцца па графічным праграмным забеспячэнні, распрацаванае толькі для гэтай мэты. Гэта лягчэй выправіць памылку, замяніць малюнак, перапісаць тэкст, перамясціць кнопку і гэтак далей з дапамогай візуальнага рэдактара, чым пастаянна перапісваючы і адладкі кода.

На самай справе, гэта праграмнае забеспячэнне стала ключавым кампанентам ў сучаснай канструкцыі і развіцця навакольнага асяроддзя «хуткага прототипирования».

З улікам сказанага, давайце павесялімся з Experience Design.

02 ад 07

Стварэнне прызначэння Pin З простым кругам у Adobe Experience Design

Адзін акуратны аспект XD з'яўляецца выкарыстанне інструментаў вектарнай графікі. Не можаце знайсці значок? Няма праблем. Рол свой уласны. Вось як:

1. Абярыце прыладу Эліпс і, з дапамогай клавіш Option / Alt-Shift прэсаваных, намалюйце круг.
2. З акружнасці, задайце колер залівання для FF0000 і межы да "не" ва ўласцівасцях.
3. Двойчы пстрыкніце на круг, каб паказаць пункту прывязкі. Перацягнуць ніжні якар ўніз.
4. Двойчы пстрыкніце па выбраным Anchor Point і крывыя замяняюцца лініямі.
5. Намалюйце яшчэ адзін невялікі круг з белай заліваннем і ня тапіць. Перамясціць яго ў становішча і абярыце шпільку і круг. На панэлі Align у верхняй частцы Уласцівасці націсніце кнопку гарызантальнага цэнтра і Pin ствараецца.

03 з 07

Стварэнне размыцця фону ў Adobe Experience Design

Гэта распаўсюджана мець тэкст або іншы кантэнт праз фонавы малюнак. Праблема тут ёсць вобраз, часцей за ўсё, перасільвае ўтрыманне вышэй яго. Адным з спосабаў вырашэння гэтай праблемы з'яўляецца размыццё фону малюнка. Вы можаце размыць малюнак у Photoshop або іншае праграмнае забеспячэнне для рэдагавання малюнкаў, але гэта некалькі неэфектыўна, тым больш, што XD зараз можа справіцца з гэтай задачай для вас. Вось як:

1. Стварэнне новай мантажнай вобласці і дадаць фонавы малюнак.
2. Абярыце прыладу Прастакутнік нный намаляваць прастакутнік на малюнку. Пры выбары Rectangle, усталюйце заліванне на белы і абводкі ў None.
3. З Rectangle абраны, выберыце размыцця фону ў панэлі уласцівасцяў. Тры паўзункоў Размыццё Сума, яркасць і непразрыстасць. Вось што яны робяць:

• Пляма Памер: Рэгулёўка размытасці малюнка пад формай. Самым вялікім можа быць + 50.
• Яркасць: налада блікаў і ценяў на малюнку. Мінімальнае значэнне -50, а максімальнае значэнне роўна + 50.
• Непразрыстасць: Уражвае празрыстасць формы і бачнасць малюнка пад формай. Дыяпазон значэнняў ад 0% да 100%.

Калі вы сапраўды хочаце, каб «пераключыць рэчы», змяніць колер формы і гуляць са значэннем непразрыстасці, каб змяніць «погляд» малюнка.

04 з 07

Стварэнне палатняны ў Adobe Experience Design

Агульная праблема дызайну элементы інтэрфейсу элементы павінны быць агульным колеру, але, губляюцца, калі змяшчаюцца на фонавы малюнак або суцэльнага колеру. Раствор уяўляе сабой палатняны. Палатна ўяўляе сабой некалькі непразрысты градыент змяшчаецца паміж элементам інтэрфейсу і фонам. Гэта лёгка зрабіць у XD. Вось як:

1. Стварэнне мантажнай вобласці ў XD, дадаць малюнак і скапіяваць і ўставіць элементы інтэрфейсу з адпаведнага набору карыстацкага інтэрфейсу - File> Open Kit UI ... , - у палатне. На малюнку вышэй фота робіць радок стану і дадатак Bar цяжка ўбачыць.
2. Выберыце Rectangle Tool і намалюйце прастакутнік. У панэлі Properties абярыце Заліванне і абярыце градыент з выпадальнага ўніз ў палітры кветак. Усталюйце градыент колеру на чорны і белы. Усталюйце значэнне A - Opacity- да 60% , а значэнне белага A да 0%.
3. Пры выбары Прастакутнік, абярыце Object> Arrange> Send Backward. Элементы інтэрфейсу цяпер бачныя на малюнку.

05 07

Стварыць малюнак аватара ў Adobe Experience Design

Агульны дызайн шаблон знойдзены ў чаце прыкладанняў, дзе людзі размаўляюць адзін з адным, і на экране з'яўляецца малюнак таго, хто гаворыць. Гэтыя аватары звычайна выявы, якія былі замаскіраваныя. Ён мёртвы проста зрабіць гэта ў XD. Вось як:

1. Вы пачынаеце з выявай і колам ці іншай формай па палатне. Вы можаце запоўніць круг з любым колерам. Што вам не трэба зрабіць, гэта дадаць колер абводкі. Яна знікне, калі вы ствараеце эфект, так навошта турбавацца. Калі вам не трэба тапіць круг, скапіруйце яго ў буфер абмену.
2. Перамесціце круг на малюнак і вызначце як малюнак і круг. З аб'ектамі бот абраны, выберыце Object> Маска з Shape. Калі вы адпусціце кнопку мышы, Аватар ствараюцца. Адтуль вы можаце змяніць яго памер.
3. Калі вам трэба дадаць абводку, наклеіць круг, седзячы на ​​буфер абмену на палатне. З копіяй абранай адключыць заліванне ва ўласцівасцях і дадаць колер абводкі і шырыню. Каб выраўнаваць іх, абярыце абодва аб'екта і націсніце кнопкі выраўноўвання па цэнтры ў параметрах Выраўнаваць ў верхняй частцы панэлі уласцівасцяў.
4. Калі вы хочаце , каб перамясціць фатаграфію вакол у масцы, двойчы пстрыкніце на маску. Гэта пакажа малюнак і форму маскі. Націсніце на малюнак і перацягнуць яго ў патрэбнае становішча. Калі вы адпусціце кнопку мышы, малюнак будзе ў яго новым становішчы ўнутры маскі.

06 з 07

Гуляць з Adobe Design Experience мантажнымі абласцямі

Канструкцыя мантажных абласцей досведу не толькі для вас, каб змясціць змесціва. Яны таксама можна маніпуляваць. Вось некалькі рэчаў, якія вы можаце зрабіць:

1. Калі вам патрэбна альбомны і партрэтную версія мантажнай вобласці, дубляваць палатно і з дублікатам абранага націсніце кнопку альбомнай на панэлі уласцівасцяў. Мантажная вобласць зменіцца на ландшафтную арыентацыю. Калі палатно мае ўтрыманне на ёй, націсніце на імя палатна і ўласцівасць мантажнай вобласці з'явіцца ў панэлі уласцівасцяў.
2. Каб дадаць карыстацкі колер да Artboard, і праект па гэтым пытанні, абярыце мантажную вобласць і націсніце каляровую фішку залівання ў раздзеле Зьнешняга віду на панэлі уласцівасцяў. Увядзіце шаснаццатковае значэнне колеру і націсніце на знак +. Колер будзе дададзены ў якасці карыстацкага колеру. Каб прымяніць гэты колер у іншым месцы, выберыце аб'ект і націсніце на чып Карыстальніцкія колеру, каб прымяніць колер.
3. Мантажныя вобласці могуць быць зроблены вертыкальна пракручваць. Каб зрабіць гэта, выберыце палатно і змяніць яго вышыню альбо на панэлі Properties або шляхам перацягвання ніжняй частка палатне ўніз. У прагортцы вобласці на панэлі уласцівасцяў, абярыце вертыкальныя з выпадальнага меню і ўвядзіце вышыню акна прагляду для экрана. Гэта пункцірнай сіняя лінія паказвае ў ніжняй частцы акна прагляду. Каб праверыць гэта, націсніце кнопку прайгравання і пракручваць прэч. Для таго, каб адключыць скролінг, абярыце None ў прагортцы поп ўніз.

07 07

Рэдагаванне набору Mobile UI ў Adobe Experience Design

Вопыт дызайн змяшчае набор UI для распрацоўкі IOS, Android і інтэрфейс Windows гадоў. Пры першым адкрыцці іх, вы можаце думаць, што яны даволі добра пасаджаныя на месцы. Не зусім, кожны з кавалачкаў у гэтых наборах цалкам рэдагуемы. Давайце высвятлім, пабудаваўшы Android каркасныя.

1. Вы пачынаеце, выбраўшы інструмент палатна і выбраць Android Mobile ў раздзеле Google на панэлі уласцівасцяў.
2. Абярыце File> Open Kit UI> Google Матэрыял. Гэта адкрывае набор Material Design UI. Выберыце павелічальнае шкло і т намёт ён Screen Guides мантажнай вобласці. Я хацеў бы пачаць з гэтага, таму што гэта дае мне накіроўвалыя для правільнага на экране размяшчэння элементаў інтэрфейсу. Калі націснуць на адну з сініх палос вы ўбачыце, што ён заблякаваны. Націсніце на замак , прымацаваны да кожнага з іх , каб разблакаваць яго. Marquee палатне і скапіяваць вылучэнне ў буфер абмену. Вярніцеся ў дакумент і ўстаўце экран у мантажнай вобласці.
3. Націсніце адзін раз на панэлі прыкладання, што ў верхняй частцы палатна. Звярніце ўвагу на тое, як вы можаце выбраць яго. Выберыце Object> Arrange> Перамясціць на пярэдні план . Ваш выбар цяпер вышэй кіраўніцтваў экрана. Гэта павінна сказаць вам, кожны з элементаў на экране можа быць адрэдагавана.
4. Двойчы пстрыкніце радок стану ў верхняй частцы і ў інш панэлі уласцівасцяў сек колер залівання 455A64. Двойчы пстрыкніце на App Bar і ўсталюйце заліванне 607D8B. Гэта павінна сказаць вам кожны элемент у наборы UI можа быць адрэдагаваны, каб задаволіць каляровыя характарыстыкі праекта.
5. Як наконт абразкі? Вось як змяніць іх колер. Двойчы пстрыкніце на сэрцы , каб вылучыць яго. Калі вы паглядзіце на панэль уласцівасцяў, вы можаце лічыць, вы не можаце рэдагаваць выбар. Не зусім. Двойчы пстрыкніце Сардэчнай яшчэ раз. Ўласцівасці адкрытых і вы зменіце колер залівання на FF0000. Паўтарыце гэта двойчы двайны пстрычка трук для астатніх значкоў і тэксту.