Adobe අත්දැකීම් නිර්මාණ උපක්රම, ඉඟි සහ තාක්ෂණික ක්රම

07 දින 01

Adobe අත්දැකීම් නිර්මාණ උපක්රම, ඉඟි සහ තාක්ෂණික ක්රම

ඇඩෝබි මෝස්තරය විසින් මහජන පෙර දැක්මක් ලෙස හදුන්වා දුන් විට, එම සමාගමම එකවරම පුදුම සහගත ව්යාපාර දෙකක් ඉටු කළේය. පළමුවෙන්ම, නැගී එන මූලාකෘති මෘදුකාංග වෙළඳපොළ තුළ අභ්යවකාශයක් තැබූහ. දෙවනුව, පරිශීලකයින්ට "කාර්ය සාධනයක් සහිතව" සෙල්ලම් කිරීමට අවස්ථාවක් නිර්මාණය කර ඇති අතර, පරිශීලකයින් එම ප්රගතියට බලපෑමක් ඇති කරයි. දැන් මාස කීපයක් සඳහා මෙම යෙදුම ලබා ගත හැකි වන පරිදි, අත්දැකීම් නිර්මාණ උපක්රම කිහිපයක්, ඉඟි සහ ශිල්පීය ක්රම බෙදා ගැනීමට හොඳ කාලයක් වනු ඇතැයි මම සිතුවෙමි.

නමුත් මුලින්ම, ප්රෝටිටිං මෘදුකාංගයෙන් අදහස් කරන්නේ කුමක්දැයි ඔබ විමසිලිමත් විය හැකිය. මෙම අවකාශයේ ප්රධාන ක්රීඩකයන් අතර Proto.io, Principle, UXPin, Atomic.io , අත්දැකීම් නිර්මාණකරණය සහ InVision යන ඒවා වේ. ස්ටෙටික් මෝස්තර නිපදවන Sketch 3, Photoshop සහ Illustrator වැනි යෙදුම් මෙන් නොව, මෙම චිත්රක සංස්කාරකවරුන් වර්තමාන ජංගම සහ වෙබ් නිර්මාණකරණ අවකාශයේ පොදු ක්රියාකාරීත්වය, චලිතය සහ අනෙකුත් ලක්ෂණ හඳුන්වා දෙයි.

ජංගම හා අනිවාර්යය ලෙස, පරිශීලකයා මත ලේසර් ආකාරයෙන් අවධානය යොමු කිරීමෙන්, නිර්මාණකරුවෙකු විසින් රූප සටහන් කීපයක් කඩා දැමීම, කීපයක් එකතු කර ඉන්පසු ව්යාපෘතිය නිදහස් කිරීම හෝ වෙබ් සේවාදායකයකට උඩුගත කිරීම ප්රමාණවත් නොවේ. UI / UX කාර්ය ප්රවාහය මූලික වශයෙන් වෙනස් කර ඇත. පරිශිලක සෑම පියවරක්, පරිශීලකයා, ස්කීචීස්, වයර් රාමු, මුකෝපකරණ සහ මූලාකෘති හඳුනා ගැනීමෙන් දැන් පුළුල් පරිශීලක පරික්ෂාවකට ලක් වේ.

අවසාන අදියර - මූලාකෘති වේ - ව්යාපෘතිය අවසානයේ අවසන් නිෂ්පාදනය වෙත යාමට පෙර පිහිටුවා ඇති සහ වේදනාව පෙන්වන ස්ථාන හඳුනාගෙන ඇත. මෙයින් අන්යෝන්ය ක්රියාකාරීත්වය, චලනය, තිර විවරණ සහ තිරය මත සියල්ලම ස්ථානගත කිරීම ඉතා වැදගත් වේ. ගැටළු සහ ගැටලු ස්ථිතික රූපයක් ලෙස හෝ සරලව විස්තර කළ නොහැකිය. ඇත්ත වශයෙන්ම, මෙම නිෂ්පාදන සැබෑ මිනිසුන් සඳහා. එම කේතය සියල්ලම ගෙනයාම වෙනුවට, එම කාර්යය සඳහා නිර්මාණය කර ඇති ග්රැෆික් මෘදුකාංගය විසින් prototyping ක්රියාවලිය වැඩිවෙමින් තිබේ. අත්වැරැද්දක් නිවැරදි කිරීම, ප්රතිරූපයක් ප්රතිස්ථාපනය කිරීම, යම් පෙළක් නැවත ලියනය කිරීම, නිතරම නැවත ලිවීම සහ දෝෂ විධාන සංග්රහයට වඩා දෘශ්ය සංස්කාරකයක් භාවිතා කිරීම බොත්තමක් යනාදිය කිරීම පහසුය.

