Apple
បន្ទប់ពណ៌សដែលមានកុងតាក់ពណ៌ខៀវតែមួយ
ការរចនារបស់ Apple គឺជាគំរូនៃការអត់ធ្មត់៖ ផ្ទាំងក្រណាត់ស្ទើរតែពណ៌ស ចន្លោះពណ៌សធំទូលាយ និងការសង្កត់សំឡេងពណ៌ខៀវភ្លឺតែមួយ ដែលធ្វើឱ្យសកម្មភាពនីមួយៗមានអារម្មណ៍ថាមានចេតនា។ ការផ្តោតសំខាន់គឺពុម្ពអក្សរ - SF Pro ជាមួយនឹងគម្លាតអក្សរអវិជ្ជមានដែលថយចុះជាមួយនឹងទំហំកើនឡើង ដែលផ្តល់ឱ្យចំណងជើងនូវភាពច្បាស់លាស់ខាងស្ថាបត្យកម្មដោយមិនធ្ងន់ពេក។ ផលិតផលគឺជាការរចនា៖ រូបថតផលិតផលធំៗ និងរូបភាពរបៀបរស់នៅលេចធ្លោ ខណៈពេលដែលធាតុ chrome ថយចុះទៅជាស៊ុមស្តើងៗ ការរុករកថ្លា និងបន្ទាត់ស្រទន់។ ផ្នែកនានាឆ្លាស់គ្នាប្រឆាំងនឹងផ្ទៃខាងក្រោយពណ៌ប្រផេះស្រាលជាមួយនឹងប្លុកពណ៌ពេញលេញសម្រាប់សម្ភារៈផ្សព្វផ្សាយ ដែលបង្កើតចង្វាក់តាមរយៈការផ្លាស់ប្តូរមាត្រដ្ឋានជាជាងធាតុតុបតែង។
ប្លង់ទំព័រគឺជាទំព័រទទឹងពេញដែលគ្មានទទឹងកុងតឺន័រអតិបរមាថេរ - ផ្នែកលាតសន្ធឹងពីគែមមួយទៅគែមមួយ ដោយប្លុកអត្ថបទស្ថិតនៅចំកណ្តាលប្រហែល 980px។ ការរុករកគឺជារបារសកលតែមួយថេរដែលមានថតរងបន្ថែមសម្រាប់ផលិតផលនីមួយៗដែលលេចឡើងនៅលើរមូរ។ ប្លង់សំខាន់តែងតែស្ថិតនៅចំកណ្តាល៖ ឈ្មោះផលិតផលធំមួយ ពាក្យស្លោកបន្ទាត់តែមួយ ប៊ូតុងថ្នាំគ្រាប់ពីរ បន្ទាប់មករូបភាពផលិតផលដែលបំពេញច្រកមើលដែលនៅសល់។ ផ្នែកត្រូវបានដាក់ជាជង់បញ្ឈរជាមួយនឹងចង្វាក់បញ្ឈរដ៏ធំទូលាយ (64px+ រវាងផ្នែកនានា) ឆ្លាស់គ្នា #f5f5f7 និងផ្ទៃខាងក្រោយពណ៌។ ទំព័រខាងក្រោមគឺជាជួរដេកផ្ដេកតែមួយនៃកាតសេវាកម្មទទឹងពេញ (Apple TV+, Fitness+, Music, Arcade) ដែលនីមួយៗជាប្លុករូបថតដែលមានអក្សរដាក់ពីលើ និងប៊ូតុងថ្នាំគ្រាប់។ គ្មានរបារចំហៀង គ្មានប្លង់មាតិកាច្រើនជួរឈរ គ្មានសមាសភាពមិនស៊ីមេទ្រី - អ្វីគ្រប់យ៉ាងត្រូវបានស្ថិតនៅចំកណ្តាល ជង់ និងស៊ីមេទ្រី។
ការថតរូបគឺជាភាសាដែលមើលឃើញលេចធ្លោ។ រូបថតផលិតផលត្រូវបានថតប្រឆាំងនឹងផ្ទៃខាងក្រោយពណ៌សសុទ្ធ ឬពណ៌ប្រផេះទន់ ដោយគ្មានបរិបទណាមួយឡើយ - ឧបករណ៍នេះគឺជាផ្កាយ ដាច់ដោយឡែក និងបំភ្លឺ។ រូបថតរបៀបរស់នៅត្រូវបានបង្ហាញនៅក្នុងបដាទទឹងពេញ ជារឿយៗជាមួយវត្ថុដែលត្រូវបានច្រឹបយ៉ាងតឹងរ៉ឹង។ ជម្រាលពណ៌ (ពណ៌ខៀវ pastel ពណ៌ផ្កាឈូក ពណ៌បៃតង) បម្រើជាផ្ទៃខាងក្រោយសម្រាប់ផ្នែកផលិតផល មិនមែនជាការតុបតែងទេ។ រូបតំណាងគឺតិចតួចបំផុត និងផ្អែកលើបន្ទាត់ កម្រាស់ 1-2px ក្នុងមាត្រដ្ឋានពណ៌ប្រផេះដូចគ្នានឹងអត្ថបទ។ គ្មានរូបភាព គ្មានក្រាហ្វិកអរូបី គ្មានការបង្ហាញ 3D លើកលែងតែរូបថតផលិតផលខ្លួនឯង។
ក្ដារលាយពណ៌
ម៉ាក
- Apple Blue
#0071e3— ប៊ូតុងសកម្មភាពដែលបានបំពេញ ស្ថានភាពដែលបានជ្រើសរើស - ពណ៌ chromatic អន្តរកម្មតែមួយគត់ដែលត្រូវបានប្រើប្រាស់តិចតួច ដើម្បីធ្វើឱ្យរូបរាងនីមួយៗមានអត្ថន័យ។ - Link Blue
#0066cc— ស៊ុមសកម្មភាពដែលបានបន្លិច តំណភ្ជាប់ដែលបានបង្កប់ - ពណ៌ឆ្អែតជាង Apple Blue ត្រូវបានប្រើនៅកន្លែងដែលថេប្លេតដែលពេញនឹងភ្លឺពេក។ - Signal Blue
#2997ff— ស៊ុមតុបតែង គ្រោងរូបភាព ស៊ុមរូបតំណាង - ពណ៌ខៀវស្រាលបំផុតនៅក្នុងប្រព័ន្ធ ដែលប្រើសម្រាប់បរិយាកាសជាជាងសម្រាប់អន្តរកម្មរបស់អ្នកប្រើប្រាស់។
អព្យាក្រឹត
- Carbon
#1d1d1f— អត្ថបទសំខាន់ ស៊ុមចំណងជើង បន្ទាត់រុករក ស៊ុមកាត - ពណ៌ទឹកថ្នាំលេចធ្លោស្ទើរតែខ្មៅ ជាមួយនឹងភាពកក់ក្តៅបន្តិច។ - Frost
#f5f5f7— ផ្ទាំងទំព័រ ផ្ទៃខាងក្រោយអត្ថបទសំខាន់ និងផ្ទៃបាតកថាមានពណ៌ប្រផេះស្រាលពិសេសរបស់ Apple ដែលត្រជាក់ជាងពណ៌សសុទ្ធបន្តិច។ - Ice
#f4f8fb— ការបំពេញផ្ទៃដែលបង្ហាញអារម្មណ៍ ពណ៌ស្រាលៗ អត្ថបទប៊ូតុងនៅលើផ្ទៃខាងក្រោយងងឹត — ពណ៌ខៀវស្រាលៗដែលធ្វើឱ្យផ្នែកនោះមានភាពរស់រវើកដោយមិនធ្វើឱ្យវាលេចធ្លោ។ - Smoke
#333333— អក្សរបន្ទាប់បន្សំ ការបំពេញការរុករក ស៊ុមប៊ូតុង - ពណ៌អព្យាក្រឹតដែលអាចប្រើប្រាស់បានច្រើនយ៉ាងសម្រាប់ស៊ុម និងរូបតំណាងដែលត្រូវការចំណុចលេចធ្លោច្រើនជាងពណ៌ប្រផេះមធ្យម។ - Graphite
#474747— អត្ថបទរុករក ស៊ុមរុករក ស៊ុមតំណភ្ជាប់ - កាន់កាប់ទីតាំងមធ្យមរវាងកាបូន និងផ្សែងនៅក្នុងឋានានុក្រមធាតុ។ - Ash
#707070— អត្ថបទបាតកថា ស៊ុមបញ្ជី ស៊ុមរុករក អត្ថបទតួអត្ថបទដែលបិទសំឡេង - ពណ៌ប្រផេះមធ្យមសម្រាប់ខ្លឹមសារដែលត្រូវបង្ហាញ ប៉ុន្តែមិនលេចធ្លោ។
អក្សរសាស្ត្រ
ពី 12 ដល់ 56px · 8 ជំហាន
- SF Pro Display — ការជំនួស៖ Inter · គ្រោង 400, 600, 700 · ចំណងជើង និងអក្សរធំៗ—ទំហំ 40px+ ប្រើទម្រង់បង្ហាញសម្រាប់រន្ធតូចចង្អៀត និងការតាមដានអវិជ្ជមានខ្លាំងជាង។ 700 ត្រូវបានរក្សាទុកសម្រាប់ប្លង់ផ្សាយពាណិជ្ជកម្ម និង 400 គឺសម្រាប់ឈ្មោះផលិតផលនៅក្នុងខ្លឹមសារវិចារណកថា។
- SF Pro Text — ការជំនួស៖ Inter · គ្រោង 300, 400, 600 · អត្ថបទតួអត្ថបទ ការរុករក ប៊ូតុង ចំណងជើងរង — ពុម្ពអក្សរដែលដំណើរការ; ៤០០ សម្រាប់អត្ថបទតួអត្ថបទ ៣០០ សម្រាប់ចំណងជើងរង និងស្លាកដែលមានលក្ខណៈសម្បត្តិគ្រប់គ្រាន់ ៦០០ សម្រាប់ធាតុរុករក និងអត្ថបទប៊ូតុង; គម្លាតអក្សរអវិជ្ជមានថយចុះសមាមាត្រទៅនឹងទំហំ (ពី -០.០២២em ដល់ ១២px ដល់ -០.០១em ដល់ ៤៤px)។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | មធ្យម |
| ជំហានមូលដ្ឋាន | 12px |
| កាំប៊ូតុង | 980px |
| កាំកាត | 8px |
| ស្រមោល | គ្មានព្រំដែនជំនួសឱ្យស្រមោល |
| រវាងផ្នែកនានា | 64px |
| ទទឹងទំព័រ | 1440px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Apple ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- Studio — ជញ្ជាំងវិចិត្រសាលមួយកំពុងមានចលនា។ អេក្រង់នីមួយៗតំណាងឱ្យផ្ទៃតាំងពិព័រណ៍ពណ៌ប្រផេះដ៏ស្ងប់ស្ងាត់មួយ ដែលសម្ភារៈអក្សរសាស្ត្រ និងស្នាដៃច្នៃប្រឌិតដែលត្រួតស៊ីគ្នាប្រកួតប្រជែងគ្នាដើម្បីទាក់ទាញចំណាប់អារម្មណ៍។
- Mollie — បញ្ជរក្រដាសកាស្មៀរ សៀវភៅបញ្ជីពណ៌ខ្មៅ។ ទុកកន្លែងទំនេរពណ៌សច្រើនសម្រាប់ការរចនាអត្ថបទជុំវិញអត្ថបទពណ៌ខ្មៅ បន្ទាប់មកពង្រឹងចំណុចទាក់ទងនឹងផលិតផលជាមួយក្រែមក្តៅៗ កាហ្វេអេស្ព្រេសសូពណ៌ត្នោត និងរូបថតដែលអាចប៉ះពាល់បាននៃវិធីទូទាត់ជាក់ស្តែង។
- Basis Theory — ម៉ាស៊ីនទូទាត់ប្រាក់នៅក្នុងស្ទូឌីយោរចនា។ ក្រដាសបច្ចេកទេសពណ៌ស ស្រទាប់ប្រតិបត្តិការថ្លាដែលត្រួតស៊ីគ្នា និងធាតុត្រួតពិនិត្យពណ៌ខៀវស្រងាត់តែមួយកំណត់ទិសដៅដែលមើលឃើញ។
- CleanShot X — ស្ទូឌីយោមួយដែលមានផ្ទៃតុដែលមានភ្លើងពណ៌ខៀវ។ បង្កើតចន្លោះពណ៌សស្ងប់ស្ងាត់ជុំវិញអក្សរពណ៌ខ្មៅតូច បន្ទាប់មកអនុញ្ញាតឱ្យការគ្រប់គ្រងពណ៌ខៀវសម្បូរបែប និងរូបភាពផលិតផល Mac ជាស្រទាប់ៗក្លាយជាចំណុចកណ្តាល។
- Modern Treasury — សៀវភៅបញ្ជីរតនាគារលើក្រដាសក្រាហ្វ។ បង្កើតទំព័រដែលស្រដៀងនឹងសន្លឹកប្រតិបត្តិការពណ៌សស្ងាត់ៗ ដែលលំហូរសាច់ប្រាក់ត្រូវបានបង្ហាញជាមួយនឹងបន្ទាត់ល្អិតៗ ណូតដែលមានស្លាក និងការគ្រប់គ្រងដែលលាក់បាំងយ៉ាងច្បាស់លាស់។
- Basha-Franklin — ក្រឡាចត្រង្គវិចិត្រសាលមួយនៅក្រោមធ្នឹមពណ៌ស។ ប្រើពណ៌ក្តៅ #f4ede6 រចនាសម្ព័ន្ធពណ៌ខ្មៅស្រាលៗ និងជួរឈរមិនស៊ីមេទ្រីដោយផ្អែកលើរូបថតដែលមើលទៅដូចជាផលប័ត្រស្ថាបត្យកម្មដែលបានបោះពុម្ព។
- Bajgart Office — ជញ្ជាំងវិចិត្រសាលវិចារណកថា។ ប្រើកន្លែងទំនេរពណ៌សធំមួយដែលពុម្ពអក្សរ serif ស្រទន់ៗ និងបំណែកផលប័ត្រមានទម្ងន់មើលឃើញច្រើនជាងធាតុចំណុចប្រទាក់ដែលស្រោបដោយក្រូម។
- Heptabase — តុដែលមានពន្លឺថ្ងៃ។ ផ្ទៃក្តៅដូចក្រដាស ការគ្រប់គ្រងពណ៌ធ្យូង និងបង្អួចអណ្តែតសម្រាប់ការស្រាវជ្រាវបង្កើតអារម្មណ៍នៃកន្លែងធ្វើការដែលមានរបៀបរៀបរយជាជាងផ្ទាំងគ្រប់គ្រងកម្មវិធី។
- Bejamas — អាវផាយ៉ាម៉ា—ពណ៌កំបោរអាស៊ីតឆ្លងកាត់កញ្ចក់ខ្មៅ។ បង្កើតទំព័រវិចារណកថាពណ៌ប្រផេះស្រាលដែលស្ងប់ស្ងាត់ត្រូវបានរំខានដោយបន្ទះពណ៌ខ្មៅដ៏ទាក់ទាញ ដែលឆ្នូតពណ៌បៃតងព្រិលៗប្រសព្វនឹងផ្ទៃ។
- Baba — កំណត់ចំណាំយកចិត្តទុកដាក់នៅក្រោមពន្លឺព្រះអាទិត្យពណ៌ក្រហម។ បង្កើតឆ្នូតពណ៌ធំទូលាយពណ៌ក្រហមជុំវិញផ្ទៃព័ត៌មានពណ៌ស ផ្កាឈូក និងក្រែម ដោយប្រើរូបថតមនុស្សជាចំណុចកណ្តាលអារម្មណ៍។
- Grafana Labs — បន្ទប់ត្រួតពិនិត្យនៃស្ថានីយ៍សញ្ញា Sunrise។ កន្លែងធ្វើការពណ៌ប្រផេះ-សដ៏ស្ងប់ស្ងាត់មួយ រួមបញ្ចូលគ្នាជាមួយនឹងជម្រាលផ្តេកធំទូលាយបួនពណ៌ និងសញ្ញាចំណុចប្រទាក់ពណ៌ខៀវច្បាស់លាស់។
- Kagi — បន្ទប់អានដាច់ដោយឡែកមួយ។ បង្កើតចន្លោះពណ៌សបើកចំហរជុំវិញអក្សរក្រាហ្វីតដិត ដោយប្រើការសង្កត់សំឡេងពណ៌ស្វាយស្រាលៗ និងផ្ទៃពណ៌ pastel ក្តៅៗ ដើម្បីបំបែកភាពស្ងប់ស្ងាត់។