Column
សៀវភៅកត់ត្រាពណ៌ខៀវចាស់នៅក្រោមព្រឹកព្រលឹមត្រជាក់
ជួរឈរប្រើពណ៌ខៀវសមុទ្រជ្រៅ និងមានលក្ខណៈស្ថាប័នលើផ្ទៃខាងក្រោយស្ទើរតែពណ៌ស៖ ទំព័រនេះមានអារម្មណ៍ដូចជាផ្ទៃផលិតផលធនាគារដ៏រឹងមាំជាមុនសិន ហើយទីពីរគឺសួនកុមាររបស់អ្នកអភិវឌ្ឍន៍។ ពណ៌ម៉ាកមិនមែនជាពណ៌តែមួយទេ ប៉ុន្តែជាគូដែលសម្របសម្រួលគ្នា—ពណ៌ខៀវសមុទ្រ #111a4a សម្រាប់រចនាសម្ព័ន្ធធ្ងន់ធ្ងរ ពណ៌បៃតងខ្ចី #44b48b សម្រាប់ទិន្នន័យ និងលេខកូដ—ជាមួយនឹងពណ៌ទឹកក្រូចក្តៅតែមួយ (#ec652b) ដែលត្រូវបានបម្រុងទុកសម្រាប់ផ្ទៃសង្កត់សំឡេងដែលមានអាំងតង់ស៊ីតេខ្ពស់ដូចជាកាត Brex។ រចនាប័ទ្មអក្សរត្រូវបានគ្របដណ្ដប់ដោយ SuisseIntl ដែលជាអក្សរធរណីមាត្រ sans serif ដែលប្រើលើជួរទម្ងន់ទាំងមូលចាប់ពី 300 (តំណភ្ជាប់) ដល់ 600 (អេក្រង់) ដែលផ្តល់ឱ្យប្រព័ន្ធនូវរចនាប័ទ្មវិចារណកថាដ៏ចម្រាញ់ដែលក្រុមហ៊ុន fintech ភាគច្រើនខ្វះ។ កាតអណ្តែតលើផ្ទៃពណ៌សធំៗជាមួយនឹងស្រមោលស្រទាប់ៗ។ ធាតុចំណុចប្រទាក់ភាគច្រើនមានរាងសំប៉ែត ដែលមានជម្រៅលេចឡើងតែកន្លែងដែលកាតគួរមានអារម្មណ៍ដូចជាវត្ថុរូបវន្ត (ធាតុក្រាហ្វិកប្រតិបត្តិការ គំរូផលិតផល)។ កូដ និងទិន្នន័យហិរញ្ញវត្ថុត្រូវបានបង្ហាញជាពណ៌តែមួយ ពណ៌ដូចពពុះសមុទ្រ—ជាសញ្ញាដែលមើលឃើញថានេះជាធនាគារដែលបង្កើតឡើងដោយវិស្វករសម្រាប់វិស្វករ។
រចនាសម្ព័ន្ធទំព័រមានទទឹងពេញ ស្ថិតនៅចំកណ្តាល ជាមួយនឹងរឹមចំហៀងធំទូលាយ (64–15 សង់ទីម៉ែត្រ នៅលើកុំព្យូទ័រលើតុ)។ អេក្រង់មេគឺជាប្លង់បំបែក៖ ចំណងជើង និងការអំពាវនាវឱ្យធ្វើសកម្មភាពត្រូវបានតម្រឹមខាងឆ្វេងនៅចម្ងាយ 25 សង់ទីម៉ែត្រ ខណៈពេលដែលធាតុក្រាហ្វិកប្រតិបត្តិការអណ្តែតត្រូវបានដាក់នៅខាងស្តាំនៅចម្ងាយ 55 សង់ទីម៉ែត្រ ទល់នឹងផ្ទៃខាងក្រោយផែនទីពាក់កណ្តាលពណ៌។ នៅខាងក្រោមអេក្រង់មេ ផ្នែកនានាឆ្លាស់គ្នារវាងពណ៌ស (4 សង់ទីម៉ែត្រ) និងផ្ទាំងក្រណាត់ស្រាល (5 សង់ទីម៉ែត្រ) ជាមួយនឹងបន្ទាត់បញ្ឈរ 6 សង់ទីម៉ែត្រ។ ខ្លឹមសារត្រូវបានរៀបចំតាមក្រឡាចត្រង្គ 6 ជួរឈរតែមួយ៖ ប្លុកអត្ថបទកាន់កាប់ 4 ជួរឈរ (7 សង់ទីម៉ែត្រ) កាតរូបភាព/ផលិតផលកាន់កាប់ 5–6 ជួរឈរ ជាមួយនឹងអុហ្វសិតដោយចេតនាពីក្រឡាចត្រង្គ។ ផ្នែកដែលពិពណ៌នាអំពីលក្ខណៈពិសេសប្រើប្លង់ 2 ជួរឈរ៖ អត្ថបទនៅខាងឆ្វេង ផលិតផលនៅខាងស្តាំ។ ផ្នែកស្ថិតិទំនុកចិត្តត្រូវបានបែងចែកជាក្រឡាចត្រង្គ 4 ជួរឈរឆ្លងកាត់ទទឹងពេញនៃទំព័រ។ ឡូហ្គោអតិថិជនមានទីតាំងនៅក្នុងជួរដេកតែមួយដែលស្ថិតនៅចំកណ្តាលជាមួយនឹងបន្ទាត់ 48px។ បាតកថាមានប្លង់ជួរឈរពីរតូច។ ការរុករកគឺជារបារខាងលើដែលមានកម្ពស់ 62px ថ្លា និងថេរនៅពីលើអេក្រង់មេ ជាមួយនឹងផ្ទៃខាងក្រោយព្រិលៗ ដែលរសាត់ទៅជាពណ៌សនៅពេលអ្នករំកិលចុះ។ មិនមានរបារចំហៀង ឬម៉ឺនុយមេទេ - ម៉ឺនុយទម្លាក់ចុះគឺជាម៉ឺនុយបែបព្រួញសាមញ្ញ។
រចនាប័ទ្មដែលមើលឃើញគឺតិចតួចបំផុត និងមានមុខងារ - ជួរឈរជៀសវាងទាំងស្រុងនូវការថតរូបស្តុក។ ភាសាដែលមើលឃើញត្រូវបានបង្កើតឡើងនៅលើប្រភពបី៖ (1) រូបភាពទិន្នន័យ SVG ជាពិសេសផែនទីពិភពលោកពាក់កណ្តាលពណ៌ដែលមានចំណុចៗ ដែលបង្ហាញជាមួយនឹងជម្រាលពីពណ៌ស្វាយទៅពណ៌ទឹកក្រូចទៅពណ៌ខៀវខ្ចី ដែលបង្កើតបរិយាកាសនៃមាត្រដ្ឋានសកលនៅពីក្រោយធាតុសំខាន់។ (2) ប្លង់កាតផលិតផល - ធាតុក្រាហ្វិកអណ្តែតទឹកដែលបង្ហាញសមតុល្យគណនី ព័ត៌មានលម្អិតនៃការផ្ទេរ និងបំណែកកូដ JSON នៅក្នុងកាតពណ៌សដែលមានស្រមោលយ៉ាងខ្លាំង។ (3) ការមើលឃើញតារាង - តារាងជើងទៀនពណ៌ខៀវខ្ចី ឬតារាងរបារដែលមានបន្ទាត់តភ្ជាប់ស្តើងៗដែលប្រើក្នុងផ្នែកទុកចិត្ត/ស្ថិតិ។ ផែនទីពាក់កណ្តាលពណ៌គឺជាធាតុដែលមើលឃើញហត្ថលេខា - ការផ្លាស់ប្តូរជម្រាលរបស់វាពី #d65620 (ពណ៌ទឹកក្រូច) ទៅពណ៌ស្វាយ ខៀវ ខៀវស្រងាត់ ខៀវស្រងាត់ និងលឿង ដែលបង្កើតវិសាលគមដែលបង្រួបបង្រួមក្ដារលាយម៉ាកទាំងមូលនៅលើផ្ទៃតុបតែងតែមួយ។ រូបតំណាងមានកម្រាស់គ្រោងឯកសណ្ឋាន 1.5–2px នៅក្នុងវ៉ារ្យ៉ង់ #232730 ឬ #a9acb6 ជាមួយនឹងការបំពេញសម្រាប់ស្ថានភាពសកម្ម។ គ្មានរូបថតរបៀបរស់នៅ គ្មានការបង្ហាញ 3D អរូបីទេ—ការរឹតបន្តឹងនេះគឺមានបំណងផ្តោតការយកចិត្តទុកដាក់លើផលិតផល និងទិន្នន័យ។
ក្ដារលាយពណ៌
ម៉ាក
- Indigo Navy
#111a4a— ពណ៌ចម្បងនៃម៉ាកយីហោត្រូវបានប្រើសម្រាប់ការអំពាវនាវឲ្យធ្វើសកម្មភាពដែលបានបំពេញ ស្ថានភាពរុករកសកម្ម បឋមកថា និងឡូហ្គោ។ ពណ៌ស្វាយចាស់ផ្តល់ឱ្យគេហទំព័រនូវពណ៌ខ្មៅដ៏រឹងមាំប៉ុន្តែសម្បូរបែប។ រួមជាមួយអក្សរពណ៌ស វាបង្កើតបានជាប៊ូតុងដែលមានភាពទាក់ទាញបំផុតនៅលើគេហទំព័រ។ - Seafoam 600
#44b48b— ពណ៌កូដ និងទិន្នន័យ គឺជាពណ៌ម៉ាកសម្រាប់សោ JSON ឧបករណ៍កំណត់អត្តសញ្ញាណ និងតម្លៃហិរញ្ញវត្ថុនៅក្នុងកូដ snippets។ វាក៏ត្រូវបានប្រើសម្រាប់ចំណុចទិន្នន័យនៅក្នុងតារាង និងការមើលឃើញកំណើនផងដែរ។ - Seafoam 700
#167e6c— ស្រមោលស្នោសមុទ្រងងឹតជាងមុនសម្រាប់គ្រោង បន្ទាត់តារាង និងការសង្កត់សំឡេងរូបតំណាងនៅក្នុងបរិបទទិន្នន័យ។ នេះភ្ជាប់មាត្រដ្ឋានស្នោសមុទ្រទល់នឹងផ្ទៃខាងក្រោយងងឹតជាងមុន។ - Seafoam 400
#94efb7— បំណែកកូដដែលបានបន្លិចមានតម្លៃខ្សែអក្សរ URL និងចំណុចបញ្ចប់ API នៅក្នុងប្លុកកូដ។ ពណ៌សមុទ្រស្រាលបំផុតអានជាពុម្ពអក្សរដែលមានចន្លោះតែមួយជាមួយនឹងពណ៌បៃតងខ្ចី។ - Deep Sea
#023247— គ្រោងតុបតែង និងពណ៌លេចធ្លោនៃតារាងគឺជាពណ៌ខៀវខៀវដ៏សម្បូរបែបដែលប្រើក្នុងរូបភាព SVG និងការបង្ហាញទិន្នន័យ រួមជាមួយមាត្រដ្ឋានពណ៌ស្នោសមុទ្រ។
អព្យាក្រឹត
- Midnight Ink
#011821— ផ្ទៃងងឹត និងអក្សរដែលបានបន្លិច – ផ្ទៃខាងក្រោយកាតផលិតផល អក្សរមេដែលមានកម្រិតពណ៌ខ្ពស់។ កាន់តែជិតពណ៌ប្រផេះជាមួយនឹងពណ៌ខៀវបៃតងត្រជាក់; ប្រើជាមូលដ្ឋានសម្រាប់របៀបងងឹត នៅពេលដែលផ្នែកមួយត្រូវការបញ្ច្រាស់។ - Slate Ink
#3b3e47— ចំណងជើងបន្ទាប់បន្សំ និងអត្ថបទសំខាន់មានភាពកក់ក្តៅជាង Midnight Ink បន្តិច ដែលត្រូវបានប្រើនៅកន្លែងដែលពណ៌ខ្មៅសុទ្ធហាក់ដូចជារដុបពេកនៅលើផ្ទាំងក្រណាត់ពណ៌ស្រាល។ - Steel
#7c7f88— អត្ថបទសំខាន់ និងអត្ថបទតំណភ្ជាប់ត្រូវបានគ្របដណ្ដប់ដោយពណ៌ស្រអាប់ (ប្រើចំនួន 245 ដងនៅក្នុងអត្ថបទសំខាន់)។ ពណ៌ប្រផេះ-ខៀវអព្យាក្រឹត ដែលត្រូវបានគេយល់ថាស្ងប់ស្ងាត់ មិនមែនជារូបភាពដែលស្រអាប់នោះទេ។ - Fog
#a9acb6— គ្រោងរូបតំណាង ស៊ុមទីបី និងអត្ថបទកន្លែងដាក់។ ពណ៌ប្រផេះមធ្យមដែលបំបែកអត្ថបទដោយមិនប្រកួតប្រជែងជាមួយវា។ - Mist
#cbcccf— អត្ថបទសំខាន់ — ហត្ថលេខា ការបដិសេធ និងអក្សរតូចៗ — អាចអានបានលើផ្ទៃខាងក្រោយពណ៌ស ប៉ុន្តែមើលទៅមិនសូវច្បាស់ទេ។ - Silver Lining
#e3e4e8— ស៊ុមកាត ស៊ុមវាលបញ្ចូល បន្ទាត់បែងចែក។ ពណ៌រចនាសម្ព័ន្ធ និងស្រទន់នេះត្រូវបានប្រើនៅកន្លែងដែលផ្ទៃពីរត្រូវការបំបែកដោយគ្មានស្រមោល។
អក្សរសាស្ត្រ
ពី 10 ដល់ 60px · 10 ជំហាន
- SuisseIntl — ការជំនួស៖ Inter · គ្រោង 300, 400, 500, 600 · ពុម្ពអក្សរចម្បង – ប្រើសម្រាប់ចំណងជើងទាំងអស់ អត្ថបទដើម ប៊ូតុង ការរុករក តំណភ្ជាប់ និងអត្ថបទកាត។ រូបរាងធរណីមាត្រ sans serif តែមួយគត់ផ្តល់ឱ្យ Column នូវរចនាប័ទ្មវិចារណកថាដ៏ប្លែកមួយ ដែលធ្វើឱ្យវាខុសប្លែកពីក្រុមហ៊ុន fintech ផ្សេងទៀតដែលធ្វើការផ្តាច់មុខជាមួយ Inter-only។ ទម្ងន់គឺ 600 នៅ 52–60px សម្រាប់ចំណងជើង 500 សម្រាប់ចំណងជើងរង 400 សម្រាប់អត្ថបទដើម និង 300 សម្រាប់តំណភ្ជាប់ដែលមានការសង្កត់ធ្ងន់ទាប។
- SuisseIntlMono — ការជំនួស៖ JetBrains Mono · គ្រោង 400 · ពុម្ពអក្សរដែលមានចន្លោះតែមួយស្រដៀងគ្នានឹង SuisseIntl ដែលប្រើសម្រាប់ស្លាកបច្ចេកទេស ឧបករណ៍កំណត់អត្តសញ្ញាណ API និងទិន្នន័យដែលបានបង្កប់ក្នុងធាតុ UI។ វារក្សាសមាមាត្រដូចគ្នានឹង SuisseIntl ដូច្នេះអត្ថបទដែលមានចន្លោះតែមួយ និងសមាមាត្រតម្រឹមបានត្រឹមត្រូវក្នុងបរិបទចម្រុះ។
- SFMono — ការជំនួស៖ Fira Code · គ្រោង 400 · ការបង្ហាញអត្ថបទកូដ – បង្ហាញក្នុងឧទាហរណ៍ JSON និងប្លុកឯកសារ API។ ស្រមោលស្នោសមុទ្រត្រូវបានប្រើដើម្បីសម្គាល់កូដពីអត្ថបទ UI ដោយមើលឃើញ។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | មធ្យម |
| ជំហានមូលដ្ឋាន | 8px |
| កាំប៊ូតុង | 8px |
| កាំកាត | 8px |
| ស្រមោល | គ្មានព្រំដែនជំនួសឱ្យស្រមោល |
| រវាងផ្នែកនានា | 72px |
| ទទឹងទំព័រ | 1200px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Column ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- dope.security — ស្ថានីយពាក់កណ្តាលអធ្រាត្រដែលមានភ្លើងពណ៌ស្វាយ
- Leonardo — វិចិត្រសាលវិចារណកថាដាក់បញ្ច្រាស។ សារមន្ទីរដែលមានជញ្ជាំងពណ៌ខ្មៅ ជាកន្លែងដែលចំណងជើងពណ៌ស្វាយដើរតួជាការដំឡើងជញ្ជាំង និងរូបបញ្ឈរដែលបង្កើតដោយ AI ព្យួរនៅក្នុងក្រឡាចត្រង្គក្រាស់មួយនៅខាងក្រោម។
- VEED — ជញ្ជាំងវិចិត្រសាលពណ៌សជាមួយប៊ូតុងភ្លើងពណ៌បៃតងណេអុង
- Craft Docs — រូបផ្គុំឌីជីថលសម្រាប់សៀវភៅកត់ត្រា។ ការរចនានេះស្រដៀងនឹងសៀវភៅកត់ត្រាដ៏គួរឱ្យចាប់អារម្មណ៍ និងងាយប៉ះ ដែលកំណត់ចំណាំឌីជីថលដែលមានរចនាសម្ព័ន្ធផ្សំជាមួយវាយនភាពទន់ៗ និងសរីរាង្គ។
- Letter — វិចិត្រសាលឯកជនមួយដែលមានវត្ថុបុរាណភ្លឺចែងចាំងពីការផ្ទុក។ កន្លែងតាំងពិព័រណ៍ដែលមានជញ្ជាំងពណ៌ខ្មៅ ជាកន្លែងដែលចំណងជើងដែលមានឆ្នូតៗអណ្តែតពីលើរូបចម្លាក់ក្រូមនៅលើជញ្ជាំងដែលមានពណ៌របស់វិចិត្រសាល។
- Railway — រថភ្លើង Cosmic Midnight Express។ ដំណើរដ៏ស្ងប់ស្ងាត់ និងរំភើបមួយឆ្លងកាត់លំហងងឹត និងមានពន្លឺផ្កាយ ដឹកនាំដោយសញ្ញាច្បាស់លាស់។
- Garden Eight — អត្ថបទវិចារណកថាដ៏អស្ចារ្យមួយនៅលើក្រដាសពណ៌ក្រែម។ ចំណងជើង serif ទំហំ 215px ស្ថិតនៅដាច់ដោយឡែកពីគ្នានៅលើស្បែកសត្វក្តៅឧណ្ហៗ ហ៊ុំព័ទ្ធដោយរូបចម្លាក់អណ្តែតទឹក និងលំហអវិជ្ជមានដែលរំលឹកដល់ខ្យល់សមុទ្រ - ទំព័រនេះមានអារម្មណ៍ដូចជាគម្របនៃឯកសារសិល្បៈជាជាងផ្ទាំងគ្រប់គ្រង។
- Steep — ការវិភាគពុម្ពអក្សរ Serif លើក្រដាសក្តៅ
- ElevenLabs — អត្ថបទរូបថតមួយក្នុងពណ៌ក្រែមក្តៅឧណ្ហៗ ជាមួយនឹងចំណងជើងស្រាលៗ។ សៀវភៅកត់ត្រារចនាប័ទ្ម Bauhaus—ក្រដាសពណ៌សំបកស៊ុត ទឹកថ្នាំពណ៌ខ្មៅ និងពណ៌ស្វាយ និងពណ៌ទឹកក្រូចតែមួយសម្រាប់បង្ហាញផលិតផល។
- Awesomic — សំណាញ់ស័ង្កសីសម្រាប់សរសេរអត្ថបទ ដែលមានសញ្ញាវណ្ណយុត្តិពណ៌ទឹកក្រូច ដែលរំលឹកដល់ក្រដាសពណ៌
- Monad — ទិនានុប្បវត្តិបច្ចេកទេសវិចារណកថាលើក្រដាសក្តៅ
- AI for Business — បន្ទប់តាំងបង្ហាញវិចារណកថាបែបឃោរឃៅក្នុងសម្លេងពណ៌ប្រផេះក្តៅ