ඇත්ත වශයෙන්ම, මෙම මෘදුකාංගය වර්තමානයේ "Rapid Prototyping" නිර්මාණය හා සංවර්ධනය කිරීමේ පරිසරයේ ප්රධාන සංරචකයක් වී ඇත.

ඒ සමඟ අපි අත්දැකීම් නිර්මාණ සමග විනෝද වීමට කරමු.

07 දින 02

ඇඩෝබි අත්දැකීම් නිර්මාණයේ සරල කවයක් සමග සංචාරක ස්ථානයක් සාදන්න

XD හි එක් ශෛලීය අංගයක් වන්නේ වයර් රේඛා මෙවලම් භාවිතා කිරීමයි. අයිකනයක් සොයාගත නොහැකිද? කිසිම ප්රශ්නයක් නැ. ඔබේම ස්වාර්ථයක්. මෙන්න මෙහෙමයි:

1. Ellipse Tool තෝරාගන්න, Option / Alt-Shift යතුර ඔබන්න, රවුමක් අඳින්න.
2. රවුම සමඟ, Fill වර්ණය FF0000 සහ බඳුනේ "කිසිවක්" සඳහා ගුණ නොකෙරේ .
3. නැංගුරුම් ලක්ෂ පෙන්වීම සඳහා කවය දෙවරක් ක්ලික් කරන්න. පහළ නැංගුරුව පහළට ඇද දමන්න.
4. තෝරාගත් ඇන්කර් ලක්ෂයේ ද්වි-ක්ලික් කරන්න.
5. සුදු පැහැති පිරවුමක් සහිතව තවත් කුඩා කවයක් අඳින්න. එය ස්ථානයට ගෙන ගොස් පයින් සහ රවුම් තෝරන්න. ප්රොජෙක්ට් එකේ ඉහළට ඉහලින් පිහිටි සමතුලිත පුවරුවෙහි තිරස් මධුසමය බොත්තම සහ පින් පත්රය නිර්මාණය වේ.

07 දින 03

Adobe අත්දැකීම් නිර්මාණයේ පසුබිම් විභේදන නිර්මාණය කරන්න

පසුබිම් රූපයක් මත ඇති පෙළ හෝ වෙනත් අන්තර්ගතයක් තිබීම පොදු වේ. මෙහි ඇති ගැටළුව වන්නේ රූපය, ඊට වඩා බොහෝ විට එය ඉහළ අන්තර්ගතය අභිබවා ඇත. මෙම ගැටලුව විසඳීමේ එක් ක්රමයක් වන්නේ පසුබිම් රූපය මකා දැමීමයි. ඔබට Photoshop හෝ වෙනත් අනුරූප සංස්කරණ මෘදුකාංගයේ රූපය ස්ඵෝටනය කළ හැකිය, නමුත් මෙය කාර්යක්ෂමතාවයක් වේ. විශේෂයෙන් XD ඔබට මෙම කාර්යය හැසිරවිය හැකිය. මෙන්න මෙහෙමයි:

1. නව චිත්ර පුවරුවක් සාදා ඔබේ පසුබිම් ඡායාරූප එකතු කරන්න.
2. Rectangle Tool තෝරන්න nd රූපය මත සෘජුකෝණාස්රයක් ඇඳීම. තෝරාගත් රික්ව යානය සමඟ, සුදු ෆිල්ට සහ තට්ටුවේ කිසිවක් නොමැත.
3. Rectangle තෝරාගත් පසු, අක්ෂර වින්යාසයෙහි පසුබිම් වර්ණ තෝරන්න . ස්ලයිඩර් තුනේ බ්ලූටම් ප්රමාණය, ආලෝකය සහ පාරාන්ධතාවය. මෙන්න ඔවුන් කරන්නේ කුමක්ද?

