Dub
បន្ទះត្រួតពិនិត្យក្រដាសអង្ករម៉ាត់របស់ Link
ប្រព័ន្ធមើលឃើញរបស់ Dub មានសោភ័ណភាព SaaS ដែលមានការរឹតបន្តឹង និងស្ទើរតែមានលក្ខណៈវិចារណកថា៖ ផ្ទាំងក្រណាត់ស្ទើរតែពណ៌សដែលភ្ជាប់គ្នាដោយស៊ុមស្តើងៗជាជាងធាតុដែលលេចចេញមក ជាមួយនឹងពុម្ពអក្សរពណ៌ដិតមួយពណ៌ដែលផ្តល់នូវការគាំទ្ររចនាសម្ព័ន្ធ និងពណ៌ខៀវភ្លឺតែមួយ (#2563eb) ដែលបង្កើតសេចក្តីថ្លែងការណ៍។ ផ្ទៃនៅតែរាបស្មើ និងគ្មានស៊ុមនៅពេលមើលដំបូង ប៉ុន្តែធុងនីមួយៗមានរឹម 1px #e5e5 ដែលបង្កើតអារម្មណ៍នៃឯកសារដែលបានបោះពុម្ព។ បុគ្គលិកលក្ខណៈត្រូវបានសម្រេចតាមរយៈសំណុំតូចមួយនៃការសង្កត់សំឡេង "ថ្នាំគ្រាប់" ពណ៌ (ពណ៌ទឹកក្រូច បៃតង ពណ៌ស្វាយ) ដែលអណ្តែតពីលើក្ដារលាយអព្យាក្រឹត និងបឋមកថាដែលមានអារម្មណ៍ជឿជាក់ និងទំនើបដោយមិនមានភាពឆើតឆាយ។ សមាសធាតុមានទំហំតូច និងក្រាស់៖ លូ 8px កាំកាត 12px ស្លាករាងថ្នាំគ្រាប់នៅ 9999px និងការគ្រប់គ្រងដែលមើលមិនឃើញជំនួសឱ្យប៊ូតុងធ្ងន់ៗដែលពេញ។
ទំព័រនេះត្រូវបានបង្កើតឡើងនៅលើប្លង់កណ្តាលដែលមានទទឹងអតិបរមាប្រហែល 1200px។ ធាតុសំខាន់គឺជាប្លុកអត្ថបទកណ្តាលដែលមានធាតុអណ្តែតបី (កម្មវិធីសម្ព័ន្ធ ការវិភាគការបម្លែង តំណភ្ជាប់ខ្លីៗ) ដែលដាក់ផ្ដេកនៅពីលើប្លង់ផលិតផលធំមួយ។ ផ្នែកត្រូវបានរៀបចំបញ្ឈរជាមួយនឹងបន្ទាត់រាងអក្សរ Z 64px ដែលស្របគ្នា ឆ្លាស់គ្នារវាងផ្ទាំងក្រណាត់ពណ៌ស និងក្រដាស #f5f5f5 សម្រាប់ការបំបែកសម្លេង។ ផ្នែកខាងក្រោមប្រើប្លង់រាងអក្សរ Z៖ អត្ថបទវិចារណកថាត្រូវបានដាក់កណ្តាលនៅកណ្តាលទីបី ហើយកាត UI អណ្តែតត្រូវបានភ្ជាប់ទៅនឹងរឹមខាងឆ្វេង និងខាងស្តាំ ដែលបង្កើតជាចង្វាក់មិនស៊ីមេទ្រីដូចទស្សនាវដ្តី។ ពពកឡូហ្គោគឺជាក្រឡាចត្រង្គ 5x2 សាមញ្ញមួយ ដែលដាក់កណ្តាលទំព័រ។ ការរុករកគឺជារបារកំពូលតិចតួចបំផុត—ឡូហ្គោនៅខាងឆ្វេង ការរុករកនៅកណ្តាល ក្រុមប៊ូតុងពីរ (ប៊ូតុង "ចូល" ខ្មោច + ប៊ូតុង "ចុះឈ្មោះ" ដែលបានបំពេញ) នៅខាងស្តាំ—ដោយគ្មានម៉ឺនុយថេរ ឬម៉ឺនុយមេ។ ប្លង់ផ្ទាំងគ្រប់គ្រងរបស់បង្អួចមេបង្ហាញប្លង់កម្មវិធីពីរជួរឈរបុរាណ៖ របារចំហៀងថេរ (ស្រដៀងនឹង 240px) + តំបន់មាតិកាដែលកំណត់ដង់ស៊ីតេនៃព័ត៌មានផលិតផលសម្រាប់អ្នកទស្សនាមុនពេលពួកគេចាប់ផ្តើមរមូរ។
រូបភាពទាំងនេះផ្តោតលើផលិតផល មិនមែនផ្តោតលើរបៀបរស់នៅទេ។ អេក្រង់មេផ្តោតលើរូបថតអេក្រង់ធំមួយនៅលើផ្ទាំងគ្រប់គ្រង ដែលតំណាងឱ្យគំរូផលិតផលពិភពពិតជាមួយនឹងការរុករករបារចំហៀង តារាងទិន្នន័យ និងធាតុ UI អណ្តែត ដែលដាក់ជាបន្ទះសំប៉ែតនៅលើផ្ទាំងក្រណាត់ពណ៌ស។ ឡូហ្គោអតិថិជនត្រូវបានបង្ហាញជាក្រឡាចត្រង្គពណ៌ប្រផេះដែលមិនឆ្អែត (beehiv, superpower, Chatbase ។ល។) ដើម្បីទទួលស្គាល់ដំណើរការប្រព័ន្ធផ្សព្វផ្សាយសង្គមរបស់ពួកគេ ដែលត្រូវបានដកចេញនូវពណ៌ ដើម្បីអនុញ្ញាតឱ្យការសង្កត់សំឡេងពណ៌ខៀវតែមួយនៃទំព័រនៅតែលេចធ្លោ។ កាតដៃគូអណ្តែត (ទម្រង់តូចៗ និងក្រឡាក្បឿងដែលមានទិន្នន័យចំណូល/ការទូទាត់) ផ្លាស់ទីជុំវិញប្លុកអត្ថបទវិចារណកថានៅខាងក្រោម ដែលបង្កើតអារម្មណ៍នៃជម្រៅដោយមិនប្រើស្រមោលលើអត្ថបទខ្លួនឯង។ លំនាំផ្ទៃខាងក្រោយក្រឡាចត្រង្គចំនុចៗគឺជាលក្ខណៈពិសេសដ៏លេចធ្លោ៖ ជួរស្តើងនៃចំណុចតូចៗដែលមានភាពស្រអាប់ទាបបង្កើតវាយនភាព និងអារម្មណ៍នៃប្រព័ន្ធរចនា/ផ្ទៃគំនូរ ដោយសង្កត់ធ្ងន់លើទីតាំងរបស់គេហទំព័រជា "វេទិកាបញ្ជាក់តំណភ្ជាប់ទំនើប"។ រូបតំណាងមានតិចតួចបំផុត ជាមួយនឹងគ្រោង និងការបំពេញ ហើយប្រើក្ដារលាយសង្កត់សំឡេង (ពណ៌ទឹកក្រូចក្រូចឃ្វិច ពណ៌ស្វាយផ្កាឡាវេនឌឺ ពណ៌បៃតងខ្ចី) សម្រាប់ស្លាកលក្ខណៈពិសេស។ គ្មានរូបថត រូបភាព ឬគំរូ 3D ណាមួយត្រូវបានប្រើប្រាស់ទេ—ចំណុចប្រទាក់អ្នកប្រើប្រាស់របស់ផលិតផលខ្លួនឯងគឺជាភាសាដែលមើលឃើញ។
ក្ដារលាយពណ៌
ម៉ាក
- Electric Blue
#2563eb— ពណ៌ម៉ាកចម្បង — ឡូហ្គោ តំណភ្ជាប់ សូចនាករដំណើរការសំខាន់ៗ ស្ថានភាពសកម្ម និងការសង្កត់សំឡេងរូបតំណាង — ត្រូវបានប្រើ។ ពណ៌ខៀវឆ្អែតលើផ្ទៃខាងក្រោយពណ៌សបង្កើតភាពទាក់ទាញតែមួយគត់របស់ប្រព័ន្ធ។ - Deep Sapphire
#1e40af— ផ្ទៃខាងក្រោយសំខាន់នៃប៊ូតុងសកម្មភាព ដែលជាការបំពេញដិតនៃការអំពាវនាវឱ្យធ្វើសកម្មភាព — ពណ៌តែមួយគត់ដែលបង្ហាញពីសកម្មភាព — ត្រូវបានប្រើតិចតួចដើម្បីទាក់ទាញចំណាប់អារម្មណ៍។
អព្យាក្រឹត
- Canvas White
#ffffff— ផ្ទៃខាងក្រោយទំព័រ ផ្ទៃកាត បន្ទះលេចឡើង គឺជាមូលដ្ឋានគ្រឹះដាច់ខាតនៃអេក្រង់នីមួយៗ។ - Paper Mist
#f5f5f5— ការផ្លាស់ប្ដូរពណ៌ផ្ទៃបន្តិចបន្តួចសម្រាប់កាតដែលដាក់ចូលគ្នា បន្ទះបន្ថែម និងការបំពេញពេលដាក់លើ។ - Ash
#e5e5e5— ស៊ុមស្តើងៗនៅលើកាត ឧបករណ៍ភ្ជាប់បញ្ចូល និងឧបករណ៍បែងចែក គឺជាខ្សែរចនាសម្ព័ន្ធដែលចងប្រព័ន្ធឱ្យនៅជាប់គ្នា។ - Smoke
#d4d4d4— ស៊ុមច្បាស់ជាងមុនសម្រាប់កុងតឺន័រដែលបានជ្រើសរើស និងគ្រោងប៊ូតុងបន្ថែម។ - Pebble
#c8c8c8— ស៊ុម គ្រោងត្រួតពិនិត្យ និងបន្ទាត់បែងចែករចនាសម្ព័ន្ធដែលមានកម្រិតពណ៌មធ្យម។ ពណ៌នេះមិនគួរប្រើជាពណ៌ចម្បងសម្រាប់ការអំពាវនាវឲ្យធ្វើសកម្មភាពទេ។ - Midnight Ink
#0a0a0a— អត្ថបទសំខាន់នៃប៊ូតុង ប៊ូតុងដែលបានបន្លិច និងអត្ថបទរុករកគឺស្ទើរតែខ្មៅសម្រាប់ភាពផ្ទុយគ្នាអតិបរមា។
អក្សរសាស្ត្រ
ពី ១១ ដល់ ៤៨ ភីកសែល · ៩ ជំហាន
- Satoshi — ការជំនួស៖ Inter (weight 500 · គ្រោង 500 · ចំណងជើងបង្ហាញ – ប្រើតែក្នុងបន្ទាត់ទំហំ 36–48px សម្រាប់ចំណងជើងចំណងជើង និងផ្នែក។ ទម្ងន់ពុម្ពអក្សរ – 500 (មធ្យម មិនមែនដិត)៖ ចំណងជើងមើលទៅមានទំនុកចិត្ត និងទំនើប ប៉ុន្តែមិនដែលមានឥទ្ធិពលខ្លាំងពេកនោះទេ។ សមាមាត្រធរណីមាត្ររបស់ Satoshi ផ្តល់ឱ្យពុម្ពអក្សរនូវអារម្មណ៍វិចារណកថា និងទំនើបបន្តិច ដែលច្បាប់ចម្លងដើមរបស់ Inter មិនអាចចម្លងបាន។
- Inter — ការជំនួស៖ Inter (native) · គ្រោង 400, 500, 600 · ច្បាប់ចម្លងតួអត្ថបទ ស្លាក UI ការរុករក ចំណងជើងរង និងចំណងជើងរង។ Inter គឺជាការងារចម្បង ដោយដោះស្រាយអ្វីៗគ្រប់យ៉ាងចាប់ពីស្លាកខ្នាតតូច 11px រហូតដល់ចំណងជើងរង 30px។ ទម្ងន់ 400 គឺជាលំនាំដើមសម្រាប់ច្បាប់ចម្លងតួអត្ថបទ 500 សម្រាប់ធាតុដែលបានបន្លិច និងស្លាកប៊ូតុង និង 600 ត្រូវបានរក្សាទុកសម្រាប់ស្លាក UI សំខាន់ៗ។ 16px ដែលមានកម្ពស់បន្ទាត់ 1.5 គឺជាទំហំជំហានតែមួយដែលជួបប្រទះញឹកញាប់បំផុត (កើតឡើង 1220 ដង) ដែលបញ្ជាក់ថា 16px គឺជាទំហំច្បាប់ចម្លងតួអត្ថបទ។
- Geist Mono — ការជំនួស៖ JetBrains Mono or IBM Plex Mono · គ្រោង 400, 500 · បំណែកកូដ ទិន្នន័យមេតាបច្ចេកទេស និងថូខឹនដែលមានចន្លោះតែមួយដែលបានបង្កប់ត្រូវបានប្រើនៅក្នុងប្លុកកូដនៅ 12–14px និងនៅក្នុងធាតុបង្ហាញកូដធំៗនៅ 24px។ នេះធានានូវភាពជឿជាក់នៃឧបករណ៍អភិវឌ្ឍន៍ ដែលស្របនឹងទីតាំងផលិតផលរបស់ Dub។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | មធ្យម |
| ជំហានមូលដ្ឋាន | 8px |
| កាំប៊ូតុង | 8px |
| កាំកាត | 12px |
| ស្រមោល | គ្មានព្រំដែនជំនួសឱ្យស្រមោល |
| រវាងផ្នែកនានា | 64px |
| ទទឹងទំព័រ | 1200px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Dub ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- ElevenLabs — អត្ថបទរូបថតមួយក្នុងពណ៌ក្រែមក្តៅឧណ្ហៗ ជាមួយនឹងចំណងជើងស្រាលៗ។ សៀវភៅកត់ត្រារចនាប័ទ្ម Bauhaus—ក្រដាសពណ៌សំបកស៊ុត ទឹកថ្នាំពណ៌ខ្មៅ និងពណ៌ស្វាយ និងពណ៌ទឹកក្រូចតែមួយសម្រាប់បង្ហាញផលិតផល។
- Awesomic — សំណាញ់ស័ង្កសីសម្រាប់សរសេរអត្ថបទ ដែលមានសញ្ញាវណ្ណយុត្តិពណ៌ទឹកក្រូច ដែលរំលឹកដល់ក្រដាសពណ៌
- Monad — ទិនានុប្បវត្តិបច្ចេកទេសវិចារណកថាលើក្រដាសក្តៅ
- Seline Analytics — តុវិភាគស្ងាត់ៗលើក្រដាសក្តៅឧណ្ហៗ
- Notion — សៀវភៅកត់ត្រាក្រដាសក្តៅមួយនៅក្រោមពន្លឺថ្ងៃត្រង់
- Anthropic — ទិនានុប្បវត្តិវិទ្យាសាស្ត្រលើក្រដាស vellum ក្តៅៗ—ផ្ទៃភ្លុកស្ងប់ស្ងាត់ ចំណងជើងវិចារណកថាដែលមានស្នាមឆ្នូតៗ និងការសង្កត់សំឡេងដីឥដ្ឋតែមួយ ដែលលេចឡើងតែនៅពេលត្រូវការសកម្មភាពប៉ុណ្ណោះ។
- Calendly — ទឹកថ្នាំពណ៌ខៀវចាស់លើថ្មម៉ាបត្រជាក់
- Augen Pro — ការបង្ហាញពណ៌សរបស់ក្រុមហ៊ុន Apple មានពណ៌ខៀវអគ្គិសនី គ្មានទម្ងន់ ជាចំណុចលេចធ្លោតែមួយគត់នៅក្នុងលំហពណ៌តែមួយ។
- Antimetal — កំណត់ហេតុវិចារណកថាមួយនៅលើក្រដាសពណ៌ក្រែម—ព្រឹកដ៏ស្ងប់ស្ងាត់មួយនៅក្នុងទិនានុប្បវត្តិវិទ្យាសាស្ត្រមួយ ដែលការអត់ធ្មត់បង្ហាញពីទំនុកចិត្ត ហើយអក្សរ serifs ធ្វើការងារធ្ងន់ៗ។
- Perk — កំបោរអគ្គិសនីលើក្រដាស parchment ក្តៅ
- Ditto — សិក្ខាសាលាមួយដែលមានពន្លឺថ្ងៃបង្កើតគំរូផ្កាព្រៃ។ ផ្ទៃក្រែមក្តៅឧណ្ហៗ ពណ៌មូលដ្ឋានពណ៌លឿងភ្លឺ ទឹកថ្នាំពណ៌ខៀវចាស់ និងទម្រង់ពណ៌សរីរាង្គរីកដុះដាលនៅពីក្រោយស្នាដៃ។
- Officevibe — ទស្សនាវដ្ដីវិចារណកថាមួយនៅលើក្រដាសពណ៌ក្រែមក្តៅ។ ស្រមៃមើលអត្ថបទដ៏ស៊ីជម្រៅមួយអំពីការគ្រប់គ្រងធនធានមនុស្ស ដែលត្រូវបានបង្ហាញជាផលិតផលមួយ - ពុម្ពអក្សរសរសេរដោយដៃជាអក្សរដិតដែលខ្សឹបខ្សៀវតាមរយៈចំណុចប្រទាក់ពណ៌ខៀវទំនើប។