ល្បិចឌីជីថលល្បែង Adobe, គន្លឹះ, និងបច្ចេកទេស

01 នៃ 07

ល្បិចឌីជីថលល្បែង Adobe, គន្លឹះ, និងបច្ចេកទេស

នៅពេលដែលក្រុមហ៊ុន Adobe បានណែនាំ បទពិសោធន៏រចនាជាការមើលជាមុនជាសាធារណៈ ក្រុមហ៊ុននេះបានបំពេញមុខងារពីរដ៏អស្ចារ្យនៅពេលតែមួយ។ ទីមួយពួកគេបានបង្កើតអោយមានចន្លោះនៅក្នុងទីផ្សារ software prototyping ។ ទីពីរពួកគេបានបង្កើតឱ្យមានឱកាសសម្រាប់អ្នកប្រើលេងជាមួយ "ការងារដែលកំពុងដំណើរការ" ហើយត្រូវបានអនុញ្ញាតឱ្យអ្នកប្រើមានឥទ្ធិពលលើការរីកចម្រើននោះ។ ឥឡូវនេះកម្មវិធីនេះអាចរកបានពីរបីខែខ្ញុំគិតថាវាជាពេលវេលាដ៏ល្អមួយដើម្បីចែករំលែកល្បិចរចនាបទពិសោធន៍មួយចំនួនគន្លឹះនិងបច្ចេកទេស។

ប៉ុន្តែដំបូងអ្នកប្រហែលជាឆ្ងល់ថាតើកម្មវិធី Prototyping មានអត្ថន័យយ៉ាងណា។ ក្នុងចំណោមអ្នកលេងសំខាន់ៗក្នុងលំហនេះគឺ Proto.io, គោលការណ៍, UXPin, Atomic.io , បទពិសោធន៍រចនានិង InVision ។ មិនដូចជាកម្មវិធីដូចជា Sketch 3, Photoshop និង Illustrator ដែលជាកន្លែងដែលរចនា static ត្រូវបានផលិតកម្មវិធីនិពន្ធក្រាហ្វិចទាំងនេះណែនាំអន្តរសកម្មចលនានិងលក្ខណៈពិសេសផ្សេងទៀតជាទូទៅនៅក្នុងការរចនាចល័តនិងបណ្ដាញថ្ងៃនេះ។

ជាមួយនឹងការកើនឡើងនៃទូរស័ព្ទចល័តនិងជៀសមិនរួចការផ្តោតអារម្មណ៍ដូច laser ដូចទៅនឹងអ្នកប្រើប្រាស់វាមិនគ្រប់គ្រាន់សម្រាប់អ្នកច្នៃប្រឌិតដើម្បីចាប់យកគំនូរមួយចំនួនទាញរួមគ្នាមួយចំនួនតូចហើយបន្ទាប់មកបញ្ចេញគម្រោងឬដាក់វាទៅម៉ាស៊ីនមេ។ លំហូរ UI / UX បានផ្លាស់ប្តូរអ្វីៗជាមូលដ្ឋាន។ គ្រប់ដំណាក់កាលនៃដំណើរការពីការកំណត់អត្តសញ្ញាណអ្នកប្រើការគូសវាសស៊ុមខ្សែកោងនិងការបង្កើតគំរូឥឡូវនេះត្រូវមានការសាកល្បងអ្នកប្រើយ៉ាងទូលំទូលាយ។