• පැහැපත් ප්රමාණය: හැඩයට යටින් පින්තූරයේ විචලනය කරයි. උපරිම අගය +50 කි.
• ආලෝකය: පිංතූරය තුළ ඇති ඉස්මතු සහ සෙවනැලි සකස් කරයි. අවම අගයන් -50 අතර උපරිම අගය +50 කි.
• පාරදෘශ්යතාව: හැඩයේ විනිවිදභාවය හා හැඩයේ රූපයේ දෘශ්ය ස්වභාවය බලපායි. සාරධර්ම පරාසය 0% සිට 100% දක්වා.

ඔබ ඇත්තටම "දේවල් මාරු කිරීමට" අවශ්ය නම්, රූපයේ "පෙනුම" වෙනස් කිරීම සඳහා හැඩයේ වර්ණය වෙනස් කර Opacity අගයෙන් වෙනස් කරන්න.

07 දින 04

Adobe අත්දැකීම් නිර්මාණයේ කෙටිමං නිර්මාණය කරන්න

සාමාන්ය නිර්මාණ ගැටළුවක් වන්නේ අතුරු මුහුණතෙහි මූලද්රව්ය පොදු වර්ණයක් විය යුතු නමුත්, පසුබිම් රූපයක් හෝ ඝන වර්ණයකට තබා ඇති විට අහිමි වේ. විසඳුම යනු කබාය. අතුරුමුහුණතක් යනු අතුරු මුහුණත හා පසුබිම අතර ස්ථානගතව තරමක් නොපැහැදිලි සලකුණකි. මෙය XD තුල සිදු කිරීමට පහසුය. මෙන්න මෙහෙමයි:

1. XD හි ඔබේ පුවරුව සාදන්න, අනුරුවක් එක් කරන්න සහ සුදුසු UI කට්ටලයේ අතුරුමුහුණත් අංගයන් පිටපත් කර ඇලවීම - ගොනු> විවෘත UI කට්ටලය ... - artboard එකට ඇතුල් කරන්න. ඉහත පින්තූරයේ ඇති ඡායාරූපයේ තත්ව බාර්එක සහ යෙදුම් තීරය දර්ශනය කිරීම දුෂ්කර වේ.
2. Rectangle මෙවලම තෝරන්න. සෘජුකෝණාස්රය ඉවත් කරන්න. ප්රත්යස්ථ පුවරුවේ දී තෝරන්න සහ වර්ණ තෝරා ගත් ප්ලේ ඩ්රයිව් සිට පිරික්සුම් තෝරන්න. කළු පාට සුදු පැහැයට වර්ණගත කරන්න. A අගය - Opacity- 60% දක්වා සහ සුදු A අගය 0% දක්වා සකසන්න .
3. Rectangle තෝරාගත් පසු, Object> Arrange> Back Back වෙත යවන්න . අතුරු මුහුණත දැන් රූපය මත දෘශ්යමාන වේ.

07 දින 05

Adobe අත්දැකීම් නිර්මාණයේ රූපයක් සාදන්න

පොදු මෝස්තර රටාවක් කතාබස් යෙදී සිටින අය එකිනෙකා සමඟ කතා කරන අතර කථකගේ රූපය තිරය මත දිස් වේ. මෙම ආවේගයන් සාමාන්යයෙන් රූප වසං කර ඇත. එය XD හි දී මෙය සරලයි. මෙන්න මෙහෙමයි:

