Ui
แผนการรักษาทางคลินิกบนกระดาษด้าน
shadcn/ui คือเวิร์กช็อปสำหรับการสร้างระบบการออกแบบขาวดำ: พื้นหลังสีขาวสะอาดตา พื้นผิวสีเทาอ่อนอบอุ่น และการ์ดที่มีรัศมีขนาดใหญ่จัดวางอยู่บนขอบที่แนบเนียนที่สุด อินเทอร์เฟซแทบจะไร้สีโดยสิ้นเชิง—ข้อความสีดำ พื้นผิวสีขาว โทนสีเทาเป็นสีรอง—โดยมีสีแดงที่โดดเด่นเพียงสีเดียวสงวนไว้สำหรับสถานะข้อผิดพลาดเท่านั้น การจัดวางตัวอักษรอาศัยความเป็นกลางทางเรขาคณิตของ Geist โดยมีความสูงของตัวอักษรที่กระชับบนหน้าจอ สร้างความรู้สึกสงบเหมือนโค้ด ซึ่งให้ความรู้สึกเหมือนโครงสร้างพื้นฐานของนักพัฒนามากกว่าผลิตภัณฑ์สำหรับผู้บริโภค
ภาพประกอบมีน้อยมาก—ระบบประกอบด้วยส่วนติดต่อผู้ใช้เกือบทั้งหมด ไม่มีภาพถ่ายหลัก ภาพประกอบ หรือกราฟิกตกแต่งใดๆ การสาธิตผลิตภัณฑ์นำเสนอในรูปแบบแบบจำลองส่วนประกอบ (การ์ด ช่องป้อนข้อมูล ปุ่ม) ในรูปแบบตาราง ซึ่งทำหน้าที่ทั้งเป็นเอกสารและเนื้อหาภาพ ไอคอนเป็นเส้นเรขาคณิตบางๆ (น่าจะยืมมาจาก Lucide) หนา 1.5–2 พิกเซล ในสี #0a0a0a หรือ #737373 ใช้เพียงเล็กน้อยเพื่อเป็นตัวบ่งชี้การทำงาน ภาษาภาพคือส่วนประกอบ UI เอง—หน้าเว็บทำหน้าที่เป็นคู่มือสไตล์ที่มีชีวิต ซึ่งทุกองค์ประกอบที่มองเห็นได้คือองค์ประกอบการออกแบบที่มองเห็นได้
จานสี
เป็นกลาง
- Canvas
#f5f5f5— พื้นหลังหน้าเว็บ, การเติมสีพื้นผิวแบบนุ่มนวล, ปุ่มเพิ่มเติม - Paper
#ffffff— พื้นผิวการ์ด, พื้นหลังป๊อปอัพ, สีเติมปุ่มหลัก - Surface Alt
#fafafa— พื้นหลังแถบด้านข้าง, ตัวเลือกการ์ดที่ไม่รบกวน, สถานะว่างของช่องป้อนข้อมูล - Ink
#0a0a0a— ข้อความหลัก หัวข้อ ป้ายกำกับปุ่ม เส้นขอบไอคอน - Ink Soft
#171717— ภาพพื้นหลังปุ่มพร้อมการเติมสี และข้อความเพิ่มเติมบนพื้นผิวสีอ่อน - Mid Gray
#737373— ข้อความหลัก ข้อความตัวอย่าง ป้ายกำกับเสริม และการเติมสีไอคอนในขณะที่ไม่ได้แสดงผล จะถูกปิดเสียงทั้งหมด
การจัดพิมพ์
จาก 12 เป็น 48 พิกเซล · 8 ขั้นตอน
- Geist — ทดแทน: Inter · โครงร่าง 400, 500, 600 · ข้อความทั้งหมดในอินเทอร์เฟซ—ข้อความเนื้อหาใช้ความหนาเส้น 14px/400 หัวข้อใช้ความหนาเส้น 24–48px/600 และปุ่มใช้ความหนาเส้น 13–14px/500 รูปทรงเรขาคณิตของตัวอักษรและความหนาเส้นที่สม่ำเสมอของ Geist สร้างความรู้สึกที่เป็นกลางสำหรับเครื่องมือสำหรับนักพัฒนา ความหนาเส้น 600 พร้อมระยะห่างระหว่างตัวอักษร 48px และระยะห่างระหว่างตัวอักษร -0.05em ช่วยให้หัวข้อมีความชัดเจนและมั่นใจ ดูเหมือนว่าได้รับการคิดมาอย่างดี ไม่ใช่ดูเหมือนถูกแก้ไข
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 18px |
| รัศมีการ์ด | 24px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 48-80px |
| ความกว้างของหน้า | 1280px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Ui และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Ventriloc — หอดูดาวบรรณาธิการที่รวบรวมข้อมูลบนกระดาษอุ่นๆ - ถ่านสีส้มเพียงก้อนเดียวที่เน้นย้ำความแม่นยำแบบขาวดำ
- Geniestudio — สมุดบันทึกที่ใช้แสงอ่อนๆ ในตอนกลางวัน—แบบที่มีขอบกว้างและเส้นปากกาหนาๆ เพียงเส้นเดียว
- xAI — ครีมบำรุงผิวอุ่นๆ พร้อมยาเม็ดสีดำ
- Cal — ความเรียบง่ายแบบขาวดำที่ใช้งานได้จริง แนวทางที่คำนึงถึงมนุษย์ ระบบที่ให้ความสำคัญกับความชัดเจนและฟังก์ชันการใช้งานผ่านโทนสีขาวดำที่เข้มงวด แต่ลดทอนความเรียบง่ายลงด้วยตัวอักษรที่เป็นมิตรและรูปทรงโค้งมน
- Scale — ห้องแล็บภาพถ่ายคุณภาพสูงระดับพิพิธภัณฑ์ ผสานกับโครงการทางเทคนิค
- Contractbook — สัญญาบนกระดาษสีครีมภายใต้ท้องฟ้าสีน้ำเงินเข้ม
- AutoSend — สตูดิโอหินที่อบอุ่นพร้อมแสงสีม่วงดวงเดียว ที่ซึ่งหัวข้อแบบตัวอักษรมีเชิงและคำกระตุ้นการตัดสินใจสีครามสดใสอยู่ร่วมกันในพื้นที่เงียบสงบเกือบเป็นสีขาว
- Air — ประติมากรรม "ท้องฟ้ายามเที่ยงคืนผ่านกระจก"
- SpatialChat — ชีพจรสีม่วงบนกระดาษ parchment สีขาว
- Squarespace — แกลเลอรี่ภาพยนตร์ขาวดำ
- Giga — ขอบฟ้ายามเที่ยงคืนเหนือหินออบซิเดียนที่ปกคลุมด้วยน้ำค้างแข็ง
- Supabase — โปรแกรมแก้ไขโค้ดตอนเที่ยงคืนพร้อมจุดสีเขียวเรืองแสง—พัลส์สีเดียวบนทะเลฝุ่นถ่านหิน