វាគឺជាដំណាក់កាលចុងក្រោយ - គំរូដើម - ដែលជាកន្លែងដែលចំណុចឈឺចុកចាប់ត្រូវបានរកឃើញនិងត្រូវបានជួសជុលមុនពេលគម្រោងនេះផ្លាស់ទីទៅផលិតកម្មចុងក្រោយ។ នេះគឺជាកន្លែងដែលអន្តរកម្ម, ចលនា, ការផ្លាស់ប្តូរអេក្រង់និងការដាក់អ្វីគ្រប់យ៉ាងនៅលើអេក្រង់គឺមានសារៈសំខាន់ដូច្នេះ។ បញ្ហានិងបញ្ហាមិនអាចត្រូវបានបង្ហាញជារូបភាពឋិតិវន្តឬត្រូវបានពន្យល់ដោយផ្ទាល់មាត់ទេ។ យ៉ាងណាមិញផលិតផលទាំងនេះគឺសម្រាប់មនុស្សពិតប្រាកដ។ ជាជាងការផ្លាស់ប្តូរទាំងអស់ទៅកូដដំណើរការគំរូដើមត្រូវបានអនុវត្តកាន់តែខ្លាំងឡើងដោយកម្មវិធីក្រាហ្វិកដែលត្រូវបានរចនាឡើងសម្រាប់គោលបំណងនោះតែប៉ុណ្ណោះ។ វាងាយស្រួលក្នុងការជួសជុលកំហុសកែរូបភាពសរសេរអត្ថបទខ្លះផ្លាស់ទីប៊ូតុងហើយនិងប្រើកម្មវិធីនិពន្ធដែលមើលឃើញជាជាងសរសេរនិងសរសេរកូដបំបាត់ជានិច្ច។

ជាការពិតណាស់កម្មវិធីនេះបានក្លាយទៅជាសមាសភាគដ៏សំខាន់នៅក្នុងបរិយាកាសរចនានិងអភិវឌ្ឍន៏ឆាប់រហ័ស។

ជាមួយនឹងការដែលបាននិយាយថា, សូមឱ្យមានភាពសប្បាយរីករាយជាមួយនឹងបទពិសោធន៍រចនា។

02 នៃ 07

បង្កើតចំនុចគោលដៅមួយដោយប្រើរង្វង់សាមញ្ញនៅក្នុងកម្មវិធីបទពិសោធន៍របស់ Adobe

មួយទិដ្ឋភាពយ៉ាងច្បាស់នៃ XD គឺការប្រើប្រាស់ឧបករណ៍គំនូរវ៉ិចទ័ររបស់ខ្លួន។ មិនអាចរកឃើញរូបតំណាងបានទេ? គ្មាន​បញ្ហា។ រមៀលខ្លួនអ្នក។ នេះជារបៀប:

1. ជ្រើស ឧបករណ៍ពងក្រពើ ហើយដោយចុចគ្រាប់ចុច Option / Alt-Shift សូមគូររង្វង់។
2. ជាមួយរង្វង់ដែលបានជ្រើសរើសកំណត់ ពណ៌បំពេញទៅ FF0000 ហើយស៊ុមទៅ "គ្មាន" នៅក្នុងលក្ខណសម្បត្តិ។
3. ចុចទ្វេដងលើរង្វង់ដើម្បីបង្ហាញចំណុចយុថ្កា។ អូសយុថ្កាបាតទៅក្រោម។
4. ចុចទ្វេដងលើយុថ្កាដែលបានជ្រើសហើយខ្សែកោងត្រូវបានជំនួសដោយបន្ទាត់។
5. គូររង្វង់តូចមួយផ្សេងទៀតដែលមានពណ៌សនិងមិនមានដុំថ្ម។ ផ្លាស់ទីវាចូលទៅក្នុងទីតាំងហើយជ្រើសរើសម្ជុលនិងរង្វង់។ នៅក្នុងបន្ទះតម្រឹមនៅផ្នែកខាងលើនៃលក្ខណសម្បត្តិសូមចុចប៊ូតុងមជ្ឈមណ្ឌលផ្ដេកហើយថ្មត្រូវបានបង្កើត។

03 នៃ 07

បង្កើតព្រិលផ្ទៃខាងក្រោយក្នុងការរចនាកម្មវិធី Adobe

