Apple
ห้องสีขาวที่มีสวิตช์สีฟ้าเพียงตัวเดียว
การออกแบบของ Apple เป็นแบบอย่างของความเรียบง่าย: พื้นหลังสีขาวเกือบทั้งหมด พื้นที่ว่างสีขาวมากมาย และสีน้ำเงินสดใสเพียงสีเดียวที่ทำให้ทุกการกระทำดูตั้งใจ จุดเด่นหลักอยู่ที่การจัดวางตัวอักษร—SF Pro ที่มีระยะห่างระหว่างตัวอักษรติดลบ ซึ่งจะลดลงเมื่อขนาดตัวอักษรใหญ่ขึ้น ทำให้หัวข้อข่าวมีความชัดเจนทางสถาปัตยกรรมโดยไม่ดูหนักเกินไป ตัวผลิตภัณฑ์คือหัวใจของการออกแบบ: ภาพถ่ายผลิตภัณฑ์ขนาดใหญ่และภาพไลฟ์สไตล์เป็นส่วนสำคัญ ในขณะที่องค์ประกอบโครเมียมลดความสำคัญลงไปในกรอบบางๆ การนำทางแบบโปร่งแสง และเส้นสายที่ละเอียดอ่อน ส่วนต่างๆ สลับกันระหว่างพื้นหลังสีเทาอ่อนกับบล็อกสีเต็มรูปแบบสำหรับสื่อส่งเสริมการขาย สร้างจังหวะผ่านการเปลี่ยนแปลงขนาดมากกว่าองค์ประกอบตกแต่ง
การจัดวางหน้าเว็บเป็นแบบเต็มความกว้างโดยไม่มีการกำหนดความกว้างสูงสุดของคอนเทนเนอร์ตายตัว ส่วนต่างๆ จะขยายจากขอบถึงขอบ โดยมีบล็อกข้อความอยู่ตรงกลางที่ระยะประมาณ 980 พิกเซล การนำทางเป็นแถบหลักคงที่แถบเดียว พร้อมโฟลเดอร์ย่อยเพิ่มเติมสำหรับแต่ละผลิตภัณฑ์ที่จะปรากฏขึ้นเมื่อเลื่อนหน้าจอ เค้าโครงหลักจะอยู่ตรงกลางเสมอ: ชื่อผลิตภัณฑ์ขนาดใหญ่ คำอธิบายสั้นๆ บรรทัดเดียว ปุ่มสองปุ่ม และรูปภาพผลิตภัณฑ์ที่เติมเต็มพื้นที่ที่เหลือ ส่วนต่างๆ จะเรียงซ้อนกันในแนวตั้งโดยมีจังหวะแนวตั้งที่เหมาะสม (มากกว่า 64 พิกเซลระหว่างส่วนต่างๆ) สลับกันระหว่างพื้นหลังสี #f5f5f7 และสีอื่นๆ ส่วนล่างของหน้าเว็บเป็นแถวแนวนอนแถวเดียวของบัตรบริการแบบเต็มความกว้าง (Apple TV+, Fitness+, Music, Arcade) แต่ละบัตรเป็นบล็อกรูปภาพพร้อมข้อความซ้อนทับและปุ่มหนึ่งปุ่ม ไม่มีแถบด้านข้าง ไม่มีเค้าโครงเนื้อหาแบบหลายคอลัมน์ ไม่มีองค์ประกอบที่ไม่สมมาตร ทุกอย่างอยู่ตรงกลาง เรียงซ้อนกัน และสมมาตร
การถ่ายภาพเป็นภาษาภาพที่โดดเด่นที่สุด ภาพสินค้าจะถ่ายโดยใช้พื้นหลังสีขาวบริสุทธิ์หรือสีเทาอ่อน โดยไม่มีบริบทใดๆ ตัวสินค้าเองคือดาวเด่น ถูกแยกออกมาและส่องสว่าง ภาพไลฟ์สไตล์จะแสดงในแบนเนอร์เต็มความกว้าง โดยมักจะตัดภาพวัตถุอย่างกระชับ การไล่ระดับสี (สีฟ้าอ่อน สีชมพู สีเขียว) ทำหน้าที่เป็นพื้นหลังสำหรับส่วนต่างๆ ของสินค้า ไม่ใช่เพื่อการตกแต่ง ไอคอนมีลักษณะเรียบง่ายและใช้เส้นเป็นหลัก ความหนา 1-2 พิกเซล ในโทนสีเทาเดียวกับข้อความ ไม่มีภาพประกอบ ไม่มีกราฟิกนามธรรม ไม่มีภาพเรนเดอร์ 3 มิติ ยกเว้นภาพสินค้าเอง
จานสี
ยี่ห้อ
- Apple Blue
#0071e3— ปุ่มแอ็กชันที่เติมสี สถานะที่เลือก - สีโครมาติกแบบโต้ตอบเพียงสีเดียวที่ใช้เพียงเล็กน้อยเพื่อให้ทุกการปรากฏมีความหมาย - Link Blue
#0066cc— เส้นขอบการกระทำที่เน้นสี และลิงก์ที่ฝังอยู่ จะใช้สีที่เข้มกว่าสีฟ้าของ Apple ในกรณีที่การใช้สีเต็มพื้นที่บนแท็บเล็ตจะดูฉูดฉาดเกินไป - Signal Blue
#2997ff— กรอบตกแต่ง, เส้นขอบรูปภาพ, ขอบไอคอน - สีฟ้าอ่อนที่สุดในระบบ ใช้เพื่อสร้างบรรยากาศมากกว่าเพื่อการโต้ตอบกับผู้ใช้
เป็นกลาง
- Carbon
#1d1d1f— ข้อความหลัก เส้นขอบหัวเรื่อง เส้นนำทาง เส้นขอบการ์ด - สีหมึกหลักเกือบจะเป็นสีดำสนิท โดยมีโทนสีอบอุ่นเจืออยู่เล็กน้อย - Frost
#f5f5f7— พื้นหลังหน้าเว็บ พื้นหลังข้อความหลัก และพื้นผิวส่วนท้ายหน้าเว็บเป็นสีเทาอ่อนอันเป็นเอกลักษณ์ของ Apple ซึ่งเย็นกว่าสีขาวบริสุทธิ์เล็กน้อย - Ice
#f4f8fb— การเติมสีพื้นผิวที่สื่ออารมณ์ โทนสีที่นุ่มนวล ข้อความบนปุ่มบนพื้นหลังสีเข้ม—โทนสีฟ้าอ่อนๆ ที่ช่วยเพิ่มความมีชีวิตชีวาให้กับส่วนนี้โดยไม่ทำให้ดูโดดเด่นเกินไป - Smoke
#333333— ข้อความรอง, สีเติมในแถบนำทาง, ขอบปุ่ม - สีกลางอเนกประสงค์สำหรับขอบและไอคอนที่ต้องการความโดดเด่นมากกว่าสีเทาปานกลาง - Graphite
#474747— ข้อความนำทาง เส้นขอบนำทาง เส้นขอบลิงก์ - อยู่ในตำแหน่งกลางระหว่าง Carbon และ Smoke ในลำดับชั้นขององค์ประกอบ - Ash
#707070— ข้อความส่วนท้าย, เส้นขอบรายการ, เส้นขอบการนำทาง, ข้อความหลักที่ลดความโดดเด่น - สีเทาปานกลางสำหรับเนื้อหาที่จำเป็นต้องแสดงแต่ไม่เด่นชัด
การจัดพิมพ์
จาก 12 เป็น 56 พิกเซล · 8 ขั้นตอน
- SF Pro Display — ทดแทน: Inter · โครงร่าง 400, 600, 700 · หัวข้อข่าวและข้อความขนาดใหญ่—ขนาด 40 พิกเซลขึ้นไปใช้รูปแบบการแสดงผลที่มีช่องรับแสงแคบกว่าและการติดตามเชิงลบที่ชัดเจนกว่า ขนาด 700 สงวนไว้สำหรับเค้าโครงโฆษณา และขนาด 400 สงวนไว้สำหรับชื่อผลิตภัณฑ์ในเนื้อหาบรรณาธิการ
- SF Pro Text — ทดแทน: Inter · โครงร่าง 300, 400, 600 · ข้อความหลัก การนำทาง ปุ่ม หัวข้อย่อย — ใช้ฟอนต์ขนาด 400 สำหรับข้อความหลัก 300 สำหรับหัวข้อย่อยและป้ายกำกับที่มีคุณสมบัติ 600 สำหรับองค์ประกอบการนำทางและข้อความบนปุ่ม ระยะห่างระหว่างตัวอักษรจะลดลงตามสัดส่วนของขนาด (จาก -0.022em ถึง 12px ถึง -0.01em ถึง 44px)
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 980px |
| รัศมีการ์ด | 8px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 64px |
| ความกว้างของหน้า | 1440px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Apple และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Ui — แผนการรักษาทางคลินิกบนกระดาษด้าน
- ElevenLabs — ภาพถ่ายเชิงสารคดีในโทนสีครีมอบอุ่น พร้อมหัวข้อข่าวที่ไม่ฉูดฉาด สมุดบันทึกสไตล์เบาเฮาส์—กระดาษสีเปลือกไข่ หมึกสีดำ และสีม่วงและสีส้มเพียงเล็กน้อยสำหรับตกแต่งเพื่อแสดงสินค้า
- monopo saigon — แสงเรืองรองระยิบระยับราวกับของเหลวอยู่เบื้องหลังความเงียบงันของกองบรรณาธิการ—แกลเลอรีภาพถ่ายขาวดำที่ลอยล่องอยู่บนแสงหลอมเหลว
- Awesomic — แผ่นตาข่ายสังกะสีสำหรับงานบรรณาธิการ พร้อมเครื่องหมายวรรคตอนสีส้มที่ชวนให้นึกถึงกระดาษโปรย
- Monad — บทบรรณาธิการวารสารทางเทคนิคเกี่ยวกับกระดาษหนังอุ่น
- Dub — แผงควบคุมกระดาษข้าวแบบด้านของ Link
- Seline Analytics — โต๊ะวิเคราะห์ที่เงียบสงบ บนกระดาษอุ่นๆ
- Ventriloc — หอดูดาวบรรณาธิการที่รวบรวมข้อมูลบนกระดาษอุ่นๆ - ถ่านสีส้มเพียงก้อนเดียวที่เน้นย้ำความแม่นยำแบบขาวดำ
- Duolingo — มาสคอตประจำห้องเรียนสุดน่ารักบนกระดาษสีขาว
- Stripe — สมุดบัญชีที่เขียนด้วยหมึกสีครามบนกระจกฝ้า
- Notion — สมุดบันทึกกระดาษอุ่นๆ ท่ามกลางแสงแดดกลางวัน
- Hyer Aviation — ยามพลบค่ำในห้องนักบินเหนือกระดาษปาร์ชเมนต์ ท้องฟ้าสีซีดในยามรุ่งอรุณบรรจบกับโลโก้ตัวอักษรแบบมีเชิงขนาดเท่าลำตัวเครื่องบิน และสีดินเผาโทนอบอุ่นเพียงสีเดียวช่วย打破ความเรียบง่ายแบบขาวดำ