1. ඔබ චිත්ර ශිල්පියෙකු හා කවපෙත්තක් හෝ වෙනත් හැඩයකින් පටන් ගන්න. ඔබට ඕනෑම පාටක් රවුම් පුරවා ගත හැකිය. ඔබ විසින් කළ යුතු දෙයක් වන්නේ අකුරු වර්ණ එකතු කිරීමයි. ඔබ ප්රතිඵලය නිර්මාණය කරන විට එය අතුරුදහන් වනු ඇත, ඒ නිසා කරදර වෙන්න. ඔබ රවුම ඇටවීමට අවශ්ය නම්, එය clipboard එකට පිටපත් කරන්න.
2. රූපය වෙත චලනය කර රූපය සහ රාමුව තෝරා ගන්න. තෝරාගත් බොත්ත වස්තූන් සමඟ Object> Mask with Shape සමඟ තෝරන්න . ඔබ මූසිකය මුදාහරින විට, Avatar නිර්මාණය වේ. එතැනින් ඔබට එය ප්රමාණය වෙනස් කළ හැකිය.
3. ඔබට ආවරණයක් එක් කිරීමට අවශ්ය නම්, ඔබේ පුවරුව මත artboard එක මත රඳවන රවුම ඇලවීම. තෝරාගත් පිටපත සමඟ ප්රොපේතවල පිරවීම අක්ෂර වර්ණ හා පළල එක් කරන්න. ඒවා ඉරීම සඳහා, වස්තු දෙකම තෝරන්න, ගුණාංග විකල්ප පුවරුවේ මුදුනේ සමමුහුර්ත විකල්ප මත ඇති මධ්යස්ථ රේඛා බොත්තම ක්ලික් කරන්න.
4. ඔබ අවට පින්තූරය අවට චලනය කිරීමට අවශ්ය නම්, ආවරණ දෙවරක් ක්ලික් කරන්න. මෙම රූපය සහ ආවරණ හැඩය පෙන්වයි. රූපය මත ක්ලික් කරන්න. ඔබ මූසිකය මුදාහරින විට, රූපයේ ආවරණ තුළ නව ආස්ථානයේ පවතී.

07 සිට 06 දක්වා

Adobe අත්දැකීම් නිර්මාණය Artboards සමඟ සෙල්ලම් කරන්න

අත්දැකීම් නිර්මාණ චිත්ර පුවරු ඔබ අන්තර්ගතය තැන්පත් කිරීමට පමණක් නොවේ. ඒ වගේම, ඒවා මෙහෙයවිය හැකිය. ඔබට කළ හැකි දේවල් කිහිපයක් පහත දැක්වේ:

1. ඔබට චිත්රපත්රයේ භූ දර්ශන සහ පෝටර්රථ අනුවාද අවශ්ය නම්, චිත්රපටි අනුපිටපත් සහ අනුපිටපත් සමඟින්, පුවරුවෙහි ඇති භූ දර්ශන බොත්තම ක්ලික් කරන්න. Artboard මගින් භූ දර්ශන දිශානතියට වෙනස් වනු ඇත. Artboard එක මත අන්තර්ගතය තිබේ නම්, Artboard ගේ නම ක්ලික් කරන්න, Artboard ගුණාංග ප්රලේඛිත පැනලය තුල දිස්වනු ඇත.
2. Artboard සඳහා ආයාත වර්ණය එකතු කිරීම හා එම කරුණ සඳහා වූ ව්යාපෘතිය එකතු කිරීම සඳහා Artboard යතුරු පුවරුව තෝරාගෙන ප්රොපර්ට් පුවරුවේ පෙනුමේ කොටසෙහි පුර්ණ වර්ණ චිපයක් ක්ලික් කරන්න. වර්ණය සඳහා hexadecimal අගය ඇතුළු කරන්න සහ ලකුණ + ක්ලික් කරන්න. වර්ණය Custom Color ලෙස එකතු කරනු ලැබේ. එම වර්ණය වෙනත් ස්ථානයකට යෙදීම සඳහා, වස්තුවක් තෝරන්න සහ වර්ණ යෙදීම සඳහා රේගු වර්ණ චිප් ක්ලික් කරන්න.
3. ආවරණවල සිරස් දිශාවට සරළ කළ හැක. මෙය කිරීම සඳහා, පුවරුව තෝරන්න සහ ප්රත්යස්ථ කවුළුවෙහි හෝ එහි පුවරුවේ පතුලෙහි පහළට ඇදගෙන යාමෙන් එහි උස වෙනස් කරන්න. ගුණාංග පුවරුවේ Scrollable ප්රදේශයේ, pop-down මෙනුව සිට සිරස් අතට තිරය සඳහා දර්ශන දර්ශකය ඇතුල් කරන්න. නිල් පැහැති රේඛාව දිස්වන්නේ දර්ශනය පහළින්ය. එය පරීක්ෂා කිරීමට, බොත්තම ක්ලික් කරන්න. ඉස්කුරුප්පු ඇරීම අක්රිය කිරීම සඳහා, Scrolling හි පහළට පහලන්න.

07 සිට 07 දක්වා