វាជារឿងធម្មតាដែលមានអត្ថបទឬមាតិកាផ្សេងទៀតនៅលើរូបភាពផ្ទៃខាងក្រោយ។ បញ្ហានៅទីនេះគឺរូបភាពជាញឹកញាប់ជាងមិនមានឥទ្ធិពលលើមាតិកានៅខាងលើវា។ វិធីមួយក្នុងការដោះស្រាយបញ្ហានេះគឺដើម្បីធ្វើឱ្យរូបភាពផ្ទៃខាងក្រោយព្រាល។ អ្នកអាចធ្វើឱ្យរូបភាពព្រិលនៅក្នុងកម្មវិធី Photoshop ឬកម្មវិធីកែរូបភាពរូបភាពផ្សេងទៀតប៉ុន្តែនេះមិនមានប្រសិទ្ធភាពជាពិសេសចាប់តាំងពី XD អាចគ្រប់គ្រងភារកិច្ចនេះសម្រាប់អ្នក។ នេះជារបៀប:

1. បង្កើតផ្ទាំងគំនូរថ្មីនិងបន្ថែមរូបផ្ទៃខាងក្រោយរបស់អ្នក។
2. ជ្រើសឧបករណ៍ចតុកោណ ទីមួយគូរចតុកោណកែងលើរូបភាព។ ដោយចតុកោណដែលបានជ្រើសសូមបំពេញការបំពេញពណ៌សនិងសញ្ញាដាច់សរសៃឈាមខួរក្បាលទៅគ្មាន។
3. ដោយចតុកោណដែលបាន ជ្រើសជ្រើសព្រិលផ្ទៃខាងក្រោយ ក្នុងបន្ទះលក្ខណសម្បត្តិ។ គ្រាប់រំកិលចំនួនបីគឺព្រិលចំនួនពន្លឺនិងភាពស្រអាប់។ នេះជាអ្វីដែលពួកគេធ្វើ:

• បរិមាណព្រិល: លៃតម្រូវភាពមិនច្បាស់នៃរូបភាពនៅពីក្រោមរូបរាង។ តម្លៃអតិបរមាគឺ +50 ។
• ពន្លឺ: លៃតម្រូវគំនួសពណ៌និងស្រមោលនៅក្នុងរូបភាព។ តម្លៃអប្បបរមាគឺ -50 និងតម្លៃអតិបរមាគឺ +50 ។
• ភាពស្រអាប់: ប៉ះពាល់ដល់ភាពថ្លានៃរូបរាងនិងភាពមើលឃើញរបស់រូបភាពនៅក្រោមរូបរាង។ តម្លៃមានចាប់ពី 0% ដល់ 100% ។

ប្រសិនបើអ្នកពិតជាចង់ "ផ្លាស់ប្តូរអ្វីៗ" ផ្លាស់ប្តូរពណ៌នៃរូបរាងនិងលេងជាមួយតម្លៃភាពស្រអាប់ដើម្បីផ្លាស់ប្តូរ "រូបរាង" របស់រូបភាព។

04 នៃ 07

បង្កើត Scrim នៅក្នុងកម្មវិធីរចនាបទពិសោធន៏ Adobe

បញ្ហារចនាទូទៅគឺធាតុចំណុចប្រទាក់ធាតុត្រូវតែជាពណ៌ធម្មតាប៉ុន្តែត្រូវបាត់បង់នៅពេលដាក់លើផ្ទៃខាងក្រោយឬពណ៌តាន់។ ដំណោះស្រាយគឺ scrim មួយ។ scrim គឺជាពណ៌ជម្រាលស្រអាប់ដែលបានដាក់រវាងធាតុចំណុចប្រទាក់និងផ្ទៃខាងក្រោយ។ នេះជាការងាយស្រួលក្នុងការសម្រេចបាននៅក្នុង XD ។ នេះជារបៀប:

1. បង្កើតផ្ទាំងសិល្បៈរបស់អ្នកនៅ XD បន្ថែមរូបភាពហើយចម្លងនិងបិទភ្ជាប់ធាតុចំណុចប្រទាក់ពីប្រអប់ UI ដែលសមរម្យ - ឯកសារ> ប្រអប់បើក UI ... - ចូលទៅក្នុងផ្ទាំងសិល្បៈ។ នៅក្នុងរូបភាពខាងលើរូបថតធ្វើឱ្យរបារស្ថានភាពនិងរបារកម្មវិធីពិបាកមើល។
2. ជ្រើសយកចតុកោណឧបករណ៍ និងគូរចតុកោណ។ នៅក្នុងបន្ទះលក្ខណសម្បត្តិជ្រើសបំពេញនិងជ្រើសជម្រាលពីការលេចឡើងក្នុងឧបករណ៍រើសពណ៌។ កំណត់ពណ៌ជម្រាលទៅជាពណ៌ខ្មៅនិងស។ កំណត់តម្លៃ A - ភាពស្រអាប់ - ទៅ 60% និង តម្លៃពណ៌ស A ទៅ 0% ។
3. ដោយប្រើចតុកោណដែលបាន ជ្រើសជ្រើសវត្ថុ> រៀបចំ> បញ្ជូនថយក្រោយ ។ ធាតុចំណុចប្រទាក់ឥឡូវនេះអាចមើលឃើញលើរូបភាព។

05 នៃ 07

បង្កើតរូបភាពរូបភាពនៅក្នុងកម្មវិធីពិព័រណ៍ Adobe Experience Design

លំនាំរចនាទូទៅមួយត្រូវបានរកឃើញនៅក្នុងកម្មវិធីជជែកដែលមនុស្សនិយាយជាមួយគ្នាហើយរូបភាពរបស់អ្នកនិយាយនឹងលេចឡើងនៅលើអេក្រង់។ អវតារទាំងនេះជារូបភាពដែលត្រូវបានបិទបាំង។ វាត្រូវបានស្លាប់សាមញ្ញនេះសម្រេចនេះនៅក្នុង XD ។ នេះជារបៀប:

1. អ្នកចាប់ផ្តើមជាមួយរូបភាពនិងរង្វង់ឬរូបរាងផ្សេងទៀតនៅលើផ្ទាំងសិល្បៈ។ អ្នកអាចបំពេញរង្វង់ដោយមានពណ៌ណាមួយ។ អ្វីដែលអ្នកមិនត្រូវធ្វើគឺបន្ថែមពណ៌ដាច់សរសៃឈាមខួរក្បាល។ វានឹងបាត់នៅពេលអ្នកបង្កើតប្រសិទ្ធិភាពដូច្នេះហេតុអ្វីបានជារំខាន។ ប្រសិនបើអ្នកត្រូវការដើម្បីជំរុញរង្វង់ចូរចម្លងវាទៅក្តារតម្បៀតខ្ទាស់។
2. ផ្លាស់ទីរង្វង់លើរូបភាពហើយជ្រើសរូបភាពនិងរង្វង់។ ជាមួយវត្ថុដែលបានជ្រើសរើស bot ជ្រើសវត្ថុ> របាំងដែលមានរូបរាង ។ នៅពេលដែលអ្នកលែងកណ្តុរ, Avatar ត្រូវបានបង្កើត។ ពីទីនោះអ្នកអាចប្តូរទំហំបាន។
3. ប្រសិនបើអ្នកត្រូវការបន្ថែម stroke, បិទភ្ជាប់រង្វង់ដែលអង្គុយនៅលើក្តារតម្បៀតខ្ទាស់របស់អ្នកនៅលើផ្ទាំងសិល្បៈ។ ជាមួយនឹងច្បាប់ចម្លងដែលបានជ្រើសសូមបិទបំពេញក្នុងលក្ខណសម្បត្តិហើយបន្ថែមពណ៌និងទទឹង។ ដើម្បីតម្រៀបពួកវាជ្រើសវត្ថុទាំងពីរហើយចុចប៊ូតុងបន្សំតាមកណ្តាលក្នុងជម្រើសតម្រឹមនៅកំពូលនៃបន្ទះលក្ខណសម្បត្តិ។
4. ប្រសិនបើអ្នកចង់ផ្លាស់ទីរូបថតនៅជុំវិញក្នុងរបាំង ចុចពីរដងលើរបាំង។ វានឹងបង្ហាញរូបភាពនិងរូបរាងរបាំង។ ចុចលើរូបភាពហើយទាញវាទៅក្នុងទីតាំង។ នៅពេលអ្នកដោះកណ្តុររូបភាពនឹងស្ថិតក្នុងទីតាំងថ្មីរបស់វានៅខាងក្នុងរបាំង។

