លក្ខណៈពិសេសនៃការរចនាសម្ភារៈពី Google ដើមឡើយមានគោលបំណងលើប្រព័ន្ធប្រតិបត្តិការ Android ជាមធ្យោបាយមួយដើម្បីស្នើឱ្យមានការរចនានៅលើវេទិកា។
01 នៃ 06
របៀបបង្កើតកាតរចនាសម្ភារៈនៅក្នុង Adobe Experience Design CC
នៅពេលដែលអ្នកច្នៃម៉ូតបានចាប់ផ្តើមស្ទាបស្ទង់តាមវាហើយយល់ពីការគិតនៅពីក្រោយ Material Design បានក្លាយជាផ្នែកមួយនៃទស្សនវិជ្ជាដែលមានឥទ្ធិពលបំផុតនៅក្នុង ការរចនាគេហទំព័រនិងទូរស័ព្ទ ។ អ្វីទាំងអស់ដែលអ្នកត្រូវធ្វើដើម្បីដឹងថាអ្វីដែលយើងកំពុងទទួលគឺការស្វែងរកការរចនាសម្ភារៈនៅលើ Pinterest ហើយអ្នកនឹងឃើញឧទាហរណ៍និងពិសោធន៍រាប់រយនៅលើឧបករណ៍កុំព្យូទ័របន្ទះនិងគេហទំព័រ។
ទិដ្ឋភាពគួរឱ្យចាប់អារម្មណ៍នៃការរចនាសម្ភារៈគឺវាគឺជាការគិតរបស់ Google អំពីរបៀបដែលកម្មវិធីគួរបង្ហាញនិងធ្វើការលើឧបករណ៍ចល័តប៉ុន្តែគំនិតត្រូវបានអនុវត្តទៅអេក្រង់ណាមួយនៃទំហំណាមួយនៅលើវេទិកាណាមួយ។ ដូចដែល Google បានបញ្ជាក់នៅក្នុងវគ្គដំបូងនៃការបញ្ជាក់ថា "យើងបានប្រកួតប្រជែងខ្លួនយើងដើម្បីបង្កើតភាសាដែលអាចមើលឃើញសម្រាប់អ្នកប្រើរបស់យើងដែលសំយោគគោលការណ៍បុរាណនៃការរចនាល្អជាមួយនឹងការច្នៃប្រឌិតនិងលទ្ធភាពនៃបច្ចេកវិទ្យានិងវិទ្យាសាស្ត្រ។ នេះគឺជាការរចនាសម្ភារៈ។ លក្ខណៈពិសេសនេះគឺជាឯកសាររស់រវើកដែលនឹងត្រូវបានធ្វើបច្ចុប្បន្នភាពនៅពេលយើងបន្តអភិវឌ្ឍគោលជំហរនិងជាក់លាក់នៃការរចនាសម្ភារៈ។ "
សម្ភារៈដែលនិយាយអំពី, នៅក្នុងលក្ខខណ្ឌទូទៅណាស់, គឺក្រដាសនិងចំណុចសំខាន់នៃការរចនាសម្ភារៈគឺជាកាត។ ចូរគិតពីកាតលិបិក្រមនៅលើផ្ទៃមុខហើយអ្នកកំពុងស្ថិតនៅលើផ្លូវត្រូវ។ កាតមួយគឺជាធាតុមួយដែលមានរូបថតវីដេអូតំណអត្ថបទនិងអ្វីៗជាច្រើនទៀតប៉ុន្តែកន្លែងដែលវាខុសពីការរចនាអន្តរកម្មភាគច្រើនគឺពួកគេចង់ផ្តោតលើប្រធានបទតែមួយ។ សន្លឹកមានជ្រុងរាងមូលមានស្រមោលងងឹតដែលបង្ហាញថាវាស្ថិតនៅលើផ្ទៃខាងលើហើយប្រសិនបើពួកគេទាំងអស់នៅលើយន្តហោះដដែលនោះគេហៅថា "ការប្រមូល" ។
នៅក្នុងនេះ "តើធ្វើដូចម្តេចដើម្បី" យើងនឹងបង្កើតកាតដែលមានមូលដ្ឋានលើ spec នេះ។ ជាជាងបង្កើតកាតដែលមានភាពខុសគ្នានៃរូបភាពនិងឧបករណ៍គំនូរយើងនឹងមកនៅវាពីទិសដៅផ្សេងគ្នា។ យើងនឹងប្រើឧបករណ៍នានានៅក្នុងការរចនាបទពិសោធន៏របស់ Adobe ដែលបច្ចុប្បន្ននេះមានតែការមើលជាមុនជាសាធារណៈរបស់ Macintosh ប៉ុណ្ណោះហើយវាឥតគិតថ្លៃ។ អ្នកអាចទាញយកវានៅទីនេះ។
តោះចាប់ផ្តើម។
02 នៃ 06
បង្កើតគំរូដើម Artboard នៅក្នុង Adobe Experience Design CC
មិនមានវិធីច្បាស់លាស់ដើម្បីបង្កើតអេក្រង់ប្រព័ន្ធអេនដ្រយពី Start Screen នៅក្នុង Experience Design CC (XD) ទេ។ អ្វីដែលយើងធ្លាប់ធ្វើនៅពេលយើងបើក XD គឺជ្រើសរើសជម្រើស iPhone 6 ហើយនៅពេលដែលចំណុចប្រទាក់បើកយើងជ្រើសរើស ឧបករណ៍ Artboard នៅផ្នែកខាងក្រោមរបារឧបករណ៍ហើយជ្រើស Android Mobile ពីជម្រើសនៅលើបន្ទះលក្ខណសម្បត្តិនៅខាងស្តាំ។ បន្ទាប់មកយើងប្តូរទៅឧបករណ៍ជ្រើសរើសចុចម្ដងនៅលើឈ្មោះសិល្បៈរបស់ទូរស័ព្ទ iPhone និងលុបផ្ទាំងសិល្បៈ។ គ្មានទៀតទេ។
នៅក្នុងកំណែបច្ចុប្បន្នរបស់ XD មានព្រួញតូចមួយនៅក្បែរទូរស័ព្ទ iPhone 6 ដែលនៅពេលចុចចុចម៉ឺនុយទម្លាក់ចុះ។ ពីទីនោះអ្នកជ្រើសរើសកំណែ Android Mobile ហើយផ្ទាំង ឧបករណ៍ Android Mobile ត្រូវបានជ្រើសរើសបើកនៅក្នុង interface ។
ដើម្បីធានាថាយើងមានទំហំអេក្រង់សមរម្យសម្រាប់កាតយើងជាធម្មតាធ្វើដំណើរទៅ Sketch 3 ហើយចម្លងនិងបិទភ្ជាប់របារស្ថានភាពរបាររុករកនិងរបារកម្មវិធីពី Template Design Material ទៅក្នុងផ្ទាំងសិល្បៈ។ ផ្ទាំងគំនូរ 3.2 មានសម្ភារៈរចនាសម្ភារៈមួយ ( ឯកសារ> ថ្មីពីពុម្ព> រចនាសម្ភារៈ ) និងមួយផ្សេងទៀតដ៏ល្អឥតខ្ចោះមួយដ៏ល្អគឺមកពី Kyle Ledbetter ដែលអ្នកអាចទទួលបាននៅទីនេះ។ ប្រសិនបើអ្នកមិនមានគំនូរព្រាងអ្នកអាចចម្លងនិងបិទភ្ជាប់ពួកវាពីផ្ទាំង XD ដែលមាននៅក្នុង ឯកសារ> បើកឧបករណ៍ UI> សម្ភារៈ Google ។ អ្នកក៏អាចទាញយកពួកវាពី Google សម្រាប់ប្រើក្នុង Photoshop, Illustrator, After Effects និង Sketch ។
03 នៃ 06
ការបន្ថែមកាតរចនាសម្ភារៈទៅឱ្យ Adobe XD CC Artboard
លក្ខណៈពិសេសមួយក្នុងចំណោមលក្ខណៈពិសេសដែលមានប្រយោជន៍បំផុតរបស់ XD គឺ ការបញ្ចូល UI Kits សម្រាប់ Apple iOS, Google Material និង Microsoft Windows ។ ក្នុងន័យជាច្រើនពួកគេបន្ថែមពាក្យ "Rapid" ទៅកាន់ពាក្យ "Rapid Prototyping" ហើយពួកគេក៏ធ្វើឱ្យការងាររបស់អ្នករចនាម៉ូដកាន់តែងាយស្រួលនៅក្នុងធាតុ UI ទូទៅដែលមិនត្រូវបង្កើតឡើងវិញជាប្រចាំនៅក្នុងកម្មវិធីរចនាដូចជា Photoshop, Illustrator ឬ គំនូរព្រាង។
ធាតុ UI ដែលយើងត្រូវការគឺជាកាតមួយ។ ដើម្បីទទួលបានវាយើងបានជ្រើសរើស File> Open UI Kit> Google Material និងឧបករណ៍នេះបានបើកជាឯកសារថ្មី។ ធាតុដែលយើងត្រូវការត្រូវបានរកឃើញនៅក្នុងប្រភេទកាត។
អ្វីដែលយើងស្រឡាញ់អំពីទាំងនេះគឺពួកគេប្រកាន់ខ្ជាប់ទៅនឹងការបញ្ជាក់អំពីការរចនាសម្ភារៈដូចបានបង្ហាញនៅក្នុងលក្ខណៈពិសេសប្លុកមាតិកាក៏ដូចជាការធ្វើទ្រង់ទ្រាយអត្ថបទនិងលក្ខណៈពិសេសគម្លាតដែលបានដាក់នៅក្នុងប្រភេទ Typography ។
រចនាប័ទ្មកាតដែលយើងចង់បានគឺនៅខាងក្រោមផ្នែកខាងឆ្វេង។ យើងគ្រាន់តែសម្គាល់វាដោយកណ្តុររបស់យើងហើយចម្លងវាទៅក្ដារតម្បៀតខ្ទាស់។ ជាអកុសល XD មិនមានចំណុចប្រទាក់ផ្ទាំងសម្រាប់ឯកសារបើកទេ។ អ្វីដែលយើងធ្វើគឺផ្លាស់ទីបង្អួចឯកសារបើកចំហបន្តិចម្តង ៗ ដើម្បីបង្ហាញពីអ្វីដែលយើងកំពុងធ្វើការជ្រើសវាហើយបិទភ្ជាប់។ មធ្យោបាយមួយទៀតក្នុងការផ្លាស់ប្តូរឯកសារ XD បើកចំហភ្លាមគឺ ចុចពាក្យបញ្ជា - ' ។
04 នៃ 06
របៀបកែសម្រួលធាតុរចនាសម្ភារៈនៅក្នុង Adobe Experience Design CC
នៅពេលដែលកាតនៅ XD មកដល់ពីក្ដារតម្បៀតខ្ទាស់មិនសូវចាប់ផ្តើមធ្វើការជាមួយវា។ រឿងដំបូងដែលអ្នកត្រូវធ្វើ គឺការបង្រួបបង្រួមកាត ព្រោះអ្នកត្រូវការការចូលទៅកាន់ប៊ីតនិងបំណែកដែលបានធ្វើ។ ដើម្បីធ្វើដូចនេះជ្រើសកាតហើយ ជ្រើសវត្ថុ> បំបែកក្រុម ឬ ចុច Shift-Command-G ។
ឥឡូវកាតរបស់អ្នកមានបីបំណែក:
- ប្រអប់ពណ៌ប្រផេះស្រាលសម្រាប់រូបភាព។
- ប្រអប់ពណ៌ប្រផេះមធ្យមសម្រាប់អត្ថបទ
- ប្រអប់ខាងក្រោយប្រើជាផ្ទៃខាងក្រោយ។
ជំហានដំបូងគឺត្រូវលុបប្រអប់ពណ៌ប្រផេះ។ គោលបំណងតែមួយគត់របស់វាគឺធ្វើជាកន្លែងដាក់សម្រាប់រូបភាពដែលធ្វើឱ្យវាបើអ្នកជ្រើសជម្រើស។
ប្រអប់ជាមួយអត្ថបទគឺពិតជាពណ៌ប្រផេះចាស់ជាមួយភាពស្រអាប់ 50% ។ ប្រអប់នេះអាចត្រូវបានប្រើជាផ្ទៃខាងក្រោយអត្ថបទហើយអ្នកអាចផ្លាស់ប្តូរពណ៌និងភាពស្រអាប់របស់ប្រអប់។
ទោះបីជាវាមិនទាន់ឃើញច្បាស់ភ្លាមៗប្រអប់ពណ៌ប្រផេះស្រាលដូចខាងក្រោមៈ Material Design spec នៅជ្រុងកំពូលរបស់វាត្រូវបានបង្គត់ដោយ 2 ភីកសែល។ រក្សាគំនិតនេះប្រសិនបើអ្នកកំពុងបន្ថែមរូបភាព។ វាក៏នឹងត្រូវការជ្រុងមូលដែលអាចត្រូវបានបន្ថែមទៅកម្មវិធីរូបភាពឬនៅក្នុង XD ។
ដោយមើលឃើញថានេះគឺជាស្ថានភាពដែលនៅសល់របស់កាតវាក៏ត្រូវការស្រមោលផងដែរ។ លក្ខណៈពិសេសនេះបានធ្វើឱ្យច្បាស់ថាវាមានការកាត់បន្ថយនៃការសម្រាកនៃកាតនៃ 2 ភីកសែល។ ដើម្បីបន្ថែមនេះ ជ្រើសរូបរាងផ្ទៃខាងក្រោយពណ៌ខ្មៅហើយកំណត់តម្លៃ Y និង B (ព្រិល) ទៅ 2 ក្នុងបន្ទះលក្ខណសម្បត្តិ។
05 នៃ 06
របៀបបន្ថែមរូបភាពទៅកាតរចនាសម្ភារៈនៅក្នុង Adobe XD CC
ការស្គាល់កាតមានទទឹង 344 ភីចសែលហើយផ្ទៃរូបភាពមាន 150 ភីកសែលខ្ពស់ ( ពាក់កណ្តាលកម្ពស់ប្រអប់ពណ៌ប្រផេះ ) យើងបានបើករូបភាពនៅក្នុង Photoshop ហើយបានរក្សាទុកវាតាមទំហំហើយរក្សាទុកវាដោយប្រើជម្រើស @ 2x នៅក្នុងប្រអប់ នាំចេញ របស់ Photoshop ។ ប្រអប់។ រូបភាពត្រូវបាននាំចូលទៅក្នុង Adobe XD ។
បន្ទាប់មកយើងបានអូសប្រអប់ពណ៌ប្រផេះស្រាលលើរូបភាពនៅលើបន្ទះបិទភ្ជាប់ហើយជ្រើស វត្ថុ> របាំងដោយរូបរាង ។ លទ្ធផលគឺរូបភាពយកជ្រុងរាងមូលនៃរាង។ បន្ទាប់មកយើងបានផ្លាស់ប្តូររូបភាពទៅទីតាំងចុងក្រោយរបស់ខ្លួន។
ជាមួយរូបភាពនៅក្នុងកន្លែងនោះយើងបានប្តូរពណ៌ផ្ទៃខាងក្រោយនៃប្រអប់ពណ៌ប្រផេះមធ្យមដែលបានផ្លាស់ប្តូរអត្ថបទនិងពណ៌នៃអត្ថបទតំណ។
06 នៃ 06
ប្រើលក្ខណៈពិសេសក្រឡាចត្រង្គ Adobe XD CC
ជាមួយនឹងកាតបញ្ចប់វាឥឡូវនេះត្រូវដាក់ឱ្យបានត្រឹមត្រូវតាមសម្ភារៈរចនាសម្ភារៈ។ នេះមានន័យថាមាន 8 ភីកសែលនៅផ្នែកម្ខាងនៃកាតហើយកាតត្រូវការ 8 ភីកសែលខាងក្រោមរបារកម្មវិធី។ ដើម្បីធ្វើដូចនេះសូមចុចម្តងនៅលើឈ្មោះផ្ទាំងក្រដាសហើយក្នុងផ្ទាំងលក្ខណសម្បត្តិជ្រើសក្រឡាចត្រង្គ។ ក្រឡាចត្រង្គលេចឡើងនៅលើផ្ទាំងសិល្បៈ។
ទំហំក្រឡាចត្រង្គលំនាំដើមគឺ 8 ភីកសែលដែលកើតឡើងទំហំក្រឡាសម្រាប់រចនាសម្ភារៈ។ ប្រសិនបើអ្នកត្រូវការទំហំខុសគ្នាផ្លាស់ប្តូរតម្លៃនៅក្នុងផ្ទៃក្រឡាចត្រង្គ។ ប្រសិនបើអ្នកចង់ផ្លាស់ប្តូរពណ៌នៃក្រឡាចត្រង្គសូមចុចបន្ទះឈីបពណ៌ហើយជ្រើសរើសពណ៌ពីឧបករណ៍រើសពណ៌។
ជាមួយនឹងក្រឡាចត្រង្គដែលអាចមើលឃើញសូមចុចលើកាតហើយផ្លាស់ទីវាទៅទីតាំងចុងក្រោយរបស់វា។
ដើម្បីបញ្ចប់យើងបានជ្រើសរើសកាតចុចប៊ូតុង Repeat Grid ហើយផ្លាស់ប្តូរចន្លោះរវាងសន្លឹកបៀទៅ 8 ភីចសែលផងដែរ។