ඇඩෝබි අත්දැකීම් නිර්මාණයේ ජංගම UI කට්ටලයක් සංස්කරණය කරන්න

අත්දැකීම් නිර්මාණයේ iOS, ඇන්ඩ්රොයිඩ් සහ වින්ඩෝස් යාවත්කාලීන කිරීම සඳහා UI කට්ටලයක් අඩංගු වේ. ඔබ මුලින්ම ඒවා විවෘත කළ විට, ඔවුන් හොඳින් සවි කර ඇති බව සිතිය හැක. බෙහෙවින් වෙනස් නොවේ - එම කට්ටලවල බිට් සහ කැබලි සියල්ලම සංස්කරණය කළ හැකිය. ඇන්ඩ්රොයිඩ් රැහැන් රාමුවක් ගොඩ නැගීමෙන් අපි සොයා බලමු.

1. Artboard මෙවලම තේරීමෙන් හා ගුණාංග පැනලයෙහි ගූගල් කොටසෙහි ඇන්ඩ්රොයිඩ් ජංගම දුරකථනය තෝරා ගැනීමෙන් ඔබ පටන් ගනී.
2. ගොනු තෝරන්න> විවෘත කරන්න UI Kit> ගූගල් ද්රව්ය . මෙය ද්රව්ය නිර්මාණ UI කට්ටලය විවෘත කරයි. වැඩිදියුණු කරන ලද ග්ලාස් සහ විචිත්ර කට්ටල චිත්ර ශිල්පිය . මම මේ සමඟ ආරම්භ කිරීමට කැමතියි, එය අතුරු මුහුණතේ මූලද්රව්ය නිසි තිරය මත ස්ථාපනය සඳහා මාර්ගෝපදේශ සපයන නිසා. ඔබ බ්ලූ බාර් එකක් මත ක්ලික් කළහොත් එය අගුලු දමා ඇත. එය එක් එක් අගයට සම්බන්ධ කර ඇති අගුල ක්ලික් කරන්න . චිත්ර ශිර්ෂය විචිත්රවත් කර තෝරාගැනීම කර clipboard එකට තෝරා ගන්න. ඔබගේ ලේඛනයට ආපසු පැමිණ ඔබේ තිරය වෙතට ඇලවීම.
3. පුවරුවේ මුදුනේ App App එකෙහි ක්ලික් කරන්න. ඔබට එය තෝරා ගත හැකි ආකාරය සැලකිල්ලට ගන්න. අයිතමය තෝරන්න> පිළිවෙලට> ඉදිරිපස වෙත යොමු කරන්න. ඔබගේ තෝරාගැනීම දැන් Screen Guides ඉහළින්. තිරය ​​මත ඇති සෑම අංගයක්ම ඔබට සංස්කරණය කළ හැකිය.
4. ඉහළම ස්ථානයේ ඇති තත්වය තීරුවේ ද්විත්ව ක්ලික් කරන්න , ප්රොපර්ස් පුවරුව සහ ඉරුම් වර්ණය 455A64 දක්වා . යෙදුම් තීරුව ද්විත්ව ක්ලික් කරන්න 607D8B දක්වා එය පිරවිය යුතුය. මෙය එක් UI කට්ටලයක ඇති සෑම අංගයක්ම ඔබට කියවිය හැකි අතර ඒවායේ වර්ණ පිරිවිතරයන්ට ගැලපෙන පරිදි සංස්කරණය කළ හැකිය.
5. අයිකොන් ගැන කුමක් ද? මෙන්න ඔවුන්ගේ වර්ණය වෙනස් කරන්නේ කෙසේද යන්න. එය තෝරා ගැනීමට හදවත දෙගුණ කරන්න . ඔබ ප්රොපර්ට් පුවරුව දෙස බලන්නේ නම්, ඔබට තේරීම සංස්කරණය කළ නොහැකිය. එතරම් නැහැ. තවත් වරක් හදවත ද්විත්ව ක්ලික් කරන්න . ප්රොපටීස් විවෘත වන අතර ඔබ FF0000 වෙත පිරවුම් වර්ණය වෙනස් කරයි. ඉතිරි අයිකන සහ පෙළ සඳහා මෙම ද්විත්ව ද්වි-ක්ලික් කරන්න උපකරණයක් නැවත කරන්න.