06 នៃ 07

លេងជាមួយអាដាប់ធ័ររចនាបទពិសោធន៏ Adobe

ផ្ទាំងគំនូររចនាបទពិសោធមិនត្រឹមតែមានសម្រាប់អ្នកដើម្បីដាក់មាតិកាប៉ុណ្ណោះទេ។ ពួកគេផងដែរអាចត្រូវបានកែឆ្នៃ។ នេះគឺជារឿងពីរដែលអ្នកអាចធ្វើបាន:

1. ប្រសិនបើអ្នកត្រូវការតំរឹមទេសភាពនិងបញ្ឈរនៃផ្ទាំងសិល្បៈមួយស្ទួនផ្ទាំងស្គ្រីបហើយជាមួយនឹងស្ទួនដែលបានជ្រើសរើសសូមចុចលើប៊ូតុងទេសភាពនៅក្នុងផ្ទាំងលក្ខណសម្បត្តិ។ Artboard នឹងផ្លាស់ប្តូរទិសដៅផ្ដេក។ ប្រសិនបើ Artboard មានខ្លឹមសារលើវាសូមចុចលើឈ្មោះ Artboard ហើយលក្ខណសម្បត្តិរបស់ Artboard នឹងលេចឡើងក្នុងផ្ទាំង Properties ។
2. ដើម្បីបន្ថែមពណ៌ផ្ទាល់ខ្លួនទៅ Artboard និងគម្រោងសម្រាប់បញ្ហានោះសូមជ្រើស Artboard ហើយចុចលើ Chip ពណ៌បំពេញនៅក្នុងរូបរាងនៃផ្នែកលក្ខណសម្បត្តិ។ បញ្ចូលតម្លៃប្រព័ន្ធគោលដប់ប្រាំមួយសម្រាប់ពណ៌ហើយចុចសញ្ញា + ។ ពណ៌នឹងត្រូវបានបន្ថែមជាពណ៌ផ្ទាល់ខ្លួន។ ដើម្បីអនុវត្តពណ៌នៅកន្លែងណាផ្សេងទៀតជ្រើសវត្ថុហើយចុចលើបន្ទះឈីបពណ៌ផ្ទាល់ខ្លួនដើម្បីអនុវត្តពណ៌។
3. ផ្ទាំងក្រណាត់អាចត្រូវបានធ្វើឱ្យអាចបង្វិលបញ្ឈរបាន។ ដើម្បីធ្វើដូចនេះសូមជ្រើសផ្ទាំងសិល្បៈនិងផ្លាស់ប្តូរកម្ពស់របស់វាលើប៉ណ្ណោះលក្ខណសម្បត្តិឬដោយអូសផ្នែកខាងក្រោមនៃផ្ទាំងសិល្បៈ។ នៅក្នុងផ្ទៃរមូរនៃបន្ទះលក្ខណសម្បត្តិសូមជ្រើសបញ្ឈរពីម៉ឺនុយលេចឡើងហើយបញ្ចូលកម្ពស់វ៉ិបសាយសម្រាប់អេក្រង់។ បន្ទាត់ពណ៌ខៀវដែលបានបង្ហាញអ្នកនៅផ្នែកខាងក្រោមនៃទិដ្ឋភាព។ ដើម្បីសាកល្បងវាចុចប៊ូតុងលេងហើយរមូរទៅឆ្ងាយ។ ដើម្បីបិទការរមូរសូមជ្រើសគ្មាននៅក្នុងការរំកិលលេចឡើង។

07 នៃ 07

កែសម្រួលឧបករណ៍ UI ចល័តនៅក្នុងកម្មវិធីពិព័រណ៍ Adobe

ការរចនាបទពិសោធមានឧបករណ៍ UI សម្រាប់អភិវឌ្ឍប្រព័ន្ធប្រតិបត្តិការ iOS, Android និង Windows UI របស់។ នៅពេលដែលអ្នកបើកវាជាលើកដំបូងអ្នកប្រហែលជាគិតថាវាស្អាតណាស់។ ពិតប្រាកដណាស់ - រាល់បំណែកនិងបំណែកនៅក្នុងឧបករណ៍ទាំងនោះអាចកែសម្រួលយ៉ាងពេញលេញបាន។ ចូរស្វែងយល់ដោយការបង្កើតខ្សែអេឡិចត្រូនិច Android ។

