Notion

សៀវភៅកត់ត្រាក្រដាសក្តៅមួយនៅក្រោមពន្លឺថ្ងៃត្រង់

ចំណុចប្រទាក់របស់ Notion មើលទៅដូចជាសៀវភៅកត់ត្រាក្រដាសដ៏ពេញនិយមនៅក្នុងពន្លឺថ្ងៃ៖ ផ្ទាំងក្រណាត់ក្តៅឧណ្ហៗ និងក្រែម (#f6f5f4) ដែលមានអារម្មណ៍ថាអាចប៉ះបានជាជាងគ្មានមេរោគ អក្សរ sans-serif ដ៏ធំទូលាយផ្តល់ទម្ងន់ដល់ច្បាប់ចម្លងផលិតផល និងពណ៌ដែលប្រើជាវណ្ណយុត្តិដ៏កម្រ - "ថ្នាំគ្រាប់" ពណ៌ peach បន្លិចកិរិយាស័ព្ទ ពណ៌ខៀវតែមួយយុថ្កាសកម្មភាពសំខាន់ និងអារេនៃពណ៌សង្កត់សំឡេង (ផ្កាថ្ម ពណ៌លឿង មេឃ ពាក់កណ្តាលអធ្រាត្រ) ពណ៌ផ្ទៃខាងក្រោយកាតដូចជាស្ទីគ័រ។ កាតត្រូវបានរៀបចំនៅលើផ្ទាំងក្រណាត់ដែលមានព្រំដែន និងជ្រុងស្តើង - គ្មានស្រមោល គ្មានពណ៌ chrome - ដូចជាផ្នែកដែលមានបន្ទាត់នៃសៀវភៅកត់ត្រា Moleskine។ ចលនាមានភាពរីករាយ និងមានលក្ខណៈរហ័សរហួន ជាមួយនឹងការផ្លាស់ប្តូររលូននៅ 200ms និងចលនាតួអង្គរហ័សរហួនដែលនាំមកនូវជីវិតដល់ចំណុចប្រទាក់ដោយមិនចាំបាច់តុបតែង។

នៅចំកណ្តាល ទទឹងអតិបរមាត្រូវបានកំណត់ត្រឹមប្រហែល 1440px។ ធាតុសំខាន់គឺជាជង់នៅចំកណ្តាល៖ ជួរនៃនិមិត្តសញ្ញា → ចំណងជើងធំពីរជួរដែលមានគ្រាប់ពណ៌ដែលបានបង្កប់ → ចំណងជើងរង → ជួរដែលមានប៊ូតុងអំពាវនាវឱ្យធ្វើសកម្មភាពពីរ → គំរូ UI ផលិតផលធំមួយ។ នៅខាងក្រោមធាតុសំខាន់ ផ្នែកនានាឆ្លាស់គ្នារវាងក្រឡាចត្រង្គនៃកាតពណ៌ស និងបន្ទះសង្កត់សំឡេងពណ៌ពេញ។ ជញ្ជាំងឡូហ្គោគឺជាក្រឡាចត្រង្គជួរតែមួយនៅចំកណ្តាលនៃឡូហ្គោដៃគូក្នុងមាត្រដ្ឋានប្រផេះ។ ប្លុកលក្ខណៈពិសេសប្រើប្លង់ជួរឈរពីរ (អក្សរនៅខាងឆ្វេង បន្ទះពណ៌នៅខាងស្តាំ) ឆ្លាស់គ្នាពីឆ្វេងទៅស្តាំរវាងផ្នែកនានា។ ផ្នែក "សួរជំនួយការរបស់អ្នកតាមតម្រូវការ" ប្រើក្រឡាចត្រង្គកាត 2x2 ដែលកាតខាងលើយកទទឹងពេញ ហើយជួរខាងក្រោមត្រូវបានបែងចែកជាពីរជួរឈរស្មើគ្នា។ ចន្លោះរវាងផ្នែកនានាមានទំហំធំទូលាយ (~80px) ដែលបង្កើតចង្វាក់បញ្ឈរស្ងប់ស្ងាត់។ ការរុករកគឺជារបារកំពូលដែលមានកម្ពស់ 64px ថេរជាមួយនឹងធាតុរុករកនៅចំកណ្តាល និងប៊ូតុងសកម្មភាពតម្រឹមស្តាំ។

រូបភាពបង្ហាញមានសារៈសំខាន់បំផុត ដោយគ្មានរូបថត។ ភាសាដែលមើលឃើញត្រូវបានបង្កើតឡើងនៅលើនិមិត្តសញ្ញារាបស្មើ ដែលមានរូបភាពបង្ហាញ (គែមមូលជារង្វង់ពណ៌ 2px) ធាតុតុបតែងអរូបី (រូបចម្លាក់ដែលគូរដោយដៃ ពន្លឺចែងចាំង ព្រួញ រាងផ្កា) និងគំរូនៃចំណុចប្រទាក់អ្នកប្រើប្រាស់ផលិតផល។ និមិត្តសញ្ញាលេចឡើងនៅក្នុងបង្អួចមេជាជួរផ្ដេកនៃរូបតំណាងចំនួនប្រាំពីរ ហើយត្រូវបានខ្ចាត់ខ្ចាយពាសពេញទំព័រជាសញ្ញាវណ្ណយុត្តិដ៏រីករាយ។ រូបថតអេក្រង់ផលិតផលគឺជាធាតុដែលមើលឃើញ "ពិតប្រាកដ" តែមួយគត់៖ ពួកវាបង្ហាញចំណុចប្រទាក់ Notion ពិតប្រាកដ (ក្តារ Kanban ទិដ្ឋភាពឯកសារ បន្ទះភ្នាក់ងារ AI) ជាមួយនឹងសំណុំធាតុពេញលេញ និងទិន្នន័យពិតប្រាកដ។ គំរូផលិតផលនៅក្នុងបង្អួចមេមានទំហំធំ កណ្តាល និងបញ្ចេញស្រមោលតែមួយដែលបំបែកវាចេញពីផ្ទាំងក្រណាត់។ មិនមានរូបថតរបៀបរស់នៅ គ្មានរូបភាពស្តុក គ្មានការបង្ហាញ 3D អរូបីទេ។

SaaS សុទ្ធ តិចតួចបំផុត វិចារណកថា

https://notion.so

ក្ដារលាយពណ៌

ម៉ាក

Notion Blue #0075de — ធាតុសំខាន់ដែលបំពេញប៊ូតុងអំពាវនាវឱ្យធ្វើសកម្មភាព (CTA) ដែលជាការសង្កត់សំឡេងនៅក្នុងការរុករកសកម្ម ប៊ូតុងសកម្មភាពដែលបំពេញគឺជាគ្រោងការណ៍ពណ៌តែមួយគត់នៅក្នុងប្រព័ន្ធស្ទើរតែពណ៌តែមួយដែលឆ្អែតគ្រប់គ្រាន់ដើម្បីត្រូវបានយល់ឃើញថាជាកុងតាក់។

អព្យាក្រឹត

Paper Warmth #f6f5f4 — ផ្ទាំងទំព័រ ផ្ទៃខាងក្រោយបង្អួចមេ និងផ្ទៃខាងក្រោយផ្នែក សុទ្ធតែមានពណ៌ក្តៅបន៍បន្តិច ដែលផ្តល់ឱ្យប្រព័ន្ធនូវអារម្មណ៍អាណាឡូក និងអាចប៉ះពាល់បាន។
Pure White #ffffff — ផ្ទៃកាត បន្ទះដែលលើកឡើងខ្ពស់ ផ្ទៃខាងក្រោយឡូហ្គោ អក្សរផ្ទុយគ្នានៅលើកាតពណ៌ខ្មៅ។
Ink Black #000000 — អត្ថបទសំខាន់ តំណភ្ជាប់រុករក ចំណងជើង - ប្រើជាមួយតម្លាភាពផ្សេងៗគ្នា (100%, 95%, 90%, 60%, 40%, 20%) ដើម្បីបង្កើតឋានានុក្រមដោយមិនចាំបាច់បន្ថែមពណ៌ថ្មី។
Charcoal #111111 — ជម្រើសអក្សរងងឹតសម្រាប់តំបន់ UI ទាំងនោះដែលពណ៌ខ្មៅសុទ្ធមើលទៅអាក្រក់ពេក។
Stone #757575 — អត្ថបទរុករកបន្ទាប់បន្សំ អត្ថបទជំនួយដែលបានបិទសំឡេង ស្លាកប៊ូតុងដែលបានបិទ - ទឹកថ្នាំអាល់ហ្វា 60%
Graphite #615d59 — អត្ថបទសំខាន់មានសម្លេងកក់ក្តៅ - ប្រផេះត្នោត ដែលស៊ីសង្វាក់គ្នាជាមួយផ្ទៃខាងក្រោយកក់ក្តៅ។

អក្សរសាស្ត្រ

ពី 12 ដល់ 96px · 10 ជំហាន

NotionInter — ការជំនួស៖ Inter · គ្រោង 400, 500, 600, 700 · ពុម្ពអក្សរ sans-serif សំខាន់គឺជាពុម្ពអក្សរមនុស្សនិយមធរណីមាត្រដែលមានភាពខុសប្លែកគ្នាបន្តិចបន្តួច ដែលប្រើក្នុងទំហំ 400 សម្រាប់អត្ថបទ 500 សម្រាប់ការរុករក/ចំណុចប្រទាក់អ្នកប្រើប្រាស់ និង 600-700 សម្រាប់ចំណងជើង។ មាត្រដ្ឋានពុម្ពអក្សរប្រើគម្លាតអក្សរអវិជ្ជមានខ្លាំងនៅទំហំធំជាង (-4.6px នៅ 96px, -2px នៅ 72px) ដែលធ្វើឱ្យចំណងជើងមានអារម្មណ៍តូចចង្អៀត និងមានទំនុកចិត្តជាង ជាជាងខ្យល់អាកាស។
Lyon Text — ការជំនួស៖ Source Serif Pro · គ្រោង 400 · ពុម្ពអក្សរអក្សរសាស្ត្រប្រភេទ serif ដែលត្រូវបានរក្សាទុកសម្រាប់ផ្នែកនីមួយៗនៃអត្ថបទសំខាន់ និងសេចក្ដីផ្ដើមផ្នែក ត្រូវបានប្រើតិចតួច (បួនដង) ដើម្បីផ្ដល់ទម្ងន់អក្សរសាស្ត្រ ស្រដៀងនឹងសម្រង់សម្ដីក្នុងប្លង់ទស្សនាវដ្ដី។ វាដំណើរការជាការសង្កត់សំឡេងជាប្រព័ន្ធជាជាងឋានានុក្រមស្របគ្នា។

ចន្លោះពេល និងទម្រង់

គោលបំណង	អត្ថន័យ
ដង់ស៊ីតេ	មធ្យម
ជំហានមូលដ្ឋាន	8px
កាំប៊ូតុង	8px
កាំកាត	12px
ស្រមោល	គ្មានព្រំដែនជំនួសឱ្យស្រមោល
រវាងផ្នែកនានា	80px
ទទឹងទំព័រ	1440px

បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Notion ហើយបំពេញវា

បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។

បង្កើតគេហទំព័រតាមរចនាប័ទ្មនេះ

រចនាប័ទ្មស្រដៀងគ្នា

Mollie — បញ្ជរក្រដាសកាស្មៀរ សៀវភៅបញ្ជីពណ៌ខ្មៅ។ ទុកកន្លែងទំនេរពណ៌សច្រើនសម្រាប់ការរចនាអត្ថបទជុំវិញអត្ថបទពណ៌ខ្មៅ បន្ទាប់មកពង្រឹងចំណុចទាក់ទងនឹងផលិតផលជាមួយក្រែមក្តៅៗ កាហ្វេអេស្ព្រេសសូពណ៌ត្នោត និងរូបថតដែលអាចប៉ះពាល់បាននៃវិធីទូទាត់ជាក់ស្តែង។
Kagi — បន្ទប់អានដាច់ដោយឡែកមួយ។ បង្កើតចន្លោះពណ៌សបើកចំហរជុំវិញអក្សរក្រាហ្វីតដិត ដោយប្រើការសង្កត់សំឡេងពណ៌ស្វាយស្រាលៗ និងផ្ទៃពណ៌ pastel ក្តៅៗ ដើម្បីបំបែកភាពស្ងប់ស្ងាត់។
Milanote — Milanote គឺជាស្ទូឌីយោច្នៃប្រឌិតដែលឧទ្ទិសដល់ការងារ។ បង្កើតទំព័ររចនាប័ទ្មវិចិត្រសាលវិចារណកថាដោយប្រើក្តាររូបភាពអណ្តែត៖ ជញ្ជាំងដែលមានស៊ុមងងឹត កន្លែងបង្ហាញពណ៌ស និងរូបថតអេក្រង់ដែលមើលទៅដូចជាវត្ថុពិតដែលមានជម្រៅទន់។
Co2 — ផែនទីអាកាសធាតុក្នុងពន្លឺរដូវរងា។ បង្កើតទំព័រដូចជាទេសភាពឯកសារពីលើអាកាស ដែលចំណងជើង serif ទិន្នន័យដែលមានលេខកូដប្រភេទ និងរូបភាពទឹកកកបន្លិចរឹមពណ៌សធំទូលាយ។
GitButler — ពណ៌ខៀវស្រងាត់នៅចុងបញ្ចប់នៃអត្ថបទ។ ការរួមបញ្ចូលគ្នានៃចំណងជើង serif ដែលមានកម្រិតពណ៌ខ្ពស់ជាមួយនឹងក្រឡាចត្រង្គបច្ចេកទេសស្រទន់ ផ្ទៃក្រាហ្វីតក្តៅ និងការសង្កត់សំឡេងពណ៌ខៀវស្រងាត់។
ElevenLabs — អត្ថបទរូបថតមួយក្នុងពណ៌ក្រែមក្តៅឧណ្ហៗ ជាមួយនឹងចំណងជើងស្រាលៗ។ សៀវភៅកត់ត្រារចនាប័ទ្ម Bauhaus—ក្រដាសពណ៌សំបកស៊ុត ទឹកថ្នាំពណ៌ខ្មៅ និងពណ៌ស្វាយ និងពណ៌ទឹកក្រូចតែមួយសម្រាប់បង្ហាញផលិតផល។
Awesomic — សំណាញ់ស័ង្កសីសម្រាប់សរសេរអត្ថបទ ដែលមានសញ្ញាវណ្ណយុត្តិពណ៌ទឹកក្រូច ដែលរំលឹកដល់ក្រដាសពណ៌
Monad — ទិនានុប្បវត្តិបច្ចេកទេសវិចារណកថាលើក្រដាសក្តៅ
Dub — បន្ទះត្រួតពិនិត្យក្រដាសអង្ករម៉ាត់របស់ Link
Seline Analytics — តុវិភាគស្ងាត់ៗលើក្រដាសក្តៅឧណ្ហៗ
Anthropic — ទិនានុប្បវត្តិវិទ្យាសាស្ត្រលើក្រដាស vellum ក្តៅៗ—ផ្ទៃភ្លុកស្ងប់ស្ងាត់ ចំណងជើងវិចារណកថាដែលមានស្នាមឆ្នូតៗ និងការសង្កត់សំឡេងដីឥដ្ឋតែមួយ ដែលលេចឡើងតែនៅពេលត្រូវការសកម្មភាពប៉ុណ្ណោះ។
Calendly — ទឹកថ្នាំពណ៌ខៀវចាស់លើថ្មម៉ាបត្រជាក់