1. អ្នកចាប់ផ្តើមដោយជ្រើសរើសឧបករណ៍ Artboard និងជ្រើសរើស Android Mobile នៅក្នុងផ្នែក Google នៃបន្ទះលក្ខណសម្បត្តិ ។
2. ជ្រើសឯកសារ> បើកឧបករណ៍ UI> សម្ភារៈ Google ។ នេះបើកឧបករណ៍ UI រចនាសម្ភារៈ។ ជ្រើសរើសវ៉ែនតាដែលពង្រីកនិងគូស លើផ្ទាំងអេក្រង់ ។ ខ្ញុំចូលចិត្តចាប់ផ្តើមជាមួយនេះព្រោះវាផ្តល់ឱ្យខ្ញុំនូវមគ្គុទ្ទេសក៍សម្រាប់ការដាក់លើអេក្រង់ដ៏សំខាន់នៃធាតុចំណុចប្រទាក់។ ប្រសិនបើអ្នកចុចលើរបារពណ៌ខៀវមួយអ្នកនឹងឃើញវាត្រូវបានចាក់សោ។ ចុចសោដែលភ្ជាប់ជាមួយគ្នាដើម្បីដោះសោ ។ ដាក់ ​​Marquee ផ្ទាំងគំនូរហើយចម្លងការជ្រើសរើសទៅក្តារតម្បៀតខ្ទាស់។ ត្រលប់ទៅឯកសាររបស់អ្នកហើយបិទភ្ជាប់អេក្រង់ទៅក្នុងផ្ទាំងសិល្បៈរបស់អ្នក។
3. សូមចុចម្តងនៅលើរបារកម្មវិធីដែលនៅលើកំពូលនៃផ្ទាំងគំនូរ។ សូមកត់សម្គាល់អំពីរបៀបដែលអ្នកអាចជ្រើសរើសវាបាន។ ជ្រើសវត្ថុ> រៀបចំ> នាំទៅមុខ។ ការជ្រើសរើសរបស់អ្នកឥឡូវនេះស្ថិតនៅពីលើអេក្រង់។ វាគួរតែប្រាប់អ្នកថាធាតុនីមួយៗនៅលើអេក្រង់អាចកែបាន។
4. ចុចទ្វេដងលើរបារស្ថានភាព នៅខាងលើហើយក្នុងបន្ទះលក្ខណៈសម្បត្តិ និងបំពេញពណ៌ទៅ 455A64 ។ ចុចទ្វេដងលើរបារកម្មវិធីហើយកំណត់វាទៅ 607D8B ។ នេះគួរតែប្រាប់អ្នកថាធាតុនីមួយៗនៅក្នុងឧបករណ៍ UI អាចត្រូវបានគេកែសម្រួលដើម្បីបំពេញតាមពណ៌ជាក់លាក់របស់គម្រោង។
5. ចុះយ៉ាងណាចំពោះរូបតំណាងនេះ? នេះជារបៀបប្តូរពណ៌របស់ពួកគេ។ ចុចទ្វេដងលើបេះដូង ដើម្បីជ្រើសរើសវា។ ប្រសិនបើអ្នកក្រឡេកមើលបន្ទះលក្ខណៈសម្បត្តិអ្នកអាចសន្មត់ថាអ្នកមិនអាចកែសម្រួលការជ្រើសរើសបានទេ។ មិនពិតទេ។ ចុចទ្វេដងលើបេះដូងម្តងទៀត ។ លក្ខណៈសម្បត្តិបើកហើយអ្នកប្តូរពណ៌បំពេញទៅ FF0000 ។ ធ្វើម្តងទៀតពីរដងចុចទ្វេដងសម្រាប់រូបតំណាងដែលនៅសល់និងអត្ថបទ។